/* ==========================================================================
   3A MARKETING — theme.css
   Design System Lead · Sonnet 5 · 2026-07-14
   Vanilla CSS thuần — không framework. Mobile-first.
   Bảng màu BẤT BIẾN — không thêm màu ngoài :root. Xem 04-design/design-tokens.md.

   Font: Montserrat 400/500/600/700 — self-host (cập nhật 2026-07-14). Không còn Google
   Fonts CDN ở đâu trong dự án (cấm theo 00-company/checklist-chong-lo-ai.md mục H1 + Phần 3).
   PRODUCTION (WordPress): @font-face được WordPress TỰ SINH từ theme.json
   (settings.typography.fontFamilies[].fontFace) — file theme.css này KHÔNG khai báo
   @font-face thủ công, xem ghi chú bên dưới.

   ⚠️ GHI CHÚ WORDPRESS DEVELOPER (Đợt 2, 2026-07-14):
   File này được COPY NGUYÊN VĂN từ 03-prototype-html/assets/theme.css NGOẠI TRỪ khối
   "0. @font-face" mà bản prototype có thêm ở đầu file — bản prototype cần khối đó để tự
   khai báo font khi mở trực tiếp bằng file:// (không qua WordPress); bản theme này KHÔNG
   cần vì @font-face đã được theme.json tự sinh ra lúc WordPress load theme. Đây là khác
   biệt HỢP LỆ DUY NHẤT giữa 2 file — KHÔNG PHẢI lỗi lệch bản khi QA đối chiếu.

   Mục lục:
   1. Custom properties (:root) — token gốc
   2. Reset / base
   3. Typography scale
   4. Section title (chữ ký 3A Group) + divider
   5. Container / Grid
   6. Spacing utilities & Section wrapper
   7. Button
   8. Card + frame trắng
   9. Form
   10. Section-light (nền trắng)
   11. Header / Nav
   12. Footer
   13. Score bar / Score card / Benchmark
   14. Utilities chung (uppercase, tracked, màu, ẩn, skip-link)
   15. Reveal on scroll + prefers-reduced-motion
   ========================================================================== */


/* ==========================================================================
   1. CUSTOM PROPERTIES — TOKEN GỐC
   ========================================================================== */
:root {
  /* ---- Màu — BẤT BIẾN, không thêm/không đổi mã ---- */
  --bg: #0F1117;
  --card: #161820;
  --input: #1E2028;
  --gold: #C9A96E;
  --gold-hover: #E8C98E;
  --text: #FFFFFF;
  --text-muted: #A09880;
  --border: rgba(201, 169, 110, 0.12);
  --ok: #8fb08f;
  --danger: #c98a8a;
  --muted-gold: #b8a888;
  --rival: #6f6a5c;

  /* ---- Font ---- */
  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Typography scale (mobile-first, clamp = co giãn mượt) ---- */
  --fs-eyebrow: 13px;
  --fs-small: 14px;
  --fs-body: clamp(1rem, 0.94rem + 0.3vw, 1.0625rem);      /* 16 -> 17px */
  --fs-lead: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);       /* 18 -> 22px */
  --fs-h3: clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem);       /* 20 -> 26px */
  --fs-h2: clamp(1.75rem, 1.4rem + 1.75vw, 2.5rem);         /* 28 -> 40px */
  --fs-h1: clamp(2.25rem, 1.6rem + 3.25vw, 3.75rem);        /* 36 -> 60px */
  --fs-display: clamp(2.75rem, 1.8rem + 4.75vw, 5.5rem);    /* 44 -> 88px, dùng tiết chế cho hero */

  /* ---- Spacing scale (gốc 4px) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 120px;
  --space-14: 144px;
  --space-15: 160px;
  --space-16: 200px;

  /* ---- Section padding — nhiều khoảng thở ---- */
  --section-py-mobile: 72px;
  --section-py-tablet: 96px;
  --section-py-desktop: 120px;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: 20px;
  --gutter: 16px;

  /* ---- Radius — chuẩn xa xỉ, không pill ---- */
  --radius-none: 0;
  --radius-sm: 2px;

  /* ---- Shadow — tối giản ---- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-header: 0 4px 20px rgba(0, 0, 0, 0.4);

  /* ---- Motion — tiết chế ---- */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 600ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* ---- Motion "cinematic" — Frontend Interaction · 2026-07-14 ----
     Dùng cho các khoảnh khắc LỚN, có chủ đích (hero, thanh gạch section-title, ảnh vào khung
     hình, thẻ điểm 66/100): chậm, có trọng lượng, KHÔNG bounce/elastic. Tương tác nhỏ (hover
     nút, thẻ, viền) vẫn dùng --dur-base/--ease-standard như cũ — không đổi. */
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-cinematic: 800ms;

  /* ---- Z-index ---- */
  --z-header: 50;
  --z-nav-mobile: 60;
}

/* Container padding/gutter nới rộng theo breakpoint (mobile-first) */
@media (min-width: 768px) {
  :root { --container-pad: 24px; --gutter: 24px; }
}
@media (min-width: 1280px) {
  :root { --container-pad: 32px; }
}


/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px; /* tránh header sticky che mất tiêu đề khi nhảy anchor */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; }

/* Focus — không bao giờ tắt outline mà không thay thế */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}


/* ==========================================================================
   3. TYPOGRAPHY SCALE
   ========================================================================== */
h1, .h1 { font-size: var(--fs-h1); line-height: 1.08; font-weight: 700; letter-spacing: -0.01em; }
h2, .h2 { font-size: var(--fs-h2); line-height: 1.15; font-weight: 700; letter-spacing: -0.005em; }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 600; }

.display { font-size: var(--fs-display); line-height: 1.02; font-weight: 700; letter-spacing: -0.01em; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  font-weight: 400;
  color: var(--text-muted);
}

.body, p { font-size: var(--fs-body); line-height: 1.7; font-weight: 400; }

.small {
  font-size: var(--fs-small);
  line-height: 1.5;
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  line-height: 1.4;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted-gold);
}


/* ==========================================================================
   4. SECTION TITLE — "chữ ký" 3A Group: thanh gạch ngang thay icon
   ========================================================================== */
.section-head { margin-bottom: var(--space-8); }
.section-head .eyebrow { display: block; margin-bottom: var(--space-3); }
.section-head .lead { margin-top: var(--space-4); max-width: 640px; }

.section-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  margin: 0;
}

/* Thanh gạch ngang ngắn bên dưới — mặc định màu gold */
.section-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: var(--space-5);
  background: var(--gold);
}

/* Biến thể trắng — dùng trong .section-light hoặc khi cần nhấn trắng có chủ đích */
.section-title--white::after { background: var(--text); }

/* Biến thể canh giữa */
.section-title--center { text-align: center; }
.section-title--center::after { margin-inline: auto; }

/* Đường kẻ rời (không kèm tiêu đề) — dùng ngăn khối nội dung */
.divider {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: var(--space-8) 0;
}
.divider--white { background: rgba(255, 255, 255, 0.25); }


/* ==========================================================================
   5. CONTAINER / GRID
   ========================================================================== */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--gutter); }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--gutter); }
.grid-4 { display: grid; grid-template-columns: 1fr; gap: var(--gutter); }

@media (min-width: 640px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}


/* ==========================================================================
   6. SPACING UTILITIES & SECTION WRAPPER
   ========================================================================== */
.section {
  padding-block: var(--section-py-mobile);
}
@media (min-width: 768px) {
  .section { padding-block: var(--section-py-tablet); }
}
@media (min-width: 1024px) {
  .section { padding-block: var(--section-py-desktop); }
}

/* Section rút gọn — dùng cho CTA band ngắn, vẫn giữ khoảng thở tối thiểu */
.section--tight { padding-block: var(--space-9); }
@media (min-width: 1024px) {
  .section--tight { padding-block: var(--space-12); }
}

/* Utility margin/padding — chỉ bộ tối thiểu cần dùng, tránh phình class */
.u-mt-0 { margin-top: 0; }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mt-8 { margin-top: var(--space-8); }
.u-mt-10 { margin-top: var(--space-10); }
.u-mb-0 { margin-bottom: 0; }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-6 { margin-bottom: var(--space-6); }
.u-mb-8 { margin-bottom: var(--space-8); }
.u-mb-10 { margin-bottom: var(--space-10); }


/* ==========================================================================
   7. BUTTON
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 14px 32px;
  font-family: var(--font);
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: normal;
  transition: background-color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}

.btn-gold {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}
.btn-gold:hover, .btn-gold:focus-visible {
  background: var(--gold-hover);
  border-color: var(--gold-hover);
}

/* Mũi tên "→"/"↓" bọc trong <span class="arrow"> ngay trong chữ nút/link (xem .link-gold
   bên dưới) — hover dịch nhẹ vài px theo hướng mũi tên. Tinh tế, không lố. */
.arrow { display: inline-block; transition: transform var(--dur-base) var(--ease-standard); }
.btn:hover .arrow { transform: translateX(4px); }
.btn:hover .arrow--down { transform: translateY(4px); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.35);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
}

/* Ghost dùng trên section-light (nền trắng) — viền/chữ tối */
.section-light .btn-ghost {
  color: var(--bg);
  border-color: rgba(15, 17, 23, 0.35);
}
.section-light .btn-ghost:hover, .section-light .btn-ghost:focus-visible {
  border-color: var(--gold);
  color: var(--bg);
}

.btn-sm { min-height: 44px; padding: 10px 24px; }

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}


/* ==========================================================================
   8. CARD + VIỀN TRẮNG
   ========================================================================== */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-8);
  transition: border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
/* Hover: nhấc rất nhẹ 3px + viền sáng lên — KHÔNG phóng to, KHÔNG đổ bóng màu, KHÔNG nghiêng 3D */
.card:hover, .card:focus-within { border-color: rgba(201, 169, 110, 0.35); transform: translateY(-3px); }

.card--interactive { cursor: pointer; }

/* Viền trắng mảnh quanh ảnh/thẻ — dùng tiết chế, gợi nhớ 3A Signature */
.frame-white {
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: var(--space-2);
}


/* ==========================================================================
   9. FORM
   ========================================================================== */
.field { margin-bottom: var(--space-6); }

.field label, .label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-2);
  color: var(--text);
}

.field .required { color: var(--danger); margin-left: 2px; }

.field .hint {
  display: block;
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  background: var(--input);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}

textarea { min-height: 120px; resize: vertical; }

input::placeholder, textarea::placeholder { color: rgba(160, 152, 128, 0.6); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.15);
}

input[type="checkbox"], input[type="radio"] {
  width: 20px;
  height: 20px;
  min-height: unset;
  accent-color: var(--gold);
  vertical-align: middle;
}

/* Trạng thái lỗi — viền + chữ báo lỗi màu --danger, thông báo TIẾNG VIỆT */
.field-error input, .field-error select, .field-error textarea {
  border-color: var(--danger);
}
.field-error input:focus, .field-error select:focus, .field-error textarea:focus {
  box-shadow: 0 0 0 3px rgba(201, 138, 138, 0.18);
}

.field-error-message {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--danger);
}

/* Honeypot — ẩn khỏi mắt người nhưng KHÔNG display:none, để không phá cây accessibility.
   Dùng kèm HTML: aria-hidden="true" tabindex="-1" autocomplete="off". */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* 2026-07-14 (Nghị định thay thế NĐ 13/2023 — Luật 91/2025/QH15 + NĐ 356/2025/NĐ-CP):
   ô "Đồng ý xử lý dữ liệu cá nhân", dùng chung cho cả 5 form (inc/lead-render.php
   ::tam_consent_field_html()). Vùng bấm ≥44px (WCAG 2.2 SC 2.5.8) nhờ .consent-label bọc
   TRỌN checkbox + chữ, có padding-block — bấm vào chữ cũng tick được, không chỉ ô vuông nhỏ. */
.field-consent { margin-bottom: var(--space-6); }
.field-consent .consent-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 44px;
  padding-block: var(--space-2);
  cursor: pointer;
}
.field-consent input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
}
.field-consent .consent-label span {
  font-size: var(--fs-small);
  color: var(--text-muted);
  line-height: 1.5;
}
.field-consent .consent-label span a {
  color: var(--gold);
  text-decoration: underline;
}
.field-consent .consent-label span a:hover,
.field-consent .consent-label span a:focus-visible {
  color: var(--gold-hover);
}
/* Lỗi (chưa tick, bắt buộc phía server — xem inc/lead-handler.php) — viền nhẹ quanh checkbox,
   KHÔNG dùng box-shadow như input thường (checkbox 20x20 nhỏ, box-shadow to sẽ trông lệch). */
.field-consent.field-error input[type="checkbox"] {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}


/* ==========================================================================
   10. SECTION-LIGHT — nền trắng, đảo màu chữ (dùng tiết chế, tối đa 1-2/trang)
   ========================================================================== */
.section-light {
  background: #FFFFFF;  /* TƯỜNG MINH — không dùng var(--text) ở đây, xem ghi chú trên */
  color: #0F1117;       /* TƯỜNG MINH — cùng lý do */

  /* Biến cho phần tử CON kế thừa (an toàn: con là phần tử khác, biến đã ổn định) */
  --text: #0F1117;
  --text-muted: rgba(15, 17, 23, 0.65);   /* 5.8:1 trên trắng — đạt AA chữ thường */
  --border: rgba(15, 17, 23, 0.18);       /* hairline tối. Gold @0.12–0.35 trên trắng ra be nhợt, gần TÀNG HÌNH.
                                             Viền GOLD thật vẫn giữ ở nơi cần nhấn: thẻ 66/100, gói Growth. */
  --card: rgba(15, 17, 23, 0.04);         /* bề mặt card hơi ngả tối trên nền trắng */
  /* --gold / --muted-gold CỐ TÌNH KHÔNG đè: gold trên trắng chỉ ~2.2:1 → CẤM làm chữ.
     Gold trên nền trắng CHỈ được dùng cho: thanh gạch section-title, viền nhấn, nền badge. */
}

/* Eyebrow/nhãn nhỏ trong section-light: gold nhạt trên trắng = 2.3:1 → đổi sang chữ tối đậm */
.section-light .eyebrow,
.section-light .footer__heading,
.section-light .fieldset__legend,
.section-light .info-list__key {
  color: var(--text);
}

/* Thanh gạch section-title trên nền trắng: GOLD (mảng màu, không phải chữ) — nổi rõ.
   Bản "--white" sẽ TÀNG HÌNH trên trắng → ép về gold. Không bao giờ để bar trắng trên nền trắng. */
.section-light .section-title::after { background: var(--gold); }
.section-light .section-title--white::after { background: var(--gold); }
/* Đường kẻ/viền "trắng" cũng tàng hình trên nền trắng → đảo sang rgba của --bg */
.section-light .divider--white { background: rgba(15, 17, 23, 0.25); }
.section-light .frame-white { border-color: rgba(15, 17, 23, 0.45); }


/* ==========================================================================
   11. HEADER / NAV — sticky, trong suốt -> đặc khi cuộn
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  width: 100%;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-cinematic);
}

/* .is-scrolled do JS (Frontend Interaction) thêm khi scrollY > ~40px */
.site-header.is-scrolled {
  background: rgba(15, 17, 23, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-header);
}

/* .is-hidden do JS thêm khi cuộn XUỐNG quá 120px; gỡ khi cuộn LÊN — chỉ transform,
   không đổi layout (header vẫn "position: sticky", chỉ trượt ra khỏi khung nhìn).
   RÀNG BUỘC CỨNG: nút gold "Kiểm tra AI" KHÔNG được biến mất trên mobile — media query
   dưới đây VÔ HIỆU HOÁ .is-hidden hẳn ở mobile/tablet (≤1023px), bất kể JS làm gì. */
.site-header.is-hidden { transform: translateY(-100%); }
@media (max-width: 1023px) {
  .site-header.is-hidden { transform: none; }
}
/* Đang mở menu mobile → không bao giờ ẩn header (đã được media query trên chặn, ghi rõ ý đồ) */


.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-4) var(--container-pad);
  min-height: 72px;
}

.nav__logo {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
}
.nav__logo span { color: var(--gold); }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}

.nav__link {
  display: inline-block;
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: var(--space-2) 0;
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
/* QA 2026-07-14 (Frontend Interaction): ĐỔI từ `transition: right` (layout) sang
   `transform: scaleX()` (compositor) — cùng nguyên tắc với thanh gạch section-title/score-bar. */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-standard);
}
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }

/* 2026-07-14 · Đủ 8 trang: đã xoá .nav__link--soon / .nav__link__note (menu "sắp ra mắt")
   — không còn HTML nào dùng, dọn theo yêu cầu CEO, tránh CSS chết. */

.nav__cta { margin-left: var(--space-4); }

/* Hamburger — vẽ bằng CSS thuần, không icon font */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  transition: transform var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard);
}

@media (max-width: 1023px) {
  .nav__toggle { display: inline-flex; }

  .nav__list {
    position: fixed;
    inset: 72px 0 0 0;
    z-index: var(--z-nav-mobile);
    background: var(--bg);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-8) var(--container-pad);
    gap: var(--space-6);
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease-standard);
    overflow-y: auto;
  }
  .nav__list.is-open { transform: translateX(0); }
  .nav__cta { margin-left: 0; margin-top: var(--space-4); }
}


/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding-block: var(--space-11) var(--space-8);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
}
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: repeat(4, 1fr); }
}

.footer__heading {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted-gold);
  margin-bottom: var(--space-4);
}

.footer__links { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--fs-small);
}
.footer__links a:hover, .footer__links a:focus-visible { color: var(--gold); }

.footer__bottom {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
@media (min-width: 768px) {
  .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}


/* ==========================================================================
   13. SCORE BAR / SCORE CARD / BENCHMARK — dùng cho trang "Kiểm tra AI"
   ========================================================================== */

/* Thanh điểm đơn — track + fill */
.score-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border); /* QA 2026-07-14: ranh giới rõ hơn quanh track — bar đối thủ (--rival) chỉ 2.87:1, viền mảnh giúp phân biệt track/nền mà KHÔNG thêm màu mới. */
  border-radius: var(--radius-sm);
  overflow: hidden;
}
/* QA 2026-07-14 (Frontend Interaction): ĐỔI từ `transition: width` sang `transform: scaleX()`
   — width là thuộc tính layout (gây reflow); scaleX là transform thuần (chỉ compositor, không
   giật). width:66% trong HTML vẫn là kích thước THẬT không đổi (không có CLS); scaleX chỉ che/
   lộ nó dần từ trái sang — "thanh điểm chạy từ 0 tới 66%" đúng yêu cầu, đúng nguyên tắc chỉ
   animate transform/opacity. Mặc định scaleX(1) (hiện đủ) — CHỈ co về 0 khi nằm trong .reveal
   (mục 15.4), nên nơi nào chưa gắn .reveal thì bar vẫn hiện đúng ngay, không có rủi ro "kẹt ở 0%". */
.score-bar__fill {
  height: 100%;
  background: var(--gold);
  transform: scaleX(1);
  transform-origin: left;
}
/* Bar đối thủ CỐ Ý mờ hơn bar khách (--rival #6f6a5c) — đây là ý đồ thiết kế (đối thủ đứng
   sau, không được nhấn), không phải lỗi tương phản: đây là mảng đồ hoạ cạnh bar gold để so
   sánh, không phải chữ. KHÔNG đổi màu bar này. */
.score-bar__fill--rival { background: var(--rival); }

/* Thẻ điểm số lớn (66/100 — SỐ THẬT DUY NHẤT ĐƯỢC DÙNG, không bịa số khác) */
.score-card {
  text-align: center;
  padding: var(--space-9) var(--space-8);
}
.score-card__value {
  font-size: clamp(3rem, 6vw + 1rem, 6rem);
  line-height: 1;
  font-weight: 700;
  color: var(--gold);
}
.score-card__value small {
  font-size: 0.32em;
  font-weight: 500;
  color: var(--muted-gold);
  margin-left: var(--space-2);
}
.score-card__label {
  margin-top: var(--space-4);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted-gold);
}

/* Benchmark — so sánh nhiều dòng (3A vs đối thủ) */
.benchmark { display: flex; flex-direction: column; gap: var(--space-6); }
.benchmark__item { display: flex; flex-direction: column; gap: var(--space-2); }
.benchmark__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.benchmark__name { font-size: var(--fs-small); font-weight: 500; color: var(--text); }
.benchmark__score { font-size: var(--fs-small); font-weight: 600; color: var(--gold); }
/* QA 2026-07-14: #6f6a5c làm CHỮ chỉ đạt 3.50:1 (cần ≥4.5:1) — đổi chữ điểm đối thủ sang
   --text-muted (#A09880, 6.6:1 trên nền tối). Thanh đồ hoạ (.score-bar__fill--rival ở trên)
   VẪN giữ --rival — đây là mảng màu có chủ đích, không phải chữ, quy tắc tương phản khác nhau. */
.benchmark__item--rival .benchmark__score { color: var(--text-muted); }


/* ==========================================================================
   14. UTILITIES CHUNG
   ========================================================================== */
.u-uppercase { text-transform: uppercase; }
.u-tracked { letter-spacing: 0.08em; }
.u-tracked-xl { letter-spacing: 0.16em; }
.u-text-gold { color: var(--gold); }
.u-text-white { color: var(--text); }
.u-text-muted { color: var(--text-muted); }
.u-center { text-align: center; }

/* Ẩn khỏi mắt nhưng giữ cho screen reader — dùng cho label ẩn, skip-link ngoài trạng thái focus */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* QA 2026-07-14 (Frontend Interaction): ĐỔI từ `transition: top` (layout) sang
   `transform: translateY()` (compositor) — vị trí "nghỉ" đặt bằng top cố định (không animate),
   chỉ phần TRƯỢT VÀO khi focus dùng transform. */
.skip-link {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 100;
  background: var(--gold);
  color: var(--bg);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  transform: translateY(-120%);
  transition: transform var(--dur-base) var(--ease-standard);
}
.skip-link:focus { transform: translateY(0); }


/* ==========================================================================
   15. REVEAL ON SCROLL + PREFERS-REDUCED-MOTION
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-cinematic) var(--ease-cinematic),
              transform var(--dur-cinematic) var(--ease-cinematic);
}
.reveal.is-visible { opacity: 1; transform: none; }

html:not(.js) .reveal { opacity: 1; transform: none; transition: none; }

/* --------------------------------------------------------------------------
   15.1 STAGGER — khi .reveal ĐỒNG THỜI là một khối chứa nhiều thẻ/dòng con
   (lưới thẻ, danh sách, quy trình, FAQ…), các con hiện LẦN LƯỢT lệch 70ms —
   "được sắp đặt", không "bung cùng lúc". Bản thân khối cha không tự dịch
   chuyển nữa (chỉ làm giá đỡ bố cục) — tránh animate 2 lớp chồng nhau.
   KHÔNG cần sửa HTML: mọi khối dưới đây đã có sẵn class .reveal đặt trực
   tiếp trên khối chứa (grid-3, steps, plans…) trong markup hiện tại.
   -------------------------------------------------------------------------- */
.reveal.grid-2, .reveal.grid-3, .reveal.grid-4,
.reveal.platform-grid, .reveal.steps, .reveal.plans,
.reveal.pillars, .reveal.checklist, .reveal.post-grid,
.reveal.proj-list, .reveal.benchmark, .reveal.faq {
  opacity: 1;
  transform: none;
  transition: none;
}
.reveal.grid-2 > *, .reveal.grid-3 > *, .reveal.grid-4 > *,
.reveal.platform-grid > *, .reveal.steps > *, .reveal.plans > *,
.reveal.pillars > *, .reveal.checklist > *, .reveal.post-grid > *,
.reveal.proj-list > *, .reveal.benchmark > *, .reveal.faq > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-cinematic) var(--ease-cinematic),
              transform var(--dur-cinematic) var(--ease-cinematic);
}
.reveal.is-visible > * { opacity: 1; transform: none; }
/* Lệch nhịp 70ms/phần tử, tối đa 8 phần tử (đủ cho mọi lưới hiện có: 3–6 thẻ) */
.reveal.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal.is-visible > *:nth-child(2) { transition-delay: 70ms; }
.reveal.is-visible > *:nth-child(3) { transition-delay: 140ms; }
.reveal.is-visible > *:nth-child(4) { transition-delay: 210ms; }
.reveal.is-visible > *:nth-child(5) { transition-delay: 280ms; }
.reveal.is-visible > *:nth-child(6) { transition-delay: 350ms; }
.reveal.is-visible > *:nth-child(7) { transition-delay: 420ms; }
.reveal.is-visible > *:nth-child(8) { transition-delay: 490ms; }

/* JS tắt → mọi phần tử con của khối stagger cũng phải hiện NGAY, không kẹt ở opacity:0 */
html:not(.js) .reveal,
html:not(.js) .reveal > * { opacity: 1 !important; transform: none !important; transition: none !important; }

/* --------------------------------------------------------------------------
   15.2 THANH GẠCH SECTION-TITLE — "chữ ký" 3A Group tự vẽ từ trái sang khi
   section vào tầm mắt. Chỉ áp dụng cho section-title nằm TRONG một khối .reveal
   (descendant selector — không quan trọng .reveal đặt ở cấp nào phía trên).
   Ngoài phạm vi .reveal, thanh gạch giữ nguyên hành vi cũ (luôn hiện đủ, mục 4).
   -------------------------------------------------------------------------- */
.reveal .section-title::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-cinematic) var(--ease-cinematic);
}
.reveal.is-visible .section-title::after { transform: scaleX(1); }
html:not(.js) .section-title::after { transform: scaleX(1) !important; }

/* --------------------------------------------------------------------------
   15.3 MEDIA-SLOT — mờ dần vào + phóng rất nhẹ 1.04 → 1.0 khi vào tầm mắt
   (kiểu ảnh trong tạp chí kiến trúc). Cũng áp cho ảnh bìa bài viết thật (post-card__thumb)
   khi Đợt 3 thay khung giữ chỗ bằng ảnh. Chỉ kích hoạt khi nằm trong .reveal (descendant).
   -------------------------------------------------------------------------- */
.reveal .media-slot,
.reveal .post-card__thumb {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity var(--dur-cinematic) var(--ease-cinematic),
              transform var(--dur-cinematic) var(--ease-cinematic);
}
.reveal.is-visible .media-slot,
.reveal.is-visible .post-card__thumb { opacity: 1; transform: scale(1); }
html:not(.js) .media-slot,
html:not(.js) .post-card__thumb { opacity: 1 !important; transform: none !important; }

/* --------------------------------------------------------------------------
   15.4 SỐ 66/100 + THANH ĐIỂM — điểm WOW: số đếm từ 0 lên khi cuộn tới, thanh
   chạy từ 0% tới đúng % cùng lúc (JS · main.js hàm initScoreCount đếm số; CSS
   dưới đây chỉ lo phần thanh — chạy nhờ đúng class .is-visible mà IntersectionObserver
   đã gắn cho .reveal cha, KHÔNG cần observer riêng).
   BẮT BUỘC: mặc định (trước khi is-visible) thanh vẫn ở scaleX(1) — chỉ CO VỀ 0 khi
   nằm trong .reveal (nghĩa là JS ĐANG chạy và sẽ sớm thêm .is-visible). Nếu JS tắt,
   quy tắc html:not(.js) ở trên (mục 15) đã ép opacity/transform về trạng thái hiện đủ,
   nên KHÔNG BAO GIỜ có chuyện thanh/số kẹt ở 0. -------------------------------------------------------------------------- */
.reveal .score-bar__fill { transform: scaleX(0); }
.reveal.is-visible .score-bar__fill {
  transform: scaleX(1);
  transition: transform 1200ms var(--ease-cinematic);
}
/* score-bar__fill nằm SÂU hơn 1 cấp trong .evidence/.case__score → quy tắc "> *" ở mục 15.1
   không chạm tới nó. Chốt riêng bằng !important — JS tắt luôn luôn hiện đủ 66%, không bao giờ 0. */
html:not(.js) .score-bar__fill { transform: scaleX(1) !important; }

/* Tắt toàn bộ animation/transition khi người dùng yêu cầu giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal > *,
  .section-title::after,
  .media-slot, .post-card__thumb,
  .score-bar__fill { opacity: 1 !important; transform: none !important; }
}


/* ==========================================================================
   ==========================================================================
   PHẦN BỔ SUNG — UI/Layout Designer · 2026-07-14 (Prototype Đợt 1)
   16. Header mobile · 17. Hero · 18. Trust bar · 19. Media slot · 20. Checklist
   21. Platform grid · 22. Evidence card · 23. Steps · 24. Price card + badge
   25. Plans · 26. FAQ accordion · 27. Form panel · 28. Contact info + map slot
   29. Vá màu section-light
   ========================================================================== */


/* ==========================================================================
   16. HEADER — MOBILE: nút gold TÁCH KHỎI hamburger, luôn hiện
   ========================================================================== */
.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav__cta-short { display: none; }

@media (max-width: 1023px) {
  .nav { min-height: 60px; padding-block: var(--space-2); }
  .nav__list { inset: 60px 0 0 0; }
  .nav__logo { font-size: 16px; }

  .nav__actions .btn { padding: 10px 14px; font-size: 12px; letter-spacing: 0.04em; }
  .nav__cta-full { display: none; }
  .nav__cta-short { display: inline; }
}

/* Khoá cuộn trang khi menu mobile mở */
body.no-scroll { overflow: hidden; }

/* Hamburger → dấu X khi mở */
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu mobile: link to hơn, dễ bấm bằng ngón cái */
@media (max-width: 1023px) {
  .nav__list .nav__link {
    font-size: 18px;
    letter-spacing: 0.1em;
    min-height: 52px;
    width: 100%;
  }

}


/* ==========================================================================
   17. HERO — typography-first. CHƯA CÓ ẢNH THẬT → chữ lớn + khoảng thở.
   ========================================================================== */
.hero {
  position: relative;
  padding-block: var(--space-12) var(--space-11);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .hero { padding-block: var(--space-14) var(--space-12); }
}

.hero::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 50%;
  width: 900px;
  height: 900px;
  max-width: 140vw;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(201, 169, 110, 0.07) 0%, rgba(201, 169, 110, 0) 62%);
  pointer-events: none;
}
.hero > * { position: relative; }

.hero__inner { max-width: 900px; }
.hero__title { margin-top: var(--space-5); }
.hero__title .line { display: block; }
.hero .lead { margin-top: var(--space-7); max-width: 680px; }

/* --------------------------------------------------------------------------
   17.1 HERO INTRO — khoảnh khắc đầu tiên. Chữ hiện lên THEO TẦNG khi trang tải:
   eyebrow → từng dòng H1 → lead → nút → dải tin cậy. Thuần CSS @keyframes — KHÔNG
   phụ thuộc JS (chạy dù JS tắt), KHÔNG dùng IntersectionObserver (hero luôn ở trên
   màn hình đầu, "cuộn tới" không có ý nghĩa ở đây).
   AN TOÀN: opacity:1 là giá trị TĨNH mặc định — animation (fill-mode "both") chỉ ĐÈ nó
   trong lúc animation thật sự chạy. Nếu trình duyệt không hỗ trợ animation (cực hiếm),
   opacity:1 tĩnh vẫn thắng ⇒ nội dung hiện đủ ngay, không bao giờ mất trắng.
   -------------------------------------------------------------------------- */
@keyframes tam-hero-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero .eyebrow,
.hero .error-code,
.hero__title .line,
.hero .lead,
.hero .hero__actions,
.hero .trust-bar {
  opacity: 1; /* mặc định an toàn — xem ghi chú trên */
  animation: tam-hero-in var(--dur-cinematic) var(--ease-cinematic) both;
}
/* .error-code (số 404 cỡ lớn) dùng CHUNG cơ chế "hero intro" — KHÔNG phải khối cuộn-mới-hiện
   (số nằm ngay trên màn hình đầu, cuộn tới không có nghĩa). Đặt cùng mốc 0ms với .eyebrow:
   đây là khoảnh khắc mở màn của trang 404, không cần tách nhịp riêng — "đừng làm lố".
   Frontend Interaction 2026-07-14 — đồng bộ với 03-prototype-html/assets/theme.css. */
.hero .error-code                 { animation-delay: 0ms; }
.hero .eyebrow                    { animation-delay: 0ms; }
.hero__title .line:nth-child(1)   { animation-delay: 110ms; }
.hero__title .line:nth-child(2)   { animation-delay: 200ms; }
.hero__title .line:nth-child(3)   { animation-delay: 290ms; }
.hero .lead                       { animation-delay: 380ms; }
.hero .hero__actions               { animation-delay: 480ms; }
.hero .trust-bar                   { animation-delay: 580ms; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-9);
}
.hero__actions .btn { flex: 1 1 100%; }
@media (min-width: 480px) {
  .hero__actions .btn { flex: 1 1 auto; }
}
@media (min-width: 640px) {
  .hero__actions .btn { flex: 0 0 auto; }
}

/* Hero trang con — ngắn hơn, căn giữa */
.hero--sub { padding-block: var(--space-11) var(--space-9); text-align: center; }
.hero--sub .hero__inner { margin-inline: auto; }
.hero--sub .lead { margin-inline: auto; }
@media (min-width: 1024px) {
  .hero--sub { padding-block: var(--space-13) var(--space-10); }
}


/* ==========================================================================
   18. TRUST BAR — dải tên khách (3 khách thật, KHÔNG bịa logo)
   ========================================================================== */
.trust-bar {
  margin-top: var(--space-11);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}
.trust-bar__label {
  display: block;
  margin-bottom: var(--space-4);
}
.trust-bar__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-7);
}
.trust-bar__item {
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text);
  opacity: 0.85;
}
.trust-bar__item + .trust-bar__item { position: relative; padding-left: var(--space-7); }
.trust-bar__item + .trust-bar__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  transform: translateY(-50%);
  background: var(--gold);
}
@media (max-width: 480px) {
  .trust-bar__list { gap: var(--space-3) var(--space-5); }
  .trust-bar__item { font-size: 12px; letter-spacing: 0.12em; }
  .trust-bar__item + .trust-bar__item { padding-left: var(--space-5); }
}


/* ==========================================================================
   19. MEDIA SLOT — khối giữ chỗ ảnh SANG TRỌNG (thay cho ảnh stock/placeholder xám)
   ========================================================================== */
.media-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 240px;
  padding: var(--space-8);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.02);
}
@media (min-width: 768px) {
  .media-slot--wide { aspect-ratio: 16 / 9; }
}
.media-slot__note {
  font-size: var(--fs-small);
  color: var(--text-muted);
  max-width: 34ch;
}
.media-slot::before,
.media-slot::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid var(--gold);
}
.media-slot::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.media-slot::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.section-light .media-slot {
  border-color: rgba(15, 17, 23, 0.18);
  background: rgba(15, 17, 23, 0.02);
}


/* ==========================================================================
   20. CHECKLIST ✓ — dấu ✓ dùng --ok (đúng nghĩa: "đúng/xác nhận"), không trang trí
   ========================================================================== */
.checklist { display: flex; flex-direction: column; gap: var(--space-5); }
.checklist li {
  position: relative;
  padding-left: var(--space-8);
  font-size: var(--fs-body);
  line-height: 1.6;
}
.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ok);
}
.checklist--lg li { font-size: var(--fs-lead); }


/* ==========================================================================
   21. PLATFORM GRID — 4 ô AI. Mobile 2×2 (theo wireframe), desktop 4 cột.
   ========================================================================== */
.platform-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gutter);
}
@media (min-width: 1024px) {
  .platform-grid { grid-template-columns: repeat(4, 1fr); }
}

.platform-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-7) var(--space-5);
  text-align: center;
  transition: border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.platform-card:hover { border-color: rgba(201, 169, 110, 0.35); transform: translateY(-3px); }
.platform-card__name {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.platform-card__q {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--text-muted);
}


/* ==========================================================================
   22. EVIDENCE CARD — case study 3A Signature (66/100 — SỐ THẬT DUY NHẤT)
   ========================================================================== */
.evidence {
  max-width: 900px;
  margin-inline: auto;
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: var(--space-8);
  background: var(--card);
}
@media (min-width: 768px) {
  .evidence { padding: var(--space-10); }
}
.evidence__client {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text);
}
.evidence__client-sub {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.evidence__score {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-8);
}
.evidence__score .score-card { padding: 0; text-align: left; }

.scale {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}
@media (min-width: 640px) {
  .scale { grid-template-columns: repeat(4, 1fr); }
}
.scale__step {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding-top: var(--space-3);
  border-top: 2px solid var(--border);
}
.scale__step--current { color: var(--gold); border-top-color: var(--gold); }

.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-8);
}
@media (min-width: 640px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
}
.pillar {
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border);
}
.pillar__no {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted-gold);
  white-space: nowrap;
}
.pillar__name { font-size: var(--fs-small); font-weight: 500; }

.evidence__honest {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  font-size: var(--fs-small);
  color: var(--text-muted);
  max-width: 60ch;
}


/* ==========================================================================
   23. STEPS — quy trình 01–04
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
}

.step {
  position: relative;
  padding: var(--space-6) 0 var(--space-6) var(--space-9);
  border-top: 1px solid var(--border);
}
@media (min-width: 1024px) {
  .step { padding: var(--space-7) 0 0 0; }
}
.step::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
}
.step:last-child::before { bottom: 50%; }
@media (min-width: 1024px) {
  .step::before { display: none; }
}
.step__no {
  display: block;
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.06em;
}
.step__name {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.step__desc {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--text-muted);
}


/* ==========================================================================
   24. PRICE CARD + BADGE
   ========================================================================== */
.badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.badge--solid { background: var(--gold); color: var(--bg); }
.badge--muted { color: var(--muted-gold); border-color: var(--border); }

.price-card { display: flex; flex-direction: column; gap: var(--space-4); }
.price-card__name {
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text);
}
.price-value {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--gold);
}
.price-unit {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.price-card__for {
  font-size: var(--fs-small);
  color: var(--text-muted);
  line-height: 1.6;
}
.price-card--featured { border-color: var(--gold); }


/* ==========================================================================
   25. PLANS — bảng giá đầy đủ. Desktop: 3 cột cạnh nhau. Mobile: tabs.
   ========================================================================== */
.plan-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-7);
}
.plan-tab {
  flex: 1;
  min-height: 48px;
  padding: var(--space-3) var(--space-2);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              background-color var(--dur-base) var(--ease-standard);
}
.plan-tab[aria-selected="true"] {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--bg);
}

.plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
  align-items: start;
}
@media (min-width: 768px) {
  .plans { grid-template-columns: repeat(3, 1fr); }
}

.plan {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  transition: border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
/* Hover nhẹ như .card — KHÔNG áp cho .plan--featured (gói đang được nhấn bằng viền gold cố định,
   nhấc thêm khi hover sẽ đá vào viền 2px làm rung layout của riêng gói này) */
.plan:not(.plan--featured):hover { border-color: rgba(201, 169, 110, 0.35); transform: translateY(-3px); }
.plan--featured {
  border-color: var(--gold);
  border-width: 2px;
  background: rgba(201, 169, 110, 0.05);
}
.plan__head { display: flex; flex-direction: column; gap: var(--space-3); }
.plan__badge-row { min-height: 24px; }

.plan__features {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.plan__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-small);
}
.plan__row:last-child { border-bottom: 0; }
.plan__key { color: var(--text-muted); flex: 0 0 auto; }
.plan__val { text-align: right; font-weight: 600; }
.plan__val--none { color: var(--text-muted); font-weight: 400; }
.plan__val--yes { color: var(--ok); }

@media (max-width: 767px) {
  .plan { display: none; }
  .plan.is-active { display: flex; }
  html:not(.js) .plan { display: flex; }
  html:not(.js) .plan-tabs { display: none; }
}
@media (min-width: 768px) {
  .plan-tabs { display: none; }
}


/* ==========================================================================
   26. FAQ ACCORDION — <details>/<summary>, không cần JS
   ========================================================================== */
.faq { max-width: 820px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__item:first-child { border-top: 1px solid var(--border); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 64px;
  padding: var(--space-5) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-body);
  font-weight: 600;
  transition: color var(--dur-base) var(--ease-standard);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--gold); }

.faq__q::after {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  position: relative;
  background:
    linear-gradient(var(--gold), var(--gold)) center / 14px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) center / 2px 14px no-repeat;
  transition: transform var(--dur-base) var(--ease-standard);
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__item[open] .faq__q { color: var(--gold); }

.faq__a {
  padding: 0 0 var(--space-7) 0;
  max-width: 68ch;
  color: var(--text-muted);
  font-size: var(--fs-body);
}
.faq__a strong { color: var(--text); font-weight: 600; }


/* ==========================================================================
   27. FORM PANEL / FIELDSET / SUCCESS
   ========================================================================== */
.form-panel {
  max-width: 640px;
  margin-inline: auto;
  padding: var(--space-8) var(--space-6);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
@media (min-width: 768px) {
  .form-panel { padding: var(--space-10); }
}
.form-panel--gold { border-color: rgba(201, 169, 110, 0.45); }

.form-panel--wide { max-width: 720px; }

.fieldset { border: 0; padding: 0; margin: 0 0 var(--space-8) 0; }
.fieldset:last-of-type { margin-bottom: var(--space-6); }
.fieldset__legend {
  display: block;
  width: 100%;
  padding: 0 0 var(--space-5) 0;
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted-gold);
}
.fieldset__legend .optional {
  display: block;
  margin-top: var(--space-2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-muted);
}

.form-actions { margin-top: var(--space-8); }
.form-actions .btn { width: 100%; }

.form-note {
  margin-top: var(--space-5);
  font-size: var(--fs-small);
  color: var(--text-muted);
  text-align: center;
}

.form-success {
  display: none;
  padding: var(--space-8);
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  background: rgba(201, 169, 110, 0.06);
  text-align: center;
}
.form-success.is-shown { display: block; }
.form-success__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--gold);
}
.form-success__text {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.form-success__demo {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-gold);
}

/* Tổng kết lỗi ở đầu form — không bao giờ "nuốt lỗi im lặng" */
.form-alert {
  display: none;
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  background: rgba(201, 138, 138, 0.08);
  color: var(--danger);
  font-size: var(--fs-small);
}
.form-alert.is-shown { display: block; }


/* ==========================================================================
   28. CONTACT INFO + MAP SLOT
   ========================================================================== */
.info-list { margin: 0; }
.info-list__row {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border);
}
.info-list__row:first-child { border-top: 1px solid var(--border); }
.info-list__key {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted-gold);
}
.info-list__val {
  margin: var(--space-2) 0 0 0;
  font-size: var(--fs-body);
  line-height: 1.6;
}
.info-list__val a { color: var(--text); text-decoration: none; }
.info-list__val a:hover { color: var(--gold); }
.info-list__val--strong {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.info-list__val--strong a { color: var(--gold); }

.map-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 320px;
  padding: var(--space-8);
  text-align: center;
  border: 1px solid rgba(15, 17, 23, 0.18);
}
@media (min-width: 768px) { .map-slot { min-height: 380px; } }


/* ==========================================================================
   29. VÁ MÀU CHO .section-light + TIỆN ÍCH BỔ SUNG
   ========================================================================== */
.section-light .score-bar { background: rgba(15, 17, 23, 0.08); }
.section-light .platform-card,
.section-light .evidence { background: var(--card); }
.section-light .card { background: var(--card); }
.section-light .card:hover,
.section-light .card:focus-within,
.section-light .platform-card:hover { border-color: rgba(15, 17, 23, 0.4); }

.section-light .price-value,
.section-light .score-card__value,
.section-light .plan__val--yes,
.section-light .step__no,
.section-light .link-gold,
.section-light .info-list__val--strong,
.section-light .info-list__val--strong a,
.section-light .form-success__title { color: var(--text); }
.section-light .link-gold:hover { color: var(--text); }

.section-light .score-card__value small,
.section-light .score-card__label,
.section-light .price-unit,
.section-light .pillar__no,
.section-light .form-success__demo,
.section-light .plan-tab { color: var(--text-muted); }

.section-light .info-list__val a:hover,
.section-light .footer__links a:hover { color: var(--text); text-decoration: underline; }

.section-light .scale__step--current { color: var(--text); border-top-color: var(--gold); }

.section-light .badge { color: var(--text); border-color: var(--gold); }
.section-light .badge--muted { color: var(--text-muted); border-color: var(--border); }

.section-light .checklist li::before { color: var(--text); }

.section-light .faq__q:hover,
.section-light .faq__item[open] .faq__q { color: var(--text); }
.section-light .faq__q {
  transition: color var(--dur-base) var(--ease-standard),
              background-color var(--dur-base) var(--ease-standard);
}
.section-light .faq__q:hover { background: rgba(15, 17, 23, 0.04); }
@media (min-width: 768px) {
  .section-light .faq__q {
    padding-inline: var(--space-4);
    margin-inline: calc(var(--space-4) * -1);
  }
}
.section-light .faq__q::after {
  background:
    linear-gradient(#0F1117, #0F1117) center / 14px 2px no-repeat,
    linear-gradient(#0F1117, #0F1117) center / 2px 14px no-repeat;
}

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
}
@media (min-width: 1024px) {
  .split { grid-template-columns: 1.1fr 1fr; gap: var(--space-12); align-items: start; }
}

.stack-6 { display: flex; flex-direction: column; gap: var(--space-6); }
.u-maxw-60 { max-width: 60ch; }
.u-maxw-68 { max-width: 68ch; }
.u-narrow { max-width: 720px; margin-inline: auto; }
.link-gold {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-standard);
}
/* QA 2026-07-14: bản cũ đổi `gap` khi hover — KHÔNG có tác dụng vì mũi tên "→" nằm chung
   1 text node với chữ (flex gap chỉ có ý nghĩa giữa nhiều item). Đã bọc mũi tên trong
   <span class="arrow"> (xem HTML) → dùng đúng .arrow ở trên để dịch mũi tên, không đổi màu chữ ở đây nữa. */
.link-gold:hover { color: var(--gold-hover); }
.link-gold:hover .arrow { transform: translateX(4px); }
.link-gold:hover .arrow--down { transform: translateY(4px); }

/* 2026-07-14 · Đủ 8 trang: đã xoá .link-gold--soon / .link-gold__soon — không còn
   HTML nào dùng (mọi link "sắp ra mắt" trước đây giờ đã trỏ tới trang thật). */

.closing {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text);
  max-width: 68ch;
}


/* ==========================================================================
   30. "3A LÀM ĐƯỢC GÌ CHO BẠN" — component cho S5 + S8 trang chủ
   ========================================================================== */
.svc-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
}

.svc-card__quote {
  margin-top: var(--space-3);
  padding-left: var(--space-5);
  border-left: 2px solid var(--gold);
  font-size: var(--fs-small);
  font-style: italic;
  line-height: 1.6;
  color: var(--text);
}

.svc-card__label {
  margin-top: var(--space-5);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted-gold);
}

.svc-card__foot {
  margin-top: auto;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.svc-list { display: flex; flex-direction: column; gap: var(--space-3); }
.svc-list li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.svc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 12px;
  height: 1px;
  background: var(--gold);
}
.section-light .svc-list li::before { background: var(--gold); }

.tier-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}
.tier-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.tier-list__name {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.price-value--row {
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

/* ==========================================================================
   BẢNG DỰ ÁN TRỌN GÓI — 5 dòng (tên · giá · thời gian)
   ========================================================================== */
.proj-list {
  margin-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.proj-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border);
  transition: background-color var(--dur-base) var(--ease-standard);
}
.proj-row:hover { background: rgba(201, 169, 110, 0.06); }

.proj-row__name {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.4;
}
.proj-row__price { grid-column: 1; grid-row: 2; }
.proj-row__time {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  font-size: var(--fs-small);
  color: var(--text-muted);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .proj-row {
    grid-template-columns: 1fr 180px 120px;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-4);
    margin-inline: calc(var(--space-4) * -1);
  }
  .proj-row__name { grid-column: 1; grid-row: 1; }
  .proj-row__price { grid-column: 2; grid-row: 1; justify-self: end; }
  .proj-row__time { grid-column: 3; grid-row: 1; justify-self: end; }
}

.proj-row--star { background: rgba(201, 169, 110, 0.07); }
.proj-row--star:hover { background: rgba(201, 169, 110, 0.12); }
.proj-row--star .proj-row__price { color: var(--gold-hover); }
@media (min-width: 768px) {
  .proj-row--star { box-shadow: inset 2px 0 0 0 var(--gold); }
}

.proj-note {
  margin-top: var(--space-6);
  font-size: var(--fs-small);
  color: var(--text-muted);
  max-width: 68ch;
}

.price-card__features {
  margin-top: var(--space-2);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.price-card__for { font-weight: 500; }


/* ==========================================================================
   ==========================================================================
   31. BỔ SUNG ĐỢT 2 — 4 TRANG P1 (Dịch vụ · Khách hàng · Về chúng tôi · Kiến thức)
   Giữ nguyên từ prototype dù P0 (4 trang Đợt 2 này) chưa dùng tới — không xoá vì các
   trang P1 tương lai (Đợt 3) sẽ tái sử dụng đúng các class này, tránh phải viết lại CSS.
   ========================================================================== */
.section-light input:not([type="checkbox"]):not([type="radio"]),
.section-light select,
.section-light textarea {
  background: #1E2028;
  color: #FFFFFF;
  border-color: rgba(201, 169, 110, 0.30);
}
.section-light input::placeholder,
.section-light textarea::placeholder { color: rgba(160, 152, 128, 0.75); }

.section-light .proj-row--star .proj-row__price { color: var(--text); }

/* 🔴 BẮT ĐƯỢC KHI TỰ QA (2026-07-14): mọi NHÃN NHỎ màu --muted-gold (#b8a888) đặt trên nền trắng
   chỉ đạt ~2.3:1 → KHÔNG ĐỌC ĐƯỢC, trượt AA. Mục 29 đã vá .eyebrow/.footer__heading/
   .fieldset__legend/.info-list__key. Bổ sung nốt các nhãn mới của Đợt 2 dùng cùng màu đó.
   Gold/muted-gold trên nền trắng CHỈ được làm mảng, viền, gạch — KHÔNG BAO GIỜ làm chữ. */
.section-light .svc-card__label,
.section-light .case__no,
.section-light .post-card__cat,
.section-light .pull-quote__source { color: var(--text); }

.pull-quote {
  max-width: 24ch;
  padding-left: var(--space-6);
  border-left: 2px solid var(--gold);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text);
}
@media (min-width: 768px) {
  .pull-quote { max-width: 22ch; padding-left: var(--space-8); }
}
.pull-quote--wide { max-width: 34ch; font-size: var(--fs-h3); font-weight: 500; line-height: 1.5; }
.pull-quote__source {
  display: block;
  margin-top: var(--space-6);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-gold);
}

.case {
  padding-top: var(--space-9);
  border-top: 1px solid var(--border);
}
.case + .case { margin-top: var(--space-11); }
@media (min-width: 1024px) {
  .case + .case { margin-top: var(--space-13); }
}

.case__head { margin-bottom: var(--space-8); }
.case__no {
  display: block;
  margin-bottom: var(--space-4);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-gold);
}
.case__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.005em;
}
.case__sub {
  margin-top: var(--space-3);
  font-size: var(--fs-lead);
  color: var(--text-muted);
}

.case__aside { display: flex; flex-direction: column; gap: var(--gutter); }

.case__score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-7);
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  background: var(--card);
}
.case__score .score-card { padding: 0; text-align: left; }
.case__score .score-card__value { font-size: clamp(2.5rem, 5vw + 1rem, 4rem); }

.empty-state {
  position: relative;
  padding: var(--space-10) var(--space-6);
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
}
@media (min-width: 768px) {
  .empty-state { padding: var(--space-12) var(--space-10); }
}
.empty-state__title {
  margin-top: var(--space-5);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--text);
}
.empty-state__text {
  margin: var(--space-5) auto 0;
  max-width: 56ch;
  font-size: var(--fs-body);
  color: var(--text-muted);
}
.empty-state::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin: 0 auto var(--space-6);
  background: var(--gold);
}

.post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}
@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }

.post-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
}
.post-card__thumb {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
}
.post-card__cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-gold);
}
.post-card__title { font-size: var(--fs-body); font-weight: 600; line-height: 1.4; }

.post-card--empty .post-card__line {
  height: 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.07);
}
.post-card--empty .post-card__line--short { width: 55%; }
.section-light .post-card--empty .post-card__line { background: rgba(15, 17, 23, 0.08); }
.section-light .post-card__thumb { background: rgba(15, 17, 23, 0.04); }

.media-slot--sm { min-height: 180px; padding: var(--space-6); }
@media (min-width: 768px) {
  .media-slot--portrait { aspect-ratio: 3 / 4; min-height: 0; }
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.btn-row--center { justify-content: center; }
.btn-row .btn { flex: 1 1 100%; }
@media (min-width: 480px) {
  .btn-row .btn { flex: 0 0 auto; }
}


/* ==========================================================================
   33. TÌM KIẾM (core/search) — Đợt 4, trang 404/search. Dùng lại token sẵn có,
   không thêm màu mới. Chỉ định dạng lại input/nút cho khớp gu input/.btn-gold.
   ========================================================================== */
.tam-search { max-width: 480px; margin-inline: auto; }
.tam-search .wp-block-search__label { display: block; margin-bottom: var(--space-2); font-size: var(--fs-small); font-weight: 600; text-align: left; }
.tam-search .wp-block-search__inside-wrapper { display: flex; gap: var(--space-2); border: 0; }
.tam-search .wp-block-search__input {
  min-height: 48px;
  padding: 12px 16px;
  background: var(--input);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  border-radius: var(--radius-sm);
}
.tam-search .wp-block-search__button {
  min-height: 48px;
  padding: 0 24px;
  background: var(--gold);
  color: var(--bg);
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.tam-search .wp-block-search__button:hover { background: var(--gold-hover); border-color: var(--gold-hover); }


/* ==========================================================================
   32. BỔ SUNG ĐỢT 2 (WordPress) — form server-rendered: alert theo từng ô lỗi
   Prototype gốc chỉ có 1 khối .form-alert tổng; bản WordPress còn hiển thị lỗi
   NGAY DƯỚI từng field khi submit thật báo lỗi server-side (POST → admin-post.php
   → redirect kèm token lỗi). Class .field-error / .field-error-message đã có sẵn
   ở mục 9 — không cần thêm CSS mới, chỉ ghi chú lại đây cho người đọc sau.
   ========================================================================== */


/* ==========================================================================
   34. TRANG 404 — SỐ LỖI LỚN (Frontend Interaction 2026-07-14)
   Port NGUYÊN VĂN từ 03-prototype-html/assets/theme.css mục 32.4 — theme.css này
   lẽ ra phải là bản sao trung thực của prototype (xem ghi chú đầu file); rule này
   từng bị thiếu khi copy, giờ vá lại cho khớp. Hiệu ứng xuất hiện: xem mục 17.1
   (".hero .error-code" trong khối tam-hero-in).
   ========================================================================== */
.error-code {
  font-size: clamp(5.5rem, 20vw, 13rem);
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: 0.14em;
  /* Bù khoảng giãn thừa bên phải ký tự cuối — giữ khối chữ cân đúng lề trái */
  margin-right: -0.14em;
  color: var(--gold);
}


/* ==========================================================================
   35. CASE__SCORE — thanh điểm cho single-khach-hang.html (Frontend Interaction
   2026-07-14). Card điểm (case__score) vốn chỉ có số — nay thêm chỗ cho thanh
   điểm (.score-bar) chạy đồng bộ số đếm + thanh, giống hệt cơ chế trang chủ
   (mục 15.4). .case__score-bar chỉ ép nó xuống dòng riêng trong khối flex sẵn có
   — KHÔNG phải thuộc tính animate (transform/opacity vẫn do .reveal lo, xem mục 15).
   ========================================================================== */
.case__score-bar { flex: 1 1 100%; }


/* ==========================================================================
   ==========================================================================
   36. ĐỒNG BỘ VỚI PROTOTYPE MỤC 32 — Breadcrumb · Trang bài viết · Trang 404
   Frontend Interaction · 2026-07-14
   Port NGUYÊN VĂN từ 03-prototype-html/assets/theme.css mục 32.1/32.2/32.4/32.5
   — các khối này bị THIẾU trong lần copy trước (14 class không đồng bộ, CEO grep
   phát hiện), khiến trang bài viết (single bài viết) và trang 404 lên WordPress
   sẽ vỡ giao diện: chữ không cỡ, mục lục không khung, ô tìm kiếm không kiểu.
   KHÔNG sửa token, KHÔNG thêm màu ngoài 12 màu gốc + rgba của chính chúng.

   36.1 Breadcrumb (đường dẫn) — trang chi tiết          (prototype 32.1)
   36.2 Trang bài viết: cột chữ · meta · thân bài · mục lục · ảnh trong bài
                                                          (prototype 32.2)
   36.3 Ô tìm kiếm trang 404 — .error-code ĐÃ có sẵn ở mục 34 phía trên
        (đã được port riêng trước đó), KHÔNG copy lại ở đây để tránh khai báo
        trùng; chỉ port phần .search-row / .search-note còn thiếu.
                                                          (prototype 32.4, trừ .error-code)
   36.4 Link trong .svc-list (dùng ở 404 + trang cảm ơn)  (prototype 32.5)

   ⚠️ CỐ TÌNH KHÔNG PORT prototype mục 32.3 (.draft-note): đây là dải cảnh báo
   "đây là văn bản mẫu, chưa phải nội dung thật" — CHỈ dùng cho trang mẫu
   bai-viet.html ở prototype. Site WordPress thật hiển thị bài viết THẬT, không
   bao giờ được có class này: nếu lọt lên production, khách sẽ đọc thấy dòng
   "nội dung mẫu" trên website thật đang chạy. Do đó .draft-note bị bỏ hẳn khỏi
   bản WordPress, không phải sai sót — là quyết định có chủ đích.
   ========================================================================== */


/* --------------------------------------------------------------------------
   36.1 BREADCRUMB — đường dẫn nhỏ trên tiêu đề trang chi tiết.
   Dấu "/" dùng đúng --text-muted (6.6:1) — KHÔNG hạ opacity xuống mờ hơn.
   -------------------------------------------------------------------------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.crumbs li { display: flex; align-items: center; }
.crumbs li + li::before {
  content: "/";
  margin-right: var(--space-3);
  color: var(--text-muted);
}
.crumbs a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-standard);
}
.crumbs a:hover, .crumbs a:focus-visible { color: var(--gold); }
.crumbs [aria-current="page"] { color: var(--text); }


/* --------------------------------------------------------------------------
   36.2 TRANG BÀI VIẾT — ĐỌC ĐƯỢC TRÊN ĐIỆN THOẠI là ưu tiên số 1.
   · Cột chữ 680px — không kéo dài hết màn hình (mắt không phải quét ngang).
   · Cỡ chữ 17 → 19px (lớn hơn body 16–17px của phần còn lại của web).
   · line-height 1.85 — thoáng hơn 1.7 của body, vì đây là văn bản dài.
   -------------------------------------------------------------------------- */
.article { max-width: 680px; margin-inline: auto; }
/* Ảnh/khối rộng hơn cột chữ một chút — vẫn nằm trong container, không tràn */
.article-wide { max-width: 860px; margin-inline: auto; }

/* Tiêu đề bài: nhỏ hơn H1 của hero (36→60px). Trong cột chữ 680px, 60px là quá to —
   xuống 30→44px thì tiêu đề dài vẫn gọn 2 dòng, không vỡ nhịp. */
.article > h1 {
  font-size: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  line-height: 1.15;
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-4);
  margin-top: var(--space-6);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.article__meta li { display: flex; align-items: center; }
.article__meta li + li::before {
  content: "·";
  margin-right: var(--space-4);
  color: var(--text-muted);
}
.article__meta strong { color: var(--text); font-weight: 600; }

/* Thân bài — selector .article__body p (0,2,1) thắng selector `p` (0,0,1) trong reset,
   nên cỡ chữ ở đây đè được var(--fs-body). Ghi clamp TƯỜNG MINH: 17px → 19px. */
.article__body {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
  line-height: 1.85;
  color: var(--text);
}
.article__body p,
.article__body li {
  font-size: inherit;
  line-height: inherit;
}
/* Nhịp dọc: mọi anh em kề nhau cách đều; tiêu đề thì thở rộng hơn */
.article__body > * + * { margin-top: var(--space-6); }
.article__body > h2 { margin-top: var(--space-10); }
.article__body > h3 { margin-top: var(--space-8); }
.article__body > .pull-quote,
.article__body > figure { margin-top: var(--space-9); }
.article__body > figure + * { margin-top: var(--space-9); }

.article__body h2 {
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);   /* 22 → 28px */
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.article__body h3 {
  font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.3125rem); /* 19 → 21px */
  line-height: 1.35;
  font-weight: 600;
}
.article__body strong { font-weight: 600; }

/* Danh sách trong bài — dấu gạch ngang gold (chữ ký 3A), KHÔNG chấm tròn */
.article__body ul { display: flex; flex-direction: column; gap: var(--space-4); }
.article__body ul li {
  position: relative;
  padding-left: var(--space-7);
}
.article__body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 14px;
  height: 1px;
  background: var(--gold);
}

/* Trích dẫn giữa bài — dùng lại .pull-quote, chỉ nới bề rộng cho vừa cột chữ */
.article__body .pull-quote { max-width: none; }

/* Ảnh trong bài + chú thích ảnh */
.article__body figure { margin-inline: 0; }
.article__body figcaption,
.figcaption {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-muted);
}

/* ---- Mục lục ---- */
.toc {
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius-sm);
  background: var(--card);
}
.toc__title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted-gold);
}
.toc__list {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-2);
}
.toc__list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-standard);
}
.toc__list a:hover, .toc__list a:focus-visible { color: var(--gold); }

/* Chân bài — chia sẻ / quay lại */
.article__foot {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  font-size: var(--fs-small);
  color: var(--text-muted);
}


/* --------------------------------------------------------------------------
   36.3 TRANG 404 — Ô TÌM KIẾM. Input giữ nền tối #1E2028 + chữ trắng (16.3:1)
   như mọi form khác. (.error-code đã có sẵn ở mục 34 phía trên — không lặp lại.)
   -------------------------------------------------------------------------- */
.search-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  max-width: 520px;
  margin-top: var(--space-6);
}
.search-row input { flex: 1 1 220px; min-width: 0; }
.search-row .btn { flex: 0 0 auto; }
@media (max-width: 479px) {
  .search-row .btn { flex: 1 1 100%; }
}
/* 🔴 BẮT ĐƯỢC KHI TỰ QA: placeholder mặc định rgba(160,152,128,0.6) trên nền ô #1E2028
   chỉ đạt 2.9:1 — chữ gợi ý cũng là CHỮ, phải đạt AA. Ép về đúng --text-muted (#A09880)
   = 5.7:1 trên #1E2028. Chỉ áp cho ô tìm kiếm (nơi duy nhất dùng placeholder). */
.search-row input::placeholder { color: var(--text-muted); opacity: 1; }
.search-note {
  display: none;
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  color: var(--muted-gold);
}
.search-note.is-shown { display: block; }


/* --------------------------------------------------------------------------
   36.4 LINK TRONG .svc-list — dùng cho danh sách "về các trang chính" (404)
   và "trong lúc chờ thì đọc gì" (Cảm ơn). Chữ trắng, hover gold.
   (.svc-list gốc chỉ chứa chữ thường — thêm rule này không đụng trang cũ.)
   -------------------------------------------------------------------------- */
.svc-list a {
  color: var(--text);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-standard);
}
.svc-list a:hover, .svc-list a:focus-visible { color: var(--gold); }

/* Biến thể "danh sách liên kết" — vùng bấm cao ≥44px (ngón cái bấm được trên điện thoại).
   Dấu gạch đầu dòng canh giữa theo chiều cao dòng, không lệch lên trên. */
.svc-list--links li { font-size: var(--fs-body); }
.svc-list--links a { display: flex; align-items: center; min-height: 44px; }
.svc-list--links li::before { top: 50%; transform: translateY(-50%); }
/* Trên nền trắng: gold làm chữ chỉ 2.2:1 → hover giữ chữ tối + gạch chân làm tín hiệu */
.section-light .svc-list a { color: var(--text); }
.section-light .svc-list a:hover,
.section-light .svc-list a:focus-visible { color: var(--text); text-decoration: underline; }