:root{
    --sidebar-width: 250px;
    --primary: #2563eb;
}
body{ background:#f4f6f9; font-family:'Segoe UI',Roboto,Arial,sans-serif; }
.app-wrapper{ display:flex; min-height:100vh; }

/* ===== Sidebar ===== */
.sidebar{ width:var(--sidebar-width); flex-shrink:0; }
.sidebar .nav-link{ color:#c9d3e0; padding:.55rem .9rem; border-radius:6px; font-size:.92rem; }
.sidebar .nav-link i{ width:22px; display:inline-block; }
.sidebar .nav-link.active, .sidebar .nav-link:hover{ background:var(--primary); color:#fff; }
.sidebar .nav-section{ color:#7c8aa5; font-size:.72rem; font-weight:600; letter-spacing:.05em; padding:.8rem .9rem .25rem; }

@media (min-width: 992px){
    .offcanvas-lg{ position:sticky; top:0; height:100vh; }
}

/* ===== Main content ===== */
.main-content{ flex:1; min-width:0; }
.topbar{ position:sticky; top:0; z-index:1020; }

/* ===== Cards / Tables ===== */
.stat-card{ border:none; border-radius:14px; color:#fff; }
.stat-card .icon{ font-size:2.2rem; opacity:.85; }
.table-responsive-card table thead{ display:none; }

@media (max-width: 767px){
    /* Bảng dạng "card" trên điện thoại */
    .table-mobile-card table, .table-mobile-card tbody, .table-mobile-card tr, .table-mobile-card td{
        display:block; width:100%;
    }
    .table-mobile-card thead{ display:none; }
    .table-mobile-card tr{ margin-bottom:12px; border:1px solid #e3e6ea; border-radius:10px; padding:8px 12px; background:#fff; }
    .table-mobile-card td{ text-align:right; padding:6px 0; border:none !important; }
    .table-mobile-card td::before{ content: attr(data-label); float:left; font-weight:600; color:#555; }
}

.badge-status{ font-size:.75rem; padding:.4em .7em; border-radius:20px; }
.avatar-sm{ width:38px; height:38px; object-fit:cover; border-radius:50%; }
.avatar-lg{ width:120px; height:120px; object-fit:cover; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1px #ddd; }

.login-wrapper{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#2563eb,#1e3a8a); }
.login-card{ border:none; border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,.2); }