/* Vỏ nhãn Tikaholic — trang chủ tikaholic.com (vi + en + Bảo mật + Điều khoản) và tikaholic.com/wiki.
   Hệ chung: design/DESIGN.md. Tệp này CHỈ đổi giá trị; tên biến giống hệt tệp vỏ của nhãn còn lại.
   Màu lấy từ ui/brands/tikaholic/DESIGN.md (logo mắt đen viền lệch cyan / đỏ), đổi sang OKLCH cùng màu.
   Xám lạnh theo nhãn (hue 286). Đỏ 19 là màu nhấn; cyan 200 là màu tín hiệu (dấu ✓, «Miễn phí», vòng focus)
   và bóng lệch màu của chữ thương hiệu.
   Tương phản (WCAG): chữ 15,3:1 · chữ phụ 7,6:1 trên nền · chữ trắng trên nút đỏ 4,9:1 · cyan 13,7:1. */
:root {
  color-scheme: dark;

  /* mặt nền: nền trang → thẻ → thẻ nổi */
  --color-paper:   oklch(15.9% 0.005 286);   /* #0d0d0d */
  --color-paper-2: oklch(20.2% 0.008 286);   /* #16161a */
  --color-paper-3: oklch(23.3% 0.010 286);   /* #1d1d22 */
  --color-rule:    oklch(27.1% 0.009 286);   /* #26262b */
  --color-rule-2:  oklch(32.8% 0.012 286);   /* #34343b */
  --color-band:    oklch(17.6% 0.006 286);   /* dải nền xen kẽ giữa các mục (#111114) */

  /* chữ */
  --color-text:    oklch(87.1% 0.005 286);   /* #d4d4d8 */
  --color-heading: oklch(98% 0.005 286);
  --color-muted:   oklch(71.2% 0.013 286);   /* #a1a1aa */
  --color-dim:     oklch(44% 0.012 286);     /* dấu «—» ở ô không có (#52525b) */

  /* nhấn + tín hiệu */
  --color-accent:        oklch(63.8% 0.247 19);   /* #fe1a4c — viền, chấm, chữ nhấn lớn */
  --color-accent-strong: oklch(57.8% 0.226 19);   /* #e0103f — nền nút chữ trắng */
  --color-accent-hover:  oklch(51.9% 0.203 19);   /* #c20d37 */
  --color-accent-ink:    oklch(98% 0.005 286);    /* chữ trên nền đỏ */
  --color-signal:        oklch(86.8% 0.148 200);  /* #00f0fa — ✓, «Miễn phí», «Không giới hạn» */
  --color-signal-soft:   oklch(86.8% 0.148 200 / 0.12);
  --color-focus:         oklch(86.8% 0.148 200);
  --color-error:         oklch(78% 0.12 10);      /* #ff8fa6 — chữ lỗi trên nền tối */

  /* thanh đầu nổi: viên trắng trên nền đen (đối tác 14/10/2026: «để nổi bật được logo») */
  --nav-bg:    oklch(99% 0.002 286 / 0.94);
  --nav-ink:   oklch(15.9% 0.005 286);
  --nav-text:  oklch(37% 0.012 286);   /* #3f3f46 — 10,4:1 trên trắng */
  --nav-rule:  oklch(91.9% 0.004 286);
  --nav-focus: oklch(52% 0.09 200);    /* teal #007c80 — cyan trên trắng chỉ 1,4:1 */
  --nav-shadow: 0 10px 30px -12px oklch(0% 0 0 / 0.6);

  /* màu nhấn của chế độ Sân Khấu trong dải năm chế độ chơi (cyan của nhãn); bốn chế độ kia dùng màu widget chung */
  --tone-stage: oklch(86.8% 0.148 200);

  /* ô ảnh (ảnh widget có nền tối sẵn) */
  --color-media:     oklch(19% 0.03 278);     /* #14152e */
  --color-media-ink: oklch(71.2% 0.013 286);

  /* lớp phủ, quầng nền, bóng lệch màu — chỉ là biến thể trong suốt của màu nhãn */
  --color-scrim: oklch(10% 0.005 286 / 0.72);
  --bloom-1: oklch(86.8% 0.148 200 / 0.12);
  --bloom-2: oklch(63.8% 0.247 19 / 0.16);
  /* chữ «Tikaholic»: viền lệch màu MẢNH (~5% cỡ chữ) như logo gốc — đối tác 17/10: bản 2px nhức mắt trên nền trắng */
  --glitch: -0.05em -0.025em 0 var(--color-signal), 0.05em 0.025em 0 var(--color-accent);
  --shadow-lift: 0 24px 64px -24px oklch(0% 0 0 / 0.7);

  /* chữ — hai họ, đều có dấu tiếng Việt. Unbounded rất rộng: tiêu đề nhỏ hơn nhãn kia một nấc. */
  --font-display: "Unbounded", "Be Vietnam Pro", system-ui, sans-serif;
  --font-body:    "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-weight: 700;
  --display-track:  -0.02em;
  --text-hero:  clamp(1.75rem, 1.2vw + 1.2rem, 2.375rem);
  --text-h2:    clamp(1.375rem, 0.9vw + 1rem, 1.875rem);
  --text-close: clamp(1.75rem, 2.6vw + 0.75rem, 3rem);
}

/* Hallmark · design-system: design/DESIGN.md · designed-as-app (trang công khai hai nhãn)
 * Lõi chung của trang chủ + trang Bảo mật / Điều khoản (cả hai nhãn) và wiki: thang đo, nền, chữ thương
 * hiệu, nút, thanh nổi, chân trang, trang văn bản, nút liên hệ nổi. Màu và phông ở design/tokens/<nhãn>.css.
 * KHÔNG nhắc tên nhãn nào trong tệp này — cùng một bản đi lên cả hai trang.
 */
:root {
  /* khoảng cách — thang 4pt */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8.5rem;

  /* chữ — tỉ lệ 1,25 từ 16px; tiêu đề lớn theo nhãn (--text-hero / --text-h2 / --text-close) */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5625rem;

  --radius-sm:   10px;
  --radius:      16px;
  --radius-lg:   24px;
  --radius-pill: 999px;
  --wrap: 75rem;
  --gutter: var(--space-lg);
  --nav-clear: 96px;          /* chỗ chừa cho thanh nổi ở đầu trang */

  /* chuyển động */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* lớp chồng */
  --z-base:   1;
  --z-raised: 10;
  --z-sticky: 200;
  --z-float:  300;
  --z-modal:  400;
  --z-toast:  500;

  /* màu riêng của dịch vụ khác — giữ đúng nhận diện của họ */
  --zalo: oklch(53% 0.22 262);     /* #0068ff */
  --call: oklch(62% 0.17 149);     /* #16a34a */
  --qr-paper: oklch(99.5% 0 0);    /* mã QR cần nền trắng để máy quét đọc */
  --qr-ink:   oklch(15.9% 0.005 286);  /* chữ trên ô trắng ấy (địa chỉ email, số điện thoại) */
}

/* ── nền ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-clear);
  -webkit-text-size-adjust: 100%;
}
body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-text);
  font: 400 var(--text-base)/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; color: var(--color-heading); line-height: 1.2; overflow-wrap: anywhere; min-width: 0; }
h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  text-wrap: balance;
}
p { margin: 0; }
button { font: inherit; color: inherit; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
@media (max-width: 560px) { :root { --gutter: var(--space-md); } }

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ── chữ thương hiệu: logo + tên (bóng lệch màu chỉ ở đây — DESIGN.md) ── */
.brand {
  display: inline-flex; align-items: center; gap: var(--space-xs); min-width: 0;
  color: var(--color-heading); text-decoration: none;
}
.brand img { width: 30px; height: 30px; flex: none; }
.brand__word {
  font: var(--display-weight) var(--text-lg)/1 var(--font-display);
  letter-spacing: var(--display-track); white-space: nowrap;
  text-shadow: var(--glitch);
}
.brand__sub { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
/* tên + dòng phụ xếp chồng (vd «Multi-Creator Assistant» dưới tên nhãn) */
.brand__name { display: grid; gap: var(--space-3xs); line-height: 1; }
.brand__name .brand__sub { font-size: 10px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.pill .brand__name .brand__sub { color: var(--nav-text); }

/* ── nút (8 trạng thái: thường · rê · focus · bấm · tắt · đang gửi · lỗi · xong) ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 44px; padding: 0 var(--space-lg);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font: 600 var(--text-sm)/1 var(--font-body);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.btn--lg { min-height: 52px; padding: 0 var(--space-xl); font-size: var(--text-base); }
.btn--sm { min-height: 40px; padding: 0 var(--space-md); }
.btn--block { width: 100%; }
.btn--primary { background: var(--color-accent-strong); color: var(--color-accent-ink); }
.btn--ghost { background: transparent; color: var(--color-heading); border-color: var(--color-rule-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; opacity: 0.8; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--color-accent-hover); }
  .btn--ghost:hover { border-color: var(--color-heading); }
}

/* ── thanh nổi (N5 viên bo tròn, tách khỏi mép, rộng theo nội dung) ── */
.topnav {
  position: fixed; top: var(--space-sm); left: 50%; z-index: var(--z-sticky);
  transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 2 * var(--space-sm));
}
.pill {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-md);
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--nav-rule); border-radius: var(--radius-pill);
  box-shadow: var(--nav-shadow);
  color: var(--nav-text);
}
.pill .brand { flex-shrink: 0; color: var(--nav-ink); }   /* không để nút bên phải ép mất chữ thương hiệu */
.pill .brand img { width: 28px; height: 28px; }
.pill .brand__word { font-size: var(--text-md); }
.pill__links { display: flex; gap: var(--space-3xs); margin: 0; padding: 0; list-style: none; }
.pill__links a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-sm);
  border-radius: var(--radius-pill);
  color: var(--nav-text); font-size: var(--text-sm); font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.pill__links a[aria-current="true"] { color: var(--nav-ink); background: color-mix(in oklch, var(--nav-ink) 7%, transparent); }
.pill__end { display: flex; align-items: center; gap: var(--space-2xs); }
.pill .btn--ghost { color: var(--nav-ink); border-color: var(--nav-rule); }
.pill :focus-visible { outline-color: var(--nav-focus); }
.pill__links a:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .pill__links a:hover { color: var(--nav-ink); }
  .pill .btn--ghost:hover { border-color: var(--nav-ink); }
}
/* VI | EN */
.lang { display: inline-flex; padding: var(--space-3xs); border: 1px solid var(--nav-rule); border-radius: var(--radius-pill); }
.lang a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 32px;
  border-radius: var(--radius-pill);
  color: var(--nav-text); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-decoration: none;
}
.lang a[aria-current="true"] { background: var(--nav-ink); color: var(--nav-bg); }
@media (max-width: 1020px) { .pill__links { display: none; } }
@media (max-width: 560px) {
  .pill { gap: var(--space-xs); padding-left: var(--space-sm); }
  .pill .btn--ghost { display: none; }
  .pill .brand__word { font-size: var(--text-base); }
  .pill .btn--primary { padding-inline: var(--space-sm); }
}
@media (max-width: 380px) { .pill .brand__word, .pill .brand__sub { display: none; } }

/* ── mục: đầu mục + dải nền xen kẽ ── */
.section { padding-block: var(--space-3xl); }
.section--band { background: var(--color-band); border-block: 1px solid var(--color-rule); }
.section--band + .section--band { border-top: 0; }
.head { display: grid; gap: var(--space-md); max-width: 46rem; margin-bottom: var(--space-2xl); }
.head h2 { font-size: var(--text-h2); line-height: 1.18; }
.head p { color: var(--color-muted); font-size: var(--text-md); }
.head--center { margin-inline: auto; text-align: center; justify-items: center; }
@media (max-width: 900px) { .section { padding-block: var(--space-2xl); } .head { margin-bottom: var(--space-xl); } }

/* ── chân trang (Ft5: một câu chốt, dưới là thương hiệu · link · liên hệ · ©) ── */
.close { padding-block: var(--space-3xl) var(--space-xl); border-top: 1px solid var(--color-rule); }
.close__line {
  max-width: 20ch; margin-bottom: var(--space-2xl);
  color: var(--color-heading);
  font: var(--display-weight) var(--text-close)/1.08 var(--font-display);
  letter-spacing: var(--display-track); text-wrap: balance;
}
.close__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl);
  padding-top: var(--space-lg); border-top: 1px solid var(--color-rule);
  color: var(--color-muted); font-size: var(--text-sm);
}
.close__links { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); margin-right: auto; }
.close__links a {
  display: inline-flex; align-items: center; min-height: 40px;
  color: var(--color-text); text-decoration: none; white-space: nowrap;
}
.close__contact { display: flex; align-items: center; gap: var(--space-md); }
.close__qr { flex: none; width: 84px; height: 84px; padding: var(--space-2xs); border-radius: var(--radius-sm); background: var(--qr-paper); }
.close__mail {
  display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 40px;
  color: var(--color-heading); font-weight: 600; text-decoration: none; overflow-wrap: anywhere;
}
.close__mail svg { flex: none; }
@media (hover: hover) and (pointer: fine) {
  .close__links a:hover, .close__mail:hover { color: var(--color-heading); text-decoration: underline; text-underline-offset: 4px; }
}

/* ── trang văn bản: Bảo mật / Điều khoản ── */
.doc { padding-block: calc(var(--nav-clear) + var(--space-xl)) var(--space-3xl); }
.doc__wrap { max-width: 46rem; }
.doc h1 { font-size: var(--text-h2); margin-bottom: var(--space-xs); }
.doc h2 { margin: var(--space-xl) 0 var(--space-sm); font: 700 var(--text-lg)/1.3 var(--font-body); letter-spacing: 0; }
.doc p, .doc li { line-height: 1.7; color: var(--color-text); max-width: 68ch; }
.doc p + p { margin-top: var(--space-sm); }
.doc ul { padding-left: var(--space-lg); }
.doc li { margin: var(--space-2xs) 0; }
.doc a { color: var(--color-heading); text-decoration: underline; text-underline-offset: 3px; }
.doc code { font-size: 0.9em; background: var(--color-paper-3); padding: var(--space-3xs) var(--space-2xs); border-radius: var(--space-2xs); }
.doc hr { border: 0; border-top: 1px solid var(--color-rule); margin: var(--space-3xl) 0; }
.doc__date { color: var(--color-muted); font-size: var(--text-sm); }

/* ── nút liên hệ nổi: Zalo · email · gọi (đối tác 15–16/10/2026) ──
   Cuộn tới đâu cũng bấm được. Zalo mở bằng link của mã QR; máy có chuột rê vào hiện mã QR / địa chỉ. */
.float-contact {
  position: fixed; right: var(--space-lg); bottom: var(--space-lg); z-index: var(--z-float);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.fc {
  position: relative; isolation: isolate; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%; color: var(--color-accent-ink); text-decoration: none;
  box-shadow: var(--shadow-lift); transition: transform var(--dur-micro) var(--ease-out);
}
.fc--zalo { background: var(--zalo); }
.fc--mail { background: var(--color-accent-strong); }
.fc--call { background: var(--call); }
.fc::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: inherit;
  animation: fc-ring 2.6s var(--ease-out) infinite;
}
.fc--mail::before { animation-delay: 0.87s; }
.fc--call::before { animation-delay: 1.73s; }
@keyframes fc-ring {
  0% { transform: scale(1); opacity: 0.5; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}
.fc:active { transform: translateY(1px); }
.fc-pop {
  position: absolute; right: calc(100% + var(--space-sm)); top: 50%; transform: translateY(-50%);
  width: max-content; padding: var(--space-xs); border-radius: var(--radius-sm);
  background: var(--qr-paper); box-shadow: var(--shadow-lift);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-short) var(--ease-out), visibility var(--dur-short);
}
.fc-pop img { display: block; width: 140px; max-width: none; height: 140px; }
.fc-pop--text { padding: var(--space-xs) var(--space-md); color: var(--qr-ink); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .fc:hover { transform: translateY(-2px); }
  .fc:hover .fc-pop, .fc:focus-visible .fc-pop { opacity: 1; visibility: visible; }
}
@media (max-width: 560px) {
  .float-contact { right: var(--space-md); bottom: var(--space-md); gap: var(--space-xs); }
  .fc { width: 48px; height: 48px; }
  .fc--mail { display: none; }   /* điện thoại: giữ Zalo + gọi, bớt một nút che nội dung; email vẫn ở ô liên hệ */
}

/* ── hiện dần khi cuộn tới: chỉ mờ → rõ (site.js gắn .js lên <html>; không JS thì hiện sẵn) ── */
.js .reveal { opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.js .reveal.in { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transition: none; }
  .btn, .fc, .pill__links a { transition: none; }
  .fc::before { animation: none; }
  .fc:hover { transform: none; }
}

/* Hallmark · design-system: design/DESIGN.md · designed-as-app · macrostructure: Catalogue — quà là lưới ảnh đồng cỡ
 * (TikTok chia dải theo mức giá), hiệu ứng = mục lục đứng yên + nhóm ảnh, cấp độ = hàng kẻ mảnh + chuỗi bậc thấp → cao,
 * hỏi đáp = câu hỏi gập mở + «Từ hay gặp» bên phải · enrichment: ảnh thật (icon quà, ảnh tĩnh hiệu ứng — không video)
 * · nav: N1b (5 thẻ giữa thanh, dính đầu trang) · footer: Ft1
 * Catalogue knobs: tiles=7/6/3 mỗi hàng ở 1440 · divider=dải mức giá kẻ mảnh · card link=xem ảnh lớn · reveal=none
 * genre + theme: theo nhãn — wiki/build.py ghép design/tokens/<nhãn>.css + design/core.css (nền, nút, chữ thương hiệu) trước tệp này
 * tone: utilitarian · audience: host TikTok LIVE người Việt + khán giả · use: tra giá quà, xem hình — chữ ít, không thuật ngữ kỹ thuật
 * Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4
 * contrast: pass (40–41) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · italic headers: none (38a)
 * Tệp này KHÔNG được nhắc tên nhãn nào: cùng một bản gửi lên cả hai trang chủ.
 */
:root { --nav-h: 64px; --tools-h: 68px; }   /* thanh lọc dính ngay dưới thanh trên */

body { display: flex; flex-direction: column; min-height: 100dvh; line-height: 1.55; }
main { flex: 1 0 auto; }
a { text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ── nút phụ ───────────────────────────────────── */
.iconbtn {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--color-text); cursor: pointer;
}
.iconbtn svg { width: 20px; height: 20px; }
.iconbtn:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .iconbtn:hover { border-color: var(--color-rule-2); color: var(--color-heading); } }

/* ── thanh trên (N1b: thương hiệu · 5 thẻ · nút) ─────────── */
.nav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--color-paper); border-bottom: 1px solid var(--color-rule);
}
.nav__inner {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand tabs cta";
  align-items: center; column-gap: var(--space-md); height: var(--nav-h);
}
.nav .brand { grid-area: brand; }
.nav .brand img { width: 28px; height: 28px; }
.tabs {
  grid-area: tabs; display: flex; justify-content: center; gap: var(--space-2xs); min-width: 0;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md);
  border-radius: var(--radius-pill); white-space: nowrap; font-weight: 500; color: var(--color-text);
  transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.tabs a[aria-current="page"] { color: var(--color-heading); background: var(--color-paper-3); font-weight: 600; }
.tabs a:active { transform: translateY(1px); }
.nav__cta { grid-area: cta; }
@media (hover: hover) and (pointer: fine) { .tabs a:not([aria-current]):hover { color: var(--color-heading); } }
@media (max-width: 47.99rem) { /* hai hàng: thương hiệu + nút, rồi dải thẻ cuộn ngang */
  :root { --nav-h: 104px; }
  .nav__inner { height: auto; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 56px 48px; grid-template-areas: "brand cta" "tabs tabs"; }
  .tabs { justify-content: flex-start; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--space-xs); }
}
@media (max-width: 39.99rem) { .brand__sub { display: none; } }

/* ── đầu mỗi màn ───────────────────────────────── */
.loading { padding-block: var(--space-xl); color: var(--color-muted); }
.phead { display: grid; gap: var(--space-2xs); padding-block: var(--space-xl) var(--space-md); }
.phead h1 { font-size: var(--text-h2); }
.phead p { color: var(--color-muted); font-variant-numeric: tabular-nums; }

/* ── thanh lọc quà TikTok (dính dưới thanh trên) ─────────── */
.tools {
  position: sticky; top: var(--nav-h); z-index: var(--z-raised);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm);
  margin-inline: calc(-1 * var(--gutter)); padding: var(--space-sm) var(--gutter);
  background: var(--color-paper); border-bottom: 1px solid var(--color-rule);
}
.find {
  display: flex; align-items: center; gap: var(--space-xs);
  flex: 1 1 14rem; max-width: 20rem; min-height: 44px; padding: 0 var(--space-sm);
  background: var(--color-paper-2); color: var(--color-muted);
  border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill);
  transition: border-color var(--dur-short) var(--ease-out);
}
.find svg { width: 18px; height: 18px; flex: none; }
.find input {
  flex: 1; min-width: 0; height: 42px; border: 0; background: transparent;
  color: var(--color-heading); font: 400 var(--text-base)/1 var(--font-body);
}
.find input::placeholder { color: var(--color-muted); }
.find input:focus-visible { outline: none; }
.find:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .find:hover { border-color: var(--color-muted); } }
.chips {
  display: flex; gap: var(--space-2xs); min-width: 0;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; min-height: 44px; padding: 0 var(--space-md);
  background: transparent; color: var(--color-text);
  border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 500; white-space: nowrap; cursor: pointer; font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.chip[aria-pressed="true"] { background: var(--color-heading); border-color: var(--color-heading); color: var(--color-paper); font-weight: 600; }
.chip:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .chip:not([aria-pressed="true"]):hover { border-color: var(--color-muted); color: var(--color-heading); } }
.sort { position: relative; display: inline-flex; }
.sort select {
  appearance: none; min-height: 44px; padding: 0 calc(var(--space-md) + 14px) 0 var(--space-md);
  background: transparent; color: var(--color-heading); border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill);
  font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer;
}
.sort::after {   /* mũi tên ▾ vẽ bằng viền, theo màu chữ */
  content: ""; position: absolute; right: var(--space-md); top: 50%; width: 6px; height: 6px; margin-top: -5px;
  border-right: 1.5px solid var(--color-muted); border-bottom: 1.5px solid var(--color-muted); transform: rotate(45deg); pointer-events: none;
}
@media (hover: hover) and (pointer: fine) { .sort select:hover { border-color: var(--color-muted); } }
@media (max-width: 47.99rem) { .tools { position: static; } }   /* điện thoại: thanh lọc cuộn theo trang, không giữ 1/3 màn */
.tools__n { margin-left: auto; color: var(--color-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── lưới ──────────────────────────────────────── */
.grid { display: grid; gap: var(--space-sm); }
.grid--gift { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.grid--flat { padding-top: var(--space-lg); }
.grid--tall { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-lg) var(--space-md); }
.grid--wide { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--space-lg) var(--space-md); }

/* dải mức giá: tên + số quà, kẻ mảnh phía trên */
/* dải ngoài màn hình bỏ qua lúc vẽ; chiều cao tạm ước theo số quà (--n từ render.js) ÷ số cột, để thanh cuộn không nhảy */
:root { --band-cols: 7; --band-row: 12.6rem; }
.band { padding-top: var(--space-lg); content-visibility: auto; contain-intrinsic-size: auto calc(var(--n, 60) / var(--band-cols) * var(--band-row) + 4rem); }
@media (max-width: 75rem) { :root { --band-cols: 5; } }
@media (max-width: 56rem) { :root { --band-cols: 4; } }
@media (max-width: 40rem) { :root { --band-cols: 2; --band-row: 13.4rem; } }
.band + .band { margin-top: var(--space-lg); }
.band__h {
  display: flex; align-items: baseline; gap: var(--space-xs); margin-bottom: var(--space-md);
  font: 600 var(--text-md)/1.3 var(--font-body); letter-spacing: 0; color: var(--color-heading);
}
.band__h span { color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ô quà TikTok: ảnh · tên · giá */
.gift {
  display: grid; justify-items: center; align-content: start; gap: var(--space-2xs); width: 100%; height: 100%;
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius);
  color: inherit; text-align: center; cursor: zoom-in;
  scroll-margin-top: calc(var(--nav-h) + var(--tools-h) + var(--space-lg));
  transition: border-color var(--dur-short) var(--ease-out);
}
.gift__pic { display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: var(--space-2xs); border-radius: var(--radius-sm); background: var(--color-paper-3); }
.gift__pic img { width: 72px; height: 72px; object-fit: contain; transition: transform var(--dur-short) var(--ease-out); }
.gift__name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em;
  color: var(--color-heading); font-size: var(--text-sm); font-weight: 600; line-height: 1.3;
}
.gift__price { color: var(--color-heading); font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.gift__price small { color: var(--color-muted); font-size: var(--text-xs); font-weight: 500; }
.gift:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .gift:hover { border-color: var(--color-muted); }
  .gift:hover .gift__pic img { transform: scale(1.08); }
}

/* thẻ ảnh (quà Douyin, hiệu ứng, bậc cấp): ảnh trên nền tối · tên dưới */
.card {
  display: grid; gap: var(--space-xs); width: 100%; padding: 0; background: none; border: 0;
  color: inherit; text-align: left; cursor: zoom-in;
  scroll-margin-top: calc(var(--nav-h) + var(--space-xl));
}
.card__pic {
  display: block; aspect-ratio: 400 / 260; overflow: hidden;
  background: var(--color-media); border: 1px solid var(--color-rule); border-radius: var(--radius);
}
.card__pic--tall { aspect-ratio: 3 / 4; }
.card__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-long) var(--ease-out); }
.card__name { color: var(--color-heading); font-size: var(--text-sm); font-weight: 600; line-height: 1.35; }
.card:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .card:hover .card__pic img { transform: scale(1.04); } }

.is-hit { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.card.is-hit { outline: none; }
.card.is-hit .card__pic { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.none { display: grid; gap: var(--space-sm); justify-items: start; padding: var(--space-xl) 0; color: var(--color-muted); }

/* ── hiệu ứng: mục lục đứng yên + nhóm ảnh ─────────────── */
.atlas { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
.atlas__index { position: sticky; top: calc(var(--nav-h) + var(--space-lg)); }
.atlas__index ol { display: grid; gap: var(--space-3xs); }
.atlas__index a {
  display: flex; align-items: center; min-height: 40px; padding: 0 var(--space-sm);
  border-radius: var(--radius-sm); color: var(--color-muted); font-weight: 500;
  transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.atlas__index a[aria-current="true"] { color: var(--color-heading); background: var(--color-paper-3); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .atlas__index a:hover { color: var(--color-heading); } }
.group { padding-block: var(--space-md) var(--space-xl); scroll-margin-top: calc(var(--nav-h) + var(--space-md)); }
.group + .group { padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
.group h2 { font-size: var(--text-xl); }
.group__how { max-width: 60ch; margin: var(--space-2xs) 0 var(--space-lg); color: var(--color-text); }
@media (max-width: 56rem) {
  .atlas { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .atlas__index { display: none; }
}

/* ── cấp độ: mỗi thang một hàng kẻ mảnh · chữ trái, chuỗi bậc phải ── */
.platform { padding-bottom: var(--space-xl); }
.platform__h { padding-block: var(--space-lg) var(--space-xs); font-size: var(--text-xl); }
.rung-row {
  display: grid; grid-template-columns: 19rem minmax(0, 1fr); gap: var(--space-2xl); align-items: start;
  padding-block: var(--space-xl); border-top: 1px solid var(--color-rule);
  scroll-margin-top: calc(var(--nav-h) + var(--space-md));
}
.rung-row.is-hit { outline: none; box-shadow: inset 3px 0 0 var(--color-accent); padding-left: var(--space-md); }
.rung-row__text { display: grid; gap: var(--space-2xs); }
.rung-row h3 { font-size: var(--text-lg); }
.rung-row__text > p { color: var(--color-text); }
.facts { display: grid; gap: var(--space-2xs); margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }
.facts li { padding-left: var(--space-md); text-indent: calc(-1 * var(--space-md)); }
.facts li::before { content: "–"; display: inline-block; width: var(--space-md); text-indent: 0; }
/* chuỗi bậc: mũi tên giữa hai bậc nằm trong khoảng cách, không vẽ khung quanh */
.steps, .ladder { display: grid; grid-auto-flow: column; justify-content: start; align-items: start; column-gap: var(--space-xl); }
.ladder { grid-auto-columns: minmax(0, 10rem); }
.steps > li, .ladder > li { position: relative; }
.steps > li + li::before, .ladder > li + li::before {
  content: "→"; position: absolute; left: calc(-1 * var(--space-xl)); width: var(--space-xl);
  color: var(--color-muted); text-align: center; line-height: 1;
}
.ladder > li + li::before { top: calc(50% - 1.2em); }
.steps > li + li::before { top: 50%; transform: translateY(-50%); }
.step {
  display: flex; align-items: center; gap: var(--space-xs); min-height: 56px; padding: var(--space-xs) var(--space-md);
  background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-sm);
}
.step img { width: 28px; height: 28px; flex: none; }
.step span { display: grid; }
.step b { color: var(--color-heading); font-weight: 600; white-space: nowrap; }
.step small { color: var(--color-muted); font-size: var(--text-xs); white-space: nowrap; }
.steps__gap { align-self: center; color: var(--color-muted); font-weight: 700; }
@media (max-width: 56rem) {
  .rung-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .steps, .ladder { overflow-x: auto; padding-bottom: var(--space-xs); }
}

/* ── hỏi đáp: câu hỏi gập mở · «Từ hay gặp» bên phải ───── */
.qa { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--space-2xl); align-items: start; }
.qa__list { border-top: 1px solid var(--color-rule); }
.ask { border-bottom: 1px solid var(--color-rule); scroll-margin-top: calc(var(--nav-h) + var(--space-lg)); }
.ask summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  min-height: 60px; padding-block: var(--space-sm); cursor: pointer; list-style: none;
  color: var(--color-heading); font-size: var(--text-md); font-weight: 600;
}
.ask summary::-webkit-details-marker { display: none; }
.ask summary::after {   /* dấu + xoay thành × khi mở */
  content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px;
  border: 1px solid var(--color-rule-2); border-radius: 50%; color: var(--color-muted); font-weight: 400;
  transition: transform var(--dur-short) var(--ease-out);
}
.ask[open] summary::after { transform: rotate(45deg); }
.ask__a { display: grid; gap: var(--space-xs); justify-items: start; max-width: 62ch; padding-bottom: var(--space-lg); color: var(--color-text); }
.ask.is-hit { outline: none; }
.ask.is-hit summary { color: var(--color-accent); }
.more { color: var(--color-heading); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .ask summary:hover::after { border-color: var(--color-muted); color: var(--color-heading); }
  .more:hover { color: var(--color-accent); }
}
.qa__terms {
  position: sticky; top: calc(var(--nav-h) + var(--space-lg));
  padding: var(--space-lg); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius);
}
.qa__terms h2 { margin-bottom: var(--space-sm); font-size: var(--text-lg); }
.qa__terms dl { margin: 0; display: grid; }
.qa__terms dl > div { padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); scroll-margin-top: calc(var(--nav-h) + var(--space-lg)); }
.qa__terms dl > div.is-hit { outline-offset: 0; }
.qa__terms dt { color: var(--color-heading); font-weight: 600; }
.qa__terms dt span { color: var(--color-muted); font-size: var(--text-xs); font-weight: 500; }
.qa__terms dd { margin: var(--space-3xs) 0 0; color: var(--color-muted); font-size: var(--text-sm); }
@media (max-width: 56rem) {
  .qa { grid-template-columns: minmax(0, 1fr); }
  .qa__terms { position: static; }
}

/* ── xem ảnh lớn ────────────────────────────── */
dialog { color: var(--color-text); }
dialog::backdrop { background: var(--color-scrim); }
.viewer {
  width: min(28rem, calc(100% - 2 * var(--space-md))); max-width: none; max-height: calc(100dvh - 2 * var(--space-md));
  padding: var(--space-sm) var(--space-lg) var(--space-lg);
  background: var(--color-paper-2); border: 1px solid var(--color-rule-2); border-radius: var(--radius-lg);
  overflow: auto;
}
.viewer[open] { display: grid; gap: var(--space-xs); justify-items: center; animation: viewer-in var(--dur-short) var(--ease-out); }
@keyframes viewer-in { from { opacity: 0; transform: scale(0.98); } }
.viewer__x { justify-self: end; margin-right: calc(-1 * var(--space-sm)); }
.viewer img { width: 100%; height: auto; max-height: 68dvh; object-fit: contain; border-radius: var(--radius); background: var(--color-media); }
.viewer--gift img { width: 12rem; height: 12rem; padding: var(--space-lg); background: var(--color-paper-3); }
.viewer__cap { margin-top: var(--space-xs); color: var(--color-heading); font-size: var(--text-md); font-weight: 600; text-align: center; }
.viewer__price { color: var(--color-heading); font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.viewer__price:empty { display: none; }

/* ── chân trang (Ft1: thương hiệu · một dòng · hai link) ─── */
.foot { margin-top: var(--space-2xl); border-top: 1px solid var(--color-rule); padding-block: var(--space-lg) max(var(--space-lg), env(safe-area-inset-bottom)); }
.foot__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); font-size: var(--text-sm); }
.foot__mark { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-muted); }
.foot__mark img { width: 20px; height: 20px; }
.foot__mark b { color: var(--color-heading); font-family: var(--font-display); font-weight: 700; }
.foot__note { flex: 1 1 16rem; color: var(--color-muted); }
.foot__links { display: flex; gap: var(--space-md); }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .foot__links a:hover { color: var(--color-heading); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 150ms !important; transition-duration: 150ms !important; }
  .gift:hover .gift__pic img, .card:hover .card__pic img { transform: none; }
  .viewer[open] { animation-name: viewer-fade !important; }
  @keyframes viewer-fade { from { opacity: 0; } }
}