/* Web thanh vien. Theo design-system/fam-api-team: MASTER.md (Minimalism & Swiss, IBM Plex Sans + JetBrains Mono)
   va pages/member-portal.md (bo cuc thanh ben, bang mau sang/toi, sua tuong phan nut chinh).
   13/10/2026 nguoi dung doi tong mau sang DO + VANG: do (--accent) = thuong hieu, nut chinh, link; vang (--gold) = mau
   nhan (eyebrow, danh dau chu, tem gia, nut trong dai CTA do); xanh la (--ok) tach rieng cho trang thai tot (truoc
   day dung chung mau thuong hieu xanh: doi sang do thi "Hoat dong / khop" thanh mau loi). */

:root {
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --surface-muted: #F1F5F9;
  --fg: #0F172A;
  --fg-muted: #475569;
  --border: #E2E8F0;
  --accent: #DC2626;
  --accent-hover: #B91C1C;
  --on-accent: #FFFFFF;
  --accent-text: #B91C1C;
  --accent-soft: #FEE2E2;
  --gold: #FACC15;
  --gold-hover: #EAB308;
  --on-gold: #422006;
  --gold-text: #A16207;
  --gold-soft: #FEF9C3;
  --mark: #FDE68A;
  --logo-text: #FDE047;
  --ok: #15803D;
  --ok-soft: #DCFCE7;
  --danger: #B91C1C;
  --danger-soft: #FEE2E2;
  --warn: #B45309;
  --warn-soft: #FEF3C7;
  --info: #1D4ED8;
  --info-soft: #DBEAFE;
  --ring: #0F172A;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);

  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px;
  --radius: 8px; --radius-lg: 12px;
  --z-nav: 40; --z-skip: 100;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #020617; --surface: #0E1223; --surface-muted: #1A1E2F; --fg: #F8FAFC; --fg-muted: #94A3B8;
    --border: #334155; --accent: #DC2626; --accent-hover: #B91C1C; --on-accent: #FFFFFF; --accent-text: #F87171;
    --accent-soft: #450A0A; --gold: #FACC15; --gold-hover: #EAB308; --on-gold: #422006; --gold-text: #FDE047;
    --gold-soft: #3A2E05; --mark: rgba(250, 204, 21, .22); --logo-text: #FDE047; --ok: #4ADE80; --ok-soft: #052E16;
    --danger: #F87171; --danger-soft: #3B0D0D; --warn: #FBBF24; --warn-soft: #3A2A05;
    --info: #93C5FD; --info-soft: #172554; --ring: #F8FAFC; --shadow-sm: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #020617; --surface: #0E1223; --surface-muted: #1A1E2F; --fg: #F8FAFC; --fg-muted: #94A3B8;
  --border: #334155; --accent: #DC2626; --accent-hover: #B91C1C; --on-accent: #FFFFFF; --accent-text: #F87171;
  --accent-soft: #450A0A; --gold: #FACC15; --gold-hover: #EAB308; --on-gold: #422006; --gold-text: #FDE047;
  --gold-soft: #3A2E05; --mark: rgba(250, 204, 21, .22); --logo-text: #FDE047; --ok: #4ADE80; --ok-soft: #052E16;
  --danger: #F87171; --danger-soft: #3B0D0D; --warn: #FBBF24; --warn-soft: #3A2A05;
  --info: #93C5FD; --info-soft: #172554; --ring: #F8FAFC; --shadow-sm: none; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--fg); font: 400 16px/1.6 var(--font-body); }
h1, h2, h3 { margin: 0; font-family: var(--font-mono); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: 1.625rem; }
h2 { font-size: 1.1875rem; }
h3 { font-size: 1.0625rem; }
p { margin: 0; }
a { color: var(--accent-text); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
code, kbd, .mono { font-family: var(--font-mono); font-size: .9em; }
b, strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
button { font: inherit; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--space-md); top: -60px; z-index: var(--z-skip); padding: 10px 14px; border-radius: var(--radius); background: var(--fg); color: var(--bg); font-weight: 600; }
.skip:focus { top: var(--space-md); }
.muted { color: var(--fg-muted); }
.small { font-size: .875rem; }
.nowrap { white-space: nowrap; }
.stack-xs { display: grid; gap: var(--space-xs); }
.stack-sm { display: grid; gap: var(--space-sm); }
.stack-md { display: grid; gap: var(--space-md); }
.no-js [data-js-only] { display: none !important; }

/* ---------------------------------------------------------------- khung trang */
.shell { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100dvh; }
.side { position: sticky; top: 0; z-index: var(--z-nav); background: var(--surface); border-bottom: 1px solid var(--border); }
.side-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 60px; padding: 8px var(--space-md); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font-family: var(--font-mono); font-weight: 600; }
/* logo: ngoi sao do 5 canh bo tron mui (SVG, macro ui.logo), chu AI vang dat dung tam sao (13/10/2026) */
.brand-mark { display: block; flex: none; width: 38px; height: 38px; overflow: visible; }
.brand-mark .brand-star { fill: var(--accent); stroke: var(--accent); stroke-width: 3.4; stroke-linejoin: round; }
.brand-mark .brand-ai { fill: var(--logo-text); font: 700 10px var(--font-mono); letter-spacing: 0; dominant-baseline: central; }
.menu-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--fg); font-weight: 600; cursor: pointer; }
.no-js .menu-btn { display: none; }
.nav { display: none; padding: 0 var(--space-sm) var(--space-md); }
.nav.open, .no-js .nav { display: block; }
.nav ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav a, .ghost-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--radius);
  background: none; color: var(--fg-muted); font-weight: 500; text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.nav a:hover, .ghost-btn:hover { background: var(--surface-muted); color: var(--fg); }
.nav a[aria-current="page"] { background: var(--surface-muted); color: var(--fg); box-shadow: inset 3px 0 0 var(--accent); }
.side-foot { display: grid; gap: 2px; margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--border); }
.side-foot form { margin: 0; }
.who { padding: 0 12px 6px; color: var(--fg-muted); font-size: .875rem; overflow-wrap: anywhere; }
.who b { color: var(--fg); }
.main { min-width: 0; padding: var(--space-lg) var(--space-md) var(--space-2xl); }
.main:focus { outline: none; }
.main-in { display: grid; gap: var(--space-lg); max-width: 1080px; margin: 0 auto; }
/* trang quan tri: bang nhieu cot, dung het chieu rong man hinh (chan o 1640px cho man rat rong) */
.shell-admin .main-in { max-width: 1640px; }

@media (min-width: 1024px) {
  .shell { grid-template-columns: 248px minmax(0, 1fr); }
  .side { height: 100dvh; display: flex; flex-direction: column; border-bottom: 0; border-right: 1px solid var(--border); }
  .side-top { padding: 18px var(--space-md) 14px; }
  .menu-btn { display: none; }
  .nav, .no-js .nav { display: flex; flex: 1; flex-direction: column; padding: 0 var(--space-sm) var(--space-md); }
  .side-foot { margin-top: auto; }
  .main { padding: var(--space-xl) var(--space-xl) var(--space-2xl); }
}

/* ---------------------------------------------------------------- tieu de trang */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-md); }
.page-head > div { display: grid; gap: 6px; min-width: 0; }
.lede { max-width: 70ch; color: var(--fg-muted); }
.back { display: inline-flex; align-items: center; gap: 6px; font-size: .9375rem; }

/* ---------------------------------------------------------------- khoi noi dung */
.panel { display: grid; gap: var(--space-md); min-width: 0; padding: var(--space-lg); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
@media (min-width: 900px) { .grid-2 { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-md); }
.stat { gap: 4px; padding: var(--space-md) var(--space-lg); }
.stat-label { color: var(--fg-muted); font-size: .875rem; font-weight: 500; }
.stat-value { font: 600 1.75rem/1.2 var(--font-mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-value .unit { color: var(--fg-muted); font-size: .9375rem; font-weight: 500; }
.stat-sub { color: var(--fg-muted); font-size: .875rem; }

/* ---------------------------------------------------------------- nut */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--radius); font: 600 .9375rem/1.2 var(--font-body);
  text-decoration: none; cursor: pointer; touch-action: manipulation; transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--surface); border-color: var(--border); color: var(--fg); }
.btn-secondary:hover { background: var(--surface-muted); }
.btn-danger { background: var(--surface); border-color: currentColor; color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: .875rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
@media (pointer: coarse) { .btn-sm { min-height: 44px; } }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }

/* ---------------------------------------------------------------- form */
.form { display: grid; gap: var(--space-md); }
.field { display: grid; gap: 6px; min-width: 0; }
.label { font-size: .9375rem; font-weight: 600; }
.req { color: var(--danger); }
.input {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--fg); font: inherit; font-size: 16px; transition: border-color .2s ease, box-shadow .2s ease;
}
.input::placeholder { color: var(--fg-muted); opacity: .8; }
.input:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 20%, transparent); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.input.mono { font-family: var(--font-mono); letter-spacing: .02em; }
.input.textarea { min-height: 360px; resize: vertical; font-size: .9375rem; line-height: 1.6; }
.help { color: var(--fg-muted); font-size: .875rem; }
.field-error { display: flex; align-items: flex-start; gap: 6px; color: var(--danger); font-size: .875rem; font-weight: 500; }
.field-error .ic { width: 16px; height: 16px; margin-top: 3px; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 52px; }
.pw-toggle { position: absolute; top: 50%; right: 4px; display: grid; place-items: center; width: 44px; height: 40px; transform: translateY(-50%); border: 0; border-radius: 6px; background: none; color: var(--fg-muted); cursor: pointer; }
.pw-toggle:hover { color: var(--fg); background: var(--surface-muted); }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--accent); cursor: pointer; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 6px; font-size: .9375rem; font-weight: 600; }

.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chip span { display: grid; gap: 2px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.chip span b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.chip span small { color: var(--fg-muted); font-size: .8125rem; }
.chip input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.chip input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }
.preview { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- thong bao */
.alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); color: var(--fg); font-size: .9375rem; }
.alert:focus { outline: 2px solid var(--ring); outline-offset: 2px; }
.alert > .ic { margin-top: 2px; }
.alert > div { display: grid; gap: 4px; min-width: 0; }
.alert ul { margin: 2px 0 0; padding-left: 18px; }
.alert-title { font-weight: 600; }
.alert-ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.alert-ok > .ic { color: var(--ok); }
.alert-error { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.alert-error > .ic, .alert-error a { color: var(--danger); }
.alert-warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.alert-warn > .ic { color: var(--warn); }
.alert-info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.alert-info > .ic { color: var(--info); }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.pill .ic { width: 14px; height: 14px; }
.pill-pending { background: var(--warn-soft); color: var(--warn); }
.pill-confirmed { background: var(--ok-soft); color: var(--ok); }
.pill-sale { background: var(--gold); color: var(--on-gold); }
.pill-rejected { background: var(--danger-soft); color: var(--danger); }
.pill-expired { background: var(--surface-muted); color: var(--fg-muted); }

/* ---------------------------------------------------------------- bang */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
th, td { padding: 10px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; white-space: nowrap; }
th { background: var(--surface-muted); color: var(--fg-muted); font-size: .8125rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-family: var(--font-mono); font-size: .875rem; font-variant-numeric: tabular-nums; }
/* o chu dai trong bang: duoc xuong dong (khong dung ten .wrap: trung khung trang cong khai) */
td.cell-wrap, th.cell-wrap { white-space: normal; min-width: 220px; }
td.cell-wrap code { overflow-wrap: anywhere; }
/* bang gia nha cung cap (trang Agent AI): 8 cot, thu hep o chu de cot thao tac khong bi tran */
.market td.cell-wrap { min-width: 150px; }
.market td:last-child .btn { white-space: nowrap; }
.btn-stack { display: grid; gap: 6px; justify-items: start; }
/* cot so: tieu de va chu ghi chu (vd "chua ro") dung font thuong, so van dung font deu */
th.num { font-family: var(--font-body); font-size: .8125rem; }
.num .muted { font-family: var(--font-body); font-size: .8125rem; }
.cell-note { display: block; margin-top: 2px; color: var(--fg-muted); font-size: .8125rem; }
/* Bang gia (12/10/2026): gia cua hang dam, gia goc cua hang gach ngang ben duoi */
.price-table tbody th { background: none; color: var(--fg); font-size: .9375rem; font-weight: 400; letter-spacing: 0; text-transform: none; white-space: normal; min-width: 180px; }
.price-table span.now { display: block; color: var(--fg); font-weight: 600; }
.price-table s.was { display: block; color: var(--fg-muted); font-size: .8125rem; }
/* 16/10/2026: chu "goc" truoc gia gach ngang (chi cot Vao); dong phu duoi ten cot trung binh khi code */
.price-table .was-line { display: block; color: var(--fg-muted); font-size: .8125rem; }
.price-table .was-line s.was { display: inline; }
.price-table .was-tag { font-family: var(--font-body); font-size: .75rem; }
.price-table thead .th-sub { display: block; margin-top: 2px; font-size: .75rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.price-source { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; color: var(--fg-muted); font-size: .875rem; }
.price-source .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--gold-text); }
/* Tin nhanh (13/10/2026) */
.day-head { font-size: 1rem; color: var(--fg-muted); }
.quick-list h3 { font-size: 1.0625rem; }
.quick-list h3 .ic { width: 14px; height: 14px; margin-left: 6px; vertical-align: -2px; }
.quick-list .why { display: flex; align-items: flex-start; gap: 8px; margin-top: 4px; color: var(--gold-text); font-size: .9375rem; }
.quick-list .why .ic { flex: none; width: 16px; height: 16px; margin-top: 3px; }
.repo .desc-src { color: var(--fg-muted); font-size: .8125rem; line-height: 1.5; overflow-wrap: anywhere; }
/* Nut Bat dau su dung 2 trong 1 tren thanh tren (13/10/2026): khung bao truoc cho nguoi moi */
.start-menu { position: relative; }
.start-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: calc(var(--z-nav) + 1); display: grid; gap: 8px; width: min(320px, calc(100vw - 32px)); padding: var(--space-md); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 14px 36px rgba(15, 23, 42, .18); text-align: left; }
.start-pop[hidden] { display: none; }
.start-pop .start-pop-title { font: 600 1rem/1.3 var(--font-mono); }
.start-pop .btn { justify-self: start; }
.start-pop .consent { color: var(--fg-muted); font-size: .8125rem; line-height: 1.5; }
.start-pop .start-status:empty { display: none; }
.start-pop-alt { padding-top: 8px; border-top: 1px solid var(--border); font-size: .9375rem; }
/* link trong khung: khong an kieu link menu (.site-nav a: khoi 44px, dem 12px) */
.site-nav .start-pop a:not(.btn) { display: inline; min-height: 0; padding: 0; border-radius: 0; background: none; color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.site-nav .start-pop a:not(.btn):hover { background: none; color: var(--accent-hover); }
.start-pop-alt .ic { display: none; }
.hero-login { align-self: center; font-weight: 600; }

/* Bang xep hang model (13/10/2026; gon mot bang, vua chieu rong theo yeu cau nguoi dung) */
.main-in.wide { max-width: 1440px; }
.rank-badge { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background: var(--surface-muted); font: 700 .8125rem var(--font-mono); }
.rank-badge.top { background: var(--gold); color: var(--on-gold); }
.rank-panel { padding: 0; overflow: hidden; }
.rank-table { font-size: .9375rem; }
.rank-table th, .rank-table td { padding: 9px 10px; }
.rank-table thead th { white-space: normal; vertical-align: bottom; line-height: 1.3; letter-spacing: .02em; }
.rank-table thead abbr { text-decoration: none; cursor: help; }
.rank-table tbody th { background: none; color: var(--fg); font-size: .9375rem; font-weight: 400; letter-spacing: 0; text-transform: none; white-space: normal; min-width: 170px; }
.rank-table tbody tr.top-row { background: color-mix(in srgb, var(--gold) 8%, transparent); }
.rank-table tbody tr:hover { background: var(--surface-muted); }
.rank-table td:first-child, .rank-table th:first-child { width: 44px; padding-left: 14px; }
.rank-table .open-tag { color: var(--info); font-weight: 600; }
.rank-table .pill-sale { text-decoration: none; }
.score-meter { display: block; width: 64px; height: 5px; margin: 4px 0 0 auto; }
.score-meter::-webkit-meter-bar { background: var(--surface-muted); border: 0; border-radius: 3px; }
.score-meter::-webkit-meter-optimum-value, .score-meter::-webkit-meter-suboptimum-value { background: var(--accent); border-radius: 3px; }
.score-meter::-moz-meter-bar { background: var(--accent); border-radius: 3px; }
/* goi y model o Bang gia: nut ten model + popover (lop tren cung, khong bi khung bang cuon ngang cat) */
.pitch-btn { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; border: 0; background: none; color: var(--fg); font: inherit; text-align: left; cursor: help; text-decoration: underline dotted var(--fg-muted); text-underline-offset: 4px; }
/* dau hieu "bam vao day": cham vang co tia lap lanh, toa vong 3 lan khi mo trang; re chuot / cham thi sang len.
   Mo goi y lan dau (html.pitch-seen) thi thoi toa vong. Nguoi dung bat giam chuyen dong: khong toa vong. */
.pitch-dot { position: relative; display: inline-grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-text); transition: transform .18s ease-out, background-color .18s, color .18s; }
.pitch-dot .ic { width: 13px; height: 13px; }
.pitch-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(250, 204, 21, .6); animation: pitch-ping 2.4s ease-out .6s 3; pointer-events: none; }
@keyframes pitch-ping { 0% { box-shadow: 0 0 0 0 rgba(250, 204, 21, .6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(250, 204, 21, 0); } }
.pitch-seen .pitch-dot::after { animation: none; }
.pitch-btn:hover, .pitch-btn[aria-expanded="true"] { color: var(--accent-text); text-decoration-color: var(--accent); }
.pitch-btn:hover .pitch-dot, .pitch-btn:focus-visible .pitch-dot, .pitch-btn[aria-expanded="true"] .pitch-dot { background: var(--gold); color: #0F172A; transform: scale(1.12) rotate(-8deg); }
.price-table tbody tr { transition: background-color .15s; }
.price-table tbody tr:hover { background: var(--surface-muted); }
html:not(.motion) .pitch-dot::after { animation: none; }
html:not(.motion) .pitch-dot { transition: none; }
html:not(.motion) .pitch-btn:hover .pitch-dot { transform: none; }
.pitch-pop { position: fixed; inset: auto; margin: 0; width: min(340px, calc(100vw - 16px)); padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--fg); box-shadow: 0 14px 36px rgba(15, 23, 42, .18); }
.pitch-pop .pitch-name { margin-bottom: 6px; font: 600 .9375rem/1.3 var(--font-mono); color: var(--accent-text); }
.pitch-pop .verse { font-size: .9375rem; font-style: italic; line-height: 1.75; white-space: normal; }
.pitch-pop .fit { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: .875rem; line-height: 1.55; white-space: normal; }
.pitch-pop .pitch-meta { margin-top: 6px; color: var(--fg-muted); font: 500 .8125rem/1.4 var(--font-mono); white-space: normal; }
caption { padding: 10px 14px; text-align: left; color: var(--fg-muted); font-size: .875rem; caption-side: bottom; }

/* ---------------------------------------------------------------- key, code, cap gia tri */
.keybox { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.key-text { flex: 1 1 300px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); font: 500 .9375rem/1.4 var(--font-mono); overflow-wrap: anywhere; }
.kv { display: grid; grid-template-columns: minmax(150px, max-content) minmax(0, 1fr); gap: 10px var(--space-md); align-items: center; margin: 0; }
.kv dt { color: var(--fg-muted); font-size: .9375rem; }
.kv dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); min-width: 0; margin: 0; font-weight: 600; }
.kv dd code { overflow-wrap: anywhere; }
@media (max-width: 560px) { .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; } .kv dd { margin-bottom: 10px; } }
/* 17/10/2026: .kv cho cau dai (huong dan bypass permissions): chu chay thuong, nhan canh dong dau */
.kv.kv-text { align-items: baseline; }
.kv.kv-text dd { display: block; font-weight: 400; }
/* hang thong tin gon (15/10/2026 nguoi dung: "lam dung xuong dong, trang dai"): nhieu cap nhan / gia tri tren mot
   hang, nhan nho o tren, het cho thi tu xuong hang. Cho thong tin ngan; gia tri dai kem nut chep van dung .kv */
.facts { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 0; }
.facts > div { display: grid; gap: 2px; min-width: 0; max-width: 100%; }
.facts dt { color: var(--fg-muted); font-size: .8125rem; }
.facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.facts dd .muted, .facts dd .small { font-weight: 400; }
/* thao tac gon: ten + giai thich ben trai, o nhap / nut ben phai, moi thao tac mot hang */
.act-rows { display: grid; }
.act-row { display: grid; gap: var(--space-sm) var(--space-lg); align-items: center; padding: 14px 0; border-top: 1px solid var(--border); }
.act-row:first-child { padding-top: 0; border-top: 0; }
.act-row:last-child { padding-bottom: 0; }
.act-row h3 { font-size: 1rem; }
.act-row .help { margin-top: 2px; }
.act-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.act-form.fields { align-items: flex-end; }
.act-form.fields .field { flex: 1 1 150px; }
.act-form.fields .field:nth-of-type(3) { flex-basis: 240px; }
@media (min-width: 820px) {
  .act-row { grid-template-columns: minmax(220px, 1fr) auto; }
  .act-row.wide { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); }   /* form nhieu o: chu hep lai */
  .act-row.wide .act-form.fields { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr) auto; }
  .act-form { justify-content: flex-end; }
}
.code { position: relative; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); }
.code pre { margin: 0; padding: 14px 16px; overflow-x: auto; font: 500 .875rem/1.65 var(--font-mono); }
.code-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--border); color: var(--fg-muted); font-size: .8125rem; font-weight: 600; }
.highlight { padding: 2px 8px; border-radius: 6px; background: var(--warn-soft); color: var(--fg); font-family: var(--font-mono); }

.qr { width: min(300px, 100%); padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #FFFFFF; }
.qr svg { display: block; width: 100%; height: auto; }

.steps { display: grid; gap: var(--space-md); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-muted); font: 600 .875rem var(--font-mono); }
.steps[start="3"] { counter-reset: step 2; }
.steps li > div { min-width: 0; }
.steps li > div > .kv { margin-top: 10px; }
/* Huong dan: chon cong cu (13/10/2026) */
.tool-pick { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tool-group { display: grid; gap: 8px; align-content: start; }
.tool-group-name { font: 600 .75rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); }
.tool-card { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--fg); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.tool-card:hover, .tool-card:focus-visible { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.tool-card b { font: 600 .9375rem/1.35 var(--font-mono); }
.tool-card span { color: var(--fg-muted); font-size: .8125rem; }
.panel[id] { scroll-margin-top: 16px; }

.models { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.models li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--space-md); padding: 10px 0; border-bottom: 1px solid var(--border); }
.models li:last-child { border-bottom: 0; }
.models code { color: var(--fg-muted); }

.empty { display: grid; justify-items: start; gap: var(--space-sm); padding: var(--space-lg) 0 var(--space-sm); }
.empty > .ic { width: 28px; height: 28px; color: var(--fg-muted); }

details.zone { border: 1px solid var(--border); border-radius: var(--radius); }
details.zone > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; cursor: pointer; font-weight: 600; list-style: none; }
details.zone > summary::-webkit-details-marker { display: none; }
details.zone > summary::after { content: "+"; margin-left: auto; color: var(--fg-muted); font-family: var(--font-mono); }
details.zone[open] > summary::after { content: "−"; }
details.zone > .form { padding: 0 14px 14px; }

.toc { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.toc a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--fg); text-decoration: none; font-size: .9375rem; }
.toc a:hover { background: var(--surface-muted); }
.rules { display: grid; gap: var(--space-sm); margin: 0; padding-left: 20px; }
.rules li { padding-left: 4px; }

/* ---------------------------------------------------------------- khu quan tri */
.brand-mark.admin .brand-star { fill: var(--fg); stroke: var(--fg); }
.brand-mark.admin .brand-ai { fill: var(--bg); }
.toc a[aria-current="page"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.toc .count { margin-left: 6px; font: 600 .8125rem var(--font-mono); opacity: .75; }
.pill-info { background: var(--info-soft); color: var(--info); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-md); align-items: start; }
.actions { display: grid; }
.action { display: grid; gap: var(--space-sm); padding: var(--space-md) 0; border-top: 1px solid var(--border); }
.action:first-child { padding-top: 0; border-top: 0; }
.action:last-child { padding-bottom: 0; }
.action h3 { font-size: 1rem; }
.secret-list { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.secret-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.secret-list code { padding: 4px 10px; border-radius: 6px; background: var(--surface); font-size: .9375rem; }

/* ---------------------------------------------------------------- trang cong khai (khung) */
.site-head { position: sticky; top: 0; z-index: var(--z-nav); background: var(--surface); border-bottom: 1px solid var(--border); }
.site-head-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-lg); max-width: 1180px; margin: 0 auto; padding: 8px var(--space-md); }
.site-nav { display: none; width: 100%; padding-bottom: var(--space-sm); }
.site-nav.open, .no-js .site-nav { display: grid; gap: var(--space-sm); }
.site-nav ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.site-nav a:not(.btn) { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--radius); color: var(--fg-muted); font-weight: 500; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.site-nav a:not(.btn):hover, .site-nav a[aria-current="page"] { background: var(--surface-muted); color: var(--fg); }
.site-cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
@media (min-width: 900px) {
  .site-head-in { flex-wrap: nowrap; }
  .site-head .menu-btn { display: none; }
  .site-nav, .no-js .site-nav { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: var(--space-lg); width: auto; padding: 0; }
  .site-nav ul { display: flex; gap: 4px; margin-left: var(--space-lg); }
  .site-nav a:not(.btn) { min-height: 40px; }
}
.site-main { min-width: 0; padding: var(--space-xl) var(--space-md) var(--space-2xl); }
.site-main.bleed { padding: 0; }
.site-foot { border-top: 1px solid var(--border); background: var(--surface); }
.site-foot-in { display: grid; gap: var(--space-md); max-width: 1180px; margin: 0 auto; padding: var(--space-xl) var(--space-md); }
.site-foot ul { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); margin: 0; padding: 0; list-style: none; }
.site-foot a:not(.brand) { color: var(--fg-muted); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-md); }

/* ---------------------------------------------------------------- trang chu */
.hero { position: relative; isolation: isolate; border-bottom: 1px solid var(--border); background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--fg) 10%, transparent) 1px, transparent 0) 0 0 / 22px 22px, var(--bg); }
/* 18/10/2026 nguoi dung: nen dong trang chu: cac vet gradient troi cham va doi mau nhe, cac cham luoi dam mau len roi tro
   lai binh thuong. Chi chuyen dong khi bat hieu ung (html.motion); tat thi dung yen nhu cu. Chi doi transform / opacity
   (nhe may). Lop rieng co overflow hidden de khung "Bat dau su dung" bat ra khong bi cat. */
.hero-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-fx i { position: absolute; display: block; }
.fx-glow { inset: -30%; background: radial-gradient(closest-side at 74% 26%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 75%), radial-gradient(closest-side at 26% 74%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 75%); }
.fx-glow.fx-b { background: radial-gradient(closest-side at 30% 28%, color-mix(in srgb, var(--info) 13%, transparent), transparent 75%), radial-gradient(closest-side at 76% 72%, color-mix(in srgb, var(--gold) 15%, transparent), transparent 75%); opacity: 0; }
.fx-dots { inset: 0; opacity: 0; background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--accent) 80%, transparent) 1.6px, transparent 0) 0 0 / 22px 22px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 72% 32%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 60% 70% at 72% 32%, #000 10%, transparent 70%); }
.fx-dots.fx-b { background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--gold) 90%, transparent) 1.6px, transparent 0) 0 0 / 22px 22px; -webkit-mask-image: radial-gradient(ellipse 55% 65% at 24% 72%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 55% 65% at 24% 72%, #000 10%, transparent 70%); }
html.motion .fx-glow { animation: fx-drift 26s ease-in-out infinite alternate; will-change: transform; }
html.motion .fx-glow.fx-b { animation: fx-drift-b 22s ease-in-out infinite alternate, fx-fade 13s ease-in-out infinite alternate; will-change: transform, opacity; }
html.motion .fx-dots { animation: fx-pulse 7s ease-in-out infinite; }
html.motion .fx-dots.fx-b { animation-delay: 3.5s; }
@keyframes fx-drift { from { transform: translate3d(-4%, -3%, 0) rotate(-4deg); } to { transform: translate3d(5%, 4%, 0) rotate(5deg); } }
@keyframes fx-drift-b { from { transform: translate3d(4%, 3%, 0) rotate(3deg); } to { transform: translate3d(-5%, -2%, 0) rotate(-4deg); } }
@keyframes fx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-pulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.hero-in { display: grid; gap: var(--space-xl); align-items: center; padding-block: var(--space-2xl); }   /* giu le ngang cua .wrap */
@media (min-width: 960px) { .hero-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding-block: 80px; } }
.hero-copy { display: grid; gap: var(--space-md); justify-items: start; }
.eyebrow { font: 600 .8125rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); }
.hero h1 { font-size: clamp(2.125rem, 4.8vw, 3.5rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.03em; }
.hero h1 em { font-style: normal; color: var(--accent-text); background: linear-gradient(transparent 62%, var(--mark) 62%, var(--mark) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero .lede { max-width: 52ch; font-size: 1.125rem; }
/* khau hieu tho luc bat (16/10/2026): moi cau mot dong, cau luc (6 chu) thut vao nhu cach in tho truyen thong. Co chu
   tieu de theo be ngang cot (cqi) de cau dai nhat (28 ky tu mono) nam tron mot dong; trinh duyet cu dung 2rem. */
.hero-copy { container-type: inline-size; }
.verse .v6, .verse .v8 { display: block; }
.verse .v6 { padding-left: 1.5ch; }
.hero h1.verse { font-size: 2rem; font-size: clamp(1.375rem, 6cqi, 2.75rem); line-height: 1.2; }
.hero .lede.verse { font-size: 1.25rem; line-height: 1.6; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.btn-lg { min-height: 52px; padding: 0 24px; font-size: 1rem; }
.consent { max-width: 62ch; color: var(--fg-muted); font-size: .8125rem; }
.start-status { min-height: 1.6em; font-weight: 600; }
.start-status.err { color: var(--danger); }
/* khung IDE o trang chu (15/10/2026 nguoi dung: "motion coding"): file cau hinh + terminal go lai phien Claude Code
   mau (term.js). Mau toi o ca hai giao dien (dat thang, khong theo token) nhu cua so lenh cu. */
.ide { min-width: 0; margin: 0; overflow: hidden; border: 1px solid #1E293B; border-radius: var(--radius-lg); background: #0B1020; color: #E2E8F0; box-shadow: 0 24px 48px -28px rgba(2, 6, 23, .55); font: 500 .8125rem/1.7 var(--font-mono); }
.ide-bar { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 14px; border-bottom: 1px solid #1E293B; color: #94A3B8; }
.ide-dots { display: inline-flex; flex: none; gap: 6px; }
.ide-dots i { width: 10px; height: 10px; border-radius: 50%; background: #334155; }
.ide-file { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ide-live { display: inline-flex; flex: none; align-items: center; gap: 7px; margin-left: auto; color: #CBD5E1; }
.ide-live i { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; animation: ide-ping 2.4s ease-out infinite; }
@keyframes ide-ping { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); } }
.ide-code { margin: 0; padding: 12px 16px 12px 0; overflow-x: auto; font: inherit; }
.ide-code .ln { display: inline-block; width: 4ch; padding-right: 1.5ch; color: #475569; text-align: right; user-select: none; }
.ide .k { color: #FDE047; } .ide .s { color: #FCA5A5; } .ide .p { color: #94A3B8; }
.ide .s.flash { animation: ide-flash 1.6s ease-out; }
@keyframes ide-flash { 0%, 35% { background: rgba(250, 204, 21, .3); color: #FEF9C3; } 100% { background: transparent; } }
.ide-tab { display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 0 6px 0 16px; border-top: 1px solid #1E293B; border-bottom: 1px solid #1E293B; color: #64748B; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; }
.ide-tab b { display: flex; align-items: center; align-self: stretch; color: #E2E8F0; font-weight: 600; box-shadow: inset 0 -2px #FACC15; }
.ide-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: auto; padding: 0; border: 1px solid #334155; border-radius: 6px; background: transparent; color: #CBD5E1; cursor: pointer; transition: background-color .15s ease; }
.ide-btn:hover { background: #1E293B; }
.ide-btn:focus-visible { outline: 2px solid #FDE047; outline-offset: 2px; }
.ide-btn .ic { width: 14px; height: 14px; }
@media (pointer: coarse) { .ide-btn { width: 40px; height: 40px; } }
.ide-screen { padding: 12px 16px 14px; overflow: hidden; background: #080C1A; transition: opacity .25s ease; }
.ide-screen.clearing { opacity: 0; }
.ide-screen.scrolled { -webkit-mask-image: linear-gradient(transparent, #000 2.4em); mask-image: linear-gradient(transparent, #000 2.4em); }
.tl { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.tl b { color: #F8FAFC; font-weight: 700; }
.t-pr { color: #FACC15; font-weight: 700; }
.t-ask { color: #F8FAFC; font-weight: 600; }
.t-dim, .t-res { color: #94A3B8; }
.t-res { padding-left: 1.2em; }
.t-host { color: #E2E8F0; }
.t-star { color: #F87171; }
.t-dot { display: inline-block; width: .6em; height: .6em; margin-right: .6em; border-radius: 50%; background: #4ADE80; vertical-align: .02em; }
.tl.run .t-dot { border: 2px solid #FACC15; border-right-color: transparent; background: transparent; animation: ide-spin .7s linear infinite; }
@keyframes ide-spin { to { transform: rotate(360deg); } }
.t-add, .t-del { margin: 0 -16px; padding: 0 16px 0 calc(16px + 1.2em); }
.t-add { background: rgba(34, 197, 94, .1); color: #86EFAC; }
.t-del { background: rgba(239, 68, 68, .1); color: #FCA5A5; }
.t-done { color: #CBD5E1; }
.t-ok { color: #4ADE80; font-weight: 700; }
.tl b.t-cost { color: #FDE047; }
.t-caret { display: inline-block; width: .62em; height: 1.2em; background: #FACC15; vertical-align: -.22em; animation: ide-blink 1.05s steps(1) infinite; }
@keyframes ide-blink { 50% { opacity: 0; } }
.ide.paused *, .ide.paused *::before, .ide.paused *::after { animation-play-state: paused !important; }
/* nhan muc kieu chu thich code o trang chu */
.cmt::before { content: "// "; content: "// " / ""; opacity: .7; }
.section { padding: var(--space-2xl) 0; border-bottom: 1px solid var(--border); }
.section-head { display: grid; gap: 6px; max-width: 70ch; margin-bottom: var(--space-lg); }
.section-head h2 { font-size: clamp(1.375rem, 2.6vw, 1.875rem); letter-spacing: -0.02em; }
.model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-md); }
.model-card { display: grid; gap: 6px; align-content: start; padding: var(--space-md) var(--space-lg); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.model-card .maker { color: var(--fg-muted); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.model-card h3 { font-size: 1.0625rem; }
.model-card .price { font: 600 1.375rem/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
.model-card .price small { color: var(--fg-muted); font: 500 .8125rem var(--font-body); }
.model-card p { color: var(--fg-muted); font-size: .9375rem; }
/* trang thai model o trang chu (12/10/2026): uptime, ping, dai 24 gio */
.model-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.model-card .model-id code { color: var(--fg-muted); font-size: .8125rem; overflow-wrap: anywhere; }
.model-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 0; }
.model-stats div { display: grid; gap: 2px; }
.model-stats dt { color: var(--fg-muted); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.model-stats dd { margin: 0; font: 600 1.25rem/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
.hour-bars { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; height: 24px; margin-top: 4px; }
.hour-bars i, .bar-legend i { display: block; border-radius: 2px; background: var(--border); }
.hour-bars .b-ok, .bar-legend .b-ok { background: var(--ok); }
.hour-bars .b-part, .bar-legend .b-part { background: var(--warn); }
.hour-bars .b-down, .bar-legend .b-down { background: var(--danger); }
.model-card .hour-axis { display: flex; justify-content: space-between; font-size: .75rem; }
.model-card .model-note { margin-top: 4px; }
.bar-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 0; padding: 0; list-style: none; color: var(--fg-muted); font-size: .8125rem; }
.bar-legend li { display: inline-flex; align-items: center; gap: 6px; }
.bar-legend i { width: 10px; height: 10px; }
.model-grid + .help { margin-top: var(--space-md); }
.steps-h { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-lg); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps-h li { display: grid; gap: var(--space-sm); align-content: start; padding-top: var(--space-md); border-top: 2px solid var(--fg); counter-increment: step; }
.steps-h li::before { content: counter(step, decimal-leading-zero); color: var(--gold-text); font: 700 .875rem var(--font-mono); }
.steps-h p { color: var(--fg-muted); }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-lg); }
.feature { display: grid; gap: var(--space-sm); align-content: start; }
.feature .ic { width: 28px; height: 28px; color: var(--accent-text); }
.feature p { color: var(--fg-muted); }
.faq { display: grid; gap: var(--space-sm); max-width: 860px; }
.faq details { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 48px; padding: 10px 16px; cursor: pointer; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--fg-muted); font-family: var(--font-mono); }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 16px 14px; color: var(--fg-muted); }
.two-col { display: grid; gap: var(--space-xl); }
@media (min-width: 900px) { .two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cta-band { display: grid; gap: var(--space-md); justify-items: start; padding: var(--space-xl); border-radius: var(--radius-lg); background: #B91C1C; color: #FFFFFF; }
.cta-band h2 { color: #FEF08A; font-size: clamp(1.375rem, 2.6vw, 1.875rem); }
.cta-band p { max-width: 60ch; color: #FEE2E2; }
.cta-band .btn-primary { background: var(--gold); color: var(--on-gold); }
.cta-band .btn-primary:hover { background: var(--gold-hover); }

/* ---------------------------------------------------------------- bai viet, repo */
.post-list { display: grid; margin: 0; padding: 0; list-style: none; }
.post-list li { display: grid; gap: 6px; padding: var(--space-md) 0; border-bottom: 1px solid var(--border); }
.post-list li:last-child { border-bottom: 0; }
.post-list h2, .post-list h3 { font-size: 1.125rem; }
.post-list .title { color: var(--fg); text-decoration: none; }
.post-list .title:hover { text-decoration: underline; }
.post-list p { color: var(--fg-muted); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--fg-muted); font-size: .875rem; }
.prose { max-width: 72ch; font-size: 1.0625rem; line-height: 1.75; }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 1.8em; font-size: 1.375rem; }
.prose h3 { margin-top: 1.4em; font-size: 1.125rem; }
.prose ul, .prose ol { margin: 0; padding-left: 1.4em; }
.prose li + li { margin-top: .35em; }
.prose code { padding: 1px 6px; border-radius: 5px; background: var(--surface-muted); font-size: .875em; overflow-wrap: anywhere; }
.prose pre { margin: 0; padding: 14px 16px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); line-height: 1.6; }
.prose pre code { padding: 0; background: none; overflow-wrap: normal; }
.prose blockquote { margin: 0; padding-left: 16px; border-left: 3px solid var(--border); color: var(--fg-muted); }
.prose img { max-width: 100%; height: auto; }
.prose table { width: auto; }
.repo-list { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: repo; }
.repo { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--border); counter-increment: repo; }
.repo:last-child { border-bottom: 0; }
.repo::before { content: counter(repo); grid-row: span 4; padding-top: 2px; color: var(--fg-muted); font: 600 1rem var(--font-mono); text-align: right; }
.repo .name { display: inline-flex; align-items: center; gap: 6px; font: 600 1rem var(--font-mono); overflow-wrap: anywhere; }
.repo .name .ic { width: 16px; height: 16px; flex: none; }
.repo .desc { color: var(--fg-muted); overflow-wrap: anywhere; }
.repo > * { grid-column: 2; }
.chip-s { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--fg-muted); font-size: .75rem; }
.stars { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.stars .ic { width: 14px; height: 14px; color: var(--warn); }

/* ---------------------------------------------------------------- do tre nha cung cap (quan tri, 08/10/2026) */
.lat-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm) var(--space-md); }
.lat-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.num-big { font: 600 1.75rem/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
.lat-fig { display: grid; gap: var(--space-sm); margin: 0; }
.chart-wrap { overflow-x: auto; }
.lat-chart { display: block; width: 100%; min-width: 520px; max-width: 760px; height: auto; }
.lat-line { stroke: var(--border); stroke-width: 1; }
.lat-line.good { stroke: var(--ok); stroke-dasharray: 4 4; }
.lat-line.ok { stroke: var(--warn); stroke-dasharray: 4 4; }
.lat-tick { fill: var(--fg-muted); font: 500 11px var(--font-mono); font-variant-numeric: tabular-nums; }
.lat-bar.good { fill: var(--ok); }
.lat-bar.ok { fill: var(--info); }
.lat-bar.slow { fill: var(--warn); }
.lat-bar.empty { fill: var(--border); }
.lat-fail { fill: var(--danger); }
.lat-col:hover .lat-bar { opacity: .75; }
details.zone > .table-wrap { margin: 0 14px 14px; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-sm) var(--space-md); }
.filter-bar .field { flex: 1 1 200px; max-width: 320px; }

/* ---------------------------------------------------------------- trang dang nhap / dang ky */
.auth { display: grid; place-items: center; min-height: 100dvh; padding: var(--space-xl) var(--space-md); }
.auth:focus { outline: none; }
.auth-card { display: grid; gap: var(--space-lg); width: min(440px, 100%); }
.auth-card.wide { width: min(760px, 100%); }
.auth-panel { display: grid; gap: var(--space-lg); padding: var(--space-xl) var(--space-lg); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.auth-foot { color: var(--fg-muted); font-size: .9375rem; text-align: center; }

/* 17/10/2026: khong duoc chay hieu ung (may "giam chuyen dong" ma chua bat tay, da tat, hoac chua co JS) -> tat het.
   Lop "motion" do theme.js dat truoc khi ve trang, nut "Hieu ung: theo may / bat / tat" doi. */
html:not(.motion) *, html:not(.motion) *::before, html:not(.motion) *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
html:not(.motion)::view-transition-group(*), html:not(.motion)::view-transition-old(*), html:not(.motion)::view-transition-new(*) { animation: none !important; }

/* bao ve dang nhap (guard.py, 15/10/2026): khung duyet thiet bi moi, so doi chieu, cai 2FA, ma du phong */
.login-req { display: grid; gap: 10px; margin-bottom: var(--space-md); padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-left: 4px solid var(--warn); border-radius: var(--radius-lg); background: var(--warn-soft); }
.login-req-head { display: flex; align-items: center; gap: 8px; }
.login-req-head h2 { margin: 0; font-size: 1.0625rem; }
.login-req-head .ic { color: var(--warn); }
.login-req-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.login-req-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.login-req-form .label { margin: 0; }
.num-2 { width: 5ch; text-align: center; font-size: 1.25rem; letter-spacing: .1em; }
.wait-number { display: grid; justify-items: center; gap: 4px; padding: 18px; border: 1px dashed var(--border); border-radius: var(--radius-lg); background: var(--surface-muted); }
.wait-number span { color: var(--fg-muted); font-size: .875rem; }
.wait-number b { font: 700 3rem/1 var(--font-mono); letter-spacing: .12em; color: var(--accent-text); }
.wait-status { display: flex; align-items: center; gap: 8px; color: var(--fg-muted); }
.otp-input { font-size: 1.25rem; letter-spacing: .2em; }
.twofa-setup { display: grid; gap: var(--space-lg); align-items: start; }
@media (min-width: 760px) { .twofa-setup { grid-template-columns: 240px minmax(0, 1fr); } }
.qr-2fa { width: 240px; max-width: 100%; }
.secret { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.secret code { font-size: .95rem; letter-spacing: .04em; overflow-wrap: anywhere; }
.codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.codes li { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); text-align: center; }
.codes code { font-size: 1.05rem; letter-spacing: .05em; }

/* 16/10/2026: chon cong / tru credit (quan tri), o email (Tai khoan), ma gioi thieu (thanh vien + quan tri) */
.op-pick { display: flex; gap: 6px 14px; margin: 0; padding: 0 0 10px; border: 0; }
#email .act-form { justify-content: flex-start; }
#email .act-form .field { max-width: 26rem; }
.ref-codes { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.ref-codes li { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); }
.ref-code-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ref-code-main code { font-size: 1.0625rem; letter-spacing: .04em; overflow-wrap: anywhere; }
/* 16/10/2026: bang luot goi o trang Thanh vien (quan tri), 9 cot vua man 1440 px */
.use-table th, .use-table td { padding: 8px 10px; }
.use-table tbody th { background: none; color: var(--fg); font-size: .9375rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
/* 16/10/2026: lich su luot goi: bo loc, chuyen ky, chuyen trang (_usage.html) */
.usage-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-sm) var(--space-md); }
.usage-filter .field { min-width: 150px; }
.usage-filter .input { height: 44px; padding-block: 0; }
.usage-period { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.usage-period b { font-family: var(--font-mono); }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-md); }
.pager ol { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pager li a, .pager .pager-cur { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius); font: 600 .875rem var(--font-mono); text-decoration: none; }
.pager li a:hover { background: var(--surface-muted); }
.pager .pager-cur { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pager .gap { align-self: center; padding: 0 4px; color: var(--fg-muted); }
/* 17/10/2026: Tin nhanh kieu moi (nguoi dung chot 4A, 5A): tin noi bat + the 2 cot, nhan loai tin, o "Thu ngay" kieu
   dong lenh (cung mau khung terminal trang chu), tieu de chu thuong; dai "Tin nhanh hom nay" o trang Tin tuc */
.qn-status { margin: 0; font: 500 .8125rem/1.6 var(--font-mono); color: var(--fg-muted); overflow-wrap: anywhere; }
.qn-status b { color: var(--accent-text); font-weight: 700; }
.qn-day { display: grid; gap: var(--space-md); min-width: 0; }
.qn-day-head { font-size: 1rem; color: var(--fg-muted); }
.qn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: var(--space-md); }
.qn-grid > .qn:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* the le cuoi: trai het hang, khong dung mot minh */
.qn { display: grid; align-content: start; gap: 10px; min-width: 0; padding: var(--space-md) 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.qn-lead { padding: var(--space-lg); box-shadow: var(--shadow-sm); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.qn h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.0625rem; line-height: 1.4; letter-spacing: 0; }
.qn-lead h3 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.5rem); line-height: 1.3; }
.qn h3 a { color: var(--fg); text-decoration: none; }
.qn h3 a:hover { text-decoration: underline; }
.qn h3 .ic { width: 14px; height: 14px; margin-left: 6px; vertical-align: -1px; color: var(--fg-muted); }
.qn-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; color: var(--fg-muted); font-size: .8125rem; }
.qn-tag, .qn-hot { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.qn-tag-model { background: var(--accent-soft); color: var(--accent-text); }
.qn-tag-update { background: var(--info-soft); color: var(--info); }
.qn-tag-tool, .qn-tag-tip { background: var(--ok-soft); color: var(--ok); }
.qn-tag-exp, .qn-tag-price { background: var(--gold-soft); color: var(--gold-text); }
.qn-tag-security { background: var(--danger-soft); color: var(--danger); }
.qn-tag-research, .qn-tag-industry { background: var(--surface-muted); color: var(--fg-muted); box-shadow: inset 0 0 0 1px var(--border); }
.qn-hot { background: var(--gold); color: var(--on-gold); }
.qn-sum { margin: 0; color: var(--fg-muted); max-width: 75ch; }
.qn-lead .qn-sum { color: var(--fg); font-size: 1.0625rem; }
.qn-try { display: flex; gap: 10px; margin: 0; padding: 10px 14px; border-radius: var(--radius); background: #0B1020; color: #E2E8F0; font: 400 .875rem/1.65 var(--font-mono); overflow-wrap: anywhere; }
.qn-try::before { content: "$"; content: "$" / ""; flex: none; color: #FACC15; font-weight: 700; }
.qn-try code { color: #FDE68A; font-size: 1em; }
.qn .why { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--gold-text); font-size: .9375rem; }
.qn .why .ic { flex: none; width: 16px; height: 16px; margin-top: 3px; }
.qn-strip { display: grid; gap: 10px; padding: var(--space-md) 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.qn-strip-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.qn-strip-head h2 { font-size: 1rem; }
.qn-strip-head a { display: inline-flex; align-items: center; gap: 6px; font-size: .9375rem; }
.qn-strip-head .ic { width: 16px; height: 16px; }
.qn-strip ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.qn-strip li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.qn-strip li a { color: var(--fg); font-weight: 500; text-decoration: none; }
.qn-strip li a:hover { text-decoration: underline; }
.post-list .post-lead { padding-bottom: var(--space-lg); }
.post-list .post-lead h2 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.5rem); }
.post-list .post-lead p { font-size: 1.0625rem; }
/* 17/10/2026: phim bam trong huong dan (Shift+Tab...) */
kbd { display: inline-block; padding: 0 6px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; background: var(--surface-muted); color: var(--fg); line-height: 1.5; white-space: nowrap; }
/* 17/10/2026: khau hieu moi o trang chu (khong con la tho luc bat): hai dong, khong thut */
.slogan .ln { display: block; }
.hero h1.slogan { font-size: 2.25rem; font-size: clamp(1.625rem, 7.2cqi, 3.25rem); line-height: 1.15; }
.hero .lede.slogan { font-size: 1.25rem; line-height: 1.6; }

/* 17/10/2026 hieu ung chuyen dong (nguoi dung chot "Vua theo de xuat": 1-7, 9-11). Chi chay khi <html> co lop
   "motion"; chi dich chuyen / doi do mo, duoi 0,7 giay, chay mot lan (tru cham cho xac nhan nap). */
/* 1. chuyen trang muot: View Transitions giua hai trang (trinh duyet chua ho tro thi chuyen nhu cu) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .12s ease-in both; }
::view-transition-new(root) { animation: vt-in .26s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
.site-head { view-transition-name: site-head; }
.side { view-transition-name: side; }
/* 2. hien dan khi cuon toi (app.js gan .rv cho phan con duoi man hinh, them .in khi cuon toi) */
html.motion .rv { opacity: 0; transform: translateY(16px); }
html.motion .rv.in { opacity: 1; transform: none; transition: opacity .5s ease-out, transform .5s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 60ms); }
@media print { .rv { opacity: 1 !important; transform: none !important; } }
/* 3. the noi khi re chuot, nut lun khi bam */
html.motion :is(.model-card, .qn, .tool-card, .repo-list > .repo) { transition: transform .18s ease-out, box-shadow .18s ease-out, border-color .18s ease; }
html.motion :is(.model-card, .qn, .tool-card, .repo-list > .repo):hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(2, 6, 23, .45); }
html.motion .btn { transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .1s ease-out; }
html.motion .btn:active:not(:disabled) { transform: scale(.97); }
/* 4. thong bao truot xuong */
html.motion .alert-ok[role="status"] { animation: fx-drop .32s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes fx-drop { from { opacity: 0; transform: translateY(-12px); } }
/* 6. dai uptime 24 gio moc lan luot (app.js gan .go va --b khi the hien ra) */
html.motion .hour-bars.go i { transform-origin: bottom; animation: fx-grow .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--b, 0) * 25ms + 120ms); }
@keyframes fx-grow { from { transform: scaleY(0); } }
/* 7. vet vang tu ke duoi chu do o tieu de trang chu */
.hero h1 em { background-repeat: no-repeat; background-size: 100% 100%; }
html.motion .hero h1 em { animation: fx-sweep .7s cubic-bezier(.65, 0, .35, 1) .25s both; }
@keyframes fx-sweep { from { background-size: 0% 100%; } }
/* 9. nhan "Nong" loe sang hai lan (tin dang an cho cuon toi thi doi hien xong moi loe) */
.qn-hot { position: relative; overflow: hidden; }
.qn-hot::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%); background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .75) 50%, transparent 80%); pointer-events: none; }
html.motion .qn:not(.rv) .qn-hot::after { animation: fx-shine 1.1s ease-in-out .6s 2; }
@keyframes fx-shine { to { transform: translateX(120%); } }
/* 10. nut chep bat dau tich */
.is-copied .ic { color: var(--ok); }
html.motion .is-copied .ic { animation: fx-pop .3s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes fx-pop { from { transform: scale(.2); opacity: 0; } }
/* 11. cho xac nhan nap: cham vang toa vong (hieu ung duy nhat chay lap) */
.dep-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.pulse-dot { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
html.motion .pulse-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: fx-ring 1.8s ease-out infinite; }
@keyframes fx-ring { 0% { box-shadow: 0 0 0 0 rgba(250, 204, 21, .6); } 80%, 100% { box-shadow: 0 0 0 10px rgba(250, 204, 21, 0); } }
/* nut "Hieu ung" o chan trang cong khai */
.foot-toggle { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: var(--fg-muted); font: inherit; font-size: .875rem; cursor: pointer; }
.foot-toggle .ic { width: 16px; height: 16px; }
.foot-toggle:hover { color: var(--fg); border-color: var(--fg-muted); }

/* 17/10/2026 nguoi dung: trang quan tri "xuong dong kha nhieu, trang dai keo tha". Khung sat nhau hon, khung nho dung
   canh nhau (.adm-cols), o nhap + nut Luu tren mot hang (.form-row), chu phu trong bang noi dong (.notes-inline). */
.shell-admin .main-in { gap: var(--space-md); }
.shell-admin .panel { gap: 12px; padding: 18px 20px; }
.shell-admin .page-head { margin-bottom: 0; }
.adm-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); align-items: start; }
@media (min-width: 1280px) {
  .adm-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-cols > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.form-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; }
.form-row > .field { flex: 1 1 220px; min-width: 0; }
.form-row > .form-grid { flex: 1 1 460px; min-width: 0; }
.form-row > .btn-row { flex: none; margin-top: 30px; }            /* nhan (24px) + khoang (6px): nut ngang o nhap */
.form-row > .field-error { flex-basis: 100%; }
@media (max-width: 640px) { .form-row > .btn-row { margin-top: 0; } }
.notes-inline .cell-note { display: inline; margin: 0 10px 0 0; }
.notes-inline .cell-note:first-of-type { margin-left: 8px; }
.clamp-1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.input.textarea.textarea-sm { min-height: 150px; }
.adm-cols .actions { gap: 0; }
.adm-stack { display: grid; gap: var(--space-md); align-content: start; min-width: 0; }
@media (min-width: 900px) { .grid-2.grid-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
/* 17/10/2026 nhan kha nang model: "1M context" chu thuong, vach ngan, roi cac chip vision / tools / thinking */
.caps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; font-size: .75rem; line-height: 1; }
.cap { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; background: var(--info-soft); color: var(--info); font-weight: 600; cursor: default; }
.cap-ctx { padding: 0 8px 0 0; border-radius: 0; background: none; color: var(--fg-muted); font-weight: 500; border-right: 1px solid var(--border); }
.cap-ctx:only-child { border-right: 0; }
.cap-pick { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; border: 0; min-width: 0; flex: 2 1 420px; }
.cap-pick legend { width: 100%; margin-bottom: 6px; }
/* 17/10/2026 an ten / dia chi / gia von nha cung cap: nut mat mo o mat khau ngay duoi, *** thay cho gia tri */
.page-head > .head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.reveal { position: relative; }
.reveal > summary { list-style: none; cursor: pointer; }
.reveal > summary::-webkit-details-marker { display: none; }
.reveal-form { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: min(320px, calc(100vw - 32px)); display: grid; gap: var(--space-sm); padding: var(--space-md); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md, var(--shadow-sm)); }
.reveal-on { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.masked { font-family: var(--font-mono, monospace); letter-spacing: .12em; color: var(--fg-muted); }
/* 18/10/2026 bang xep hang: model khach dung nhieu (chi % luot goi) */
.hot-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hot-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) 5rem 7rem; align-items: center; gap: 6px 14px; }
.hot-body { display: grid; gap: 6px; min-width: 0; }
.hot-name { margin: 0; overflow-wrap: anywhere; }
.hot-meter { display: block; width: 100%; height: 8px; }
.hot-meter::-webkit-meter-bar { background: var(--surface-muted); border: 0; border-radius: 4px; }
.hot-meter::-webkit-meter-optimum-value, .hot-meter::-webkit-meter-suboptimum-value { background: var(--gold); border-radius: 4px; }
.hot-meter::-moz-meter-bar { background: var(--gold); border-radius: 4px; }
.hot-share { margin: 0; display: grid; justify-items: end; font: 700 1.0625rem var(--font-mono); font-variant-numeric: tabular-nums; }
.hot-share .cell-note { font-family: var(--font-body, inherit); font-weight: 400; }
.hot-price { justify-self: end; text-decoration: none; }
@media (max-width: 560px) {
  .hot-item { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .hot-price { grid-column: 2 / -1; justify-self: start; }
}
/* 18/10/2026 nut len dau trang (moi trang): goc duoi phai, hien khi da cuon xuong (app.js them .is-shown) */
.to-top { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: calc(var(--z-nav) + 2); display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--fg); box-shadow: 0 8px 24px rgba(15, 23, 42, .16); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease; }
.to-top:hover { background: var(--surface-muted); }
.to-top:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.to-top .ic { width: 20px; height: 20px; }
@media print { .to-top { display: none; } }