/* Ra Khách — components.css
   Hệ thống thiết kế c2 "Người thật làm thật" (chủ đổi G1a sang c2, 12/10/2026): đầu trang xanh rừng có ảnh + lời chào của chủ,
   thẻ ưu đãi vàng hổ phách, nút bo tròn, hỏi đáp dạng tin nhắn. Tên class và mọi trạng thái giữ nguyên từ bản c1.
   Nạp SAU build/tokens.css. Chỉ dùng var(--…) từ tokens.css: không màu hex, không font mới.
   Màu "tint" (nền chip chọn, nền thẻ OK…) được TRỘN từ token bằng color-mix(), không phải màu mới.
   Vùng tối (.top, .hero) dùng lại đúng tên token nhưng gán giá trị "đảo màu" trong phạm vi của nó (xem §0b).
   Đặc tả, HTML mẫu, trạng thái: docs/design/components.md */

/* ---------- 0. Biến dẫn xuất (private, chỉ trộn từ token) ---------- */
:root {
  color-scheme: light dark;
  --_edge: color-mix(in srgb, var(--c-muted) 70%, var(--c-surface));    /* viền ô nhập, ≥ 3:1 trên bg và surface */
  --_tint-brand: color-mix(in srgb, var(--c-brand) 10%, var(--c-bg));
  --_tint-ok: color-mix(in srgb, var(--c-ok) 12%, var(--c-bg));
  --_tint-ink: color-mix(in srgb, var(--c-ink) 6%, var(--c-bg));
  --_brand-hover: color-mix(in srgb, var(--c-brand) 82%, var(--c-ink));
  --_zalo-bar-h: 72px;                                                  /* chỗ chừa cho thanh nổi đáy: cao 60 + cách đáy 10 */
  /* bản gốc của token, để khôi phục bên trong vùng tối */
  --_ink: var(--c-ink); --_muted: var(--c-muted); --_bg: var(--c-bg); --_surface: var(--c-surface); --_line: var(--c-line);
  --_brand: var(--c-brand); --_brand-ink: var(--c-brand-ink); --_warn: var(--c-warn);
  /* vùng tối đầu trang (light: nền xanh rừng = --c-brand, chữ trắng = --c-brand-ink) */
  --_hero-bg: var(--c-brand);
  --_hero-ink: var(--c-brand-ink);
  --_hero-muted: color-mix(in srgb, var(--c-brand-ink) 86%, var(--c-brand));
  --_hero-line: color-mix(in srgb, var(--c-brand-ink) 30%, var(--c-brand));
  /* thẻ ưu đãi (light: nền vàng hổ phách, mọi chữ màu ink) */
  --_offer-bg: var(--c-accent);
  --_offer-edge: var(--c-accent);
  --_offer-muted: var(--c-ink);
  --_offer-line: color-mix(in srgb, var(--c-ink) 22%, var(--c-accent));
  --_offer-btn: var(--c-ink);
  --_offer-btn-ink: var(--c-bg);
  /* thanh Zalo nổi (light: viên thuốc màu ink) */
  --_bar-bg: var(--c-ink);
  --_bar-fg: var(--c-bg);
  --_bar-edge: var(--c-ink);
  --_bar-main-ink: var(--c-ink);
}
@media (prefers-color-scheme: dark) {
  :root {
    --_hero-bg: color-mix(in srgb, var(--c-brand) 18%, var(--c-bg));
    --_hero-ink: var(--c-ink);
    --_hero-muted: var(--c-muted);
    --_hero-line: var(--c-line);
    --_offer-bg: var(--c-surface);
    --_offer-muted: var(--c-muted);
    --_offer-line: var(--c-line);
    --_offer-btn: var(--c-accent);
    --_offer-btn-ink: var(--c-bg);
    --_bar-bg: var(--c-surface);
    --_bar-fg: var(--c-ink);
    --_bar-edge: var(--c-line);
    --_bar-main-ink: var(--c-bg);
  }
}

/* ---------- 0b. Vùng tối: .top và .hero đảo token; .offer-box khôi phục token gốc ---------- */
.top, .hero {
  --c-bg: var(--_hero-bg); --c-surface: var(--_hero-bg); --c-ink: var(--_hero-ink); --c-muted: var(--_hero-muted);
  --c-line: var(--_hero-line); --c-brand: var(--_hero-ink); --c-brand-ink: var(--_hero-bg); --c-warn: var(--c-accent);
  background: var(--c-bg); color: var(--c-ink);
}
.offer-box {
  --c-bg: var(--_bg); --c-surface: var(--_surface); --c-ink: var(--_ink); --c-muted: var(--_offer-muted);
  --c-line: var(--_offer-line); --c-brand: var(--_brand); --c-brand-ink: var(--_brand-ink); --c-warn: var(--_warn);
}

/* ---------- 1. Nền tảng ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-bottom: calc(var(--_zalo-bar-h) + var(--s-4)); }
body { margin: 0; background: var(--c-bg); color: var(--c-ink); font: 400 16px/1.65 var(--f-body); }
/* Có thanh Zalo nổi đáy thì chừa chỗ để không che nội dung cuối trang và nút chính */
body.has-zalo-bar, body:has(.zalo-bar) { padding-bottom: calc(var(--_zalo-bar-h) + env(safe-area-inset-bottom, 0px)); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-brand); }
[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--f-display); line-height: 1.12; margin: 0 0 var(--s-3); letter-spacing: -.02em; }
h1 { font-size: clamp(30px, 7vw, 54px); font-weight: 800; }
h2 { font-size: clamp(24px, 5vw, 36px); font-weight: 800; }
h3 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 var(--s-3); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--s-4); }
.wrap--narrow { max-width: 640px; }
.num { font-family: var(--f-num); font-feature-settings: "tnum" 1; letter-spacing: -.01em; }
.eyebrow { font: 700 14px/1.4 var(--f-body); color: var(--c-ok); letter-spacing: .02em; margin: 0 0 var(--s-2); }
.muted { color: var(--c-muted); }
.small { font-size: 14px; line-height: 1.5; }
.lede { font-size: 17px; color: var(--c-muted); max-width: var(--max-read); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* focus: vòng 2 lớp (viền trong = surface, viền ngoài = ink) đạt ≥ 3:1 trên trắng, đá, xanh rừng và vàng hổ phách.
   Trong vùng tối, ink/surface đã được đảo (§0b) nên cùng một quy tắc cho vòng trắng viền xanh. */
:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--c-surface); }

/* Chọn nội dung theo trạng thái ưu đãi: đặt data-state="na|t1|t2|t3" lên <body> (hoặc .offer-box); HTML tĩnh xuất "na" */
[data-state="t1"] [data-show]:not([data-show~="t1"]),
[data-state="t2"] [data-show]:not([data-show~="t2"]),
[data-state="t3"] [data-show]:not([data-show~="t3"]),
/* na = không đọc được /api/slots: bố cục T1 nhưng số đếm là "—"; phần tử gắn "-na" (ô đếm, ghi chú) bị ẩn */
[data-state="na"] [data-show]:not([data-show~="t1"]):not([data-show~="na"]),
[data-state="na"] [data-show~="-na"] { display: none !important; }
[data-state="na"] [data-slot] { color: var(--c-muted); }

/* ---------- 2. Nút (bo tròn kiểu c2) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 48px; padding: 0 22px; border-radius: 999px; font: 700 16px/1.2 var(--f-body); text-decoration: none; border: 2px solid transparent; cursor: pointer; text-align: center; }
.btn-main { background: var(--c-brand); color: var(--c-brand-ink); }
.btn-main:hover { background: var(--_brand-hover); }
.btn-line { background: transparent; color: var(--c-ink); border-color: currentColor; }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: 15px; }
.btn-block { width: 100%; }
.btn[aria-disabled="true"], .btn:disabled { background: var(--c-line); color: var(--c-muted); border-color: transparent; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[data-cta="main"] { scroll-margin-bottom: calc(var(--_zalo-bar-h) + var(--s-4)); }

/* ---------- 3. Header + hero (vùng tối, có lời chào + ảnh chủ) ---------- */
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); height: 56px; }
.mark { font: 800 19px/1 var(--f-display); color: var(--c-ink); text-decoration: none; letter-spacing: -.02em; }
.mark span { color: var(--c-accent); }

.hero { padding: var(--s-2) 0 var(--s-6); }
.hero-grid { display: grid; gap: var(--s-4); }
.hero h1 { margin-bottom: var(--s-2); }
.hero .lede { margin-bottom: var(--s-2); }
.hero .eyebrow { color: var(--c-accent); margin-bottom: var(--s-1); }
.price-chip { display: inline-block; margin: var(--s-1) 0 0; padding: 2px var(--s-3); border: 1.5px solid currentColor; border-radius: 999px; font: 700 15px/1.6 var(--f-num); }
/* lời chào trong hero: ảnh tròn + 2 dòng, ngay trên tiêu đề (mobile); desktop thay ảnh nhỏ bằng chân dung lớn .hero__portrait */
.hero .owner-card--greeting { margin: 0 0 var(--s-3); }
.hero__portrait { display: none; }
.hero .offer-box { margin-top: var(--s-4); }
@media (min-width: 900px) {
  .hero { padding: var(--s-7) 0 var(--s-8); }
  .hero-grid { grid-template-columns: 1.15fr .85fr; align-items: start; gap: var(--s-7); }
  .hero__portrait { display: block; position: sticky; top: var(--s-5); }
  .hero__portrait .owner-card__photo { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r-lg); border: 0; font-size: 16px; }
  .hero .owner-card--greeting { grid-template-columns: 1fr; }
  .hero .owner-card--greeting .owner-card__photo { display: none; }
  .lede { font-size: 19px; }
}

/* ---------- 4. .offer-box — thẻ ưu đãi vàng hổ phách + bộ đếm suất THẬT (T1/T2/T3) ---------- */
.offer-box { background: var(--_offer-bg); color: var(--c-ink); border: 2px solid var(--_offer-edge); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.offer-box__head { padding: var(--s-4) var(--s-4) 0; }
.offer-box__title { margin: 0; font: 800 19px/1.25 var(--f-display); letter-spacing: -.01em; }
.offer-box__body { padding: var(--s-2) var(--s-4) var(--s-4); }
.offer-box__count { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--s-2); margin: 0; font-weight: 700; }
.offer-box__big { font: 800 40px/1 var(--f-num); letter-spacing: -.03em; }
.offer-box__big small { font-size: 20px; font-weight: 600; color: var(--c-muted); letter-spacing: 0; }
.offer-box__unit { color: var(--c-muted); font-weight: 600; }
/* ô đếm (dải chấm tròn kiểu c2): mỗi ô = 1 suất (hoặc 1 mã); ô đặc (.on) = còn lại. Tạo bằng template/JS từ số đếm thật. */
.cells { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin: var(--s-2) 0 var(--s-2); }
.cells--40 { grid-template-columns: repeat(20, 1fr); gap: 3px; }
.cells i { display: block; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--c-ink) 18%, transparent); }
.cells i.on { background: var(--c-ink); }
.offer-box__note { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--c-muted); }
.offer-box__list { list-style: none; margin: var(--s-3) 0 0; padding: var(--s-3) 0 0; border-top: 1px solid var(--c-line); }
.offer-box__list li { position: relative; padding: 3px 0 3px var(--s-5); font-size: 16px; line-height: 1.5; }
.offer-box__list li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 12px; height: 7px; border-left: 2px solid var(--c-ink); border-bottom: 2px solid var(--c-ink); transform: rotate(-45deg); }
.offer-box .btn { margin-top: var(--s-3); }
.offer-box .btn-main { background: var(--_offer-btn); color: var(--_offer-btn-ink); }
.offer-box .btn-main:hover { background: color-mix(in srgb, var(--_offer-btn) 85%, var(--c-brand)); }
.offer-box__after { margin: var(--s-2) 0 0; font-size: 14px; line-height: 1.5; color: var(--c-muted); }
.offer-box__next { margin: var(--s-3) 0 0; padding-top: var(--s-3); border-top: 1px solid var(--c-line); font-size: 15px; line-height: 1.5; }
/* T3: hết ưu đãi — bỏ nền vàng, thẻ về màu đá trung tính */
[data-state="t3"] .offer-box, .offer-box[data-state="t3"] { background: var(--c-surface); border-color: var(--_line); --c-muted: var(--_muted); --c-line: var(--_line); }
.tag-ok { display: inline-block; padding: 2px var(--s-2); border-radius: 999px; background: var(--_tint-ok); color: var(--c-ok); font: 700 14px/1.5 var(--f-body); }

/* ---------- 5. .trust-row — Hợp đồng · Mã nguồn · Bảo hành (viên đá, căn giữa) ---------- */
.trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); padding: var(--s-4); border-bottom: 1px solid var(--c-line); }
.trust-row > div { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) 14px; border-radius: 999px; background: var(--c-surface); font: 600 15px/1.4 var(--f-body); }
.trust-row svg { width: 20px; height: 20px; flex: none; color: var(--c-brand); }

/* ---------- 6. Khối trang (xen kẽ trắng / đá) ---------- */
section.block { padding: var(--s-6) 0; }
main > section.block:nth-of-type(odd) { background: var(--c-surface); }
@media (min-width: 700px) { section.block { padding: var(--s-7) 0; } }
.sec-head { display: flex; gap: var(--s-3); align-items: baseline; margin-bottom: var(--s-4); }
.sec-head h2 { margin: 0; }
.sec-head .no { font: 700 14px/1 var(--f-body); color: var(--c-ok); }

/* điều khoản đánh số kiểu hợp đồng */
.terms { list-style: none; margin: 0; padding: 0; counter-reset: t; border-top: 1px solid var(--c-line); }
.terms li { counter-increment: t; display: grid; grid-template-columns: 48px 1fr; gap: var(--s-2); padding: var(--s-3) 0; border-bottom: 1px solid var(--c-line); }
.terms li::before { content: "Đ." counter(t); font: 700 15px/1.6 var(--f-num); color: var(--c-muted); }

/* ---------- 7. .price-card — thẻ giá (KHÔNG huy hiệu "phổ biến"; các thẻ cùng trọng lượng) ---------- */
.prices { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.price-card { display: flex; flex-direction: column; background: var(--c-bg); border: 2px solid var(--c-line); border-radius: var(--r-md); padding: var(--s-5); }
.price-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-1) var(--s-2); flex-wrap: wrap; }
.price-card__top h3 { margin: 0; }
.price-card__amount { font: 800 34px/1.05 var(--f-num); letter-spacing: -.02em; margin: var(--s-2) 0 var(--s-1); }
.price-card__amount small { font: 600 15px/1 var(--f-body); color: var(--c-muted); letter-spacing: 0; }
.price-card__alt { margin: 0 0 var(--s-1); font: 600 15px/1.5 var(--f-num); color: var(--c-muted); }
.lines { list-style: none; margin: var(--s-3) 0 0; padding: 0; flex: 1; }
.lines li { display: flex; gap: var(--s-2); padding: 5px 0; font-size: 16px; }
.lines li::before { content: ""; flex: none; width: 14px; height: 8px; margin-top: 8px; border-left: 2px solid var(--c-ok); border-bottom: 2px solid var(--c-ok); transform: rotate(-45deg); }
.price-card__more { margin-top: var(--s-1); }
.price-card__more > summary { cursor: pointer; display: flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--c-brand); }
.price-card__more > summary::-webkit-details-marker { display: none; }
.price-card__more > summary::before { content: "+"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-right: var(--s-2); border-radius: 50%; background: var(--_tint-brand); font: 700 17px/1 var(--f-body); }
.price-card__more[open] > summary::before { content: "\2212"; }
.price-card__more .lines { margin-top: 0; }
.price-card .btn { margin-top: var(--s-4); }
.price-card__note { margin: var(--s-3) 0 0; font-size: 14px; line-height: 1.5; color: var(--c-muted); }

/* sổ giá: dòng chấm dẫn (dùng cho cọc, còn lại, tổng) */
.ledger { background: var(--c-surface); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); margin-top: var(--s-4); }
.ledger p { display: flex; align-items: baseline; gap: var(--s-2); margin: 0; padding: 6px 0; font-size: 16px; }
.ledger p span:nth-child(2) { flex: 1; min-width: var(--s-3); border-bottom: 1.5px dotted var(--_edge); transform: translateY(-6px); }
.ledger p > b { font: 700 16px/1.6 var(--f-num); white-space: nowrap; }
.ledger p.is-total > span:first-child { font-weight: 700; }
.ledger p.is-total > b { font-size: 21px; }
.ledger p.ledger__note { display: block; color: var(--c-muted); font-size: 14px; line-height: 1.5; }
.ledger--compact { padding: var(--s-2) var(--s-4); margin-top: var(--s-3); }
.ledger--compact p { padding: 3px 0; }

/* ---------- 8. .steps — quy trình (thẻ đá, số tròn xanh) ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 36px 1fr; gap: var(--s-3); align-items: start; padding: var(--s-3) var(--s-4); background: var(--c-surface); border-radius: var(--r-md); }
.steps li::before { content: counter(s); width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--c-brand); color: var(--c-brand-ink); font: 800 17px/1 var(--f-num); }
.steps b { display: block; }
main > section.block:nth-of-type(odd) .steps li { background: var(--c-bg); }
@media (min-width: 900px) {
  .steps { grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s-4); }
  .steps li { grid-template-columns: 1fr; padding: var(--s-4); }
}

/* ---------- 9. .demo-card — thẻ trang mẫu (khung điện thoại vẽ bằng CSS, không ảnh) ---------- */
.demos { display: grid; gap: var(--s-4); }
@media (min-width: 700px) { .demos { grid-template-columns: 1fr 1fr; } }
.demo-card { display: grid; grid-template-columns: 88px 1fr; gap: var(--s-4); align-items: center; background: var(--c-bg); border-radius: var(--r-md); padding: var(--s-4); text-decoration: none; color: inherit; }
.demo-card__phone { aspect-ratio: 9 / 16; border: 2px solid var(--c-ink); border-radius: var(--r-sm); padding: 6px; display: grid; gap: var(--s-1); align-content: start; background: var(--c-surface); }
.demo-card__phone i { display: block; height: 6px; background: var(--c-line); border-radius: 99px; }
.demo-card__phone i.b { height: 22px; border-radius: 4px; background: var(--c-brand); }
.demo-card__phone i.c { height: 10px; background: var(--c-accent); width: 70%; }
.demo-card h3 { margin-bottom: var(--s-1); }
.demo-card p { margin-bottom: var(--s-2); }
.demo-card .go { font-weight: 700; color: var(--c-brand); }
.demo-card:hover .go { text-decoration: underline; }

/* ---------- 10. .owner-card — người thật đứng sau thương hiệu ---------- */
.owner-card { display: grid; grid-template-columns: 96px 1fr; gap: var(--s-4); align-items: start; background: var(--c-surface); border-radius: var(--r-lg); padding: var(--s-4); }
.owner-card__photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 3px solid var(--c-accent); background: var(--_tint-ink); }
.owner-card h3 { margin-bottom: var(--s-1); }
.owner-card p { margin-bottom: var(--s-2); }
.owner-card p:last-child { margin-bottom: 0; }
.owner-card__name { font-weight: 700; }
/* chỗ giữ ảnh khi CHƯA có ảnh thật — không được lên bản chạy thật (màu tính tại chỗ nên đúng cả trong vùng tối) */
.ph { display: grid; place-items: center; text-align: center; padding: var(--s-1); font: 600 14px/1.2 var(--f-body); color: var(--c-ink); border: 2px dashed color-mix(in srgb, var(--c-ink) 45%, var(--c-bg)); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c-ink) 12%, var(--c-bg)) 0 10px, color-mix(in srgb, var(--c-ink) 6%, var(--c-bg)) 10px 20px); }
/* lời chào gọn: đầu hero, trên form, /cam-on, /lien-he */
.owner-card--greeting { grid-template-columns: 64px 1fr; align-items: center; gap: var(--s-3); padding: var(--s-3); }
.owner-card--greeting p { margin: 0; }
.owner-card--greeting .owner-card__lead { font-weight: 700; line-height: 1.4; }
.owner-card--greeting .small { line-height: 1.45; }
.owner-card--bare { background: transparent; border: 0; padding: 0; }
@media (min-width: 700px) {
  .owner-card { grid-template-columns: 160px 1fr; padding: var(--s-5); }
  .owner-card--greeting { grid-template-columns: 72px 1fr; padding: var(--s-4); }
  .owner-card--bare { padding: 0; }
}

/* ---------- 11. .faq — hỏi đáp dạng tin nhắn (khách hỏi bên phải, em trả lời bên trái) ---------- */
.faq { display: grid; gap: var(--s-3); max-width: 720px; }
.faq details { display: grid; }
.faq summary { list-style: none; cursor: pointer; position: relative; justify-self: end; max-width: 90%; min-height: 48px; margin-left: auto; padding: var(--s-3) 44px var(--s-3) var(--s-4); background: var(--c-brand); color: var(--c-brand-ink); border-radius: 18px 18px 4px 18px; font-weight: 600; line-height: 1.45; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 700 20px/1 var(--f-body); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { justify-self: start; max-width: 92%; margin: var(--s-2) 0 0; padding: var(--s-3) var(--s-4); background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 18px 18px 18px 4px; }

/* ---------- 12. .lead-form — 5 trường hiển thị + ô đồng ý + honeypot ---------- */
.lead-form { background: var(--c-bg); border: 2px solid var(--c-line); border-radius: var(--r-lg); padding: var(--s-5) var(--s-4); box-shadow: var(--shadow-1); }
@media (min-width: 700px) { .lead-form { padding: var(--s-5); } }
.lead-form__title { margin-bottom: var(--s-2); }
.field { margin-bottom: var(--s-4); }
.field > label, .field > .lbl, .lbl { display: block; font-weight: 700; margin-bottom: 6px; }
.field input[type="text"], .field input[type="tel"], .field input[type="email"] { width: 100%; min-height: 48px; padding: 10px var(--s-4); border: 2px solid var(--_edge); border-radius: var(--r-sm); font: 400 16px/1.4 var(--f-body); color: var(--c-ink); background: var(--c-bg); }
.field input::placeholder { color: var(--c-muted); opacity: .85; }
.field__hint { margin: var(--s-1) 0 0; font-size: 14px; line-height: 1.5; color: var(--c-muted); }
.opt { font-weight: 400; color: var(--c-muted); font-size: 14px; }
fieldset.field { border: 0; padding: 0; margin: 0 0 var(--s-4); min-width: 0; }
fieldset.field legend { padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s-4); border: 2px solid var(--_edge); border-radius: 999px; font-weight: 600; background: var(--c-bg); }
.chips input:checked + span { border-color: var(--c-brand); background: var(--c-brand); color: var(--c-brand-ink); }
.chips input:focus-visible + span { outline: 3px solid var(--c-ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--c-bg); }
.consent { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; font-size: 14px; line-height: 1.5; color: var(--c-muted); margin-bottom: var(--s-4); }
.consent input { width: 24px; height: 24px; margin: 0; accent-color: var(--c-brand); }
/* lỗi: luôn có chữ + viền (không chỉ màu) */
.field input[aria-invalid="true"], .chips[aria-invalid="true"] span { border-color: var(--c-danger); border-width: 2px; }
.field__error, .form-error { margin: 6px 0 0; font: 600 14px/1.5 var(--f-body); color: var(--c-danger); }
.form-error { padding: var(--s-3); border: 2px solid var(--c-danger); border-radius: var(--r-sm); margin: 0 0 var(--s-4); }
/* honeypot: tên "website", tabindex -1, aria-hidden; đẩy ra ngoài màn (không display:none để bot vẫn thấy) */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 13. .zalo-bar — thanh liên hệ nổi đáy (mobile, tối đa 2 nút, cao 60px, cách đáy 10px) ---------- */
.zalo-bar { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; padding: 5px; border-radius: 999px; background: var(--_bar-bg); border: 1px solid var(--_bar-edge); box-shadow: var(--shadow-1); z-index: 10; }
.zalo-bar .btn { min-height: 48px; padding: 0 var(--s-2); font-size: 15px; line-height: 1.15; }
.zalo-bar .btn-line { color: var(--_bar-fg); border-color: color-mix(in srgb, var(--_bar-fg) 55%, var(--_bar-bg)); }
.zalo-bar .btn-main { background: var(--c-accent); color: var(--_bar-main-ink); }
.zalo-bar .btn-main:hover { background: color-mix(in srgb, var(--c-accent) 88%, var(--_bar-main-ink)); }
.zalo-bar :focus-visible { outline-color: var(--_bar-fg); box-shadow: 0 0 0 2px var(--_bar-bg); }
footer { padding: var(--s-6) 0; font-size: 14px; color: var(--c-muted); background: var(--c-surface); }
footer a { color: var(--c-muted); }
@media (min-width: 900px) {
  .zalo-bar { display: none; }
  body.has-zalo-bar, body:has(.zalo-bar) { padding-bottom: 0; }
}

/* ---------- 14. Trang tiền: /coc, /thanh-toan, /cam-on ---------- */
.panel { --_pad: var(--s-4); background: var(--c-bg); border: 2px solid var(--c-line); border-radius: var(--r-md); padding: var(--_pad); margin-bottom: var(--s-4); }
@media (min-width: 700px) { .panel { --_pad: var(--s-5); } }
.pick { display: grid; gap: var(--s-3); }
.pick label { display: grid; grid-template-columns: 24px 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border: 2px solid var(--c-line); border-radius: var(--r-md); cursor: pointer; background: var(--c-bg); min-height: 56px; }
.pick input { width: 20px; height: 20px; margin: 0; accent-color: var(--c-brand); }
.pick label:has(input:checked) { border-color: var(--c-brand); background: var(--_tint-brand); }
.pick label:has(input:focus-visible) { outline: 3px solid var(--c-ink); outline-offset: 2px; }
.code-box > summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; color: var(--c-brand); }
.code { display: flex; gap: var(--s-2); }
.code input { flex: 1; min-width: 0; min-height: 48px; padding: 10px var(--s-4); border: 2px solid var(--_edge); border-radius: var(--r-sm); font: 700 16px/1.4 var(--f-num); letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink); background: var(--c-bg); }
.code-msg { margin: var(--s-2) 0 0; font: 600 14px/1.5 var(--f-body); }
.code-msg--ok { color: var(--c-ok); }
.code-msg--err { color: var(--c-danger); }

/* .qr-pay — thanh toán VietQR. Thanh hành động dính đáy .qr-pay__bar để nút chính luôn trong màn đầu 390×844.
   /coc KHÔNG có .zalo-bar nên không tranh chỗ. */
.qr-pay { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.qr-pay__payee { margin: 0; font-weight: 700; }
.qr-pay__bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin: var(--s-4) calc(-1 * var(--_pad, var(--s-4))) calc(-1 * var(--_pad, var(--s-4))); padding: var(--s-2) var(--s-4) calc(var(--s-2) + env(safe-area-inset-bottom, 0px)); background: var(--c-bg); border-top: 2px solid var(--c-line); box-shadow: 0 -10px 24px -16px color-mix(in srgb, var(--c-ink) 40%, transparent); border-radius: 0 0 var(--r-md) var(--r-md); }
.qr-pay__bar .btn { flex: 1 1 auto; min-width: 0; padding: 0 var(--s-3); }
.qr-pay__due { display: flex; flex-direction: column; flex: none; line-height: 1.2; white-space: nowrap; }
.qr-pay__due small { font-size: 14px; color: var(--c-muted); }
.qr-pay__due b { font: 800 21px/1.3 var(--f-num); letter-spacing: -.02em; }
.qr-pay__qr { width: 220px; max-width: 100%; aspect-ratio: 1; margin: 0 auto; padding: var(--s-2); border: 2px solid var(--c-line); border-radius: var(--r-md); background: var(--c-bg); display: grid; place-items: center; }
.qr-pay__qr img { width: 100%; height: 100%; object-fit: contain; }
.qr-pay__copy { min-height: 44px; padding: 0 var(--s-3); font-size: 14px; }
.status { display: flex; gap: var(--s-2); align-items: center; font-weight: 600; margin: 0; padding: var(--s-2) 14px; border-radius: var(--r-md); background: var(--c-surface); }
.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c-warn); }
.dot--ok { background: var(--c-ok); }
.dot--danger { background: var(--c-danger); }
.ticket { border: 2px solid var(--_offer-edge); border-radius: var(--r-md); padding: var(--s-5) var(--s-4); text-align: center; background: var(--_offer-bg); color: var(--c-ink); }
.ticket .num { font-size: 30px; font-weight: 800; display: block; margin: var(--s-1) 0; }
@media (prefers-color-scheme: dark) {
  /* QR cần nền sáng quanh mã để máy quét đọc được: dùng --c-ink (rất sáng ở dark) */
  .qr-pay__qr { background: var(--c-ink); }
}

/* ---------- 16. Trang bán duy nhất "/" (bản chốt §8, 13/10/2026): chọn nghề, Trước/Sau, quay lại form ----------
   .picker: 2 nút chọn nghề trong hero (vùng tối). Nút đang chọn: nền vàng hổ phách, chữ tối (như nút chính của .zalo-bar).
   Chưa chọn nghề (<html> không có data-nghe): nút to hơn để là việc đầu tiên trên trang. */
.picker { margin: 0 0 var(--s-2); }
/* nghề đã chọn: nhãn "Anh/chị làm nghề nào?" chỉ còn cho trình đọc màn hình (nhóm vẫn có tên), để nút chính ở màn đầu */
html[data-nghe] .picker__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.picker__label { margin: 0 0 6px; font: 700 14px/1.4 var(--f-body); color: var(--c-muted); }
.picker__opts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2); }
.picker__opt { min-height: 44px; padding: 6px var(--s-3); font-size: 15px; line-height: 1.2; background: transparent; color: var(--c-ink); border-color: currentColor; }
.picker__opt[aria-pressed="true"],
html[data-nghe="sales"] .picker__opt[data-pick="sales"],
html[data-nghe="khoa-hoc"] .picker__opt[data-pick="khoa-hoc"] { background: var(--c-accent); color: var(--_bar-main-ink); border-color: var(--c-accent); }
html:not([data-nghe]) .picker__label { font-size: 17px; color: var(--c-ink); }
html:not([data-nghe]) .picker__opt { min-height: 56px; font-size: 17px; }
.pitch__after { margin: var(--s-2) 0 0; font-size: 16px; line-height: 1.5; color: var(--c-muted); }

/* .ba — khung Trước/Sau dựng bằng HTML/CSS (trang mẫu, không phải ảnh chụp trang thật). Hai "điện thoại" cạnh nhau ở mọi cỡ màn;
   chữ trong khung ≥ 14px; khung aria-hidden, chú thích dưới mỗi khung nói nó cho thấy gì. */
.ba { margin: var(--s-4) 0 0; max-width: 720px; }
.ba__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.ba__col { min-width: 0; }
.ba__tag { display: inline-block; margin: 0 0 var(--s-2); padding: 2px var(--s-3); border: 1.5px solid var(--c-ink); border-radius: 999px; font: 700 14px/1.5 var(--f-body); }
.ba__tag--after { background: var(--c-brand); color: var(--c-brand-ink); border-color: var(--c-brand); }
.ba__phone { border: 3px solid var(--c-ink); border-radius: var(--r-md); padding: var(--s-2); background: var(--c-bg); }
.ba__cap { margin: var(--s-2) 0 0; font-size: 14px; line-height: 1.45; }
.ba__note { margin: var(--s-3) 0 0; font-size: 14px; line-height: 1.5; color: var(--c-muted); }
@media (min-width: 700px) { .ba__grid { gap: var(--s-6); } .ba__phone { padding: var(--s-4); } }
.mini { display: grid; gap: 6px; font-size: 14px; line-height: 1.35; }
.mini p { margin: 0; }
.mini__avatar { display: block; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--c-ink) 22%, var(--c-bg)); }
.mini__avatar--sm { width: 30px; height: 30px; flex: none; }
.mini__person { display: flex; align-items: center; gap: var(--s-2); }
.mini__name { font-weight: 700; overflow-wrap: anywhere; }
.mini__label { font-weight: 700; color: var(--c-muted); }
.mini__line { color: var(--c-muted); }
.mini__bar { display: block; height: 8px; border-radius: 99px; background: var(--c-line); }
.mini__bar--short { width: 60%; }
.mini__price { padding: 6px var(--s-2); border-left: 3px solid var(--c-brand); border-radius: var(--r-sm); background: var(--c-surface); }
.mini__amount { font: 800 16px/1.25 var(--f-num); letter-spacing: -.01em; overflow-wrap: anywhere; }
.mini__btn { padding: 3px var(--s-2); border: 1.5px solid var(--c-ink); border-radius: 999px; text-align: center; font-weight: 700; line-height: 1.25; }
.mini__btn--main { background: var(--c-brand); color: var(--c-brand-ink); border-color: var(--c-brand); }
.mini__rows { list-style: none; margin: 0; padding: 0; display: grid; }
.mini__rows li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; padding: 5px 0; border-bottom: 1px dashed var(--c-line); }
.mini__rows li > :first-child { flex: 1 1 auto; font-weight: 700; }
.mini__memo { flex-basis: 100%; color: var(--c-muted); overflow-wrap: anywhere; }
/* dấu tích tay trên sao kê: vòng tròn "?" (chưa khớp) hoặc dấu tích (đã khớp), vẽ bằng viền, không dùng ký tự ngoài bộ font */
.mini__mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--c-warn); border-radius: 50%; color: var(--c-warn); font: 700 14px/1 var(--f-body); }
.mini__mark--ok { border-color: var(--c-ok); }
.mini__mark--ok::before { content: ""; width: 9px; height: 5px; margin-top: -2px; border-left: 2px solid var(--c-ok); border-bottom: 2px solid var(--c-ok); transform: rotate(-45deg); }
.mini__qr { width: 64px; aspect-ratio: 1; border: 4px solid var(--c-bg); outline: 1.5px solid var(--c-line); background: repeating-conic-gradient(var(--c-ink) 0 25%, var(--c-bg) 0 50%) 0 0 / 12px 12px; }
.mini__status { justify-self: start; padding: 2px var(--s-2); border-radius: 999px; background: var(--_tint-ok); color: var(--c-ok); font-weight: 700; }
.mini__paid { color: var(--c-ok); font-weight: 700; }

/* .endcta — cuối trang: nút quay lại form + nút Zalo */
.endcta p { max-width: var(--max-read); }
.endcta__btns { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0 0; }
.endcta__btns .btn { flex: 1 1 150px; padding: 0 var(--s-3); }
.endcta p:first-child { margin-bottom: 0; }

/* ---------- 15. .email — khung email 600px (chỉ để xem trước trên web) ----------
   Email thật do functions/_lib/mail.mjs dựng với khung trung tính, style inline riêng (không lấy từ token); xem components.md §3.11 */
.email { width: 100%; max-width: 600px; margin: 0 auto; background: var(--c-bg); color: var(--c-ink); border: 1px solid var(--c-line); border-collapse: collapse; font: 400 16px/1.6 var(--f-body); }
.email td { padding: var(--s-5); }
.email__head { border-bottom: 1px solid var(--c-line); padding: var(--s-4) var(--s-5); }
.email__brand { font: 800 18px/1.4 var(--f-display); }
.email__tag { float: right; font: 700 14px/1.6 var(--f-body); color: var(--c-muted); }
.email__code { border: 2px solid var(--c-accent); background: var(--c-surface); border-radius: var(--r-md); padding: var(--s-4); text-align: center; }
.email__code b { display: block; font: 800 24px/1.4 var(--f-num); }
.email__btn { display: inline-block; background: var(--c-brand); color: var(--c-brand-ink); text-decoration: none; font-weight: 700; padding: var(--s-4) 22px; border-radius: 999px; }
.email__row { display: block; padding: 6px 0; border-bottom: 1px solid var(--c-line); }
.email__row .num { float: right; }
.email__foot { font-size: 14px; color: var(--c-muted); background: var(--c-surface); }
.email__foot a { color: var(--c-muted); }

/* Ra Khách — pages.css: page-level layout glue for build/build.mjs output. Loaded after tokens.css + components.css.
   Layout and visibility only: every colour, font and size comes from var(--…) or components.css. No new colours, no fonts. */

/* na (slots not read yet): the counter cells and "Số đếm thật…" stay hidden (components.md §3.1) but keep their space,
   so the switch na -> t1 does not push the main button down (CLS). */
[data-state="na"] .offer-box .cells[data-show~="-na"] { display: grid !important; visibility: hidden; }
[data-state="na"] .offer-box .offer-box__note[data-show~="-na"] { display: block !important; visibility: hidden; }

/* page states set by site.js on <body data-cstate>: /cam-on (c-t1, c-t2a, c-t2b, c-t3, c-dup), /thanh-toan(-xong) (con-lai, duy-tri) */
[data-cstate="c-t1"] [data-cshow]:not([data-cshow~="c-t1"]),
[data-cstate="c-t2a"] [data-cshow]:not([data-cshow~="c-t2a"]),
[data-cstate="c-t2b"] [data-cshow]:not([data-cshow~="c-t2b"]),
[data-cstate="c-t3"] [data-cshow]:not([data-cshow~="c-t3"]),
[data-cstate="c-dup"] [data-cshow]:not([data-cshow~="c-dup"]),
[data-cstate="con-lai"] [data-cshow]:not([data-cshow~="con-lai"]),
[data-cstate="duy-tri"] [data-cshow]:not([data-cshow~="duy-tri"]) { display: none !important; }
/* the single sales page /: <html data-nghe="sales|khoa-hoc"> (set on the server for links naming a trade, functions/index.js; then site.js); no attribute = no trade
   chosen yet ("none"). data-nshow="none sales" shows only for the trades listed. */
html:not([data-nghe]) [data-nshow]:not([data-nshow~="none"]),
html[data-nghe="sales"] [data-nshow]:not([data-nshow~="sales"]),
html[data-nghe="khoa-hoc"] [data-nshow]:not([data-nshow~="khoa-hoc"]) { display: none !important; }
/* branch-specific lines: <body data-branch="sales|khoa-hoc">; unknown branch hides both */
body:not([data-branch="sales"]) [data-bshow="sales"],
body:not([data-branch="khoa-hoc"]) [data-bshow="khoa-hoc"] { display: none !important; }
/* PayOS return pages: <body data-pay="pending|slow|paid">, set by site.js from GET /api/pay/status (never from the redirect) */
[data-pay="pending"] [data-payshow]:not([data-payshow~="pending"]),
[data-pay="slow"] [data-payshow]:not([data-payshow~="slow"]),
[data-pay="paid"] [data-payshow]:not([data-payshow~="paid"]) { display: none !important; }

/* draft markers ([Tên chủ], [số Zalo]…): visible on review builds; `npm run build:release` refuses to ship them */
.draft { outline: 2px dashed var(--c-warn); outline-offset: 2px; border-radius: var(--r-sm); }

.prices-foot { margin: var(--s-3) 0 0; max-width: var(--max-read); }
.steps-note, .demos-note { margin-top: var(--s-3); max-width: var(--max-read); }
section.block > .wrap > p { max-width: var(--max-read); }
.lead-form .owner-card--greeting { margin: var(--s-2) 0 var(--s-4); }
.form-after { margin: var(--s-3) 0 0; }
.demo-card p { margin-bottom: var(--s-2); }

/* narrow pages (/cam-on, /coc, /thanh-toan, policies) */
.page { padding: var(--s-5) 0 var(--s-7); }
.page h2 { margin-top: var(--s-6); }
.page p, .page li { max-width: var(--max-read); }
.page .owner-card { margin: var(--s-4) 0; }
.page .steps { margin: var(--s-4) 0; }
.page .ticket { margin: var(--s-4) 0; }
/* /cam-on only (RT fix 1): no sticky bar there, so the "Mở Zalo" button must stay in the 390×844 first screen in every
   C-T state; tighten the step cards, the code ticket and their margins on this page only (global spacing unchanged). */
[data-page="cam-on"] .page .steps { margin: var(--s-3) 0; gap: var(--s-1); }
[data-page="cam-on"] .page .steps li { grid-template-columns: 28px 1fr; gap: var(--s-2); padding: var(--s-2) var(--s-3); }
[data-page="cam-on"] .page .steps li::before { width: 28px; height: 28px; font-size: 15px; }
[data-page="cam-on"] .page .ticket { margin: var(--s-3) 0; padding: var(--s-3) var(--s-4); }
[data-page="cam-on"] .page .ticket .num { margin: 0; }
.page .trust-row { margin-top: var(--s-6); padding: 0; border: 0; justify-content: flex-start; }
.zalo-cta { margin: var(--s-5) 0; }
.qr-pay .field { margin-bottom: 0; }
.table { overflow-x: auto; }
.table table { border-collapse: collapse; width: 100%; }
.table th, .table td { text-align: left; padding: var(--s-2); border-bottom: 1px solid var(--c-line); vertical-align: top; }

footer .wrap > p { margin: 0 0 var(--s-2); }
/* the single sales page / on phones: two trades' worth of selling on one page stays ≤ 7.500px per trade (brief §8, 13/10/2026),
   so blocks sit closer than on other pages; desktop keeps the global spacing */
@media (max-width: 699px) {
  [data-page="home"] section.block { padding: var(--s-5) 0; }
  [data-page="home"] .hero .owner-card--greeting { margin-bottom: var(--s-2); }
  [data-page="home"] .demo-card { grid-template-columns: 56px 1fr; gap: var(--s-3); padding: var(--s-3); }
  [data-page="home"] .demo-card p.small { font-size: 16px; }                 /* the card text is body text: 16px like the rest */
  [data-page="home"] .price-card { padding: var(--s-4); }
  [data-page="home"] .steps li { padding: var(--s-2) var(--s-3); }
  [data-page="home"] section.block .trust-row { margin-top: var(--s-5); padding: 0; border: 0; }
}
section.block .trust-row { margin-top: var(--s-6); }
.arw { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; }
/* multi-line price-card summary: keep "+" on the first line, beside the text (components.css centres it vertically) */
.price-card__more > summary { align-items: flex-start; padding-top: var(--s-2); }
.price-card__more > summary > span { flex: 1; }
/* with a collapsed part, the summary follows the visible lines and the <details> takes the free height (equal-height cards) */
.price-card > .lines:has(+ .price-card__more) { flex: none; }
.price-card > .price-card__more { flex: 1 1 auto; }
/* plain bank-transfer panel (#bank): payee line styled like .qr-pay__payee; values wrap instead of overflowing at 390px */
.bank-pay__payee { margin: 0; font-weight: 700; }
.bank-pay .ledger p { flex-wrap: wrap; align-items: center; }
.bank-pay .ledger p > b { white-space: normal; overflow-wrap: anywhere; }
.bank-pay .qr-pay__copy { margin-left: auto; }

/* the FAQ heading inside the FEAR section of / sits below the live limits */
[data-page="home"] #gioi-han h3 { margin-top: var(--s-5); }