@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root {
    --primary:#4f46e5;--primary-hover:#4338ca;--primary-light:#e0e7ff;
    --primary-gradient:linear-gradient(135deg,#6366f1,#4f46e5);
    --accent:#6366f1;--success:#10b981;--success-light:#d1fae5;
    --danger:#ef4444;--danger-light:#fee2e2;--warning:#f59e0b;--warning-light:#fef3c7;
    --info:#06b6d4;--info-light:#cffafe;--bg-body:#f4f6fb;--bg-card:#ffffff;
    --bg-sidebar:#ffffff;--text-primary:#0f172a;--text-secondary:#475569;
    --text-muted:#94a3b8;--border-color:#e2e8f0;
    --shadow-sm:0 1px 3px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.03);
    --shadow:0 4px 12px rgba(0,0,0,.05),0 2px 4px rgba(0,0,0,.03);
    --shadow-lg:0 12px 28px rgba(0,0,0,.07),0 4px 8px rgba(0,0,0,.03);
    --shadow-xl:0 20px 40px rgba(0,0,0,.08),0 8px 16px rgba(0,0,0,.04);
    --radius:16px;--radius-sm:10px;--radius-lg:24px;
    --sidebar-width:260px;--topbar-height:70px;
    --transition:all .35s cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg-body);color:var(--text-primary);font-size:14.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none;transition:var(--transition)}a:hover{color:var(--primary)}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#dde1ea;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#b0b8cc}

/* ── SIDEBAR ── */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-width);background:#fff;color:var(--text-primary);z-index:1050;transition:var(--transition);overflow-y:auto;display:flex;flex-direction:column;box-shadow:2px 0 20px rgba(79,70,229,0.06);border-right:1px solid #eff1f8}
.sidebar-brand{display:flex;align-items:center;gap:14px;padding:20px 22px;border-bottom:1px solid #f1f5f9;min-height:var(--topbar-height)}
.sidebar-brand img{width:44px;height:44px;border-radius:12px;object-fit:cover;box-shadow:0 4px 12px rgba(79,70,229,0.2)}
.sidebar-brand-text{font-weight:800;font-size:15.5px;color:#1e293b;letter-spacing:-.3px;line-height:1.2}
.sidebar-brand-text small{display:block;font-size:11px;font-weight:500;color:#94a3b8;margin-top:3px;line-height:1.4}
.sidebar-menu{list-style:none;padding:10px 12px;flex:1}
.sidebar-menu-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.8px;color:#cbd5e1;padding:20px 12px 8px}
.sidebar-menu li a{
    display:flex;align-items:center;gap:12px;padding:11px 14px;
    color:#64748b;border-radius:12px;font-size:13.5px;font-weight:600;
    transition:var(--transition);margin-bottom:3px;position:relative;
    background:transparent;border:1px solid transparent;
}
.sidebar-menu li a i{width:20px;text-align:center;font-size:15px;flex-shrink:0;transition:var(--transition)}
/* ✨ Hover: background + left accent glow — no translateX */
.sidebar-menu li a:hover{
    background:linear-gradient(90deg,#ede9fe,#e0e7ff);
    color:var(--primary);
    border-color:rgba(99,102,241,0.15);
    box-shadow:0 2px 12px rgba(79,70,229,0.1);
}
.sidebar-menu li a:hover i{color:var(--primary);filter:drop-shadow(0 0 4px rgba(99,102,241,0.5))}
.sidebar-menu li a.active{
    background:var(--primary-gradient);
    color:#fff;font-weight:700;
    border-color:transparent;
    box-shadow:0 4px 16px rgba(79,70,229,0.35);
}
.sidebar-menu li a.active::before{content:'';position:absolute;left:0;top:20%;bottom:20%;width:3px;background:#fff;border-radius:2px;opacity:.7}
.sidebar-menu li a.active i{color:#fff}
.sidebar-footer{padding:14px 16px;border-top:1px solid #f1f5f9;background:#fafafa}
.sidebar-user{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:#fff;box-shadow:var(--shadow-sm);border:1px solid #f1f5f9;transition:var(--transition)}
.sidebar-user:hover{box-shadow:var(--shadow);border-color:var(--primary-light)}
.sidebar-user img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--primary-light)}
.sidebar-user-info{flex:1;min-width:0}
.sidebar-user-info .name{font-size:13px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-info .role{font-size:11px;color:#94a3b8;font-weight:500}

/* ── TOPBAR ── */
.topbar{position:fixed;top:0;right:0;left:var(--sidebar-width);height:var(--topbar-height);background:rgba(255,255,255,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(226,232,240,.7);z-index:1040;display:flex;align-items:center;padding:0 28px;transition:var(--transition)}
.topbar-left{display:flex;align-items:center;gap:16px;flex:1}
.topbar-toggle{display:none;background:none;border:none;font-size:20px;color:var(--text-primary);cursor:pointer;padding:6px;border-radius:var(--radius-sm);transition:var(--transition)}
.topbar-toggle:hover{background:var(--primary-light);color:var(--primary)}
.topbar-title{font-size:18px;font-weight:800;color:var(--text-primary);letter-spacing:-.4px}
.topbar-right{display:flex;align-items:center;gap:8px}
.topbar-btn{background:none;border:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--text-secondary);cursor:pointer;transition:var(--transition);position:relative;font-size:16px}
.topbar-btn:hover{background:var(--primary-light);color:var(--primary)}
.topbar-btn .badge-dot{position:absolute;top:8px;right:8px;width:8px;height:8px;background:var(--danger);border-radius:50%;border:2px solid #fff}

/* ── MAIN LAYOUT ── */
.main-content{margin-left:var(--sidebar-width);padding-top:var(--topbar-height);min-height:100vh;transition:var(--transition)}
.page-content{padding:28px}

/* ── CARD ── */
/* ✨ Hover: border glow only — no translateY */
.card{
    background:var(--bg-card);border-radius:var(--radius);
    border:1px solid var(--border-color);box-shadow:var(--shadow-sm);
    transition:var(--transition);overflow:hidden;
}
.card:hover{
    box-shadow:0 0 0 2px rgba(79,70,229,0.2), var(--shadow-lg);
    border-color:rgba(99,102,241,0.25);
}
.card-header{padding:18px 22px;background:transparent;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between}
.card-header h5,.card-header h6{font-weight:700;margin:0;font-size:15px}
.card-body{padding:22px}

/* ── STAT CARDS ── */
/* ✨ Hover: colored glow + subtle scale (no jump) */
.stat-card{
    background:var(--bg-card);border-radius:18px;padding:20px 22px;
    border:1.5px solid transparent;display:flex;align-items:center;gap:18px;
    transition:var(--transition);position:relative;overflow:hidden;
    box-shadow:var(--shadow-sm);
}
.stat-card.primary{border-color:var(--primary-light)}
.stat-card.success{border-color:var(--success-light)}
.stat-card.warning{border-color:var(--warning-light)}
.stat-card.info{border-color:var(--info-light)}
.stat-card.danger{border-color:var(--danger-light)}
.stat-card.primary:hover{border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,0.12),var(--shadow-lg)}
.stat-card.success:hover{border-color:var(--success);box-shadow:0 0 0 3px rgba(16,185,129,0.12),var(--shadow-lg)}
.stat-card.warning:hover{border-color:var(--warning);box-shadow:0 0 0 3px rgba(245,158,11,0.12),var(--shadow-lg)}
.stat-card.info:hover{border-color:var(--info);box-shadow:0 0 0 3px rgba(6,182,212,0.12),var(--shadow-lg)}
.stat-card.danger:hover{border-color:var(--danger);box-shadow:0 0 0 3px rgba(239,68,68,0.12),var(--shadow-lg)}
.stat-icon{width:54px;height:54px;display:flex;align-items:center;justify-content:center;border-radius:14px;font-size:22px;flex-shrink:0;transition:var(--transition)}
.stat-card:hover .stat-icon{transform:scale(1.12);filter:drop-shadow(0 4px 8px currentColor)}
.stat-icon.primary{background:var(--primary-light);color:var(--primary)}
.stat-icon.success{background:var(--success-light);color:var(--success)}
.stat-icon.warning{background:var(--warning-light);color:var(--warning)}
.stat-icon.info{background:var(--info-light);color:var(--info)}
.stat-icon.danger{background:var(--danger-light);color:var(--danger)}
.stat-info{flex:1}.stat-label{font-size:11.5px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.6px}
.stat-value{font-size:30px;font-weight:800;color:var(--text-primary);line-height:1.15;letter-spacing:-.5px}

/* ── TABLE ── */
.table{font-size:14px}
.table thead th{background:#f8fafc;font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.6px;color:#94a3b8;border-bottom:none;padding:14px 18px;white-space:nowrap}
.table thead th:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px}
.table thead th:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px}
.table tbody td{padding:14px 18px;vertical-align:middle;border-bottom:1px solid #f8fafc;color:#334155}
/* ✨ Row hover: left accent bar + bg, no translate */
.table tbody tr{transition:var(--transition);position:relative}
.table tbody tr:hover td{background:#f5f3ff;color:var(--text-primary)}
.table tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--primary)}
.table tbody tr:last-child td{border-bottom:none}

/* ── BUTTONS ── */
/* ✨ Hover: glow shadow + brightness, no translateY */
.btn{font-weight:600;font-size:13.5px;border-radius:12px;padding:10px 22px;transition:var(--transition);display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:var(--transition);border-radius:inherit}
.btn:hover::after{background:rgba(255,255,255,0.1)}
.btn-primary{background:var(--primary-gradient);border:none;color:#fff;box-shadow:0 4px 14px rgba(79,70,229,0.3)}
.btn-primary:hover{box-shadow:0 6px 20px rgba(79,70,229,0.45);filter:brightness(1.08);color:#fff}
.btn-success{background:linear-gradient(135deg,#34d399,#10b981);border:none;color:#fff;box-shadow:0 4px 14px rgba(16,185,129,0.3)}
.btn-success:hover{box-shadow:0 6px 20px rgba(16,185,129,0.45);filter:brightness(1.08);color:#fff}
.btn-danger{background:linear-gradient(135deg,#f87171,#ef4444);border:none;color:#fff;box-shadow:0 4px 14px rgba(239,68,68,0.3)}
.btn-danger:hover{box-shadow:0 6px 20px rgba(239,68,68,0.45);filter:brightness(1.08);color:#fff}
.btn-warning{background:linear-gradient(135deg,#fbbf24,#f59e0b);border:none;color:#fff;box-shadow:0 4px 14px rgba(245,158,11,0.3)}
.btn-warning:hover{box-shadow:0 6px 20px rgba(245,158,11,0.45);filter:brightness(1.08);color:#fff}
.btn-light{background:#f8fafc;border:1px solid var(--border-color);color:var(--text-secondary)}
.btn-light:hover{background:#f1f5f9;border-color:#c7d2e8;box-shadow:var(--shadow);color:var(--text-primary)}
.btn-outline-primary{border:2px solid var(--primary);color:var(--primary);background:transparent}
.btn-outline-primary:hover{background:var(--primary-light);box-shadow:0 0 0 3px rgba(79,70,229,0.12);color:var(--primary)}
.btn-outline-secondary{border:2px solid var(--border-color);color:var(--text-secondary);background:transparent}
.btn-outline-secondary:hover{background:#f8fafc;box-shadow:var(--shadow)}
.btn-sm{padding:6px 14px;font-size:12px;border-radius:8px}
.btn-lg{padding:13px 28px;font-size:15px}

/* ── FORMS ── */
.form-control,.form-select{border:2px solid #e8edf5;border-radius:12px;padding:10px 16px;font-size:14px;transition:var(--transition);background:#f8fafc;color:var(--text-primary);font-family:inherit}
.form-control:focus,.form-select:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px rgba(79,70,229,0.1);outline:none}
.form-label{font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:6px}
.badge{font-weight:600;font-size:11px;padding:5px 12px;border-radius:20px;letter-spacing:.3px}

/* ── LOGIN ── */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f172a 0%,#312e81 50%,#4f46e5 100%);padding:20px;position:relative;overflow:hidden}
.login-page::before{content:'';position:absolute;width:700px;height:700px;background:radial-gradient(circle,rgba(99,102,241,.18),transparent 65%);top:-250px;right:-200px;border-radius:50%;pointer-events:none}
.login-page::after{content:'';position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(139,92,246,.12),transparent 65%);bottom:-200px;left:-150px;border-radius:50%;pointer-events:none}
.login-card{background:rgba(255,255,255,.97);backdrop-filter:blur(24px);border-radius:var(--radius-lg);padding:48px 40px;width:100%;max-width:430px;box-shadow:var(--shadow-xl);position:relative;z-index:1;animation:slideUp .5s cubic-bezier(.16,1,.3,1)}
@keyframes slideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.login-logo{text-align:center;margin-bottom:32px}
.login-logo img{width:76px;height:76px;border-radius:20px;object-fit:cover;margin-bottom:16px;box-shadow:0 8px 24px rgba(79,70,229,.25)}
.login-logo h4{font-size:22px;font-weight:800;color:var(--primary);margin-bottom:4px;letter-spacing:-.5px}
.login-logo p{color:var(--text-muted);font-size:13px}
.login-card .form-control{padding:12px 16px}
.login-card .btn-primary{width:100%;padding:13px;font-size:15px;font-weight:700}
/* ✨ Login btn hover: no translateY, pure glow */
.login-card .btn-primary:hover{box-shadow:0 8px 24px rgba(79,70,229,0.45);filter:brightness(1.08)}

/* ── QUIZ ── */
.quiz-container{max-width:920px;margin:0 auto}
.quiz-header{background:var(--primary-gradient);color:#fff;border-radius:var(--radius-lg);padding:24px 28px;margin-bottom:24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.quiz-timer{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.2);padding:10px 20px;border-radius:var(--radius);font-size:20px;font-weight:700;backdrop-filter:blur(10px)}
.quiz-timer.warning{animation:pulse 1s infinite;background:rgba(220,38,38,.6)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}
.question-card{background:var(--bg-card);border-radius:var(--radius);padding:28px;margin-bottom:20px;border:1.5px solid var(--border-color);transition:var(--transition)}
.question-card:hover{border-color:rgba(99,102,241,0.2);box-shadow:0 0 0 2px rgba(79,70,229,0.08),var(--shadow)}
.question-number{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--primary-light);color:var(--primary);border-radius:50%;font-weight:700;font-size:13px;margin-right:12px}
.question-text{font-size:15px;font-weight:600;margin-bottom:16px;line-height:1.7}
.answer-option{display:flex;align-items:center;gap:12px;padding:13px 18px;border:2px solid var(--border-color);border-radius:var(--radius-sm);margin-bottom:8px;cursor:pointer;transition:var(--transition);font-size:14px}
.answer-option:hover{border-color:var(--primary);background:var(--primary-light);box-shadow:0 0 0 2px rgba(79,70,229,0.1)}
.answer-option.selected{border-color:var(--primary);background:var(--primary-light)}
.answer-option.correct{border-color:var(--success);background:var(--success-light)}
.answer-option.wrong{border-color:var(--danger);background:var(--danger-light)}
.answer-label{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#f1f5f9;font-weight:700;font-size:12px;color:var(--text-secondary);flex-shrink:0;transition:var(--transition)}
.answer-option.selected .answer-label{background:var(--primary);color:#fff}
.answer-option.correct .answer-label{background:var(--success);color:#fff}
.answer-option.wrong .answer-label{background:var(--danger);color:#fff}
.quiz-progress-sidebar{position:sticky;top:80px}
.quiz-progress-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.quiz-progress-btn{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:2px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-card);font-weight:700;font-size:12px;color:var(--text-muted);cursor:pointer;transition:var(--transition)}
.quiz-progress-btn:hover{border-color:var(--primary);background:var(--primary-light);color:var(--primary)}
.quiz-progress-btn.answered{background:var(--primary-light);border-color:var(--primary);color:var(--primary)}
.quiz-progress-btn.flagged{background:var(--warning-light);border-color:var(--warning);color:var(--warning)}

/* ── MISC ── */
.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted)}
.empty-state i{font-size:52px;margin-bottom:18px;opacity:.25;display:block}
.empty-state h5{font-weight:700;color:var(--text-secondary);margin-bottom:8px}
.chat-container{height:400px;overflow-y:auto;padding:16px}
.chat-message{display:flex;gap:10px;margin-bottom:16px;max-width:80%}
.chat-message.own{margin-left:auto;flex-direction:row-reverse}
.chat-bubble{background:#f1f5f9;padding:10px 14px;border-radius:18px 18px 18px 4px;font-size:13.5px;line-height:1.5}
.chat-message.own .chat-bubble{background:var(--primary-gradient);color:#fff;border-radius:18px 18px 4px 18px}
.leaderboard-rank{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-weight:800;font-size:16px}
.leaderboard-rank.gold{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#b45309;box-shadow:0 0 12px rgba(245,158,11,0.3)}
.leaderboard-rank.silver{background:linear-gradient(135deg,#f1f5f9,#e2e8f0);color:#475569}
.leaderboard-rank.bronze{background:linear-gradient(135deg,#ffedd5,#fed7aa);color:#c2410c}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:1045;backdrop-filter:blur(4px)}
.anti-cheat-warning{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9999;display:none;align-items:center;justify-content:center}
.anti-cheat-warning .warning-content{background:#fff;border-radius:var(--radius-lg);padding:48px;text-align:center;max-width:420px;animation:slideUp .4s cubic-bezier(.16,1,.3,1)}
.anti-cheat-warning .warning-icon{font-size:56px;color:var(--danger);margin-bottom:16px}

/* ── MODAL enhancements ── */
.modal-content{border-radius:var(--radius-lg);border:none;box-shadow:var(--shadow-xl)}
.modal-backdrop{backdrop-filter:blur(4px)}

/* ── HOVER HIGHLIGHT: general interactive elements ── */
/* ✨ Premium glow ring on any .hover-glow element */
.hover-glow{transition:var(--transition)}
.hover-glow:hover{box-shadow:0 0 0 3px rgba(79,70,229,0.15),var(--shadow-lg)}


/* ════════════════════════════════════════════════════
   ROOT — Chặn scroll ngang ở mọi nơi
   min-width:0 ngăn flex items tràn container
════════════════════════════════════════════════════ */
html, body { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; min-width: 0; }

/* ── MISC ── */
.hover-glow{transition:var(--transition)}
.hover-glow:hover{box-shadow:0 0 0 3px rgba(79,70,229,0.15),var(--shadow-lg)}
.fade-in{animation:fadeIn .4s cubic-bezier(.16,1,.3,1)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}

/* ── TOM SELECT ── */
.ts-control{border:2px solid #e8edf5;border-radius:12px;padding:10px 16px;font-size:14px;background:#f8fafc;transition:var(--transition);box-shadow:none!important}
.ts-wrapper.focus .ts-control{border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px rgba(79,70,229,0.1)!important}
.ts-dropdown{border-radius:14px;border:1px solid var(--border-color);box-shadow:var(--shadow-lg);margin-top:6px;overflow:hidden;font-size:14px}
.ts-dropdown .option{padding:11px 18px;transition:var(--transition);cursor:pointer}
.ts-dropdown .option:hover,.ts-dropdown .option.active{background:var(--primary-light);color:var(--primary);font-weight:600}

/* ── MODAL enhancements ── */
.modal-content{border-radius:var(--radius-lg);border:none;box-shadow:var(--shadow-xl)}
.modal-backdrop{backdrop-filter:blur(4px)}


/* ════════════════════════════════════════════════════
   MOBILE  ≤ 991px
════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

    /* ── Layout cơ bản ── */
    .sidebar, .sidebar-overlay { display: none !important; }
    .main-content {
        margin-left: 0 !important;
        padding-top: 56px;
    }
    .page-content {
        padding: 12px 12px calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* ── Topbar ── */
    .topbar {
        left: 0;
        height: 56px;
        padding: 0 14px;
        background: rgba(255,255,255,.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(226,232,240,.8);
        box-shadow: 0 1px 8px rgba(79,70,229,.06);
    }
    .topbar-toggle        { display: none; }
    .topbar-title         { font-size: 14px; letter-spacing: -.2px; }
    .topbar-icon-chip     { width: 28px; height: 28px; font-size: 12px; border-radius: 8px; }
    .topbar-title-wrapper { gap: 8px; }
    .topbar-right         { gap: 6px; }
    .cute-btn {
        width: 34px !important;
        height: 34px !important;
        border-radius: 50% !important;
        border: none !important;
        background: #f1f5f9 !important;
        font-size: 14px !important;
        flex-shrink: 0 !important;
    }
    /* Ẩn nút logout trên topbar — đã có trong sheet Thêm */
    .cute-btn.btn-logout { display: none !important; }

    /* ── Typography ── */
    h4, h4.fw-bold { font-size: 17px !important; font-weight: 800 !important; }
    h5             { font-size: 14px !important; }
    h6             { font-size: 13px !important; }
    small          { font-size: 11px !important; }

    /* ── Page header: title trái, nút phải ── */
    .d-flex.justify-content-between { flex-wrap: wrap; gap: 8px; }
    .btn-text-label { display: none !important; }
    .d-flex.justify-content-between > .btn i,
    .d-flex.justify-content-between > a.btn i {
        font-size: 15px !important;
        margin: 0 !important;
    }
    .d-flex.justify-content-between > .btn,
    .d-flex.justify-content-between > a.btn {
        font-size: 0 !important;
        width: 40px !important;
        height: 40px !important;
        min-height: unset !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    /* ── Bootstrap columns → 100% width ── */
    [class*="col-lg-"],
    [class*="col-md-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* ── Stat cards: lưới 2 cột, KHÔNG scroll ngang ── */
    .row.g-3 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    .row.g-3 > * { padding: 0 !important; max-width: 100% !important; }
    .stat-card  { border-radius: 14px; padding: 14px 12px; gap: 10px; }
    .stat-icon  { width: 38px; height: 38px; font-size: 16px; border-radius: 11px; }
    .stat-label { font-size: 10px; }
    .stat-value { font-size: 20px; }

    /* ── Cards ── */
    .card        { border-radius: 14px; }
    .card-body   { padding: 14px; }
    .card-header { padding: 12px 14px; }

    /* ── Card header có search box → xếp dọc ── */
    .card-header.d-flex.justify-content-between {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .card-header.d-flex.justify-content-between input[type="text"],
    .card-header.d-flex.justify-content-between input[type="search"] {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* ── Nút bấm ── */
    .btn    { min-height: 38px; border-radius: 11px; padding: 8px 14px; font-size: 13px; }
    .btn-sm { min-height: 28px; border-radius: 8px;  padding: 4px 10px; font-size: 12px; }

    /* ── Bảng ──
       Cuộn ngang CHỈ trong card, trang không bị cuộn    */
    .table-responsive { overflow-x: auto !important; max-width: 100% !important; }
    /* Ẩn cột 1 (ID), cột 3 (Họ tên), cột 5 (Trạng thái) → chỉ còn: Tài khoản, Vai trò, Thao tác */
    .table thead th:first-child, .table tbody td:first-child,
    .table thead th:nth-child(3),  .table tbody td:nth-child(3),
    .table thead th:nth-child(5),  .table tbody td:nth-child(5)  { display: none !important; }
    .table thead th  { padding: 8px 8px;  font-size: 10px; white-space: nowrap; }
    .table tbody td  { padding: 8px 8px;  font-size: 12px; }
    /* Nút trong bảng: icon-only + nhỏ */
    .table .btn      { font-size: 0 !important; min-height: 30px !important; width: 30px !important; height: 30px !important; padding: 0 !important; border-radius: 50% !important; }
    .table .btn i    { font-size: 13px !important; margin: 0 !important; }

    /* ── Badges ── */
    .badge { font-size: 10px; padding: 3px 8px; }

    /* ── Form (ngoài modal) ── */
    .form-control, .form-select {
        padding: 7px 10px !important;
        font-size: 13px !important;
        min-height: unset !important;
        border-radius: 10px !important;
    }
    .form-label { font-size: 11.5px !important; margin-bottom: 3px !important; }

    /* ── Modal → bottom sheet ── */
    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        position: fixed !important;
        bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important;
    }
    .modal-content {
        border-radius: 24px 24px 0 0 !important;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -16px 48px rgba(0,0,0,.15) !important;
    }
    .modal-header::before {
        content: ''; display: block;
        width: 36px; height: 3px;
        background: #dde1ea; border-radius: 4px;
        margin: -4px auto 10px;
    }
    .modal.fade .modal-dialog { transform: translateY(100%); transition: transform .35s cubic-bezier(.16,1,.3,1); }
    .modal.show .modal-dialog { transform: translateY(0); }

    /* ════════════════════════════════════════════════════
       MODAL FORM COMPACT — ghi đè Bootstrap utility !important
       Dùng .modal .modal-xxx để có specificity cao hơn
    ════════════════════════════════════════════════════ */
    .modal .modal-header {
        padding: 10px 14px !important;
        min-height: unset !important;
    }
    .modal .modal-header .modal-title,
    .modal .modal-header h5,
    .modal .modal-header h6 {
        font-size: 14px !important;
        font-weight: 700 !important;
    }
    .modal .modal-body {
        padding: 10px 14px !important;
        max-height: 72vh !important;
        overflow-y: auto !important;
    }
    .modal .modal-footer {
        padding: 8px 14px !important;
    }
    /* Input / select / textarea trong modal — nhỏ gọn */
    .modal .modal-body .form-control,
    .modal .modal-body .form-select,
    .modal .modal-body input[type="text"],
    .modal .modal-body input[type="password"],
    .modal .modal-body input[type="email"],
    .modal .modal-body input[type="number"],
    .modal .modal-body input[type="date"],
    .modal .modal-body textarea,
    .modal .modal-body select {
        padding: 6px 10px !important;
        font-size: 13px !important;
        min-height: 0 !important;
        height: auto !important;
        line-height: 1.4 !important;
        border-radius: 10px !important;
    }
    /* Label trong modal */
    .modal .modal-body .form-label,
    .modal .modal-body label {
        font-size: 11px !important;
        margin-bottom: 2px !important;
        font-weight: 600 !important;
        color: #475569 !important;
    }
    /* Khoảng cách giữa field: ghi đè mb-3, mb-4 */
    .modal .modal-body .mb-1 { margin-bottom: 4px !important; }
    .modal .modal-body .mb-2 { margin-bottom: 6px !important; }
    .modal .modal-body .mb-3 { margin-bottom: 8px !important; }
    .modal .modal-body .mb-4 { margin-bottom: 10px !important; }
    /* Nút trong modal footer */
    .modal .modal-footer .btn,
    .modal .modal-body .btn {
        font-size: 12.5px !important;
        padding: 6px 14px !important;
        min-height: unset !important;
    }
}



/* ════════════════════════════════════════════════════
   SMALL PHONES  ≤ 575px
════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .page-content { padding: 10px 10px calc(60px + 10px) !important; }
    .login-card   { padding: 24px 16px; border-radius: 18px; margin: 12px; }
    .stat-card    { padding: 12px 10px; border-radius: 12px; }
    .stat-value   { font-size: 18px; }
    .stat-icon    { width: 34px; height: 34px; font-size: 14px; }
    .card-body    { padding: 12px; }
    .card-header  { padding: 10px 12px; }
    h4            { font-size: 15px !important; }
}