/* ============================================================
   Bàn Học — nền chung: token, reset, và vài mảnh dùng ở mọi trang.
   Trang nào cũng nạp tệp này TRƯỚC tệp CSS riêng của nó, nên thứ tự
   thác đổ giữ nguyên như hồi mọi thứ còn nằm chung một tệp.
   Minimalism / Swiss: tương phản cao, theo lưới, tĩnh.
   ============================================================ */

:root {
  --primary: #2F6B4F;
  --on-primary: #FFFFFF;
  --primary-soft: #E8F0EA;
  --accent: #2F6B4F;
  --bg: #F6F5F2;
  --fg: #1A1A17;
  --card: #FFFFFF;
  --muted: #F1F0EB;
  --muted-fg: #5C5A52;
  --border: #E4E2DB;
  --border-strong: #CFCCC2;
  --danger: #A81F16;
  --warn: #9A5B0E;
  --ring: #2F6B4F;
  --shadow-sm: 0 1px 2px rgba(26, 26, 23, .07);
  --shadow-md: 0 4px 14px rgba(26, 26, 23, .10);
  --shadow-lg: 0 12px 32px rgba(26, 26, 23, .16);
  --scrim: rgba(47, 107, 79, .08);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* MOT thang bo goc cho ca hai trang: 9 nho / 14 vua / 18 lon.
     Truoc day ban doc dung 10-7 con trang chu 18, nhin ra hai thoi ky. */
  --radius-lg: 18px;
  --radius: 14px;
  --radius-sm: 9px;
  --bar-h: 56px;
  --divider-w: 12px;
  --left: 50%;
  --mid: 33%;
  --sidebar-w: 244px;

  --font-display: 'Geist', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Geist', 'Segoe UI', system-ui, sans-serif;
  /* Chu so trong lich, gio, dung luong: mono + tabular de cot so thang hang. */
  --font-mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* ease-in-out mac dinh bi cam. Duong cong nay ra nhanh, vao cham, giong
     vat the co khoi luong that. Giu 200ms: day la cong cu dung hang ngay,
     khong phai trang trinh dien, 700ms se thanh cham chap. */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --dur: 200ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #6FBF95;
    --on-primary: #0F1A14;
    --primary-soft: #16261E;
    --accent: #6FBF95;
    --bg: #12120F;
    --fg: #EDEBE4;
    --card: #1A1A16;
    --muted: #20201A;
    --muted-fg: #9B978B;
    --border: #2B2B24;
    --border-strong: #3E3E34;
    --danger: #F19A90;
    --warn: #E9B872;
    --ring: #6FBF95;
    --shadow-sm: 0 1px 2px rgba(6, 6, 4, .55);
    --shadow-md: 0 4px 14px rgba(6, 6, 4, .55);
    --shadow-lg: 0 12px 32px rgba(6, 6, 4, .62);
    --scrim: rgba(111, 191, 149, .12);
  }
}

:root[data-theme="dark"] {
  --primary: #6FBF95;
  --on-primary: #0F1A14;
  --primary-soft: #16261E;
  --accent: #6FBF95;
  --bg: #12120F;
  --fg: #EDEBE4;
  --card: #1A1A16;
  --muted: #20201A;
  --muted-fg: #9B978B;
  --border: #2B2B24;
  --border-strong: #3E3E34;
  --danger: #F19A90;
  --warn: #E9B872;
  --ring: #6FBF95;
  --shadow-sm: 0 1px 2px rgba(6, 6, 4, .55);
  --shadow-md: 0 4px 14px rgba(6, 6, 4, .55);
  --shadow-lg: 0 12px 32px rgba(6, 6, 4, .62);
  --scrim: rgba(111, 191, 149, .12);
}

*, *::before, *::after { box-sizing: border-box; }

/* Các quy tắc display bên dưới nằm sau UA stylesheet nên sẽ đè mất
   thuộc tính hidden nếu không có dòng này. */
[hidden] { display: none !important; }

html, body { height: 100%; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Chan chu mo coi mot minh o dong cuoi. */
h1, h2, h3 {
  font-family: var(--font-display); margin: 0; line-height: 1.25;
  text-wrap: balance;
}
p { text-wrap: pretty; }

button { font: inherit; color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-3); top: -100px; z-index: 60;
  background: var(--primary); color: var(--on-primary);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
  font-weight: 600; text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus-visible { top: var(--space-3); }

.ico { width: 18px; height: 18px; flex: none; display: block; }

:where(button, [tabindex], a):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Lời mời tải lại khi service worker vừa nạp xong bản mới. Nằm ở base.css vì
   pwa.js chạy trên cả ba trang; thêm vào CUỐI tệp nên style.css vẫn đè được. */
/* Căn giữa bằng left/right + margin auto. left:50% chỉ chừa nửa màn hình để
   dàn khối, nên ở 360px dòng chữ này vỡ làm ba. */
.update-bar {
  position: fixed; z-index: 70;
  left: var(--space-3); right: var(--space-3); bottom: var(--space-5);
  width: max-content; margin-inline: auto;
  max-width: min(92vw, 460px);
  padding: var(--space-3) var(--space-4);
  background: var(--primary); color: var(--on-primary);
  border: 0; border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.update-bar:hover { background: color-mix(in srgb, var(--primary) 88%, var(--fg)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}