/* site.css for a landing template — GENERATED by demos/sync.mjs, do not edit here.
   = build/tokens.css (font URLs relative to this file) + build/components.css + demos/_shared/demo.css */

/* Ra Khách design tokens — concept c2 "Người thật làm thật" (chủ đổi G1a sang c2, 12/10/2026; trước đó là c1).
   File này CHỈ chứa: @font-face, biến CSS (light + dark). Không có style nào khác. Tên biến giữ nguyên từ bản c1.
   Màu light (c2): nền trắng, mặt đá ấm (#F5F1EA), một màu thương hiệu (xanh rừng) + một màu nhấn (vàng hổ phách, chỉ làm NỀN,
   không làm màu chữ trên nền sáng) + 3 màu trạng thái. Dark: chỉ đổi giá trị biến qua prefers-color-scheme; tên biến giữ nguyên. */

/* Font tự host (OFL): Be Vietnam Pro 400/600/700/800 (thân chữ) + Bricolage Grotesque (tiêu đề, giá, số đếm), subset latin + vietnamese.
   Đường dẫn: /fonts/<file>.woff2 — build/build.mjs copy từ docs/design/concepts/fonts/ (kèm OFL.txt). Xem docs/design/components.md §1.
   Bricolage chỉ có một file mỗi subset (bản tải về từ Google Fonts cho cả 600 và 800): khai báo dải 600–800 để trình duyệt
   không tự vẽ đậm giả. */
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/BeVietnamPro-400-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/BeVietnamPro-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/BeVietnamPro-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;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/BeVietnamPro-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;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/BeVietnamPro-700-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;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/BeVietnamPro-700-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;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/BeVietnamPro-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;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/BeVietnamPro-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;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/BricolageGrotesque-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;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/BricolageGrotesque-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;
}

:root {
  /* màu */
  --c-bg: #FFFFFF;
  --c-surface: #F5F1EA;
  --c-ink: #1D1B16;
  --c-muted: #57524A;
  --c-line: #E3DCD0;
  --c-brand: #0F4D3F;
  --c-brand-ink: #FFFFFF;
  --c-accent: #F2B13A;
  --c-ok: #1E6B45;
  --c-warn: #8F5200;
  --c-danger: #B42318;

  /* chữ */
  --f-display: "Bricolage Grotesque", "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-num: "Bricolage Grotesque", "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* khoảng cách */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 72px;

  /* bo góc, bóng, độ rộng đọc */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 28px;
  --shadow-1: 0 10px 30px -12px rgba(29, 27, 22, .25);
  --max-read: 62ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #13120F;
    --c-surface: #1D1B17;
    --c-ink: #F2EEE6;
    --c-muted: #B9B1A4;
    --c-line: #3B362E;
    --c-brand: #86CDB3;
    --c-brand-ink: #0B2B22;
    --c-accent: #F2B13A;
    --c-ok: #74CF9B;
    --c-warn: #F2A65A;
    --c-danger: #FF8F85;
    --shadow-1: 0 10px 30px -12px rgba(0, 0, 0, .6);
  }
}

/* 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); }
/* Audit P0-4: the bar stays hidden until the hero's main button (or, with no trade chosen, the trade picker) has left the screen,
   and hides again while the lead form is on screen (build/site.js, IntersectionObserver, sets [data-shown]). It is fixed, so
   showing or hiding never moves the page; the body keeps its bottom padding. visibility:hidden also takes it out of the tab order
   and the accessibility tree. Without JavaScript it stays hidden at the first screen (where scroll-driven animations exist it
   slides in after one screen of scrolling), so it never covers the line under the main button ("… ưng mới cọc 30%"). */
.zalo-bar { transition: transform .2s ease, opacity .2s ease, visibility 0s linear .2s; }
.zalo-bar:not([data-shown]) { visibility: hidden; opacity: 0; transform: translateY(calc(100% + 10px)); }
.zalo-bar[data-shown] { transition: transform .2s ease, opacity .2s ease, visibility 0s; }
@keyframes zalo-bar-in { from { visibility: hidden; opacity: 0; transform: translateY(calc(100% + 10px)); } to { visibility: visible; opacity: 1; transform: none; } }
@media (scripting: none) {
  @supports (animation-timeline: scroll()) {
    .zalo-bar:not([data-shown]) { animation: zalo-bar-in linear both; animation-timeline: scroll(root); animation-range: 100vh 110vh; }
  }
}
@media (prefers-reduced-motion: reduce) { .zalo-bar, .zalo-bar[data-shown] { transition: none; } }
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); }

/* demo.css — layout for the three landing templates (demos/sales-oto, sales-bds, khoa-hoc), loaded after tokens + components.
   Same rules as build/pages.css: only var(--…) from tokens.css and the private mixes of components.css, no new colours or fonts,
   no animation. Master copy: demos/_shared/demo.css (copied into each <template>/assets/site.css by demos/sync.mjs). */

.wrap--demo { max-width: 760px; }

/* "Trang mẫu" strip: only on sample pages (site_id demo-*) */
.sample-bar { background: var(--_tint-brand); border-bottom: 1px solid var(--c-line); font-size: 14px; line-height: 1.5; }
.sample-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-4); padding-top: var(--s-2); padding-bottom: var(--s-2); }
.sample-bar p { margin: 0; }
.sample-bar a { font-weight: 700; }

/* hero: the funnel's dark c2 hero (components.css §0b) is for Ra Khách pages; a client template keeps a light hero,
   so every token is restored here (the demo hero holds forms, calculators and price boxes built for light tokens). */
.hero--demo { --c-bg: var(--_bg); --c-surface: var(--_surface); --c-ink: var(--_ink); --c-muted: var(--_muted); --c-line: var(--_line);
  --c-brand: var(--_brand); --c-brand-ink: var(--_brand-ink); --c-warn: var(--_warn); padding: var(--s-5) 0; border-bottom: 1px solid var(--c-line); }
.hero--demo h1 { font-size: clamp(24px, 5.8vw, 36px); }
.hero--demo .lede { font-size: 16px; margin-bottom: var(--s-4); }
@media (min-width: 900px) { .hero--demo { padding: var(--s-7) 0; } .hero--demo .lede { font-size: 17px; } }
.who { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: center; margin-bottom: var(--s-4); }
.who h1 { margin: 0; }
.who__name { display: block; }
.who__role { display: block; margin-top: var(--s-1); font: 600 17px/1.4 var(--f-body); letter-spacing: 0; color: var(--c-muted); }
.who__line { margin: 0; font-weight: 700; line-height: 1.4; }
.who__line span { display: block; font-weight: 400; color: var(--c-muted); font-size: 15px; }
.avatar { display: block; border-radius: 50%; color: var(--c-muted); background: var(--c-surface); }
img.avatar { object-fit: cover; border: 1.5px solid var(--c-line); }
.owner-card .avatar { width: 100%; height: auto; aspect-ratio: 1; }
.creds { list-style: none; margin: 0; padding: 0; font-size: 15px; line-height: 1.45; }
.creds li { color: var(--c-muted); }
.creds li:first-child { color: var(--c-ink); font-weight: 700; }

.chip-date { display: inline-block; margin: 0 0 var(--s-3); padding: 2px var(--s-2); border: 1.5px solid var(--c-ink); border-radius: var(--r-sm); font: 600 14px/1.5 var(--f-num); }
.audience { margin: 0 0 var(--s-2); font-weight: 700; color: var(--c-ok); line-height: 1.4; }   /* c2 accent (amber) is a background colour only */

/* car: monthly amount first */
.pay-lead { margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); background: var(--_tint-ink); border-left: 4px solid var(--c-brand); border-radius: var(--r-sm); }
.pay-lead p { margin: 0; }
.pay-lead__label { font-weight: 600; }
.pay-lead__big { font: 700 34px/1.15 var(--f-num); letter-spacing: -.03em; }
.pay-lead__big small { font-size: 17px; font-weight: 500; letter-spacing: 0; color: var(--c-muted); }
.pay-lead__how { font-size: 14px; line-height: 1.5; color: var(--c-muted); }
.intents { display: grid; gap: var(--s-2); }
@media (min-width: 700px) { .intents { grid-template-columns: repeat(3, 1fr); } .intents .btn { padding: 0 var(--s-3); } }
.hero-actions { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
@media (min-width: 700px) { .hero-actions { grid-template-columns: 1fr 1fr; } }

.sec-sub { margin: calc(-1 * var(--s-2)) 0 var(--s-4); color: var(--c-muted); }

/* car: versions */
.vlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
@media (min-width: 700px) { .vlist { grid-template-columns: 1fr 1fr; } }
.vcard { display: grid; grid-template-columns: 112px 1fr; gap: var(--s-3); align-items: center; padding: var(--s-3); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.vcard h3 { margin: 0; font-size: 17px; }
.vcard p { margin: 0; }
.vcard__price { font: 700 20px/1.3 var(--f-num); letter-spacing: -.02em; }
.vcard__month { font-size: 14px; line-height: 1.5; color: var(--c-muted); }
.art { display: block; width: 100%; height: auto; color: var(--c-muted); }
img.art { border-radius: var(--r-sm); object-fit: cover; }

/* calculators */
.calc .field { margin-bottom: var(--s-4); }
.field select { width: 100%; min-height: 48px; padding: 10px var(--s-3); border: 1.5px solid var(--_edge); border-radius: var(--r-sm); font: 400 16px/1.4 var(--f-body); color: var(--c-ink); background: var(--c-surface); }
.field input[type="range"] { display: block; width: 100%; min-height: 44px; margin: 0; accent-color: var(--c-brand); }
.range-lbl { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); font-weight: 700; margin-bottom: 2px; }
.range-lbl output { font: 600 16px/1.4 var(--f-num); white-space: nowrap; }
.calc__out { margin: 0 0 var(--s-3); padding: var(--s-3) var(--s-4); border: 1.5px solid var(--c-ink); border-radius: var(--r-md); }
.calc__out p { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin: 0; padding: 4px 0; }
.calc__out b { font: 700 18px/1.3 var(--f-num); white-space: nowrap; }
.calc__out .is-total b { font-size: 26px; letter-spacing: -.02em; }
.calc .btn { margin-top: var(--s-2); }

/* car: delivery log (photos only with the customer's consent) */
.log-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.log-grid .ph { aspect-ratio: 4 / 3; border-radius: var(--r-sm); }
.log-grid figure { margin: 0; }
.log-grid figcaption { font-size: 14px; line-height: 1.4; color: var(--c-muted); margin-top: var(--s-1); }

/* BĐS: unit list as cards (no table: nothing scrolls sideways at 390px) */
.units { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
@media (min-width: 700px) { .units { grid-template-columns: 1fr 1fr; } }
.unit { padding: var(--s-3) var(--s-4); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.unit__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-1); }
.unit__top h3 { margin: 0; font: 700 17px/1.3 var(--f-num); }
.unit__price { font: 700 18px/1.3 var(--f-num); }
.unit dl { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s-3); margin: 0; font-size: 15px; line-height: 1.5; }
.unit dt { color: var(--c-muted); }
.unit dd { margin: 0; }
.hero .lead-form { padding: var(--s-4); }
.hero .lead-form .field { margin-bottom: var(--s-3); }
.policy { margin: var(--s-4) 0 0; padding-left: var(--s-5); }
.policy li { margin-bottom: var(--s-2); }

/* course */
.outline { list-style: none; margin: 0; padding: 0; counter-reset: b; border-top: 1px solid var(--c-line); }
.outline li { counter-increment: b; display: grid; grid-template-columns: 76px 1fr; gap: var(--s-2); padding: var(--s-2) 0; border-bottom: 1px solid var(--c-line); }
.outline li::before { content: "Buổi " counter(b); font: 600 14px/1.7 var(--f-num); color: var(--c-muted); }
.classes { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-3); }
@media (min-width: 700px) { .classes { grid-template-columns: 1fr 1fr; } }
.class-card { padding: var(--s-3) var(--s-4); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.class-card h3 { margin: 0 0 var(--s-1); }
.class-card p { margin: 0; }
.class-card .num { font-weight: 700; }
.qr-demo { margin-top: var(--s-3); }
.qr-demo > summary { list-style: none; width: 100%; }
.qr-demo > summary::-webkit-details-marker { display: none; }
.qr-demo__body { display: grid; gap: var(--s-3); justify-items: center; margin-top: var(--s-3); padding: var(--s-4); border: 1.5px dashed var(--c-ink); border-radius: var(--r-md); text-align: center; }
.qr-demo__body p { margin: 0; }
.qr-demo__code { width: 200px; max-width: 100%; height: auto; color: var(--c-ink); background: var(--c-surface); }
.qr-demo__tag { font: 700 14px/1.5 var(--f-body); color: var(--c-warn); }

/* photos: files under assets/img/ named in config.json. Each slot crops any file to its own ratio (object-fit: cover), so the
   width/height attributes in the HTML hold the space and nothing moves while an image loads. No filters, no animation. */
img.art, .unit__img, .class-card__img, .project-photo__img, .course-thumb__img { height: auto; object-fit: cover; }
.vcard--photo { grid-template-columns: 1fr; gap: var(--s-2); align-items: start; }
.vcard__img { aspect-ratio: 3 / 2; border-radius: var(--r-sm); }
.log-grid__img { aspect-ratio: 4 / 3; }
.unit__head { display: grid; grid-template-columns: 112px 1fr; gap: var(--s-3); align-items: center; margin-bottom: var(--s-2); }
.unit__head .unit__top { margin: 0; }
.unit__img { display: block; width: 112px; aspect-ratio: 4 / 3; border-radius: var(--r-sm); }
section.block--photo { padding: var(--s-5) 0 0; }
.project-photo, .course-thumb { margin: 0 0 var(--s-4); }
.project-photo { margin: 0; }
.project-photo__img, .course-thumb__img { display: block; width: 100%; border-radius: var(--r-md); }
.project-photo__img { aspect-ratio: 3 / 2; }
.course-thumb__img { aspect-ratio: 2 / 1; }
.project-photo figcaption { margin-top: var(--s-2); font-size: 14px; line-height: 1.5; color: var(--c-muted); }
.class-card--photo { display: grid; grid-template-columns: 112px 1fr; gap: var(--s-3); align-items: center; }
.class-card__img { display: block; width: 112px; aspect-ratio: 4 / 3; border-radius: var(--r-sm); }

/* form result */
.lead-form--done { scroll-margin-top: var(--s-4); }
.lead-form--done p { margin: 0; }
.form-after { margin: var(--s-3) 0 0; }
footer .wrap > p { margin: 0 0 var(--s-2); }