/* Hallmark · shape: app screen · genre: editorial · theme: Ink (deal 3/3, seed study-handbook-vietnamese-health-law-b2a9·0db6fb4c·2026-10-26·r0) · redesign: full
 * nav: tab strip kept · signature: the law list ruled in plain black, one state pill per row · states: empty, full · ink: paper
 * axes: light/grotesk-sans/chromatic-teal · posture: restrained · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P7 H7 E7 S8 R8 V7 · weakest: V, the quiz screens stay close to the old layout, so only the system changed there */
/* Hallmark · waive 22 · ink and greys at zero chroma · a notice board is printed in plain black */
/* Hallmark · reworded "? Chưa xác minh được" to "Chưa xác minh được" · 30a names the glyph used as an icon */
@import url("./tokens.css");
@import url("./base.css");

/* ===== Chế độ tối: cùng vai trò màu, đảo độ sáng ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-paper: #0B1220; --color-paper-2: #111B2E; --color-paper-3: #1E293B;
    --color-ink: #E2E8F0; --color-ink-2: #CBD5E1; --color-muted: #94A3B8;
    --color-rule: #334155; --color-rule-2: #1E293B;
    --color-accent: #9CC5A8; --color-accent-ink: #1C1915; --color-accent-soft: #2F4A38; --color-accent-soft-ink: #DCEFE2; --color-action: #E6DDC8; --color-action-ink: #1C1915;
    --color-focus: #9CC5A8;
    --color-focus: oklch(80% 0.12 172); --color-field: oklch(66% 0.03 210);
    --color-error: oklch(72% 0.14 27); --color-error-soft: oklch(28% 0.05 27); --color-error-ink: oklch(88% 0.06 27);
    --shadow-card: 0 20px 40px oklch(12% 0.03 215 / 0.55);
    --color-on-fill: oklch(20% 0.04 60);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-paper: oklch(30% 0.05 225); --color-paper-2: oklch(34% 0.055 225); --color-paper-3: oklch(39% 0.06 225);
  --color-ink: oklch(96% 0.01 200); --color-ink-2: oklch(88% 0.02 205); --color-muted: oklch(77% 0.03 210);
  --color-rule: oklch(46% 0.05 225); --color-rule-2: oklch(38% 0.05 225);
  --color-accent: oklch(80% 0.12 172); --color-action: oklch(88% 0.03 80); --color-action-ink: oklch(22% 0.03 60); --color-accent-ink: oklch(22% 0.04 215); --color-accent-soft: oklch(30% 0.045 190); --color-accent-soft-ink: oklch(90% 0.04 190);
  --color-focus: oklch(80% 0.12 172); --color-field: oklch(66% 0.03 210);
  --color-error: oklch(72% 0.14 27); --color-error-soft: oklch(28% 0.05 27); --color-error-ink: oklch(88% 0.06 27);
  --shadow-card: 0 20px 40px oklch(12% 0.03 215 / 0.55);
  --color-on-fill: oklch(20% 0.04 60);
}

:root { --color-on-tone: oklch(99% 0.004 200); --color-on-fill: oklch(99% 0.004 200); --color-on-warm: oklch(20% 0.04 60); --shadow-lift: 0 6px 18px oklch(12% 0.03 215 / 0.25); --shadow-pop: 0 14px 34px oklch(12% 0.03 215 / 0.28); }

/* ===== Vai trò màu dùng thêm và tên biến cũ (mã JavaScript còn đọc) ===== */
:root {
  --color-error-soft: oklch(95% 0.03 27); --color-error-ink: oklch(38% 0.14 27);
  --ok: var(--color-accent); --ok-soft: var(--color-accent-soft); --ok-ink: var(--color-accent-soft-ink);
  --bad: var(--color-error); --bad-soft: var(--color-error-soft); --bad-ink: var(--color-error-ink);
  --ink: var(--color-ink); --muted: var(--color-muted); --surface: var(--color-paper); --surface-2: var(--color-paper-2);
  --sunk: var(--color-paper-3); --raised: var(--color-paper-3); --line: var(--color-rule); --rule: var(--color-rule-2); --control: var(--color-rule);
  --brand: var(--color-accent); --brand-soft: var(--color-accent-soft); --on-brand: var(--color-accent-ink);
  --ease: var(--ease-out);
  --font-fig: var(--font-outlier);
  --ctl: 40px;
  --color-field: oklch(60% 0 0);
}

/* ===== Khung trang ===== */
body { padding: 0 max(var(--space-md), env(safe-area-inset-left, 0px)) 112px; min-height: 100svh; }
.wrap { max-width: 920px; margin: 0 auto; }
.intro { color: var(--color-muted); max-width: 68ch; font-size: var(--text-sm); }
.label { font-size: var(--text-xs); color: var(--color-muted); }
a { font-weight: 600; }
h1, h2, h3 { line-height: 1.22; }
h1 { line-height: 1.15; }
a:hover { text-decoration-color: var(--color-accent); }
kbd { font-family: var(--font-body); font-size: var(--text-xs); border: 1px solid var(--color-rule); border-bottom-width: 2px; border-radius: 4px; padding: var(--space-3xs) var(--space-xs); background: var(--color-paper-2); color: var(--color-muted); }

/* ===== Điều khiển ===== */
.btn, .linkbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: var(--ctl); padding: 0 var(--space-md); border-radius: 10px; font-weight: 600; font-size: var(--text-sm); text-decoration: none; cursor: pointer;
  border: 1px solid var(--color-ink); background: var(--color-ink); color: var(--color-paper);
  transition: background var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.btn:hover:not(:disabled) { background: var(--color-ink-2); border-color: var(--color-ink-2); }
.btn.ghost, .linkbtn { background: var(--color-paper-2); color: var(--color-ink); border-color: var(--color-rule); }
.btn.ghost:hover:not(:disabled), .linkbtn:hover { background: var(--color-paper-3); border-color: var(--color-muted); }
.btn:active:not(:disabled), .linkbtn:active, .chip:active, nav.tabs button:active, .tile:active, .opt:active:not(:disabled) { transform: translateY(1px); }
button:disabled, .btn:disabled { background: var(--color-paper-3); color: var(--color-muted); border-color: var(--color-rule); cursor: not-allowed; }
.linkbtn svg, .btn svg { width: 16px; height: 16px; flex: none; }
.btn, .linkbtn, .nav button { white-space: nowrap; }
select { min-height: var(--ctl); padding: 0 var(--space-sm); max-width: 100%; min-width: 0; color: var(--color-ink); background: var(--color-paper); border: 1px solid var(--color-field); border-radius: 10px; }
.chip {
  flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-sm); border-radius: var(--radius-pill);
  background: var(--color-paper); border: 1px solid var(--color-rule); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 600; cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.chip:hover { border-color: var(--color-muted); }
.chip[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.tag { display: inline-flex; align-items: center; font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-2); background: var(--color-paper-3); border-radius: var(--radius-pill); padding: var(--space-3xs) var(--space-xs); }
.row { display: flex; gap: var(--space-xs); flex-wrap: wrap; align-items: center; }
.toolbar { display: flex; gap: var(--space-xs); flex-wrap: wrap; align-items: center; }
.meta { display: flex; gap: var(--space-2xs) var(--space-sm); flex-wrap: wrap; font-size: var(--text-sm); color: var(--color-muted); }
.meta .mono, .mono { font-family: var(--font-fig); font-size: var(--text-xs); color: var(--color-ink); }

/* ===== Đầu trang: nhãn hiệu, ba số, việc hôm nay ===== */
.hero { margin-top: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-ink); }
.hero-top { display: flex; gap: var(--space-md); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.brand { display: flex; gap: var(--space-md); align-items: center; min-width: 0; }
.logo { width: 48px; height: 48px; border-radius: 10px; flex: none; }
.hero h1 { font-size: var(--text-display); max-width: none; }
.hero p.sub { margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.stat { padding: var(--space-md) var(--space-md) 0 0; min-width: 0; }
.stat + .stat { padding-left: var(--space-md); border-left: 1px solid var(--color-rule); }
.stat span { display: block; font-size: var(--text-sm); color: var(--color-muted); }
.stat b { display: block; font-size: var(--text-2xl); font-weight: 700; letter-spacing: var(--tracking-display); line-height: 1.2; font-variant-numeric: tabular-nums; }
.today { margin-top: var(--space-lg); display: grid; gap: var(--space-xs); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-md); }
.today .act { display: flex; gap: var(--space-md); align-items: center; justify-content: space-between; flex-wrap: wrap; min-width: 0; }
.today .t { font-size: var(--text-md); color: var(--color-ink-2); min-width: 0; }
.today .t b { font-variant-numeric: tabular-nums; }
.remind { margin-top: var(--space-md); display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }
.remind input[type=time] { min-height: var(--ctl); padding: 0 var(--space-sm); background: var(--color-paper); color: var(--color-ink); border: 1px solid var(--color-field); border-radius: 10px; }
.achv-row { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-top: var(--space-md); }
.achv { font-size: var(--text-xs); font-weight: 600; color: var(--color-muted); background: transparent; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); padding: var(--space-3xs) var(--space-sm); }
.achv::before { content: "○"; margin-right: var(--space-2xs); opacity: .6; font-size: .9em; }
.achv.on { color: var(--color-accent-soft-ink); background: var(--color-accent-soft); box-shadow: none; }
.achv.on::before { content: "✓"; opacity: 1; }
.achv.more { background: transparent; border: 0; cursor: pointer; font-family: inherit; box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); }
.achv.more::before { content: "+"; opacity: 1; }

/* ===== Thanh tab ===== */
nav.tabs {
  position: sticky; inset-block-start: 0; z-index: var(--z-sticky); display: flex; gap: var(--space-xs); overflow-x: auto; scrollbar-width: none;
  margin: var(--space-lg) 0; background: var(--color-paper); border-bottom: 1px solid var(--color-rule);
}
nav.tabs::-webkit-scrollbar { display: none; }
nav.tabs .ind { position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background: var(--color-ink); transition: transform var(--dur-short) var(--ease-out); z-index: 1; }
nav.tabs[data-more="true"]::after { content: "›"; position: sticky; right: 0; flex: none; align-self: stretch; display: grid; place-items: center; min-width: 40px; background: var(--color-paper); color: var(--color-muted); font-size: var(--text-lg); font-weight: 700; box-shadow: -1px 0 0 var(--color-rule); pointer-events: none; }
nav.tabs button { flex: none; min-height: 44px; padding: 0 var(--space-md); background: none; border: 0; color: var(--color-muted); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; cursor: pointer; transition: color var(--dur-micro) var(--ease-out); }
nav.tabs button:hover { color: var(--color-ink); }
nav.tabs button[aria-selected="true"] { color: var(--color-ink); }
@media (min-width: 900px) {
  nav.tabs { gap: 2px; flex-wrap: wrap; overflow-x: visible; }
  nav.tabs button { padding: 0 12px; }
  nav.tabs[data-more="true"]::after { display: none; }
}

/* ===== Panel ===== */
.panel { display: flex; flex-direction: column; gap: var(--space-md); }

/* ===== Thư viện luật ===== */
.links-row { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.search { position: relative; flex: 1; min-width: 220px; }
.search svg { position: absolute; left: var(--space-sm); top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--color-muted); pointer-events: none; }
.search input { width: 100%; min-height: var(--ctl); color: var(--color-ink); background: var(--color-paper); border: 1px solid var(--color-field); border-radius: 10px; padding: 0 var(--space-md) 0 var(--space-xl); }
.search input:hover, select:hover { border-color: var(--color-ink); }
.search input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.cats { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding: var(--space-3xs); margin: calc(var(--space-3xs) * -1); }
.cats::-webkit-scrollbar { display: none; }
.laws { display: grid; gap: var(--space-sm); }
.law { background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); }
.law[open] { border-color: var(--color-muted); }
.law summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--space-md); align-items: center; padding: var(--space-md); }
.law summary::-webkit-details-marker { display: none; }
.law summary:hover h3 { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; }
.badge { min-width: 56px; min-height: 44px; display: grid; place-items: center; border: 1px solid var(--color-rule); border-radius: 8px; background: var(--color-paper-2); color: var(--color-ink); font-family: var(--font-fig); font-size: var(--text-xs); text-align: center; line-height: 1.2; padding: var(--space-2xs); }
.law h3 { font-size: var(--text-lg); line-height: 1.3; margin-bottom: var(--space-2xs); max-width: none; letter-spacing: -0.02em; }
.law .meta .mono { font-size: var(--text-md); font-weight: 700; }
.law .meta .eff { color: var(--color-ink); font-weight: 600; }
.pill { display: inline-flex; align-items: center; font-size: var(--text-xs); font-weight: 600; border-radius: var(--radius-pill); padding: var(--space-3xs) var(--space-sm); white-space: nowrap; }
.p-on { background: var(--color-accent-soft); color: var(--color-accent-soft-ink); }
.p-amend { background: var(--color-paper-3); color: var(--color-ink); }
.p-het { background: transparent; color: var(--color-muted); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); }
.chev { width: 28px; height: 28px; display: grid; place-items: center; color: var(--color-muted); transition: transform var(--dur-short) var(--ease-out); }
.chev svg { width: 14px; height: 14px; }
.law[open] .chev { transform: rotate(180deg); }
.law .bm { flex: none; display: grid; place-items: center; min-width: 44px; min-height: 44px; background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: 10px; font-size: var(--text-lg); line-height: 1; color: var(--color-muted); cursor: pointer; }
.law .bm:hover { color: var(--color-ink); border-color: var(--color-muted); }
.law .bm.on { color: var(--color-ink); border-color: var(--color-ink); }
.law .body { padding: 0 var(--space-md) var(--space-md) calc(56px + var(--space-md) * 2); display: grid; gap: var(--space-sm); }
.law .body .pts { display: grid; gap: var(--space-xs); }
.law .body .pts p { position: relative; padding-left: var(--space-md); font-size: var(--text-md); line-height: 1.55; color: var(--color-ink-2); }
.law .body .pts p::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 6px; height: 1px; background: var(--color-muted); }
.law .links { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-top: var(--space-2xs); }
.law .links .linkbtn { min-height: 44px; }
.note { font-size: var(--text-sm); color: var(--color-muted); border-top: 1px solid var(--color-rule); padding-top: var(--space-md); max-width: 68ch; }
.mastery { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.mastery .bar { flex: 1; max-width: 220px; }
.avatar { height: 130px; flex: none; position: relative; }
.avatar canvas { width: 100%; height: 100%; display: block; }
.related { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }

/* ===== Mặt phẳng trò chơi dùng chung ===== */
.card { background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-lg); position: relative; }
.gtop { display: flex; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-md); }
.stat-row { display: flex; gap: var(--space-xs); flex-wrap: wrap; font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.stat-row span { background: var(--color-paper-3); border-radius: var(--radius-pill); padding: var(--space-3xs) var(--space-sm); }
.stat-row b { color: var(--color-ink); }
.combo { display: inline-flex; align-items: center; gap: var(--space-xs); background: var(--color-accent-soft); color: var(--color-accent-soft-ink); font-weight: 600; border-radius: var(--radius-pill); padding: var(--space-3xs) var(--space-sm); font-size: var(--text-sm); }
.bar { height: 6px; border-radius: var(--radius-pill); background: var(--color-paper-3); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: var(--radius-pill); background: var(--color-accent); }
.segs { display: flex; gap: var(--space-2xs); margin-bottom: var(--space-lg); }
.segs i { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--color-paper-3); transition: background var(--dur-short) var(--ease-out); }
.segs i.done { background: var(--color-accent); }
.segs i.now { background: var(--color-ink); }
.q { font-size: var(--text-xl); font-weight: 600; line-height: 1.35; letter-spacing: -0.02em; margin: 0 0 var(--space-md); text-wrap: pretty; max-width: 60ch; }
.result { display: grid; gap: var(--space-sm); justify-items: center; text-align: center; padding: var(--space-sm) 0 var(--space-2xs); }
.big { font-size: 3.5rem; font-weight: 700; letter-spacing: var(--tracking-display); line-height: 1; font-variant-numeric: tabular-nums; }

/* ===== Trắc nghiệm ===== */
.opts { display: grid; gap: var(--space-xs); }
.opt { display: flex; align-items: center; gap: var(--space-sm); text-align: left; min-height: 48px; background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: 10px; padding: var(--space-sm) var(--space-md); font-size: var(--text-md); cursor: pointer; transition: border-color var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out); }
.opt:hover:not(:disabled) { border-color: var(--color-muted); }
.opt .k { width: 28px; height: 28px; border-radius: 8px; background: var(--color-paper-3); display: grid; place-items: center; font-size: var(--text-xs); font-weight: 600; flex: none; }
.opt .tx { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.opt.right { background: var(--color-accent-soft); border-color: var(--color-accent); }
.opt.right .k { background: var(--color-accent); color: var(--color-accent-ink); }
.opt.wrong { background: var(--color-error-soft); border-color: var(--color-error); }
.opt.wrong .k { background: var(--color-error); color: var(--color-paper); }
.opt.sel { border-color: var(--color-accent); background: var(--color-accent-soft); }
.opt:disabled { cursor: default; }
.feedback { margin-top: var(--space-md); border-radius: 10px; padding: var(--space-md); display: grid; gap: var(--space-xs); }
.feedback.ok { background: var(--color-accent-soft); color: var(--color-accent-soft-ink); }
.feedback.no { background: var(--color-error-soft); color: var(--color-error-ink); }
.feedback .hd { font-weight: 700; }
.feedback p { font-size: var(--text-sm); }
/* Khung trắc nghiệm: số câu, số đúng, thanh tiến độ và phản hồi */
#quiz .gtop { margin-bottom: var(--space-sm); }
#quiz .stat-row { font-size: var(--text-sm); color: var(--color-ink-2); }
#quiz .stat-row b { font-size: var(--text-md); color: var(--color-ink); }
#quiz .segs { gap: var(--space-3xs); margin-bottom: var(--space-md); }
#quiz .segs i { height: 8px; }
#qfb .feedback { margin-top: var(--space-md); }
#qfb .feedback .hd { font-size: var(--text-lg); }

/* ===== Đúng hay Sai ===== */
.tf-timer { height: 6px; border-radius: var(--radius-pill); background: var(--color-paper-3); overflow: hidden; margin-bottom: var(--space-md); }
.tf-timer i { display: block; height: 100%; width: 100%; border-radius: var(--radius-pill); background: var(--color-accent); }
.tf-timer.low i { background: var(--color-error); }
.tf-time { font-family: var(--font-fig); font-size: var(--text-xl); font-weight: 400; font-variant-numeric: tabular-nums; }
.tf-stmt { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.4; min-height: 112px; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-sm) var(--space-xs); text-wrap: balance; }
.tf-btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-top: var(--space-xs); }
.tf-btns button { min-height: 64px; border: 1px solid var(--color-rule); border-radius: 10px; font-size: var(--text-lg); font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2xs); cursor: pointer; }
.tf-btns button kbd { background: transparent; border-color: currentColor; color: inherit; }
.tf-yes { background: var(--color-accent-soft); color: var(--color-accent-soft-ink); border-color: var(--color-accent) !important; }
.tf-no { background: var(--color-paper-2); color: var(--color-ink); border-color: var(--color-ink) !important; }
.tf-btns button:hover { background: var(--color-paper-3); }
.tf-stage.flash-ok { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tf-stage.flash-bad { outline: 2px solid var(--color-error); outline-offset: 2px; }

/* ===== Ghép cặp ===== */
.match { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.match .col { display: grid; gap: var(--space-xs); align-content: start; min-width: 0; }
.tile { background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: 10px; padding: var(--space-sm) var(--space-md); text-align: left; font-size: var(--text-sm); min-height: 56px; overflow-wrap: anywhere; cursor: pointer; transition: border-color var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out); }
.tile:hover:not(.done) { border-color: var(--color-muted); }
.tile.sel { border-color: var(--color-accent); background: var(--color-accent-soft); }
.tile.done { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent-soft-ink); cursor: default; }
.tile.no { border-color: var(--color-error); background: var(--color-error-soft); }

/* ===== Thẻ nhớ ===== */
.flip { perspective: 1400px; cursor: pointer; border: 0; background: none; padding: 0; width: 100%; display: block; }
.flip-in { position: relative; min-height: 224px; transition: transform var(--dur-long) var(--ease-out); transform-style: preserve-3d; }
.flip.on .flip-in { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--radius-card); padding: var(--space-lg); display: flex; flex-direction: column; justify-content: center; gap: var(--space-sm); text-align: left; }
.front { background: var(--color-paper-2); border: 1px solid var(--color-rule); }
.back { background: var(--color-ink); color: var(--color-paper); transform: rotateY(180deg); }
.face .t { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.35; text-wrap: balance; }
.face .hint { font-size: var(--text-sm); color: var(--color-muted); }
.back .label, .back .hint { color: var(--color-paper); opacity: 0.8; }
.card-actions { display: flex; gap: var(--space-xs); justify-content: center; margin-top: var(--space-md); flex-wrap: wrap; }
input.cloze { font: inherit; font-weight: 700; border: 0; border-bottom: 2px solid var(--color-accent); background: var(--color-accent-soft); color: var(--color-ink); padding: var(--space-3xs) var(--space-xs); margin: 0 var(--space-3xs); text-align: center; border-radius: 4px 4px 0 0; }
input.cloze:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.bl-bar { height: 8px; background: var(--color-error-soft); border-radius: var(--radius-pill); overflow: hidden; margin-top: var(--space-2xs); }
.bl-bar i { display: block; height: 100%; background: var(--color-accent); }

/* ===== Thi thử ===== */
.ex-top { display: flex; gap: var(--space-sm); align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: 10px; padding: var(--space-xs) var(--space-md); position: sticky; top: 56px; z-index: var(--z-raised); }
.ex-time { font-family: var(--font-fig); font-variant-numeric: tabular-nums; font-size: var(--text-md); }
.ex-time.low { color: var(--color-error); font-weight: 600; }
.ex-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: var(--space-xs); margin: var(--space-sm) 0; }
.ex-nav button { min-height: 36px; border: 1px solid var(--color-rule); border-radius: 8px; background: var(--color-paper); font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--color-muted); cursor: pointer; }
.ex-nav button.now { border-color: var(--color-ink); color: var(--color-ink); font-weight: 700; }
.ex-nav button.did { background: var(--color-accent-soft); color: var(--color-accent-soft-ink); border-color: var(--color-accent); }
.ex-nav button.ok { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent-soft-ink); }
.ex-nav button.no { background: var(--color-error-soft); border-color: var(--color-error); color: var(--color-error-ink); }
.ex-chapter-box { display: grid; gap: var(--space-xs); margin-top: var(--space-sm); }
.ex-chapters { margin: 0; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule); border-radius: 10px; min-width: 0; }
.ex-chapter-tools { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-bottom: var(--space-2xs); }
.ex-chapter-tools .btn { min-height: 44px; }
.ex-ch { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-xs); align-items: center; min-height: 44px; padding: var(--space-2xs) 0; border-top: 1px solid var(--color-rule); font-size: var(--text-sm); }
.ex-ch:first-of-type { border-top: 0; }
.ex-ch input { width: 20px; height: 20px; margin: 0; }
.ex-ch.off { color: var(--color-muted); }
.ex-weak { margin-top: var(--space-sm); }
#ex-form .btn, #ex-form select, #ex-stage .btn { min-height: 44px; }

/* ===== Nút trợ lý nổi và ngăn trợ lý ===== */
.bot-fab { position: fixed; right: max(var(--space-md), env(safe-area-inset-right, 0px)); bottom: max(var(--space-md), env(safe-area-inset-bottom, 0px)); z-index: var(--z-sticky-nav); display: flex; align-items: center; gap: var(--space-sm); border: 0; border-radius: 10px; background: var(--color-ink); color: var(--color-paper); padding: var(--space-2xs) var(--space-md) var(--space-2xs) var(--space-2xs); font-weight: 600; font-size: var(--text-sm); cursor: pointer; }
.bot-fab:hover { background: var(--color-ink-2); }
.bot-fab .ic { width: 40px; height: 40px; border-radius: 8px; background: var(--color-paper); display: grid; place-items: center; flex: none; }
.bot-fab svg { width: 30px; height: 30px; overflow: visible; }
.bot-fab.open { display: none; }
.scrim { position: fixed; inset: 0; background: color-mix(in oklch, var(--color-ink) 45%, transparent); z-index: var(--z-modal); opacity: 0; pointer-events: none; transition: opacity var(--dur-short) var(--ease-out); }
.scrim.on { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; right: max(var(--space-md), env(safe-area-inset-right, 0px)); bottom: calc(max(var(--space-md), env(safe-area-inset-bottom, 0px)) + 72px); width: min(420px, calc(100% - 32px)); height: min(640px, calc(100svh - 150px)); z-index: calc(var(--z-modal) + 1); background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.drawer-head .who { display: flex; gap: var(--space-sm); align-items: center; }
.drawer-head .av { width: 36px; height: 36px; border-radius: 8px; background: var(--color-paper-3); display: grid; place-items: center; }
.drawer-head .av svg { width: 26px; height: 26px; }
.drawer-head b { font-size: var(--text-md); display: block; line-height: 1.2; letter-spacing: -0.02em; }
.drawer-head small { color: var(--color-muted); font-size: var(--text-xs); }
.x { min-width: 36px; min-height: 36px; border: 0; background: var(--color-paper-3); color: var(--color-ink); border-radius: 8px; font-size: var(--text-lg); line-height: 1; cursor: pointer; }
.x:hover { background: var(--color-rule); }
.suggest { display: flex; gap: var(--space-xs); overflow-x: auto; scrollbar-width: none; padding: var(--space-3xs); }
.suggest::-webkit-scrollbar { display: none; }
.suggest .chip { white-space: nowrap; }
.chat { display: flex; flex-direction: column; min-height: 0; flex: 1; background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); scrollbar-width: thin; scrollbar-color: var(--color-rule) transparent; }
.msg { max-width: 88%; padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); line-height: 1.6; overflow-wrap: anywhere; border-radius: 10px; }
.msg.me { align-self: flex-end; color: var(--color-paper); background: var(--color-ink); }
.msg.bot { align-self: flex-start; background: var(--color-paper); border: 1px solid var(--color-rule); color: var(--color-ink-2); }
.msg p { margin: 0 0 var(--space-xs); }
.msg p:last-child { margin: 0; }
.msg ul, .msg ol { margin: var(--space-2xs) 0; padding-left: var(--space-lg); }
.msg .src { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-xs); }
.msg::after { content: attr(data-tm); display: block; font-size: var(--text-xs); opacity: 0.7; margin-top: var(--space-2xs); }
.msg.me::after { text-align: right; }
.typing { display: inline-flex; gap: var(--space-2xs); padding: var(--space-2xs); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-muted); animation: dot 1.1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 80%, 100% { opacity: 0.4; } 40% { opacity: 1; } }
.chat-form { display: flex; gap: var(--space-xs); padding: var(--space-sm); background: var(--color-paper); align-items: center; border-top: 1px solid var(--color-rule); }
.chat-form textarea { flex: 1; font-size: var(--text-sm); line-height: 1.4; color: var(--color-ink); background: var(--color-paper-2); border: 1px solid var(--color-field); border-radius: 10px; padding: var(--space-sm) var(--space-md); resize: none; min-height: 44px; max-height: 96px; overflow-y: auto; }
.chat-form textarea:hover { border-color: var(--color-ink); }
.chat-form .btn { flex: none; }
#send { width: 44px; min-width: 44px; height: 44px; padding: 0; }
.mode { font-size: var(--text-xs); color: var(--color-muted); line-height: 1.5; }
.suggest .chip { background: var(--color-accent-soft); color: var(--color-accent-soft-ink); border-color: transparent; }
.suggest .chip:hover { border-color: var(--color-accent); }
.qa-list { margin: var(--space-xs) 0 var(--space-xs) var(--space-lg); padding: 0; }
.qa-list li { margin: var(--space-xs) 0; line-height: 1.5; }
.qa-more { margin-top: var(--space-2xs); }
.qa-detail { margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); }
.qa-note { margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }

/* ===== Thông báo nổi, pháo giấy, chân trang ===== */
.toast { position: fixed; left: 50%; top: var(--space-md); transform: translate(-50%, -200%); z-index: var(--z-toast); background: var(--color-ink); color: var(--color-paper); padding: var(--space-sm) var(--space-md); border-radius: 10px; font-weight: 600; font-size: var(--text-sm); box-shadow: none; visibility: hidden; transition: transform var(--dur-short) var(--ease-out); pointer-events: none; white-space: nowrap; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; }
.toast.show { transform: translate(-50%, 0); visibility: visible; box-shadow: none; }
.cf { position: fixed; width: 8px; height: 12px; border-radius: 2px; pointer-events: none; z-index: var(--z-toast); animation: cf 1.1s cubic-bezier(0.15, 0.7, 0.3, 1) forwards; }
.cf.round { border-radius: 50%; width: 7px; height: 7px; }
@keyframes cf { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 380px)) rotate(var(--r)); opacity: 0; } }
footer { margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); padding: var(--space-md) 0; border-top: 1px solid var(--color-rule); max-width: 68ch; }

/* ===== Màn nhỏ ===== */
@media (max-width: 620px) {
  .stat b { font-size: var(--text-xl); }
  .stat + .stat { padding-left: var(--space-sm); }
  .stat { padding-right: var(--space-sm); }
  .match { gap: var(--space-xs); }
  .law summary { grid-template-columns: auto minmax(0, 1fr) auto; }
  .law summary .chev { display: none; }
  .law .body { padding: 0 var(--space-md) var(--space-md); }
  .card { padding: var(--space-md); }
  .cats { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .tf-btns button { min-height: 56px; font-size: var(--text-md); }
  .bot-fab .tx { display: none; }
  .bot-fab { padding: var(--space-2xs); }
}

/* ===== Thanh đầu của các trang con ===== */
.topbar { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--color-paper); border-bottom: 1px solid var(--color-ink); padding: var(--space-sm) var(--space-md); }
.topbar .row { max-width: 760px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); flex-wrap: nowrap; }
.topbar h1 { font-size: var(--text-lg); max-width: none; letter-spacing: -0.03em; }
.topbar a { flex: none; white-space: nowrap; color: var(--color-ink-2); font-size: var(--text-sm); min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; border-bottom: 1px solid transparent; }
.topbar a:hover { border-bottom-color: var(--color-accent); }
.topbar .bar { max-width: 760px; margin: var(--space-xs) auto 0; }
.page { max-width: 760px; margin: 0 auto; padding: var(--space-lg) var(--space-md) var(--space-3xl); }

/* ===== Lý thuyết theo chương ===== */
.toc { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.toc button { min-height: 36px; padding: 0 var(--space-sm); border: 1px solid var(--color-rule); background: var(--color-paper); border-radius: var(--radius-pill); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 600; cursor: pointer; text-align: left; transition: background var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.toc button:hover { border-color: var(--color-muted); }
.toc button.on { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.chap h2 { font-size: var(--text-2xl); margin: var(--space-2xs) 0 var(--space-sm); max-width: 28ch; }
.goal { background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-sm) var(--space-md); margin: var(--space-md) 0 var(--space-lg); font-size: var(--text-md); color: var(--color-ink-2); }
.steps { border-top: 1px solid var(--color-ink); }
.step { border-bottom: 1px solid var(--color-rule); padding: var(--space-lg) 0; }
.step h3 { font-size: var(--text-lg); margin: 0 0 var(--space-sm); max-width: 36ch; }
.step p { margin: var(--space-xs) 0; font-size: var(--text-md); color: var(--color-ink-2); }
.step .label { margin-top: var(--space-md); font-weight: 600; font-size: var(--text-sm); color: var(--color-ink); }
.ex, .mistake { border-radius: 10px; padding: var(--space-sm) var(--space-md); font-size: var(--text-md); margin-top: var(--space-2xs); }
.ex { background: var(--color-accent-soft); color: var(--color-accent-soft-ink); }
.mistake { background: var(--color-paper-3); color: var(--color-ink); }
.src { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-sm); }
.verify { display: inline-flex; align-items: center; margin-top: var(--space-xs); font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-2); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-muted); padding: var(--space-3xs) var(--space-sm); }
.quiz, .lq { margin-top: var(--space-xl); background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-lg); }
.quiz h4, .lq h3 { font-size: var(--text-lg); margin: 0 0 var(--space-xs); font-weight: 700; letter-spacing: -0.02em; max-width: none; }
.quiz details { border-top: 1px solid var(--color-rule); padding: var(--space-sm) 0; font-size: var(--text-md); }
.quiz details:first-of-type { border-top: 0; }
.quiz summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.quiz summary:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; }
.quiz p { margin: var(--space-xs) 0 0; color: var(--color-ink-2); }
.lq .opt { width: 100%; margin: var(--space-xs) 0; }
.lq .fb { margin-top: var(--space-sm); font-size: var(--text-md); }
.lq .sc { font-weight: 700; color: var(--color-accent); margin-left: var(--space-sm); }
.lq .nav { margin-top: var(--space-sm); }
.nav { display: flex; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-lg); }
.nav button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ctl); padding: 0 var(--space-md); border-radius: 10px; font-weight: 600; font-size: var(--text-sm); border: 1px solid var(--color-ink); background: var(--color-ink); color: var(--color-paper); cursor: pointer; }
.nav button:hover:not(:disabled) { background: var(--color-ink-2); }
.page .note { text-align: left; margin-top: var(--space-xl); }
@media (max-width: 620px) {
  .toc { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--space-md) * -1); padding-inline: var(--space-md); }
  .toc::-webkit-scrollbar { display: none; }
  .toc button { white-space: nowrap; flex: none; }
}

/* ===== Tin cập nhật luật y tế ===== */
.guide { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); list-style: none; padding: 0; margin: var(--space-md) 0; font-size: var(--text-sm); color: var(--color-muted); }
.guide li { display: flex; align-items: center; gap: var(--space-xs); }
.updated { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-xs); }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-md) 0; }
.feed { border-top: 1px solid var(--color-ink); }
.news { padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-rule); }
.state { display: inline-flex; align-items: center; font-size: var(--text-xs); font-weight: 600; border-radius: var(--radius-pill); padding: var(--space-3xs) var(--space-sm); white-space: nowrap; }
.state.ban_hanh { background: var(--color-accent-soft); color: var(--color-accent-soft-ink); }
.state.ban_thao { background: var(--color-paper-3); color: var(--color-ink); }
.state.xac_minh { background: transparent; color: var(--color-muted); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-muted); }
.moc { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-xs); }
.news h2 { font-size: var(--text-xl); margin: var(--space-xs) 0; max-width: 36ch; letter-spacing: -0.03em; }
.news > p { font-size: var(--text-md); color: var(--color-ink-2); margin: var(--space-xs) 0; }
.news ul.pts { margin: var(--space-sm) 0 var(--space-sm) var(--space-lg); padding: 0; font-size: var(--text-md); color: var(--color-ink-2); }
.news ul.pts li { margin: var(--space-xs) 0; line-height: 1.55; }
.caution { background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: 10px; padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); margin: var(--space-sm) 0; }
.caution b { color: var(--color-ink); }
.srcs { margin-top: var(--space-md); font-size: var(--text-sm); }
.srcs h3 { font-size: var(--text-sm); color: var(--color-muted); font-weight: 600; letter-spacing: 0; margin: 0 0 var(--space-xs); }
.srcs ul { margin: 0; padding: 0; list-style: none; }
.srcs li { margin: var(--space-xs) 0; }
.srcs .meta { display: inline; color: var(--color-muted); font-size: var(--text-sm); }
.unv { background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-lg); margin-top: var(--space-xl); }
.unv h2 { font-size: var(--text-lg); margin: 0 0 var(--space-xs); max-width: none; }
.unv p.sub { font-size: var(--text-sm); color: var(--color-muted); margin: 0 0 var(--space-sm); }
.unv ul { margin: 0; padding: 0; list-style: none; }
.unv li { padding: var(--space-sm) 0; border-top: 1px solid var(--color-rule); font-size: var(--text-md); color: var(--color-ink-2); }
.unv li:first-child { border-top: 0; }
.unv li b { display: block; color: var(--color-ink); margin-bottom: var(--space-2xs); }
.empty, .err { border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-md) var(--space-lg); }

/* ===== Trang 404 ===== */
.lost { min-height: 100svh; display: grid; align-content: center; justify-items: start; gap: var(--space-md); max-width: 560px; margin: 0 auto; padding: var(--space-lg) var(--space-md); }
.lost-code { font-size: 6rem; font-weight: 700; letter-spacing: var(--tracking-display); line-height: 1; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--color-ink); padding-bottom: var(--space-md); width: 100%; }
.lost h1 { font-size: var(--text-2xl); max-width: none; }
.lost p { color: var(--color-muted); }
.lost .lost-code { color: var(--color-ink); }

/* ===== Ca trực phòng khám (clinic.html) ===== */
:root { --accent: var(--color-accent); --bg: var(--color-paper); --panel: var(--color-paper); --accent-ink: var(--color-accent-ink); --gold: var(--color-ink); }
.clinic { display: flex; flex-direction: column; align-items: center; padding: var(--space-sm) var(--space-sm) var(--space-xl); min-height: 100svh; }
.hud { width: min(97vw, 1900px); margin: 0 auto var(--space-sm); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-sm); border-bottom: 1px solid var(--color-ink); padding: var(--space-xs) 0 var(--space-sm); background: var(--color-paper); }
.hud h1 { font-size: var(--text-lg); max-width: none; letter-spacing: -0.03em; }
.hud-stats { display: flex; gap: var(--space-md); flex-wrap: wrap; align-items: center; font-size: var(--text-sm); color: var(--color-muted); }
.hud-fig { display: inline-flex; align-items: center; gap: var(--space-xs); }
.hud-fig b { color: var(--color-ink); font-variant-numeric: tabular-nums; }
.hud .btn, .small-btn { min-height: 36px; padding: 0 var(--space-sm); font-size: var(--text-xs); }
.small-btn { border: 1px solid var(--color-rule); border-radius: 8px; background: var(--color-paper-2); color: var(--color-ink); font-weight: 600; cursor: pointer; }
.small-btn:hover { background: var(--color-paper-3); border-color: var(--color-muted); }
.hud-ta { width: 100%; padding: var(--space-xs); border: 1px solid var(--color-rule); border-radius: 8px; font-size: var(--text-xs); background: var(--color-paper-2); color: var(--color-ink); }
.clinic main { width: min(97vw, 1900px); flex: 1; margin-inline: auto; }
.clinic .card { padding: var(--space-lg); }
.center { text-align: center; }
.center h2 { max-width: none; font-size: var(--text-2xl); margin: var(--space-2xs) 0 var(--space-sm); }
.center > p:not([class]) { margin-inline: auto; color: var(--color-muted); }
.clinic .row { justify-content: center; margin-top: var(--space-sm); }
.hint { font-size: var(--text-sm); color: var(--color-muted); text-align: left; margin: var(--space-xs) 0 0; line-height: 1.5; max-width: none; }
#audit-hint, #daily-hint { text-align: center; }
.clinic .note { border-top: 0; padding-top: 0; text-align: center; max-width: none; margin-top: var(--space-sm); }
.hidden { display: none !important; }
#scene { position: relative; width: 100%; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--color-rule); background: var(--color-paper-3); margin-bottom: var(--space-sm); line-height: 0; }
.fx { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); font-weight: 700; font-size: var(--text-md); color: var(--color-accent-soft-ink); background: var(--color-accent-soft); border-radius: var(--radius-pill); padding: var(--space-2xs) var(--space-sm); pointer-events: none; line-height: 1.2; }
.patient { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-sm); border-bottom: 1px solid var(--color-rule); padding-bottom: var(--space-sm); margin-bottom: var(--space-sm); }
.tag.verify { background: transparent; box-shadow: inset 0 0 0 var(--rule-hair) var(--color-muted); color: var(--color-ink-2); }
.tag.mode { background: var(--color-ink); color: var(--color-paper); }
.name { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.02em; margin: var(--space-xs) 0 0; }
.situation { font-size: clamp(1rem, 1.1vw, 1.2rem); line-height: 1.6; margin: var(--space-sm) 0 var(--space-md); max-width: 62ch; }
.kw { display: inline; padding: 0 var(--space-2xs); border-radius: 4px; font-weight: 700; }
.kw-red { background: var(--color-error-soft); color: var(--color-error-ink); }
.kw-orange { background: var(--color-paper-3); color: var(--color-ink); box-shadow: inset 0 -2px 0 var(--color-ink); }
.kw-blue { background: var(--color-accent-soft); color: var(--color-accent-soft-ink); }
.case-grid { display: grid; grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); gap: var(--space-md); align-items: start; }
@media (max-width: 860px) { .case-grid { grid-template-columns: 1fr; } }
.case-right { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.clinic .opt { font-size: clamp(1rem, 1.05vw, 1.15rem); line-height: 1.5; }
.ex-row { margin-top: var(--space-xs); line-height: 1.6; font-size: var(--text-sm); }
.ex-row span { font-weight: 700; color: var(--color-ink); }
.ex-row ul { margin: var(--space-2xs) 0 0 var(--space-lg); padding: 0; font-size: var(--text-sm); }
.feedback .src { font-size: var(--text-xs); margin-top: var(--space-xs); }
.next { margin-top: var(--space-sm); text-align: right; }
.list { text-align: left; margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); max-height: 220px; overflow: auto; }
.list div { padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); }
.section-title { margin: var(--space-xl) 0 var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--color-ink); font-size: var(--text-md); font-weight: 700; color: var(--color-ink); text-align: left; letter-spacing: -0.01em; }
.shop { display: grid; gap: 0; text-align: left; border-top: 1px solid var(--color-rule); }
.shop .it { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); border-bottom: 1px solid var(--color-rule); padding: var(--space-sm) 0; }
.shop .it b { display: block; font-size: var(--text-md); font-weight: 600; }
.shop .it small { display: block; color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-3xs); }
.shop button { min-height: var(--ctl); min-width: 104px; padding: 0 var(--space-md); border: 1px solid var(--color-ink); border-radius: 10px; background: transparent; color: var(--color-ink); font-weight: 600; font-size: var(--text-sm); cursor: pointer; white-space: nowrap; }
.shop button:hover:not(:disabled) { background: var(--color-paper-3); }
.codex { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 var(--space-lg); text-align: left; border-top: 1px solid var(--color-rule); }
.codex .row2 { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); border-bottom: 1px solid var(--color-rule); padding: var(--space-sm) 0; font-size: var(--text-sm); line-height: 1.35; }
.pill.done { background: var(--color-accent-soft); color: var(--color-accent-soft-ink); }
.pill.learn { background: var(--color-paper-3); color: var(--color-ink); }
.pill.none { background: transparent; color: var(--color-muted); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); }
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-sm); margin: var(--space-md) 0 var(--space-xs); text-align: left; }
.modecard { text-align: left; display: flex; flex-direction: column; gap: var(--space-2xs); background: var(--color-paper-2); color: var(--color-ink); border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-md); cursor: pointer; transition: border-color var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out); }
.modecard b { font-size: var(--text-md); font-weight: 700; letter-spacing: -0.01em; }
.modecard small { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.4; }
.modecard:hover:not(:disabled) { border-color: var(--color-ink); background: var(--color-paper-3); }
.modecard:disabled { background: var(--color-paper-3); }
#toast { position: fixed; left: 50%; bottom: var(--space-lg); transform: translate(-50%, 200%); opacity: 0; pointer-events: none; background: var(--color-ink); color: var(--color-paper); padding: var(--space-sm) var(--space-md); border-radius: 10px; font-size: var(--text-sm); font-weight: 600; transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); z-index: var(--z-toast); max-width: calc(100% - 32px); }
#toast.show { transform: translate(-50%, 0); opacity: 1; }
#board { margin-top: var(--space-xs); }
.brow { display: grid; grid-template-columns: 32px 1fr auto auto auto; gap: var(--space-xs); align-items: center; padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); font-size: var(--text-sm); }
.brow.top { font-weight: 700; }
.brow small { color: var(--color-muted); white-space: nowrap; }
.gfx-tabs { display: flex; gap: var(--space-xs); margin-bottom: var(--space-xs); flex-wrap: wrap; }
.shop .upg { display: flex; gap: var(--space-xs); flex-wrap: wrap; justify-content: flex-end; }
.shop button:disabled { opacity: .45; cursor: not-allowed; }

/* ===== Màu nhấn, khung câu hỏi, tính năng mới (clinic) ===== */
:root { --c-gold: oklch(60% 0.14 78); --c-green: oklch(52% 0.13 155); --c-blue: oklch(50% 0.04 60); --c-violet: oklch(52% 0.16 295); --c-orange: oklch(60% 0.16 48); --c-rose: oklch(56% 0.17 10); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --c-gold: oklch(82% 0.13 85); --c-green: oklch(80% 0.14 155); --c-blue: oklch(78% 0.04 60); --c-violet: oklch(78% 0.13 295); --c-orange: oklch(80% 0.14 55); --c-rose: oklch(78% 0.13 10); }
}
:root[data-theme="dark"] { --c-gold: oklch(82% 0.13 85); --c-green: oklch(80% 0.14 155); --c-blue: oklch(78% 0.04 60); --c-violet: oklch(78% 0.13 295); --c-orange: oklch(80% 0.14 55); --c-rose: oklch(78% 0.13 10); }
.f-gold b { color: var(--c-gold); } .f-inc b { color: var(--c-green); } .f-rep b { color: var(--c-blue); } .f-lvl b { color: var(--c-violet); } .f-streak b { color: var(--c-orange); }
.save-ind { color: var(--color-muted); font-size: var(--text-xs); }
.btn:not(.ghost):not(:disabled) { background: var(--color-action); border-color: var(--color-action); color: var(--color-action-ink); }
.btn:not(.ghost):hover:not(:disabled) { background: color-mix(in oklch, var(--color-accent) 85%, var(--color-ink)); border-color: transparent; }
.btn.danger { color: var(--color-error-ink); border-color: var(--color-error); }
.section-title { border-top: 2px solid var(--color-accent); }
.tag.mode { background: var(--color-accent); color: var(--color-accent-ink); }
#bar { background: var(--color-accent); }
#btn-start { border-left: 5px solid var(--c-blue); } #btn-start b { color: var(--c-blue); }
#btn-rush { border-left: 5px solid var(--c-orange); } #btn-rush b { color: var(--c-orange); }
#btn-audit { border-left: 5px solid var(--c-violet); } #btn-audit b { color: var(--c-violet); }
#btn-daily { border-left: 5px solid var(--c-green); } #btn-daily b { color: var(--c-green); }
#btn-cbl { border-left: 5px solid var(--c-rose); } #btn-cbl b { color: var(--c-rose); }
.modecard:disabled b { color: var(--color-muted); }

/* khung câu hỏi bên phải */
.case-right { background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-md); gap: var(--space-sm); }
.qhead { display: flex; align-items: center; }
.qlab { font-size: var(--text-xs); font-weight: 700; color: var(--color-accent-soft-ink); background: var(--color-accent-soft); border-radius: var(--radius-pill); padding: var(--space-3xs) var(--space-sm); }
.situation { font-size: clamp(1.1rem, 1.5vw, 1.4rem); font-weight: 600; line-height: 1.45; margin: var(--space-2xs) 0 var(--space-xs); padding-left: var(--space-sm); border-left: 4px solid var(--color-accent); max-width: none; }
.clinic .opt { min-height: 54px; border-width: 1.5px; box-shadow: 0 1px 0 color-mix(in oklch, var(--color-ink) 12%, transparent); transition: border-color var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.clinic .opt:hover:not(:disabled) { border-color: var(--color-accent); background: var(--color-accent-soft); transform: translateY(-1px); }
.clinic .opt .k { width: 32px; height: 32px; border-radius: 10px; font-size: var(--text-sm); font-weight: 800; color: var(--color-on-fill); }
.clinic .opt.o0 .k { background: var(--c-blue); } .clinic .opt.o1 .k { background: var(--c-violet); } .clinic .opt.o2 .k { background: var(--c-orange); } .clinic .opt.o3 .k { background: var(--c-green); }
.clinic .opt.right { background: var(--color-accent-soft); border-color: var(--color-accent); } .clinic .opt.right .k { background: var(--color-accent); color: var(--color-accent-ink); }
.clinic .opt.wrong { background: var(--color-error-soft); border-color: var(--color-error); } .clinic .opt.wrong .k { background: var(--color-error); }
.clinic .opt:disabled:not(.right):not(.wrong) { background: var(--color-paper-3); color: var(--color-muted); border-color: var(--color-rule); cursor: not-allowed; }
.feedback { margin-top: var(--space-xs); border-left: 5px solid currentColor; }
.feedback.ok { border-left-color: var(--color-accent); } .feedback.no { border-left-color: var(--color-error); }
.feedback .hd { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-md); }
.feedback .fi { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.feedback.ok .fi { background: var(--color-accent); color: var(--color-accent-ink); } .feedback.no .fi { background: var(--color-error); color: var(--color-on-fill); }

/* thưởng đăng nhập, sự kiện, thành tựu, thống kê, hướng dẫn */
.loginbox { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); text-align: left; background: var(--color-accent-soft); border: 1px solid var(--color-accent); border-radius: var(--radius-card); padding: var(--space-sm) var(--space-md); margin: var(--space-sm) auto; max-width: 760px; }
.loginbox b { display: block; } .loginbox small { color: var(--color-muted); }
#event-banner { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: var(--z-toast); background: var(--c-orange); color: var(--color-on-warm); font-weight: 700; font-size: var(--text-sm); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); box-shadow: var(--shadow-lift); max-width: calc(100vw - 24px); text-align: center; }
.ach, .statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-xs) var(--space-md); text-align: left; }
.ach-it { display: flex; gap: var(--space-sm); align-items: center; padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); opacity: .6; }
.ach-it.got { opacity: 1; }
.ach-it b { display: block; font-size: var(--text-sm); } .ach-it small { color: var(--color-muted); font-size: var(--text-xs); }
.ach-ic { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--color-paper-3); font-weight: 800; }
.ach-it.got .ach-ic { background: var(--c-gold); color: var(--color-on-warm); }
.stat-it { background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-sm) var(--space-md); }
.stat-it small { display: block; color: var(--color-muted); font-size: var(--text-xs); } .stat-it b { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
#tutorial { position: fixed; right: 14px; bottom: 14px; z-index: var(--z-modal); width: min(360px, calc(100% - 28px)); }
.tut-card { background: var(--color-paper); border: 2px solid var(--color-accent); border-radius: var(--radius-card); padding: var(--space-md); box-shadow: none; text-align: left; }
.tut-card small { color: var(--color-muted); } .tut-card h3 { margin: var(--space-3xs) 0 var(--space-xs); font-size: var(--text-md); } .tut-card p { font-size: var(--text-sm); line-height: 1.5; margin-bottom: var(--space-sm); }
.tut-card .row { justify-content: flex-end; margin-top: 0; gap: var(--space-xs); }

/* điện thoại */
@media (max-width: 640px) {
  .hud h1 { font-size: var(--text-md); }
  .hud-stats { gap: var(--space-xs) var(--space-sm); font-size: var(--text-xs); }
  .hud .btn, .small-btn { min-height: 34px; }
  .clinic .card { padding: var(--space-sm); }
  .staff-tag { display: none; }
  .room-sign { font-size: 8px; padding: 1px 5px; }
  .clinic .opt { min-height: 56px; }
  .shop .it { flex-wrap: wrap; } .shop .upg { justify-content: flex-start; }
  .loginbox { flex-direction: column; align-items: stretch; }
  .case-right { padding: var(--space-sm); }
  #tutorial { right: 8px; left: 8px; width: auto; bottom: 8px; }
}

/* Trạng thái bác bỏ (trang tham chiếu) */
.state.bac_bo { background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-ink); text-decoration: line-through; }

.acct { margin-left: auto; align-self: flex-start; }
.acct .linkbtn { font-size: var(--text-sm); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; display: inline-block; }

/* ===== Lộ trình theo vai trò ===== */
.role-card { display: grid; gap: var(--space-sm); }
.role-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.role-picker { display: grid; grid-template-columns: 1fr; gap: var(--space-xs); }
.role-btn { min-height: 48px; padding: var(--space-sm); text-align: left; border: 1px solid var(--color-rule); border-radius: 12px; background: var(--color-paper); color: var(--color-ink); font: inherit; cursor: pointer; }
.role-btn:hover { border-color: var(--color-ink); }
.role-btn[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-soft); }
.role-btn b { display: block; font-size: var(--text-sm); }
.role-btn span { display: block; margin-top: var(--space-3xs); color: var(--color-muted); font-size: var(--text-xs); line-height: 1.4; }
.role-summary { display: flex; justify-content: space-between; gap: var(--space-sm); align-items: baseline; flex-wrap: wrap; }
.role-ch { padding: var(--space-sm) 0; border-top: 1px solid var(--color-rule); }
.role-ch:first-child { border-top: 0; padding-top: 0; }
.role-ch-head { display: flex; justify-content: space-between; gap: var(--space-sm); align-items: baseline; }
.role-ch-head b { font-size: var(--text-sm); }
.role-ch .prog-bar { margin-top: var(--space-xs); }
.role-ch-actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-top: var(--space-xs); }
.role-ch-actions .btn, .role-ch-actions a.btn { min-height: 44px; }
.role-empty { margin: var(--space-2xs) 0 0; color: var(--color-muted); font-size: var(--text-sm); }
@media (min-width: 620px) { .role-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Trang chủ: khoảng cách và tiêu đề phần thống nhất, bỏ khung lồng nhau ===== */
.today, .remind { margin-top: var(--space-md); }
#tiendo, #analysis, #lotrinh-root, #ex-history { display: grid; gap: var(--space-md); }
.card > .label:first-child { display: block; font-size: var(--text-md); font-weight: 700; color: var(--color-ink); letter-spacing: -0.01em; padding-bottom: var(--space-xs); margin-bottom: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.card .card { background: none; border: 0; border-radius: 0; padding: 0; }

/* ===== Tinh chỉnh redesign: trạng thái focus rõ cho bàn phím, giảm chuyển động ===== */
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 6px; }
button, a, [role="tab"], summary { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ===== Ba giao diện chọn được: paper (biên tập sáng), ink (tối sắc), warm (ấm dịu) ===== */
:root[data-theme="paper"] { --color-action: #1F1A14; --color-action-ink: #FFFDF8; color-scheme: light; --color-paper: #F7F3EA; --color-paper-2: #FFFDF8; --color-paper-3: #EFE9DC; --color-ink: #1F1A14; --color-ink-2: #3D342A; --color-muted: #6F6356; --color-rule: #D9CFBE; --color-rule-2: #ECE5D6; --color-accent: #1F1A14; --color-accent-ink: #FFFDF8; --color-accent-soft: #EFE9DC; --color-accent-soft-ink: #1F1A14; --color-focus: #8A5A2B; --radius-card: 4px; --shadow-card: none; }
:root[data-theme="ink"] { --color-action: #E8E2D0; --color-action-ink: #0E0E0C; color-scheme: dark; --color-paper: #0E0E0C; --color-paper-2: #171714; --color-paper-3: #22221E; --color-ink: #F2EFE8; --color-ink-2: #D6D1C4; --color-muted: #9A9486; --color-rule: #34332D; --color-rule-2: #262520; --color-accent: #E8E2D0; --color-accent-ink: #0E0E0C; --color-accent-soft: #2A2A24; --color-accent-soft-ink: #F2EFE8; --color-focus: #E8E2D0; --radius-card: 4px; --shadow-card: none; }
:root[data-theme="warm"] { --color-action: #7A4A2B; --color-action-ink: #FFFFFF; color-scheme: light; --color-paper: #FBF7F0; --color-paper-2: #FFFFFF; --color-paper-3: #F3EDE2; --color-ink: #2B2118; --color-ink-2: #4A3F33; --color-muted: #7A6D5E; --color-rule: #DCD2C2; --color-rule-2: #EFE8DC; --color-accent: #3F6B4E; --color-accent-ink: #FFFFFF; --color-accent-soft: #E4EDE6; --color-accent-soft-ink: #23402E; --color-focus: #3F6B4E; }
.theme-row { display: flex; justify-content: flex-end; margin: 0 0 var(--space-sm); }
.theme-row label { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.theme-row select { min-height: 44px; padding: 0 var(--space-sm); border: 1px solid var(--color-rule); border-radius: 8px; background: var(--color-paper-2); color: var(--color-ink); font: inherit; }

/* ===== Thêm năm giao diện: sepia (giấy cũ), terra (đất nung), forest (rừng đêm), plum (mận), mono (trắng đen) ===== */
:root[data-theme="sepia"] { --color-action: #6B4E2E; --color-action-ink: #FBF5E6; color-scheme: light; --color-paper: #F4ECD8; --color-paper-2: #FBF5E6; --color-paper-3: #E9DFC6; --color-ink: #3B2F1E; --color-ink-2: #574630; --color-muted: #7D6B51; --color-rule: #D4C5A4; --color-rule-2: #E6DAC0; --color-accent: #6B4E2E; --color-accent-ink: #FBF5E6; --color-accent-soft: #E9DFC6; --color-accent-soft-ink: #3B2F1E; --color-focus: #6B4E2E; --radius-card: 6px; --shadow-card: none; }
:root[data-theme="terra"] { --color-action: #B4532A; --color-action-ink: #FFFFFF; color-scheme: light; --color-paper: #FAF1EA; --color-paper-2: #FFFFFF; --color-paper-3: #F4E3D7; --color-ink: #3A1F14; --color-ink-2: #5A3324; --color-muted: #876353; --color-rule: #E5CDBE; --color-rule-2: #F1E0D4; --color-accent: #B4532A; --color-accent-ink: #FFFFFF; --color-accent-soft: #F6DED1; --color-accent-soft-ink: #6B2E14; --color-focus: #B4532A; }
:root[data-theme="forest"] { --color-action: #C9B37A; --color-action-ink: #0F1A14; color-scheme: dark; --color-paper: #0F1A14; --color-paper-2: #15241B; --color-paper-3: #1D3026; --color-ink: #E6EFE8; --color-ink-2: #C6D5CA; --color-muted: #8DA293; --color-rule: #2F4A3B; --color-rule-2: #22372B; --color-accent: #A7D7B4; --color-accent-ink: #0F1A14; --color-accent-soft: #24402F; --color-accent-soft-ink: #DCF0E1; --color-focus: #A7D7B4; --radius-card: 8px; --shadow-card: none; }
:root[data-theme="plum"] { --color-action: #E7B8D8; --color-action-ink: #1E1424; color-scheme: dark; --color-paper: #1E1424; --color-paper-2: #2A1D33; --color-paper-3: #362843; --color-ink: #F3E9F5; --color-ink-2: #DCCBE0; --color-muted: #A893AD; --color-rule: #4A3A55; --color-rule-2: #362A41; --color-accent: #E7B8D8; --color-accent-ink: #1E1424; --color-accent-soft: #3F2C48; --color-accent-soft-ink: #F7E4F2; --color-focus: #E7B8D8; --radius-card: 8px; --shadow-card: none; }
:root[data-theme="mono"] { --color-action: #000000; --color-action-ink: #FFFFFF; color-scheme: light; --color-paper: #FFFFFF; --color-paper-2: #FFFFFF; --color-paper-3: #F2F2F2; --color-ink: #000000; --color-ink-2: #262626; --color-muted: #595959; --color-rule: #000000; --color-rule-2: #D9D9D9; --color-accent: #000000; --color-accent-ink: #FFFFFF; --color-accent-soft: #EDEDED; --color-accent-soft-ink: #000000; --color-focus: #000000; --radius-card: 0px; --shadow-card: none; }