/* ==========================================================================
   Dy Khoa Campus — style.css (v7 "Lá non", 2026-10-02)
   ==========================================================================
   Giao diện mới: trẻ trung, tươi — giữ xanh thương hiệu Dy Khoa + xanh chanh
   (lime) + vàng nắng. Có thêm GIAO DIỆN TỐI "NEON" (tuỳ chọn, người dùng tự
   bật — html[data-theme="neon"], lưu localStorage dk_theme).
   NGUYÊN TẮC:
   - Mọi màu đi qua biến (tokens) ở :root — template KHÔNG viết mã màu cứng,
     dùng var(--…) để cả 2 giao diện cùng đúng.
   - Giữ NGUYÊN tên mọi class cũ (127 template đang dùng) — chỉ đổi diện mạo.
   - --primary/--primary-dark: dùng cho CHỮ/VIỀN/LINK. Nền đặc có chữ trắng
     dùng --solid (+ --on-solid). Đừng dùng --primary-dark làm nền.
   ========================================================================== */

:root {
  /* ---- Màu nền / chữ ---- */
  --ink: #0D2A1E;
  --paper: #F3FAF1;          /* nền trang */
  --paper-panel: #FFFFFF;    /* khung nội dung, ô nhập */
  --card-bg: #F4FAF2;        /* thẻ (.card) nằm trong khung trắng */
  --surface-2: #EEF5EC;
  --input-bg: #FBFDFA;
  --line: #D5E8D0;
  --line-strong: #76917F;    /* 2026-10-04 — viền Ô NHẬP/ô chọn: ≥3:1 với nền (WCAG 1.4.11). --line chỉ để trang trí */
  --muted: #4F6B5E;
  --focus: #0F5A3C;          /* 2026-10-04 — vòng focus bàn phím: ≥3:1 với mọi nền sáng (WCAG 1.4.11, 2.4.7) */

  /* ---- Thương hiệu ---- */
  --primary: #12784F;
  --primary-dark: #0F5A3C;
  --primary-tint: #E6F4E4;
  --solid: #0F5A3C;          /* nền đặc (nút chính, mục đang chọn) */
  --solid-hover: #0B4630;
  --on-solid: #FFFFFF;
  --accent: #C6F24E;         /* xanh chanh — điểm nhấn */
  --on-accent: #0D2A1E;
  --sun: #FFD23F;            /* vàng nắng */
  --sun-tint: #FFF6D6;
  --sun-ink: #6B4E00;
  --on-sun: #0D2A1E;

  /* ---- Trạng thái ---- */
  --success: #12784F;
  --success-solid: #12784F;
  --warn: #C2410C;
  --warn-tint: #FFF1E6;
  --warn-solid: #C2410C;
  --danger: #B42318;
  --danger-tint: #FDECEA;
  --danger-ink: #8A1C12;
  --danger-solid: #B42318;
  --info: #1F6F9F;
  --info-tint: #E6F1F8;
  --info-solid: #1F6F9F;

  /* ---- Chữ ---- */
  --font-display: 'Plus Jakarta Sans', 'Be Vietnam Pro', system-ui, sans-serif;
  --font-body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* ---- Bóng / bo góc ---- */
  --shadow-sm: 0 6px 18px -12px rgba(13, 42, 30, .35);
  --shadow: 0 24px 50px -32px rgba(13, 42, 30, .45);
  --radius: 24px;
  --radius-sm: 14px;

  /* ---- Độ rộng ---- */
  --w-narrow: 640px;
  --w-normal: 860px;
  --w-wide: 1600px;
  --gutter: clamp(16px, 4vw, 40px);
  --nav-height: 64px;
  --bottom-nav-h: 0px;

  /* ---- Thang cỡ chữ DUY NHẤT (2026-10-01) — đừng đặt số lẻ ---- */
  --fs-xs: .75rem;
  --fs-sm: .85rem;
  --fs-base: 1rem;
  --fs-md: 1.15rem;
  --fs-lg: 1.35rem;
  --fs-xl: 1.6rem;
  --fs-2xl: 2rem;

  color-scheme: light;
}

/* ==========================================================================
   GIAO DIỆN TỐI "NEON" (tuỳ chọn)
   ========================================================================== */
html[data-theme="neon"] {
  --ink: #F4F1FF;
  --paper: #0E0B1A;
  --paper-panel: #17132A;
  --card-bg: #1F1A36;
  --surface-2: #241E3F;
  --input-bg: #120F22;
  --line: #322A55;
  --line-strong: #7A6EB3;
  --muted: #B7AED6;
  --focus: #F472B6;

  --primary: #C4B5FD;
  --primary-dark: #E9E3FF;
  --primary-tint: #2A2350;
  --solid: #7C3AED;
  --solid-hover: #6D28D9;
  --on-solid: #FFFFFF;
  --accent: #F472B6;
  --on-accent: #1A0F24;
  --sun: #FACC15;
  --sun-tint: #2B2410;
  --sun-ink: #FDE68A;
  --on-sun: #1A1405;

  --success: #86EFAC;
  --success-solid: #15803D;
  --warn: #FDBA74;
  --warn-tint: #2E1A10;
  --warn-solid: #C2410C;
  --danger: #FCA5A5;
  --danger-tint: #2C1218;
  --danger-ink: #FECACA;
  --danger-solid: #DC2626;
  --info: #7DD3FC;
  --info-tint: #10233A;
  --info-solid: #0369A1;

  --font-display: 'Space Grotesk', 'Be Vietnam Pro', system-ui, sans-serif;
  --shadow-sm: 0 8px 24px -14px rgba(0, 0, 0, .7);
  --shadow: 0 30px 70px -40px rgba(124, 58, 237, .55);
  --neon-grad: linear-gradient(120deg, #7C3AED, #C026D3 55%, #F97316);
  color-scheme: dark;
}

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

html { font-size: 16px; }
@media (min-width: 601px) { html { font-size: 17px; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  min-height: 100vh;
  padding-bottom: var(--bottom-nav-h);
}
/* Nền: 2 "mảng lá" mờ ở góc — chỉ trang trí, không ảnh hưởng nội dung */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(520px 380px at 100% 0%, rgba(198, 242, 78, .22), transparent 70%),
    radial-gradient(460px 360px at 0% 100%, rgba(18, 120, 79, .10), transparent 70%);
}
html[data-theme="neon"] body::before {
  background:
    radial-gradient(900px 520px at 90% -10%, rgba(192, 38, 211, .25), transparent 60%),
    radial-gradient(760px 520px at -5% 25%, rgba(124, 58, 237, .28), transparent 60%),
    radial-gradient(600px 400px at 60% 110%, rgba(249, 115, 22, .12), transparent 60%);
}

img, svg { max-width: 100%; height: auto; }
::selection { background: var(--accent); color: var(--on-accent); }

/* --------------------------------------------------------------------------
   KHUNG TRANG
   -------------------------------------------------------------------------- */
.container {
  --content-max: var(--w-wide);
  max-width: var(--content-max);
  margin: clamp(0px, 2.5vh, 28px) auto clamp(16px, 4vh, 48px);
  padding: clamp(18px, 3.5vw, 36px);
  background: var(--paper-panel);
  border: 1px solid var(--line);
  border-radius: 32px;
  box-shadow: var(--shadow);
  width: 100%;
}
body.wide-page .container { --content-max: var(--w-wide); }
@media (min-width: 601px) {
  .container { width: calc(100% - 2 * var(--gutter)); }
}
body.narrow-page .page-body { max-width: var(--w-narrow); margin-inline: auto; }

@media (max-width: 600px) {
  .container {
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    min-height: 100vh;
    padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
    background: var(--paper);
  }
}

/* --------------------------------------------------------------------------
   THANH ĐIỀU HƯỚNG TRÊN (desktop) — thanh "viên thuốc" nổi
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 900;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.site-header-inner {
  max-width: var(--w-wide); width: calc(100% - 2 * var(--gutter)); margin: 0 auto;
  min-height: var(--nav-height);
}
.topnav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; position: relative; padding: 10px 0;
}
.brand-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; min-width: 0; }
.brand-logo:hover { text-decoration: none; }
.brand-logo img { height: 42px; width: auto; display: block; flex-shrink: 0; }
.brand-logo .logo-neon { display: none; }
html[data-theme="neon"] .brand-logo img.logo-default { display: none; }
html[data-theme="neon"] .brand-logo .logo-neon { display: block; }
@media (max-width: 760px) { .brand-logo img { height: 34px; } }
.brand-tagline {
  color: var(--muted); font-size: var(--fs-xs); font-weight: 500;
  padding-left: 9px; border-left: 1px solid var(--line); white-space: nowrap;
}

.navlinks {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end;
  padding: 5px; border-radius: 999px; background: var(--paper-panel);
  box-shadow: var(--shadow-sm); border: 1px solid var(--line);
}
.navlinks a, .nav-dropdown > summary {
  padding: 8px 14px; border-radius: 999px;
  font-size: var(--fs-sm); color: var(--ink); font-weight: 600; white-space: nowrap;
}
.navlinks a:hover, .nav-dropdown > summary:hover { color: var(--primary-dark); background: var(--primary-tint); text-decoration: none; }
.navlinks a.active, .nav-dropdown.active > summary { color: var(--on-solid); background: var(--solid); }
html[data-theme="neon"] .navlinks a.active, html[data-theme="neon"] .nav-dropdown.active > summary { background: var(--neon-grad); }

.nav-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0;
  border-radius: 999px; border: 1px solid var(--line); background: var(--paper-panel);
  color: var(--ink); cursor: pointer; text-decoration: none; transition: background .15s, transform .1s;
}
.icon-btn:hover { background: var(--primary-tint); color: var(--primary-dark); text-decoration: none; }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn .count {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--sun); color: var(--on-sun);
  font-size: var(--fs-xs); font-weight: 800; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--paper-panel);
}
html[data-theme="neon"] .icon-btn .count { background: var(--accent); color: var(--on-accent); }
.theme-toggle .ico-moon { display: inline; }
.theme-toggle .ico-sun { display: none; }
html[data-theme="neon"] .theme-toggle .ico-moon { display: none; }
html[data-theme="neon"] .theme-toggle .ico-sun { display: inline; }

/* Nút hamburger — ẩn trên desktop */
.nav-toggle {
  display: none;
  background: var(--paper-panel); border: 1px solid var(--line); border-radius: 999px;
  width: 44px; height: 44px; margin: 0; padding: 0;
  align-items: center; justify-content: center; cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 18px; height: 2px; background: var(--ink);
  position: relative; border-radius: 2px;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; }
  .navlinks {
    display: none;
    position: absolute; top: 100%; right: 0; left: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    border-radius: 22px; padding: 10px; margin-top: 8px; z-index: 950;
  }
  .navlinks.open { display: flex; }
  .navlinks a, .nav-dropdown > summary { padding: 13px 14px; border-radius: 14px; }
  .brand-tagline { display: none; }
}

/* --------------------------------------------------------------------------
   THANH ĐIỀU HƯỚNG DƯỚI (điện thoại)
   -------------------------------------------------------------------------- */
.bottom-nav { display: none; }
@media (max-width: 760px) {
  body.has-bottom-nav { --bottom-nav-h: calc(84px + env(safe-area-inset-bottom)); }
  .bottom-nav {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px;
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 980;
    background: var(--paper-panel); border: 1px solid var(--line); border-radius: 999px; padding: 6px;
    box-shadow: 0 16px 40px -18px rgba(13, 42, 30, .55);
  }
  html[data-theme="neon"] .bottom-nav { box-shadow: 0 -10px 40px -14px rgba(124, 58, 237, .6); }
  .bottom-nav a, .bottom-nav button {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 52px; margin: 0; padding: 6px 2px; border-radius: 999px; border: none;
    background: transparent; color: var(--ink); font: inherit; font-size: .68rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-decoration: none; cursor: pointer; box-shadow: none;
  }
  .bottom-nav a:hover, .bottom-nav button:hover { background: var(--primary-tint); color: var(--ink); text-decoration: none; }
  .bottom-nav svg { width: 22px; height: 22px; }
  .bottom-nav .is-active { background: var(--solid); color: var(--on-solid); }
  .bottom-nav .is-active:hover { background: var(--solid-hover); color: var(--on-solid); }
  html[data-theme="neon"] .bottom-nav .is-active { background: var(--neon-grad); }
  .bottom-nav .dot { position: absolute; top: 6px; right: calc(50% - 16px); width: 10px; height: 10px; border-radius: 999px;
    background: var(--sun); border: 2px solid var(--paper-panel); }
  /* Trên điện thoại đã có thanh dưới: ẩn chuông + hamburger ở thanh trên */
  body.has-bottom-nav .topnav .hide-with-bottom-nav { display: none !important; }
}

/* --------------------------------------------------------------------------
   CHỮ / FORM / NÚT
   -------------------------------------------------------------------------- */
h1 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.025em;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  color: var(--ink); margin: 0 0 8px; line-height: 1.12;
}
h2 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.015em;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem);
  color: var(--ink); margin: 28px 0 6px; line-height: 1.2;
}
h3 { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
p { margin: 6px 0; }

label, label.f { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); margin: 14px 0 6px; }

input[type="text"], input[type="password"], input[type="number"], input[type="email"],
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="search"],
input[type="url"], input[type="tel"], input[type="file"],
select, textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--fs-base);
  background: var(--input-bg);
  color: var(--ink);
  min-height: 46px;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 92px; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent);
}
html[data-theme="neon"] input:focus, html[data-theme="neon"] select:focus, html[data-theme="neon"] textarea:focus {
  box-shadow: 0 0 0 4px rgba(192, 38, 211, .35);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--solid); }

button, input[type="submit"], .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 16px;
  background: var(--solid);
  color: var(--on-solid);
  border: none;
  border-radius: 999px;
  padding: 11px 22px;
  min-height: 46px;
  font-weight: 700;
  font-size: var(--fs-sm);
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, transform .1s, box-shadow .15s;
}
button:hover, .btn:hover { background: var(--solid-hover); text-decoration: none; color: var(--on-solid); }
button:active, .btn:active { transform: scale(.98); }
button:focus-visible, .btn:focus-visible, a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
html[data-theme="neon"] button:not(.btn-outline):not(.btn-danger):not(.btn-danger-outline):not(.nav-toggle):not(.icon-btn):not(.pride-toggle-link):not(.pride-ghost):not(.pride-go):not(.linklike):not(.qr-frame),
html[data-theme="neon"] input[type="submit"], html[data-theme="neon"] .btn:not(.btn-outline):not(.btn-danger):not(.btn-danger-outline) {
  background: linear-gradient(135deg, #7C3AED, #C026D3); box-shadow: 0 10px 24px -12px rgba(192, 38, 211, .8);
}
html[data-theme="neon"] button:not(.btn-outline):not(.btn-danger):not(.btn-danger-outline):not(.nav-toggle):not(.icon-btn):not(.pride-toggle-link):not(.pride-ghost):not(.pride-go):not(.linklike):not(.qr-frame):hover,
html[data-theme="neon"] .btn:not(.btn-outline):not(.btn-danger):not(.btn-danger-outline):hover {
  background: linear-gradient(135deg, #6D28D9, #A21CAF);
}
button.btn-danger, .btn-danger { background: var(--danger-solid); color: #fff; }
button.btn-danger:hover, .btn-danger:hover { background: var(--danger-ink); color: #fff; }
html[data-theme="neon"] .btn-danger:hover { background: #B91C1C; }
button.btn-outline, .btn-outline {
  background: transparent; color: var(--primary-dark); border: 1.5px solid var(--primary);
}
button.btn-outline:hover, .btn-outline:hover { background: var(--primary-tint); color: var(--primary-dark); }
button.btn-danger-outline, .btn-danger-outline {
  background: transparent; color: var(--danger); border: 1.5px solid var(--danger);
}
button.btn-danger-outline:hover, .btn-danger-outline:hover { background: var(--danger-tint); color: var(--danger-ink); }
button:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

form.inline, td form { display: inline-block; margin: 0; }
td button, td .btn { margin-top: 0; padding: 6px 14px; min-height: 34px; font-size: var(--fs-xs); }
@media (max-width: 760px) {
  td button, td .btn, td .btn-outline, td .btn-danger-outline { min-height: 40px; }
}

a { color: var(--primary); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.muted { color: var(--muted); font-size: var(--fs-sm); }
.muted a { font-weight: 600; }

/* --------------------------------------------------------------------------
   BẢNG
   -------------------------------------------------------------------------- */
.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: 18px; border: 1px solid var(--line); background: var(--paper-panel);
}
table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: var(--fs-sm); }
.table-scroll table { margin-top: 0; }
th {
  text-align: left; padding: 10px 12px; color: var(--muted); font-weight: 700;
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1.5px solid var(--line);
  background: var(--surface-2);
  position: sticky; top: 0; z-index: 2;
}
td { padding: 11px 12px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 12px; }
.table-wrap > table { margin-top: 0; }
.table-scroll table td, .table-scroll table th { white-space: nowrap; }
.table-scroll table.sticky-first-col th:first-child,
.table-scroll table.sticky-first-col td:first-child {
  position: sticky; left: 0; z-index: 3;
  background: var(--paper-panel);
  box-shadow: 2px 0 6px -3px rgba(0, 0, 0, .25);
}
.table-scroll table.sticky-first-col th:first-child { background: var(--surface-2); }
tr.warn td { background: var(--warn-tint); }
tr:hover td { background: var(--primary-tint); }

/* --------------------------------------------------------------------------
   THẺ / NHÃN / THÔNG BÁO / LƯỚI
   -------------------------------------------------------------------------- */
.card {
  padding: 20px; border-radius: var(--radius); background: var(--card-bg);
  margin-top: 16px; border: 1px solid var(--line);
}
.card.warn { background: var(--warn-tint); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 800;
  padding: 4px 11px; border-radius: 999px; letter-spacing: .01em; white-space: nowrap;
  background: var(--surface-2); color: var(--ink);
}
.badge.ok { background: var(--accent); color: var(--on-accent); }
.badge.warn { background: var(--warn-solid); color: #fff; }
.warn-text { color: var(--warn); font-weight: 600; font-size: var(--fs-sm); margin-top: 10px; line-height: 1.5; }
.flash {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 16px; border-radius: 16px; margin-bottom: 16px; font-size: var(--fs-sm); font-weight: 600;
  border: 1px solid transparent;
}
.flash.success { background: var(--primary-tint); color: var(--primary-dark); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.flash.error { background: var(--warn-tint); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.flash.info, .flash.message { background: var(--info-tint); color: var(--info); }

.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; margin-top: 16px; }
.action-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.action-grid.fit-row { grid-template-columns: repeat(var(--tiles, 4), minmax(0, 1fr)); }
@media (max-width: 1100px) { .action-grid.fit-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .action-grid.fit-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .action-grid.fit-row { grid-template-columns: 1fr; } }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.stat-pill {
  background: var(--card-bg); border: 1px solid var(--line); border-radius: 20px; padding: 14px 18px; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.stat-pill .num {
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 800; color: var(--ink);
  display: block; line-height: 1.05; letter-spacing: -0.02em;
}
.stat-pill .label { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.stat-pill.is-good { background: var(--primary-tint); }
.stat-pill.is-bad { background: var(--warn-tint); }
.stat-pill.is-bad .label { color: var(--warn); }
.stat-pill.is-key { background: var(--solid); border-color: var(--solid); color: var(--on-solid); }
.stat-pill.is-key .num { color: var(--on-solid); }
.stat-pill.is-key .label { color: color-mix(in srgb, var(--on-solid) 80%, transparent); }
html[data-theme="neon"] .stat-pill.is-key { background: var(--neon-grad); border-color: transparent; }
.pips { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 5px; margin-top: 6px; }
.pips i { display: block; height: 8px; border-radius: 999px; background: var(--accent); }
.pips i.off { background: color-mix(in srgb, var(--on-solid) 25%, transparent); }

.progress { height: 12px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
html[data-theme="neon"] .progress > span { background: var(--neon-grad); box-shadow: 0 0 14px rgba(192, 38, 211, .7); }

/* Tab con dùng chung */
.pill-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 18px 0 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pill-tabs button { margin-top: 0; background: transparent; color: var(--ink); border: 1.5px solid var(--line); padding: 8px 16px; font-size: var(--fs-sm); border-radius: 999px; font-weight: 600; cursor: pointer; min-height: 40px; box-shadow: none; }
html[data-theme="neon"] .pill-tabs button:not(.active) { background: transparent !important; box-shadow: none !important; }
.pill-tabs button:hover { background: var(--primary-tint); color: var(--primary-dark); }
.pill-tabs button.active { background: var(--solid); color: var(--on-solid); border-color: var(--solid); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

details.danger-zone { border: 1.5px solid var(--danger); border-radius: 16px; padding: 12px 16px; margin-top: 10px; background: var(--danger-tint); }
details.danger-zone summary { cursor: pointer; font-weight: 700; color: var(--danger); font-size: var(--fs-sm); }
details.danger-zone form { margin-top: 10px; }
details.danger-zone input { background: var(--input-bg); }

.site-footer { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); text-align: center; }
.theme-footer-toggle { background: none !important; border: none !important; color: inherit !important; text-decoration: underline;
  padding: 0 !important; margin: 0 !important; font: inherit; cursor: pointer; box-shadow: none !important;
  min-height: 24px !important; display: inline-flex; align-items: center; /* 2026-10-04 — WCAG 2.5.8 */ }

/* Form nhiều trường trên 1 hàng */
.inline-form-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-form-row input, .inline-form-row select { width: auto; flex: 1 1 140px; min-width: 0; }
@media (max-width: 480px) {
  .inline-form-row { gap: 6px; }
  .inline-form-row input, .inline-form-row select { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   KHUNG THÔNG BÁO (chuông)
   -------------------------------------------------------------------------- */
.notif-dropdown {
  display: none; position: absolute; right: 0; top: 115%; z-index: 2000;
  background: var(--paper-panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 20px; box-shadow: var(--shadow);
  min-width: 300px; max-width: min(360px, 92vw); max-height: 440px; overflow-y: auto; text-align: left;
}
.notif-dropdown.open { display: block; }
.notif-dropdown .nd-head { margin: 0; padding: 12px 16px 4px; font-size: var(--fs-xs); font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.notif-dropdown .nd-item { display: block; padding: 11px 16px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; }
.notif-dropdown .nd-item:hover { background: var(--primary-tint); text-decoration: none; }
.notif-dropdown .nd-empty { padding: 16px; margin: 0; color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 760px) {
  .notif-dropdown {
    position: fixed; top: auto; bottom: calc(var(--bottom-nav-h) + 8px); left: 12px; right: 12px;
    width: auto; max-width: none; min-width: 0; max-height: min(65vh, 480px);
  }
  body:not(.has-bottom-nav) .notif-dropdown { top: calc(var(--nav-height) + 12px); bottom: auto; }
}

/* ==========================================================================
   TIỆN ÍCH (utility) — giữ nguyên tên cũ
   ========================================================================== */
.mt-0{ margin-top:0 !important; } .mt-1{ margin-top:4px !important; } .mt-2{ margin-top:6px !important; }
.mt-3{ margin-top:8px !important; } .mt-4{ margin-top:10px !important; } .mt-5{ margin-top:12px !important; }
.mt-6{ margin-top:14px !important; } .mt-7{ margin-top:16px !important; } .mt-8{ margin-top:20px !important; }
.mt-9{ margin-top:24px !important; } .mt-10{ margin-top:28px !important; }
.mb-0{ margin-bottom:0 !important; } .m-0{ margin:0 !important; }
.row{ display:flex; align-items:center; gap:8px; }
.row-wrap{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.row-between{ display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.row-start{ display:flex; align-items:flex-start; gap:8px; }
.col{ display:flex; flex-direction:column; gap:8px; }
.gap-sm{ gap:4px !important; } .gap-lg{ gap:12px !important; }
.inline{ display:inline-block; }
.chip-option{
  display:flex; align-items:center; gap:6px; padding:7px 12px; border:1.5px solid var(--line); border-radius:999px;
  font-size:var(--fs-sm); width:fit-content; background: var(--paper-panel);
}
.row-divider{ border-top:1px solid var(--line); }
.cell-sm{ padding:6px; }
.text-sm{ font-size:var(--fs-sm); } .text-xs{ font-size:var(--fs-xs); }
.w-full{ width:100%; } .w-fit{ width:fit-content; }
.form-grid{ display:grid; grid-template-columns:1fr; gap:0 24px; }
@media (min-width:761px){
  .form-grid{ grid-template-columns:1fr 1fr; align-items:start; }
  .form-grid .field-full{ grid-column:1 / -1; }
}
.form-grid label{ margin-top:14px; }
summary.has-selection{ background:var(--primary-tint); border-color:var(--primary); }
.tc-badge{ display:inline-block; margin-left:8px; font-size:var(--fs-xs); font-weight:800; color:var(--primary-dark); }
.tc-badge:empty{ display:none; }

/* ---- Thẻ lớp (admin_dashboard.html) ---- */
.class-card{
  display:flex; flex-direction:column; gap:4px; padding:18px; border:1px solid var(--line); border-radius:22px;
  background:var(--paper-panel); text-decoration:none; color:var(--ink);
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.class-card:hover{ box-shadow: var(--shadow-sm); transform:translateY(-3px); text-decoration:none; border-color:var(--primary); }
.class-card-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.class-name{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-md); color:var(--ink); letter-spacing:-0.01em; }
.chip{
  font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--primary-dark); background: var(--primary-tint);
  border-radius:999px; padding:3px 10px; white-space:nowrap; font-weight:600;
}
.class-course{ margin-top:2px; font-size:var(--fs-sm); color:var(--muted); }

/* ---- Ô chức năng (dashboard SV, công cụ lớp trưởng…) ---- */
.action-tile{
  display:flex; flex-direction:column; gap:4px; padding:16px; border:1.5px solid var(--line); border-radius:20px;
  background:var(--paper-panel); text-decoration:none; color:var(--ink);
  transition:box-shadow .15s, border-color .15s, transform .15s;
}
.action-tile:hover{ border-color:var(--primary); box-shadow: var(--shadow-sm); transform: translateY(-2px); text-decoration:none; }
.action-tile .action-title{ font-weight:800; font-size:var(--fs-sm); color:var(--ink); display:flex; align-items:center; gap:8px; }
.action-tile .action-desc{ font-size:var(--fs-xs); color:var(--muted); display:block; line-height:1.45; font-weight:500; }
.action-tile .tile-ico{
  width:42px; height:42px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  background: var(--accent); color: var(--on-accent); margin-bottom:6px; flex-shrink: 0;
}
.action-tile .tile-ico svg { width: 21px; height: 21px; }
.action-tile .tile-ico.t-green { background: var(--solid); color: var(--on-solid); }
.action-tile .tile-ico.t-sun { background: var(--sun); color: var(--on-sun); }
html[data-theme="neon"] .action-tile .tile-ico { background: #F472B6; color: #1A0F24; }
html[data-theme="neon"] .action-tile .tile-ico.t-green { background: #22D3EE; color: #08202A; }
html[data-theme="neon"] .action-tile .tile-ico.t-sun { background: #FACC15; color: #241B02; }
html[data-theme="neon"] .action-tile .tile-ico.t-violet { background: #A78BFA; color: #160D2E; }
html[data-theme="neon"] .action-tile .tile-ico.t-lime { background: #A3E635; color: #1A2405; }
html[data-theme="neon"] .action-tile .tile-ico.t-orange { background: #FB923C; color: #2A1203; }

.section-eyebrow{
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.08em;
  text-transform:uppercase; color:var(--primary); font-weight:700; margin:26px 0 2px;
}
.section-eyebrow:first-child{ margin-top:4px; }
code.mono, .mono{ font-family:var(--font-mono); background:var(--primary-tint); padding:2px 7px; border-radius:6px; }

/* ---- QR (giữ nền trắng để máy quét đọc được ở cả giao diện tối) ---- */
/* ---- Trang chiếu QR (session_qr / monitor_session_qr) ---- */
.qr-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.live-dot { width: 8px; height: 8px; border-radius: 999px; background: currentColor; display: inline-block; animation: dkPulse 1.4s ease-in-out infinite; }
@keyframes dkPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.qr-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); gap: 24px; margin-top: 20px; align-items: start; }
@media (max-width: 900px) { .qr-layout { grid-template-columns: 1fr; } }
.qr-stage { background: var(--paper-panel); border: 1px solid var(--line); border-radius: 30px; padding: clamp(16px, 3vw, 28px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.qr-frame { all: unset; cursor: zoom-in; display: block; width: min(560px, 100%); aspect-ratio: 1; background: #fff; border-radius: 26px; padding: 18px; box-sizing: border-box; box-shadow: 0 18px 40px -26px rgba(13,42,30,.55); border: 3px solid var(--accent); }
.qr-frame:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
.qr-frame img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
html[data-theme="neon"] .qr-frame { border: 3px solid transparent; background: linear-gradient(#fff,#fff) padding-box, var(--neon-grad) border-box; box-shadow: 0 18px 50px -20px rgba(192,38,211,.6); }
.qr-side { display: flex; flex-direction: column; gap: 14px; }
.qr-stat { background: var(--card-bg); border: 1px solid var(--line); border-radius: 22px; padding: 16px 18px; margin: 0; }
.qr-stat p { margin: 0; }
.qr-stat-label { font-weight: 800; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.qr-stat-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); line-height: 1.1; color: var(--ink); margin: 4px 0 8px !important; }
.qr-stat-of { font-size: .55em; color: var(--muted); font-weight: 700; }
.qr-mono { font-family: var(--font-mono); letter-spacing: .04em; }
.qr-code { letter-spacing: .22em; }
.qr-inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.qr-inline input { width: 110px; margin: 0; }
.qr-inline button, .qr-stat form button { margin-top: 8px; }
.qr-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.qr-actions form { margin: 0; }
.qr-overlay{
  display:none; position:fixed; inset:0; background:#0B3D29;
  z-index:999; flex-direction:column; align-items:center; justify-content:center; cursor:zoom-out; padding:20px;
}
html[data-theme="neon"] .qr-overlay { background: radial-gradient(900px 600px at 100% 0%, rgba(192,38,211,.28), transparent 60%), #0E0B1A; }
.qr-overlay.active{ display:flex; }
.qr-overlay img{ width:min(90vw, 80vh); height:min(90vw, 80vh); background:#fff; padding:22px; border-radius:26px; cursor:zoom-out; box-sizing:border-box; image-rendering: pixelated; }
.qr-full-meta { margin-top: 18px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.qr-full-count, .qr-full-countdown { font-family:var(--font-mono); font-size:var(--fs-xl); font-weight:700; padding: 8px 18px; border-radius: 999px; }
.qr-full-count { background: #C6F24E; color: #0D2A1E; }
.qr-full-countdown { background: rgba(255,255,255,.12); color:#fff; }
.qr-full-countdown:empty { display: none; }
html[data-theme="neon"] .qr-full-count { background: var(--neon-grad); color: #fff; }
.qr-overlay-hint{ margin-top:10px; color:rgba(255,255,255,.6); font-size:var(--fs-sm); }

/* ---- Dấu "đã điểm danh" (checkin_result.html) ---- */
.stamp-wrap{ display:flex; flex-direction:column; align-items:center; padding:20px 0 8px; }
.stamp{
  width:120px; height:120px; border-radius:50%;
  background: var(--accent); color: var(--on-accent);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transform:rotate(-8deg); position:relative; box-shadow: 0 16px 34px -18px rgba(13,42,30,.6);
  animation: stamp-pop .45s cubic-bezier(.2,1.4,.4,1) both;
}
.stamp::before{ content:""; position:absolute; inset:8px; border:2px dashed currentColor; border-radius:50%; opacity:.45; }
.stamp .check{ font-size:var(--fs-2xl); line-height:1; }
.stamp .word{ font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; margin-top:4px; font-weight:700; }
html[data-theme="neon"] .stamp { background: var(--neon-grad); color: #fff; }
@keyframes stamp-pop { from { transform: rotate(-30deg) scale(.4); opacity: 0; } to { transform: rotate(-8deg) scale(1); opacity: 1; } }

/* ---- Menu "Duyệt ▾" ---- */
.nav-dropdown{ position:relative; display:inline-block; }
.nav-dropdown > summary{ list-style:none; cursor:pointer; outline:none; -webkit-tap-highlight-color: transparent; }
.nav-dropdown > summary::-webkit-details-marker{ display:none; }
.nav-dropdown .dropdown-menu{ display:flex; flex-direction:column; }
.nav-dropdown .dropdown-menu a{ color: var(--ink); }
@media (min-width: 761px) {
  .nav-dropdown .dropdown-menu{
    position:absolute; right:0; top:100%; margin-top:10px;
    background:var(--paper-panel); border:1px solid var(--line); border-radius:18px;
    box-shadow: var(--shadow); min-width:200px; padding:6px; z-index:960;
  }
  .nav-dropdown .dropdown-menu a{ padding:10px 12px; border-radius:12px; font-size:var(--fs-sm); white-space: nowrap; }
}
@media (max-width: 760px) { .nav-dropdown .dropdown-menu a { padding: 12px 12px 12px 26px; } }
.nav-desktop-only{ display:inline-block; }
.nav-mobile-only{ display:none; }
@media (max-width:760px){
  .nav-desktop-only{ display:none !important; }
  .nav-mobile-only{ display:block; }
}

/* Nút đổi ngôn ngữ */
.lang-switch {
  display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-sm); font-weight:700;
  padding:0 14px; height:44px; border:1px solid var(--line); border-radius:999px; text-decoration:none;
  color:var(--ink); background:var(--paper-panel); white-space:nowrap;
}
.lang-switch:hover { background:var(--primary-tint); text-decoration:none; }
.lang-switch svg { width: 18px; height: 18px; }
.lang-bar { display:flex; justify-content:flex-end; gap: 8px; margin:4px 0 0; }

/* ---- Nút "Xin phép" ---- */
details.excuse-box { margin-top: 12px; }
details.excuse-box > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border: 1.5px solid var(--warn); border-radius: 16px;
  background: var(--warn-tint); color: var(--warn);
  font-weight: 700; font-size: var(--fs-sm); line-height: 1.2; cursor: pointer;
  -webkit-user-select: none; user-select: none; transition: background .15s, color .15s;
}
details.excuse-box > summary::-webkit-details-marker { display: none; }
details.excuse-box > summary::marker { content: ""; }
details.excuse-box > summary::after { content: "▾"; font-size: var(--fs-sm); transition: transform .15s; }
details.excuse-box[open] > summary::after { transform: rotate(180deg); }
details.excuse-box > summary:hover,
details.excuse-box.absent > summary { background: var(--warn-solid); border-color: var(--warn-solid); color: #fff; }
details.excuse-box.absent > summary:hover { filter: brightness(.92); }
details.excuse-box.ongoing > summary { border-color: var(--info-solid); background: var(--info-solid); color: #fff; }
details.excuse-box.ongoing > summary:hover { filter: brightness(.92); }
details.excuse-box[open] { border: 1.5px solid var(--warn); border-radius: 20px; padding: 14px 16px; background: var(--warn-tint); }
details.excuse-box.ongoing[open] { border-color: var(--info-solid); background: var(--info-tint); }
details.excuse-box[open] > summary { margin-bottom: 4px; }
details.excuse-box form { max-width: 900px; }
details.excuse-box textarea { width: 100%; min-height: 140px; resize: vertical; line-height: 1.5; }

/* ---- Khối thu gọn ---- */
details.fold { padding: 14px 20px; margin-top: 10px; }
details.fold > summary {
  cursor: pointer; list-style: none; font-weight: 700; font-size: var(--fs-sm);
  color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "▸"; transition: transform .15s; color: var(--primary); }
details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold[open] > summary { margin-bottom: 10px; }

.back-link { margin: 0 0 6px; font-size: var(--fs-sm); }

@media (min-width: 761px) and (max-width: 1480px) {
  .topnav { flex-wrap: wrap; }
  .topnav .navlinks { order: 3; flex-basis: 100%; justify-content: flex-start; }
  .topnav .nav-actions { order: 2; margin-left: auto; }
  .navlinks a, .nav-dropdown > summary { padding: 7px 10px; }
}

/* ==========================================================================
   KHỐI MỚI (2026-10-02) — dashboard SV / GV, trang đăng nhập
   ========================================================================== */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 32px; background: var(--solid); color: #fff;
  padding: clamp(22px, 4vw, 40px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 24px; align-items: center;
}
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.hero::before { right: -90px; top: -130px; width: 380px; height: 380px; border-radius: 62% 38% 55% 45% / 45% 60% 40% 55%; background: rgba(255,255,255,.08); }
.hero::after { right: 18%; bottom: -170px; width: 280px; height: 280px; border-radius: 40% 60% 35% 65% / 60% 40% 60% 40%; background: rgba(198,242,78,.2); }
html[data-theme="neon"] .hero { background: var(--paper-panel); border: 1px solid var(--line); }
html[data-theme="neon"] .hero::before { background: rgba(192,38,211,.22); filter: blur(10px); }
html[data-theme="neon"] .hero::after { background: rgba(124,58,237,.3); filter: blur(10px); }
.hero h1 { color: #fff; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); margin: 6px 0 8px; }
.hero h1 .hl { background: linear-gradient(transparent 62%, rgba(198,242,78,.55) 62%); }
html[data-theme="neon"] .hero h1 { color: var(--ink); }
html[data-theme="neon"] .hero h1 .hl { background: linear-gradient(90deg, #A78BFA, #F472B6 55%, #FB923C); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p, .hero .muted { color: rgba(255,255,255,.82); }
.hero a { color: var(--accent); }
html[data-theme="neon"] .hero p, html[data-theme="neon"] .hero .muted { color: var(--muted); }
html[data-theme="neon"] .hero a { color: var(--primary); }
.hero .eyebrow {
  display: inline-flex; align-self: flex-start; padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: var(--fs-xs);
  background: rgba(198,242,78,.18); color: #E3FAA6;
}
html[data-theme="neon"] .hero .eyebrow { background: rgba(196,181,253,.14); color: var(--primary); font-family: var(--font-mono); }
.hero-side {
  background: var(--sun); color: var(--on-sun); border-radius: 26px; padding: 22px 24px;
  display: flex; flex-direction: column; gap: 6px;
}
.hero-side p { color: var(--on-sun) !important; margin: 0; }
.hero-side .hs-label { font-weight: 800; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; }
.hero-side .hs-title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); line-height: 1.2; }
.hero-side .btn { align-self: flex-start; background: var(--on-sun); color: #fff; margin-top: 8px; }
.hero-side .btn:hover { background: #000; }
html[data-theme="neon"] .hero-side { background: var(--card-bg); color: var(--ink); border: 2px solid transparent;
  background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, var(--neon-grad) border-box; }
html[data-theme="neon"] .hero-side p { color: var(--ink) !important; }
html[data-theme="neon"] .hero-side .hs-label { color: #F9A8D4 !important; font-family: var(--font-mono); }

.class-panel { background: var(--paper-panel); border: 1px solid var(--line); border-radius: 30px; padding: clamp(18px, 3vw, 30px); margin-top: 20px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.class-panel.warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.class-panel .cp-code { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.class-panel h2 { margin: 2px 0 4px; font-size: clamp(1.3rem, 1.05rem + 1vw, 1.9rem); }
.notice-strip {
  display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 18px;
  background: var(--sun-tint); color: var(--sun-ink); font-weight: 600; margin-bottom: 14px;
  border: 1px solid color-mix(in srgb, var(--sun) 60%, transparent);
}
.pill-link {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); padding: 7px 14px;
  border: 1.5px solid var(--line); border-radius: 999px; color: var(--ink); font-weight: 700; background: var(--paper-panel);
}
.pill-link:hover { background: var(--primary-tint); text-decoration: none; }
.pill-link svg { width: 16px; height: 16px; }

/* ---- Trang đăng nhập ---- */
body.auth-page .container { background: transparent; border: none; box-shadow: none; padding-top: 8px; }
.auth-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 24px; align-items: stretch; max-width: 1080px; margin: 0 auto; }
.auth-hero {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 32px; background: var(--solid); color: #fff;
  padding: clamp(26px, 4vw, 44px); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 420px;
}
.auth-hero::before { content: ""; position: absolute; z-index: -1; right: -100px; top: -120px; width: 380px; height: 380px; border-radius: 62% 38% 55% 45% / 45% 60% 40% 55%; background: rgba(255,255,255,.08); }
.auth-hero::after { content: ""; position: absolute; z-index: -1; left: -60px; bottom: -150px; width: 320px; height: 320px; border-radius: 40% 60% 35% 65% / 60% 40% 60% 40%; background: rgba(198,242,78,.22); }
.auth-hero h1 { color: #fff; font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem); margin: 0; }
.auth-hero h1 .hl { background: linear-gradient(transparent 62%, rgba(198,242,78,.6) 62%); }
.auth-hero p { color: rgba(255,255,255,.85); margin: 0; max-width: 34ch; }
.auth-hero .ah-mark { width: 64px; height: 64px; border-radius: 18px; border: 3px solid var(--accent); }
.auth-hero .ah-points { display: flex; flex-wrap: wrap; gap: 8px; }
.auth-hero .ah-points span { padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.12); font-weight: 700; font-size: var(--fs-xs); }
html[data-theme="neon"] .auth-hero { background: var(--paper-panel); border: 1px solid var(--line); }
html[data-theme="neon"] .auth-hero::before { background: rgba(192,38,211,.3); filter: blur(14px); }
html[data-theme="neon"] .auth-hero::after { background: rgba(124,58,237,.35); filter: blur(14px); }
html[data-theme="neon"] .auth-hero h1 { color: var(--ink); }
html[data-theme="neon"] .auth-hero h1 .hl { background: linear-gradient(90deg, #A78BFA, #F472B6 55%, #FB923C); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="neon"] .auth-hero p { color: var(--muted); }
.auth-card { background: var(--paper-panel); border: 1px solid var(--line); border-radius: 32px; padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow); }
.auth-card h2 { margin-top: 0; }
.auth-card button[type="submit"] { width: 100%; margin-top: 20px; min-height: 52px; font-size: var(--fs-base); }
@media (max-width: 760px) { .auth-hero { min-height: 0; } .auth-hero .ah-points { display: none; } }

/* ---- Giảm chuyển động khi người dùng yêu cầu ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Link dạng nút viền (thẻ <a class="btn-outline"> không kèm .btn) */
a.btn-outline, a.btn-danger-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: var(--fs-sm); min-height: 40px; text-decoration: none;
}
.chip.warn { background: var(--warn-tint); color: var(--warn); }
/* Thanh dưới: không nhận kiểu "nút gradient" của Neon */
html[data-theme="neon"] .bottom-nav button:not(.is-active), html[data-theme="neon"] .bottom-nav a:not(.is-active) { background: transparent !important; box-shadow: none !important; }
html[data-theme="neon"] .bottom-nav button:not(.is-active):hover, html[data-theme="neon"] .bottom-nav a:not(.is-active):hover { background: var(--primary-tint) !important; }

/* ---- Lớp hôm nay theo giờ thực tế (admin_welcome) ---- */
.badge.info { background: var(--info-solid); color: #fff; }
.badge.sun { background: var(--sun-tint); color: var(--sun-ink); }
.badge.time { background: var(--surface-2); color: var(--ink); font-family: var(--font-mono); margin-right: 8px; }
.today-line .badge:not(.time) { margin-left: 6px; vertical-align: 1px; }
.card.is-focus { border: 2px solid var(--primary); box-shadow: var(--shadow-sm); }
.hero-side .hs-time { font-family: var(--font-mono); font-size: .8em; padding: 2px 8px; border-radius: 8px; background: rgba(0,0,0,.1); vertical-align: 2px; white-space: nowrap; }
.hs-list { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px dashed rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 4px; }
.hs-list a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; color: inherit !important; text-decoration: none; font-size: var(--fs-sm); flex-wrap: wrap; }
.hs-list a:hover { background: rgba(0,0,0,.07); }
.hs-list li.is-focus a { background: rgba(0,0,0,.1); font-weight: 700; }
.hs-list .hs-t { font-family: var(--font-mono); font-weight: 700; min-width: 92px; }
.hs-list .hs-n { flex: 1 1 auto; min-width: 0; }
html[data-theme="neon"] .hero-side .hs-time { background: rgba(196,181,253,.16); }
html[data-theme="neon"] .hs-list { border-top-color: var(--line); }
html[data-theme="neon"] .hs-list a:hover, html[data-theme="neon"] .hs-list li.is-focus a { background: rgba(196,181,253,.12); }
html[data-theme="neon"] .hero-side a.btn, html[data-theme="neon"] .hero-side a.btn:hover { color: #fff; }
@media (max-width: 760px) {
  .hs-list a { display: grid; grid-template-columns: 1fr auto; row-gap: 2px; align-items: center; }
  .hs-list .hs-t { grid-column: 1; grid-row: 1; min-width: 0; }
  .hs-list .badge { grid-column: 2; grid-row: 1; }
  .hs-list .hs-n { grid-column: 1 / -1; grid-row: 2; font-weight: 600; }
}

/* ---- Bong bóng tin nhắn GV ⇄ SV ---- */
.msg-bubble { max-width: 80%; padding: 12px 16px; border-radius: 18px; color: var(--ink); border: 1px solid var(--line); }
.msg-bubble.is-teacher { background: var(--primary-tint); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.msg-bubble.is-student { background: var(--surface-2); }
@media (max-width: 760px) { .msg-bubble { max-width: 92%; } }

/* ---- Bình chọn trực tiếp (admin_vote_results / monitor_vote_results / student_vote) ---- */
.vt-box{background:var(--card-bg);border:1px solid var(--line);border-radius:26px;padding:24px;margin:20px 0;position:relative;box-shadow:var(--shadow-sm)}
.vt-top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.vt-status{font-size:var(--fs-sm);font-weight:800;padding:5px 14px;border-radius:999px;background:var(--surface-2);color:var(--ink)}
.vt-status.vt-live{background:var(--accent);color:var(--on-accent)}
.vt-status.vt-ended{background:var(--danger-tint);color:var(--danger-ink)}
.vt-clock{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:800;font-size:var(--fs-xl);color:var(--ink)}
.vt-total{color:var(--muted);font-size:var(--fs-base);margin:4px 0 0}
.vt-sync-line{color:var(--muted);font-size:var(--fs-sm);margin:2px 0 0}
.vt-sync-line.vt-sync-warn{color:var(--warn);font-weight:700}
.vt-chart{display:flex;align-items:flex-end;gap:14px;height:320px;margin:28px 0 10px;padding:0 6px;overflow-x:auto}
.vt-bar-wrap{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:70px;flex:1 1 70px;height:100%}
.vt-bar-count{font-family:var(--font-display);font-weight:800;font-size:var(--fs-md);color:var(--ink);margin-bottom:6px;transition:all .3s}
.vt-bar{width:100%;max-width:78px;background:var(--solid);border-radius:12px 12px 4px 4px;transition:height .5s cubic-bezier(.2,.8,.3,1);min-height:4px}
.vt-bar.vt-rank1{background:var(--sun)}
.vt-bar-name{margin-top:8px;font-size:var(--fs-sm);text-align:center;color:var(--ink);font-weight:600;max-width:90px;word-break:break-word}
.vt-fsbtn{position:absolute;top:16px;right:16px}
.vt-wm{display:none}
.vt-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.vt-approve-card{margin-top:20px;padding:16px;border-radius:18px;background:var(--warn-tint);border:1px solid color-mix(in srgb, var(--warn) 40%, transparent)}
.vt-approve-card p{margin:0 0 10px}
/* Chế độ chiếu toàn màn hình — nền tối cố định cho dễ nhìn trên máy chiếu */
.vt-box.vt-fs{border:0!important;border-radius:0!important;margin:0!important;width:100vw!important;height:100vh!important;box-sizing:border-box;padding:36px 44px!important;background:#0B3D29!important;color:#F1F8EC!important;display:flex;flex-direction:column;justify-content:center}
html[data-theme="neon"] .vt-box.vt-fs{background:radial-gradient(900px 600px at 100% 0%, rgba(192,38,211,.28), transparent 60%),#0E0B1A!important}
.vt-box.vt-fs .vt-top,.vt-box.vt-fs .vt-total,.vt-box.vt-fs .vt-clock,.vt-box.vt-fs h2{color:#F1F8EC!important}
.vt-box.vt-fs .vt-sync-line{color:rgba(241,248,236,.65)!important}
.vt-box.vt-fs .vt-sync-line.vt-sync-warn{color:#FFD23F!important}
.vt-box.vt-fs .vt-status{background:rgba(255,255,255,.14);color:#fff}
.vt-box.vt-fs .vt-status.vt-live{background:#C6F24E;color:#0D2A1E}
.vt-box.vt-fs .vt-bar{background:rgba(241,248,236,.85)}
.vt-box.vt-fs .vt-bar.vt-rank1{background:#FFD23F}
html[data-theme="neon"] .vt-box.vt-fs .vt-bar{background:linear-gradient(180deg,#A78BFA,#C026D3)}
html[data-theme="neon"] .vt-box.vt-fs .vt-bar.vt-rank1{background:linear-gradient(180deg,#FB923C,#F472B6)}
.vt-box.vt-fs .vt-bar-name,.vt-box.vt-fs .vt-bar-count{color:#fff}
.vt-box.vt-fs .vt-chart{height:56vh}
.vt-box.vt-fs .vt-actions,.vt-box.vt-fs .vt-approve-card{display:none}
.vt-box.vt-fs .vt-wm{display:block;position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:var(--fs-xs);letter-spacing:.06em;color:#C6F24E;opacity:.85;pointer-events:none;font-family:var(--font-mono)}
html[data-theme="neon"] .vt-box.vt-fs .vt-wm{color:#F9A8D4}
html[data-theme="neon"] .vt-bar{background:linear-gradient(180deg,#A78BFA,#7C3AED)}
html[data-theme="neon"] .vt-bar.vt-rank1{background:linear-gradient(180deg,#FB923C,#F472B6)}
/* Bản nhỏ cho SV */
.vt-chart-sm{display:flex;align-items:flex-end;gap:10px;height:180px;margin:16px 0;padding:0 4px;overflow-x:auto}
.vt-bar-wrap-sm{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:56px;flex:1 1 56px;height:100%}
.vt-bar-count-sm{font-weight:800;font-size:var(--fs-base);color:var(--ink);margin-bottom:4px}
.vt-bar-sm{width:100%;max-width:52px;background:var(--solid);border-radius:10px 10px 3px 3px;transition:height .5s cubic-bezier(.2,.8,.3,1);min-height:3px}
.vt-bar-sm.vt-rank1{background:var(--sun)}
html[data-theme="neon"] .vt-bar-sm{background:linear-gradient(180deg,#A78BFA,#7C3AED)}
html[data-theme="neon"] .vt-bar-sm.vt-rank1{background:linear-gradient(180deg,#FB923C,#F472B6)}
.vt-bar-name-sm{margin-top:6px;font-size:var(--fs-xs);text-align:center;color:var(--muted);max-width:70px;word-break:break-word}
.vt-clock-sm{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:800;font-size:var(--fs-lg);color:var(--ink)}
#student-info-overlay { background: rgba(8,18,13,.85); }
button.qr-frame, button.qr-frame:hover { background: #fff; color: inherit; transform: none; }
html[data-theme="neon"] button.qr-frame, html[data-theme="neon"] button.qr-frame:hover { background: linear-gradient(#fff,#fff) padding-box, var(--neon-grad) border-box; }
.vt-box.vt-fs .vt-fsbtn, .vt-box.vt-fs .vt-fsbtn:hover { color: #fff !important; border-color: rgba(255,255,255,.55) !important; background: transparent !important; }

/* ==========================================================================
   THÀNH PHẦN DÙNG CHUNG — đợt 2-3 (2026-10-02). Macro ở templates/_ui.html
   ========================================================================== */
.ico { flex-shrink: 0; vertical-align: -4px; }

/* ---- Khối đầu trang ---- */
.page-head {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 0 0 22px; padding: clamp(18px, 3vw, 28px);
  border-radius: 28px; border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--primary-tint) 0%, var(--paper-panel) 78%);
  display: flex; flex-direction: column; gap: 12px;
}
.page-head::after {
  content: ""; position: absolute; z-index: -1; right: -60px; top: -80px; width: 220px; height: 220px;
  border-radius: 62% 38% 55% 45% / 45% 60% 40% 55%; background: rgba(198, 242, 78, .35);
}
.page-head h1 { margin: 0; font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.15rem); line-height: 1.15; overflow-wrap: anywhere; }
.ph-main { display: flex; align-items: flex-start; gap: 14px; }
.ph-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ph-ico { width: 48px; height: 48px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--solid); color: var(--on-solid); flex-shrink: 0; }
.ph-eyebrow { margin: 0; align-self: flex-start; border-radius: 10px !important; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700;
  padding: 3px 10px; border-radius: 999px; background: var(--paper-panel); color: var(--primary-dark); border: 1px solid var(--line);
  overflow-wrap: anywhere; }
.ph-lead { margin: 0; color: var(--muted); font-size: var(--fs-sm); max-width: 72ch; }
.ph-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ph-actions > * { margin-top: 0 !important; }
.ph-actions form { margin: 0; }
.back-chip {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 9px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700;
  background: var(--paper-panel); color: var(--primary-dark) !important; border: 1px solid var(--line); text-decoration: none;
}
.back-chip:hover { border-color: var(--primary); text-decoration: none; }
.page-head.ph-warn { background: linear-gradient(135deg, var(--warn-tint) 0%, var(--paper-panel) 78%); }
.page-head.ph-warn .ph-ico { background: var(--warn-solid); color: #fff; }
.page-head.ph-sun .ph-ico { background: var(--sun); color: var(--on-sun); }
html[data-theme="neon"] .page-head { background: radial-gradient(500px 260px at 100% 0%, rgba(192,38,211,.22), transparent 70%), var(--paper-panel); }
html[data-theme="neon"] .page-head::after { background: rgba(124,58,237,.25); filter: blur(12px); }
html[data-theme="neon"] .ph-ico { background: var(--neon-grad); color: #fff; }
html[data-theme="neon"] .ph-eyebrow { color: #C4B5FD; background: rgba(196,181,253,.1); border-color: var(--line); }
html[data-theme="neon"] .back-chip { color: #C4B5FD !important; background: rgba(196,181,253,.08); }

/* ---- Tiêu đề khu vực có icon ---- */
.sec-title { display: flex; align-items: center; gap: 10px; margin: 28px 0 10px; }
.sec-title h2 { margin: 0; }
.sec-title .ico { color: var(--primary); }
.sec-title .sec-aside { margin-left: auto; font-size: var(--fs-sm); font-weight: 600; }
.card > .sec-title:first-child, .panel > .sec-title:first-child { margin-top: 0; }

/* ---- Khung lớn (panel) ---- */
.panel { background: var(--paper-panel); border: 1px solid var(--line); border-radius: 26px; padding: clamp(16px, 2.6vw, 26px); margin-top: 18px; }
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }

/* ---- Danh sách mục dạng thẻ ---- */
.item-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.item {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px;
  background: var(--card-bg); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
a.item:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow-sm); text-decoration: none; }
.item-ico { width: 42px; height: 42px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-tint); color: var(--primary-dark); flex-shrink: 0; }
.item-ico.t-sun { background: var(--sun-tint); color: var(--sun-ink); }
.item-ico.t-warn { background: var(--warn-tint); color: var(--warn); }
.item-ico.t-solid { background: var(--solid); color: var(--on-solid); }
.item-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.item-title { font-weight: 800; font-size: var(--fs-base); line-height: 1.3; overflow-wrap: anywhere; }
.item-meta { color: var(--muted); font-size: var(--fs-xs); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.item-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.item-meta .ico { width: 14px; height: 14px; vertical-align: -2px; }
.item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.item-side .btn, .item-side button, .item-side a.btn-outline { margin-top: 0; }
.item.is-muted { opacity: .72; }
.item.is-warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-tint); }
.item.is-danger { border-color: color-mix(in srgb, var(--danger, #B42318) 45%, transparent); background: var(--danger-tint); }
@media (max-width: 640px) {
  .item { flex-wrap: wrap; align-items: flex-start; }
  .item-side { flex-direction: row; flex-wrap: wrap; align-items: center; width: 100%; padding-left: 56px; }
  .item:not(:has(.item-ico)) .item-side { padding-left: 0; }
}
html[data-theme="neon"] .item-ico { background: rgba(196,181,253,.14); color: #C4B5FD; }
html[data-theme="neon"] .item-ico.t-solid { background: var(--neon-grad); color: #fff; }

/* ---- Bảng thông tin (nhãn : giá trị) ---- */
.kv { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 0; margin: 10px 0 0; }
.kv dt, .kv dd { margin: 0; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.kv dt { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; padding-right: 18px; }
.kv dd { font-weight: 600; overflow-wrap: anywhere; }
.kv > :nth-last-child(-n+2) { border-bottom: 0; }
@media (max-width: 480px) { .kv { grid-template-columns: 1fr; } .kv dt { border-bottom: 0; padding-bottom: 0; } }

/* ---- Trạng thái rỗng ---- */
.empty-state { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 18px;
  border: 1.5px dashed var(--line); color: var(--muted); margin-top: 12px; background: transparent; }
.empty-state p { margin: 0; font-size: var(--fs-sm); }

/* ---- Lưới nút chức năng nhỏ (link nhanh) ---- */
.quick-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.quick-links a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--paper-panel); color: var(--ink); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; }
.quick-links a:hover { border-color: var(--primary); color: var(--primary-dark); text-decoration: none; }
.quick-links a .ico { color: var(--primary); width: 17px; height: 17px; }

/* ---- Bảng co giãn: điện thoại -> mỗi dòng là 1 thẻ (thêm class "rtable" cho <table>) ---- */
@media (max-width: 640px) {
  table.rtable, table.rtable tbody, table.rtable tr, table.rtable td { display: block; width: 100%; }
  table.rtable thead, table.rtable tr.rt-head { display: none; }
  table.rtable tr { border: 1px solid var(--line); border-radius: 18px; padding: 8px 14px; margin: 0 0 10px; background: var(--card-bg); }
  table.rtable tr.rt-skip { display: none; }
  table.rtable td { border: 0; padding: 7px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: right; min-height: 0; }
  table.rtable td + td { border-top: 1px dashed var(--line); }
  table.rtable td::before { content: attr(data-label); font-weight: 700; font-size: var(--fs-xs); color: var(--muted); text-align: left;
    flex: 0 0 38%; text-transform: uppercase; letter-spacing: .03em; }
  table.rtable td:not([data-label])::before, table.rtable td[data-label=""]::before { display: none; }
  table.rtable td:not([data-label]), table.rtable td[data-label=""] { justify-content: flex-start; text-align: left; }
  /* 2026-10-04 — ô không nhãn (VD ô Trạng thái điểm danh: huy hiệu + chú thích + form xin phép) được xuống dòng */
  table.rtable td:not([data-label]), table.rtable td[data-label=""] { flex-wrap: wrap; row-gap: 4px; }
  table.rtable td details.excuse-box, table.rtable td .excuse-note { flex-basis: 100%; }
  table.rtable td > * { max-width: 62%; }
  table.rtable td:not([data-label]) > *, table.rtable td[data-label=""] > * { max-width: 100%; }
  table.rtable tr[style*="background"], table.rtable tr[class*="row-"] { border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
  .table-wrap:has(> table.rtable) { overflow: visible; }
}
/* Nút trong ô bảng: không bị kéo thành hình tròn khi chữ xuống dòng */
td button, td .btn, td a.btn-outline { border-radius: 12px; }

/* ---- Biểu mẫu gọn ---- */
.form-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: 22px; padding: 18px 20px; margin-top: 16px; }
.form-card > h2:first-child, .form-card > h3:first-child { margin-top: 0; }
.field-hint { font-size: var(--fs-xs); color: var(--muted); margin: 4px 0 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.btn-row > * { margin-top: 0 !important; }
.btn-row form { margin: 0; }

/* ---- Nhãn trạng thái thêm ---- */
.badge.danger { background: var(--danger-solid); color: #fff; }
.badge.muted { background: var(--surface-2); color: var(--muted); }
.badge.solid { background: var(--solid); color: var(--on-solid); }
.badge .ico { width: 13px; height: 13px; vertical-align: -2px; }
td.mono { background: none; padding: 11px 12px; border-radius: 0; }
@media (max-width: 640px) {
  .action-grid:not(.fit-row) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .action-grid:not(.fit-row) .action-tile { padding: 13px; border-radius: 18px; }
  table.rtable tr:hover td { background: transparent; }
}

/* ---- Danh sách thành viên (nhóm) ---- */
.group-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: 22px; padding: 6px 18px 8px; margin-top: 14px; }
.group-card-head { display: flex; align-items: center; gap: 10px; padding: 10px 0 8px; border-bottom: 1px solid var(--line); }
.group-card-head h3 { margin: 0; font-size: var(--fs-md); }
.group-card-head .badge { margin-left: auto; }
.mrow { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto auto; gap: 8px 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.mrow:last-child { border-bottom: 0; }
.mrow .m-code { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); }
.mrow .m-name { font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.mrow select { margin: 0; width: auto; min-width: 150px; }
.mrow form { margin: 0; }
.mrow button, .mrow .btn-outline { margin-top: 0; }
@media (max-width: 640px) {
  .mrow { grid-template-columns: minmax(0, 1fr) auto; }
  .mrow .m-code, .mrow .m-name { grid-column: 1 / -1; }
  .mrow select { min-width: 0; width: 100%; }
}

/* ---- Lựa chọn dạng thẻ (radio/checkbox) ---- */
.choice-group { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.choice-group.vertical { flex-direction: column; }
.choice { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; border: 1.5px solid var(--line);
  background: var(--paper-panel); font-weight: 600; font-size: var(--fs-sm); cursor: pointer; margin: 0 !important; }
.choice input { margin: 0; width: auto; accent-color: var(--primary); }
.choice:has(input:checked) { border-color: var(--primary); background: var(--primary-tint); color: var(--primary-dark); }
html[data-theme="neon"] .choice:has(input:checked) { border-color: #A78BFA; background: rgba(167,139,250,.14); color: var(--ink); }
.check-list { max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: 16px; padding: 4px; background: var(--paper-panel); margin-top: 6px; }
.check-list label { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 12px; margin: 0; font-weight: 500; font-size: var(--fs-sm); cursor: pointer; }
.check-list label:hover { background: var(--surface-2); }
.check-list label:has(input:checked) { background: var(--primary-tint); }
.check-list input { margin: 3px 0 0; width: auto; }
.inline-fields { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.inline-fields label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: var(--fs-sm); }
.inline-fields input { margin: 0; }
@media (max-width:640px){ table.rtable td.rt-hide-m { display:none; } }

/* ---- Trang điểm SV ---- */
.score-big { margin: 4px 0 8px; display: flex; align-items: baseline; gap: 8px; }
.score-big strong { font-family: var(--font-display); font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.4rem); line-height: 1; color: var(--primary-dark); }
.score-big span { font-size: var(--fs-lg); color: var(--muted); font-weight: 700; }
.score-big.is-bad strong { color: var(--danger-ink); }
html[data-theme="neon"] .score-big strong { background: var(--neon-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.final-card { border: 2px solid var(--primary); background: linear-gradient(135deg, var(--primary-tint), var(--card-bg) 70%); }
html[data-theme="neon"] .final-card { border: 2px solid transparent; background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, var(--neon-grad) border-box; }
.grade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; align-items: start; }
.grade-grid .grade-card { margin-top: 0; }
.gc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.gc-score { font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--primary-dark); white-space: nowrap; }
.grade-card.is-banned { border-color: color-mix(in srgb, var(--danger-solid) 40%, transparent); }
.go-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: var(--fs-sm); color: var(--primary-dark); white-space: nowrap; }
a.item:hover .go-link { text-decoration: underline; }
html[data-theme="neon"] .go-link { color: #C4B5FD; }
details.more-rows { margin-top: 12px; }
details.more-rows > summary { cursor: pointer; font-weight: 800; font-size: var(--fs-sm); color: var(--primary-dark); padding: 10px 0; list-style: none; }
details.more-rows > summary::before { content: "▸ "; }
details.more-rows[open] > summary::before { content: "▾ "; }
html[data-theme="neon"] details.more-rows > summary { color: #C4B5FD; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; align-items: start; margin-top: 16px; }
.card-grid > .card { margin-top: 0 !important; }
.auth-wrap.solo { grid-template-columns: 1fr; max-width: 480px; }
.auth-solo-mark { width: 52px; height: 52px; border-radius: 16px; display: block; margin-bottom: 14px; }
.auth-card .auth-foot { margin-top: 22px; font-size: var(--fs-sm); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) { .stat-row .stat-pill.wide { grid-column: 1 / -1; } }

/* đợt 3 — G2 (trang điểm/nhóm/bình chọn của GV) */
.g2-col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; margin-top: 12px; }
.g2-col-card { background: var(--paper-panel); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.g2-col-card p { margin: 0; }
.g2-col-name { font-weight: 800; overflow-wrap: anywhere; line-height: 1.3; }
.g2-col-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.g2-col-card .btn, .g2-col-card button { margin-top: 0; }
.g2-file-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.g2-file-row input[type="file"] { flex: 1 1 180px; min-width: 0; max-width: 100%; margin: 0; }
.g2-file-row button, .g2-file-row .btn { margin-top: 0; }
.g2-savebar { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: 20px; border: 1.5px solid var(--primary); background: var(--primary-tint); margin-top: 18px; }
.g2-savebar-text { flex: 1 1 320px; min-width: 0; display: flex; gap: 10px; align-items: flex-start; }
.g2-savebar-text p { margin: 0; }
.g2-savebar-text > .ico { color: var(--primary); flex-shrink: 0; margin-top: 2px; }
.g2-savebar button { margin-top: 0; }
.g2-savebar.is-foot { margin: 0; border-width: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
html[data-theme="neon"] .g2-savebar { border-color: #A78BFA; background: rgba(167,139,250,.10); }
html[data-theme="neon"] .g2-savebar.is-foot { background: transparent; border-color: var(--line); }
html[data-theme="neon"] .g2-savebar-text > .ico { color: #C4B5FD; }
.g2-mini-col { padding-top: 14px; margin-top: 14px; border-top: 1px dashed var(--line); }
.g2-mini-col > h3 { margin: 0 0 4px; font-size: var(--fs-md); }
.g2-mini { background: var(--paper-panel); border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; margin-top: 10px; }
.g2-mini-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 0 0 8px; }
.g2-mini .check-list label { display: flex; }
.g2-opt { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1.5px solid var(--line); border-radius: 14px;
  background: var(--paper-panel); font-size: var(--fs-sm); font-weight: 600; margin: 0; width: fit-content; max-width: 100%; line-height: 1.4; }
.g2-opt input { margin: 0; width: auto; flex-shrink: 0; accent-color: var(--primary); }
.g2-opt:has(input:checked) { background: var(--primary-tint); }
.g2-opt.is-sun { border-color: var(--sun); }
.g2-opt.is-violet { border-color: #7C5BB0; }
.g2-opt.is-primary { border-color: var(--primary); }
html[data-theme="neon"] .g2-opt.is-violet { border-color: #A78BFA; }
html[data-theme="neon"] .g2-opt:has(input:checked) { background: rgba(167,139,250,.14); }
.g2-num { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-sm); font-weight: 600; }
.g2-num input { margin: 0; }
.badge.g2-violet { background: #6A4C93; color: #fff; }
html[data-theme="neon"] .badge.g2-violet { background: #A78BFA; color: #160D2E; }
.badge.g2-tint { background: var(--primary-tint); color: var(--primary-dark); }
html[data-theme="neon"] .badge.g2-tint { background: rgba(196,181,253,.14); color: #C4B5FD; }
.g2-node { border-top: 1px solid var(--line); padding: 14px 0 6px; }
.card > .g2-node:first-child { border-top: 0; padding-top: 0; }
.g2-node-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 16px; flex-wrap: wrap; }
.g2-node-title { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.g2-node-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.g2-node-name .badge { white-space: normal; text-align: left; line-height: 1.35; }
.g2-node-name .g2-w { font-family: var(--font-display); font-weight: 800; color: var(--primary-dark); }
html[data-theme="neon"] .g2-node-name .g2-w { color: #C4B5FD; }
.g2-node-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.g2-node-actions:has(> details[open]) { flex-basis: 100%; }
.g2-node-actions form { margin: 0; }
.g2-node-actions button, .g2-node-actions .btn { margin-top: 0; }
details.g2-edit > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border-radius: 999px; border: 1.5px solid var(--line); background: var(--paper-panel); font-weight: 700; font-size: var(--fs-sm); color: var(--ink); }
details.g2-edit > summary::-webkit-details-marker { display: none; }
details.g2-edit > summary .ico { width: 16px; height: 16px; color: var(--primary); }
details.g2-edit[open] > summary { border-color: var(--primary); background: var(--primary-tint); }
html[data-theme="neon"] details.g2-edit > summary .ico { color: #C4B5FD; }
html[data-theme="neon"] details.g2-edit[open] > summary { border-color: #A78BFA; background: rgba(167,139,250,.14); }
details.g2-edit[open] { flex-basis: 100%; }
.g2-edit-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; padding: 14px; border-radius: 16px;
  background: var(--surface-2); border: 1px solid var(--line); }
.g2-edit-form input[type="text"], .g2-edit-form select { flex: 1 1 220px; min-width: 0; margin: 0; }
.g2-edit-form input[type="number"] { margin: 0; }
.g2-edit-form button { margin-top: 0; }
.g2-att-cfg { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.g2-sub { padding: 10px 0 4px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.g2-sub > form { margin: 0; }
.g2-sub button { margin-top: 0; }
.g2-addchild { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; padding: 12px; border-radius: 16px; border: 1.5px dashed var(--line); }
.g2-addchild > input[type="text"] { flex: 1 1 220px; min-width: 0; margin: 0; }
.g2-addchild > input[type="number"] { margin: 0; }
.g2-addchild > button { margin-top: 0; }
.g2-addchild details { flex-basis: auto; }
.g2-addchild details[open] { flex-basis: 100%; order: 5; }
.g2-addchild .g2-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.g2-tree-row { border-top: 1px solid var(--line); padding: 10px 0; }
.g2-tree-row .row-between strong { font-family: var(--font-display); font-size: var(--fs-md); }
.card > .g2-tree-row:first-of-type { border-top: 0; }
.g2-bar { background: var(--surface-2); border-radius: 999px; height: 14px; overflow: hidden; }
.g2-bar > span { display: block; background: var(--solid); height: 100%; transition: width .3s; }
html[data-theme="neon"] .g2-bar > span { background: var(--neon-grad); }
.g2-cols3 { display: grid; grid-template-columns: minmax(200px, 1.2fr) minmax(200px, 1fr) minmax(240px, 2fr); gap: 0 14px; align-items: start; }
@media (max-width: 760px) { .g2-cols3 { grid-template-columns: 1fr; } }
.g2-rank { display: flex; flex-wrap: wrap; gap: 6px 14px; }
@media (max-width: 640px) {
  .g2-node-title { flex-basis: 100%; }
  .g2-edit-form, .g2-addchild { padding: 10px; }
  .g2-opt { width: 100%; }
}

/* đợt 3 — G4: thẻ lớp (admin_dashboard), khung hẹp, lưới số liệu */
.g4-narrow { max-width: 620px; }
.g4-cc { position: relative; overflow: hidden; padding-top: 22px; gap: 0; }
.g4-cc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--primary); }
.g4-cc.is-ended::before { background: var(--warn); }
.g4-cc.is-ended { opacity: .85; }
.g4-cc-link { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.g4-cc-link:hover { text-decoration: none; }
.g4-cc-ico { width: 42px; height: 42px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-tint); color: var(--primary-dark); margin-bottom: 4px; }
.g4-cc-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; margin-top: 2px; }
.g4-cc-meta span { display: inline-flex; align-items: center; gap: 5px; }
.g4-cc-foot { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line); }
.g4-cc .btn-row { margin-top: 14px; }
html[data-theme="neon"] .g4-cc::before { background: var(--neon-grad); }
html[data-theme="neon"] .g4-cc.is-ended::before { background: var(--warn); }
html[data-theme="neon"] .g4-cc-ico { background: rgba(196,181,253,.14); color: #C4B5FD; }

/* đợt 3 — G1: trang lớp GV (admin_class…) */
.g1-meta { border: 1px solid var(--line); border-radius: 16px; background: var(--paper-panel); font-size: var(--fs-sm); max-width: 100%; }
.g1-meta > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 7px 12px; color: var(--ink); flex-wrap: wrap; }
.g1-meta > summary::-webkit-details-marker { display: none; }
.g1-meta > summary > .ico { color: var(--primary); }
.g1-meta-edit { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 700; color: var(--primary-dark); }
.g1-meta[open] { flex-basis: 100%; }
.g1-meta-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 12px 10px; margin: 0; }
.g1-meta-form input { flex: 1 1 200px; margin: 0; max-width: 360px; }
.g1-meta-form button { margin-top: 0; min-height: 40px; padding: 8px 16px; }
.g1-prog { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-top: 10px; max-width: 520px; }
.g1-prog > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.g1-acts { margin-top: 0; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.g1-acts form { display: inline-flex; margin: 0; }
td .g1-acts a.btn-outline, .g1-acts a.btn-outline { padding: 6px 14px; min-height: 34px; font-size: var(--fs-xs); border-radius: 12px; }
.g1-cellrow { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.g1-search { position: relative; margin-top: 4px; max-width: 460px; }
.g1-search > .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.g1-search input { padding-left: 42px; margin: 0; }
.g1-email { overflow-wrap: anywhere; font-size: var(--fs-sm); }
@media (max-width: 640px) {
  .g1-acts { justify-content: flex-start; }
  .g1-meta { flex: 1 1 100%; }
}
html[data-theme="neon"] .g1-prog > span { background: var(--neon-grad); }
html[data-theme="neon"] .g1-meta > summary > .ico, html[data-theme="neon"] .g1-meta-edit { color: #C4B5FD; }
/* đợt 3 — G1: bảng SV trong trang lớp */
@media (min-width: 641px) {
  table.g1-stable th, table.g1-stable td { padding-left: 8px; padding-right: 8px; }
  table.g1-stable td.mono { font-size: var(--fs-xs); white-space: nowrap; }
  table.g1-stable td:nth-child(2) { min-width: 140px; }
  table.g1-stable .g1-email { font-size: var(--fs-xs); min-width: 120px; }
  table.g1-stable .g1-cellrow { flex-wrap: nowrap; }
  table.g1-stable td:nth-child(3) { white-space: nowrap; }
}

/* đợt 3 — G4: mũi tên cuối thẻ item không bị đẩy xuống dòng trên điện thoại */
@media (max-width: 640px) { .item > .g4-go { align-self: center; margin-left: auto; } .item:has(> .g4-go) { flex-wrap: nowrap; } }

/* đợt 3 — G3: cột thẻ xếp chồng trong card-grid; ô trống ẩn trên điện thoại */
.card-grid > .g3-col > .card:first-child { margin-top: 0; }
@media (max-width: 640px) { table.rtable td.g3-hide-sm { display: none; } }

/* đợt 3 — G4: khối môn học (admin_manage), khung details */
.g4-course > .sec-title { flex-wrap: wrap; }
.g4-course-aside { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.g4-course .form-card { background: var(--card-bg); }
details.g4-box { border: 1px solid var(--line); border-radius: 16px; padding: 4px 16px 12px; background: var(--card-bg); margin-top: 10px; }
details.g4-box:not([open]) { padding-bottom: 4px; }
/* đợt 3 — G1: chữ báo thiếu dữ liệu */
.g1-miss { color: var(--danger-ink); font-weight: 600; font-size: var(--fs-sm); display: inline-flex; align-items: flex-start; gap: 5px; }
html[data-theme="neon"] .g1-miss { color: #FCA5A5; }

/* đợt 3 — G4: banner (admin_banners) */
.g4-banner { align-items: flex-start; }
.g4-banner-img { width: 150px; height: auto; border-radius: 12px; border: 1px solid var(--line); flex-shrink: 0; display: block; }
@media (max-width: 640px) { .g4-banner-img { width: 100%; max-width: 360px; } .g4-banner .item-body { flex-basis: 100%; } }

/* đợt 3 — G4: nút trong ô bảng không xuống dòng chữ */
.g4-nw a, .g4-nw button { white-space: nowrap; }
/* đợt 3 — G1: form thêm khung giờ (admin_class_schedule) */
.g1-slotform { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 16px; }
.g1-slotform select, .g1-slotform > .btn, .g1-slotform > button { grid-column: 1 / -1; }
.g1-slotform select, .g1-slotform input { margin: 0; width: 100%; }
.g1-slotform > button { margin-top: 0; justify-self: start; }
/* đợt 3 — G1: nút mở form gọn trong ô bảng (details.g1-pop) */
details.g1-pop > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; min-height: 34px;
  border-radius: 12px; border: 1.5px solid var(--primary); color: var(--primary-dark); font-weight: 700; font-size: var(--fs-xs); background: transparent; }
details.g1-pop > summary::-webkit-details-marker { display: none; }
details.g1-pop > summary:hover { background: var(--primary-tint); }
details.g1-pop[open] > summary { background: var(--primary-tint); }
details.g1-pop > form { margin-top: 10px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper-panel); min-width: 240px; }
details.g1-pop > form label:first-of-type { margin-top: 0; }
details.g1-pop[open] { flex-basis: 100%; }
html[data-theme="neon"] details.g1-pop > summary { border-color: #A78BFA; color: #C4B5FD; }
html[data-theme="neon"] details.g1-pop > summary:hover, html[data-theme="neon"] details.g1-pop[open] > summary { background: rgba(167,139,250,.14); }

/* đợt 3 — G3: hàng link (URL + nhãn + Xoá) gọn, xuống dòng trên điện thoại */
.g3-links .multi-link-row { flex-wrap: wrap; align-items: center; gap: 8px !important; }
.g3-links .multi-link-row input[type="url"], .g3-links .multi-link-row input[type="text"] { min-width: 0; margin: 0; flex: 1 1 200px !important; }
.g3-links .multi-link-row button, .g3-links .multi-link-row label { margin: 0; }
/* đợt 3 — G1: bảng có ô "chọn tất cả" vẫn hiện trên điện thoại */
.g1-checkall { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; font-size: var(--fs-sm); cursor: pointer; }
.g1-checkall input { margin: 0; width: auto; }
.g1-m-only { display: none; }
.badge.g1-wrap { white-space: normal; line-height: 1.35; }
@media (max-width: 640px) {
  table.rtable.g1-keephead thead { display: block; }
  table.rtable.g1-keephead thead tr { display: block; border: 0; background: transparent; padding: 0 4px; margin: 0 0 8px; }
  table.rtable.g1-keephead thead th { display: none; }
  table.rtable.g1-keephead thead th:first-child { display: block; background: transparent; border: 0; padding: 0; text-transform: none; letter-spacing: 0; }
  .g1-m-only { display: inline; }
}

/* đợt 3 — G4: thẻ yêu cầu duyệt (đổi email / MSSV), danh sách tin nhắn */
.g4-req-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.g4-change { padding: 10px 14px; border-radius: 14px; background: var(--surface-2); border: 1px dashed var(--line); margin-bottom: 10px; overflow-wrap: anywhere; }
.g4-new { color: var(--primary-dark); font-weight: 800; }
.g4-msg-link { color: inherit; text-decoration: none; }
.g4-msg-link:hover { text-decoration: none; }
.g4-msg-link:hover .item-title { color: var(--primary-dark); }
.g4-msg-last { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-title.g4-wrap { flex-wrap: wrap; }
html[data-theme="neon"] .g4-new { color: #C4B5FD; }
html[data-theme="neon"] .g4-msg-link:hover .item-title { color: #C4B5FD; }
/* đợt 3 — G1: dòng thông tin có icon */
.g1-line { display: flex; gap: 10px; align-items: flex-start; }
.g1-line > .ico { color: var(--primary); margin-top: 2px; }
html[data-theme="neon"] .g1-line > .ico { color: #C4B5FD; }

/* đợt 3 — G4: thân thẻ tin nhắn không bị đẩy xuống dưới icon trên điện thoại */
.g4-msg .item-body { flex: 1 1 0; }
.sec-title.g4-wrap h2 { font-size: var(--fs-lg); }
/* đợt 3 — G1: ẩn ô tuỳ chọn rỗng trong thẻ bảng điện thoại */
@media (max-width: 640px) { table.rtable td.g1-opt:empty { display: none; } }

/* đợt 3 — G3: hàng nút lọc (Tất cả / Đã nộp / ...) — nút nhỏ, nút đang chọn tô đậm */
.g3-filter button { margin-top: 0; padding: 6px 14px; min-height: 36px; font-size: var(--fs-xs); }
.g3-filter button.g3-on { background: var(--solid); border-color: var(--solid); color: var(--on-solid); }
html[data-theme="neon"] .g3-filter button.g3-on { background: var(--neon-grad); border-color: transparent; color: #fff; }

/* đợt 3 — G3: nhãn dài trong bảng rtable được xuống dòng trên điện thoại */
@media (max-width: 640px) {
  table.g3-tbl .badge { white-space: normal; text-align: left; line-height: 1.35; }
  table.g3-tbl td > span { min-width: 0; overflow-wrap: anywhere; }
}
/* đợt 3 — G1: thẻ nội dung từng buổi (admin_session_plans) */
.g1-plan { margin-top: 14px; padding: clamp(16px, 2.4vw, 22px); }
.g1-plan-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.g1-plan-head h2 { font-size: var(--fs-lg); }
.g1-plan-save { margin: 0 0 0 auto; }
.g1-plan-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.g1-plan-row > button { margin-top: 0; }
.g1-plan-slide { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.g1-subhead { margin: 0 0 8px; font-weight: 800; font-size: var(--fs-sm); color: var(--ink); }
.g1-deck { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper-panel); }
.g1-deck-main { flex: 1 1 380px; min-width: 0; }
.g1-deck-acts { margin-top: 0; align-self: flex-start; gap: 8px; }
.g1-deck-acts form { display: inline-flex; margin: 0; }
.g1-deck-sv { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--primary-tint); }
.g1-upform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.g1-upform input, .g1-upform select { margin: 0; flex: 1 1 200px; width: auto; }
.g1-upform input[type=file] { flex-basis: 260px; }
.g1-upform button { margin-top: 0; }
@media (max-width: 640px) { .g1-plan-save { margin-left: 0; } }
html[data-theme="neon"] .g1-deck-sv { background: rgba(167,139,250,.12); }

/* đợt 3 — G4: thẻ item giữ thân cạnh icon trên điện thoại */
.g4-it .item-body { flex: 1 1 0; min-width: 0; }
/* đợt 3 — G2: hàng thành viên nhóm thẳng cột (admin_class_groups) */
.mrow.g2-mrow { grid-template-columns: 128px minmax(0, 1fr) 170px 180px; }
.mrow.g2-mrow select { width: 100%; min-width: 0; }
.mrow.g2-mrow button { width: 100%; }
@media (max-width: 640px) {
  .mrow.g2-mrow { grid-template-columns: minmax(0, 1fr) auto; }
  .mrow.g2-mrow button { width: auto; }
}
/* đợt 3 — G1: thẻ đơn xin phép (admin_class_excuses) */
.g1-excuse { margin-top: 0; padding: 16px 18px; }
.g1-excuse-head { display: flex; align-items: flex-start; gap: 12px; }
.g1-excuse-head .item-side { flex-direction: row; flex-wrap: wrap; }
.g1-excuse-body { margin: 12px 0 0 54px; padding: 10px 14px; border-radius: 14px; background: var(--paper-panel); border: 1px solid var(--line); }
.g1-excuse-acts { margin-left: 54px; }
.g1-excuse-acts form { display: inline-flex; }
.g1-excuse .field-hint { margin-left: 54px; }
.g1-reject { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.g1-reject input { margin: 0; width: 220px; max-width: 100%; }
.g1-reject button { margin-top: 0; }
@media (max-width: 640px) {
  .g1-excuse-head { flex-wrap: wrap; }
  .g1-excuse-head .item-side { width: 100%; padding-left: 54px; }
  .g1-excuse-body, .g1-excuse-acts, .g1-excuse .field-hint { margin-left: 0; }
  .g1-reject, .g1-reject input { width: 100%; }
}
/* đợt 3 — G2: nới cột nút trưởng nhóm */
@media (min-width: 641px) { .mrow.g2-mrow { grid-template-columns: 128px minmax(0, 1fr) 170px 210px; } .mrow.g2-mrow button { white-space: nowrap; } }
/* đợt 3 — G1: chỉnh thẻ đơn xin phép */
.g1-excuse-acts button { margin-top: 0; }
.g1-excuse > p { margin-left: 54px; }
@media (max-width: 640px) { .g1-excuse > p { margin-left: 0; } }
/* đợt 3 — G1: thân thẻ đơn xin phép không rớt dòng */
.g1-excuse-head .item-body { flex: 1 1 0; }

/* đợt 3 — G4: dòng chọn SV trong danh sách cuộn (admin_class_notify) */
.g4-srow-body { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
/* đợt 3 — G1: form mở ân hạn trong bảng báo cáo vắng */
.g1-grace { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.g1-grace label { font-weight: 600; font-size: var(--fs-xs); color: var(--muted); }
.g1-grace input { width: 64px; margin: 0; padding: 6px 8px; }
/* đợt 3 — G1: ô 2 dòng (tên + mã) trong bảng */
.g1-two { display: inline-flex; flex-direction: column; gap: 2px; }
.g1-two br { display: none; }
@media (max-width: 640px) { .g1-two { align-items: flex-end; text-align: right; } }
/* đợt 3 — G1: ô số ân hạn gọn */
.g1-grace input[type="number"] { width: 64px; min-height: 34px; height: 34px; padding: 4px 8px; margin: 0; font-size: var(--fs-sm); }
@media (min-width: 641px) { table.g1-rep td:nth-child(2) { min-width: 150px; } }

/* đợt 3 — G3: danh sách đáp án trong trang xem bài làm bộ đề */
.g3-opts { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.g3-opt { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper-panel); }
.g3-opt-mark { flex: 0 0 auto; line-height: 1.5; }
.g3-opt.is-correct { border-color: var(--primary); background: var(--primary-tint); color: var(--primary-dark); font-weight: 600; }
.g3-opt.is-wrong { border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: var(--warn-tint); }
html[data-theme="neon"] .g3-opt.is-correct { border-color: #A78BFA; background: rgba(167,139,250,.14); color: var(--ink); }
.stat-pill .num .g3-of { font-size: .55em; font-weight: 700; color: var(--muted); }

/* đợt 3 — G4: trang thực tập (admin_class_internship) */
.g4-h3 { font-size: var(--fs-md) !important; }
.g4-intern-head { display: flex; align-items: flex-start; gap: 14px; }
.g4-intern-head h2 { font-size: var(--fs-lg); overflow-wrap: anywhere; }
.g4-fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 4px 16px; align-items: end; }
.g4-fgrid > label { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 0; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.g4-fgrid > label input { margin: 0; }
.g4-fgrid .g4-span2 { grid-column: span 2; }
.g4-fgrid .g4-spanall { grid-column: 1 / -1; }
@media (max-width: 640px) { .g4-fgrid .g4-span2 { grid-column: 1 / -1; } }
.g4-colgrid { max-height: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 0 8px; }
.g4-colgroup { grid-column: 1 / -1; font-weight: 800; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 10px 10px 2px; }
.g4-progress td.g4-content-cell { max-width: 280px; }
.g4-progress td.g4-comment-cell { min-width: 240px; }
@media (max-width: 640px) { .g4-progress td.g4-content-cell { max-width: none; } .g4-progress td.g4-comment-cell { min-width: 0; } }
.g4-top-btn { position: fixed; bottom: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%; padding: 0; margin: 0;
  background: var(--solid); color: var(--on-solid); border: none; font-size: var(--fs-lg); cursor: pointer; box-shadow: var(--shadow-sm); z-index: 20; }
@media (max-width: 760px) { .g4-top-btn { bottom: 104px; right: 16px; } }
html[data-theme="neon"] .g4-top-btn { background: var(--neon-grad); color: #fff; }
/* đợt 3 — G1: điện thoại — thân item nằm cạnh icon, không rớt dòng */
@media (max-width: 640px) { .g1-items .item > .item-body { flex: 1 1 0; } }
@media (max-width: 640px) { .g4-progress .badge { white-space: normal; text-align: left; } }

/* đợt 3 — G4: thư cảm ơn đơn vị thực tập */
.g4-tg { background: var(--card-bg); }
.g4-tg-name { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-md); }
.g4-tg-name .ico { color: var(--primary); }
html[data-theme="neon"] .g4-tg-name .ico { color: #C4B5FD; }

/* đợt 3 — G4: thiết lập 2FA */
.g4-steps { margin: 16px 0 0; padding-left: 0; list-style: none; counter-reset: g4s; display: flex; flex-direction: column; gap: 8px; }
.g4-steps li { counter-increment: g4s; display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink); }
.g4-steps li::before { content: counter(g4s); flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-tint); color: var(--primary-dark); font-weight: 800; font-size: var(--fs-xs); }
.g4-qr { margin-top: 18px; display: inline-block; padding: 12px; border-radius: 18px; background: var(--card-bg); border: 1px solid var(--line); }
.g4-qr img { display: block; }
.g4-otp { max-width: 220px; font-family: var(--font-mono); letter-spacing: .3em; font-size: var(--fs-lg); }
html[data-theme="neon"] .g4-steps li::before { background: rgba(196,181,253,.14); color: #C4B5FD; }
html[data-theme="neon"] .g4-qr { background: #fff; }

/* đợt 3 — G3: dòng tài nguyên (link/PDF) + hàng thêm mới + hàng đáp án trong trang bộ đề */
.g3-res-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--line); }
.g3-res-row form { margin: 0; }
.g3-res-row button { margin-top: 0; padding: 6px 14px; min-height: 34px; font-size: var(--fs-xs); }
.g3-res-name { min-width: 0; overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.g3-res-name .ico { color: var(--primary); flex: 0 0 auto; }
.g3-addrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.g3-addrow input { flex: 1 1 200px; min-width: 0; margin: 0; }
.g3-addrow button { margin-top: 0; }
.g3-optrows .row { flex-wrap: wrap; align-items: center; }
.g3-optrows .row input[type="text"] { flex: 1 1 220px !important; min-width: 0; margin: 0; }
.g3-optrows .row label { margin: 0; display: inline-flex; gap: 6px; align-items: center; }
.g3-optrows .row label input { width: auto; margin: 0; }
html[data-theme="neon"] .g3-res-name .ico { color: #C4B5FD; }
.g4-sort { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; max-width: 100%; }
.g4-sort select { margin: 0; max-width: 100%; }
@media (max-width: 640px) { .g4-sort { width: 100%; margin-left: 0; } }

/* đợt 3 — G3: nhãn dài được xuống dòng */
.g3-badges .badge { white-space: normal; text-align: left; line-height: 1.35; }
/* đợt 3 — G3: đáp án dài — nhãn bên phải xuống dòng khi hẹp */
.g3-opt { flex-wrap: wrap; }
.g3-opt > span:last-child:not(:nth-child(2)) { margin-left: auto; }

/* đợt 3 — G3: tiêu đề nhóm lớp dài — phần phụ (số bài, link lọc) xuống dòng thay vì ép tiêu đề */
.sec-title.g3-sec { flex-wrap: wrap; row-gap: 4px; }
.sec-title.g3-sec h2 { flex: 1 1 260px; min-width: 0; }
.sec-title.g3-sec .sec-aside { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* đợt 3 — G4: ghi chú — 2 dòng ".g4-progress .badge" (mobile) và khối ".g4-sort" phía trên (nằm sau comment G1/G3 do ghi song song) cũng là của G4 */

/* ---- Màu thanh chuyên cần (trang Tổng quan, routes_overview.py) ---- */
:root { --att-full: #12784F; --att-ok: #9CC5AD; --att-near: #EAB308; --att-over: #E5383B; --att-ban: #8B1E1E; --att-grace: #B08900; }
html[data-theme="neon"] { --att-full: #4ADE80; --att-ok: #2DD4BF; --att-near: #FACC15; --att-over: #FB7185; --att-ban: #E11D48; --att-grace: #F59E0B; }

/* ==========================================================================
   TÔN VINH CHUYÊN CẦN (2026-10-02) — honors.py + macro honor_badge (_ui.html)
   Bậc 1 Măng non (xanh lá–chanh) · Bậc 2 Tre xanh (ngọc–bạc) · Bậc 3 Lũy tre (vàng, ánh kim)
   ========================================================================== */
:root {
  --hn1-a: #C6F24E; --hn1-b: #12784F; --hn1-tint: #F0FBE4; --hn1-ink: #0F5A3C;
  --hn2-a: #5EEAD4; --hn2-b: #94A3B8; --hn2-tint: #E8F7F5; --hn2-ink: #0B4F4B; /* 2026-10-04 — đậm hơn: chữ mờ .8 trên nền tint đạt 4.5:1 */
  --hn3-a: #FDE68A; --hn3-b: #D97706; --hn3-tint: #FFF7DB; --hn3-ink: #7C4A03;
}
html[data-theme="neon"] {
  --hn1-tint: rgba(74, 222, 128, .10); --hn1-ink: #86EFAC;
  --hn2-tint: rgba(45, 212, 191, .10); --hn2-ink: #99F6E4;
  --hn3-tint: rgba(251, 191, 36, .12); --hn3-ink: #FCD34D;
}
.honor-badge { flex-shrink: 0; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)); }
.honor-badge.hb-0 { filter: grayscale(1); opacity: .55; }

/* Khung lớp đặc biệt */
.class-panel.honor { border: 2.5px solid transparent; }
.class-panel.honor-t1 { background: linear-gradient(var(--paper-panel), var(--paper-panel)) padding-box, linear-gradient(135deg, var(--hn1-a), var(--hn1-b)) border-box; box-shadow: 0 22px 46px -26px rgba(18,120,79,.6); }
.class-panel.honor-t2 { background: linear-gradient(var(--paper-panel), var(--paper-panel)) padding-box, linear-gradient(135deg, var(--hn2-a), #E2E8F0 45%, var(--hn2-b) 70%, var(--hn2-a)) border-box; box-shadow: 0 22px 46px -24px rgba(15,118,110,.6); }
.class-panel.honor-t3 { background: linear-gradient(var(--paper-panel), var(--paper-panel)) padding-box, linear-gradient(120deg, var(--hn3-b), var(--hn3-a), #FFFBEB, var(--hn3-a), var(--hn3-b)) border-box;
  background-size: 100% 100%, 300% 300%; animation: dkGoldShimmer 6s linear infinite; box-shadow: 0 24px 54px -22px rgba(217,119,6,.65); }
@keyframes dkGoldShimmer { 0% { background-position: 0 0, 0% 50%; } 100% { background-position: 0 0, 300% 50%; } }
@media (prefers-reduced-motion: reduce) { .class-panel.honor-t3 { animation: none; } }
.class-panel.honor::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; pointer-events: none; opacity: .5; }
.class-panel.honor-t1::after { background: radial-gradient(circle, var(--hn1-a), transparent 70%); }
.class-panel.honor-t2::after { background: radial-gradient(circle, var(--hn2-a), transparent 70%); }
.class-panel.honor-t3::after { background: radial-gradient(circle, var(--hn3-a), transparent 70%); }

/* Dải danh hiệu trong khung lớp */
.honor-banner { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(200px, 260px); gap: 14px 20px; align-items: center;
  padding: 16px 20px; border-radius: 24px; }
.hbn-t1 { background: var(--hn1-tint); color: var(--hn1-ink); }
.hbn-t2 { background: var(--hn2-tint); color: var(--hn2-ink); }
.hbn-t3 { background: var(--hn3-tint); color: var(--hn3-ink); }
.hbn-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hbn-eyebrow { font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .07em; opacity: .8; }
.hbn-title { font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); line-height: 1.15; }
.hbn-tag { font-size: var(--fs-sm); font-weight: 600; opacity: .9; }
.hbn-streak { align-self: flex-start; margin-top: 4px; font-size: var(--fs-xs); font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--paper-panel); color: var(--ink); }
.hbn-next { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); }
.hbn-next-lbl { font-weight: 700; opacity: .85; }
.hbn-next-row { display: flex; align-items: center; gap: 8px; }
.hbn-next .progress { height: 9px; background: color-mix(in srgb, currentColor 15%, transparent); }
.hbn-t1 .progress > span { background: linear-gradient(90deg, var(--hn1-b), var(--hn1-a)); }
.hbn-t2 .progress > span { background: linear-gradient(90deg, #0F766E, var(--hn2-a)); }
.hbn-t3 .progress > span { background: linear-gradient(90deg, var(--hn3-b), var(--hn3-a)); }
@media (max-width: 700px) {
  .honor-banner { grid-template-columns: auto minmax(0, 1fr); }
  .hbn-next { grid-column: 1 / -1; }
}
.honor-hint { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; border: 1.5px dashed var(--line); font-size: var(--fs-sm); }
.honor-hint .progress { height: 8px; }

/* Bảng vinh danh */
.honor-board { border: 1px solid var(--line); border-radius: 22px; padding: 14px 16px; background: linear-gradient(135deg, var(--hn3-tint), var(--card-bg) 60%); }
.honor-board.gv { margin-top: 10px; }
.hb-head { margin: 0 0 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; font-weight: 800; }
.hb-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 8px; }
.hb-list li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 16px; background: var(--paper-panel); border: 1px solid var(--line); min-width: 0; }
.hb-list li.is-me { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); }
.hb-name { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.hb-streak { font-family: var(--font-mono); font-weight: 800; font-size: var(--fs-xs); white-space: nowrap; color: var(--primary-dark); }
html[data-theme="neon"] .hb-streak { color: #FCD34D; }
html[data-theme="neon"] .hbn-streak { background: rgba(255,255,255,.08); color: var(--ink); }
/* tăng độ nổi bật khung danh hiệu */
.class-panel.honor { border-width: 3px; }
.class-panel.honor-t2 { background-image: radial-gradient(700px 260px at 100% 0%, var(--hn2-tint), transparent 70%), linear-gradient(var(--paper-panel), var(--paper-panel)), linear-gradient(135deg, var(--hn2-a), #CBD5E1 45%, #0F766E 70%, var(--hn2-a));
  background-origin: padding-box, padding-box, border-box; background-clip: padding-box, padding-box, border-box; }
.class-panel.honor-t3 { background-image: radial-gradient(700px 280px at 100% 0%, var(--hn3-tint), transparent 70%), linear-gradient(var(--paper-panel), var(--paper-panel)), linear-gradient(120deg, #B45309, #F59E0B, #FCD34D, #F59E0B, #B45309, #F59E0B, #FCD34D);
  background-origin: padding-box, padding-box, border-box; background-clip: padding-box, padding-box, border-box;
  background-size: 100% 100%, 100% 100%, 300% 300%; animation: dkGoldShimmer2 6s linear infinite; }
@keyframes dkGoldShimmer2 { 0% { background-position: 0 0, 0 0, 0% 50%; } 100% { background-position: 0 0, 0 0, 300% 50%; } }
.hbn-t3 { background: linear-gradient(120deg, #FFF3C4, #FFF9E6 55%, #FFE9A8); box-shadow: inset 0 0 0 1px rgba(217,119,6,.25); }
html[data-theme="neon"] .hbn-t3 { background: linear-gradient(120deg, rgba(251,191,36,.18), rgba(251,191,36,.06) 55%, rgba(251,191,36,.16)); }
.hbn-t3::before { content: "✦ ✧ ✦"; position: absolute; right: 18px; top: 10px; font-size: 12px; letter-spacing: 6px; color: #D97706; opacity: .7; }
.honor-panel-tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 800; padding: 4px 10px 4px 6px; border-radius: 999px; }
.honor-t1 .honor-panel-tag { background: var(--hn1-tint); color: var(--hn1-ink); }
.honor-t2 .honor-panel-tag { background: var(--hn2-tint); color: var(--hn2-ink); }
.honor-t3 .honor-panel-tag { background: var(--hn3-tint); color: var(--hn3-ink); }
.honor-board.gv .hb-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

/* đặt lịch gặp GV (2026-10-02) — bk- */
.bk-form h3 { display: flex; align-items: center; gap: 8px; }
.bk-days { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.bk-day { flex: 0 0 auto; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 84px; padding: 10px 12px; margin: 0; border-radius: 16px; border: 1.5px solid var(--line); background: var(--card-bg);
  cursor: pointer; text-align: center; }
.bk-day input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.bk-day .bk-wd { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.bk-day .bk-dm { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 800; color: var(--ink); line-height: 1.1; }
.bk-day .bk-n { font-size: var(--fs-xs); color: var(--primary); font-weight: 600; }
.bk-day:has(input:checked) { border-color: var(--primary); background: var(--primary-tint); }
.bk-day:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 8px; }
.bk-slots[hidden] { display: none; }
.bk-slot { justify-content: center; font-weight: 700; margin: 0; }
.bk-loc.bk-off { opacity: .45; }
.bk-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bk-sugg .chip { cursor: pointer; border: 1px solid var(--line); }
details.bk-cancel > summary { list-style: none; cursor: pointer; }
details.bk-cancel > summary::-webkit-details-marker { display: none; }
details.bk-cancel[open] form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
details.bk-cancel form input { flex: 1 1 180px; margin: 0; }
.bk-tabs { margin-bottom: 14px; }
.bk-act-card { max-width: 640px; margin: 0 auto; }
html[data-theme="neon"] .bk-day:has(input:checked) { border-color: #A78BFA; background: rgba(167,139,250,.14); }
html[data-theme="neon"] .bk-day .bk-n { color: #C4B5FD; }
.pill-tabs.bk-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; min-height: 40px; border-radius: 999px;
  border: 1.5px solid var(--line); color: var(--ink); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.pill-tabs.bk-tabs a:hover { background: var(--primary-tint); color: var(--primary-dark); }
.pill-tabs.bk-tabs a.active { background: var(--solid); color: var(--on-solid); border-color: var(--solid); }
.bk-steps { margin: 8px 0 4px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); }
details.bk-cancel > summary.btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: var(--fs-sm); min-height: 40px; }
.bk-slots { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.bk-slot { white-space: nowrap; }
details.bk-resched[open] form { display: block; min-width: min(360px, 80vw); }
details.bk-resched form label { margin-top: 8px; }
details.bk-resched form input, details.bk-resched form select { width: 100%; margin: 4px 0 0; }
.bk-mates-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.bk-mates-bar input[type="search"] { flex: 1 1 200px; margin: 0; }
.bk-mates { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; max-height: 300px; overflow-y: auto;
  margin-top: 8px; padding: 2px; }
.bk-mates .choice { margin: 0; padding: 8px 12px; }
.bk-mates .choice small { display: block; color: var(--muted); font-weight: 500; }
.bk-who { font-size: var(--fs-xs); color: var(--muted); }

/* ===== 2026-10-02 — Danh hiệu & quyền lợi chuyên cần (student_honor_benefits.html) ===== */
.hb-ladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 6px 0 28px; }
@media (max-width: 640px) { .hb-ladder { grid-template-columns: 1fr; } }
.hb-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  padding: 20px 14px 18px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.hb-step-badge { margin-bottom: 6px; }
.hb-step-min { font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.hb-step-title { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.2; }
.hb-step-reward { margin-top: 8px; font-family: var(--font-display); font-size: 2rem; font-weight: 800; line-height: 1; }
.hb-step-reward small { display: block; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; opacity: .8; margin-top: 4px; }
.hb-step-total { margin-top: 6px; font-size: var(--fs-xs); font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--paper-panel); color: var(--ink); }
@media (max-width: 640px) {
  .hb-step { flex-direction: row; flex-wrap: wrap; text-align: left; align-items: center; gap: 2px 12px; padding: 14px 16px; }
  .hb-step-badge { margin: 0; grid-row: span 3; }
  .hb-step-reward { margin-top: 0; margin-left: auto; font-size: 1.5rem; text-align: right; }
}
.hb-class-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.hb-earned { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 1.1rem; padding: 4px 12px 4px 6px;
  border-radius: 999px; background: var(--accent); color: var(--on-accent); white-space: nowrap; }
.hb-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.hb-metrics > div { background: var(--surface-2); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.hb-metrics b { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; }
.hb-metrics span { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.hb-metrics > div.is-on { background: var(--accent); }
.hb-metrics > div.is-on span { color: var(--on-accent); }
.hb-next { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; font-size: var(--fs-sm); }
.hb-next-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hb-next .progress { height: 9px; }
.hb-rules { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: var(--fs-sm); line-height: 1.55; }
.hbn-link, .honor-hint-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 800; text-decoration: none; color: inherit; }
.hbn-link:hover, .honor-hint-link:hover { text-decoration: underline; }

/* ===== 2026-10-03 — Phiếu chuyên cần trong "Thư cảm ơn và vinh danh" ===== */
.hc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 8px; }
.hc-tile { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; padding: 16px 18px; border-radius: var(--radius);
  text-decoration: none; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); transition: transform .15s ease, box-shadow .15s ease; }
.hc-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.hc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--fs-sm); }
.hc-body strong { font-family: var(--font-display); font-size: 1.1rem; }
.hc-meta { font-size: var(--fs-xs); font-weight: 700; opacity: .85; }
.hc-go { grid-column: 1 / -1; justify-self: end; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 800; }
.hbn-links { display: flex; flex-wrap: wrap; gap: 6px 14px; }

/* ===== 2026-10-03 — Trang "Cột điểm" làm lại (.gc-*) ===== */
.gc-sum { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.gc-sum-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.gc-eyebrow { margin: 0; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.gc-total { margin: 2px 0 0; font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; line-height: 1; }
.gc-total.is-ok { color: var(--primary); } .gc-total.is-bad { color: var(--warn); }
.gc-state { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: var(--fs-sm); }
.gc-state.ok { background: var(--primary-tint); color: var(--primary-dark); }
.gc-state.bad { background: var(--warn-tint); color: var(--warn); }
.gc-bar { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: var(--surface-2); gap: 2px; }
.gc-bar > span { display: block; height: 100%; min-width: 3px; }
.gc-bar > span.gap { background: repeating-linear-gradient(135deg, var(--warn-tint) 0 6px, transparent 6px 12px); border: 1.5px dashed var(--warn); border-radius: 0 999px 999px 0; }
.gc-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-sm); }
.gc-legend a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.gc-legend a:hover b { text-decoration: underline; }
.gc-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.gc-gaps { display: flex; flex-direction: column; gap: 6px; }
.gc-gaps p { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); color: var(--warn); }
.gc-gaps p svg { flex: none; margin-top: 2px; }

.gc-list { display: flex; flex-direction: column; gap: 12px; }
.gc-card { background: var(--paper-panel); border: 1px solid var(--line); border-left: 5px solid var(--gc-c, var(--primary)); border-radius: 20px; padding: 14px 16px; scroll-margin-top: 90px; }
.gc-node { scroll-margin-top: 90px; border-radius: 14px; transition: background-color .6s; }
.gc-node.gc-flash, .gc-bonus.gc-flash { background: var(--sun-tint); }
.gc-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 36px; }
.gc-name { font-weight: 800; font-size: 1.02rem; overflow-wrap: anywhere; }
.gc-node:not(.is-child) > .gc-line > .gc-name { font-family: var(--font-display); font-size: 1.15rem; }
.gc-w { font-family: var(--font-mono); font-weight: 700; color: var(--primary); background: var(--primary-tint); padding: 2px 8px; border-radius: 8px; font-size: var(--fs-sm); }
.gc-meta { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.gc-chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; background: var(--surface-2); color: var(--ink); line-height: 1.3; }
.gc-chip.muted { color: var(--muted); }
.gc-chip.att { background: var(--solid); color: var(--on-solid); }
.gc-chip.warn { background: var(--warn-tint); color: var(--warn); }
.gc-chip.bad { background: var(--danger-tint); color: var(--danger-ink); }
.gc-chip.sun { background: var(--sun); color: var(--on-sun); }
.gc-chip.sun-soft { background: var(--sun-tint); color: var(--sun-ink); }
.gc-chip.violet { background: #EDE7FE; color: #5B21B6; }
html[data-theme="neon"] .gc-chip.violet { background: #3B2A63; color: #DDD6FE; }
.gc-tools { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.gc-tools form { margin: 0; }
.gc-move { display: inline-flex; gap: 2px; }
.gc-ibtn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 34px; height: 34px; padding: 0 9px; margin: 0;
  border-radius: 10px; border: 1px solid var(--line); background: var(--paper-panel); color: var(--ink); font-weight: 700; font-size: var(--fs-sm);
  cursor: pointer; list-style: none; line-height: 1; box-shadow: none; }
.gc-ibtn::-webkit-details-marker { display: none; }
.gc-ibtn:hover:not([disabled]) { background: var(--primary-tint); color: var(--primary-dark); border-color: var(--primary); }
.gc-ibtn[disabled] { opacity: .35; cursor: default; }
.gc-ibtn.danger { color: var(--danger); } .gc-ibtn.danger:hover { background: var(--danger-tint); border-color: var(--danger); color: var(--danger-ink); }
.gc-ibtn.solid { background: var(--solid); color: var(--on-solid); border-color: var(--solid); }
.gc-ibtn.solid:hover { background: var(--solid-hover); color: var(--on-solid); }
.gc-lock { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; padding: 0 4px; }
.gc-kids { margin: 8px 0 0 6px; padding-left: 14px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.gc-node.is-child { padding: 4px 0; }
.gc-bonus { padding: 2px 0; border-radius: 10px; scroll-margin-top: 90px; }
.gc-bonus .gc-name { font-weight: 700; font-size: .95rem; }
.gc-plus { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--accent); color: var(--on-accent); font-weight: 800; margin-right: 6px; font-size: 14px; }

/* khung Sửa / Thêm */
.gc-pop { position: relative; }
.gc-pop[open] > summary { background: var(--primary-tint); border-color: var(--primary); color: var(--primary-dark); }
.gc-pop > .gc-form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(460px, calc(100vw - 40px)); text-align: left;
  background: var(--paper-panel); border: 1px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: 0 18px 40px -18px rgba(13,42,30,.45); }
.gc-add { margin-top: 8px; }
.gc-add > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; color: var(--primary); font-weight: 700;
  font-size: var(--fs-sm); padding: 6px 12px; border-radius: 999px; border: 1.5px dashed var(--primary); background: transparent; }
.gc-add > summary::-webkit-details-marker { display: none; }
.gc-add > summary:hover, .gc-add[open] > summary { background: var(--primary-tint); }
.gc-add > .gc-form { margin-top: 10px; background: var(--card-bg); border: 1px solid var(--line); border-radius: 18px; padding: 14px; max-width: 640px; }
.gc-add-main { margin-top: 14px; }
.gc-add-main > summary { font-size: var(--fs-md, 1rem); padding: 10px 16px; }
.gc-form { display: flex; flex-direction: column; gap: 10px; }
.gc-form [hidden], .gc-addform [hidden], .gc-start-card [hidden] { display: none !important; }
.gc-row { display: flex; flex-wrap: wrap; gap: 10px; }
.gc-field { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: var(--fs-sm); font-weight: 600; min-width: 0; }
.gc-field > span { color: var(--muted); font-size: var(--fs-xs); font-weight: 700; }
.gc-field input, .gc-field select { margin: 0; width: 100%; }
.gc-field.grow { flex: 1 1 220px; } .gc-field.w-pct { flex: 0 0 130px; }
.gc-hint { margin: 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; }
.gc-hint.warn { color: var(--warn); font-weight: 600; font-size: var(--fs-sm); }
.gc-indent { margin-top: 6px; }
.gc-sub { margin: 4px 0 0; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.gc-check { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); margin: 0; cursor: pointer; }
.gc-check input { margin: 3px 0 0; flex: none; width: auto; }
.gc-att { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px; border-radius: 14px; background: var(--primary-tint); }
.gc-att .gc-field { flex: 1 1 130px; }
.gc-actions { display: flex; gap: 8px; justify-content: flex-end; }
.gc-actions .btn { margin: 0; }
.gc-types { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.gc-types legend { padding: 0; margin-bottom: 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.gc-type { position: relative; margin: 0; cursor: pointer; }
.gc-type input { position: absolute; opacity: 0; pointer-events: none; }
.gc-type > span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 9px 11px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--paper-panel); }
.gc-type b { font-size: var(--fs-sm); }
.gc-type small { font-size: .72rem; color: var(--muted); line-height: 1.35; }
.gc-type input:checked + span { border-color: var(--primary); background: var(--primary-tint); box-shadow: inset 0 0 0 1px var(--primary); }
.gc-type input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.gc-type.is-off { cursor: not-allowed; opacity: .5; }

/* bắt đầu nhanh */
.gc-start { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; align-items: start; }
.gc-start-card { background: var(--paper-panel); border: 1px solid var(--line); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 12px; margin: 0; }
.gc-start-card h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.gc-presets { display: flex; flex-direction: column; gap: 8px; }
.gc-preset { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--line); cursor: pointer; margin: 0; }
.gc-preset input { position: absolute; opacity: 0; pointer-events: none; }
.gc-preset:has(input:checked) { border-color: var(--primary); background: var(--primary-tint); }
.gc-preset-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; gap: 2px; }
.gc-preset-bar i { display: block; height: 100%; }
.gc-preset-txt { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: var(--fs-sm); }
.gc-preset-txt em { color: var(--muted); font-style: normal; font-size: var(--fs-xs); }

@media (max-width: 640px) {
  .gc-hide-sm { display: none; }
  .gc-tools { width: 100%; justify-content: flex-start; margin-left: 0; }
  .gc-card { padding: 12px; }
  .gc-kids { margin-left: 2px; padding-left: 10px; }
  .gc-pop[open] { flex: 1 0 100%; order: 10; }
  .gc-pop > .gc-form { position: static; width: 100%; margin-top: 8px; box-shadow: none; background: var(--card-bg); }
  .gc-field.w-pct { flex: 1 1 110px; }
}

/* ===== 2026-10-03 — Trang "Nhập điểm" dạng lưới (.gd-*) ===== */
.gd-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.gd-drawer { flex: 1 1 320px; background: var(--paper-panel); border: 1px solid var(--line); border-radius: 18px; }
.gd-drawer > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-weight: 700; }
.gd-drawer > summary::-webkit-details-marker { display: none; }
.gd-drawer > summary::after { content: "▸"; margin-left: auto; color: var(--muted); transition: transform .2s; }
.gd-drawer[open] > summary::after { transform: rotate(90deg); }
.gd-drawer-body { padding: 0 16px 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.gd-drawer-body.gd-mini { display: block; }
.gd-xl h3 { margin: 0 0 4px; font-size: 1rem; }
.gd-xl .gc-field { margin-top: 8px; }
.gd-xl-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.gd-xl-row .btn { margin: 0; }
.gd-count { background: var(--primary-tint); color: var(--primary-dark); border-radius: 999px; padding: 1px 8px; font-size: var(--fs-xs); }
.gd-mini-cell { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.gd-mini-cell input.gd-cmt-in { display: block; flex: 1 1 180px; width: auto; }

.gd-filter { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.gd-filter-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.gd-search { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; background: var(--input-bg); margin: 0; }
.gd-search input[type=search] { border: 0; background: transparent; margin: 0; padding: 10px 0; box-shadow: none; outline: none; width: 100%; }
.gd-filter select { width: auto; margin: 0; min-width: 160px; }
.gd-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; font-size: var(--fs-sm); cursor: pointer; }
.gd-toggle input { width: auto; margin: 0; }
.gd-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gd-chips-lbl { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); margin-right: 2px; }
.gd-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--paper-panel); color: var(--muted); font-weight: 700; font-size: var(--fs-sm); cursor: pointer; box-shadow: none; opacity: .75; }
.gd-chip i { width: 9px; height: 9px; border-radius: 3px; background: var(--c, var(--primary)); display: inline-block; }
.gd-chip small { font-weight: 600; opacity: .8; }
.gd-chip.is-on { opacity: 1; color: var(--ink); border-color: var(--c, var(--primary)); background: var(--primary-tint); }
.gd-chip:hover { border-color: var(--primary); }
.gd-keys { margin: 0; }
.gd-keys kbd, .gd-kbd { font-family: var(--font-mono); font-size: .7rem; padding: 1px 5px; border-radius: 5px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); }
.btn .gd-kbd { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); color: inherit; margin-left: 4px; }

.gd-wrap { margin-top: 12px; padding-bottom: 76px; overflow: auto; max-height: calc(100vh - 150px); min-height: 260px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper-panel); overscroll-behavior: contain; }
.gd-table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: var(--fs-sm); margin: 0; }
.gd-table th, .gd-table td { text-transform: none; letter-spacing: 0; border: 0; border-bottom: 1px solid var(--line); padding: 4px 6px; vertical-align: middle; background: var(--paper-panel); text-align: left; white-space: nowrap; }
.gd-table thead th { position: sticky; z-index: 3; background: var(--surface-2); font-weight: 700; }
.gd-h1 th { top: 0; height: 36px; text-transform: none; letter-spacing: 0; }
.gd-h2 th { top: 36px; }
.gd-stick { position: sticky; left: 0; z-index: 2; }
.gd-table tbody th { top: auto; color: var(--ink); font-size: var(--fs-sm); }
.gd-table thead th.gd-stick { z-index: 5; }
.gd-name-h { min-width: 190px; vertical-align: bottom !important; }
.gd-n { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); background: var(--paper-panel); padding: 1px 6px; border-radius: 6px; }
.gd-main { border-top: 4px solid var(--c, var(--line)) !important; font-size: var(--fs-sm); }
.gd-main b { font-family: var(--font-mono); color: var(--muted); font-weight: 700; }
.gd-main small, .gd-col small { font-weight: 600; color: var(--muted); }
.gd-pct-h, .gd-final-h { vertical-align: bottom !important; text-align: center !important; }
.gd-col { min-width: 74px; max-width: 140px; white-space: normal !important; vertical-align: bottom !important; box-shadow: inset 0 3px 0 0 color-mix(in srgb, var(--c) 35%, transparent); }
.gd-col-name { display: block; font-size: var(--fs-xs); line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gd-col-meta { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; font-family: var(--font-mono); font-size: .68rem; color: var(--muted); font-weight: 600; }
.gd-col-meta em { font-style: normal; font-family: var(--font-body); padding: 0 5px; border-radius: 6px; background: var(--paper-panel); }
.gd-col-meta em.bonus { background: var(--accent); color: var(--on-accent); font-weight: 800; }
.gd-col-meta em.grp { background: var(--sun-tint); color: var(--sun-ink); }
.gd-col-meta em.att { background: var(--primary-tint); color: var(--primary-dark); }
.gd-col-meta em.mini { background: #EDE7FE; color: #5B21B6; }
.gd-prog { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: .66rem; color: var(--muted); font-weight: 600; }
.gd-prog.is-done { color: var(--primary); }
.gd-prog.is-done::before { content: "✓ "; }
.gd-table td.is-first, .gd-table th.is-first { border-left: 2px solid var(--line); }

.gd-name { min-width: 190px; max-width: 240px; white-space: normal !important; font-weight: 600; box-shadow: 1px 0 0 var(--line); }
.gd-name a { color: var(--ink); text-decoration: none; display: block; line-height: 1.25; }
.gd-name a:hover { color: var(--primary); text-decoration: underline; }
.gd-code { display: flex; gap: 6px; align-items: center; font-family: var(--font-mono); font-size: .7rem; color: var(--muted); font-weight: 500; margin-top: 1px; }
.gd-ok { color: var(--primary); font-weight: 800; }
.gd-ban { font-family: var(--font-body); font-size: .68rem; font-weight: 800; color: var(--danger-ink); background: var(--danger-tint); padding: 0 6px; border-radius: 6px; }
.gd-row.is-banned > * { background: var(--danger-tint); }
.gd-row:hover > td, .gd-row:hover > th { background: color-mix(in srgb, var(--primary-tint) 55%, var(--paper-panel)); }
.gd-row.gd-flash > * { background: var(--sun-tint) !important; }
.gd-grow > th, .gd-grow > td { background: var(--primary-tint); border-bottom-color: color-mix(in srgb, var(--primary) 25%, var(--line)); }
.gd-gname { font-weight: 800; }
.gd-gname small { margin-left: 6px; font-weight: 600; color: var(--muted); font-size: var(--fs-xs); }

.gd-cell { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; position: relative; }
input.gd-in { width: 56px; min-width: 0; height: 32px; min-height: 0; line-height: 1.2; margin: 0; padding: 4px 6px; text-align: center; font-family: var(--font-mono); font-size: .9rem; font-weight: 600;
  border: 1px solid transparent; border-radius: 8px; background: var(--surface-2); box-shadow: none; }
input.gd-in:hover { border-color: var(--line); }
input.gd-in:focus { outline: none; border-color: var(--primary); background: var(--paper-panel); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
input.gd-in.is-dirty { background: var(--sun-tint); border-color: var(--sun); }
input.gd-in.is-bad { background: var(--danger-tint); border-color: var(--danger); color: var(--danger-ink); }
.gd-cell.is-group input.gd-in { background: var(--paper-panel); border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); }
.gd-cell.is-group input.gd-in.is-dirty { background: var(--sun-tint); border-color: var(--sun); }
.gd-cbtn { width: 22px; height: 22px; min-width: 0; padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; font-size: 12px; line-height: 1;
  cursor: pointer; opacity: .18; border-radius: 6px; filter: grayscale(1); }
.gd-cell:hover .gd-cbtn, .gd-cbtn:focus { opacity: .6; }
.gd-cbtn.has { opacity: 1; filter: none; }
input.gd-cmt-in { display: none; width: 150px; margin: 2px 0 0; height: 28px; min-height: 0; padding: 2px 8px; font-size: var(--fs-xs); flex-basis: 100%; }
.gd-table.show-cmt input.gd-cmt-in, .grade-cell-form.show-cmt input.gd-cmt-in { display: block; }
input.gd-cmt-in.is-dirty { background: var(--sun-tint); border-color: var(--sun); }
.gd-bl { display: inline-flex; align-items: center; gap: 2px; margin: 0; }
.gd-bl > span { font-size: .62rem; font-weight: 800; color: var(--muted); width: 16px; text-align: right; }
.gd-cell.is-bonus input.gd-in { width: 50px; }
.gd-ro { display: inline-block; min-width: 40px; text-align: center; font-family: var(--font-mono); font-weight: 600; padding: 4px 6px; color: var(--ink); }
.gd-ro.muted { color: var(--muted); }
.gd-mini-act { display: inline; margin: 0; }
.gd-act { display: inline-grid; place-items: center; width: 22px; height: 22px; min-width: 0; padding: 0; margin: 0; border-radius: 6px; border: 1px solid var(--line);
  background: var(--paper-panel); color: var(--muted); font-size: 11px; line-height: 1; cursor: pointer; text-decoration: none; box-shadow: none; opacity: .55; }
.gd-act:hover { opacity: 1; color: var(--primary-dark); border-color: var(--primary); text-decoration: none; }
.gd-flag { font-size: 11px; cursor: help; }
.gd-flag.warn { filter: drop-shadow(0 0 2px var(--warn)); }
.gd-link { font-size: var(--fs-xs); font-weight: 700; }
.gd-pct { text-align: center; }
.gd-pct .gd-cell { justify-content: center; }
.gd-final { text-align: center !important; font-family: var(--font-mono); font-size: .95rem; min-width: 112px; }
.gd-final b { color: var(--primary-dark); }

.gd-savebar { position: sticky; bottom: 14px; z-index: 40; margin: 12px auto 0; max-width: 760px; display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
  padding: 10px 12px 10px 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--paper-panel); box-shadow: 0 14px 34px -16px rgba(13,42,30,.45); }
.gd-save-state { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--fs-sm); color: var(--muted); }
.gd-save-btns { display: inline-flex; gap: 8px; }
.gd-save-btns .btn { margin: 0; }
html[data-theme="neon"] .gd-col-meta em.mini { background: #3B2A63; color: #DDD6FE; }

@media (max-width: 760px) {
  .gd-wrap { max-height: calc(100vh - 230px); border-radius: 14px; }
  .gd-name, .gd-name-h { min-width: 128px; max-width: 150px; }
  .gd-name a { font-size: .8rem; }
  .gd-savebar { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); padding: 5px 5px 5px 12px; gap: 8px; max-width: 100%; }
  .gd-save-state { font-size: var(--fs-xs); line-height: 1.25; }
  .gd-save-btns .btn { padding: 8px 12px; min-height: 0; font-size: var(--fs-sm); }
  .gd-kbd { display: none; }
  .gd-keys { display: none; }
  .gd-filter select { flex: 1 1 140px; }
}
/* Thanh trạng thái TỰ LƯU: viên nhỏ góc phải dưới; nút Lưu sáng khi còn ô chờ, nhạt khi đã lưu xong */
.gd-savebar { width: fit-content; max-width: min(640px, calc(100% - 8px)); margin: 12px 0 0 auto; padding: 6px 6px 6px 14px; flex-wrap: nowrap; gap: 12px;
  border-radius: 999px; transition: background-color .25s, border-color .25s; }
.gd-savebar .btn { margin: 0; white-space: nowrap; border-radius: 999px; padding: 8px 14px; min-height: 0; transition: opacity .25s, background-color .25s, box-shadow .25s; }
.gd-savebar .btn.is-idle { opacity: .4; background: var(--surface-2); color: var(--muted); border-color: var(--line); box-shadow: none; }
.gd-savebar .btn.is-idle .gd-kbd { background: transparent; border-color: var(--line); }
.gd-savebar.is-hot .btn { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent); }
.gd-save-state { min-width: 0; }
.gd-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--primary); }
.gd-savebar.is-busy .gd-dot { background: var(--sun); animation: gd-pulse 1s ease-in-out infinite; }
.gd-savebar.is-warn .gd-dot { background: var(--warn); }
.gd-savebar.is-bad .gd-dot { background: var(--danger); }
.gd-savebar.is-busy { border-color: var(--sun); }
.gd-savebar.is-warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn-tint) 60%, var(--paper-panel)); }
.gd-savebar.is-bad { border-color: var(--danger); background: color-mix(in srgb, var(--danger-tint) 60%, var(--paper-panel)); }
.gd-savebar.is-bad .gd-save-state { color: var(--danger-ink); }
.gd-savebar.is-warn .gd-save-state { color: var(--warn); }
@keyframes gd-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .gd-savebar.is-busy .gd-dot { animation: none; } }
.grade-cell-form.is-err input.gd-in { background: var(--danger-tint); border-color: var(--danger); }
.grade-cell-form.gd-saved input.gd-in { background: var(--primary-tint); border-color: var(--primary); transition: background-color .6s; }

/* ===== 2026-10-03 — Σ điểm cột lớn, điểm tạm tính, Chốt điểm ===== */
.gd-sum-h { background: color-mix(in srgb, var(--c, var(--primary)) 10%, var(--surface-2)) !important; }
.gd-table td.gd-sum { text-align: center; font-family: var(--font-mono); background: color-mix(in srgb, var(--primary-tint) 45%, var(--paper-panel)); border-right: 2px solid var(--line); min-width: 104px; }
.gd-sum b, .gd-final b { color: var(--primary-dark); font-size: .95rem; }
/* 2026-10-03 (N1) — Σ cột trung gian (nhạt hơn Σ cột lớn), chi tiết Bài nhóm, điểm sau % của cột lá nhóm */
.gd-table td.gd-sum-in { border-right: 1px dashed var(--line); background: color-mix(in srgb, var(--primary-tint) 22%, var(--paper-panel)); }
.gd-sum-in b { font-weight: 600; }
.gd-grp { display: block; white-space: nowrap; }
.gd-adj { display: block; font-size: .72rem; color: var(--muted); font-family: var(--font-mono); text-align: center; }
.gd-adj:empty { display: none; }
.gd-part { color: var(--muted); font-style: italic; font-weight: 600; cursor: help; }
.gd-part-n { display: block; font-size: .62rem; color: var(--muted); font-family: var(--font-mono); line-height: 1; margin-top: 1px; }
.gd-upd { animation: gd-upd 1s ease-out; }
@keyframes gd-upd { from { background: var(--sun-tint); } }
.gd-fin { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 2px 0 0; padding: 12px 14px;
  border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--primary) 45%, var(--line)); background: color-mix(in srgb, var(--primary-tint) 50%, var(--paper-panel)); }
.gd-fin-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 320px; font-size: var(--fs-sm); }
.gd-fin-txt strong { display: inline-flex; align-items: center; gap: 6px; }
.gd-fin-txt small { color: var(--muted); font-size: var(--fs-xs); }
.gd-fin .btn { margin: 0; white-space: nowrap; }
.gd-fin .btn.is-idle { opacity: .45; background: var(--surface-2); color: var(--muted); border-color: var(--line); }

/* ===== 2026-10-03 — Lớp trưởng chọn loại khi xin đổi Vắng ===== */
.mreq { position: relative; display: inline-block; }
.mreq > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px;
  border: 1.5px solid var(--primary); color: var(--primary-dark); background: var(--paper-panel); font-weight: 700; font-size: var(--fs-sm); line-height: 1.2; }
.mreq > summary::-webkit-details-marker { display: none; }
.mreq[open] > summary { background: var(--primary-tint); border-color: var(--primary); }
.mreq-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 12px; min-width: min(340px, 82vw); max-width: 420px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--card-bg); }
.mreq-opt { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 8px 10px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--paper-panel); cursor: pointer; }
.mreq-opt input { width: auto; margin: 3px 0 0; flex: none; }
.mreq-opt span { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); white-space: normal; }
.mreq-opt small { color: var(--muted); font-size: var(--fs-xs); line-height: 1.35; }
.mreq-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-tint); }
.mreq-form input[type=text] { margin: 0; }
.mreq-form .btn { margin: 0; align-self: flex-start; }

/* 2026-10-03 — Thực tập: trạng thái tuần dùng chung GV/SV (it-*) */
.it-bar { display: inline-flex; flex-wrap: wrap; gap: 2px; vertical-align: middle; }
.it-wk { display: inline-block; width: 12px; height: 16px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); box-sizing: border-box; }
.it-wk.it-reviewed { background: var(--accent); border-color: var(--accent); }
.it-wk.it-submitted { background: var(--info-solid); border-color: var(--info-solid); }
.it-wk.it-revision { background: var(--warn-solid); border-color: var(--warn-solid); }
.it-wk.it-overdue { background: var(--danger-solid); border-color: var(--danger-solid); }
.it-wk.it-open { background: var(--sun); border-color: var(--sun); }
.it-wk.it-future { background: transparent; border-style: dashed; }
.badge.it-b-reviewed { background: var(--accent); color: var(--on-accent); }
.badge.it-b-submitted { background: var(--info-solid); color: #fff; }
.badge.it-b-revision { background: var(--warn-solid); color: #fff; }
.badge.it-b-overdue { background: var(--danger-solid); color: #fff; }
.badge.it-b-open { background: var(--sun-tint); color: var(--sun-ink); border: 1px solid var(--sun); }
.badge.it-b-future { background: var(--surface-2); color: var(--muted); }
.it-legend { display: inline-flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.it-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.it-legend .it-wk { width: 10px; height: 12px; }
/* GV — tổng quan */
.it-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
@media (max-width: 760px) { .it-top { grid-template-columns: 1fr; } }
.it-remind button[disabled] { opacity: .45; cursor: not-allowed; }
.it-tools > summary svg { width: 16px; height: 16px; vertical-align: -3px; }
.it-bar-tools { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin: 4px 0 12px; }
button.it-fchip, button.it-vbtn { margin: 0; padding: 6px 12px; min-height: 34px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--paper-panel); color: var(--ink); font-weight: 700; font-size: var(--fs-sm); cursor: pointer; box-shadow: none; }
button.it-fchip b { font-family: var(--font-mono); font-size: var(--fs-xs); margin-left: 4px; color: var(--muted); }
button.it-fchip:hover:not([disabled]), button.it-vbtn:hover { border-color: var(--primary); background: var(--primary-tint); color: var(--primary-dark); }
button.it-fchip.is-on, button.it-vbtn.is-on { background: var(--solid); color: var(--on-solid); border-color: var(--solid); }
button.it-fchip.is-on b { color: inherit; }
button.it-fchip[disabled] { opacity: .45; cursor: default; }
.it-view { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--card-bg); }
.it-view button.it-vbtn { border: 0; min-height: 30px; }
.it-ov[data-view="progress"] .c-c, .it-ov[data-view="contact"] .c-p { display: none !important; }
.it-ov th.num, .it-ov td.num { text-align: center; }
.it-ov tr[hidden], section.it-sv[hidden], .it-ov tr.it-none[hidden] { display: none !important; }
.it-prog { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.it-prog > b { font-family: var(--font-mono); font-size: var(--fs-sm); }
section.it-sv { padding-top: 14px; padding-bottom: 14px; }
section.it-sv + section.it-sv { margin-top: 10px; }
details.it-sv-d > summary.it-sv-sum { list-style: none; cursor: pointer; align-items: center; }
details.it-sv-d > summary.it-sv-sum::-webkit-details-marker { display: none; }
.it-chev { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line); position: relative; }
.it-chev::after { content: ""; position: absolute; left: 50%; top: 45%; width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: translate(-50%, -50%) rotate(45deg); transition: transform .15s; }
details.it-sv-d[open] > summary .it-chev::after { transform: translate(-50%, -20%) rotate(-135deg); }
details.it-sv-d > summary.it-sv-sum:hover .it-chev { border-color: var(--primary); background: var(--primary-tint); }
details.it-sv-d[open] > summary.it-sv-sum { padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
/* SV — dải tiến độ + báo cáo tuần */
.si-strip-top { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; justify-content: space-between; }
.si-strip-k { font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.si-strip-n { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--muted); font-weight: 700; }
.si-strip-n b { font-size: 2em; color: var(--ink); line-height: 1; }
.si-strip-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.si-strip .it-bar .it-wk { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: #fff; text-decoration: none; }
.si-strip .it-bar { gap: 5px; }
.si-strip .it-bar .it-wk.it-open { color: var(--on-sun, #1a1a1a); }
.si-strip .it-bar .it-wk.it-future { color: var(--muted); }
.si-strip .it-bar .it-wk.it-reviewed { color: var(--on-accent); }
.si-strip a.it-wk:hover { outline: 2px solid var(--ink); outline-offset: 1px; text-decoration: none; }
.si-next { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 16px;
  background: var(--sun-tint); border: 1px solid var(--sun); color: var(--sun-ink); }
.si-done { color: var(--primary-dark); font-weight: 700; display: flex; gap: 6px; align-items: center; }
.si-week { border-left-width: 5px !important; }
.si-week.si-reviewed { border-color: var(--accent); }
.si-week.si-submitted { border-color: var(--info-solid); }
.si-week.si-revision { border-color: var(--warn-solid); }
.si-week.si-overdue { border-color: var(--danger-solid); }
.si-week.si-open { border-color: var(--sun); }
.si-week.si-missing { outline: 3px solid var(--danger); outline-offset: 2px; }
.si-flash { animation: si-flash 1.6s ease-out; }
@keyframes si-flash { 0% { box-shadow: 0 0 0 4px var(--primary); } 100% { box-shadow: 0 0 0 0 transparent; } }
details.si-edit > summary, details.si-bulk > summary, details.si-future > summary { cursor: pointer; color: var(--primary); font-weight: 700; }
details.si-bulk > summary svg { width: 16px; height: 16px; vertical-align: -3px; }
.si-future-list { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
.si-future-list li { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 8px 12px; border-radius: 12px; border: 1px dashed var(--line); }
button.si-draft-btn.is-idle { opacity: .5; }
.si-auto { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.si-auto.is-ok { color: var(--primary-dark); }
.si-auto.is-busy { color: var(--muted); }
.si-auto.is-warn { color: var(--sun-ink); }
.si-auto.is-bad { color: var(--danger-ink); }

/* 2026-10-03 — Nút file rõ mục đích (fx): loại file + hướng tải + công dụng */
.fx { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; border: 1.5px solid var(--line);
  background: var(--paper-panel); color: var(--ink); text-decoration: none; min-height: 56px; position: relative; cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s; box-sizing: border-box; }
.fx:hover { border-color: var(--primary); background: var(--primary-tint); text-decoration: none; color: var(--ink); }
.fx .fx-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.fx .fx-main b { font-size: var(--fs-sm); line-height: 1.3; }
.fx .fx-main small { font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; font-weight: 500; }
.fx .fx-dir { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px; background: var(--surface-2); color: var(--ink); }
.fx.fx-down .fx-dir { background: var(--primary-tint); color: var(--primary-dark); }
.fx.fx-up .fx-dir { background: var(--sun-tint); color: var(--sun-ink); }
.fx-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 26px; padding: 0 6px;
  border-radius: 7px; font-family: var(--font-mono); font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #fff; background: #5B6470; }
.fx-badge.fx-k-docx, .fx-badge.fx-k-doc { background: #2B579A; }
.fx-badge.fx-k-xlsx { background: #217346; }
.fx-badge.fx-k-pdf { background: #B42318; }
.fx-badge.fx-k-img { background: #7A4FB5; }
.fx-drop { border-style: dashed; border-width: 2px; background: var(--card-bg); }
.fx-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; margin: 0; }
.fx-drop.is-over { border-color: var(--primary); background: var(--primary-tint); }
.fx-drop.has-file { border-style: solid; border-color: var(--primary); }
.fx-drop .fx-picked { font-style: normal; font-size: var(--fs-xs); font-weight: 700; color: var(--primary-dark); overflow-wrap: anywhere; }
.fx-drop.is-bad { border-color: var(--danger); background: var(--danger-tint); }
.fx-drop.is-bad .fx-picked { color: var(--danger-ink); }
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
/* Quy trình mẫu: 1 tải xuống → 2 điền → 3 tải lên */
.fx-steps { list-style: none; counter-reset: fxs; margin: 0; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); align-items: stretch; }
.fx-steps > li { counter-increment: fxs; position: relative; padding-top: 26px; display: flex; flex-direction: column; }
.fx-steps > li::before { content: counter(fxs); position: absolute; top: 0; left: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--solid); color: var(--on-solid); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.fx-steps > li > .fx-step-k { position: absolute; top: 2px; left: 30px; font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); }
.fx-steps > li > .fx, .fx-steps > li > form, .fx-steps > li > .fx-mid { flex: 1; }
.fx-steps .fx-mid { border: 1.5px dashed var(--line); border-radius: 16px; padding: 10px 14px; font-size: var(--fs-xs); color: var(--muted);
  display: flex; align-items: center; line-height: 1.5; }
.fx-steps form { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.fx-lane { border: 1px solid var(--line); border-radius: 20px; padding: 14px 16px; background: var(--card-bg); }
.fx-lane > summary { cursor: pointer; font-weight: 800; color: var(--primary-dark); list-style: none; display: flex; gap: 10px; align-items: center; }
.fx-lane > summary::-webkit-details-marker { display: none; }
.fx-lane > summary::after { content: "▸"; margin-left: auto; color: var(--muted); }
.fx-lane[open] > summary::after { content: "▾"; }
.fx-lane[open] > summary { margin-bottom: 12px; }
.fx-lane .fx-lane-sub { font-weight: 500; color: var(--muted); font-size: var(--fs-xs); }
.fx-note { font-size: var(--fs-xs); color: var(--muted); margin: 8px 0 0; }

/* Xem trước nhập Excel (ip-*) */
.ip-file { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--paper-panel); flex-wrap: wrap; }
.ip-file-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ip-file-main b { overflow-wrap: anywhere; }
.ip-file-main span { font-size: var(--fs-xs); color: var(--muted); }
.ip-safe { display: inline-flex; gap: 6px; align-items: center; font-size: var(--fs-xs); font-weight: 800; color: var(--primary-dark); background: var(--primary-tint); padding: 6px 10px; border-radius: 999px; }
.ip-sum { display: flex; flex-wrap: wrap; gap: 8px; }
.ip-s { padding: 6px 12px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 700; border: 1px solid var(--line); background: var(--paper-panel); }
.ip-s b { font-family: var(--font-mono); }
.ip-s.ip-new { border-color: var(--accent); } .ip-s.ip-change { border-color: var(--info-solid); }
.ip-bulk { display: flex; gap: 6px; margin: 14px 0 8px; }
.ip-item { border: 1.5px solid var(--line); border-radius: 18px; padding: 12px 14px; margin-top: 10px; background: var(--paper-panel); }
.ip-item.ip-new { border-left: 5px solid var(--accent); }
.ip-item.ip-change { border-left: 5px solid var(--info-solid); }
.ip-item.ip-same, .ip-item.ip-locked, .ip-item.ip-invalid { opacity: .72; }
.ip-item.ip-locked, .ip-item.ip-invalid { border-left: 5px solid var(--warn-solid); }
.ip-head { display: flex; align-items: center; gap: 12px; margin: 0; cursor: pointer; }
.ip-head input[type=checkbox] { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
.ip-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ip-title small { color: var(--muted); font-size: var(--fs-xs); }
.ip-badge { font-size: var(--fs-xs); font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); white-space: nowrap; }
.ip-new .ip-badge { background: var(--accent); color: var(--on-accent); }
.ip-change .ip-badge { background: var(--info-solid); color: #fff; }
.ip-locked .ip-badge, .ip-invalid .ip-badge { background: var(--warn-tint); color: var(--warn); }
.ip-note { margin: 8px 0 0 32px; font-size: var(--fs-xs); color: var(--warn); font-weight: 600; }
.ip-diffs { margin: 10px 0 0 32px; display: grid; gap: 8px; }
.ip-diff { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: start; font-size: var(--fs-sm); }
.ip-lbl { font-size: var(--fs-xs); font-weight: 800; color: var(--muted); padding-top: 4px; }
.ip-old, .ip-newv { white-space: pre-wrap; overflow-wrap: anywhere; padding: 4px 8px; border-radius: 8px; max-height: 9em; overflow: auto; }
.ip-old { background: var(--surface-2); color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.ip-old.ip-empty { text-decoration: none; font-style: italic; }
.ip-newv { background: var(--primary-tint); color: var(--ink); font-weight: 600; }
.ip-arrow { padding-top: 4px; color: var(--muted); font-weight: 800; }
@media (max-width: 640px) {
  .ip-diff { grid-template-columns: 1fr; gap: 4px; } .ip-arrow { display: none; } .ip-diffs, .ip-note { margin-left: 0; }
}
.ip-bar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 14px 0 6px; margin-top: 16px;
  background: linear-gradient(to top, var(--paper-panel) 70%, transparent); z-index: 5; }
@media (max-width: 760px) { .ip-bar { bottom: 84px; } }
/* SV — bố cục mới trang thực tập */
.si-nav { display: flex; flex-wrap: wrap; gap: 6px; position: sticky; top: 8px; z-index: 6; padding: 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--paper-panel) 88%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--line); width: max-content; max-width: 100%; }
.si-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: var(--fs-sm);
  color: var(--ink); text-decoration: none; }
.si-nav a:hover { background: var(--primary-tint); color: var(--primary-dark); text-decoration: none; }
.si-nav a b { font-family: var(--font-mono); font-size: var(--fs-xs); background: var(--surface-2); padding: 1px 7px; border-radius: 999px; }
.si-nav svg { width: 16px; height: 16px; }
@media (max-width: 640px) { .si-nav { border-radius: 18px; width: auto; } .si-nav a { padding: 6px 10px; } }
.si-sec { scroll-margin-top: 80px; }
.si-sec > .sec-title { margin-top: 36px; }
.si-lead { color: var(--muted); font-size: var(--fs-sm); margin: 0; max-width: 72ch; }
.si-wk-h { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.si-wk-num { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 20px; background: var(--surface-2); color: var(--ink); }
.si-reviewed .si-wk-num { background: var(--accent); color: var(--on-accent); }
.si-submitted .si-wk-num { background: var(--info-solid); color: #fff; }
.si-revision .si-wk-num { background: var(--warn-solid); color: #fff; }
.si-overdue .si-wk-num { background: var(--danger-solid); color: #fff; }
.si-open .si-wk-num { background: var(--sun); color: #1a1a1a; }
.si-wk-t { flex: 1; min-width: 160px; }
.si-wk-t h3 { margin: 0; font-size: var(--fs-md); }
.si-wk-b { display: flex; flex-wrap: wrap; gap: 4px; }
.si-comment { border-radius: 16px; padding: 12px 14px; background: var(--primary-tint); border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); }
.si-comment-k { display: inline-flex; gap: 6px; align-items: center; font-weight: 800; font-size: var(--fs-sm); color: var(--primary-dark); }
.si-comment-k svg { width: 16px; height: 16px; }
details.si-sent, details.si-edit, details.si-add { border-radius: 16px; }
details.si-sent { border: 1px solid var(--line); padding: 8px 14px; background: var(--card-bg); }
details.si-sent > summary, details.si-edit > summary, details.si-add > summary, details.si-pick > summary {
  cursor: pointer; font-weight: 800; color: var(--primary-dark); display: flex; align-items: center; gap: 8px; }
details.si-sent > summary svg, details.si-edit > summary svg, details.si-add > summary svg { width: 16px; height: 16px; }
.si-k { margin: 10px 0 0; font-size: var(--fs-xs); font-weight: 800; color: var(--muted); }
.si-v { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.si-lbl { font-weight: 700; font-size: var(--fs-sm); display: block; }
.si-attach { border-top: 1px dashed var(--line); padding-top: 12px; }
.si-attach-h { font-size: var(--fs-sm); }
.si-attach-h .muted { font-size: var(--fs-xs); }
.si-docx { border-radius: 14px; padding: 10px 12px; font-size: var(--fs-sm); display: flex; flex-direction: column; gap: 8px; }
.si-docx.is-busy { background: var(--surface-2); color: var(--muted); }
.si-docx.is-ok { background: var(--primary-tint); color: var(--primary-dark); }
.si-docx.is-warn { background: var(--sun-tint); color: var(--sun-ink); border: 1px solid var(--sun); }
.si-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; background: var(--paper-panel); border-radius: 12px; padding: 8px 10px; color: var(--ink); }
.si-cmp > b { grid-column: 1 / -1; font-size: var(--fs-xs); }
.si-cmp small { display: block; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.si-cmp span { display: block; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 8em; overflow: auto; font-size: var(--fs-xs); }
.si-cmp-a span { color: var(--muted); }
.si-cmp-b span { font-weight: 600; }
@media (max-width: 560px) { .si-cmp { grid-template-columns: 1fr; } }
.si-cmp-act { display: flex; flex-wrap: wrap; gap: 6px; }
button.si-mini, .si-docx button.si-mini { margin: 0; padding: 6px 12px; min-height: 34px; font-size: var(--fs-xs); align-self: flex-start; }
.si-out { display: flex; flex-direction: column; }
.si-wkpick { display: flex; flex-wrap: wrap; gap: 6px; }
.si-wkpick label { margin: 0; cursor: pointer; }
.si-wkpick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.si-wkpick span { display: inline-flex; width: 36px; height: 36px; border-radius: 10px; align-items: center; justify-content: center;
  border: 1.5px solid var(--line); font-family: var(--font-mono); font-weight: 700; }
.si-wkpick input:checked + span { background: var(--solid); color: var(--on-solid); border-color: var(--solid); }
.si-wkpick input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
/* GV — file trong bảng tuần */
a.it-tpl { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); margin-top: 6px; text-decoration: none; }
a.it-tpl .fx-badge { min-width: 38px; height: 20px; font-size: 10px; }
a.it-tpl:hover { color: var(--primary-dark); }
.g4-progress .fx { min-height: 0; padding: 8px 10px; }
.g4-progress .fx .fx-dir { width: 28px; height: 28px; font-size: 15px; }
details.it-older > summary { cursor: pointer; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
details.it-older a { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); margin-top: 4px; }
details.it-older .fx-badge { min-width: 38px; height: 20px; font-size: 10px; }
.form-card .sec-title .fx-badge { margin-right: 4px; }
.fx-drop { margin: 0; }
.it-tools .card-grid > .it-wide { grid-column: 1 / -1; order: -1; }
@media (max-width: 640px) { .si-nav { position: static; } }

/* 2026-10-03 — Dashboard SV: khối Bài tập chính thức (tính vào cột điểm chính) */
.sd-assign { border-radius: 28px; padding: 20px 22px; background: var(--paper-panel); border: 1.5px solid var(--line); box-shadow: var(--shadow-sm); }
.sd-assign-h { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sd-assign-ico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--solid); color: var(--on-solid); }
.sd-assign-ico svg { width: 22px; height: 22px; }
.sd-assign-t { flex: 1; min-width: 200px; }
.sd-assign-t h2 { margin: 0; font-size: var(--fs-lg); }
.sd-assign-t p { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-sm); }
a.sd-assign-all { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
a.sd-assign-all svg { width: 16px; height: 16px; }
.sd-assign-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; margin-top: 16px; }
a.sd-a { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 20px; border: 1.5px solid var(--line); border-left: 5px solid var(--warn-solid);
  background: var(--card-bg); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
a.sd-a:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); text-decoration: none; }
a.sd-a.is-urgent { border-left-color: var(--danger-solid); background: var(--danger-tint); }
a.sd-a.is-done { border-left-color: var(--accent); }
a.sd-a.is-later { border-left-color: var(--line); }
.sd-a-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sd-a-class { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); overflow-wrap: anywhere; }
.sd-a-title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-md); line-height: 1.3; overflow-wrap: anywhere; }
.sd-a-meta { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-xs); color: var(--muted); flex-wrap: nowrap; }
.sd-a-meta svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; }
.sd-a-left { color: var(--danger-ink); }
.sd-a-go { margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: var(--fs-sm); color: var(--primary-dark); }
.sd-a-go svg { width: 16px; height: 16px; }
.sd-assign-empty { margin: 12px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.tile-count { display: inline-flex; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; align-items: center; justify-content: center;
  background: var(--danger-solid); color: #fff; font-size: 12px; font-weight: 800; font-family: var(--font-mono); vertical-align: 2px; }
.action-tile.has-count { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }

/* 2026-10-04 — Đơn xin phép: dòng ghi chú/ liên kết dưới trạng thái + báo lỗi dung lượng file */
.excuse-note { margin: 4px 0 0; font-size: var(--fs-sm); }
.excuse-note a { font-weight: 700; }
.ev-size-err { color: var(--danger); font-size: var(--fs-sm); font-weight: 600; margin: 4px 0 0; }

/* ==========================================================================
   2026-10-04 — NỀN TẢNG KHẢ DỤNG / TIẾP CẬN (dùng chung mọi trang)
   Căn cứ: NN/g 10 Usability Heuristics; WCAG 2.2 AA (1.3.1, 1.4.3, 1.4.11,
   2.4.1, 2.4.7, 2.4.11, 2.5.8, 3.3.1); GOV.UK Design System — Error message.
   Macro đi kèm ở _ui.html (field, error_summary, empty_state, status_badge).
   ========================================================================== */

/* ---- Chỉ cho trình đọc màn hình ---- */
.sr-only, .visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
}

/* ---- Link "Bỏ qua tới nội dung chính" (WCAG 2.4.1) — chỉ hiện khi focus bằng bàn phím ---- */
.skip-link {
  position: absolute; top: 8px; left: 8px; z-index: 10000;
  width: 1px; height: 1px; overflow: hidden; white-space: nowrap; clip-path: inset(50%);
  padding: 10px 16px; border-radius: 999px; background: var(--solid); color: var(--on-solid); font-weight: 700; box-shadow: var(--shadow-sm);
}
.skip-link:focus, .skip-link:focus-visible { width: auto; height: auto; overflow: visible; clip-path: none; text-decoration: none; color: var(--on-solid); outline: 3px solid var(--focus); outline-offset: 2px; }
main#main-content:focus { outline: none; }
[hidden]:not([hidden="until-found"]) { display: none !important; }  /* thuộc tính hidden luôn thắng display của nút/flex */

/* ---- Thanh trên dính + thanh dưới cố định KHÔNG che phần tử đang focus (WCAG 2.4.11) ---- */
html { scroll-padding-top: calc(var(--nav-height) + 24px); }
@media (max-width: 760px) {
  html:has(body.has-bottom-nav) { scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* ---- Vòng focus thống nhất cho MỌI phần tử tương tác (WCAG 2.4.7 + 1.4.11) ---- */
:where(a, button, summary, [tabindex]:not([tabindex="-1"]), input[type="checkbox"], input[type="radio"], input[type="file"], input[type="range"], label.fx-drop):focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px;
}
label.fx-drop:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--focus); }
.bottom-nav a:focus-visible, .bottom-nav button:focus-visible { outline-offset: -3px; }

/* ---- Vùng bấm tối thiểu 24×24 (WCAG 2.5.8) ---- */
/* 2026-10-04 — :where() để không đè style riêng của .choice/.check-list/.bk-day… */
:where(input[type="checkbox"], input[type="radio"]) { width: 20px; height: 20px; min-width: 20px; margin: 2px 6px 2px 0; vertical-align: middle; cursor: pointer; }
@media (pointer: coarse) { :where(input[type="checkbox"], input[type="radio"]) { width: 24px; height: 24px; min-width: 24px; } }
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-height: 24px; cursor: pointer; }
summary { min-height: 24px; cursor: pointer; }
/* Link chữ đứng riêng (không có class) — nới vùng bấm theo chiều dọc mà KHÔNG đổi bố cục dòng */
:where(p, li, td, dd, small, .muted, .hint) > a:not([class]) { padding-block: 4px; }

/* ---- Ô nhập: iOS tự phóng to khi chữ < 16px -> giữ ≥16px trên điện thoại ---- */
@media (max-width: 760px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea { font-size: max(16px, 1rem); }
  /* Lưới điểm: giữ 16px (chống iOS phóng to) nhưng nới ô để "10.00" không bị cắt */
  .gd-cell input.gd-in, .gd-mini-cell input.gd-in { width: 66px; padding: 4px 3px; }
  .gd-cell.is-bonus input.gd-in { width: 60px; }
}

/* ---- Nút đang gửi (khoá chống bấm 2 lần — xem base.html) ---- */
form[aria-busy="true"] { cursor: progress; }
button[data-dk-locked], input[data-dk-locked] { cursor: progress; }
.dk-spin { width: 14px; height: 14px; border-radius: 999px; border: 2px solid currentColor; border-right-color: transparent;
  display: inline-block; animation: dk-spin .8s linear infinite; flex: 0 0 auto; }
@keyframes dk-spin { to { transform: rotate(360deg); } }

/* ---- Thông báo flash: có nút đóng, vai trò status/alert (base.html) ---- */
.flash-region:empty { display: none; }
.flash { position: relative; }
.flash .flash-ico { flex: 0 0 auto; margin-top: 1px; }
.flash .flash-ico svg { width: 18px; height: 18px; display: block; }
.flash .flash-msg { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.flash .flash-close {
  flex: 0 0 auto; margin: -6px -8px -6px 4px; width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 999px;
  background: transparent !important; color: inherit !important; border: none; box-shadow: none !important; font-size: 20px; line-height: 1;
}
.flash .flash-close:hover { background: color-mix(in srgb, currentColor 12%, transparent) !important; }
.flash.danger, .flash.warning, .flash.warn { background: var(--warn-tint); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.flash.error, .flash.danger { border-left: 5px solid var(--danger-solid); }

/* ---- Banner mất mạng (base.html) ---- */
.offline-banner {
  position: fixed; left: 12px; right: 12px; top: calc(8px + env(safe-area-inset-top)); z-index: 9000; margin: 0 auto; max-width: 640px;
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px;
  background: var(--danger-solid); color: #fff; font-weight: 700; font-size: var(--fs-sm); box-shadow: var(--shadow);
}
.offline-banner[hidden] { display: none; }
.offline-banner.is-back { background: var(--success-solid); }
.offline-banner svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* ---- Trường form chuẩn (macro field) + tóm tắt lỗi (macro error_summary) — theo GOV.UK ---- */
.field { margin: 0 0 18px; }
.field > label { margin-top: 0; color: var(--ink); }
.field .field-opt { font-weight: 500; color: var(--muted); }
.field > .field-hint { margin: -2px 0 6px; font-size: var(--fs-sm); color: var(--muted); }
.field > .field-error { margin: 0 0 6px; font-size: var(--fs-sm); font-weight: 700; color: var(--danger); }
.field.has-error { border-left: 4px solid var(--danger-solid); padding-left: 12px; }
.field.has-error input, .field.has-error select, .field.has-error textarea,
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger-solid); border-width: 2px; }
.field > .field-check { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--ink); font-weight: 600; }
.field > .field-check input { margin-top: 1px; }
.error-summary {
  margin: 0 0 20px; padding: 16px 18px; border: 3px solid var(--danger-solid); border-radius: 16px; background: var(--paper-panel); color: var(--ink);
}
.error-summary:focus { outline: 3px solid var(--focus); outline-offset: 3px; }
.error-summary h2 { margin: 0 0 8px; font-size: var(--fs-md); color: var(--ink); }
.error-summary ul { margin: 0; padding-left: 20px; }
.error-summary li { margin: 4px 0; }
.error-summary a { color: var(--danger); text-decoration: underline; font-weight: 700; }

/* ---- Khối "chưa có dữ liệu" có tiêu đề + hành động (macro empty_state) ---- */
.empty-state.es-block { flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px; }
.empty-state.es-block .es-title { margin: 0; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 800; color: var(--ink); }
.empty-state.es-block .es-body { margin: 0; color: var(--muted); }
.empty-state.es-block .es-action { margin-top: 8px; }

/* ---- Nhãn trạng thái (macro status_badge): luôn có icon + chữ, không chỉ dựa vào màu (WCAG 1.4.1) ---- */
.badge.sb .ico { width: 13px; height: 13px; }

/* ---- Bảng: luôn cuộn ngang trong khung, không làm cả trang tràn ngang trên điện thoại ---- */
.table-wrap, .table-scroll { max-width: 100%; }
.table-wrap:focus-visible, .table-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.page-body { min-width: 0; }
@media (max-width: 600px) {
  .badge { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
}

/* ---- Hộp xác nhận (data-confirm) dùng <dialog> — xem base.html ---- */
dialog.dk-confirm { border: 1px solid var(--line); border-radius: 22px; padding: 22px; max-width: min(460px, calc(100vw - 32px));
  background: var(--paper-panel); color: var(--ink); box-shadow: var(--shadow); }
dialog.dk-confirm::backdrop { background: rgba(10, 20, 15, .55); }
dialog.dk-confirm h2 { margin: 0 0 8px; font-size: var(--fs-md); }
dialog.dk-confirm p { margin: 0 0 4px; white-space: pre-line; }
dialog.dk-confirm .btn-row { justify-content: flex-end; }

/* ---- Giảm chuyển động: quy tắc chung đã có ở phần "Giảm chuyển động khi người dùng yêu cầu";
   bổ sung: không cuộn mượt (menu, link tóm tắt lỗi) ---- */
@media (prefers-reduced-motion: reduce) { html, * { scroll-behavior: auto !important; } }