/* Phông Be Vietnam Pro (tự lưu trên máy chủ, đã gộp thẳng vào đây để khỏi tốn thêm một lượt tải @import) */
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/bvp-QdVPSTAyLFyeg_IDWvOJmVES_Hw4BXoKZA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/bvp-QdVPSTAyLFyeg_IDWvOJmVES_Hw5BXoKZA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/bvp-QdVPSTAyLFyeg_IDWvOJmVES_Hw3BXo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/bvp-QdVMSTAyLFyeg_IDWvOJmVES_HTEJm86Rb0bcw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/bvp-QdVMSTAyLFyeg_IDWvOJmVES_HTEJm87Rb0bcw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/bvp-QdVMSTAyLFyeg_IDWvOJmVES_HTEJm81Rb0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/bvp-QdVMSTAyLFyeg_IDWvOJmVES_HToIW86Rb0bcw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/bvp-QdVMSTAyLFyeg_IDWvOJmVES_HToIW87Rb0bcw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/bvp-QdVMSTAyLFyeg_IDWvOJmVES_HToIW81Rb0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/bvp-QdVMSTAyLFyeg_IDWvOJmVES_HSMIG86Rb0bcw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/bvp-QdVMSTAyLFyeg_IDWvOJmVES_HSMIG87Rb0bcw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/bvp-QdVMSTAyLFyeg_IDWvOJmVES_HSMIG81Rb0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/bvp-QdVMSTAyLFyeg_IDWvOJmVES_HSQI286Rb0bcw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/bvp-QdVMSTAyLFyeg_IDWvOJmVES_HSQI287Rb0bcw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/bvp-QdVMSTAyLFyeg_IDWvOJmVES_HSQI281Rb0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================================================
   TDMUTOOL — giao diện dùng chung cho mọi phân hệ.
   File này được nạp SAU CÙNG trong mỗi trang phân hệ, nên ghi đè được kiểu cũ.
   - Khung chung (logo, tiêu đề, thanh phân hệ, chân trang) nằm ở shell.html.
   - Mỗi phân hệ chỉ còn phần chức năng; màu sắc, phông chữ, bo góc lấy từ đây.
   Thêm phân hệ mới: đặt <html data-mod="tên"> rồi thêm một khối ở cuối file này.
   ============================================================================ */
:root {
  --tdmu: #30409A;        /* xanh indigo — màu chủ đạo */
  --tdmu-dark: #232F73;
  --tdmu-sky: #42ADE2;    /* xanh sáng — màu nhấn */
  --tdmu-light: #ECEEF6;
  --tt-ink: #2B2A27;      /* chữ: xám ấm đậm, không đen tuyền */
  --tt-muted: #6B675F;
  --tt-line: #E3DFD6;     /* đường kẻ: xám ấm */
  --tt-bg: #F6F4EF;       /* nền: trắng ngà */
  --tt-radius: 10px;
  --font-serif: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Georgia, 'Times New Roman', serif;   /* serif hệ thống: không phải tải phông ngoài */
  --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --tdmu-darker: #1B2560; --tdmu-2: #3A4BAE; --tdmu-mid: #C9D3F2; --tdmu-sky-2: #6CC4EC; --tdmu-sky-3: #BFE6FA;
  --tdmu-side2: #2A3787;
  color-scheme: light;
}
html[data-mod] body { font-family: 'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif; }

/* ---------- Rút gọn link (index.html) ---------- */
html[data-mod="links"] { --bg: var(--tt-bg); --card: #fff; --text: var(--tt-ink); --muted: var(--tt-muted); --brand: var(--tdmu); --line: var(--tt-line); --bar: #AEB9E8; }
html[data-mod="links"] .card { border-radius: var(--tt-radius); box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 8px 22px rgba(48,64,154,.08); }
html[data-mod="links"] h1 span { color: var(--tdmu-sky); }

/* ---------- Tạo mã QR ---------- */
html[data-mod="qr"] header,
html[data-mod="qr"] footer { display: none !important; }
html[data-mod="qr"] .app { grid-template-rows: 1fr !important; }

/* ---------- Công cụ PDF ---------- */
html[data-mod="pdf"] {
  --tdmu-primary: var(--tdmu); --tdmu-primary-2: var(--tdmu-2); --tdmu-secondary: var(--tdmu-sky); --tdmu-cyan: var(--tdmu-sky);

  --bg: var(--tt-bg); --border: var(--tt-line); --text: var(--tt-ink); --text-2: #475569; --muted: var(--tt-muted);
  --glow: 0 0 0 4px rgba(66,173,226,.2);
}
html[data-mod="pdf"] #app-header,
html[data-mod="pdf"] #app-footer { display: none !important; }
html[data-mod="pdf"] #app-shell { min-height: 100vh; }
html[data-mod="pdf"] #sidebar { background: #fff; border-right: 1px solid var(--tt-line); }
html[data-mod="pdf"] .sidebar-title { color: var(--tt-muted); }
html[data-mod="pdf"] .sidebar-title::after { background: var(--tt-line); }
html[data-mod="pdf"] .sidebar-btn { color: var(--tt-ink); }
html[data-mod="pdf"] .sidebar-btn .ico { color: var(--tdmu); }
html[data-mod="pdf"] .sidebar-btn small { color: var(--tt-muted); }
html[data-mod="pdf"] .sidebar-btn:hover { background: var(--tdmu-light); border-color: var(--tt-line); color: var(--tdmu-dark); }
html[data-mod="pdf"] .sidebar-btn:hover .ico { color: var(--tdmu); }
html[data-mod="pdf"] .sidebar-btn.active { background: var(--tdmu-light); border-color: var(--tdmu-mid); color: var(--tdmu); box-shadow: none; }
html[data-mod="pdf"] .sidebar-btn.active::before { background: var(--tdmu-sky); box-shadow: none; }
html[data-mod="pdf"] .sidebar-btn.active .ico { color: var(--tdmu); }
html[data-mod="pdf"] .sidebar-btn.active small { color: var(--tt-muted); }
html[data-mod="pdf"] #quota-box { color: var(--tt-muted); }
html[data-mod="pdf"] #quota-box b { color: var(--tdmu-dark); }
html[data-mod="pdf"] #sidebar::-webkit-scrollbar-thumb { background: #CBD5E1; }

/* ---------- Soạn văn bản hành chính ---------- */
html[data-mod="vb"] {
  --clr-teal: var(--tdmu); --clr-teal-dk: var(--tdmu-dark); --clr-teal-lt: var(--tdmu-light);
  --clr-bg: var(--tt-bg); --clr-border: var(--tt-line); --clr-text: var(--tt-ink); --clr-muted: var(--tt-muted); --radius: 10px;
}
html[data-mod="vb"] .header-logo,
html[data-mod="vb"] .header-title,
html[data-mod="vb"] .dtk-footer,
html[data-mod="vb"] #btnDark { display: none !important; }
html[data-mod="vb"] .header-badge { border-color: var(--tdmu-mid); }

/* ---------- Khung video Moodle ---------- */
html[data-mod="moodle"] {
  --bg: var(--tt-bg); --panel: #fff; --ink: var(--tt-ink); --muted: var(--tt-muted); --line: var(--tt-line); --accent: var(--tdmu); --ok: #15A06B;
}
html[data-mod="moodle"] .brand img,
html[data-mod="moodle"] header h1 { display: none; }
html[data-mod="moodle"] .wrap { padding-top: 16px; }
html[data-mod="moodle"] .panel { border-radius: var(--tt-radius); box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 8px 22px rgba(48,64,154,.06); }

/* ---------- Random lồng cầu ---------- */
html[data-mod="longcau"] .app-header { display: none !important; }

/* ============================================================================
   ĐỒNG BỘ CHUNG cho mọi phân hệ: thanh cuộn, vùng chọn, viền focus, cỡ chữ
   ============================================================================ */
html[data-mod] { scrollbar-width: thin; scrollbar-color: #B9C5E3 transparent; -webkit-text-size-adjust: 100%; }
html[data-mod] ::selection { background: rgba(66, 173, 226, .30); }
html[data-mod] ::-webkit-scrollbar { width: 11px; height: 11px; }
html[data-mod] ::-webkit-scrollbar-track { background: transparent; }
html[data-mod] ::-webkit-scrollbar-thumb { background: #C3CDE6; border: 3px solid transparent; background-clip: content-box; border-radius: 10px; }
html[data-mod] ::-webkit-scrollbar-thumb:hover { background: #9FB0DB; background-clip: content-box; }
html[data-mod] :focus-visible { outline: 2px solid var(--tdmu-sky); outline-offset: 2px; }
html[data-mod] a { text-underline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html[data-mod] * { scroll-behavior: auto !important; } }

/* ---------- Random lồng cầu: nền phẳng như các phân hệ khác ---------- */
html[data-mod="longcau"] body { background: var(--tt-bg); }

/* ---------- Soạn văn bản hành chính: ẩn nút cần dịch vụ Google (PDF, Drive) ---------- */
html[data-mod="vb"] button[onclick="xuatPDF()"],
html[data-mod="vb"] button[onclick="xuatVaLuuDrive()"],
html[data-mod="vb"] div:has(> button[onclick="xuatPDF()"]) { display: none !important; }

/* ---------- Soạn văn bản Đảng: đổi tông đỏ-vàng đồng sang xanh TDMU (giữ nguyên bản xem trước A4) ---------- */
html[data-mod="vbdang"] {
  --red: var(--tdmu); --red-deep: var(--tdmu-dark); --red-darker: var(--tdmu-darker); --red-hover: var(--tdmu-2);
  --gold: var(--tdmu-sky); --gold-lt: var(--tdmu-sky-2); --gold-pale: var(--tdmu-sky-3); --gold-faint: rgba(66, 173, 226, .16); --gold-rule: rgba(66, 173, 226, .40);
  --bg: #F5F8FC; --surface: #FFFFFF; --surface-2: #E8EEF8; --surface-3: #F5F8FC; --paper: #FFFFFF;
  --ink: #334155; --ink-2: #475569; --ink-3: #64748B;
  --bd: #E2E8F0; --bd-lt: #EDF1F7; --bd-strong: #CBD5E1;
  --sb: var(--tdmu-dark); --sb-top: var(--tdmu); --sb-gold: var(--tdmu-sky-2);
  --display: 'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif; --sans: 'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif;
  --hdr-h: 52px; --ft-h: 0px;
}
html[data-mod="vbdang"] .ft { display: none !important; }
html[data-mod="vbdang"] .hdr { box-shadow: 0 4px 16px rgba(35, 47, 115, .18); }
html[data-mod="vbdang"] body { background: var(--tt-bg); }

/* ---------- Rút gọn link: đầu trang tự xuống dòng trên màn hình hẹp ---------- */
html[data-mod="links"] header { flex-wrap: wrap; }
html[data-mod="links"] header > div:last-child { margin-left: auto; }
@media (max-width: 520px) { html[data-mod="links"] .wrap { padding: 20px 12px; } html[data-mod="links"] h1 { font-size: 24px; } }
/* Tài khoản (đăng nhập, đổi mật khẩu, quản lý tài khoản) nay nằm ở khung chung: ẩn bản cũ trong trang */
html[data-mod="links"] #whoami, html[data-mod="links"] #btnUsers, html[data-mod="links"] #btnPw, html[data-mod="links"] #logout { display: none !important; }

/* ---------- Công cụ PDF: thẻ "Xử lý tại trình duyệt" (nền cũ tối, nay nền sáng) ---------- */
html[data-mod="pdf"] #sidebar .pill { background: var(--tdmu-light); color: var(--tdmu); border: 1px solid var(--tdmu-mid); }
html[data-mod="pdf"] #sidebar .pill::before { background: var(--tdmu-sky); }

/* ---------- Soạn văn bản Hội Sinh viên: đổi tông cyan HSV sang xanh TDMU, bỏ đầu trang/credit riêng ---------- */
html[data-mod="hsv"] {
  --c-primary: var(--tdmu); --c-primary-dark: var(--tdmu-dark); --c-primary-light: var(--tdmu-light);
  --c-header: var(--tdmu); --c-sidebar: var(--tdmu-dark); --c-sidebar-hover: var(--tdmu-2); --c-sidebar-active: var(--tdmu);
  --c-accent: var(--tdmu-sky);
  --c-bg: var(--tt-bg); --c-border: var(--tt-line); --c-border-focus: var(--tdmu-sky);
  --c-text: var(--tt-ink); --c-muted: var(--tt-muted); --c-subtle: #94A3B8;
}
/* Cuộn được phần biểu mẫu: các thẻ không bị co lại khi chiều cao khung xem nhỏ; vùng làm việc vừa khít khung (đã có đầu trang riêng) */
html[data-mod="hsv"] #form-scroll-area > * { flex-shrink: 0; }
html[data-mod="hsv"] #app-body { box-sizing: border-box; }
html[data-mod="hsv"] #header-logo, html[data-mod="hsv"] #logo-img, html[data-mod="hsv"] #header-title,
html[data-mod="hsv"] .sidebar-credit, html[data-mod="hsv"] button[onclick="openSpreadsheet()"] { display: none !important; }

/* ---------- Soạn văn bản Đoàn: đổi tông đỏ Đoàn sang xanh TDMU, bỏ đầu/chân trang riêng ---------- */
html[data-mod="doan"] {
  --brand: var(--tdmu); --brand-deep: var(--tdmu-dark); --brand-dark: var(--tdmu-darker); --sky: var(--tdmu-light); --sky-mid: var(--tdmu-mid); --gold: var(--tdmu-sky);
  --text: var(--tt-ink); --text-soft: #475569; --text-muted: var(--tt-muted);
  --border: rgba(48, 64, 154, .14); --border-act: rgba(48, 64, 154, .32); --bg: var(--tt-bg);
  --sh-sm: 0 1px 4px rgba(35, 47, 115, .08); --sh-md: 0 4px 16px rgba(35, 47, 115, .11);
}
html[data-mod="doan"] .app-bar, html[data-mod="doan"] .app-footer { display: none !important; }
/* ---------- Khung video Moodle: dãy tab cuộn ngang thay vì làm tràn trang trên điện thoại ---------- */
html[data-mod="moodle"] header > div { min-width: 0; max-width: 100%; }
html[data-mod="moodle"] .tabs { display: flex; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
html[data-mod="moodle"] .tab { flex: 0 0 auto; }
html[data-mod="moodle"] .brand { min-width: 0; }
html[data-mod="moodle"] pre { max-width: 100%; }
@media (max-width: 700px) { html[data-mod="moodle"] .wrap { padding: 12px 12px 36px; } html[data-mod="moodle"] .row { grid-template-columns: 1fr; } }
/* ---------- Random lồng cầu: trên điện thoại / máy tính bảng dọc đưa phần quay lên đầu trang ---------- */
@media (max-width: 820px) { html[data-mod="longcau"] .col-center { order: -1; } }
/* ============================================================================
   GIAO DIỆN (chọn ở thanh trên cùng): mỗi giao diện chỉ đổi các biến màu; mặc định là :root ở đầu file
   ============================================================================ */
/* Giao diện tối: khung chung dùng biến màu; nội dung phân hệ (iframe) được đảo màu ở shell.html */

/* ============================================================================
   GIAO DIỆN ĐẶC BIỆT: ngoài đổi màu còn đổi kiểu dáng (phông chữ, bo góc, viền, hoa văn đầu trang)
   win7 · win98 · valentine · socola · trendy · tet
   ============================================================================ */

/* ---------- Windows 7 (Aero): kính xanh bóng, góc vuông nhẹ, chữ Segoe UI ---------- */

/* ---------- Windows 98 cổ điển: xám nổi, thanh tiêu đề xanh navy ---------- */
html[data-theme="win98"] body, html[data-theme="win98"] button, html[data-theme="win98"] input, html[data-theme="win98"] select, html[data-theme="win98"] textarea { font-family: Tahoma, 'MS Sans Serif', Arial, sans-serif !important; }
html[data-theme="win98"] .theme-chip, html[data-theme="win98"] .user-chip, html[data-theme="win98"] .burger, html[data-theme="win98"] button, html[data-theme="win98"] .btn { border-radius: 0 !important; box-shadow: none; }
html[data-theme="win98"] .theme-chip, html[data-theme="win98"] .burger { background: #C0C0C0; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff; }
html[data-theme="win98"] .theme-chip:hover, html[data-theme="win98"] .burger:hover { background: #D4D0C8; }
html[data-theme="win98"] .logo-plate, html[data-theme="win98"] .flogo { border-radius: 0; border: 2px solid; border-color: #808080 #fff #fff #808080; }
html[data-theme="win98"] .tmenu, html[data-theme="win98"] .more-menu, html[data-theme="win98"] .menu, html[data-theme="win98"] dialog, html[data-theme="win98"] .card, html[data-theme="win98"] .panel { border-radius: 0 !important; background: #C0C0C0; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: none; }
html[data-theme="win98"] input, html[data-theme="win98"] select, html[data-theme="win98"] textarea { border-radius: 0 !important; border: 2px solid; border-color: #808080 #fff #fff #808080; background: #fff; }

/* ---------- Valentine: hồng đỏ, trái tim ---------- */

/* ---------- Socola: nâu socola, kem, ô vuông như thanh socola ---------- */


/* ---------- Tết: đỏ – vàng ---------- */

/* ---------- Động vật: xanh rừng, nâu đất, dấu chân thú ---------- */

/* ---------- Chibi: pastel hồng–xanh–tím, sao và mây dễ thương, bo tròn tối đa ---------- */

/* ---------- Halloween: tím đen, cam bí ngô, dơi bay, mạng nhện ---------- */

/* ============================================================================
   BỐN MÙA: màu theo mùa + hoa văn đầu trang + hiệu ứng rơi (theme-fx.js)
   ============================================================================ */
/* ---------- Màn hình cảm ứng: nút/ô nhập đủ lớn để bấm bằng ngón tay (tối thiểu ~36px) ---------- */
@media (pointer: coarse) {
  html[data-mod="vb"] button, html[data-mod="vb"] select, html[data-mod="vb"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  html[data-mod="vbdang"] button, html[data-mod="vbdang"] select, html[data-mod="vbdang"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  html[data-mod="admin"] button, html[data-mod="admin"] select, html[data-mod="admin"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=number]),
  html[data-mod="mascot"] button, html[data-mod="longcau"] button, html[data-mod="lich"] .btn, html[data-mod="office"] .btn, html[data-mod="doan"] .mini, html[data-mod="doan"] .add { min-height: 36px; }
  html[data-mod="admin"] table input[type=checkbox], html[data-mod="vb"] input[type=checkbox], html[data-mod="vbdang"] input[type=checkbox] { width: 20px; height: 20px; }
  html[data-mod="admin"] td, html[data-mod="admin"] th { padding-top: 10px; padding-bottom: 10px; }
}

/* ============================================================================
   Phong cách biên tập (2.4): phẳng, ít khối bo góc, nhấn có chủ đích
   - Tiêu đề: serif (Newsreader). Số liệu và nhãn trạng thái kỹ thuật: monospace, dùng tiết chế.
   - Không dùng gradient/viền phát sáng làm nền; bóng đổ rất nhẹ.
   ============================================================================ */
html[data-mod="home"] h1, html[data-mod="home"] h2.sec,
html[data-mod="weather"] h1, html[data-mod="monan"] h1, html[data-mod="henho"] h1,
html[data-mod="admin"] h1, html[data-mod="chat"] h1, html[data-mod="stranger"] h1,
html[data-mod="weather"] .card h2, html[data-mod="monan"] .card h2, html[data-mod="henho"] .card h2, html[data-mod="admin"] .card h2 { font-family: var(--font-serif); font-weight: 600; letter-spacing: -.01em; }
html[data-mod="weather"] .tile b, html[data-mod="weather"] .h .t, html[data-mod="weather"] .h .d, html[data-mod="weather"] .h .p, html[data-mod="weather"] .day .p, html[data-mod="weather"] .rng,
html[data-mod="weather"] .hero .upd, html[data-mod="monan"] .env, html[data-mod="admin"] .tile b, html[data-mod="admin"] .tag, html[data-mod="henho"] .token { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.nbadge, .gc { font-family: var(--font-mono); }
/* khung tải sạch sẽ: khối xám nhạt + các bước thực hiện rõ ràng (thay cho hiệu ứng lấp lánh) */
.skel { background: var(--tdmu-light); border-radius: 8px; animation: skelPulse 1.6s ease-in-out infinite; }
@keyframes skelPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
.steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--tt-muted); }
.steps li { display: flex; gap: 8px; align-items: center; }
.steps li::before { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--tt-line); flex: 0 0 auto; }
.steps li.on { color: var(--tt-ink); font-weight: 600; }
.steps li.on::before { border-color: var(--tdmu); background: var(--tdmu); }
.steps li.done { color: var(--tt-muted); }
.steps li.done::before { border-color: #16A34A; background: #16A34A; }
.stepbar { height: 3px; background: var(--tt-line); border-radius: 2px; overflow: hidden; margin-top: 10px; }
.stepbar i { display: block; height: 100%; width: 0; background: var(--tdmu); transition: width .35s ease; }

/* === THEMES v3 START === (sinh tự động bởi tools/build-themes.js — đừng sửa tay) */
/* Lớp làm phẳng chung: bỏ gradient, phát sáng, bóng đổ, kính mờ, hoa văn đầu trang của các chủ đề cũ */
html .top { background: var(--tdmu-dark) !important; box-shadow: none !important; text-shadow: none !important; border-radius: 0 !important; border-bottom: 0 !important; animation: none !important; }
html .top::after, html .top::before { content: none !important; }
html .titles b, html .titles b span { text-shadow: none !important; color: inherit !important; }
html .logo-plate, html .flogo { box-shadow: none !important; }
html .theme-chip, html .user-chip, html .burger { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; background-image: none !important; }
html .user-chip:not(.on) { background: var(--tdmu-sky) !important; color: var(--tt-on-accent, #0B1530) !important; border-color: transparent !important; animation: none !important; }
html .user-chip:not(.on):hover { background: var(--tdmu-2) !important; color: #fff !important; }
html .ghead { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; }
html .nav a.drop-before::before, html .nav a.drop-after::after { box-shadow: none !important; }
/* không dùng phông đơn cách cho nhãn/số: chữ thường, chữ số đều hàng */
:root { --font-mono: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.nbadge, .gc, html[data-mod] .tile b, html[data-mod] .tag { font-variant-numeric: tabular-nums; letter-spacing: 0; }
/* chủ đề tối: menu, hộp thoại, ô nhập theo mặt phụ của chủ đề */
html.theme-dark .tmenu, html.theme-dark .more-menu, html.theme-dark .menu, html.theme-dark dialog { background: var(--tt-surface) !important; color: var(--tt-ink); border-color: var(--tt-line); }
html.theme-dark dialog input, html.theme-dark dialog select, html.theme-dark dialog textarea { background: var(--tt-bg); color: var(--tt-ink); border-color: var(--tt-line); }
html.theme-dark #frame:not(.native-dark) { filter: invert(.9) hue-rotate(180deg); }
/* Mặc định TDMU — màu nhận diện TDMU trên nền trắng lạnh (thay nền kem cũ) */
:root, html[data-theme=""] { --tdmu: #24317F; --tdmu-dark: #24317F; --tdmu-darker: #192259; --tdmu-2: #434E91; --tdmu-sky: #42ADE2; --tdmu-sky-2: #89CAEA; --tdmu-sky-3: #C8E3F2; --tdmu-light: #E8EAF0; --tdmu-mid: #BABED5; --tdmu-side2: #202B70; --tt-bg: #F4F5F7; --tt-surface: #E8EAF0; --tt-ink: #15171C; --tt-muted: #5B606C; --tt-line: #D0D1D4; --tt-on-accent: #0B1530; --tt-radius: 8px; }
/* Than chì — putty-black-teal */
html[data-theme="graphite"] { --tdmu: #121212; --tdmu-dark: #121212; --tdmu-darker: #0D0D0D; --tdmu-2: #333333; --tdmu-sky: #256F82; --tdmu-sky-2: #6F9AA2; --tdmu-sky-3: #B0BFBF; --tdmu-light: #D3CEC6; --tdmu-mid: #A5A29D; --tdmu-side2: #101010; --tt-bg: #DEDAD3; --tt-surface: #D3CEC6; --tt-ink: #0A0A0A; --tt-muted: #55524D; --tt-line: #BCB9B3; --tt-on-accent: #FFFFFF; --tt-radius: 8px; }
/* Giấy báo — paper-grey-brass */
html[data-theme="bao"] { --tdmu: #181715; --tdmu-dark: #181715; --tdmu-darker: #11100F; --tdmu-2: #383736; --tdmu-sky: #BFB21A; --tdmu-sky-2: #CFC86A; --tdmu-sky-3: #DEDBB1; --tdmu-light: #DCDCD6; --tdmu-mid: #AEADA9; --tdmu-side2: #151412; --tt-bg: #E8E8E3; --tt-surface: #DCDCD6; --tt-ink: #181715; --tt-muted: #5C5B55; --tt-line: #C7C7C2; --tt-on-accent: #181715; --tt-radius: 8px; }
/* Ba sắc đá — three-stones */
html[data-theme="stones"] { --tdmu: #333231; --tdmu-dark: #333231; --tdmu-darker: #242322; --tdmu-2: #504F4E; --tdmu-sky: #5C6B54; --tdmu-sky-2: #969F90; --tdmu-sky-3: #CACCC5; --tdmu-light: #E4E1DD; --tdmu-mid: #BAB8B6; --tdmu-side2: #2D2C2B; --tt-bg: #EEECEA; --tt-surface: #E4E1DD; --tt-ink: #333231; --tt-muted: #6A6763; --tt-line: #D0CECC; --tt-on-accent: #FFFFFF; --tt-radius: 8px; }
/* Đỏ tín hiệu — white-signal-red */
html[data-theme="signal"] { --tdmu: #0A0A0A; --tdmu-dark: #0A0A0A; --tdmu-darker: #070707; --tdmu-2: #2C2C2C; --tdmu-sky: #D92B21; --tdmu-sky-2: #E8807A; --tdmu-sky-3: #F6CAC8; --tdmu-light: #F2F2F2; --tdmu-mid: #BABABA; --tdmu-side2: #090909; --tt-bg: #FFFFFF; --tt-surface: #F2F2F2; --tt-ink: #0A0A0A; --tt-muted: #5F5F5F; --tt-line: #D8D8D8; --tt-on-accent: #FFFFFF; --tt-radius: 8px; }
/* Bản vẽ kỹ thuật — stone-blueprint */
html[data-theme="blueprint"] { --tdmu: #1E46B3; --tdmu-dark: #1E46B3; --tdmu-darker: #15317D; --tdmu-2: #3E60BE; --tdmu-sky: #2456D6; --tdmu-sky-2: #6F8CD8; --tdmu-sky-3: #B0BCDA; --tdmu-light: #D3D2CE; --tdmu-mid: #A9B3D0; --tdmu-side2: #1A3E9E; --tt-bg: #DFDEDB; --tt-surface: #D3D2CE; --tt-ink: #26251E; --tt-muted: #5D5C55; --tt-line: #C1C0BD; --tt-on-accent: #FFFFFF; --tt-radius: 8px; }
/* Xanh coban — cool-grey-cobalt */
html[data-theme="ocean"] { --tdmu: #1A26C4; --tdmu-dark: #1A26C4; --tdmu-darker: #121B89; --tdmu-2: #3A44CC; --tdmu-sky: #1F2DE6; --tdmu-sky-2: #727BEB; --tdmu-sky-3: #BABFF0; --tdmu-light: #E2E5EA; --tdmu-mid: #B3B7E6; --tdmu-side2: #1721AC; --tt-bg: #EEF0F3; --tt-surface: #E2E5EA; --tt-ink: #0B0C0E; --tt-muted: #565B66; --tt-line: #CACCCE; --tt-on-accent: #FFFFFF; --tt-radius: 8px; }
/* Xanh ngọc — cool-white-slate */
html[data-theme="teal"] { --tdmu: #0B5F69; --tdmu-dark: #0B5F69; --tdmu-darker: #08434A; --tdmu-2: #2D757E; --tdmu-sky: #0D7480; --tdmu-sky-2: #6BA9B1; --tdmu-sky-3: #BDD8DC; --tdmu-light: #ECF0F2; --tdmu-mid: #B5CED1; --tdmu-side2: #0A545C; --tt-bg: #F7F9FA; --tt-surface: #ECF0F2; --tt-ink: #1F3038; --tt-muted: #566870; --tt-line: #D4D9DB; --tt-on-accent: #FFFFFF; --tt-radius: 8px; }
/* Xương, lá, socola — green-mat-chocolate */
html[data-theme="green"] { --tdmu: #3B6032; --tdmu-dark: #3B6032; --tdmu-darker: #294323; --tdmu-2: #56764F; --tdmu-sky: #456F3A; --tdmu-sky-2: #859D79; --tdmu-sky-3: #BDC5B1; --tdmu-light: #DAD5CA; --tdmu-mid: #B5BDAA; --tdmu-side2: #34542C; --tt-bg: #E5E1D8; --tt-surface: #DAD5CA; --tt-ink: #2A1D17; --tt-muted: #62554C; --tt-line: #C7C2B9; --tt-on-accent: #FFFFFF; --tt-radius: 8px; }
/* Cát và rêu — moss-sand */
html[data-theme="animal"] { --tdmu: #3F5A2A; --tdmu-dark: #3F5A2A; --tdmu-darker: #2C3F1D; --tdmu-2: #5A7148; --tdmu-sky: #B07A1F; --tdmu-sky-2: #C29F62; --tdmu-sky-3: #D2BF9C; --tdmu-light: #D2CAB8; --tdmu-mid: #B1B39A; --tdmu-side2: #374F25; --tt-bg: #DDD6C6; --tt-surface: #D2CAB8; --tt-ink: #2A2A26; --tt-muted: #5E5C52; --tt-line: #C0BAAC; --tt-on-accent: #FFFFFF; --tt-radius: 8px; }
/* Coban trên cát — cobalt-on-sand (thay chủ đề Tím cũ) */
html[data-theme="violet"] { --tdmu: #062B8A; --tdmu-dark: #062B8A; --tdmu-darker: #041E61; --tdmu-2: #29499A; --tdmu-sky: #062B8A; --tdmu-sky-2: #6071A2; --tdmu-sky-3: #AEAFB8; --tdmu-light: #DDD0B9; --tdmu-mid: #A7AAB6; --tdmu-side2: #052679; --tt-bg: #E6DBC7; --tt-surface: #DDD0B9; --tt-ink: #062B8A; --tt-muted: #3E4F7E; --tt-line: #C2BFBD; --tt-on-accent: #E6DBC7; --tt-radius: 8px; }
/* Đỏ huyết dụ — oxblood-grey */
html[data-theme="crimson"] { --tdmu: #7D0C14; --tdmu-dark: #7D0C14; --tdmu-darker: #58080E; --tdmu-2: #8F2E35; --tdmu-sky: #7D0C14; --tdmu-sky-2: #A56266; --tdmu-sky-3: #C9ADAF; --tdmu-light: #D6D6D6; --tdmu-mid: #C6A6A8; --tdmu-side2: #6E0B12; --tt-bg: #E2E2E2; --tt-surface: #D6D6D6; --tt-ink: #3A0A0E; --tt-muted: #6A3B3F; --tt-line: #C7BFC0; --tt-on-accent: #FFFFFF; --tt-radius: 8px; }
/* Hồng mực đen — card-pastels */
html[data-theme="rose"] { --tdmu: #B00E5E; --tdmu-dark: #B00E5E; --tdmu-darker: #7B0A42; --tdmu-2: #BB3075; --tdmu-sky: #D0106F; --tdmu-sky-2: #E06CA5; --tdmu-sky-3: #EDBDD4; --tdmu-light: #EBEBE8; --tdmu-mid: #E3B6CB; --tdmu-side2: #9B0C53; --tt-bg: #F7F7F5; --tt-surface: #EBEBE8; --tt-ink: #000000; --tt-muted: #5A5A57; --tt-line: #CFCFCE; --tt-on-accent: #FFFFFF; --tt-radius: 8px; }
/* Cam và đen — orange-field-black */
html[data-theme="orange"] { --tdmu: #050F16; --tdmu-dark: #050F16; --tdmu-darker: #040B0F; --tdmu-2: #283137; --tdmu-sky: #FF7A1F; --tdmu-sky-2: #FFAF79; --tdmu-sky-3: #FFDEC7; --tdmu-light: #F3F1EF; --tdmu-mid: #B9BCBE; --tdmu-side2: #040D13; --tt-bg: #FFFFFF; --tt-surface: #F3F1EF; --tt-ink: #050F16; --tt-muted: #55595D; --tt-line: #D7D9DA; --tt-on-accent: #050F16; --tt-radius: 8px; }
/* Gỗ óc chó — walnut-tan (bản sáng) */
html[data-theme="coffee"] { --tdmu: #2B2216; --tdmu-dark: #2B2216; --tdmu-darker: #1E180F; --tdmu-2: #494137; --tdmu-sky: #8C6E52; --tdmu-sky-2: #B29F8B; --tdmu-sky-3: #D4CABD; --tdmu-light: #E2DDD4; --tdmu-mid: #B6B1A8; --tdmu-side2: #261E13; --tt-bg: #ECE8E1; --tt-surface: #E2DDD4; --tt-ink: #2B2216; --tt-muted: #655A4C; --tt-line: #CDC8C1; --tt-on-accent: #FFFFFF; --tt-radius: 8px; }
/* Xanh chai, vàng chanh — offwhite-bottle-yellow */
html[data-theme="bottle"] { --tdmu: #0D2A1C; --tdmu-dark: #0D2A1C; --tdmu-darker: #091D14; --tdmu-2: #2F483C; --tdmu-sky: #F6E016; --tdmu-sky-2: #F6E970; --tdmu-sky-3: #F7F1BF; --tdmu-light: #EBEBEB; --tdmu-mid: #B5BEBA; --tdmu-side2: #0B2519; --tt-bg: #F7F7F7; --tt-surface: #EBEBEB; --tt-ink: #0D2A1C; --tt-muted: #4D5E55; --tt-line: #D2D6D4; --tt-on-accent: #0D2A1C; --tt-radius: 8px; }
/* Mù tạt và chàm — mustard-field */
html[data-theme="mustard"] { --tdmu: #24338F; --tdmu-dark: #24338F; --tdmu-darker: #192464; --tdmu-2: #43509F; --tdmu-sky: #E1AC10; --tdmu-sky-2: #E9C867; --tdmu-sky-3: #F1E1B4; --tdmu-light: #ECE6D3; --tdmu-mid: #BBBDD1; --tdmu-side2: #202D7E; --tt-bg: #F6F3EA; --tt-surface: #ECE6D3; --tt-ink: #0B0B0B; --tt-muted: #5B574C; --tt-line: #D0CEC6; --tt-on-accent: #0B0B0B; --tt-radius: 8px; }
/* Áp phích — poster-chapters */
html[data-theme="poster"] { --tdmu: #1A1A1A; --tdmu-dark: #1A1A1A; --tdmu-darker: #121212; --tdmu-2: #3A3A3A; --tdmu-sky: #18BC42; --tdmu-sky-2: #6ACA7C; --tdmu-sky-3: #B3D7AE; --tdmu-light: #DCD5C5; --tdmu-mid: #ADA99E; --tdmu-side2: #171717; --tt-bg: #E6E0D2; --tt-surface: #DCD5C5; --tt-ink: #1A1A1A; --tt-muted: #5A564D; --tt-line: #C5C0B5; --tt-on-accent: #1A1A1A; --tt-radius: 8px; }
/* Đêm xanh — blue-black-cornflower */
html[data-theme="dark"] { --tdmu: #5A9BFC; --tdmu-dark: #131824; --tdmu-darker: #0D1119; --tdmu-2: #6EA7FC; --tdmu-sky: #5A9BFC; --tdmu-sky-2: #3A629F; --tdmu-sky-3: #1E314E; --tdmu-light: #131824; --tdmu-mid: #203555; --tdmu-side2: #111520; --tt-bg: #0A0D14; --tt-surface: #131824; --tt-ink: #E9EDF3; --tt-muted: #9AA3B2; --tt-line: #2E3138; --tt-on-accent: #0A0D14; --tt-radius: 8px; color-scheme: dark; }
/* Đá mặt trăng — lunar-grey-bronze */
html[data-theme="lunar"] { --tdmu: #A08672; --tdmu-dark: #1C1C1C; --tdmu-darker: #141414; --tdmu-2: #AB9583; --tdmu-sky: #A08672; --tdmu-sky-2: #67574B; --tdmu-sky-3: #352E29; --tdmu-light: #1C1C1C; --tdmu-mid: #39322C; --tdmu-side2: #191919; --tt-bg: #111111; --tt-surface: #1C1C1C; --tt-ink: #F2F2F2; --tt-muted: #A3A3A3; --tt-line: #353535; --tt-on-accent: #111111; --tt-radius: 8px; color-scheme: dark; }
/* Rừng đêm — forest-pale-lime */
html[data-theme="forest"] { --tdmu: #C6F19D; --tdmu-dark: #162A17; --tdmu-darker: #0F1D10; --tdmu-2: #CDF3A9; --tdmu-sky: #C6F19D; --tdmu-sky-2: #7D9D65; --tdmu-sky-3: #3D5433; --tdmu-light: #162A17; --tdmu-mid: #425A37; --tdmu-side2: #132514; --tt-bg: #0F1F10; --tt-surface: #162A17; --tt-ink: #FFFFFF; --tt-muted: #A9BBA9; --tt-line: #354336; --tt-on-accent: #0F1F10; --tt-radius: 8px; color-scheme: dark; }
/* Đen và vàng kim — warm-black-gold */
html[data-theme="goldblack"] { --tdmu: #C9A45A; --tdmu-dark: #181512; --tdmu-darker: #110F0D; --tdmu-2: #CFAF6E; --tdmu-sky: #C9A45A; --tdmu-sky-2: #7D6639; --tdmu-sky-3: #3B311D; --tdmu-light: #181512; --tdmu-mid: #41351F; --tdmu-side2: #151210; --tt-bg: #0C0A08; --tt-surface: #181512; --tt-ink: #FFFFFF; --tt-muted: #ADA59A; --tt-line: #333130; --tt-on-accent: #0C0A08; --tt-radius: 8px; color-scheme: dark; }
/* Than và lá xô thơm — charcoal-room-sage */
html[data-theme="sage"] { --tdmu: #8FA68E; --tdmu-dark: #262626; --tdmu-darker: #1B1B1B; --tdmu-2: #9CB19C; --tdmu-sky: #8FA68E; --tdmu-sky-2: #616F60; --tdmu-sky-3: #393F39; --tdmu-light: #262626; --tdmu-mid: #3C433C; --tdmu-side2: #212121; --tt-bg: #1C1C1C; --tt-surface: #262626; --tt-ink: #F1F1EF; --tt-muted: #A9A9A4; --tt-line: #3E3E3E; --tt-on-accent: #1C1C1C; --tt-radius: 8px; color-scheme: dark; }
/* Hải quân và hồng — navy-pink */
html[data-theme="navypink"] { --tdmu: #F9A3C0; --tdmu-dark: #212846; --tdmu-darker: #171C31; --tdmu-2: #FAAEC8; --tdmu-sky: #F9A3C0; --tdmu-sky-2: #A06F8A; --tdmu-sky-3: #52415B; --tdmu-light: #212846; --tdmu-mid: #58455F; --tdmu-side2: #1D233E; --tt-bg: #1A2039; --tt-surface: #212846; --tt-ink: #F4F1F6; --tt-muted: #B7B3C9; --tt-line: #3D4157; --tt-on-accent: #1A2039; --tt-radius: 8px; color-scheme: dark; }
/* Socola — walnut-tan */
html[data-theme="socola"] { --tdmu: #BDA38B; --tdmu-dark: #382D1E; --tdmu-darker: #272015; --tdmu-2: #C5AE99; --tdmu-sky: #BDA38B; --tdmu-sky-2: #836F5C; --tdmu-sky-3: #504233; --tdmu-light: #382D1E; --tdmu-mid: #544637; --tdmu-side2: #31281A; --tt-bg: #2B2216; --tt-surface: #382D1E; --tt-ink: #E4E2DA; --tt-muted: #B1A795; --tt-line: #494135; --tt-on-accent: #2B2216; --tt-radius: 8px; color-scheme: dark; }
/* Halloween — graphite-safety-orange */
html[data-theme="halloween"] { --tdmu: #FF4A1F; --tdmu-dark: #222427; --tdmu-darker: #18191B; --tdmu-2: #FF603A; --tdmu-sky: #FF4A1F; --tdmu-sky-2: #A3361D; --tdmu-sky-3: #52251C; --tdmu-light: #222427; --tdmu-mid: #59271C; --tdmu-side2: #1E2022; --tt-bg: #18191B; --tt-surface: #222427; --tt-ink: #EFF0F1; --tt-muted: #A2A5AA; --tt-line: #3A3B3D; --tt-on-accent: #18191B; --tt-radius: 8px; color-scheme: dark; }
/* Mùa xuân — mint-pink-accounts */
html[data-theme="spring"] { --tdmu: #1F6B3A; --tdmu-dark: #1F6B3A; --tdmu-darker: #164B29; --tdmu-2: #3E8056; --tdmu-sky: #D9667A; --tdmu-sky-2: #E5A0AC; --tdmu-sky-3: #F0D4D9; --tdmu-light: #EEEEEE; --tdmu-mid: #BBD1C3; --tdmu-side2: #1B5E33; --tt-bg: #F8F8F8; --tt-surface: #EEEEEE; --tt-ink: #0A0A0A; --tt-muted: #5A5A5A; --tt-line: #D2D2D2; --tt-on-accent: #FFFFFF; --tt-radius: 8px; }
/* Mùa hè — sky-field-navy (nền dịu) */
html[data-theme="summer"] { --tdmu: #0E1822; --tdmu-dark: #0E1822; --tdmu-darker: #0A1118; --tdmu-2: #303841; --tdmu-sky: #FF5A1F; --tdmu-sky-2: #FA9977; --tdmu-sky-3: #F6D1C5; --tdmu-light: #E3EEF8; --tdmu-mid: #B3B9BF; --tdmu-side2: #0C151E; --tt-bg: #F3F8FC; --tt-surface: #E3EEF8; --tt-ink: #0E1822; --tt-muted: #4F5D6B; --tt-line: #CED4D9; --tt-on-accent: #0E1822; --tt-radius: 8px; }
/* Mùa thu — tobacco-olive */
html[data-theme="autumn"] { --tdmu: #472913; --tdmu-dark: #472913; --tdmu-darker: #321D0D; --tdmu-2: #614734; --tdmu-sky: #A87F2E; --tdmu-sky-2: #C0A66E; --tdmu-sky-3: #D5C8A7; --tdmu-light: #D9D4BF; --tdmu-mid: #B8AD9A; --tdmu-side2: #3E2411; --tt-bg: #E4E0CF; --tt-surface: #D9D4BF; --tt-ink: #2A1A0C; --tt-muted: #5F5340; --tt-line: #C6C0B0; --tt-on-accent: #FFFFFF; --tt-radius: 8px; }
/* Mùa đông — frost-slate (lạnh hơn) */
html[data-theme="winter"] { --tdmu: #1F3A5A; --tdmu-dark: #1F3A5A; --tdmu-darker: #16293F; --tdmu-2: #3E5671; --tdmu-sky: #5E8DBB; --tdmu-sky-2: #99B7D3; --tdmu-sky-3: #CDDBE9; --tdmu-light: #E4EAF0; --tdmu-mid: #B7C1CC; --tdmu-side2: #1B334F; --tt-bg: #F2F5F8; --tt-surface: #E4EAF0; --tt-ink: #14202B; --tt-muted: #55626F; --tt-line: #CED3D7; --tt-on-accent: #FFFFFF; --tt-radius: 8px; }
/* Tết — carmine-field + vàng kim */
html[data-theme="tet"] { --tdmu: #9C1220; --tdmu-dark: #9C1220; --tdmu-darker: #6D0D16; --tdmu-2: #AA333F; --tdmu-sky: #D9A300; --tdmu-sky-2: #E8C866; --tdmu-sky-3: #F6E8BF; --tdmu-light: #F6EFE9; --tdmu-mid: #E3BDC1; --tdmu-side2: #89101C; --tt-bg: #FFFFFF; --tt-surface: #F6EFE9; --tt-ink: #2A0C0C; --tt-muted: #6B4A47; --tt-line: #DDD8D8; --tt-on-accent: #2A0C0C; --tt-radius: 8px; }
/* Valentine — burgundy-bubblegum (bản sáng) */
html[data-theme="valentine"] { --tdmu: #3D0012; --tdmu-dark: #3D0012; --tdmu-darker: #2B000D; --tdmu-2: #582433; --tdmu-sky: #E0559A; --tdmu-sky-2: #EB93BE; --tdmu-sky-3: #F4C9DD; --tdmu-light: #F4DCE6; --tdmu-mid: #C6ACB4; --tdmu-side2: #360010; --tt-bg: #FBEFF3; --tt-surface: #F4DCE6; --tt-ink: #3D0012; --tt-muted: #7A4152; --tt-line: #DDC9CF; --tt-on-accent: #FFFFFF; --tt-radius: 8px; }
/* 20/11 Tri ân thầy cô — bottle-green-gold (màu bảng đen và phấn vàng) */
html[data-theme="giaovien"] { --tdmu: #133621; --tdmu-dark: #133621; --tdmu-darker: #0D2617; --tdmu-2: #345240; --tdmu-sky: #C9A43A; --tdmu-sky-2: #D8C381; --tdmu-sky-3: #E5DEC0; --tdmu-light: #E1E6DF; --tdmu-mid: #B1BDB3; --tdmu-side2: #11301D; --tt-bg: #EEF1EC; --tt-surface: #E1E6DF; --tt-ink: #133621; --tt-muted: #4D6555; --tt-line: #CBD3CC; --tt-on-accent: #133621; --tt-radius: 8px; }
/* Ngày Phụ nữ Việt Nam — blush-aubergine */
html[data-theme="phunu"] { --tdmu: #351A2B; --tdmu-dark: #351A2B; --tdmu-darker: #25121E; --tdmu-2: #513A49; --tdmu-sky: #C4547A; --tdmu-sky-2: #D88EA2; --tdmu-sky-3: #EAC2C6; --tdmu-light: #EDD5CA; --tdmu-mid: #C0ADAD; --tdmu-side2: #2F1726; --tt-bg: #F6E6DF; --tt-surface: #EDD5CA; --tt-ink: #351A2B; --tt-muted: #6E4C5C; --tt-line: #D7C5C2; --tt-on-accent: #FFFFFF; --tt-radius: 8px; }
/* Kẹo màu — candy-chapters (nền dịu) */
html[data-theme="chibi"] { --tdmu: #0A0A0A; --tdmu-dark: #0A0A0A; --tdmu-darker: #070707; --tdmu-2: #2C2C2C; --tdmu-sky: #F53FD6; --tdmu-sky-2: #F989DA; --tdmu-sky-3: #FDCADE; --tdmu-light: #FFEFC0; --tdmu-mid: #BAB5A4; --tdmu-side2: #090909; --tt-bg: #FFF8E0; --tt-surface: #FFEFC0; --tt-ink: #0A0A0A; --tt-muted: #57513F; --tt-line: #D8D2BE; --tt-on-accent: #0A0A0A; --tt-radius: 8px; }
/* Hồng và chanh — pink-field-lime */
html[data-theme="trendy"] { --tdmu: #0A0A0A; --tdmu-dark: #0A0A0A; --tdmu-darker: #070707; --tdmu-2: #2C2C2C; --tdmu-sky: #FF5C93; --tdmu-sky-2: #FF9DBE; --tdmu-sky-3: #FFD6E4; --tdmu-light: #F4F4F4; --tdmu-mid: #BABABA; --tdmu-side2: #090909; --tt-bg: #FFFFFF; --tt-surface: #F4F4F4; --tt-ink: #0A0A0A; --tt-muted: #585858; --tt-line: #D8D8D8; --tt-on-accent: #0A0A0A; --tt-radius: 8px; }
/* Windows 98 — màu hệ thống Windows 98 */
html[data-theme="win98"] { --ink-soft: #303030; --muted: #303030; --tdmu: #000080; --tdmu-dark: #000080; --tdmu-darker: #00005A; --tdmu-2: #242492; --tdmu-sky: #000080; --tdmu-sky-2: #4D4D9A; --tdmu-sky-3: #9090B0; --tdmu-light: #D4D0C8; --tdmu-mid: #8A8AAE; --tdmu-side2: #000071; --tt-bg: #C0C0C0; --tt-surface: #D4D0C8; --tt-ink: #000000; --tt-muted: #404040; --tt-line: #A1A1A1; --tt-on-accent: #FFFFFF; --tt-radius: 0; }
/* Windows 7 — màu Windows 7 (phẳng, bỏ kính Aero) */
html[data-theme="win7"] { --tdmu: #1F5CA0; --tdmu-dark: #1F5CA0; --tdmu-darker: #164070; --tdmu-2: #3E73AD; --tdmu-sky: #3C86D3; --tdmu-sky-2: #83B2E2; --tdmu-sky-3: #C2D8EF; --tdmu-light: #DCE8F5; --tdmu-mid: #B4C9DF; --tdmu-side2: #1B518D; --tt-bg: #EEF3F8; --tt-surface: #DCE8F5; --tt-ink: #0F1E2E; --tt-muted: #4A5D72; --tt-line: #CAD1D8; --tt-on-accent: #FFFFFF; --tt-radius: 3px; }
html[data-theme="win98"] .top { background: #000080 !important; }
/* === THEMES v3 END === */

/* ============================================================================
   Điện thoại (3.2): áp cho mọi phân hệ (html[data-mod])
   - Ô nhập ≥ 16px để iOS không tự phóng to khi chạm vào ô.
   - Màn hình cảm ứng: nút/ô ≥ 40px, ô tích ≥ 22px, thanh trượt ≥ 32px; dùng :where và min-* nên phân hệ vẫn tự đặt kích thước lớn hơn được.
   ============================================================================ */
@media (max-width: 760px) {
  html[data-mod] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]), select, textarea) { font-size: 16px !important; }
}
@media (pointer: coarse) {
  html[data-mod] :where(button, .btn, [role=button], select, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden])) { min-height: 40px; }
  html[data-mod] :where(input[type=checkbox], input[type=radio]) { min-width: 22px; min-height: 22px; }
  html[data-mod] :where(input[type=range]) { min-height: 32px; }
  html[data-mod] :where(input[type=color]) { min-height: 40px; min-width: 40px; }
  html[data-mod] :where(.zoom-btn, .btn-fmt, .dr-x, .drawer-close, .dyn-rm, .rf, .x, .close) { min-width: 40px; }
  html[data-mod] :where(button, .btn, a, [role=button], label) { touch-action: manipulation; }
}