/* Hallmark · genre: modern-minimal · macrostructure: Stat-Led
 * H4 Stat-Led knobs: number=tabular display, qualifier=below, secondary=row of three
 * theme: custom (vibe: "chủ shop bận, cần người thật, số phải thật"
 *   paper oklch(99.2% 0.004 48) warm-near-white
 *   accent oklch(62.8% 0.197 33.4) warm — neo vào cam brand SPX
 *   Be Vietnam Pro display + system sans body)
 * axes: light paper / geometric-sans display / warm accent
 * nav: N10 floating-on-scroll morph · footer: Ft1 mast-headed
 * enrichment: E5 hand-built SVG (bộ icon nét vẽ, vẽ dần khi cuộn tới)
 * motion: nav-morph · icon-draw · number-tick  (ba nguyên thể, không hơn)
 * pre-emit critique: P5 H5 E4 S5 R4 V5
 *
 * Con số lớn ở hero là số TÍNH RA TỪ SHOP CỦA KHÁCH, không phải số bịa.
 * Trang không có một chỉ số marketing nào do mình nghĩ ra.
 */

/* ───────────────────────────────────────────────────── chữ */
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/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(/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(/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(/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;
}

/* ───────────────────────────────────────────────────── token
   Bản mang đi được nằm ở css/tokens.css. Nhúng thẳng vào đây để bớt một
   lượt request — trang chủ là trang chuyển đổi, mỗi request là một nhịp chờ. */
:root {
  --color-paper: oklch(99.2% 0.004 48);
  --color-paper-2: oklch(97.2% 0.008 52);
  --color-paper-3: oklch(95.0% 0.012 50);
  --color-ink: oklch(23.5% 0.018 50);
  --color-ink-2: oklch(47.0% 0.016 50);
  --color-ink-3: oklch(52.0% 0.012 50);  /* 5.40:1 trên giấy, 5.09:1 trên paper-2 - dùng cho chữ nhỏ được */
  --color-rule: oklch(90.5% 0.010 50);
  --color-brand: oklch(62.8% 0.197 33.4);
  --color-brand-press: oklch(56.0% 0.190 32);
  --color-brand-deep: oklch(50.5% 0.175 32);
  --color-tint: oklch(96.3% 0.022 42);
  --color-tint-2: oklch(92.5% 0.040 40);
  --color-ok: oklch(52.0% 0.130 155);
  --color-warn: oklch(56.0% 0.120 75);
  --color-focus: oklch(45.0% 0.190 258);

  --font-display: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --text-xs: .8125rem; --text-sm: .9rem; --text-base: 1.0625rem;
  --text-lg: 1.1875rem; --text-xl: 1.375rem;
  --text-2xl: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  --text-3xl: clamp(1.9rem, 1.4rem + 2.2vw, 2.75rem);
  --text-display-s: clamp(2.2rem, 1.5rem + 3vw, 3.5rem);
  --text-display: clamp(2.6rem, 1.6rem + 4.4vw, 4.75rem);
  --text-figure: clamp(2.5rem, 1rem + 5.4vw, 4.6rem);

  --space-3xs: .25rem; --space-2xs: .5rem; --space-xs: .75rem; --space-sm: 1rem;
  --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem;

  --page-max: 72rem; --prose-max: 40rem;
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px;
  --rule-hair: 1px;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in: cubic-bezier(.4,0,1,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 160ms; --dur-mid: 320ms; --dur-slow: 520ms;

  --shadow-sm: 0 1px 2px oklch(23.5% .018 50 / .05);
  --shadow-md: 0 1px 2px oklch(23.5% .018 50 / .05), 0 10px 24px oklch(23.5% .018 50 / .06);
  --shadow-lg: 0 2px 4px oklch(23.5% .018 50 / .05), 0 18px 44px oklch(23.5% .018 50 / .09);
  --shadow-brand: 0 2px 6px oklch(56% .19 32 / .22), 0 14px 34px oklch(56% .19 32 / .16);
}

/* ───────────────────────────────────────────────────── nền */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* clip chứ không hidden: hidden trên html làm hỏng position:sticky ở vài trình duyệt */
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: normal;
  line-height: 1.08;
  letter-spacing: -.028em;
  margin: 0 0 .45em;
  overflow-wrap: anywhere;
  min-width: 0;
}
h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); letter-spacing: -.02em; }
h4 { font-size: var(--text-lg); letter-spacing: -.015em; font-weight: 600; }
p { margin: 0 0 1em; }

a { color: var(--color-brand-press); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-brand-deep); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
  /* không transition: vòng focus phải hiện tức thì */
}

[id] { scroll-margin-top: 88px; }

.boc { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--space-sm); }
@media (min-width: 640px) { .boc { padding-inline: var(--space-md); } }

.muc { padding-block: var(--space-2xl); }
@media (min-width: 900px) { .muc { padding-block: var(--space-3xl); } }
.muc-mo { background: var(--color-paper-2); }
.muc-tint { background: var(--color-tint); }
.muc-toi { background: var(--color-ink); color: var(--color-paper); }

.phu { color: var(--color-ink-2); }
.nho { font-size: var(--text-sm); }
.tnum { font-variant-numeric: tabular-nums; }
.vanban { max-width: var(--prose-max); }

.bo-qua {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--color-ink); color: var(--color-paper);
  padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-xs);
}
.bo-qua:focus { left: var(--space-2xs); top: var(--space-2xs); }

/* nhãn nhỏ phía trên tiêu đề — LUÔN xếp dọc, nhãn trên tiêu đề dưới cùng cột */
.nhan {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--color-brand-deep);
  margin-bottom: var(--space-xs);
}

/* ───────────────────────────────────────────── icon vẽ tay
   Nét vẽ dần khi cuộn tới. Không phải trang trí: nó dẫn mắt vào từng ý
   theo đúng thứ tự đọc, thay vì bày sẵn cả cụm. */
.ic { width: 32px; height: 32px; color: var(--color-brand-press); flex: none; }
.ic-lon { width: 40px; height: 40px; }
.ic-nho { width: 20px; height: 20px; }

.ic .ve {
  stroke-dasharray: var(--dash, 120);
  stroke-dashoffset: var(--dash, 120);
}
.ic.hien .ve {
  animation: ve-net var(--dur-slow) var(--ease-out) forwards;
}
.ic.hien .ve:nth-child(2) { animation-delay: 90ms; }
.ic.hien .ve:nth-child(3) { animation-delay: 170ms; }
.ic.hien .ve:nth-child(4) { animation-delay: 240ms; }
.ic.hien .ve:nth-child(5) { animation-delay: 300ms; }
@keyframes ve-net { to { stroke-dashoffset: 0; } }

.ic .cham circle { opacity: 0; }
.ic.hien .cham circle { animation: cham-hien 1.4s var(--ease-in-out) infinite; }
.ic.hien .cham circle:nth-child(2) { animation-delay: .18s; }
.ic.hien .cham circle:nth-child(3) { animation-delay: .36s; }
@keyframes cham-hien { 0%,70%,100% { opacity: .25; } 35% { opacity: 1; } }

/* ───────────────────────────────────────────── nav N10: thanh -> viên thuốc
   Bốn luật: chiều cao tổng KHÔNG đổi, lệch dùng transform, mọi thuộc tính
   dùng chung một đường cong, và cross-fade từng lớp chứ không đổi DOM. */
.nav {
  position: sticky; top: 0; z-index: 50;
  padding-block: 0;
  background: oklch(99.2% .004 48 / .88);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  backdrop-filter: saturate(1.5) blur(14px);
  transition:
    padding-block var(--dur-slow) var(--ease-out),
    background-color var(--dur-slow) var(--ease-out),
    border-bottom-color var(--dur-slow) var(--ease-out),
    backdrop-filter var(--dur-slow) var(--ease-out);
}
.nav__trong {
  display: flex; align-items: center; gap: var(--space-sm);
  width: 100%; max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--space-sm);
  padding-block: 12px;
  min-height: 60px;
  border-radius: 0;
  background: transparent;
  backdrop-filter: blur(0);
  box-shadow: none;
  transform: translateY(0);
  transition:
    max-width var(--dur-slow) var(--ease-out),
    min-height var(--dur-slow) var(--ease-out),
    padding-block var(--dur-slow) var(--ease-out),
    border-radius var(--dur-slow) var(--ease-out),
    background-color var(--dur-slow) var(--ease-out),
    backdrop-filter var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.nav.troi {
  padding-block: var(--space-2xs);
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: blur(0);
}
.nav.troi .nav__trong {
  max-width: 60rem;
  min-height: 52px;
  padding-block: 4px;
  border-radius: var(--radius-pill);
  background: oklch(99.2% .004 48 / .9);
  backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px oklch(90.5% .01 50 / .9);
  transform: translateY(10px);
}

.dau-hieu {
  font-family: var(--font-display); font-weight: 800; font-size: 1.1rem;
  letter-spacing: -.03em; color: var(--color-ink); text-decoration: none;
  margin-right: auto; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .4rem;
}
.dau-hieu .cham-cam {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--color-brand); flex: none;
}
.nav__links { display: none; gap: var(--space-md); list-style: none; margin: 0; padding: 0; }
.nav__links a {
  color: var(--color-ink-2); text-decoration: none; font-size: var(--text-sm);
  font-weight: 500; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__links a:hover { color: var(--color-ink); }
@media (min-width: 900px) { .nav__links { display: flex; } }

.nav-lang {
  font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-2);
  text-decoration: none; white-space: nowrap;
  padding: .3rem .7rem; border-radius: var(--radius-pill);
  border: var(--rule-hair) solid var(--color-rule);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-lang:hover { border-color: var(--color-tint-2); color: var(--color-ink); }

/* ───────────────────────────────────────────── nút */
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-base);
  text-decoration: none; cursor: pointer;
  padding: .85rem 1.5rem; min-height: 50px;
  border: var(--rule-hair) solid transparent; border-radius: var(--radius-pill);
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.nut:active { transform: translateY(1px); }
/* Icon trong nút ăn theo màu chữ của nút. Thiếu dòng này thì icon giữ màu cam
   mặc định của .ic, nằm trên nền nút cam, và biến mất hoàn toàn. */
.nut .ic { color: currentColor; }
.nut[disabled], .nut[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.nut-chinh { background: var(--color-brand-press); color: #fff; box-shadow: var(--shadow-brand); }
.nut-chinh:hover { background: var(--color-brand-deep); color: #fff; }
.nut-vien {
  background: var(--color-paper); color: var(--color-ink);
  border-color: var(--color-rule); box-shadow: var(--shadow-sm);
}
.nut-vien:hover { border-color: var(--color-tint-2); background: var(--color-tint); color: var(--color-brand-deep); }
.nut-toi { background: var(--color-ink); color: var(--color-paper); }
.nut-toi:hover { background: #000; color: var(--color-paper); }
.nut-nho { padding: .5rem 1rem; min-height: 40px; font-size: var(--text-sm); }
.nut-rong { width: 100%; }
/* chữ nút không bao giờ được xuống hai dòng */
.nut { white-space: nowrap; }

/* ───────────────────────────────────────────── hero Stat-Led */
.hero { padding-block: var(--space-xl) var(--space-2xl); }
@media (min-width: 900px) { .hero { padding-block: var(--space-2xl) var(--space-3xl); } }

.hero__luoi { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 980px) {
  .hero__luoi { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: var(--space-2xl); }
}

.hero h1 { max-width: 15ch; }
.hero__lede {
  font-size: var(--text-lg); color: var(--color-ink-2);
  max-width: 48ch; margin-bottom: var(--space-md);
}
.hero__lede strong { color: var(--color-ink); font-weight: 600; }

/* con số lớn — là KẾT QUẢ TÍNH, không phải số marketing */
.so-khoi {
  margin: var(--space-md) 0 var(--space-sm);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.so-lon {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-figure); line-height: .92; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--color-brand-press);
  display: flex; align-items: baseline; gap: .1em;
  /* KHÔNG wrap: số tiền và đơn vị phải đứng cùng dòng. Để wrap thì
     "16.896.000" đẩy chữ "đ" xuống dòng riêng, nhìn như lỗi. */
  flex-wrap: nowrap; white-space: nowrap;
  margin-bottom: .1em;
}
.so-lon .dvi {
  font-size: .28em; font-weight: 600; letter-spacing: -.01em;
  color: var(--color-ink-2); white-space: nowrap;
}
.so-chu {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-lg); letter-spacing: -.02em;
  line-height: 1.3; max-width: 30ch; margin: 0 0 .5rem;
}
.so-ghi { font-size: var(--text-sm); color: var(--color-ink-2); max-width: 44ch; }

.hero__nut { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-md); }

/* ───────────────────────────────────────────── máy tính */
.may {
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-md);
  scroll-margin-top: 96px;
}
@media (min-width: 980px) { .may { position: sticky; top: 96px; } }

.may__dau { display: flex; align-items: center; gap: var(--space-2xs); margin-bottom: var(--space-sm); }
.may__dau h2 { font-size: var(--text-lg); margin: 0; letter-spacing: -.02em; }

.truot { display: block; margin-bottom: var(--space-sm); }
.truot__nhan {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2xs);
  font-size: var(--text-sm); font-weight: 600; margin-bottom: .4rem;
}
.truot__gt {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  color: var(--color-brand-press); font-weight: 700;
}
input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px; background: transparent; cursor: pointer; margin: 0;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--radius-pill); background: var(--color-paper-3);
}
input[type=range]::-moz-range-track {
  height: 6px; border-radius: var(--radius-pill); background: var(--color-paper-3);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -8px; border-radius: 50%;
  background: var(--color-brand-press); border: 3px solid var(--color-paper);
  box-shadow: var(--shadow-brand);
  transition: transform var(--dur-fast) var(--ease-out);
}
input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-brand-press); border: 3px solid var(--color-paper);
  box-shadow: var(--shadow-brand);
}
input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.08); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(.96); }
input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.may__ra {
  margin-top: var(--space-sm); padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.hang-so {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2xs);
  padding-block: .45rem; font-size: var(--text-sm);
}
.hang-so + .hang-so { border-top: var(--rule-hair) solid var(--color-paper-3); }
.hang-so__ten { display: flex; align-items: center; gap: .45rem; color: var(--color-ink-2); min-width: 0; }
.hang-so__gt { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.hang-so.tong {
  margin-top: var(--space-2xs); padding-top: var(--space-xs);
  border-top: 2px solid var(--color-ink); font-size: var(--text-base);
}
.hang-so.tong .hang-so__ten { color: var(--color-ink); font-weight: 600; }
.hang-so.tong .hang-so__gt { color: var(--color-brand-press); font-size: var(--text-xl); font-family: var(--font-display); }

.may__ghi {
  font-size: var(--text-xs); color: var(--color-ink-2);
  margin: var(--space-xs) 0 0; line-height: 1.5;
}

/* ───────────────────────────────────────────── so sánh */
.ss { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ss table { width: 100%; min-width: 34rem; border-collapse: collapse; }
.ss th, .ss td { padding: var(--space-xs) var(--space-sm); text-align: left; vertical-align: top; }
.ss thead th {
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600;
  color: var(--color-ink-2); border-bottom: 2px solid var(--color-rule);
  white-space: nowrap;
}
.ss thead th.noi-bat { color: var(--color-brand-deep); }
.ss tbody tr + tr td { border-top: var(--rule-hair) solid var(--color-rule); }
.ss td:first-child { font-weight: 600; color: var(--color-ink); width: 34%; }
.ss td { font-size: var(--text-sm); color: var(--color-ink-2); }
.ss .cot-an { background: var(--color-tint); }
.ss tbody tr:first-child .cot-an { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.ss tbody tr:last-child .cot-an { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.ss .dau {
  display: inline-flex; align-items: center; gap: .35rem;
  font-weight: 600; color: var(--color-ink);
}
.ss .dau .ic-nho { color: var(--color-ok); }
.ss .dau.trong .ic-nho { color: var(--color-ink-3); }
.ss .dau.trong { color: var(--color-ink-2); font-weight: 400; }

/* ───────────────────────────────────────────── khối lý do, cố tình KHÔNG đều nhau */
.ly-do { display: grid; gap: var(--space-md); }
@media (min-width: 760px) { .ly-do { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media (min-width: 1040px) {
  .ly-do { grid-template-columns: minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr); }
  /* ô đầu cao gấp đôi: nhịp lệch, không phải lưới ba cột đều tăm tắp */
  .ly-do > :first-child { grid-row: span 2; }
}
.o-ly-do {
  background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md); padding: var(--space-md);
  display: flex; flex-direction: column; gap: var(--space-2xs);
}
.o-ly-do.manh {
  background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink);
  justify-content: space-between;
}
.o-ly-do.manh h3 { color: var(--color-paper); }
.o-ly-do.manh p { color: oklch(90% .01 50); }
.o-ly-do.manh .ic { color: var(--color-tint-2); }
/* Cam trên nền mực gần như không đọc được. Trên nền tối dùng sắc nhạt. */
.o-ly-do.manh a { color: var(--color-tint-2); }
.o-ly-do.manh a:hover { color: #fff; }
.o-ly-do h3 { margin: 0; }
.o-ly-do p { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); }

/* ───────────────────────────────────────────── bước, dạng dòng thời gian */
.buoc { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: b; }
.buoc li {
  position: relative; padding-left: 3.25rem; padding-bottom: var(--space-lg);
}
.buoc li::before {
  counter-increment: b; content: counter(b);
  position: absolute; left: 0; top: 0;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
  color: var(--color-brand-deep); background: var(--color-tint);
  border: var(--rule-hair) solid var(--color-tint-2);
}
.buoc li::after {
  content: ""; position: absolute; left: 1.125rem; top: 2.5rem; bottom: .35rem;
  width: var(--rule-hair); background: var(--color-rule);
}
.buoc li:last-child { padding-bottom: 0; }
.buoc li:last-child::after { display: none; }
.buoc h3 { margin: .15rem 0 .25rem; font-size: var(--text-lg); }
.buoc p { margin: 0; color: var(--color-ink-2); font-size: var(--text-sm); }
.buoc .khi { font-size: var(--text-xs); font-weight: 600; color: var(--color-brand-deep); text-transform: uppercase; letter-spacing: .07em; }

/* ───────────────────────────────────────────── hộp An */
.an-hop {
  display: grid; gap: var(--space-md); align-items: center;
  background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg); padding: var(--space-md); box-shadow: var(--shadow-md);
}
@media (min-width: 760px) { .an-hop { grid-template-columns: auto minmax(0,1fr) auto; } }
.an-anh {
  width: 108px; height: 108px; border-radius: 50%;
  background: var(--color-tint); border: 3px solid var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-tint-2), var(--shadow-md);
  display: grid; place-items: center; overflow: hidden;
  /* Chữ "An" nằm dưới ảnh làm lớp dự phòng: ảnh lỗi thì vẫn còn một thứ
     tử tế để nhìn, thay vì ô vuông vỡ. */
  font-family: var(--font-display); font-weight: 800; font-size: 2.2rem;
  color: var(--color-brand-deep); flex: none;
}
.an-anh img {
  width: 100%; height: 100%; object-fit: cover;
  /* Đầu nằm ở nửa trên khung vuông - kéo tâm cắt lên cho mặt vào giữa vòng tròn. */
  object-position: center 32%;
}
@media (min-width: 760px) { .an-anh { width: 132px; height: 132px; } }
.an-ten { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); margin: 0 0 .15rem; }
.an-vai { font-size: var(--text-sm); color: var(--color-ink-2); margin: 0 0 .4rem; }
.an-trang-thai {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--text-xs); font-weight: 600;
  padding: .2rem .6rem; border-radius: var(--radius-pill);
}
.an-trang-thai.mo { background: oklch(52% .13 155 / .12); color: var(--color-ok); }
.an-trang-thai.nghi { background: var(--color-paper-3); color: var(--color-ink-2); }
.an-trang-thai .cham {
  width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; flex: none;
}
.an-trang-thai.mo .cham { animation: tho 2.4s var(--ease-in-out) infinite; }
@keyframes tho { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.an-lien-he { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }

/* ───────────────────────────────────────────── ảnh SPX, để trần */
.spx-anh { display: grid; gap: var(--space-sm); }
@media (min-width: 760px) { .spx-anh { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); } }
.spx-anh a, .spx-anh figure {
  margin: 0; display: block; border-radius: var(--radius-md); overflow: hidden;
  border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper);
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.spx-anh a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.spx-anh img { width: 100%; height: auto; }

.tai-lieu { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
@media (min-width: 640px) { .tai-lieu { grid-template-columns: 1fr 1fr; } }
.tai-lieu a {
  display: flex; align-items: center; gap: .6rem; min-height: 50px;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm); text-decoration: none;
  color: var(--color-ink); font-size: var(--text-sm); font-weight: 500;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.tai-lieu a:hover { border-color: var(--color-tint-2); background: var(--color-tint); color: var(--color-brand-deep); }
.tai-lieu a .ic-nho { color: var(--color-brand-press); }

/* ───────────────────────────────────────────── dịch vụ */
.dv { display: grid; gap: var(--space-sm); }
@media (min-width: 620px) { .dv { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .dv { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.dv-o {
  display: flex; gap: var(--space-xs); align-items: flex-start;
  padding: var(--space-sm); border-radius: var(--radius-md);
  border: var(--rule-hair) solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.dv-o:hover { border-color: var(--color-rule); background: var(--color-paper); }
.dv-o h4 { margin: 0 0 .15rem; }
.dv-o p { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); }

/* ───────────────────────────────────────────── faq */
.faq { max-width: 48rem; }
.faq details {
  border-bottom: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-xs);
}
.faq summary {
  cursor: pointer; list-style: none; display: flex; gap: var(--space-sm);
  align-items: flex-start; font-family: var(--font-display);
  font-weight: 600; font-size: var(--text-lg); letter-spacing: -.015em;
  padding-block: var(--space-2xs);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; margin-left: auto; flex: none;
  width: 1.1rem; height: 1.1rem; margin-top: .3rem;
  background: currentColor; color: var(--color-brand-press);
  -webkit-mask: var(--mask-cong) center/contain no-repeat;
  mask: var(--mask-cong) center/contain no-repeat;
  transition: transform var(--dur-mid) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 var(--space-2xs); color: var(--color-ink-2); max-width: 62ch; }
:root {
  --mask-cong: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" stroke="black" stroke-width="2.4" stroke-linecap="round" fill="none"/></svg>');
}

/* ───────────────────────────────────────────── dải CTA */
.cta-dai { background: var(--color-ink); color: var(--color-paper); }
.cta-dai h2 { color: var(--color-paper); max-width: 18ch; }
.cta-dai p { color: oklch(84% .012 50); max-width: 46ch; }
.cta-dai .nut-vien {
  background: transparent; color: var(--color-paper);
  border-color: oklch(100% 0 0 / .32); box-shadow: none;
}
.cta-dai .nut-vien:hover { background: oklch(100% 0 0 / .08); color: var(--color-paper); border-color: oklch(100% 0 0 / .5); }

/* ───────────────────────────────────────────── bài viết */
.bai-luoi { display: grid; gap: var(--space-md); }
@media (min-width: 700px) { .bai-luoi { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); } }
.bai-the {
  display: flex; flex-direction: column;
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md);
  overflow: hidden; background: var(--color-paper);
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.bai-the:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.bai-the img { aspect-ratio: 16/9; object-fit: cover; width: 100%; background: var(--color-paper-3); }
.bai-the-noi { padding: var(--space-sm); display: flex; flex-direction: column; flex: 1; gap: .4rem; }
.bai-the h3 { font-size: var(--text-lg); margin: 0; }
.bai-the h3 a { color: var(--color-ink); text-decoration: none; }
.bai-the h3 a:hover { color: var(--color-brand-press); }
.bai-the p { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.bai-the time { margin-top: auto; font-size: var(--text-xs); color: var(--color-ink-3); }

.bai { max-width: 42rem; margin-inline: auto; }
.bai-dau { margin-bottom: var(--space-lg); }
.bai-meta { font-size: var(--text-sm); color: var(--color-ink-2); }
.bai-noi { font-size: var(--text-lg); line-height: 1.68; }
.bai-noi h2 { margin-top: var(--space-xl); font-size: var(--text-2xl); }
.bai-noi h3 { margin-top: var(--space-lg); }
.bai-noi img, .bai-noi figure { border-radius: var(--radius-md); margin-block: var(--space-md); }
.bai-noi figcaption { font-size: var(--text-sm); color: var(--color-ink-2); margin-top: var(--space-2xs); }
.bai-noi blockquote {
  margin: var(--space-md) 0; padding-left: var(--space-sm);
  border-left: 3px solid var(--color-tint-2); color: var(--color-ink-2);
}
.bai-noi code {
  background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule);
  padding: .1rem .35rem; border-radius: var(--radius-xs);
  font-family: var(--font-mono); font-size: .88em;
}
.bai-noi pre {
  background: var(--color-ink); color: oklch(93% .01 50);
  padding: var(--space-sm); border-radius: var(--radius-sm); overflow-x: auto;
  font-family: var(--font-mono); font-size: var(--text-sm);
}
.bai-noi pre code { background: none; border: 0; padding: 0; color: inherit; }
.bai-noi .bang-boc { overflow-x: auto; margin-block: var(--space-md); }
.bai-noi table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.bai-noi th, .bai-noi td { border: var(--rule-hair) solid var(--color-rule); padding: .5rem .7rem; text-align: left; }
.bai-noi th { background: var(--color-paper-2); font-weight: 600; }

.sr-cta {
  background: var(--color-tint); border: var(--rule-hair) solid var(--color-tint-2);
  border-radius: var(--radius-md); padding: var(--space-md); margin-block: var(--space-lg);
}
.sr-cta h3 { margin-bottom: .3rem; }
.sr-cta p { color: var(--color-ink-2); font-size: var(--text-base); }
.sr-cta a:not(.nut) { color: var(--color-brand-deep); }
.muc-tint a:not(.nut) { color: var(--color-brand-deep); }

/* ───────────────────────────────────────────── chân trang Ft1 */
.chan { background: var(--color-paper-2); border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-xl) var(--space-md); }
.chan__dau { display: grid; gap: var(--space-md); padding-bottom: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
@media (min-width: 820px) { .chan__dau { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); gap: var(--space-xl); } }
.chan__khau {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg);
  letter-spacing: -.02em; max-width: 26ch; margin: .5rem 0 var(--space-2xs);
}
.chan h2.chan-h { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--color-ink-2); margin: 0 0 var(--space-2xs); }
.chan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.chan a { color: var(--color-ink-2); text-decoration: none; font-size: var(--text-sm); }
.chan a:hover { color: var(--color-brand-press); text-decoration: underline; }
.chan__nho { padding-top: var(--space-md); font-size: var(--text-xs); color: var(--color-ink-2); line-height: 1.6; }
.chan__nho p { margin: 0 0 .4rem; max-width: 70ch; }
.chan__nho strong { color: var(--color-ink-2); }

/* ───────────────────────────────────────────── thanh liên hệ dính dưới, mobile */
.goi-nhanh {
  position: fixed; inset: auto 0 0 0; z-index: 45;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px;
  background: var(--color-rule);
  box-shadow: 0 -2px 16px oklch(23.5% .018 50 / .1);
  padding-bottom: env(safe-area-inset-bottom);
}
.goi-nhanh a {
  background: var(--color-paper); color: var(--color-ink-2);
  text-decoration: none; text-align: center; min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  font-size: .72rem; font-weight: 600;
}
.goi-nhanh a .ic-nho { width: 19px; height: 19px; color: currentColor; }
.goi-nhanh a.chinh { background: var(--color-brand-press); color: #fff; }
body { padding-bottom: 60px; }
@media (min-width: 900px) { .goi-nhanh { display: none; } body { padding-bottom: 0; } }

/* ───────────────────────────────────────────── lộ dần khi cuộn tới */
/* Chỉ ẩn khi CÓ JavaScript. Nếu gài opacity:0 vô điều kiện thì khi JS lỗi,
   bị chặn, hoặc crawler không chạy JS, cả mảng nội dung biến mất vĩnh viễn -
   một kiểu hỏng không ai phát hiện ra vì trang vẫn trả HTTP 200. */
.js .lo { opacity: 0; transform: translateY(14px); }
.js .lo.hien {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .lo { opacity: 1; transform: none; }
  .ic .ve { stroke-dashoffset: 0; }
  .ic .cham circle { opacity: 1; }
}

/* ───────────────────────────────────────── sprite nhúng
   Sprite nằm ngay đầu <body>. Phải giấu bằng kích thước 0 chứ KHÔNG dùng
   display:none - display:none làm Safari bỏ qua luôn các <symbol> bên trong
   và mọi icon biến mất. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* pathLength="1" trên từng nét, nên dasharray là 1 cho mọi nét bất kể dài ngắn.
   Nhờ vậy nét ngắn và nét dài vẽ xong cùng lúc, thay vì nét ngắn xong từ lâu
   còn nét dài vẫn đang bò. */
.ic .ve { stroke-dasharray: 1; stroke-dashoffset: 1; }

/* ───────────────────────────────────────── ô nhập */
.hai-cot { display: grid; gap: var(--space-sm); }
@media (min-width: 540px) { .hai-cot { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }

.o { display: block; margin-bottom: var(--space-sm); }
.o > span {
  display: block; font-size: var(--text-sm); font-weight: 600;
  margin-bottom: .35rem; color: var(--color-ink);
}
.o input, .o select, .o textarea {
  width: 100%; min-height: 50px; padding: .8rem .95rem;
  font: inherit; font-size: var(--text-base); color: var(--color-ink);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.o textarea { min-height: 92px; resize: vertical; }
.o input::placeholder, .o textarea::placeholder { color: var(--color-ink-3); }
.o input:focus, .o select:focus, .o textarea:focus {
  outline: none; border-color: var(--color-brand);
  box-shadow: 0 0 0 3px oklch(62.8% .197 33.4 / .16);
}
.o-loi input, .o-loi select { border-color: oklch(55% .19 25); }
.o-loi > span { color: oklch(48% .19 25); }

/* Honeypot: người thật không thấy, không tab tới được. Bot thì điền. */
.bay { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.kq {
  display: none; margin-top: var(--space-sm);
  padding: .9rem 1rem; border-radius: var(--radius-sm); font-size: var(--text-sm);
}
.kq-ok {
  display: block; background: oklch(52% .13 155 / .1);
  border: var(--rule-hair) solid oklch(52% .13 155 / .3); color: var(--color-ok);
}
.kq-loi {
  display: block; background: oklch(55% .19 25 / .08);
  border: var(--rule-hair) solid oklch(55% .19 25 / .3); color: oklch(45% .19 25);
}

/* ───────────────────────────────────────── trang bảng giá: link tài liệu */


/* Mục dịch vụ dùng h3 cho đúng thứ bậc (h2 -> h4 là nhảy cóc), nhưng cỡ chữ
   giữ như cũ - thứ bậc là chuyện ngữ nghĩa, không phải chuyện cỡ chữ. */
.dv-o .dv-h {
  font-size: var(--text-lg); font-weight: 600;
  letter-spacing: -.015em; margin: 0 0 .15rem;
}
/* Ô đầu hàng là <th scope=row>, trả lại dáng của ô dữ liệu thường. */
.ss th[scope="row"] {
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm);
  color: var(--color-ink); width: 34%;
  border-bottom: 0;
}
.ss tbody tr + tr th[scope="row"] { border-top: var(--rule-hair) solid var(--color-rule); }

/* Dấu sao trên ô giá cước + chú thích điều kiện ngay dưới bảng.
   Chú thích phải đứng SÁT bảng và đọc được, không phải chữ nhỏ xíu cuối trang:
   nó là điều kiện của một lời hứa về giá, giấu nó đi là mất tin. */
.sao-dau {
  font-size: .75em; font-weight: 700; color: var(--color-brand-press);
  margin-left: .12em; vertical-align: super; line-height: 0;
}
.sao-chu {
  max-width: 66ch; margin: var(--space-sm) 0 0;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-tint); border-left: 3px solid var(--color-tint-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-sm); color: var(--color-ink-2);
}

/* ───────────────────────────────────────── trang Về An */
.an-gioi { display: grid; gap: var(--space-lg); align-items: center; }
@media (min-width: 820px) {
  .an-gioi { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--space-2xl); }
}
.an-gioi__anh {
  width: min(13rem, 60vw); aspect-ratio: 1; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--color-tint); box-shadow: var(--shadow-lg);
}
@media (min-width: 820px) { .an-gioi__anh { width: 100%; } }
.an-gioi__anh img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.an-gioi__chu h1 { margin-bottom: .3em; }
.an-gioi__chu .hero__lede { margin-bottom: var(--space-sm); }

.an-doi { display: grid; gap: var(--space-xl); }
@media (min-width: 880px) { .an-doi { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-2xl); } }
.an-doi h2 { font-size: var(--text-2xl); }
.an-doi p { max-width: 46ch; }

.an-ds { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; gap: var(--space-2xs); }
.an-ds li { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--text-sm); color: var(--color-ink-2); }
.an-ds .ic-nho { color: var(--color-ok); margin-top: .18rem; }

/* Đoạn nói thẳng chuyện hoa hồng - đóng khung để nó không bị lướt qua.
   Đây là đoạn quan trọng nhất của trang về mặt niềm tin. */
.an-thang {
  max-width: 62ch; font-size: var(--text-lg); line-height: 1.6;
  padding: var(--space-md); border-left: 3px solid var(--color-brand);
  background: var(--color-tint); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--color-ink);
}

/* ───────────────────────────────────────── trang Cộng sự */
.cs-dau { padding-bottom: var(--space-lg); }
.cs-lede { font-size: var(--text-xl); line-height: 1.45; color: var(--color-ink-2); max-width: 46ch; }
.cs-lede strong { color: var(--color-ink); font-weight: 700; }

.cs-ten {
  display: flex; gap: var(--space-sm); align-items: flex-end;
  flex-wrap: wrap; justify-content: space-between;
  padding-bottom: var(--space-sm); margin-bottom: var(--space-md);
  border-bottom: 2px solid var(--color-ink);
}
.cs-ten h2 { margin: 0; }
.cs-vai { margin: .25rem 0 0; color: var(--color-ink-2); font-size: var(--text-sm); }

.cs-cham {
  margin: 0 0 var(--space-md); padding: 0 0 0 var(--space-sm);
  border-left: 3px solid var(--color-brand);
  font-family: var(--font-display); font-weight: 600; font-style: normal;
  font-size: var(--text-xl); line-height: 1.35; letter-spacing: -.02em;
  max-width: 34ch; color: var(--color-ink);
}

/* Sáu đội: lưới đánh số, không phải sáu thẻ giống hệt nhau */
.doi-luoi { display: grid; gap: 0; margin-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
@media (min-width: 680px) { .doi-luoi { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .doi-luoi { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.doi-o {
  padding: var(--space-md) var(--space-sm) var(--space-md) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
@media (min-width: 680px) {
  .doi-o { padding-right: var(--space-lg); }
  .doi-o:nth-child(2n) { padding-left: var(--space-lg); border-left: var(--rule-hair) solid var(--color-rule); }
}
@media (min-width: 1040px) {
  .doi-o:nth-child(2n) { padding-left: var(--space-sm); border-left: 0; }
  .doi-o:not(:nth-child(3n+1)) { padding-left: var(--space-lg); border-left: var(--rule-hair) solid var(--color-rule); }
}
.doi-so {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-sm); color: var(--color-brand-deep);
  letter-spacing: .06em; margin-bottom: .4rem;
}
.doi-o h3 { font-size: var(--text-lg); margin: 0 0 .3rem; }
.doi-o p { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); }

.cs-phap-ly { margin: var(--space-md) 0 0; display: grid; gap: var(--space-sm); }
@media (min-width: 680px) { .cs-phap-ly { grid-template-columns: 1fr 1fr; gap: var(--space-lg); } }
.cs-phap-ly > div {
  padding: var(--space-sm); border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md); background: var(--color-paper-2);
}
.cs-phap-ly dt {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-brand-deep);
  margin-bottom: .4rem;
}
.cs-phap-ly dd { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.6; }

/* Lời mời đồng hành ở chân trang - thay cho khối pháp lý cũ */
.chan__dong-hanh {
  display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap;
  justify-content: space-between;
  margin-top: var(--space-md); padding: var(--space-md);
  background: var(--color-tint); border: var(--rule-hair) solid var(--color-tint-2);
  border-radius: var(--radius-md);
}
.chan__dong-hanh p {
  margin: 0; max-width: 46ch;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg);
  letter-spacing: -.015em; color: var(--color-ink);
}

/* ───────────────────────────────────────── khối "đi cùng em An đỡ bao nhiêu"
   Đặt ngay dưới khối "đang mất bao nhiêu" trong cùng một thẻ: người dùng vừa
   thấy con số đau xong là thấy ngay con số đỡ. Tách ra hai chỗ thì mất mạch. */
.tk {
  margin-top: var(--space-md); padding-top: var(--space-md);
  border-top: 2px solid var(--color-ink);
}
.tk__dau { margin-bottom: var(--space-sm); }
.tk__dau h3 { margin: .2rem 0 0; font-size: var(--text-lg); }

.tk__bang { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xs); margin-bottom: var(--space-sm); }
.tk__cot {
  padding: var(--space-xs); border-radius: var(--radius-sm);
  background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule);
  display: flex; flex-direction: column; gap: .15rem; min-width: 0;
}
.tk__cot--an { background: var(--color-tint); border-color: var(--color-tint-2); }
.tk__nhan { font-size: var(--text-xs); color: var(--color-ink-2); font-weight: 600; }
.tk__cot--an .tk__nhan { color: var(--color-brand-deep); }
.tk__gia {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-xl); letter-spacing: -.02em; line-height: 1.1;
  white-space: nowrap;
}
.tk__cot--an .tk__gia { color: var(--color-brand-press); }
.tk__gia i { font-style: normal; font-size: .62em; font-weight: 600; margin-left: .1em; color: var(--color-ink-2); }

/* Số cũ gạch ngang đứng cạnh số mới: mắt so được ngay mà không cần đọc nhãn. */
.tk s { color: var(--color-ink-3); font-weight: 400; margin-right: .3rem; }
.tk b { font-weight: 700; }
.tk .hang-so.tong.tk__tong .hang-so__gt { color: var(--color-ok); }
.tk__nam {
  margin: var(--space-2xs) 0 0; font-size: var(--text-sm);
  color: var(--color-ink-2); text-align: right;
}
.tk__nam b { color: var(--color-ok); }

.tk__ghi { margin: var(--space-xs) 0 0; font-size: var(--text-xs); line-height: 1.5; }
.tk__ghi:empty { display: none; }
.tk__ghi.canh { color: var(--color-warn); }
.tk__sao { margin: var(--space-xs) 0 0; font-size: var(--text-xs); color: var(--color-ink-2); line-height: 1.5; }
.tk__ngay { margin: .4rem 0 0; font-size: var(--text-xs); color: var(--color-ink-3); }

/* Khi khách đang trả rẻ hơn mức em đề xuất - vẫn phải nói thật. */
.tk.am .hang-so.tong.tk__tong .hang-so__gt, .tk.am .tk__nam b { color: var(--color-ink-2); }

/* ───────────────────────────────────────── gợi ý theo mức sản lượng */
.goi-y {
  display: flex; gap: var(--space-xs); align-items: flex-start;
  margin: -.4rem 0 var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-tint); border: var(--rule-hair) solid var(--color-tint-2);
  border-radius: var(--radius-sm);
  animation: goi-y-vao var(--dur-mid) var(--ease-out);
}
.goi-y[hidden] { display: none; }
.goi-y__ic { flex: none; display: flex; }
.goi-y__ic .ic { width: 26px; height: 26px; color: var(--color-brand-press); }
.goi-y__ic .ic[hidden] { display: none; }
.goi-y__chu {
  margin: 0; font-size: var(--text-sm); line-height: 1.5;
  color: var(--color-ink); max-width: 52ch;
}
@keyframes goi-y-vao {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .goi-y { animation: none; } }

/* ───────────────────────────────────────── FAQ theo nhóm */
.faq { max-width: 52rem; }
.faq-nhom + .faq-nhom { margin-top: var(--space-lg); }
.faq-nhom__ten {
  font-size: var(--text-sm); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-brand-deep);
  margin: 0 0 .3rem; padding-bottom: .5rem;
  border-bottom: 2px solid var(--color-tint-2);
}

/* ───────────────────────────────────────── logo đối tác
   VCL là chữ hồng trên nền ĐEN đặc (không có alpha), nên nó phải nằm trên ô tối.
   Đặt lên nền giấy ấm thì cái khối đen vuông nhìn như ảnh tải lỗi. */
.logo-dt { margin-top: var(--space-lg); }
.logo-dt__nhan {
  display: block; font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-ink-2); margin-bottom: var(--space-2xs);
}
.logo-dt__hang { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }
.logo-dt__o {
  width: 72px; height: 72px; border-radius: var(--radius-md);
  display: grid; place-items: center; overflow: hidden;
  background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.logo-dt__o--toi { background: #000; border-color: #000; }
.logo-dt__o:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.logo-dt__o img { width: 100%; height: 100%; object-fit: contain; }

.cs-ten__ten { display: flex; gap: var(--space-sm); align-items: center; min-width: 0; }
.cs-logo {
  width: 56px; height: 56px; flex: none; border-radius: var(--radius-sm);
  display: grid; place-items: center; overflow: hidden;
  background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule);
}
.cs-logo--toi { background: #000; border-color: #000; }
.cs-logo img { width: 100%; height: 100%; object-fit: contain; }

/* ───────────────────────────────────────── chi tiết lấy từ bộ brand của Vui Cười Lên
   https://vuicuoilen.vn/brand khai bốn thứ "nạp một file là có đủ": thanh cuộn,
   màu bôi đen, chặn trượt ngang, và khối prefers-reduced-motion.
   Em lấy KỸ THUẬT, không lấy MÀU - brand VCL là hồng #FF69B4 + Nunito, còn
   shipre.vn là cam SPX + Be Vietnam Pro. Dùng hồng ở đây thì hai thương hiệu
   lẫn vào nhau và cả hai cùng yếu đi. */

::selection { background: var(--color-tint-2); color: var(--color-ink); }
::-moz-selection { background: var(--color-tint-2); color: var(--color-ink); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--color-paper-2); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--color-brand), var(--color-brand-press));
  border-radius: var(--radius-pill);
  /* Viền cùng màu nền track tạo khoảng hở, nhìn thanh mảnh hơn thực tế. */
  border: 2px solid var(--color-paper-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-brand-press); }
::-webkit-scrollbar-thumb:active { background: var(--color-brand-deep); }
::-webkit-scrollbar-corner { background: var(--color-paper-2); }

/* Firefox: không có pseudo-element, chỉ hai thuộc tính này. */
html { scrollbar-width: thin; scrollbar-color: var(--color-brand-press) var(--color-paper-2); }

/* Thanh cuộn trong khối tối phải đổi theo, không thì hiện ra một vệt sáng. */
.muc-toi ::-webkit-scrollbar-track,
.cta-dai ::-webkit-scrollbar-track,
.o-ly-do.manh ::-webkit-scrollbar-track { background: oklch(100% 0 0 / .08); }
.muc-toi ::-webkit-scrollbar-thumb,
.cta-dai ::-webkit-scrollbar-thumb,
.o-ly-do.manh ::-webkit-scrollbar-thumb { border-color: transparent; }

/* ───────────────────────────────────────── đồng thương hiệu ở trang Cộng sự
   Mỗi khối mang một vệt màu của chính bên đó: VCL hồng, IAI xanh. Chỉ dùng làm
   vệt trang trí và nền nhạt, KHÔNG dùng làm màu chữ - hai màu đó chưa đo tương
   phản trên nền giấy của mình, mà đoán thì sớm muộn cũng sai. */
.cs-ten { position: relative; }
.cs-ten--vcl { border-bottom-color: #ff69b4; }
.cs-ten--iai { border-bottom-color: #1e4eb8; }
.cs-logo--toi { box-shadow: 0 0 0 1px #ff69b4; }
.cs-logo:not(.cs-logo--toi) { box-shadow: 0 0 0 1px oklch(40% .16 265 / .35); }