/* ── Website Việt Thảo Mộc — concept "mạch nông sản" (owner duyệt 09/08/2026)
   Bảng màu: xanh thảo mộc đậm chủ đạo · olive bổ trợ · kem nền · cam nông sản
   điểm nhấn · đỏ VTM chỉ dùng cho logo + CTA. Font Be Vietnam Pro (tự host). */

@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/bvp-400-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/bvp-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/bvp-600-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/bvp-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/bvp-800-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/bvp-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --xanh-dam: #17402a;      /* nền section đậm */
  --xanh: #1e4f33;          /* chủ đạo */
  --xanh-nhat: #2c6a45;
  --olive: #7c9a4c;
  --kem: #f6f2e7;
  --kem-dam: #efe9d8;
  --trang: #ffffff;
  --cam: #d98e2b;
  --do: #c31432;            /* đỏ logo VTM — chỉ CTA */
  --do-dam: #a00f28;
  --muc: #24291f;
  --muc-nhat: #5c6354;
  --vien: #e3ddc9;
  --bo-goc: 10px;
  --khung-rong: 1140px;
  --header-cao: 76px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-cao) + 12px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hien-dan, .buoc { opacity: 1 !important; transform: none !important; transition: none !important; }
}

body {
  font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  color: var(--muc);
  background: var(--trang);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--xanh); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--cam); outline-offset: 2px;
}

.khung { max-width: var(--khung-rong); margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4 { line-height: 1.25; text-wrap: balance; }
h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); font-weight: 800; letter-spacing: -0.5px; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -0.3px; margin-bottom: 18px; }
h3 { font-size: 1.12rem; font-weight: 600; }

/* ── hiệu ứng hiện dần ── */
.hien-dan { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.hien-dan.da-hien { opacity: 1; transform: none; }

/* ── eyebrow + lá signature ── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--olive); margin-bottom: 12px;
}
.eyebrow .la { width: 13px; height: 13px; color: var(--olive); transform: rotate(18deg); flex: none; }
.eyebrow-sang { color: #b9cf8d; }

/* ── nút ── */
.nut {
  display: inline-block; padding: 13px 26px; border: 2px solid transparent;
  border-radius: var(--bo-goc); font: 600 1rem/1.2 "Be Vietnam Pro", sans-serif;
  text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.nut-do { background: var(--do); color: #fff; }
.nut-do:hover { background: var(--do-dam); }
.nut-xanh { background: var(--xanh); color: #fff; }
.nut-xanh:hover { background: var(--xanh-dam); }
.nut-vien { border-color: var(--xanh); color: var(--xanh); background: transparent; }
.nut-vien:hover { background: var(--xanh); color: #fff; }
.nut-vien-sang { border-color: #c9dcb0; color: #eef4e3; background: transparent; padding: 9px 18px; font-size: .9rem; }
.nut-vien-sang:hover { background: var(--kem); color: var(--xanh-dam); border-color: var(--kem); }
.nut-lon { padding: 16px 34px; font-size: 1.05rem; }

/* ── header ── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--kem) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--vien);
  transition: box-shadow .25s;
}
.site-header.co-bong { box-shadow: 0 4px 18px rgba(23, 64, 42, .09); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-cao); }
.logo-link { flex: none; display: inline-flex; line-height: 0; }
.logo-link img { height: 52px; width: auto; max-width: none; flex: none; }
.menu-chinh { display: flex; align-items: center; gap: 20px; }
.menu-chinh a:not(.nut) {
  color: var(--muc); text-decoration: none; white-space: nowrap; font-weight: 600; font-size: .95rem;
  padding: 6px 2px; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.menu-chinh a:not(.nut):hover, .menu-chinh a.dang-o { color: var(--xanh); border-bottom-color: var(--olive); }
.nut-menu { padding: 10px 20px; font-size: .92rem; }
.chum-ngu { display: inline-flex; gap: 6px; }
.doi-ngu {
  font-weight: 800; font-size: .78rem; letter-spacing: .5px; text-decoration: none;
  color: var(--muc-nhat); border: 1.6px solid var(--vien); border-radius: 8px;
  padding: 6px 8px; transition: color .2s, border-color .2s;
}
.doi-ngu:hover { color: var(--xanh); border-color: var(--olive); }
.nut-hamburger { display: none; }

/* ── hero ── */
.hero { background: linear-gradient(175deg, var(--kem) 74%, var(--trang) 74.2%); padding: 64px 0 72px; }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }
.hero h1 em { font-style: normal; color: var(--xanh); position: relative; }
.hero h1 em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 10px;
  background: color-mix(in srgb, var(--cam) 32%, transparent); z-index: -1; border-radius: 3px;
}
.hero-mota { margin: 20px 0 30px; font-size: 1.08rem; color: var(--muc-nhat); max-width: 34em; }
.hero-nut { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-anh { position: relative; }
.hero-anh img {
  border-radius: 46% 54% 52% 48% / 44% 46% 54% 56%;
  box-shadow: 0 24px 60px rgba(23, 64, 42, .18);
  aspect-ratio: 1; object-fit: cover;
}
.chip-ai {
  position: absolute; left: 14px; bottom: 14px;
  background: rgba(36, 41, 31, .78); color: #f2efe4;
  font-size: .72rem; padding: 5px 11px; border-radius: 99px; backdrop-filter: blur(3px);
}

/* ── dải con số nổi bật ── */
.dai-so { background: var(--xanh-dam); padding: 30px 0; }
.dai-so-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.so-noi-bat { text-align: center; }
.so-noi-bat strong {
  display: block; font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800;
  color: var(--kem); font-variant-numeric: tabular-nums; line-height: 1.15;
}
.so-noi-bat span { font-size: .85rem; color: #b9cf8d; }

/* ── hành trình: timeline lá ── */
.hanh-trinh { list-style: none; margin-top: 34px; position: relative; display: grid; gap: 26px; max-width: 720px; }
.hanh-trinh::before {
  content: ""; position: absolute; top: 12px; bottom: 12px; left: 13px; width: 3px;
  background: repeating-linear-gradient(180deg, var(--olive) 0 14px, transparent 14px 22px);
  opacity: .55; border-radius: 2px;
}
.moc { position: relative; padding-left: 54px; }
.moc .nut-la { position: absolute; left: 0; top: 4px; }
.moc .nam { font-weight: 800; color: var(--cam); font-size: .9rem; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.moc h3 { color: var(--xanh-dam); margin: 2px 0 6px; }
.moc p { color: var(--muc-nhat); font-size: .96rem; max-width: 40em; }

/* ── section chung ── */
.section { padding: 84px 0; }
.section-kem { background: var(--kem); }
.section-xanh { background: var(--xanh-dam); color: #eef2e6; }
.section-xanh h2 { color: #fff; }

/* ── giới thiệu ── */
.gioi-thieu-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; margin-top: 8px; }
.gioi-thieu-chu p { margin-bottom: 16px; color: var(--muc-nhat); font-size: 1.04rem; }
.gioi-thieu-chu p:first-child { color: var(--muc); }
.gioi-thieu-anh { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-content: start; }
.gioi-thieu-anh figure { position: relative; }
.gioi-thieu-anh img { border-radius: var(--bo-goc); aspect-ratio: 3/4; object-fit: cover; }
.gioi-thieu-anh .chip-ai { left: 8px; bottom: 8px; font-size: .62rem; padding: 3px 8px; }
.gioi-thieu-anh figure:nth-child(2) { transform: translateY(20px); }

/* ── lĩnh vực ── */
.linh-vuc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 26px; }
.the-linh-vuc {
  position: relative; background: var(--trang); border: 1px solid var(--vien);
  border-radius: var(--bo-goc); padding: 30px 28px 26px; overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.the-linh-vuc:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(23, 64, 42, .1); }
.the-linh-vuc .so {
  position: absolute; top: 12px; right: 18px;
  font-size: 2.6rem; font-weight: 800; color: var(--kem-dam);
  font-variant-numeric: tabular-nums;
}
.icon-lv { width: 44px; height: 44px; color: var(--olive); margin-bottom: 14px; }
.the-linh-vuc h3 { margin-bottom: 8px; color: var(--xanh-dam); }
.the-linh-vuc p { color: var(--muc-nhat); font-size: .96rem; }

/* ── quy trình: hai luồng song song ── */
.ten-luong {
  display: inline-block; margin: 34px 0 0; padding: 6px 16px; border-radius: 99px;
  background: color-mix(in srgb, var(--olive) 16%, transparent); color: var(--xanh-dam);
  font-weight: 800; font-size: .85rem; letter-spacing: 1px; text-transform: uppercase;
}
.ten-luong-cam { background: color-mix(in srgb, var(--cam) 16%, transparent); color: #8a5a15; }
.quy-trinh-cam .nut-la { background: var(--cam); box-shadow: 0 0 0 5px color-mix(in srgb, var(--cam) 20%, transparent); }
.quy-trinh-cam::before { background: repeating-linear-gradient(90deg, var(--cam) 0 14px, transparent 14px 22px); }
.dong-hanh-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 22px; margin-top: 46px; }
.the-dong-hanh {
  background: var(--kem); border-left: 4px solid var(--olive);
  border-radius: 0 var(--bo-goc) var(--bo-goc) 0; padding: 26px 28px;
}
.the-dong-hanh h3 { color: var(--xanh-dam); margin-bottom: 10px; }
.the-dong-hanh p { color: var(--muc-nhat); font-size: .96rem; }
.the-dong-hanh.co-anh { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: center; }
.the-dong-hanh.co-anh img { border-radius: var(--bo-goc); aspect-ratio: 3/4; object-fit: cover; }

.quy-trinh { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 20px; position: relative; }
.quy-trinh::before {
  content: ""; position: absolute; top: 13px; left: 5%; right: 5%; height: 3px;
  background: repeating-linear-gradient(90deg, var(--olive) 0 14px, transparent 14px 22px);
  opacity: .55; border-radius: 2px;
}
.buoc { position: relative; padding-top: 40px; opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.buoc.da-hien { opacity: 1; transform: none; }
.nut-la {
  position: absolute; top: 0; left: 0;
  width: 28px; height: 28px; background: var(--xanh); display: inline-block;
  border-radius: 0 70% 0 70%; transform: rotate(-8deg);   /* lá — cùng chữ ký với Lá Thư */
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--olive) 22%, transparent);
}
.buoc h3 { font-size: 1rem; margin-bottom: 6px; color: var(--xanh-dam); }
.buoc p { font-size: .88rem; color: var(--muc-nhat); }

/* ── KIHO ── */
.kiho-dau { max-width: 640px; margin-bottom: 44px; }
.kiho-logo { height: 64px; width: auto; max-width: none; flex: none; margin-bottom: 18px; background: var(--kem); padding: 8px 14px; border-radius: var(--bo-goc); }
.kiho-mota { color: #cfdbc0; margin-top: 14px; }
.kiho-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.the-sp {
  background: color-mix(in srgb, var(--trang) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--kem) 18%, transparent);
  border-radius: var(--bo-goc); padding: 24px 20px; text-align: center;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  transition: transform .25s, background .25s;
}
.the-sp:hover { transform: translateY(-5px); background: color-mix(in srgb, var(--trang) 12%, transparent); }
.the-sp img { height: 230px; width: auto; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .35)); }
.the-sp h3 { color: #fff; font-size: 1.06rem; margin-top: 6px; }
.the-sp p { font-size: .87rem; color: #c3d1b2; flex: 1; }
.quy-cach { font-size: .78rem; letter-spacing: 1px; text-transform: uppercase; color: var(--cam); font-weight: 600; }
.kiho-link { margin-top: 34px; text-align: center; }
.kiho-link a { color: #b9cf8d; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.kiho-link a:hover { color: var(--kem); }

/* ── giá trị ── */
.tam-nhin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 26px 0; }
.khoi-tam-nhin { background: var(--kem); border-left: 4px solid var(--olive); border-radius: 0 var(--bo-goc) var(--bo-goc) 0; padding: 26px 28px; }
.khoi-tam-nhin h3 { color: var(--xanh-dam); margin-bottom: 8px; }
.khoi-tam-nhin p { color: var(--muc-nhat); }
.gia-tri-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.the-gia-tri { border: 1px solid var(--vien); border-radius: var(--bo-goc); padding: 22px; transition: border-color .25s, transform .25s; }
.the-gia-tri:hover { border-color: var(--olive); transform: translateY(-3px); }
.the-gia-tri h4 { font-size: 1.3rem; font-weight: 800; color: var(--xanh); margin-bottom: 6px; }
.the-gia-tri p { font-size: .9rem; color: var(--muc-nhat); }

/* ── cam kết ── */
.cam-ket-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; margin-top: 10px; align-items: start; }
.cam-ket-ds { list-style: none; display: grid; gap: 14px; }
.cam-ket-ds li { position: relative; padding: 16px 18px 16px 52px; background: var(--trang); border-radius: var(--bo-goc); border: 1px solid var(--vien); font-size: 1rem; }
.cam-ket-ds li::before {
  content: "✓"; position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%; background: var(--olive); color: #fff;
  font-size: .8rem; font-weight: 800; display: grid; place-items: center;
}
.chung-nhan { background: var(--trang); border: 1px solid var(--vien); border-radius: var(--bo-goc); padding: 28px; }
.chung-nhan-tieu-de { font-weight: 600; color: var(--xanh-dam); margin-bottom: 14px; }
.chung-nhan-badge { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.badge {
  border: 2px solid var(--xanh); color: var(--xanh); font-weight: 800; font-size: .92rem;
  padding: 8px 16px; border-radius: 8px; letter-spacing: .5px;
}
.chung-nhan-ghi-chu { font-size: .85rem; color: var(--muc-nhat); }

/* ── định hướng ── */
.doan-dinh-huong { max-width: 46em; color: var(--muc-nhat); margin-bottom: 30px; }
.dinh-huong-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.the-dinh-huong { background: var(--kem); border-radius: var(--bo-goc); padding: 24px; display: flex; gap: 16px; align-items: baseline; }
.the-dinh-huong .so { font-weight: 800; font-size: 1.5rem; color: var(--cam); font-variant-numeric: tabular-nums; }
.the-dinh-huong p { color: var(--muc); font-weight: 600; font-size: .96rem; }

/* ── hợp tác ── */
.section-hop-tac { text-align: center; padding: 74px 0; }
.section-hop-tac h2 { max-width: 22em; margin: 0 auto 26px; }
.hop-tac-nhom { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 34px; }
.chip-hop-tac {
  border: 1px solid color-mix(in srgb, var(--kem) 35%, transparent); color: #dbe6cc;
  padding: 9px 18px; border-radius: 99px; font-size: .9rem;
}

/* ── liên hệ ── */
.lien-he-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; margin-top: 10px; }
.ten-phap-nhan { font-weight: 800; font-size: 1.12rem; color: var(--xanh-dam); margin-bottom: 18px; }
.lien-he-info dl { display: grid; gap: 14px; margin-bottom: 26px; }
.lien-he-info dt { font-size: .76rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--olive); font-weight: 600; }
.lien-he-info dd { color: var(--muc); font-size: .98rem; }
.lien-he-info dd a { font-weight: 600; }
.nut-goi { display: none; }

.form-lien-he { background: var(--kem); border-radius: 14px; padding: 34px 32px; display: grid; gap: 16px; }
.hang-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-lien-he label { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; color: var(--xanh-dam); }
.form-lien-he label span { color: var(--do); }
.form-lien-he input, .form-lien-he select, .form-lien-he textarea {
  font: 400 1rem/1.4 "Be Vietnam Pro", sans-serif; color: var(--muc);
  padding: 12px 14px; border: 1px solid var(--vien); border-radius: 8px; background: var(--trang);
  width: 100%; appearance: none;
}
.form-lien-he select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235c6354' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.form-lien-he input:focus, .form-lien-he select:focus, .form-lien-he textarea:focus { border-color: var(--olive); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--olive) 25%, transparent); }
.form-lien-he input.loi, .form-lien-he select.loi { border-color: var(--do); }
.dong-y { grid-template-columns: auto 1fr; display: grid; align-items: start; gap: 10px !important; font-weight: 400 !important; color: var(--muc-nhat) !important; font-size: .86rem !important; }
.dong-y input { width: 18px; height: 18px; margin-top: 2px; appearance: auto; }
.an-hoan-toan { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-bao { font-weight: 600; font-size: .92rem; min-height: 1.4em; }
.form-bao.thanh-cong { color: var(--xanh); }
.form-bao.that-bai { color: var(--do); }

/* ── footer ── */
.site-footer { background: var(--xanh-dam); color: #cfdbc0; padding: 44px 0; }
.footer-inner { display: grid; gap: 14px; justify-items: start; }
.footer-inner img { filter: brightness(0) invert(1); opacity: .9; max-width: none; flex: none; }
.footer-inner p { font-size: .9rem; max-width: 46em; }
.footer-link { color: #dce8cf; text-decoration: underline; text-underline-offset: 3px; }
.footer-link:hover, .footer-link:focus-visible { color: #ffffff; }
.footer-copy { color: #b2c2a1; font-size: .82rem !important; }

/* ══ MOBILE ══ */
@media (max-width: 900px) {
  .hero-grid, .gioi-thieu-grid, .cam-ket-grid, .lien-he-grid, .tam-nhin-grid { grid-template-columns: 1fr; }
  .linh-vuc-grid, .kiho-grid, .gia-tri-grid { grid-template-columns: 1fr 1fr; }
  .dinh-huong-grid { grid-template-columns: 1fr; }
  .quy-trinh { grid-template-columns: 1fr; gap: 8px; }
  .dong-hanh-grid { grid-template-columns: 1fr; }
  .the-dong-hanh.co-anh { grid-template-columns: 1fr; }
  .the-dong-hanh.co-anh img { max-height: 340px; width: 100%; aspect-ratio: auto; }
  .quy-trinh::before { top: 8%; bottom: 6%; left: 13px; right: auto; width: 3px; height: auto;
    background: repeating-linear-gradient(180deg, var(--olive) 0 14px, transparent 14px 22px); }
  .buoc { padding: 6px 0 18px 52px; }
  .nut-la { top: 8px; }
  .hero { padding: 40px 0 54px; }
  .dai-so-grid { grid-template-columns: 1fr 1fr; gap: 20px 10px; }
  .section { padding: 60px 0; }
  .hero-anh { max-width: 420px; margin: 0 auto; }
  .gioi-thieu-anh figure:nth-child(2) { transform: none; }
}

@media (max-width: 1080px) {
  .menu-chinh {
    position: fixed; inset: var(--header-cao) 0 auto 0; z-index: 49;
    background: var(--kem); border-bottom: 1px solid var(--vien);
    flex-direction: column; align-items: stretch; gap: 0; padding: 10px 24px 20px;
    transform: translateY(-130%); transition: transform .3s ease; box-shadow: 0 18px 30px rgba(23,64,42,.14);
  }
  .menu-chinh.mo { transform: none; }
  .menu-chinh a:not(.nut) { padding: 14px 4px; border-bottom: 1px solid var(--vien); font-size: 1.02rem; min-height: 44px; }
  .nut-menu { margin-top: 14px; text-align: center; }
  .nut-hamburger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; background: none; border: 0; cursor: pointer;
  }
  .nut-hamburger span { height: 2.6px; background: var(--xanh-dam); border-radius: 2px; transition: transform .25s, opacity .25s; }
  .nut-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.6px) rotate(45deg); }
  .nut-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nut-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.6px) rotate(-45deg); }
  .linh-vuc-grid, .kiho-grid, .gia-tri-grid, .hang-form { grid-template-columns: 1fr; }
  .the-sp img { height: 190px; }
  .hero-nut .nut { width: 100%; text-align: center; }
  .form-lien-he { padding: 26px 20px; }
  .nut-goi { display: inline-block; }
  .logo-link img { height: 44px; }
}

/* FAQ (GEO đợt 1 — 27/08/2026) */
.faq-muc{border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:14px 20px;margin:12px auto;max-width:860px;background:#fff}
.faq-muc summary{cursor:pointer;font-weight:600}
.faq-muc p{margin:10px 0 4px;line-height:1.65}
