:root {
  --brand: #2563eb;
  --brand-2: #4f46e5;
  --accent: #10b981;
  --gold: #d4af37;
  --danger: #dc2626;
  --surface: #0f172a;
  --card: #1e293b;
  --card-2: #263449;
  --border: #334155;
}
html, body { font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', Arial, sans-serif; }

/* tab bar */
.tabbar { display: flex; gap: .25rem; overflow-x: auto; }
.tabbar a {
  white-space: nowrap; padding: .5rem .85rem; border-radius: .5rem .5rem 0 0;
  font-size: .875rem; color: #cbd5e1; border-bottom: 2px solid transparent;
}
.tabbar a:hover { background: rgba(148,163,184,.12); color: #fff; }
.tabbar a.active { background: var(--card); color: #fff; border-bottom-color: var(--brand); }

/* sidebar (vertical) */
.sidebar a {
  display: flex; align-items: center; gap: .55rem; padding: .55rem .75rem;
  border-radius: .5rem; color: #cbd5e1; font-size: .9rem;
}
.sidebar a:hover { background: rgba(148,163,184,.12); color: #fff; }
.sidebar a.active { background: var(--brand); color: #fff; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: 1rem; }
.stat b { display: block; font-size: 1.5rem; line-height: 2rem; }

table.tbl { width: 100%; border-collapse: collapse; }
table.tbl th, table.tbl td { padding: .5rem .6rem; border-bottom: 1px solid var(--border); text-align: left; font-size: .875rem; }
table.tbl th { background: rgba(148,163,184,.08); color: #cbd5e1; font-weight: 600; }
table.tbl tr:hover td { background: rgba(148,163,184,.05); }

input, textarea, select {
  background: #0b1220; border: 1px solid var(--border); border-radius: .5rem;
  padding: .45rem .6rem; color: #e2e8f0; font: inherit;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--brand); outline-offset: 0; }
button, .btn {
  background: var(--brand); color: #fff; border: 0; border-radius: .5rem;
  padding: .45rem .9rem; font: inherit; cursor: pointer;
}
button:hover, .btn:hover { filter: brightness(1.1); }
button.ghost { background: #334155; }
button.danger { background: var(--danger); }
button.ok { background: var(--accent); }
pre.json { background: #0b1220; border: 1px solid var(--border); border-radius: .6rem; padding: .8rem; overflow: auto; font-size: .8rem; }
.muted { color: #94a3b8; font-size: .8rem; }
.badge { display: inline-block; padding: .1rem .45rem; border-radius: 9999px; font-size: .7rem; }
.badge.ok { background: rgba(16,185,129,.2); color: #6ee7b7; }
.badge.warn { background: rgba(245,158,11,.2); color: #fcd34d; }
.badge.bad { background: rgba(220,38,38,.2); color: #fca5a5; }

/* layout helpers used by server-rendered pages */
.cards { display: flex; gap: .75rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.cards .card { padding: .8rem 1rem; min-width: 130px; }
.card b { font-size: 1.5rem; display: block; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .5rem 0; }
form.inline { display: inline; }
table { width: 100%; background: var(--card); border-collapse: collapse; border-radius: .75rem; overflow: hidden; margin-top: .75rem; }
th, td { padding: .5rem .6rem; border-bottom: 1px solid var(--border); text-align: left; font-size: .875rem; }
th { background: rgba(148,163,184,.08); color: #cbd5e1; }
tr:hover td { background: rgba(148,163,184,.05); }
h2 { font-size: 1.3rem; font-weight: 700; margin: 1rem 0 .5rem; }
h3 { font-size: 1.05rem; font-weight: 600; margin: 1rem 0 .4rem; }
a { color: #93c5fd; }

/* ================= Mascot HUMG (moods + skins) ================= */
.mascot-slot{line-height:0}
.mascot{width:84px;height:84px;transition:transform .3s}
.mascot-slot .mood,.mascot-slot .skin{display:none}
.mascot-slot[data-mood="vui"] [data-m="vui"],
.mascot-slot[data-mood="chuc_mung"] [data-m="chuc_mung"],
.mascot-slot[data-mood="buon"] [data-m="buon"],
.mascot-slot[data-mood="ngam_nghi"] [data-m="ngam_nghi"],
.mascot-slot[data-mood="nghiem_tuc"] [data-m="nghiem_tuc"]{display:block}
.mascot-slot[data-skin="miner"] [data-skin="miner"],
.mascot-slot[data-skin="tuyensinh"] [data-skin="tuyensinh"],
.mascot-slot[data-skin="hexanh"] [data-skin="hexanh"],
.mascot-slot[data-skin="anniversary60"] [data-skin="anniversary60"],
.mascot-slot[data-skin="tet"] [data-skin="tet"],
.mascot-slot[data-skin="logo"] [data-skin="logo"],.mascot-slot[data-skin="vector"] [data-skin="vector"]{display:block}
.mascot-slot[data-skin="logo"] .baseface,.mascot-slot[data-skin="vector"] .baseface{display:none}
@keyframes mc-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes mc-tilt{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes mc-pop{0%{transform:scale(.85)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
.mascot-slot[data-mood="vui"] .mascot{animation:mc-bob 2.6s ease-in-out infinite}
.mascot-slot[data-mood="chuc_mung"] .mascot{animation:mc-pop 1.2s ease-in-out infinite}
.mascot-slot[data-mood="ngam_nghi"] .mascot{animation:mc-tilt 1.6s ease-in-out infinite}
.mascot-slot[data-skin="student_nam"] [data-skin="student_nam"],
.mascot-slot[data-skin="student_nu"] [data-skin="student_nu"],
.mascot-slot[data-skin="thay_giao"] [data-skin="thay_giao"],
.mascot-slot[data-skin="co_giao"] [data-skin="co_giao"],
.mascot-slot[data-skin="giao_su_gia"] [data-skin="giao_su_gia"],
.mascot-slot[data-skin="giao_su_tre"] [data-skin="giao_su_tre"]{display:block}