/* ============================================================
   WebEdu — design tokens (gốc: WebConnectv2/assets/css/qbis-theme-mobile.css, không tự invent palette)
   --primary được EduBrand ghi đè theo trung tâm; các token dẫn xuất tính từ --primary-rgb.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');

:root {
  --primary: #2041B4;
  --primary-rgb: 32, 65, 180;
  --primary-hover: #1b3797;
  --primary-soft: rgba(32, 65, 180, 0.09);
  --primary-soft2: rgba(32, 65, 180, 0.16);
  --primary-line: rgba(32, 65, 180, 0.28);
  --on-primary: #fff;
  --navy: #14296B;
  --ink: #0F1E3D;
  --bg: #F4F7FC;
  --surface: #FFFFFF;
  --surface-2: #FAFBFD;
  --surface-3: #F0F3F9;
  --border: #E3E9F4;
  --border-strong: #CFD8E8;
  --field-line: #A9B6CE;
  --text-1: #0F1E3D;
  --text-2: #4C5B79;
  --text-3: #8494B0;
  --ok: #0F7A45;  --ok-soft: #E4F5EC;
  --warn: #B26A00; --warn-soft: #FFF3DC;
  --danger: #C81E1E; --danger-soft: #FDECEC;
  --info: #1A63C4; --info-soft: #E8F1FD;
  --teal: #0F9488;
  --accent-yellow: #FCDA0C;
  --accent-yellow-ink: #101C36;
  --accent-orange: #E67E22;
  --purple: #8E44AD;
  --r-sm: 8px; --r: 13px; --r-lg: 20px; --r-xl: 26px;
  --sh-1: 0 1px 2px rgba(15, 30, 61, .06);
  --sh-2: 0 4px 14px rgba(15, 30, 61, .08);
  --sh-3: 0 16px 44px rgba(15, 30, 61, .16);
  --sh-primary: 0 10px 26px rgba(32, 65, 180, .28);
  --ease: cubic-bezier(.2, 0, 0, 1);
  --font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace;
  --overlay: rgba(15, 30, 61, .42);
  --overlay-deep: rgba(10, 18, 36, .55);
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --nav-h: 52px;
  --tab-h: 58px;
  --fs-xs: 12px; --fs-sm: 13px; --fs: 15px; --fs-md: 17px; --fs-lg: 20px; --fs-xl: 24px; --fs-xxl: 28px;
}

/* Chế độ tối */
[data-dark] {
  --bg: #0D1526; --surface: #141E33; --surface-2: #18243C; --surface-3: #1E2B46;
  --border: #243454; --border-strong: #2F4166; --field-line: #4A5C80;
  --text-1: #EEF2FA; --text-2: #B3BFD6; --text-3: #7C8AA6;
  --ok-soft: rgba(15, 122, 69, .22); --warn-soft: rgba(178, 106, 0, .22); --danger-soft: rgba(200, 30, 30, .22); --info-soft: rgba(26, 99, 196, .22);
  --primary-soft: rgba(var(--primary-rgb), .18); --primary-soft2: rgba(var(--primary-rgb), .28);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .3); --sh-2: 0 4px 14px rgba(0, 0, 0, .35); --sh-3: 0 16px 44px rgba(0, 0, 0, .5);
  --overlay: rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* Chế độ giao diện HS: 1 Nhí (to, tròn, nhiều màu) · 3 Người lớn (gọn) */
[data-ui="1"] { --fs: 17px; --fs-sm: 15px; --fs-md: 19px; --fs-lg: 23px; --fs-xl: 28px; --r: 18px; --r-lg: 24px; --tab-h: 64px; }
[data-ui="3"] { --fs: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --r: 10px; --r-lg: 14px; }
/* Cỡ chữ người dùng chọn */
[data-font="lg"] { --fs: 17px; --fs-sm: 15px; --fs-md: 19px; --fs-lg: 22px; }
[data-font="xl"] { --fs: 19px; --fs-sm: 17px; --fs-md: 21px; --fs-lg: 24px; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font); font-size: var(--fs); line-height: 1.45;
  background: var(--bg); color: var(--text-1);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
input, select, textarea, button { font: inherit; color: inherit; }
a { color: var(--primary); text-decoration: none; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.edu-mono { font-family: var(--font-mono); }