/* =============================================================================
   HE THIET KE CHUNG
   Dung cho moi trang: trang chu, trang Tien ich, va tung module ben trong.

   Trang nao cung nap base.css truoc, roi moi nap CSS rieng cua no.
   Doi mau toan he thong = doi cac bien trong :root ben duoi, khong sua cho khac.
   ============================================================================= */

:root {
  /* --- Xanh la chu dao --- */
  --green-900: #0f3d24;
  --green-800: #14532d;
  --green-700: #1a6638;
  --green-600: #1f8544;
  --green-500: #22a44e;
  --green-400: #4ec27a;
  --green-200: #b7d9c1;
  --green-100: #dff0e4;
  --green-50:  #eef7f0;

  /* --- Nen va chu --- */
  --bg: #f4f7f1;
  --bg-alt: #eaf0e5;
  --surface: #ffffff;
  --surface-2: #f5f8f3;
  --ink: #17251d;
  --ink-1: #2b3a31;   /* chua tung duoc dinh nghia: moi cho goi no deu roi ve thua ke */
  --ink-2: #4d5c53;
  /* Do duoc: #8a988f chi dat 3.01:1 tren nen trang, duoi chuan 4.5:1 — ma day
     la mau cua gan het chu huong dan nho. #616f66 dat 4.86-5.28:1 tren ca bon
     nen dang dung. */
  --ink-3: #616f66;
  --line: #dfe7da;
  --line-strong: #7d8c83;

  /* --- Trang thai --- */
  --warn-bg: #fff6e5;
  --warn-line: #e8c98a;
  --warn-ink: #7a5a12;
  --info-bg: #e8f2ec;
  --info-line: #bcd9c7;
  --info-ink: #1a6638;
  --danger: #b23b3b;

  /* --- Hinh khoi --- */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15, 61, 36, .05), 0 4px 12px rgba(15, 61, 36, .05);
  --shadow: 0 2px 4px rgba(15, 61, 36, .05), 0 14px 34px rgba(15, 61, 36, .08);
  --wrap: 1180px;
  --wrap-narrow: 820px;

  color-scheme: light;
}

* { box-sizing: border-box; }

/* Phai dat truoc moi luat display khac: thuoc tinh hidden cua HTML chi la
   display:none cua trinh duyet, nen bat ky luat nao co display deu de len no. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Khong de mot chu dung le loi dong cuoi cua tieu de / doan van ("giá.", "bạn", "thiện"
   — ra soat 12/10/2026). Trinh duyet chua ho tro thi bo qua, khong anh huong gi. */
body { text-wrap: pretty; }  /* thua ke xuong moi chu, ke ca ten the (<b>, <span>) */

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap-narrow { width: 100%; max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 20px; }

/* ---------------------------------------------------------------------------
   Chu
   --------------------------------------------------------------------------- */
.eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--green-600);
  margin: 0 0 14px;
}
.h1 {
  font-size: clamp(29px, 4.4vw, 44px);
  line-height: 1.12;
  font-weight: 750;
  letter-spacing: -.022em;
  margin: 0;
}
.h2 {
  font-size: clamp(24px, 3.6vw, 36px);
  line-height: 1.2;
  font-weight: 720;
  letter-spacing: -.018em;
  margin: 0;
}
.h3 { font-size: 18px; font-weight: 680; line-height: 1.35; margin: 0; letter-spacing: -.01em; }
.lead { font-size: 16.5px; color: var(--ink-2); margin: 16px 0 0; max-width: 56ch; }
.muted { color: var(--ink-2); }
.accent { color: var(--green-600); }

/* ---------------------------------------------------------------------------
   Nut
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 640;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, border-color .15s, transform .12s, box-shadow .15s, opacity .15s;
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-icon { width: 19px; height: 19px; flex: none; }

.btn-primary {
  background: var(--green-700);
  border-color: var(--green-700);
  color: #fff;
  box-shadow: 0 2px 10px rgba(26, 102, 56, .25);
}
.btn-primary:hover { background: var(--green-800); border-color: var(--green-800); }

.btn-accent {
  background: var(--green-500);
  border-color: var(--green-500);
  color: #fff;
  box-shadow: 0 2px 12px rgba(34, 164, 78, .3);
}
.btn-accent:hover { background: var(--green-600); border-color: var(--green-600); }

.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: rgba(26, 102, 56, .07); border-color: transparent; }

.btn-block { width: 100%; }
.btn-sm { padding: 9px 16px; font-size: 14px; }

.link-btn {
  background: none; border: 0; padding: 0;
  color: var(--ink-2); font: inherit; font-size: 14px;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.link-btn:hover { color: var(--green-700); }
.link-btn.danger { color: var(--danger); }

/* ---------------------------------------------------------------------------
   Thanh dieu huong
   --------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  /* 97%: 92% truoc day de lo vet mau cua the / mau vat lieu dang cuon phia sau */
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; gap: 18px;
  min-height: 66px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 1 auto; min-width: 0; }
.brand-logo { height: 40px; width: auto; flex: none; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-sub { font-size: 9.5px; letter-spacing: .14em; color: var(--ink-3); text-transform: uppercase; font-weight: 600; }

.nav-links { display: none; align-items: center; gap: 4px; margin-left: auto; }
@media (min-width: 960px) { .nav-links { display: flex; } }

.nav-link {
  position: relative;
  padding: 9px 13px;
  border-radius: var(--radius-sm);
  font-size: 14.5px; font-weight: 580;
  color: var(--ink-2);
  text-decoration: none;
  background: none; border: 0; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.nav-link:hover { color: var(--green-700); background: var(--green-50); }
.nav-link.is-active { color: var(--green-800); font-weight: 660; }
.nav-caret { width: 14px; height: 14px; transition: transform .18s; }
.nav-item.is-open .nav-caret { transform: rotate(180deg); }

/* Nut mui ten nam canh chu, chi de mo bang xo xuong. Ban than chu la link. */
.nav-caret-btn {
  display: inline-grid; place-items: center;
  width: 26px; height: 30px; margin-left: -6px;
  border: 0; background: none; padding: 0;
  color: var(--ink-2); cursor: pointer;
  border-radius: var(--radius-sm);
}
.nav-caret-btn:hover { color: var(--green-700); background: var(--green-50); }

.nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 310px;
  max-height: calc(100vh - 96px); overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px;
  z-index: 60;
}
.nav-menu-item {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
}
.nav-menu-item:hover { background: var(--green-50); }
.nav-menu-item.is-soon { opacity: .58; cursor: default; pointer-events: none; }
.nav-menu-icon {
  width: 34px; height: 34px; flex: none;
  border-radius: 9px;
  background: var(--green-50);
  color: var(--green-700);
  display: grid; place-items: center;
}
.nav-menu-icon svg { width: 18px; height: 18px; }
.nav-menu-name { font-size: 14.5px; font-weight: 640; display: flex; align-items: center; gap: 7px; }
.nav-menu-desc { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; line-height: 1.45; }

.nav-menu-all {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 6px; padding: 10px 12px;
  border-top: 1px solid var(--line);
  font-size: 13.5px; font-weight: 620;
  color: var(--green-700); text-decoration: none;
}
.nav-menu-all:hover { background: var(--green-50); }
.nav-menu-arrow { width: 16px; height: 16px; }

/* Bang xo xuong theo ba mang (may tinh) */
/* Dat giua man hinh ngay duoi thanh dau trang (muc "Tien ich" nam sat mep
   phai, neo theo no thi bang rong 820px tran ra ngoai man). */
.nav-menu-mang {
  position: fixed; top: 74px; left: 50%; transform: translateX(-50%);
  width: min(860px, calc(100vw - 32px)); padding: 10px;
}
/* Cau noi vo hinh tu muc "Tien ich" xuong bang: re chuot qua khe khong bi dong. */
.nav-menu-mang::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-mang-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.nav-mang { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nav-mang-head {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px; margin-bottom: 4px;
  border-radius: var(--radius-sm); background: var(--surface-2);
  text-decoration: none; color: inherit;
}
.nav-mang-head:hover { background: var(--green-50); }
.nav-mang-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: var(--radius-sm);
  font-size: 13.5px; color: var(--ink); text-decoration: none; line-height: 1.35;
}
.nav-mang-item:hover { background: var(--green-50); color: var(--green-800); }
.nav-mang-item.is-soon { opacity: .58; pointer-events: none; }
.nav-mang-icon { width: 16px; height: 16px; flex: none; color: var(--green-700); }
.nav-mobile-mang {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 4px 6px;
  font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--green-700); text-decoration: none;
}
.nav-mobile-mang svg { width: 17px; height: 17px; }

.pill-soon {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: var(--warn-bg); color: var(--warn-ink);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
}

.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
@media (min-width: 960px) {
  .nav-actions { margin-left: 14px; }
  /* Man lam viec khong co nut "Dung thu ngay": khoi rong van giu le 14px lam menu
     lech khoi mep phai noi dung (ra soat 12/10/2026). */
  .nav-actions.is-trong { display: none; }
}

/* Man hep: cac phan tu trong thanh dieu huong duoc phep co lai thay vi day
   thanh dau trang tran ra ngoai, va le hai ben hep lai de do thua khoang trong */
@media (max-width: 560px) {
  .nav-actions { min-width: 0; gap: 8px; flex: none; }
  .brand-text { min-width: 0; }
  .brand-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wrap, .wrap-narrow { padding: 0 14px; }
}
/* Dien thoai hep: dong ta thuong hieu la chu trang tri, bo di de con cho cho
   nut menu. Khong bo thi thanh dau trang day ca nut menu ra ngoai man hinh
   va khach khong bam duoc vao dau. */
@media (max-width: 430px) {
  .brand-sub { display: none; }
}

.nav-toggle {
  display: grid; place-items: center;
  /* flex: none — khong co thi tren trang tien ich (tieu de dai) no bi ep con
     14px be ngang, cham vao la truot. */
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
}
@media (min-width: 960px) { .nav-toggle { display: none; } }
.nav-toggle svg { width: 20px; height: 20px; }

/* Khay menu truot ngang tu canh phai (khong con day noi dung trang xuong
   duoi nhu kieu xo doc cu). Luon nam trong DOM, dong/mo bang class is-open
   de con hieu ung truot — dung [hidden] thi khong the animate transform. */
.nav-backdrop {
  /* .site-header co backdrop-filter nen la khoi chua cua moi phan tu fixed ben
     trong: inset:0 chi phu dung dai header, phan trang ben canh khay khong bi
     lam mo va bam vao khong dong menu. Dat kich thuoc theo man hinh nhu .nav-mobile. */
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh; height: 100dvh;
  background: rgba(15, 37, 29, .42);
  z-index: 65;
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

.nav-mobile {
  position: fixed; top: 0; right: 0;
  width: min(320px, 86vw); height: 100dvh;
  background: var(--surface);
  box-shadow: var(--shadow);
  border-left: 1px solid var(--line);
  z-index: 70;
  padding: 14px 18px 24px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.nav-mobile.is-open { transform: translateX(0); }
@media (min-width: 960px) { .nav-mobile, .nav-backdrop { display: none !important; } }

.nav-mobile-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 4px 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.nav-mobile-title { font-size: 16px; font-weight: 700; margin: 0; }
.nav-mobile-close {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink-2);
  cursor: pointer;
}
.nav-mobile-close:hover { background: var(--green-50); color: var(--green-700); }
.nav-mobile-close svg { width: 17px; height: 17px; }

.nav-mobile-link {
  display: block;
  padding: 11px 4px;
  font-size: 15.5px; font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.nav-mobile-sub {
  display: block;
  padding: 9px 4px 9px 16px;
  font-size: 14.5px;
  color: var(--ink-2);
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   The
   --------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.card-hover { transition: transform .15s, box-shadow .15s, border-color .15s; }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong); }

.icon-badge {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--green-50);
  color: var(--green-700);
  display: grid; place-items: center;
  margin-bottom: 14px;
}
.icon-badge svg { width: 22px; height: 22px; }

/* ---------------------------------------------------------------------------
   Muc
   --------------------------------------------------------------------------- */
.section { padding: 64px 0; }
/* Dien thoai: cac trang khac (vd danh muc Tien ich) cung sat len menu hon,
   dong bo voi .hero da giam o trang chu. */
@media (max-width: 560px) { .section { padding: 32px 0; } }
.section-dark {
  background: var(--green-800);
  color: #fff;
}
.section-dark .eyebrow { color: var(--green-400); }
.section-dark .lead { color: rgba(255, 255, 255, .82); }
.section-head { max-width: 62ch; }
.section-head .lead { margin-top: 12px; }

/* ---------------------------------------------------------------------------
   Chan trang
   --------------------------------------------------------------------------- */
.site-footer {
  background: var(--green-900);
  color: rgba(255, 255, 255, .74);
  padding: 46px 0 30px;
  margin-top: 70px;
  font-size: 14px;
}
.site-footer .brand-sub { color: rgba(255, 255, 255, .74); }
/* Nen chan trang toi, mang xanh dam trong logo de bi chim — dem mot mieng
   nen sang sau logo de giu do tuong phan. */
.site-footer .brand-logo {
  background: var(--surface);
  padding: 5px 9px;
  border-radius: 8px;
}
.footer-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
/* Ba mang: thuong hieu + ba cot mang + lien ket */
@media (min-width: 760px) { .footer-grid-mang { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .footer-grid-mang { grid-template-columns: 1.3fr 1fr 1fr 1fr .8fr; } }
.footer-title a { color: inherit; text-decoration: none; }
.footer-title a:hover { text-decoration: underline; }
.footer-title {
  color: #fff; font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  margin: 0 0 12px;
}
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: 8px; }
.footer-list a { color: rgba(255, 255, 255, .74); text-decoration: none; }
.footer-list a:hover { color: #fff; }
.footer-note {
  margin-top: 30px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 12.5px;
  color: rgba(255, 255, 255, .55);
}
.footer-note p { margin: 0 0 5px; }

/* ---------------------------------------------------------------------------
   Tien ich chung
   --------------------------------------------------------------------------- */
.stack-sm > * + * { margin-top: 8px; }
.center { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* --- Cong nang mong muon: khac han dong nhan dien hien trang ben tren ------ */
.use-row { margin-top: 12px; }
.use-label {
  display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 620; color: var(--ink-2);
}
.use-select {
  width: 100%; min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink-1);
  font: inherit; font-size: 15px;
}
.use-select:focus { outline: 2px solid var(--green-500); outline-offset: 1px; }
.use-row.is-changed .use-select { border-color: var(--green-500); background: var(--green-50); }
.use-auto {
  margin: 7px 0 0; font-size: 12.5px; line-height: 1.45;
  color: var(--green-700);
}