/* Biến màu, font, reset. Đổi giao diện sáng/tối ở đây. */
:root {
  --ink: #0F1B3D; --ink-2: #33415C; --muted: #4A5873;
  --bg: #F4F6FB; --surface: #fff; --line: #DCE2F0; --grid: #E4E9F4;
  --accent: #2447C9; --accent-ink: #1B35A0; --accent-soft: #E6ECFF; --primary: #2447C9;
  --amber: #F5B83D; --warn-bg: #FFF3D1; --warn-line: #EBCB78; --warn-ink: #5B4100;
  --hero: #0F1B3D; --hero-muted: #C5CFEA;
  --shadow: 0 1px 2px rgba(15,27,61,.04), 0 8px 24px rgba(15,27,61,.06);
  --font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --header-h: 68px;
  color-scheme: light;
}
:root[data-theme='dark'] {
  --ink: #E8EDFB; --ink-2: #C5CFEA; --muted: #9FB0D6;
  --bg: #0B1226; --surface: #121C38; --line: #25325A; --grid: #162143;
  --accent: #7FA0FF; --accent-ink: #BCD0FF; --accent-soft: #1D2B57;
  --warn-bg: #2B2410; --warn-line: #5E4A16; --warn-ink: #F3DDA0;
  --hero: #070D1E;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol { margin: 0; }
button, input { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92em; background: var(--accent-soft); padding: 1px 6px; border-radius: 6px; }
.fm { font-family: var(--serif); font-style: italic; }
.loading, .empty { color: var(--muted); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#main:focus { outline: none; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--primary); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.skip:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}