@import url('/assets/fonts/bvp.css');
/* ============================================================================
   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: #EEF2FC;
  --tt-ink: #334155;
  --tt-muted: #64748B;
  --tt-line: #E2E8F0;
  --tt-bg: #F5F8FC;
  --tt-radius: 14px;
  --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
   ============================================================================ */
html[data-theme="green"] { --tdmu: #1F7A4D; --tdmu-dark: #145A38; --tdmu-darker: #0E4429; --tdmu-2: #2A9461; --tdmu-sky: #34D399; --tdmu-sky-2: #6EE7B7; --tdmu-sky-3: #A7F3D0; --tdmu-light: #E8F7EF; --tdmu-mid: #BFE5D1; --tt-bg: #F3FAF6; --tdmu-side2: #1B6B44; }
html[data-theme="crimson"] { --tdmu: #B3262E; --tdmu-dark: #861B22; --tdmu-darker: #5E1217; --tdmu-2: #C93C44; --tdmu-sky: #F2777E; --tdmu-sky-2: #F9A8AD; --tdmu-sky-3: #FBD0D3; --tdmu-light: #FDEEEF; --tdmu-mid: #F2C2C5; --tt-bg: #FBF5F5; --tdmu-side2: #9A1F26; }
html[data-theme="orange"] { --tdmu: #C2570C; --tdmu-dark: #923F08; --tdmu-darker: #6B2D05; --tdmu-2: #E06A12; --tdmu-sky: #FB923C; --tdmu-sky-2: #FDBA74; --tdmu-sky-3: #FED7AA; --tdmu-light: #FFF3E8; --tdmu-mid: #F7D0AC; --tt-bg: #FCF7F2; --tdmu-side2: #A84C0A; }
html[data-theme="violet"] { --tdmu: #6D3FC0; --tdmu-dark: #4F2C90; --tdmu-darker: #391F6A; --tdmu-2: #8556DA; --tdmu-sky: #A78BFA; --tdmu-sky-2: #C4B5FD; --tdmu-sky-3: #DDD6FE; --tdmu-light: #F3EEFC; --tdmu-mid: #D6C8F2; --tt-bg: #F8F5FD; --tdmu-side2: #5C35A5; }
html[data-theme="teal"] { --tdmu: #0F766E; --tdmu-dark: #0A5751; --tdmu-darker: #073F3A; --tdmu-2: #14948B; --tdmu-sky: #2DD4BF; --tdmu-sky-2: #5EEAD4; --tdmu-sky-3: #99F6E4; --tdmu-light: #E6F6F4; --tdmu-mid: #B4E2DD; --tt-bg: #F1FAF9; --tdmu-side2: #0D655E; }
html[data-theme="rose"] { --tdmu: #BE2F6B; --tdmu-dark: #8F2252; --tdmu-darker: #661739; --tdmu-2: #D6467F; --tdmu-sky: #F472B6; --tdmu-sky-2: #F9A8D4; --tdmu-sky-3: #FBCFE8; --tdmu-light: #FDEDF4; --tdmu-mid: #F4C3D8; --tt-bg: #FCF5F9; --tdmu-side2: #A62860; }
html[data-theme="ocean"] { --tdmu: #0B5FA5; --tdmu-dark: #08497F; --tdmu-darker: #053459; --tdmu-2: #1578C4; --tdmu-sky: #38BDF8; --tdmu-sky-2: #7DD3FC; --tdmu-sky-3: #BAE6FD; --tdmu-light: #E7F2FB; --tdmu-mid: #B5D4EE; --tt-bg: #F2F8FD; --tdmu-side2: #0A5290; }
html[data-theme="coffee"] { --tdmu: #6F4E37; --tdmu-dark: #523927; --tdmu-darker: #3A281B; --tdmu-2: #8A6346; --tdmu-sky: #C69C6D; --tdmu-sky-2: #DDB892; --tdmu-sky-3: #EAD3BC; --tdmu-light: #F5EEE8; --tdmu-mid: #DCC8B6; --tt-bg: #FAF6F2; --tdmu-side2: #5E412D; }
html[data-theme="graphite"] { --tdmu: #374151; --tdmu-dark: #1F2937; --tdmu-darker: #111827; --tdmu-2: #4B5563; --tdmu-sky: #9CA3AF; --tdmu-sky-2: #CBD5E1; --tdmu-sky-3: #E5E7EB; --tdmu-light: #EEF0F3; --tdmu-mid: #CDD2DA; --tt-bg: #F4F5F7; --tdmu-side2: #2B3440; }
/* 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 */
html[data-theme="dark"] { --tdmu: #5B6FE0; --tdmu-dark: #151B3D; --tdmu-darker: #0E1330; --tdmu-2: #6B7EEA; --tdmu-sky: #42ADE2; --tdmu-light: #1E2745; --tdmu-mid: #36427A; --tt-bg: #0F1424; --tt-ink: #E2E8F0; --tt-muted: #94A3B8; --tt-line: #2B3552; --tdmu-side2: #1B2350; color-scheme: dark; }
html[data-theme="dark"] .menu, html[data-theme="dark"] dialog { background: #1A2140; color: var(--tt-ink); }
html[data-theme="dark"] dialog input, html[data-theme="dark"] dialog select { background: #0F1424; color: var(--tt-ink); border-color: var(--tt-line); }

/* ---------- 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; }
}