/* ===== Theme "h5p" — phong cách H5P.com: Baloo 2 + pastel + pill viền đen + bo góc lớn ===== */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&display=swap&subset=vietnamese');

:root{
  --primary:#8f6bf6; --primary-d:#5f3fd4; --primary-h:#a58bfa;
  --primary-l:#ebe0ff; --primary-l2:#f5f0ff; --primary-border:#c9b4ff;
  --h5p-purple:#b288fd; --h5p-lav:#ebe0ff; --h5p-blue:#d0e3fa; --h5p-blue2:#9dc4f5;
  --h5p-yellow:#fbe74e; --h5p-indigo:#5463d5; --h5p-ink:#111;
  --bg:#f9f9f9; --card:#fff;
  --line:#ececec; --line2:#dcdcdc;
  --text:#111; --muted:rgba(0,0,0,.45); --muted2:rgba(0,0,0,.62);
  --radius:16px; --radius-lg:24px;
  --shadow:0 1px 2px rgba(0,0,0,.03),0 2px 8px rgba(0,0,0,.04);
  --shadow-lg:0 10px 28px rgba(0,0,0,.10);
}
body{background:var(--bg);color:var(--text)}
h1,h2,h3,.page-head h1,.topbar-title,.brand-text,.stat .num{font-family:'Baloo 2','Be Vietnam Pro',sans-serif}
h1,h2{font-weight:800;letter-spacing:-.2px}
a{color:var(--h5p-indigo)}
a:hover{color:var(--primary)}

/* ---- Nút: pill viền đen kiểu H5P ---- */
.btn{border:2px solid var(--h5p-ink);border-radius:999px;background:var(--h5p-purple);color:var(--h5p-ink);font-weight:700;padding:8px 20px;box-shadow:0 3px 0 var(--h5p-ink);transition:transform .1s,box-shadow .1s,background .15s}
.btn:hover{background:#c39ffe;color:var(--h5p-ink);border-color:var(--h5p-ink);transform:translateY(-1px);box-shadow:0 4px 0 var(--h5p-ink)}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--h5p-ink)}
.btn-ghost{background:#fff;color:var(--h5p-ink);border:2px solid var(--h5p-ink);box-shadow:0 3px 0 var(--h5p-ink)}
.btn-ghost:hover{background:var(--h5p-lav);color:var(--h5p-ink);border-color:var(--h5p-ink)}
.btn-danger{background:#ffb3b3;color:var(--h5p-ink);border-color:var(--h5p-ink)}
.btn-danger:hover{background:#ff9d9d;color:var(--h5p-ink)}
.btn-success{background:#b9f0a5;color:var(--h5p-ink);border-color:var(--h5p-ink)}
.btn-success:hover{background:#a4e88c;color:var(--h5p-ink)}

/* ---- Card: trắng bo lớn ---- */
.card{border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.card-pad{padding:22px}
.stat{border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.stat .num{font-weight:800}

/* ---- Sidebar: trắng, hover lavender, active tím pill ---- */
.sidebar{background:#fff!important;border-right:1px solid var(--line);box-shadow:none}
.sidebar .brand{background:#fff!important;border-bottom:1px solid var(--line)}
.sidebar .brand img{height:34px}
.nav-group{color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:11px}
.sidebar .nav-item{color:#333;font-weight:600;border-radius:999px;border-left:0;padding:9px 14px;margin:2px 4px}
.sidebar .nav-item:hover{background:var(--h5p-lav);color:var(--h5p-ink)}
.sidebar .nav-item.active{background:var(--h5p-purple);border-left:0;color:var(--h5p-ink);font-weight:700;box-shadow:none}
.sidebar .nav-item.active .ico{color:var(--h5p-ink)}
.sidebar-foot{border-top:1px solid var(--line)}

/* ---- Topbar ---- */
.topbar{background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar-title{font-weight:800;font-size:18px}
.user-chip{padding:5px 12px 5px 6px;border-radius:999px}
.user-chip:hover{background:var(--h5p-lav)}
.avatar{background:linear-gradient(135deg,var(--h5p-purple),var(--h5p-blue2));color:var(--h5p-ink);box-shadow:none;border:2px solid var(--h5p-ink)}
.hamb{color:var(--h5p-ink)}

/* ---- Pill/badge pastel ---- */
.pill{border-radius:999px;background:var(--h5p-lav);color:#4b2f8f;border:0;font-weight:700}
.badge{border-radius:999px;font-weight:700;border:1.5px solid var(--h5p-ink);color:var(--h5p-ink)}
.badge-admin{background:var(--h5p-yellow)}
.badge-teacher{background:var(--h5p-blue)}
.badge-student{background:#d6f5c9}

/* ---- Form ---- */
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=datetime-local],select,textarea{border:2px solid var(--line2);border-radius:14px;padding:8px 14px;font-family:inherit;transition:border-color .15s}
input:focus,select:focus,textarea:focus{border-color:var(--h5p-ink);outline:none;box-shadow:none}

/* ---- Bảng ---- */
table{border-radius:var(--radius);overflow:hidden}
th{background:var(--h5p-lav);color:var(--h5p-ink);font-weight:700}
tr:hover td{background:var(--primary-l2)}

/* ---- Tabs / chips lọc ---- */
.tabs .tab,.ag-tab{border-radius:999px;border:2px solid var(--line2);font-weight:600}
.tabs .tab.active,.ag-tab.active{border-color:var(--h5p-ink);background:var(--h5p-yellow);color:var(--h5p-ink)}

/* ---- Landing / trang công khai (nếu dùng class chung) ---- */
.landing-nav .pill{border:2px solid var(--h5p-ink);background:#fff;color:var(--h5p-ink)}

/* ---- Trang auth standalone (login/register: .split .bp .fp .card .tt) ---- */
.split .bp{background:linear-gradient(160deg,var(--h5p-lav),#fff)}
.split .bp::before{background:rgba(178,136,253,.12)}
.split .bp::after{background:radial-gradient(circle,rgba(157,196,245,.35),transparent 68%)}
.split .bp h1{font-family:'Baloo 2','Be Vietnam Pro',sans-serif;font-weight:700}
.split .bp h1 .hl{color:var(--h5p-indigo)}
.split .chip{border:1.5px solid var(--h5p-ink);font-weight:700}
.split .ch-s{background:#d6f5c9;color:#111}.split .ch-p{background:var(--h5p-blue);color:#111}.split .ch-w{background:var(--h5p-yellow);color:#111}
.split .card{border-radius:28px;border:1px solid var(--line);box-shadow:0 12px 40px rgba(0,0,0,.08)}
.split .tt{font-family:'Baloo 2','Be Vietnam Pro',sans-serif;font-weight:700;background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--h5p-ink)}
.split button[type=submit],.split .sbm{border:2px solid var(--h5p-ink)!important;border-radius:999px!important;background:var(--h5p-purple)!important;color:var(--h5p-ink)!important;font-weight:700!important;box-shadow:0 3px 0 var(--h5p-ink)!important}
.split button[type=submit]:hover,.split .sbm:hover{background:#c39ffe!important;transform:translateY(-1px)}
.split input{border-radius:14px!important}

/* ---- Dark mode: giữ nguyên hoạt động, chỉ nới bo góc ---- */
.theme-dark .sidebar{background:#101418!important;border-right-color:#23282e}
.theme-dark .sidebar .brand{background:#101418!important;border-bottom-color:#23282e}
.theme-dark .sidebar .nav-item{color:#c8d0d9}
.theme-dark .sidebar .nav-item:hover{background:#1c222a;color:#fff}
.theme-dark .sidebar .nav-item.active{background:var(--h5p-purple);color:#111}
.theme-dark .btn{box-shadow:0 3px 0 #000}

/* ---- Vá phần ThaoSaki còn sót (app.css block cuối) + base bù từ gemtech ---- */
.sidebar-foot{background:#fff!important;border-top:1px solid var(--line)}
.mode-sw{display:flex;gap:4px;margin:0 14px 14px;background:#f4f1fb;border:1px solid var(--line2);border-radius:999px;padding:4px}
.mode-sw form{flex:1;display:flex;margin:0}
.mode-sw button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border:0;background:transparent;color:#555;font-family:inherit;font-weight:700;font-size:12.5px;padding:7px 6px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s}
.mode-sw button i{font-size:16px;line-height:1}
.mode-sw button.on{background:var(--h5p-purple);color:#111;box-shadow:none}
.mode-sw button:not(.on):hover{background:var(--h5p-lav);color:#111}
@media(min-width:861px){
  html.sb-mini .mode-sw{flex-direction:column;margin:0 9px 10px;padding:3px;gap:3px;border-radius:16px}
  html.sb-mini .mode-sw button span{display:none}
  html.sb-mini .mode-sw button{padding:9px 0;gap:0}
}
.sidebar .brand img.brand-sm{display:none}
html.sb-mini .sidebar .brand img.brand-sm{display:block;height:36px;width:36px;border-radius:9px;object-fit:cover}
.topsearch input{background:#fff;border:2px solid var(--line2);font-weight:500;color:var(--text)}
.topsearch input:focus{border-color:var(--h5p-ink);background:#fff;box-shadow:none}
.table th{background:#f5f0ff;color:#111;font-weight:700;text-transform:none;letter-spacing:0;font-size:12.5px}
.table th,.table td{border-bottom-color:var(--line)}
.table tr:nth-child(even) td{background:#fbfaff}
.table tr:hover td{background:#f5f0ff}

/* ---- LANDING (bản Quiz.com petrol) → sáng pastel H5P ---- */
body:not(.rdmode){scroll-behavior:smooth}
.hero{background:linear-gradient(180deg,#f5f0ff 0%,#f9f9f9 100%);color:#111}
.hero h1{font-family:'Baloo 2','Be Vietnam Pro',sans-serif;font-weight:700;color:#111}
.hero h1 .hl{color:#5463d5}
.hero .sub{color:#555}
.blob{opacity:.35}
.b1{background:#b288fd}.b2{background:#9dc4f5}.b3{background:#fbe74e;opacity:.3}
.badge{background:#fff;border:2px solid #111;color:#111}
.badge .dot{background:#7bc96f}
.nav .links{color:#111}
.nav .links a{opacity:.75}.nav .links a:hover{opacity:1}
.nav .login{color:#111}
.nav.solid{background:rgba(255,255,255,.95);box-shadow:0 2px 0 #ececec}
.nav.solid .login{color:#5463d5}
.btn-p{background:#b288fd;color:#111;border:2px solid #111;box-shadow:0 4px 0 #111}
.btn-p:hover{background:#c39ffe;color:#111}
.btn-p:active{transform:translateY(4px);box-shadow:0 0 0 #111}
.btn-g{background:#b9f0a5;color:#111;border:2px solid #111;box-shadow:0 4px 0 #111}
.btn-g:hover{background:#a4e88c}
.btn-g:active{transform:translateY(4px);box-shadow:0 0 0 #111}
.btn-ghost{background:#fff;color:#111;border:2px solid #111;box-shadow:0 4px 0 #111}
.btn-ghost:hover{background:#ebe0ff}
.codebox{background:#fff;border:2px solid #111;box-shadow:0 5px 0 #111}
.codebox .t{color:#555}
.codebox input{background:#f5f0ff;color:#111}
.codebox input:focus{box-shadow:0 0 0 4px rgba(178,136,253,.35)}
.face{box-shadow:0 8px 0 rgba(0,0,0,.85);border:2px solid #111}
.face.f{background:#fff;color:#111}
.face.b{background:#d6f5c9;color:#111}
.face .ipa{color:#777}.face.b .ipa{color:#3f7a2e}
.face .hint{color:#999}.face.b .hint{color:#3f7a2e}
.chip{background:#fbe74e;color:#111;border:2px solid #111;box-shadow:0 4px 0 #111}
.stats{background:#fff;border-bottom:2px solid #ececec}
.stats .n{color:#5463d5;font-family:'Baloo 2','Be Vietnam Pro',sans-serif}
.stats .l{color:#666}
.sec.alt{background:#f5f0ff}
.sec.petrol{background:#d0e3fa;color:#111}
.k{color:#5463d5}
.sec.petrol .k{color:#3d54c9}
.h2{color:#111;font-family:'Baloo 2','Be Vietnam Pro',sans-serif;font-weight:700}
.sec.petrol .h2{color:#111}
.lead{color:#555;font-weight:500}
.sec.petrol .lead{color:#3a4a66}
.fcardx{border:2px solid #ececec;border-radius:24px;box-shadow:0 4px 0 rgba(0,0,0,.05)}
.fcardx:hover{box-shadow:0 8px 0 rgba(178,136,253,.4);border-color:#b288fd;transform:translateY(-6px)}
.fcardx h3{color:#111}
.fcardx .tag{background:#b288fd;color:#111;box-shadow:0 3px 0 #111;border:1.5px solid #111}
.val{border:2px solid #ececec}
.val b{color:#111}
.course{border:2px solid #ececec;border-radius:24px}
.course:hover{border-color:#b288fd;box-shadow:0 8px 0 rgba(178,136,253,.4)}
.course h3{color:#111}
.course .cs{color:#5463d5}
.course .lvl{background:#fbe74e;color:#111;border:1.5px solid #111;box-shadow:0 2px 0 #111}
.band{background:#33308f;box-shadow:0 8px 0 rgba(0,0,0,.2)}
.band h2{color:#fff;font-family:'Baloo 2','Be Vietnam Pro',sans-serif}
.band p{color:#c6c9f2}
.band .ci li{color:#fff}
.band .ci .b{background:rgba(251,231,78,.15);border-color:rgba(251,231,78,.5);color:#fbe74e}
.band .ci small{color:#9fa3e8}
.band .cta2{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.band .cta2 .av{background:#fbe74e;color:#111;box-shadow:0 4px 0 rgba(0,0,0,.35)}
.band .cta2 .nm{color:#fff}
.band .cta2 .rl{color:#9fa3e8}
.band .cta2 .btn{background:#fbe74e;color:#111;box-shadow:0 4px 0 rgba(0,0,0,.4)}
.band .btn{background:#fbe74e;color:#111;box-shadow:0 4px 0 rgba(0,0,0,.4)}
footer{background:#111;color:#aaa}
footer a{color:#c9b4ff}
.table tbody tr:nth-child(even),.table tr:nth-child(even){background:#fbfaff}
table tbody tr:nth-child(even){background:#fbfaff}
table tbody tr:nth-child(even) td{background:transparent}
.table tbody tr:nth-child(even) td{background:#fbfaff}