/* Token wiki — nhãn MCA (mcastar.com). Màu lấy từ landing/assets/site.css, đổi sang OKLCH (cùng màu);
   phông Inter như trang chủ. Nền sáng, nhấn tím; nút đặc màu tím thay cho gradient tím → chàm của landing.
   Tương phản (WCAG): chữ 9,3:1 trên nền · chữ phụ 4,5:1 trên nền, 4,8:1 trên thẻ · chữ trắng trên nút 5,6:1
   · vòng focus 5,3:1 trên nền · chữ trong ô ảnh tối 7,0:1.
   Hallmark · genre: modern-minimal · theme: mcastar (landing/assets/site.css), khoá theo nhãn */
:root {
  color-scheme: light;

  /* mặt nền: nền trang → thẻ → thẻ được chọn */
  --color-paper:   oklch(98.1% 0.005 248);   /* #f6f9fc */
  --color-paper-2: oklch(99.6% 0.003 265);   /* gần #ffffff */
  --color-paper-3: oklch(95.8% 0.020 280);   /* #eef0ff */
  --color-rule:    oklch(92.8% 0.006 265);   /* #e5e7eb */
  --color-rule-2:  oklch(89.7% 0.014 268);   /* #d9dde7 */

  /* chữ */
  --color-text:    oklch(38.8% 0.051 276);   /* #3d4260 */
  --color-heading: oklch(24.2% 0.064 279);   /* #1a1b3d */
  --color-muted:   oklch(55.5% 0.049 276);   /* #6b7190 */

  /* nhấn */
  --color-accent:        oklch(54.4% 0.253 286);  /* #6e40f8 — chấm, viền, gạch chân */
  --color-accent-strong: oklch(54.4% 0.253 286);  /* nền nút */
  --color-accent-hover:  oklch(48.6% 0.244 284);  /* #5a2fe0 */
  --color-accent-ink:    oklch(99.6% 0.003 265);  /* chữ trên nút tím */
  --color-focus:         oklch(54.4% 0.253 286);  /* = nhấn: còn làm màu chữ (nút viền khi rê, «Đã chép») nên cần ≥ 4,5:1 —
                                                     #6361ff của landing chỉ 4,25:1 trên nền */

  /* ô ảnh tĩnh Douyin (ảnh có nền tối sẵn) — giữ khung tối như khung xem video */
  --color-media:     oklch(20.2% 0.008 286);  /* #16161a */
  --color-media-ink: oklch(71.2% 0.013 286);

  /* lớp phủ và quầng nền */
  --color-scrim: oklch(24.2% 0.064 279 / 0.42);
  --bloom-1:     oklch(64% 0.216 294 / 0.10);    /* tím nhạt */
  --bloom-2:     oklch(70.3% 0.226 351 / 0.08);  /* hồng */
  --glitch: none;

  /* chữ — một họ Inter, đậm nhạt khác nhau */
  --font-display: "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.5625rem;
  --text-display: clamp(1.75rem, 2.2vw + 1rem, 2.6rem);

  /* 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;

  --radius-sm:   10px;
  --radius:      16px;
  --radius-pill: 999px;
  --wrap: 75rem;
  --nav-h: 64px;

  /* 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-modal:  400;
  --z-toast:  500;
}

/* Hallmark · macrostructure: Index-First — mọi màn là bảng (quà TikTok · quà Douyin · hiệu ứng theo chặng · cấp độ · hỏi đáp + thuật ngữ) · enrichment: none · nav: N1b (5 tab giữa thanh) · footer: Ft1
 * F3 Tabular knobs: columns=2–6, điện thoại còn 2–3 · rule density=every row · numbers=tabular
 * genre + theme: theo nhãn (khối token ở đầu tệp — wiki/build.py ghép vào)
 * tone: utilitarian · anchor hue: theo nhãn · audience: host TikTok LIVE người Việt + mod/khán giả · use: tra nhanh, không đọc giải thích
 * Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · mobile: pass (34, 49–53)
 * 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 { --wrap: 64rem; }   /* bảng đọc gọn hơn khung 75rem của bản thẻ */

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  overflow-x: clip;
  display: flex; flex-direction: column;
  margin: 0;
  min-height: 100dvh;
  background: var(--color-paper);
  color: var(--color-text);
  font: 400 var(--text-base)/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; color: var(--color-heading); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; min-width: 0; }
h1 { font-family: var(--font-display); letter-spacing: -0.02em; }
p { margin: 0; }
button { font: inherit; color: inherit; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: max(var(--space-md), env(safe-area-inset-left)); }
@media (min-width: 40rem) { .wrap { padding-inline: var(--space-lg); } }

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

/* ── nút ───────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 44px; padding: 0 var(--space-md);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font: 600 var(--text-sm)/1 var(--font-body);
  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--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.5; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--color-accent-hover); }
  .btn--ghost:hover { border-color: var(--color-focus); color: var(--color-focus); }
}
.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); } }
.linkbtn {
  padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--color-heading); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
  font-variant-numeric: tabular-nums;
}
.linkbtn:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .linkbtn:hover { color: var(--color-accent); } }

/* ── thanh trên (N1b: thương hiệu · 5 tab · 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);
}
.brand { grid-area: brand; display: inline-flex; align-items: center; gap: var(--space-xs); min-width: 0; }
.brand img { width: 28px; height: 28px; flex: none; }
.brand__word {
  font: 700 var(--text-md)/1 var(--font-display); letter-spacing: -0.02em; white-space: nowrap;
  color: var(--color-heading); text-shadow: var(--glitch);
}
.brand__sub { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.tabs {
  grid-area: tabs; display: flex; justify-content: center; gap: var(--space-3xs); 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-sm);
  white-space: nowrap; font-weight: 500; color: var(--color-text);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.tabs a[aria-current="page"] { color: var(--color-heading); border-bottom-color: var(--color-accent); }
.tabs a:active { transform: translateY(1px); }
.nav__cta { grid-area: cta; }
@media (hover: hover) and (pointer: fine) { .tabs a:hover { color: var(--color-heading); } }
@media (max-width: 47.99rem) { /* hai hàng: thương hiệu + nút, rồi dải tab cuộn ngang */
  :root { --nav-h: 101px; }
  .nav__inner { height: auto; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 56px 44px; grid-template-areas: "brand cta" "tabs tabs"; }
  .tabs { justify-content: flex-start; margin-inline: calc(-1 * var(--space-md)); padding-inline: var(--space-xs); }
  .tabs a { padding: 0 var(--space-xs); }
}
@media (max-width: 39.99rem) { .brand__sub { display: none; } }
@media (max-width: 22.5rem) { .brand__word { font-size: var(--text-base); } .nav__cta { padding-inline: var(--space-sm); } }

/* ── đầu mỗi màn: tên + một dòng số liệu ───────────────── */
.loading { padding-block: var(--space-xl); color: var(--color-muted); }
.phead { display: grid; gap: var(--space-2xs); padding-block: var(--space-lg) var(--space-md); }
.phead h1 { font-size: var(--text-lg); }
.phead p { color: var(--color-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.th2 { margin: var(--space-xl) 0 var(--space-sm); font-size: var(--text-md); }
.phead + .th2 { margin-top: var(--space-xs); }

/* ── ô lọc + chip ───────────────────────────────── */
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.find {
  display: flex; align-items: center; gap: var(--space-xs);
  flex: 1 1 16rem; max-width: 26rem; 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-sm);
  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); flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2xs); flex: none;
  min-height: 40px; padding: 0 var(--space-sm);
  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;
  transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.chip[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-heading); background: var(--color-paper-2); }
.chip[aria-pressed="true"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }
.chip:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: var(--color-muted); } }

/* ── bảng ───────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.tbl th, .tbl td {
  padding: var(--space-xs) var(--space-sm); text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--color-rule); overflow-wrap: anywhere;
}
.tbl thead th { color: var(--color-muted); font-weight: 600; white-space: nowrap; overflow-wrap: normal; border-bottom-color: var(--color-rule-2); }
.tbl tbody th { color: var(--color-heading); font-weight: 600; }
.tbl tr { scroll-margin-top: calc(var(--nav-h) + var(--space-2xl)); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; }
.tbl td.num { color: var(--color-heading); font-weight: 600; }
.tbl .mid { text-align: center; }
.tbl .pic { width: 1%; }
.tbl tr.grp th {
  padding-top: var(--space-lg); color: var(--color-heading); font-size: var(--text-base); font-weight: 700;
  border-bottom-color: var(--color-rule-2);
}
.tbl tr.is-hit > * { background: var(--color-paper-2); }   /* paper-3 làm chữ phụ của nhãn sáng còn 4,2:1 */
.tbl tr.is-hit > :first-child { box-shadow: inset 3px 0 0 var(--color-accent); }
@media (min-width: 48rem) {
  .tbl thead th {
    position: sticky; top: var(--nav-h); z-index: var(--z-raised);
    background: var(--color-paper); box-shadow: inset 0 -1px 0 var(--color-rule-2);
  }
}
@media (hover: hover) and (pointer: fine) { .tbl tbody tr:not(.grp):hover > * { background: var(--color-paper-2); } }

.sortb {
  display: inline-flex; align-items: center; gap: var(--space-3xs); min-height: 32px; padding: 0;
  background: none; border: 0; color: inherit; font-weight: 600; cursor: pointer;
}
.sortb__i { width: 14px; height: 14px; flex: none; }
.sortb__i path { opacity: 0.45; }
th[aria-sort] .sortb { color: var(--color-heading); }
th[aria-sort] .sortb__i { color: var(--color-accent); }
th[aria-sort="descending"] .sortb__i .dn, th[aria-sort="ascending"] .sortb__i .up { opacity: 1; }
th[aria-sort="descending"] .sortb__i .up, th[aria-sort="ascending"] .sortb__i .dn { opacity: 0; }
.sortb:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .sortb:hover { color: var(--color-heading); } }

.gname { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.gname img { width: 32px; height: 32px; max-width: none; flex: none; object-fit: contain; }
.gname span { color: var(--color-heading); font-weight: 500; }
.tname { display: block; color: var(--color-heading); font-weight: 500; }
.tsub { display: block; margin-top: var(--space-3xs); color: var(--color-muted); font-size: var(--text-xs); font-weight: 400; }
.yes { display: inline-grid; place-items: center; color: var(--color-accent); }
.yes svg { width: 18px; height: 18px; }

.thumb {
  display: block; padding: 0; border: 0; border-radius: 6px; overflow: hidden;
  background: var(--color-media); cursor: zoom-in;
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.thumb img { max-width: none; object-fit: cover; }   /* không để ô bảng bóp ảnh nhỏ lại */
.thumb--tall img { width: 48px; height: 64px; }
.thumb--wide img { width: 72px; height: 47px; }
.thumb--none { display: grid; place-items: center; width: 48px; height: 47px; color: var(--color-media-ink); cursor: default; }
.thumb:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .thumb:not(.thumb--none):hover { box-shadow: 0 0 0 2px var(--color-rule-2); } }

/* nội dung trong ô */
.plain { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3xs); }
.list { color: var(--color-text); }
.tbl td.tt { color: var(--color-muted); }
@media (min-width: 40rem) {
  .tbl--stack tbody th { width: 34%; }
  .tbl--lv tbody th { width: 24%; }
}
.steps { margin: 0; padding: 0; list-style: none; line-height: 1.7; }   /* chảy như một câu, xuống dòng tự nhiên */
.steps li { display: inline; color: var(--color-heading); font-weight: 500; }
.steps li + li::before { content: " → "; color: var(--color-muted); font-weight: 400; }
.steps small { color: var(--color-muted); font-size: var(--text-xs); font-weight: 400; }
.steps img { display: inline-block; max-width: none; width: 20px; height: 20px; margin-right: var(--space-3xs); vertical-align: -4px; }
.ladder { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.ladder li { display: grid; gap: var(--space-3xs); justify-items: start; max-width: 72px; }
.ladder span { color: var(--color-heading); font-size: var(--text-xs); font-weight: 500; line-height: 1.3; }
.more { margin-top: var(--space-2xs); font-weight: 400; }
.more summary {
  display: inline-flex; align-items: center; min-height: 32px; cursor: pointer;
  color: var(--color-muted); font-size: var(--text-xs); text-decoration: underline; text-underline-offset: 3px;
}
.more ul { margin-top: var(--space-2xs); color: var(--color-text); font-size: var(--text-xs); }
.more ul li::before { content: "– "; color: var(--color-muted); }
@media (hover: hover) and (pointer: fine) { .more summary:hover { color: var(--color-heading); } }
.srcl { color: var(--color-text); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.srcl--plain { text-decoration: none; color: var(--color-muted); }
@media (hover: hover) and (pointer: fine) { a.srcl:hover { color: var(--color-heading); } }
.none { display: grid; gap: var(--space-sm); justify-items: start; padding: var(--space-lg) var(--space-sm); color: var(--color-muted); }
td.none { display: table-cell; }
.sentinel { height: 1px; }

/* điện thoại: bớt cột phụ, chữ phụ xuống dòng dưới tên */
.only-sm { display: none; }
@media (max-width: 39.99rem) {
  .tbl .opt { display: none; }
  .only-sm { display: block; }
  .tbl th, .tbl td { padding-inline: var(--space-xs); }
  .tbl th:first-child, .tbl td:first-child { padding-left: 0; }
  .tbl th:last-child, .tbl td:last-child { padding-right: 0; }
  /* hỏi đáp: câu hỏi trên, trả lời dưới */
  .tbl--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl--stack tr { display: grid; gap: var(--space-3xs); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
  .tbl--stack th, .tbl--stack td { padding: 0; border: 0; }
  .tbl--stack tr.grp { padding-top: var(--space-lg); border-bottom-color: var(--color-rule-2); }
  .tbl--stack tr.grp th { padding: 0; }
}

/* ── xem ảnh lớn ────────────────────────────── */
dialog { color: var(--color-text); }
dialog::backdrop { background: var(--color-scrim); }
.viewer {
  width: min(26rem, calc(100% - 2 * var(--space-md))); max-width: none; max-height: calc(100dvh - 2 * var(--space-md));
  padding: var(--space-sm) var(--space-md) var(--space-md);
  background: var(--color-paper-2); border: 1px solid var(--color-rule-2); border-radius: var(--radius);
  overflow: auto;
}
.viewer[open] { display: grid; gap: var(--space-sm); 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-xs)); }
.viewer img { width: 100%; height: auto; max-height: 70dvh; object-fit: contain; border-radius: var(--radius-sm); background: var(--color-media); }
.viewer__cap { color: var(--color-heading); font-weight: 600; text-align: center; }

/* ── 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; }
  .viewer[open] { animation-name: viewer-fade !important; }
  @keyframes viewer-fade { from { opacity: 0; } }
}