/* ===== Reset & base ===== */
* { box-sizing: border-box; }
:root{
  --bg:#eef1f6; --card:#ffffff; --ink:#1f2937; --muted:#6b7280;
  --line:#e6e8ee; --red:#dc2626; --red-d:#b91c1c;
  --side:#12151f; --side-2:#1b2030; --side-ink:#c7cdda; --side-mut:#8b93a7;
  --ok:#16a34a; --okbg:#dcfce7; --warn:#b45309; --warnbg:#fef3c7;
  --bad:#b91c1c; --badbg:#fee2e2; --blue:#1d4ed8; --bluebg:#dbeafe;
  --mon:#3730a3; --monbg:#e0e7ff; --radius:14px;
}
html,body{ margin:0; }
body{ font-family:"Inter","Segoe UI",Roboto,Arial,sans-serif; background:var(--bg); color:var(--ink); font-size:15px; }
a{ color:inherit; }

/* ===== App layout ===== */
.app{ display:flex; min-height:100vh; }

/* Sidebar */
.sidebar{ width:238px; flex:0 0 238px; background:var(--side); color:var(--side-ink);
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column; }
.side-brand{ display:flex; align-items:center; gap:10px; padding:18px 18px 16px; border-bottom:1px solid rgba(255,255,255,.06); }
.side-logo{ width:38px; height:38px; border-radius:11px; background:var(--red); display:grid; place-items:center; font-size:20px; }
.side-brand-txt{ display:flex; flex-direction:column; line-height:1.15; }
.side-brand-txt b{ font-size:15px; color:#fff; letter-spacing:.3px; }
.side-brand-txt small{ font-size:10px; color:var(--side-mut); letter-spacing:2px; }
.side-nav{ display:flex; flex-direction:column; gap:2px; padding:14px 12px; flex:1; overflow-y:auto; }
.side-nav a{ display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:10px;
  color:var(--side-ink); text-decoration:none; font-weight:500; font-size:14.5px; transition:.12s; }
.side-nav a .ic{ font-size:17px; width:22px; text-align:center; filter:grayscale(.2); }
.side-nav a:hover{ background:var(--side-2); color:#fff; }
.side-nav a.active{ background:var(--red); color:#fff; box-shadow:0 6px 16px rgba(220,38,38,.35); }
.side-foot{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-top:1px solid rgba(255,255,255,.06); }
.side-foot-txt{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.side-foot-txt b{ color:#fff; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:130px; }
.side-foot-txt small{ color:var(--side-mut); font-size:11.5px; }

.avatar{ width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--red),#f97316);
  color:#fff; display:grid; place-items:center; font-weight:700; font-size:15px; flex:0 0 auto; }
.avatar.sm{ width:32px; height:32px; font-size:13px; }

/* Main column */
.appmain{ flex:1; min-width:0; display:flex; flex-direction:column; }
.appbar{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#fff; border-bottom:1px solid var(--line); padding:12px 24px; position:sticky; top:0; z-index:5; }
.appbar-title h1{ margin:0; font-size:20px; font-weight:800; }
.appbar-sub{ font-size:12.5px; color:var(--muted); }
.appbar-user{ display:flex; align-items:center; gap:10px; }
.appbar-user-txt{ display:flex; flex-direction:column; line-height:1.15; text-align:right; }
.appbar-user-txt b{ font-size:13.5px; }
.appbar-user-txt small{ font-size:11.5px; color:var(--muted); }
.iconbtn{ width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:#fff;
  display:grid; place-items:center; text-decoration:none; font-size:15px; color:var(--ink); }
.iconbtn:hover{ background:#f8fafc; border-color:#d1d5db; }

.content{ padding:22px 24px 8px; flex:1; }

/* ===== Cards (stat) ===== */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-bottom:20px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 17px;
  box-shadow:0 1px 2px rgba(16,24,40,.04); }
.card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.card-ic{ width:40px; height:40px; border-radius:11px; background:#111827; color:#fff; display:grid; place-items:center; font-size:19px; }
.card.green .card-ic{ background:#065f46; } .card.red .card-ic{ background:#991b1b; }
.card.amber .card-ic{ background:#92400e; } .card.blue .card-ic{ background:#1e3a8a; }
.card-tag{ font-size:10.5px; font-weight:700; letter-spacing:.6px; color:var(--muted);
  background:#f3f4f6; padding:3px 8px; border-radius:999px; }
.card .num{ font-size:27px; font-weight:800; line-height:1.1; }
.card .lbl{ font-size:12.5px; color:var(--muted); margin-top:3px; }
.card.green .num{ color:var(--ok); } .card.red .num{ color:var(--red-d); }
.card.amber .num{ color:var(--warn); } .card.blue .num{ color:var(--blue); }

/* ===== Panels ===== */
.panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:18px;
  box-shadow:0 1px 2px rgba(16,24,40,.04); }
.panel h2{ font-size:16px; margin:0 0 14px; font-weight:700; }
.grid2{ display:grid; grid-template-columns:1.6fr 1fr; gap:18px; align-items:start; }
@media(max-width:980px){ .grid2{ grid-template-columns:1fr; } }

/* Panel dark (điểm nhấn) */
.panel.dark{ background:var(--side); border-color:transparent; color:#e5e7eb; }
.panel.dark h2{ color:#fff; }
.panel.dark .row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid rgba(255,255,255,.07); }
.panel.dark .row:first-of-type{ border-top:0; }
.panel.dark .row b{ color:#fff; }
.panel.dark small{ color:var(--side-mut); }

/* ===== Tables ===== */
.tbl-scroll{ overflow-x:auto; }
table.list{ width:100%; border-collapse:separate; border-spacing:0; background:var(--card); }
table.list th, table.list td{ padding:10px 12px; text-align:left; vertical-align:middle; border-bottom:1px solid var(--line); }
table.list th{ background:#f8fafc; font-size:12px; text-transform:uppercase; letter-spacing:.3px; color:#64748b; font-weight:700; }
table.list tr:last-child td{ border-bottom:0; }
table.list tbody tr:hover td{ background:#f9fafb; }
td.money, th.money{ text-align:right; }
.nowrap{ white-space:nowrap; }

/* ===== Badges ===== */
.badge{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; }
.badge.dang_hoc{ background:var(--okbg); color:#166534; }
.badge.nghi_hoc{ background:#f3f4f6; color:#6b7280; }
.badge.cho_duyet{ background:var(--warnbg); color:#92400e; }
.badge.dau,.badge.du{ background:var(--okbg); color:#166534; }
.badge.mon{ background:var(--monbg); color:var(--mon); }
.badge.rot,.badge.no{ background:var(--badbg); color:#991b1b; }
.badge.chua{ background:#f3f4f6; color:#6b7280; }

/* ===== Buttons ===== */
.btn{ display:inline-block; background:var(--red); color:#fff; border:0; padding:9px 16px; border-radius:10px;
  font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; transition:.12s; }
.btn:hover{ background:var(--red-d); }
.btn.gray{ background:#64748b; } .btn.gray:hover{ background:#475569; }
.btn.green{ background:var(--ok); } .btn.green:hover{ background:#15803d; }
.btn.outline{ background:#fff; color:var(--red); border:1px solid var(--red); }
.btn.outline:hover{ background:#fef2f2; }
.btn.small{ padding:5px 11px; font-size:13px; border-radius:8px; }

/* ===== Forms & filters ===== */
form.filter{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-bottom:16px; }
form.filter label{ display:flex; flex-direction:column; font-size:12px; color:var(--muted); gap:4px; }
input[type=text],input[type=date],input[type=number],input[type=password],select{
  padding:9px 11px; border:1px solid #d5d9e2; border-radius:9px; font-size:14px; background:#fff; color:var(--ink); }
input:focus,select:focus{ outline:2px solid #fecaca; border-color:var(--red); }
.formgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
.formgrid label{ display:flex; flex-direction:column; gap:5px; font-size:13px; color:#374151; }
.form-actions{ margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; }
.muted{ color:var(--muted); font-size:13px; }
.flash{ background:var(--okbg); border:1px solid #86efac; color:#166534; padding:11px 15px; border-radius:11px; margin-bottom:16px; }
.err{ background:var(--badbg); border:1px solid #fca5a5; color:#991b1b; padding:10px 13px; border-radius:11px; margin-bottom:14px; }
.foot{ text-align:center; color:#9aa2b1; font-size:12px; padding:20px 0; }

/* ===== Responsive ===== */
@media(max-width:860px){
  .app{ flex-direction:column; }
  .sidebar{ width:100%; flex:none; height:auto; position:static; flex-direction:column; }
  .side-brand{ border-bottom:0; }
  .side-nav{ flex-direction:row; overflow-x:auto; padding:8px 10px; gap:6px; }
  .side-nav a{ white-space:nowrap; padding:9px 12px; }
  .side-nav a span:last-child{ font-size:13.5px; }
  .side-foot{ display:none; }
  .appbar{ padding:12px 16px; }
  .appbar-user-txt{ display:none; }
  .content{ padding:16px; }
}

/* ===== Standalone: login / register ===== */
.topbar{ background:var(--side); color:#fff; }
.topbar .wrap{ max-width:1000px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.topbar .brand{ display:flex; flex-direction:column; line-height:1.2; }
.topbar .brand-main{ font-weight:800; letter-spacing:.4px; }
.topbar .brand-sub{ font-size:12px; color:var(--side-mut); }
.topbar .mainnav{ margin-left:auto; }
.topbar .mainnav a{ color:#fff; text-decoration:none; padding:8px 14px; border:1px solid rgba(255,255,255,.25); border-radius:9px; }
.wrap{ max-width:1000px; margin:0 auto; padding:0 16px; }
.pagetitle{ font-size:21px; margin:18px 0 14px; }

.loginbox{ max-width:390px; margin:56px auto; background:#fff; padding:30px 28px; border-radius:18px;
  box-shadow:0 12px 40px rgba(16,24,40,.12); border:1px solid var(--line); }
.loginbox h1{ font-size:20px; text-align:center; margin:0 0 20px; font-weight:800; }
.loginbox h1 small{ display:block; font-size:12.5px; color:var(--red); font-weight:600; letter-spacing:1px; margin-top:4px; }
.loginbox label{ display:block; margin-bottom:14px; font-size:13px; color:#374151; }
.loginbox input{ width:100%; margin-top:5px; }
.loginbox .btn{ width:100%; margin-top:6px; padding:11px; }