/* ═══════════════════════════════════════════════════════════
   AGRO BEST VIỆT NAM — bản 3
   Xanh lá chủ đạo · đỏ chỉ dành cho nút hành động chính
   · navy CHỈ dùng ở khối Hydrogel · nền trắng xen kem.
   Viết mobile-first. Chữ giữ ngắn: mỗi thẻ một dòng.
   ═══════════════════════════════════════════════════════════ */

:root{
  --la:#1F7A3D;  --la-d:#155C2C;  --la-s:#2E9A50;
  --la-n:#EAF4EC; --la-chu:#D9F0DE;
  --do:#E41824;  --do-d:#BE121C;
  --navy:#10396B; --navy-d:#0A2749;
  --kem:#F7F9F5; --trang:#fff;
  --muc:#14201A; --xam:#5B6A60; --xam-s:rgba(255,255,255,.86);
  --vien:#E4EADF; --vien-2:#CFDAC9;
  --bong:0 2px 12px rgba(20,32,26,.07);
  --bong-2:0 16px 44px rgba(20,32,26,.16);
  --r:14px; --rg:999px; --nhanh:.2s cubic-bezier(.4,0,.2,1);
  --ngang:1200px;

  /* ── Thang cỡ chữ: 8 bậc, tỉ lệ ~1.25. Trước đây trang dùng 16 cỡ
       lẻ tẻ (12, 12.5, 13, 13.5…) nên nhìn không có nhịp.        ── */
  --t1:12px;   /* nhãn in hoa */
  --t2:14px;   /* chú thích, meta */
  --t3:16px;   /* chữ trong thẻ */
  --t4:18px;   /* chữ thân bài */
  --t5:20px;   /* tiêu đề thẻ */
  --t6:24px;   /* tiêu đề nhỏ */
  --t7:30px;   /* h2 điện thoại */
  --t8:40px;   /* h2 máy tính */

  /* ── Thang khoảng cách trên lưới 8pt ── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* ── Lề trang: MỌI khối dùng chung một giá trị ── */
  --le:20px;

  /* ── Font hệ thống. Máy Apple dùng SF Pro, Android dùng Roboto,
       Windows dùng Segoe UI — cả ba đều đặt dấu tiếng Việt chuẩn
       vì được tinh chỉnh riêng cho hệ điều hành đó. Không tải font
       ngoài nên trang nhẹ hơn và không bị nháy chữ khi mở.      ── */
  --chu-he:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
           Roboto, "Helvetica Neue", Arial, sans-serif;
  --chu-hien:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--trang);color:var(--muc);
  font-family:var(--chu-he);
  font-size:var(--t4);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;padding-bottom:64px}
@media(min-width:900px){body{padding-bottom:0}}
/* Tiếng Việt cần nhịp dòng rộng hơn tiếng Anh: chữ Ế, Ầ, Ộ, Ễ có dấu
   chồng hai tầng, cao hơn chữ hoa Latin khoảng 26%. Đo thực tế: ở cỡ
   58px, cụm "ẾẦỘỄẮ" cao 73px — để 1.08 là chồng lấn 10px vào dòng trên. */
h1,h2,h3,h4{margin:0;font-family:var(--chu-hien);line-height:1.3;
  letter-spacing:-.015em;color:var(--muc);font-weight:800;text-wrap:balance}
p{margin:0}
img{max-width:100%;display:block;height:auto}
a{color:var(--la-d);text-decoration:none}
button{font:inherit}
:focus-visible{outline:3px solid var(--la);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.bao{width:100%;max-width:var(--ngang);margin:0 auto;padding:0 var(--le)}
@media(min-width:760px){:root{--le:32px}}

/* nhãn */
.nhan{display:inline-block;font-size:var(--t1);font-weight:800;letter-spacing:.14em;line-height:1.4;
  text-transform:uppercase;color:var(--la-d);background:var(--la-n);padding:7px 14px;border-radius:var(--rg)}
.nhan--trang{color:var(--la-d);background:#fff}
.nhan--nhat{color:var(--la-chu);background:rgba(255,255,255,.16)}

/* nút */
.nut{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:52px;
  padding:14px var(--s5);border:2px solid transparent;border-radius:var(--rg);
  font-size:var(--t3);font-weight:700;line-height:1.2;cursor:pointer;text-align:center;
  transition:background var(--nhanh),color var(--nhanh),transform var(--nhanh),border-color var(--nhanh)}
.nut--do{background:var(--do);color:#fff;box-shadow:0 10px 26px rgba(228,24,36,.28)}
.nut--do:hover{background:var(--do-d);transform:translateY(-2px)}
.nut--la{background:var(--la);color:#fff;box-shadow:0 10px 26px rgba(31,122,61,.24)}
.nut--la:hover{background:var(--la-d);transform:translateY(-2px)}
.nut--trang{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.nut--trang:hover{background:#fff;color:var(--la-d);border-color:#fff}
.nut--vien{background:transparent;color:var(--la-d);border-color:var(--vien-2)}
.nut--vien:hover{border-color:var(--la);background:var(--la-n)}
.nut--rong{width:100%}
@media(prefers-reduced-motion:reduce){.nut:hover{transform:none}}

/* ═══ 01 · thanh tiện ích + điều hướng ═══ */
.tien{background:var(--la-d);color:#fff;font-size:var(--t2)}
.tien__in{display:none}
@media(min-width:900px){
  .tien__in{display:flex;align-items:center;gap:26px;height:42px}
  .tien a{color:#fff;display:inline-flex;align-items:center;gap:8px}
  .tien a:hover{color:var(--la-chu)}
  .tien svg{width:16px;height:16px}
  .tien__xa{margin-left:auto;display:flex;gap:9px}
  .tien__xa a{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.16);
    display:flex;align-items:center;justify-content:center;font-size:var(--t1);font-weight:700}
}
.dinh{position:sticky;top:0;z-index:92;background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--vien);
  transition:background .24s ease, border-color .24s ease}
body.menu-mo .dinh{background:transparent;border-bottom-color:transparent;backdrop-filter:none}
.dinh__in{display:flex;align-items:center;gap:14px;height:64px}
.hieu img{height:36px;width:auto}
.bhg{position:relative;z-index:95;margin-left:auto;width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--vien-2);border-radius:10px;color:var(--muc);cursor:pointer;
  transition:color .22s ease, border-color .22s ease}
.bhg span{display:block;width:20px;height:2px;background:currentColor;position:relative;
  transition:background .18s ease}
.bhg span::before,.bhg span::after{content:"";position:absolute;left:0;width:20px;height:2px;
  background:currentColor;transition:transform .26s cubic-bezier(.2,.7,.3,1), top .18s ease}
.bhg span::before{top:-6px}.bhg span::after{top:6px}
/* mở menu → ba gạch gộp thành dấu X, nút đổi sang màu trắng cho nổi trên nền lá */
.bhg[aria-expanded="true"]{color:#fff;border-color:rgba(255,255,255,.45)}
.bhg[aria-expanded="true"] span{background:transparent}
.bhg[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.bhg[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
@media (prefers-reduced-motion: reduce){
  .bhg span::before,.bhg span::after{transition:none}
}
/* khoá cuộn nền khi menu đang mở */
body.menu-mo{overflow:hidden}
/* ═══ Menu điện thoại: KHAY TRƯỢT TỪ DƯỚI LÊN ═══
   Đặt ở đáy màn hình vì đó là vùng ngón cái với tới dễ nhất. Lưới hai
   cột để cân hai bên, không bị dồn lệch trái như danh sách dọc.
   Lớp trạng thái đặt tên .menu-hien, KHÔNG dùng .mo — trùng với khối mở đầu. */
.menu{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;justify-content:flex-end;
  visibility:hidden;transition:visibility .3s}
.menu.menu-hien{visibility:visible}

.menu__nen{position:absolute;inset:0;background:rgba(8,26,15,.55);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .3s ease}
.menu.menu-hien .menu__nen{opacity:1}

.menu__khay{
  position:relative;border-radius:22px 22px 0 0;padding:var(--s3) var(--le) calc(var(--s5) + env(safe-area-inset-bottom));
  max-height:82vh;overflow-y:auto;display:flex;flex-direction:column;gap:var(--s4);
  background-color:#123D22;
  background-image:radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.08), transparent 62%),
    url(../images/la-tile.webp);
  background-repeat:no-repeat, repeat;background-size:100% 100%, 300px 300px;
  box-shadow:0 -14px 44px rgba(8,26,15,.4);
  transform:translateY(102%);transition:transform .34s cubic-bezier(.2,.8,.25,1)}
.menu.menu-hien .menu__khay{transform:none}

.menu__tay{width:44px;height:4px;border-radius:99px;background:rgba(255,255,255,.34);
  margin:var(--s1) auto var(--s2)}

.menu__luoi{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
.menu__luoi a{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--s2);
  min-height:84px;padding:var(--s4);border-radius:14px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
  color:#fff;font-size:var(--t3);font-weight:700;line-height:1.3;
  opacity:0;transform:translateY(10px)}
.menu__luoi a svg{width:22px;height:22px;color:#9FE0B4}
.menu.menu-hien .menu__luoi a{opacity:1;transform:none;
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.8,.25,1)}
.menu.menu-hien .menu__luoi a:nth-child(1){transition-delay:.10s}
.menu.menu-hien .menu__luoi a:nth-child(2){transition-delay:.14s}
.menu.menu-hien .menu__luoi a:nth-child(3){transition-delay:.18s}
.menu.menu-hien .menu__luoi a:nth-child(4){transition-delay:.22s}
.menu.menu-hien .menu__luoi a:nth-child(5){transition-delay:.26s}
.menu.menu-hien .menu__luoi a:nth-child(6){transition-delay:.30s}
/* Ô cuối chỉ chiếm trọn hàng, GIỮ NGUYÊN kiểu cột như sáu ô kia.
   Từng thử xếp ngang: icon đứng cạnh chữ đẩy nhãn vào 71px trong khi
   các ô khác ở 37px — lệch một mạch. */
.menu__luoi a:nth-child(7){grid-column:1/-1}
.menu.menu-hien .menu__luoi a:nth-child(7){transition-delay:.34s}

.menu__dong{min-height:52px;border:0;border-radius:99px;background:rgba(255,255,255,.12);
  color:#fff;font-size:var(--t3);font-weight:700;cursor:pointer}
.menu__dong:hover{background:rgba(255,255,255,.2)}

@media (prefers-reduced-motion: reduce){
  .menu__khay{transition:none}
  .menu__luoi a{opacity:1;transform:none}
  .menu.menu-hien .menu__luoi a{transition:none;transition-delay:0s}
}
.dinh__nut{display:none}
@media(min-width:1120px){
  .bhg{display:none}
  .menu{position:static;inset:auto;flex-direction:row;align-items:center;justify-content:flex-end;
    gap:20px;padding:0;margin-left:auto;overflow:visible;visibility:visible;transition:none}
  /* display:contents cho hai lớp bọc "biến mất" khỏi bố cục, để các link
     xếp thẳng vào hàng ngang của .menu */
  .menu__khay,.menu__luoi{display:contents}
  .menu__nen,.menu__tay,.menu__dong{display:none}
  .menu__luoi a{display:inline;min-height:0;padding:0;border:0;background:none;border-radius:0;
    font-size:var(--t3);font-weight:600;color:var(--muc);white-space:nowrap;
    opacity:1;transform:none;letter-spacing:0;line-height:1.4}
  .menu__luoi a svg{display:none}
  .menu__luoi a:hover{color:var(--la-d)}
  /* Nút nằm TRONG .menu__khay chứ không phải con trực tiếp của .menu.
     Viết .menu > .nut là không trúng, sinh ra hai nút trên máy tính. */
  .menu__khay > .nut,.menu .nut--rong{display:none}
  .dinh__nut{display:flex;margin-left:22px}
  .dinh__nut .nut{min-height:44px;padding:10px var(--s5);font-size:var(--t3)}
}

/* thanh gọi cố định trên điện thoại */
.gan{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;gap:1px;background:var(--vien)}
.gan a{flex:1;min-height:58px;display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:var(--t3);font-weight:700;color:#fff}
.gan a:first-child{background:var(--do)}
.gan a:last-child{background:var(--la)}
.gan svg{width:19px;height:19px}
@media(min-width:900px){.gan{display:none}}

/* ═══ 02 · banner ═══ */
.mo{position:relative;background:var(--la-d);overflow:hidden}
.mo__anh{position:absolute;inset:0}
.mo__anh img{width:100%;height:100%;object-fit:cover}
/* Phủ đậm bên trái nơi có chữ, nhạt dần sang phải để quả còn màu.
   Đo tương phản sau khi đổi ảnh, đừng đoán. */
.mo__anh::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,48,24,.88) 0%,rgba(12,58,29,.72) 42%,rgba(14,66,33,.30) 100%)}
@media(max-width:700px){
  .mo__anh::after{background:linear-gradient(175deg,rgba(10,48,24,.86) 0%,rgba(12,58,29,.80) 55%,rgba(14,66,33,.62) 100%)}
}
/* Chỉ đặt padding TRÊN/DƯỚI. Dùng padding rút gọn ở đây sẽ ghi đè lề
   ngang của .bao, khiến chữ hero chạm sát mép màn hình. */
.mo__in{position:relative;padding-top:var(--s7);padding-bottom:120px;
  display:flex;flex-direction:column;gap:var(--s4);align-items:flex-start}
.mo h1{color:#fff;font-size:clamp(31px,7.2vw,56px);font-weight:900;text-transform:uppercase;
  letter-spacing:-.01em;line-height:1.3;max-width:16ch}
.mo h1 em{font-style:normal;color:var(--la-chu);display:block}
.mo__tag{font-style:italic;font-size:clamp(var(--t4),2.4vw,var(--t6));font-weight:600;color:#fff;
  margin-top:calc(var(--s1) * -1)}
.mo__phu{color:var(--xam-s);font-size:var(--t4);line-height:1.6;max-width:42ch}
.mo__nut{display:flex;flex-wrap:wrap;gap:var(--s3);width:100%;margin-top:var(--s2)}
.mo__nut .nut{flex:1 1 100%}
@media(min-width:700px){
  .mo__in{padding-top:var(--s8);padding-bottom:150px;gap:var(--s5)}
  .mo__nut{width:auto}.mo__nut .nut{flex:0 0 auto;min-width:186px}
}

/* dải thẻ trắng nổi đè lên đáy ảnh */
.noi{position:relative;margin-top:-74px;z-index:5}
.noi__in{background:#fff;border-radius:var(--r);box-shadow:var(--bong-2);
  display:grid;grid-template-columns:1fr;overflow:hidden}
@media(min-width:560px){.noi__in{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.noi__in{grid-template-columns:repeat(4,1fr)}}
.noi__o{padding:var(--s5);display:flex;gap:var(--s4);align-items:center;border-bottom:1px solid var(--vien)}
@media(min-width:560px){.noi__o:nth-child(odd){border-right:1px solid var(--vien)}}
@media(min-width:1000px){
  .noi__o{border-bottom:0;border-right:1px solid var(--vien)}
  .noi__o:nth-child(odd){border-right:1px solid var(--vien)}
  .noi__o:last-child{border-right:0}
}
.noi__o:last-child{border-bottom:0}
.noi__bt{width:42px;height:42px;border-radius:11px;background:var(--la-n);color:var(--la-d);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.noi__bt svg{width:21px;height:21px}
.noi__o h3{font-size:var(--t3);line-height:1.4;margin-bottom:var(--s1)}
.noi__o p{font-size:var(--t2);color:var(--xam);line-height:1.45}

/* ═══ khối chung ═══ */
.khu{padding:var(--s7) 0}
@media(min-width:900px){.khu{padding:var(--s9) 0}}
.khu--kem{background:var(--kem)}
.khu--lan{background:var(--la-n)}
/* Tiêu đề khối căn GIỮA — và căn giữa cả cụm như một đơn vị: hộp tự
   giới hạn bề ngang rồi margin auto, kèm text-align và align-items.
   Lần trước hỏng vì chỉ có nhãn căn giữa còn h2 và chữ dẫn vẫn chiếm
   trọn bề ngang, thành ra ba mép lệch nhau. */
.dau{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--s3);margin:0 auto var(--s6);max-width:none}
/* Tiêu đề IN HOA rộng hơn chữ thường nhiều — cho nó khuôn riêng, nếu
   dùng chung 46ch với câu dẫn thì dòng hai vỡ, để lại một chữ lạc lõng. */
.dau h2{max-width:26ch;margin:0 auto}
.dau p{max-width:52ch;margin:0 auto}
/* Cụm nào đi kèm ảnh hoặc biểu mẫu thì vẫn căn trái */
.dau--trai{align-items:flex-start;text-align:left;margin-left:0;margin-right:0;max-width:52ch}
/* Kiểu tiêu đề dùng CHUNG cho mọi section: nhãn viên bo tròn + tiêu đề
   IN HOA hai dòng + một dòng dẫn. Chọn một kiểu và giữ nguyên cả trang. */
.dau h2{font-size:clamp(26px,4.6vw,42px);text-transform:uppercase;letter-spacing:-.005em;line-height:1.26}
.dau h2 em{font-style:normal;color:var(--la)}
.khu--la .dau h2 em{color:#9FE0B4}
.dau p{color:var(--xam);font-size:var(--t4);line-height:1.6}
@media(min-width:900px){.dau{margin-bottom:var(--s7)}}

.luoi{display:grid;gap:var(--s4)}
@media(min-width:600px){.luoi--2,.luoi--3,.luoi--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.luoi--3{grid-template-columns:repeat(3,1fr)}.luoi--4{grid-template-columns:repeat(4,1fr)}}

/* Trong một thẻ: icon cách tiêu đề 16, tiêu đề cách chữ chỉ 8 —
   tiêu đề và chữ là MỘT cụm, icon là mốc riêng. Giữa hai thẻ 16 + 24
   padding = 40, đủ xa để mắt tách được cụm. */
.the{background:#fff;border:1px solid var(--vien);border-radius:var(--r);padding:var(--s5);
  display:flex;flex-direction:column;gap:var(--s2);
  transition:border-color var(--nhanh),transform var(--nhanh),box-shadow var(--nhanh)}
.the > .the__bt{margin-bottom:var(--s2)}
.the:hover{border-color:var(--vien-2);transform:translateY(-3px);box-shadow:var(--bong)}
@media(prefers-reduced-motion:reduce){.the:hover{transform:none}}
.the h3{font-size:var(--t5);line-height:1.35}
.the p{color:var(--xam);font-size:var(--t3);line-height:1.55}
.the__bt{width:46px;height:46px;border-radius:12px;background:var(--la-n);color:var(--la-d);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.the__bt svg{width:23px;height:23px}
.the__lk{margin-top:auto;padding-top:var(--s3);font-size:var(--t2);font-weight:700;color:var(--la-d)}
.the__lk::after{content:" →"}

/* nỗi đau */
.nd{background:#fff;border:1px solid var(--vien);border-left:4px solid var(--la);border-radius:11px;
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.nd h3{font-size:var(--t5);line-height:1.35}
.nd p{font-size:var(--t3);color:var(--xam);line-height:1.55}
.nd a{font-size:var(--t2);font-weight:700;margin-top:var(--s1)}
.nd a::after{content:" →"}

/* hệ quả */
/* Thẻ trắng trên nền trắng thì không thấy hình khối, nhìn như trang bị
   trống. Cho nền xanh nhạt để nó ra một khối nhấn rõ ràng. */
.hq{background:var(--la-n);border:1px solid #CDE3D4;border-radius:var(--r);padding:var(--s6) var(--s5);
  display:flex;flex-direction:column;gap:var(--s3);align-items:center;text-align:center;
  max-width:960px;margin:0 auto}
.hq .dau h2{max-width:24ch}
.hq .dau p{color:var(--xam)}
@media(min-width:900px){.hq{padding:var(--s7) var(--s8)}}

.b4{display:grid;gap:var(--s4)}
@media(min-width:640px){.b4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.b4{grid-template-columns:repeat(4,1fr)}}
/* Bốn bước Hydrogel: thẻ TRẮNG, chữ đen — dùng được trên cả nền trắng
   lẫn dải lá. Trước đây thẻ trong suốt chữ trắng vì khối này từng là
   nền navy; đổi nền xong chữ trắng nằm trên nền trắng, tương phản 1:1. */
.b4__o{background:#fff;border:1px solid var(--vien);border-radius:var(--r);
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2);counter-increment:b}
.b4__so{font-size:var(--t1);font-weight:800;letter-spacing:.12em;color:var(--la-d);margin-bottom:var(--s1)}
.b4__o h3{font-size:var(--t5);line-height:1.35;color:var(--muc)}
.b4__o p{font-size:var(--t3);color:var(--xam);line-height:1.55}
.luu{margin-top:var(--s5);background:#FFF8E6;border:1px solid #EBD08A;
  border-radius:var(--r);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.luu h3{font-size:var(--t3);color:#7A5B00;line-height:1.35}
.luu p{font-size:var(--t3);color:#5C4A17;line-height:1.55}

/* quy trình */
.qt{display:grid;gap:var(--s3);counter-reset:q}
@media(min-width:640px){.qt{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1080px){.qt{grid-template-columns:repeat(6,1fr)}}
.qt__o{background:#fff;border:1px solid var(--vien);border-radius:11px;padding:var(--s5) var(--s4);
  counter-increment:q;display:flex;flex-direction:column;gap:var(--s3)}
.qt__o::before{content:counter(q);width:29px;height:29px;border-radius:50%;background:var(--la);color:#fff;
  font-size:var(--t2);font-weight:800;display:flex;align-items:center;justify-content:center}
.qt__o h3{font-size:var(--t3);line-height:1.4}

/* ═══ 10 · sản phẩm ═══ */
.loc{display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:var(--s3);margin-bottom:var(--s5);
  justify-content:flex-start;
  margin-inline:calc(var(--le) * -1);padding-inline:var(--le);scrollbar-width:none}
.loc::-webkit-scrollbar{display:none}
.loc button{flex-shrink:0;min-height:44px;padding:10px var(--s4);border-radius:var(--rg);
  border:1px solid var(--vien-2);background:#fff;color:var(--xam);font-size:var(--t2);font-weight:600;
  cursor:pointer;white-space:nowrap;transition:background var(--nhanh),color var(--nhanh),border-color var(--nhanh)}
.loc button[aria-pressed="true"]{background:var(--la);border-color:var(--la);color:#fff}
/* Phải đặt SAU khối .loc gốc: media query không làm tăng độ ưu tiên,
   nên nếu đặt trước thì .loc{justify-content:flex-start} sẽ ghi đè lại. */
@media(min-width:760px){.loc{justify-content:center}}
.sp{display:grid;gap:var(--s4);grid-template-columns:repeat(2,1fr)}
@media(min-width:720px){.sp{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1020px){.sp{grid-template-columns:repeat(4,1fr)}}
.sp__o{background:#fff;border:1px solid var(--vien);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform var(--nhanh),box-shadow var(--nhanh)}
.sp__o:hover{transform:translateY(-3px);box-shadow:var(--bong-2)}
@media(prefers-reduced-motion:reduce){.sp__o:hover{transform:none}}
.sp__o img{width:100%;aspect-ratio:1/2;object-fit:cover}
.sp__tin{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s1);border-top:1px solid var(--vien)}
.sp__nhom{font-size:var(--t1);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--la-d);line-height:1.4}
.sp__ten{font-size:var(--t3);font-weight:700;line-height:1.4}

/* ═══ 11 · ca vườn ═══ */
.kq{background:#fff;border:1px solid var(--vien);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.kq img{width:100%;aspect-ratio:4/3;object-fit:cover}
.kq__tin{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.kq__meta{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);font-size:var(--t2);color:var(--xam);
  margin-bottom:var(--s1)}
.kq__tin h3{font-size:var(--t5);line-height:1.35}
.kq__tin p{font-size:var(--t3);color:var(--xam);line-height:1.55}

/* bài viết */
.bv{background:#fff;border:1px solid var(--vien);border-radius:var(--r);padding:var(--s5);
  display:flex;flex-direction:column;gap:var(--s2)}
.bv span{font-size:var(--t1);font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--la-d);line-height:1.4}
.bv h3{font-size:var(--t5);line-height:1.35}
.bv time{font-size:var(--t2);color:var(--xam);margin-top:var(--s1)}

/* ═══ 13 · đại lý ═══ */
.dl{width:100%;border-collapse:collapse;font-size:var(--t3);background:#fff}
.dl th,.dl td{padding:var(--s3) var(--s4);text-align:left;border-bottom:1px solid var(--vien)}
.dl th{font-size:var(--t1);font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--xam);background:var(--kem)}
.dl td{color:var(--xam)}
.dl td:first-child{color:var(--muc);font-weight:600}
.dl tr:last-child td{border-bottom:0}
.cuon{overflow-x:auto;border:1px solid var(--vien);border-radius:var(--r)}

/* ô demo */
.demo{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--t1);font-weight:700;line-height:1.45;
  color:#8A6A00;background:#FFF4D6;border:1px solid #F0D48A;border-radius:var(--rg);padding:6px 13px}

/* ═══ 14 · CTA + biểu mẫu ═══ */
/* Khối liên hệ KHÔNG tự đặt nền — để nhịp trắng ↔ dải lá quyết định,
   nếu không sẽ có hai khối tối liền nhau và vỡ nhịp. */
.ct{color:#fff}
.ct__in{display:grid;gap:var(--s6)}
@media(min-width:980px){.ct__in{grid-template-columns:1fr 1fr;gap:48px;align-items:center}}
.ct__chu{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.ct__chu h2{color:#fff;font-size:clamp(var(--t7),5vw,var(--t8))}
.ct__chu p{color:var(--xam-s);font-size:var(--t4);line-height:1.6;max-width:42ch}
.ct__ds{list-style:none;margin:var(--s2) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.ct__ds li{display:flex;gap:var(--s3);align-items:center;font-size:var(--t3)}
.ct__ds svg{width:20px;height:20px;color:var(--la-chu);flex-shrink:0}
form{background:#fff;border-radius:var(--r);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4)}
@media(min-width:640px){form{padding:var(--s6)}}
.o{display:flex;flex-direction:column;gap:var(--s2)}
.o label{font-size:var(--t2);font-weight:600;color:var(--muc);line-height:1.4}
.o input,.o select,.o textarea{width:100%;min-height:52px;padding:14px var(--s4);font-size:var(--t3);
  font-family:inherit;color:var(--muc);background:#fff;border:1px solid var(--vien-2);
  border-radius:9px;transition:border-color var(--nhanh)}
.o textarea{min-height:84px;resize:vertical;line-height:1.55}
.o input::placeholder,.o textarea::placeholder{color:#9AA79E}
.o input:focus,.o select:focus,.o textarea:focus{border-color:var(--la);outline:none;box-shadow:0 0 0 3px rgba(31,122,61,.14)}
.o input.sai,.o select.sai,.o textarea.sai{border-color:var(--do)}
.o2{display:grid;gap:var(--s4)}
@media(min-width:520px){.o2{grid-template-columns:1fr 1fr}}
.dy{display:flex;flex-direction:row;align-items:flex-start;gap:var(--s3);font-size:var(--t2);
  color:var(--xam);line-height:1.5;cursor:pointer}
.dy input{width:20px;height:20px;min-height:0;flex-shrink:0;margin-top:2px;accent-color:var(--la)}
.loi{background:#FDECEC;border:1px solid #F0BDBD;color:#8E0C13;border-radius:9px;padding:var(--s3) var(--s4);font-size:var(--t3)}
.ct form p,.ct form label,.ct form span{color:var(--muc)}
.ct form .dy span{color:var(--xam)}
.ct form .loi{color:#8E0C13}

/* ═══ 15 · chân trang ═══ */
.chan{background:#0E2B18;color:var(--xam-s);padding:var(--s6) 0 var(--s5)}
/* Điện thoại: ba nhóm link xếp 2 cột, khối giới thiệu chiếm trọn hàng.
   Xếp dọc hết thành một chuỗi dài 1064px, cuộn mãi không hết. */
.chan__in{display:grid;gap:var(--s5) var(--s4);grid-template-columns:repeat(2,1fr)}
.chan__gt{grid-column:1/-1}
@media(min-width:760px){
  .chan__in{grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:var(--s6)}
  .chan__gt{grid-column:auto}
}
.chan h4{font-size:var(--t1);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  margin-bottom:var(--s3);line-height:1.4}
.chan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.chan a{color:var(--xam-s);font-size:var(--t3);display:inline-block;padding:var(--s1) 0}
.chan a:hover{color:#fff}
/* align-items:flex-start là BẮT BUỘC: trong flex cột, mặc định là stretch
   nên <img> bị kéo rộng bằng khung (đo được 350px) và logo méo hình. */
.chan__gt{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);max-width:38ch}
.chan__gt img{height:38px;width:auto;flex-shrink:0}
.chan__gt p{font-size:var(--t3);line-height:1.6}
.chan__ms{font-size:var(--t2);color:rgba(255,255,255,.62);line-height:1.6}
.chan__cuoi{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.15);
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);justify-content:space-between;font-size:var(--t2)}

.len{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.len.hien{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.len{opacity:1;transform:none;transition:none}}

.xong{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(14,43,24,.76)}
.xong__o{background:#fff;border-radius:16px;padding:34px 26px;max-width:430px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:13px}
.xong__o h3{font-size:var(--t6);line-height:1.35}
.xong__o p{font-size:var(--t3);color:var(--xam);line-height:1.55}

/* ═══════════════════════════════════════════════════════════
   BỔ SUNG: từng section một kiểu nền, không để trắng trơn
   ═══════════════════════════════════════════════════════════ */

/* Nền kem có vân rất nhẹ thay vì phẳng lì */
.khu--kem{background:
  radial-gradient(60% 50% at 15% 0%, rgba(31,122,61,.05), transparent 62%),
  radial-gradient(50% 46% at 88% 100%, rgba(31,122,61,.045), transparent 60%),
  var(--kem)}

/* ── Section có ảnh nền tối ── */
.khu--anh{position:relative;overflow:hidden;background:#0D2113;color:#fff}
.khu--anh > .anh-nen{position:absolute;inset:0}
.khu--anh > .anh-nen img{width:100%;height:100%;object-fit:cover}
.khu--anh > .anh-nen::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,26,15,.90) 0%,rgba(9,26,15,.94) 100%)}
.khu--anh .bao{position:relative}
.khu--anh h2,.khu--anh h3{color:#fff}
.khu--anh .dau p{color:var(--xam-s)}
.khu--anh .nd{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);
  border-left-color:var(--la-s);backdrop-filter:blur(3px)}
.khu--anh .nd p{color:rgba(255,255,255,.82)}
.khu--anh .nd a{color:#A5E3B7}
.khu--anh .nd:hover{background:rgba(255,255,255,.10)}

/* ── Bố cục hai cột: ảnh + nội dung ── */
.doi{display:grid;gap:var(--s5);align-items:start}
@media(min-width:900px){
  .doi{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:var(--s6)}
  .doi--dao > .doi__anh{order:2}
}
.doi__anh{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--bong-2)}
.doi__anh img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
@media(min-width:900px){.doi__anh img{aspect-ratio:16/13}}
.doi__chu{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
.doi__chu h2{font-size:clamp(var(--t7),4.4vw,var(--t8))}
.doi__chu > p{color:var(--xam);font-size:var(--t4);line-height:1.6;max-width:48ch}
.khu--anh .doi__chu > p{color:var(--xam-s)}

/* Ô số liệu nổi trên ảnh */
.doi__so{position:absolute;left:var(--s4);bottom:var(--s4);right:var(--s4);
  background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-radius:11px;
  padding:var(--s4);display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
@media(min-width:520px){.doi__so{right:auto;grid-template-columns:repeat(2,1fr)}}
.doi__so div{display:flex;flex-direction:column;gap:2px}
.doi__so b{font-size:var(--t6);font-weight:800;color:var(--la-d);line-height:1.1}
.doi__so span{font-size:var(--t2);color:var(--xam);line-height:1.35}


/* ── Dải ảnh ngang ── */
.dai-anh{position:relative;border-radius:var(--r);overflow:hidden;margin-bottom:var(--s6)}
.dai-anh img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block}
@media(max-width:700px){.dai-anh img{aspect-ratio:16/10}}
.dai-anh__phu{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:flex-end;gap:var(--s2);padding:var(--s5);
  background:linear-gradient(180deg,rgba(9,26,15,0) 18%,rgba(9,26,15,.62) 52%,rgba(9,26,15,.94) 100%)}
.dai-anh__phu h3{color:#fff;font-size:clamp(var(--t5),3vw,var(--t6));line-height:1.35}
.dai-anh__phu p{color:rgba(255,255,255,.86);font-size:var(--t3);line-height:1.5;max-width:56ch}

/* ── Bài viết có ảnh ── */
.bv{padding:0;overflow:hidden}
.bv img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.bv__tin{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2)}

/* ── Hydrogel: ảnh minh hoạ bên cạnh ── */
.hyd__anh{border-radius:var(--r);overflow:hidden;border:1px solid var(--vien)}
.hyd__anh img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}

/* ═══════════════════════════════════════════════════════════
   NHỊP NỀN THỐNG NHẤT: trắng ↔ dải lá, lặp đều cả trang.
   Chỉ MỘT ảnh lá 12 KB dùng lại cho mọi dải — trình duyệt
   tải một lần rồi dùng cho tất cả, không tốn thêm byte nào.
   ═══════════════════════════════════════════════════════════ */
.khu--la{
  position:relative;color:#fff;
  background-color:#123D22;
  /* Hoạ tiết lá ghép liền mạch: MỘT ô 640px lặp cho toàn bộ các dải.
     Vẽ từ ba dáng lá gen riêng, rải theo lưới có xê dịch nên phủ đều
     và bốn cạnh khớp nhau. Nhẹ hơn ảnh chụp và nhìn rõ vân hơn. */
  background-image:
    radial-gradient(120% 92% at 50% 0%, rgba(255,255,255,.055), transparent 58%),
    url(../images/la-tile.webp);
  background-repeat:no-repeat, repeat;
  background-size:100% 100%, 380px 380px;
}
/* Lệch điểm bắt đầu để hai dải liên tiếp không trùng khít nhau */
.khu--la:nth-of-type(4n+2){background-position:0 0, 130px 60px}
.khu--la:nth-of-type(4n){background-position:0 0, 250px 190px}
@media(max-width:700px){ .khu--la{background-size:100% 100%, 260px 260px} }
.khu--la h2,.khu--la h3,.khu--la h4{color:#fff}
.khu--la .dau p{color:var(--xam-s)}
.khu--la .nhan{color:#0F3A1E;background:rgba(255,255,255,.92)}

/* Trên dải lá, mọi thẻ vẫn là thẻ TRẮNG — chữ đen trên nền đặc,
   đọc dễ nhất và không phải canh tương phản cho từng đoạn chữ. */
.khu--la .the,.khu--la .nd,.khu--la .qt__o,.khu--la .bv,.khu--la .sp__o,.khu--la .kq{
  background:#fff;border-color:rgba(255,255,255,.22)}
.khu--la .nd{border-left-color:var(--la-s)}
.khu--la .the h3,.khu--la .nd h3,.khu--la .qt__o h3,.khu--la .bv h3,.khu--la .kq__tin h3{color:var(--muc)}
.khu--la .the p,.khu--la .nd p,.khu--la .bv time,.khu--la .kq__tin p,.khu--la .kq__meta{color:var(--xam)}
.khu--la .the__lk,.khu--la .nd a,.khu--la .bv span,.khu--la .sp__nhom{color:var(--la-d)}
.khu--la .sp__ten{color:var(--muc)}
.khu--la .cuon{border-color:rgba(255,255,255,.22)}
.khu--la .loc button{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.30);color:#fff}
/* nút viền trên dải hoạ tiết tối: đổi sang viền trắng, nếu không chữ xanh đậm trên nền tối chỉ đạt 1,5:1 */
.khu--la .nut--vien{color:#fff;border-color:rgba(255,255,255,.55)}
.khu--la .nut--vien:hover{background:#fff;color:var(--la-d);border-color:#fff}
.khu--la .loc button[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--la-d)}
.khu--la .hq{background:#fff}
.khu--la .hq h2{color:var(--muc)}
.khu--la .hq p{color:var(--xam)}


/* ═══ Hydrogel: hai cột — ảnh trái, bốn bước dọc phải ═══ */
.hy{display:grid;gap:var(--s6);align-items:center}
@media(min-width:940px){.hy{grid-template-columns:minmax(0,.92fr) minmax(0,1fr);gap:var(--s8)}}
.hy__anh{border-radius:var(--r);overflow:hidden;border:1px solid var(--vien);box-shadow:var(--bong)}
.hy__anh img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
@media(min-width:940px){.hy__anh img{aspect-ratio:1/1}}
.bs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.bs li{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;
  gap:var(--s4);padding:var(--s5) 0;border-top:1px solid var(--vien)}
.bs li:first-child{border-top:0;padding-top:0}
.bs li:last-child{padding-bottom:0}
.bs__so{font-size:clamp(34px,5vw,46px);font-weight:800;line-height:1;
  color:transparent;-webkit-text-stroke:1.6px var(--la-s);letter-spacing:-.02em}
.bs__kegach{width:1px;align-self:stretch;background:var(--vien)}
.bs__chu h3{font-size:var(--t5);line-height:1.32;text-transform:uppercase;letter-spacing:-.005em}
.bs__chu p{font-size:var(--t3);color:var(--xam);line-height:1.55;margin-top:var(--s1)}
.khu--la .bs li{border-color:rgba(255,255,255,.18)}
.khu--la .bs__kegach{background:rgba(255,255,255,.18)}
.khu--la .bs__chu p{color:var(--xam-s)}

/* dải lưu ý ngang, có dấu chấm than */
/* Dùng flex chứ không grid: với grid, cột 1fr đẩy nhãn ra giữa và
   đoạn văn rớt xuống dòng riêng. Flex cho chữ tự chiếm phần còn lại. */
.luuy{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3) var(--s4);
  margin-top:var(--s6);background:#FFF8E6;border:1px solid #EBD08A;border-radius:var(--r);padding:var(--s4) var(--s5)}
.luuy p{flex:1 1 320px}
/* Chữ trắng trên vàng cam chỉ đạt 2,16:1. Giữ vàng sáng, đổi chữ sang
   nâu đậm để lên 5,2:1 mà không mất màu nhấn. */
.luuy__cham{width:34px;height:34px;border-radius:50%;background:#E8A33C;color:#4A3A10;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--t4);flex-shrink:0}
.luuy__ten{font-size:var(--t2);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#7A5B00}
.luuy__vach{width:1px;height:26px;background:#EBD08A}
.luuy p{font-size:var(--t3);color:#5C4A17;line-height:1.55}
@media(max-width:600px){ .luuy__vach{display:none} }

/* ═══ Quy trình: sáu nút tròn nối bằng một đường ═══ */
.qt6{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s3);position:relative}
@media(min-width:700px){.qt6{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1040px){.qt6{grid-template-columns:repeat(6,1fr)}}
.qt6::before{content:"";position:absolute;left:8%;right:8%;top:29px;height:2px;
  background:var(--vien-2);display:none}
@media(min-width:1040px){.qt6::before{display:block}}
.qt6 li{list-style:none;display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--s3);position:relative;z-index:2}
.qt6__nut{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#fff;border:2px solid var(--vien-2);color:var(--xam);
  font-size:var(--t5);font-weight:800;line-height:1}
.qt6 li:first-child .qt6__nut{background:var(--la);border-color:var(--la);color:#fff;
  box-shadow:0 8px 22px rgba(31,122,61,.28)}
.qt6 h3{font-size:var(--t3);line-height:1.35;text-transform:uppercase;letter-spacing:-.005em}
.qt6 p{font-size:var(--t2);color:var(--xam);line-height:1.5}

/* ═══ Thẻ giải pháp: huy hiệu tròn ═══ */
.the__bt--tron{width:52px;height:52px;border-radius:50%}


/* ═══ Vùng chạm tối thiểu 44px trên điện thoại ═══
   Link chữ trong thẻ và logo vốn chỉ cao bằng dòng chữ (~24px), ngón tay
   bấm hụt. Nới bằng padding chứ không nới cỡ chữ. */
@media(max-width:900px){
  .nd a,.the__lk{display:inline-flex;align-items:center;min-height:44px;padding:var(--s2) 0}
  .hieu{min-height:44px;align-items:center}
  .chan a{min-height:44px;display:inline-flex;align-items:center}
  .tien a{min-height:44px}
}