/* ══════════════════════════════════════════════════════════════════════════
   Vỏ TailAdmin — tệp nạp SAU CÙNG

   Vì sao cần tệp này thay vì sửa tiếp `resources/css/tailadmin-skin.css`:
   gói Vite (`admin.css`, chứa lớp da TailAdmin) được nạp ở dòng 48 của
   `partials/styles.blade.php`, nhưng NGAY SAU đó còn bốn tệp tĩnh nữa —
   `edu-compact-theme.css`, `app-layout.css`, `edu-font-scale.css`,
   `sis-fullwidth.css`. Riêng `edu-compact-theme.css` là một bộ da hoàn chỉnh
   với 491 quy tắc `!important`: thanh bên nền xanh gradient, thanh trên cao
   52px, thẻ bo 6px, tiêu đề trang bọc hộp. Mọi thứ lớp da TailAdmin khai báo
   đều bị bốn tệp này ghi đè ngược — đó là lý do màn hình vẫn ra dáng hệ cũ.

   Tệp này nạp cuối cùng nên thắng theo thứ tự. Các bộ chọn của
   `edu-compact-theme.css` đều dạng `.edu-compact-theme :where(...)`, mà
   `:where()` có độ đặc hiệu bằng 0 — nên `body.edu-compact-theme .x` là đủ.

   Phạm vi: chỉ lớp vỏ (thanh bên, thanh trên, nền trang, breadcrumb, tiêu đề
   trang, khung thẻ). Không đụng lưới cột bên trong để 769 màn Bootstrap giữ
   nguyên bố cục.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 0 · Biến kích thước và bảng màu ────────────────────────────────────── */

body {
    --ta-brand: #465fff;
    --ta-brand-hover: #3641f5;
    --ta-brand-50: #ecf3ff;
    --ta-gray-25: #fcfcfd;
    --ta-gray-50: #f9fafb;
    --ta-gray-100: #f2f4f7;
    --ta-gray-200: #e4e7ec;
    --ta-gray-300: #d0d5dd;
    --ta-gray-400: #98a2b3;
    --ta-gray-500: #667085;
    --ta-gray-700: #344054;
    --ta-gray-800: #1d2939;
}

body.edu-compact-theme {
    --edu-sidebar-width: 290px;
    --edu-sidebar-collapsed: 90px;
    --edu-topbar-height: 72px;
}

/* Bảng màu thanh menu: GIỮ NGUYÊN bảng gốc xanh đen của
   `edu-compact-theme.css` (`--edu-menu-bg: #071827`). Không khai đè ở đây.

   Vì vậy mọi quy tắc thanh bên bên dưới phải đọc `--edu-menu-*` thay vì gán
   cứng màu trắng/xám — có thế đổi bảng màu một chỗ là cả thanh menu theo, và
   chữ không bao giờ rơi vào cảnh sáng trên nền sáng. */

/* ── 1 · Nền trang ───────────────────────────────────────────────────────
   TailAdmin đặt toàn bộ khung làm việc trên gray-50 phẳng. Bộ da cũ vẽ ba
   lớp gradient xanh chồng nhau ở trang tổng quan — phải gỡ hẳn. */

body.edu-compact-theme,
body.page-dashboard.edu-compact-theme {
    background: var(--ta-gray-50) !important;
}

body.edu-compact-theme .app-content,
body.edu-compact-theme .portal-content,
body.edu-compact-theme .fp-content,
body.edu-compact-theme .hssv-main,
body.page-dashboard.edu-compact-theme .app-content,
body.page-dashboard.edu-compact-theme .app-page-shell,
body.page-dashboard.edu-compact-theme .dashboard-modern-shell {
    background: var(--ta-gray-50) !important;
}

/* Khoảng đệm nội dung của bản gốc: p-4 trên di động, p-6 từ md trở lên. */
body.edu-compact-theme .app-content,
body.edu-compact-theme .portal-content,
body.edu-compact-theme .fp-content,
body.edu-compact-theme .hssv-main {
    padding: 16px !important;
}

@media (min-width: 768px) {
    body.edu-compact-theme .app-content,
    body.edu-compact-theme .portal-content,
    body.edu-compact-theme .fp-content,
    body.edu-compact-theme .hssv-main {
        padding: 24px !important;
    }
}

/* ── 2 · Thanh bên ───────────────────────────────────────────────────────
   Bản gốc: nền trắng, viền phải mảnh, không đổ bóng, bề rộng 290px. */

body.edu-compact-theme .app-sidebar,
body.edu-compact-theme .erpui-main-sidebar,
body.edu-compact-theme .portal-sidebar,
body.edu-compact-theme .fp-sidebar,
body.edu-compact-theme .hssv-sidebar {
    background: var(--edu-menu-bg) !important;
    border-right: 1px solid var(--edu-menu-border) !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: var(--edu-menu-text) !important;
}

/* Khối thương hiệu: TailAdmin để logo thoáng, không kẻ ngang, không nền. */
body.edu-compact-theme .sidebar-logo {
    min-height: calc(72px * var(--sis-font-scale, 1.17)) !important;
    margin: 0 !important;
    padding: 20px !important;
    background: transparent !important;
    border-bottom: 0 !important;
    gap: 10px !important;
}

body.edu-compact-theme .sidebar-logo img {
    width: auto !important;
    height: 34px !important;
    min-width: 0 !important;
    max-width: 170px !important;
    border-radius: 0 !important;
    object-fit: contain !important;
}

body.edu-compact-theme .sidebar-collapse-btn {
    width: 34px !important;
    height: 34px !important;
    margin-left: auto !important;
    border: 1px solid var(--edu-menu-border) !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--edu-menu-icon) !important;
}

/* Ô tìm chức năng: hộp trắng viền gray-300, bo 8px như ô nhập của bản gốc. */
body.edu-compact-theme .erpui-main-sidebar .sidebar-search {
    min-height: calc(42px * var(--sis-font-scale, 1.17)) !important;
    margin: 0 20px 16px !important;
    padding: 8px 12px !important;
    border: 1px solid var(--edu-menu-border) !important;
    border-radius: 8px !important;
    background: var(--edu-menu-hover) !important;
    gap: 8px !important;
}

body.edu-compact-theme .erpui-main-sidebar .sidebar-search i {
    color: var(--edu-menu-icon) !important;
}

body.edu-compact-theme .erpui-main-sidebar .sidebar-search input {
    background: transparent !important;
    border: 0 !important;
    color: var(--edu-menu-text) !important;
    font-size: calc(14px * var(--sis-font-scale, 1.17)) !important;
}

body.edu-compact-theme .erpui-main-sidebar .sidebar-search input::placeholder {
    color: var(--edu-menu-icon) !important;
    opacity: .8;
}

/* Bộ chuyển chế độ menu: thu về dạng chip xám nhạt, không tranh nét với menu. */
body.edu-compact-theme .sidebar-mode-switcher {
    margin: 0 20px 16px !important;
    padding: 4px !important;
    gap: 2px !important;
    border-radius: 10px !important;
    background: var(--ta-gray-100) !important;
    border: 0 !important;
}

body.edu-compact-theme .sidebar-mode-btn {
    min-height: calc(32px * var(--sis-font-scale, 1.17)) !important;
    padding: 5px 4px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--ta-gray-500) !important;
    font-size: calc(11px * var(--sis-font-scale, 1.17)) !important;
    font-weight: 500 !important;
}

body.edu-compact-theme .sidebar-mode-btn.is-active {
    background: #ffffff !important;
    color: var(--ta-brand) !important;
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, .06) !important;
}

/* Vùng cây menu. */
body.edu-compact-theme .erpui-main-sidebar .sidebar-nav {
    padding: 0 20px 24px !important;
    gap: 4px !important;
}

/* Nhãn giai đoạn — kế thừa đúng cách bàn làm việc Đào tạo bố trí menu: các
   cụm chức năng xếp dưới một nhãn tĩnh cho biết đang ở chặng nào của quy
   trình. Ở bàn Đào tạo là chặng của năm học, ở đây là chặng của vòng đời
   người học. Trước đây chỗ này là nhãn "MENU" cố định, nay bỏ vì nhãn giai
   đoạn đã nói được nhiều hơn. */
body.edu-compact-theme .erpui-main-sidebar .sidebar-phase-label {
    color: var(--edu-menu-icon) !important;
    cursor: default;
    font-size: calc(11.5px * var(--sis-font-scale, 1.17)) !important;
    font-weight: 600 !important;
    letter-spacing: .06em !important;
    line-height: 20px;
    margin: 20px 12px 8px !important;
    text-transform: uppercase !important;
    user-select: none;
}

body.edu-compact-theme .erpui-main-sidebar .sidebar-nav > .sidebar-phase-label:first-child {
    margin-top: 4px !important;
}

/* Thu gọn thanh bên: nhãn chữ không còn chỗ, thay bằng một vạch ngăn. */
body.edu-compact-theme .app-wrapper.sidebar-collapsed .erpui-main-sidebar .sidebar-phase-label {
    border-top: 1px solid var(--edu-menu-border) !important;
    font-size: 0 !important;
    margin: 12px 12px 8px !important;
}


/* Nhóm cấp 1: viên thuốc bo 8px, KHÔNG kẻ ngang, KHÔNG gạch trái. */
body.edu-compact-theme .erpui-main-sidebar .sidebar-section {
    margin: 0 0 2px !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    overflow: visible !important;
}

body.edu-compact-theme .erpui-main-sidebar .sidebar-section-header {
    min-height: calc(44px * var(--sis-font-scale, 1.17)) !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-left: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--edu-menu-text) !important;
    font-size: calc(14px * var(--sis-font-scale, 1.17)) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    gap: 12px !important;
}

body.edu-compact-theme .erpui-main-sidebar .sidebar-section-header .sidebar-label {
    color: inherit !important;
    font-size: calc(14px * var(--sis-font-scale, 1.17)) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.edu-compact-theme .erpui-main-sidebar .sidebar-section-header > i {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    flex-basis: 24px !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--edu-menu-icon) !important;
    font-size: calc(17px * var(--sis-font-scale, 1.17)) !important;
}

body.edu-compact-theme .erpui-main-sidebar .sidebar-section-header:hover {
    background: var(--edu-menu-hover) !important;
    color: var(--edu-menu-text) !important;
}

body.edu-compact-theme .erpui-main-sidebar .sidebar-section-header:hover > i {
    color: var(--edu-menu-text) !important;
}

body.edu-compact-theme .erpui-main-sidebar .sidebar-section[open] > .sidebar-section-header,
body.edu-compact-theme .erpui-main-sidebar .sidebar-section.is-open > .sidebar-section-header,
body.edu-compact-theme .erpui-main-sidebar .sidebar-section.is-active > .sidebar-section-header {
    background: var(--edu-menu-active) !important;
    color: var(--edu-menu-active-border) !important;
    border-left: 0 !important;
    box-shadow: none !important;
}

body.edu-compact-theme .erpui-main-sidebar .sidebar-section[open] > .sidebar-section-header > i,
body.edu-compact-theme .erpui-main-sidebar .sidebar-section.is-open > .sidebar-section-header > i,
body.edu-compact-theme .erpui-main-sidebar .sidebar-section.is-active > .sidebar-section-header > i,
body.edu-compact-theme .erpui-main-sidebar .sidebar-section[open] > .sidebar-section-header .sidebar-label,
body.edu-compact-theme .erpui-main-sidebar .sidebar-section.is-open > .sidebar-section-header .sidebar-label,
body.edu-compact-theme .erpui-main-sidebar .sidebar-section.is-active > .sidebar-section-header .sidebar-label {
    color: var(--edu-menu-active-border) !important;
}

/* Con số đếm: viên xám nhạt, không phải huy hiệu tương phản. */
body.edu-compact-theme .erpui-main-sidebar .sidebar-section-count,
body.edu-compact-theme .erpui-main-sidebar .sidebar-module-header em,
body.edu-compact-theme .erpui-main-sidebar .sidebar-badge {
    min-width: 20px !important;
    padding: 1px 7px !important;
    border-radius: 999px !important;
    background: var(--edu-menu-badge-bg) !important;
    color: var(--edu-menu-badge-text) !important;
    font-size: calc(11px * var(--sis-font-scale, 1.17)) !important;
    font-weight: 500 !important;
    font-style: normal !important;
}

body.edu-compact-theme .erpui-main-sidebar .sidebar-section[open] > .sidebar-section-header .sidebar-section-count,
body.edu-compact-theme .erpui-main-sidebar .sidebar-section.is-active > .sidebar-section-header .sidebar-section-count {
    background: #ffffff !important;
    color: var(--ta-brand) !important;
}

/* ── 3 · Menu xổ TẠI CHỖ — kế thừa bàn làm việc Đào tạo ──────────────────
   Bàn Đào tạo từ trước đã trải mục con ngay dưới mục cha
   (`[data-training-workspace="1"]` ép `position: static`), trong khi các bàn
   còn lại bắn ra một panel xanh đậm `position: fixed` phủ lên nội dung. Khối
   dưới đây nhân hành vi của bàn Đào tạo ra toàn hệ thống — cũng đúng luôn
   cách TailAdmin làm.

   Bàn HSSV là ngoại lệ: JS của nó gán thẳng `left`/`width` dạng inline style,
   ép về `position: static` sẽ vỡ bề rộng. Giữ nguyên panel nổi cho bàn đó. */

body.edu-compact-theme .erpui-main-sidebar:not([data-hssv-workspace="1"]) .sidebar-section-body,
body.edu-compact-theme .erpui-main-sidebar:not([data-hssv-workspace="1"]) .sidebar-module-body {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 2px 0 6px !important;
    padding: 0 0 0 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    grid-template-columns: none !important;
}

body.edu-compact-theme .erpui-main-sidebar:not([data-hssv-workspace="1"]) .sidebar-section[open] > .sidebar-section-body,
body.edu-compact-theme .erpui-main-sidebar:not([data-hssv-workspace="1"]) .sidebar-section.is-open > .sidebar-section-body,
body.edu-compact-theme .erpui-main-sidebar:not([data-hssv-workspace="1"]) .sidebar-module[open] > .sidebar-module-body,
body.edu-compact-theme .erpui-main-sidebar:not([data-hssv-workspace="1"]) .sidebar-module.is-open > .sidebar-module-body {
    display: grid !important;
    gap: 2px !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

body.edu-compact-theme .erpui-main-sidebar:not([data-hssv-workspace="1"]) .sidebar-section:not([open]):not(.is-open) > .sidebar-section-body,
body.edu-compact-theme .erpui-main-sidebar:not([data-hssv-workspace="1"]) .sidebar-module:not([open]):not(.is-open) > .sidebar-module-body {
    display: none !important;
}

/* Menu xổ tại chỗ nên thanh bên phải cuộn được cả cây. */
body.edu-compact-theme .erpui-main-sidebar {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Cụm cấp 2 (module) bên trong nhóm. */
body.edu-compact-theme .erpui-main-sidebar .sidebar-module {
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

body.edu-compact-theme .erpui-main-sidebar .sidebar-module-header {
    min-height: calc(38px * var(--sis-font-scale, 1.17)) !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--edu-menu-text) !important;
    font-size: calc(13.5px * var(--sis-font-scale, 1.17)) !important;
    font-weight: 500 !important;
    gap: 10px !important;
    text-shadow: none !important;
}

body.edu-compact-theme .erpui-main-sidebar .sidebar-module-header i {
    width: 20px !important;
    min-width: 20px !important;
    color: var(--edu-menu-icon) !important;
    font-size: calc(14px * var(--sis-font-scale, 1.17)) !important;
}

body.edu-compact-theme .erpui-main-sidebar .sidebar-module-header:hover,
body.edu-compact-theme .erpui-main-sidebar .sidebar-module[open] > .sidebar-module-header,
body.edu-compact-theme .erpui-main-sidebar .sidebar-module.is-active > .sidebar-module-header {
    background: var(--edu-menu-hover) !important;
    color: var(--edu-menu-text) !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}

/* Mục lá. */
body.edu-compact-theme .erpui-main-sidebar .sidebar-item {
    min-height: calc(36px * var(--sis-font-scale, 1.17)) !important;
    margin: 0 0 1px !important;
    padding: 7px 12px !important;
    border: 0 !important;
    border-left: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--edu-menu-text) !important;
    font-size: calc(13.5px * var(--sis-font-scale, 1.17)) !important;
    font-weight: 400 !important;
    gap: 10px !important;
    box-shadow: none !important;
}

body.edu-compact-theme .erpui-main-sidebar .sidebar-item i {
    width: 18px !important;
    min-width: 18px !important;
    color: var(--edu-menu-icon) !important;
    font-size: calc(13px * var(--sis-font-scale, 1.17)) !important;
}

body.edu-compact-theme .erpui-main-sidebar .sidebar-item:hover {
    background: var(--edu-menu-hover) !important;
    color: var(--edu-menu-text) !important;
    border-left: 0 !important;
    box-shadow: none !important;
}

body.edu-compact-theme .erpui-main-sidebar .sidebar-item.is-active,
body.edu-compact-theme .erpui-main-sidebar .sidebar-item.active,
body.edu-compact-theme .erpui-main-sidebar .sidebar-item[aria-current="page"] {
    background: var(--edu-menu-active) !important;
    color: var(--edu-menu-active-border) !important;
    border-left: 0 !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}

body.edu-compact-theme .erpui-main-sidebar .sidebar-item.is-active i,
body.edu-compact-theme .erpui-main-sidebar .sidebar-item.active i,
body.edu-compact-theme .erpui-main-sidebar .sidebar-item[aria-current="page"] i,
body.edu-compact-theme .erpui-main-sidebar .sidebar-item.is-active span,
body.edu-compact-theme .erpui-main-sidebar .sidebar-item[aria-current="page"] span {
    color: var(--edu-menu-active-border) !important;
}

/* Nhãn "Mới" giữ nguyên kiểu chữ đỏ, không biến thành viên xám. */
body.edu-compact-theme .erpui-main-sidebar .sidebar-badge--new {
    background: transparent !important;
    color: #dc2626 !important;
    font-weight: 700 !important;
    padding: 0 2px !important;
}

/* ── 4 · Thanh trên ──────────────────────────────────────────────────────
   Bản gốc cao 72px, nền trắng, viền dưới mảnh, các nút là ô vuông/tròn viền
   gray-200 cỡ 42px. */

body.edu-compact-theme .app-topbar,
body.edu-compact-theme .sis-topbar {
    min-height: calc(72px * var(--sis-font-scale, 1.17)) !important;
    height: 72px !important;
    padding: 0 20px !important;
    background: #ffffff !important;
    border-bottom: 1px solid var(--ta-gray-200) !important;
    box-shadow: none !important;
    gap: 12px !important;
}

/* Nút thu gọn menu: chỉ còn biểu tượng, KHÔNG khung viền trắng.
   Bản gốc TailAdmin bọc nút này trong khung, nhưng ở đây khung trắng trên nền
   thanh trên cũng trắng nên chỉ tạo ra một ô rỗng nhìn như lỗi. */
body.edu-compact-theme .topbar-icon-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: calc(42px * var(--sis-font-scale, 1.17)) !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--ta-gray-500) !important;
    font-size: calc(18px * var(--sis-font-scale, 1.17)) !important;
}

body.edu-compact-theme .topbar-icon-btn:hover {
    background: var(--ta-gray-100) !important;
    color: var(--ta-gray-700) !important;
}

/* Chuông thông báo là nút TRÒN trong bản gốc, kèm chấm cảnh báo cam. */
body.edu-compact-theme .sis-topbar-menu__button {
    border-radius: 999px !important;
    position: relative !important;
}

body.edu-compact-theme .sis-topbar-menu__button .sis-dot {
    position: absolute !important;
    top: 7px !important;
    right: 8px !important;
    width: 8px !important;
    height: 8px !important;
    border: 2px solid #ffffff !important;
    border-radius: 999px !important;
    background: #f79009 !important;
}

body.edu-compact-theme .sis-topbar__system {
    /* Ten truong lay dung mau chinh cua logo (#118F91 - mau khien) va to hon
       mot nac 10% so voi thang chu chung. */
    color: #118F91 !important;
    font-size: calc(14px * 1.1 * var(--sis-font-scale, 1.17)) !important;
    font-weight: 700 !important;
}

body.edu-compact-theme .sis-topbar__module,
body.edu-compact-theme .sis-topbar__user-role {
    color: var(--ta-gray-500) !important;
    font-size: calc(12px * var(--sis-font-scale, 1.17)) !important;
    font-weight: 400 !important;
}

body.edu-compact-theme .sis-topbar__user-name {
    color: var(--ta-gray-800) !important;
    font-size: calc(14px * var(--sis-font-scale, 1.17)) !important;
    font-weight: 500 !important;
}

body.edu-compact-theme .sis-topbar__avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 999px !important;
    background: var(--ta-brand-50) !important;
    color: var(--ta-brand) !important;
    font-size: calc(15px * var(--sis-font-scale, 1.17)) !important;
    font-weight: 600 !important;
}

body.edu-compact-theme .sis-topbar__user {
    gap: 10px !important;
    padding: 4px 6px !important;
    border-radius: 999px !important;
}

body.edu-compact-theme .sis-topbar__user:hover {
    background: var(--ta-gray-100) !important;
}

body.edu-compact-theme .sis-topbar__chevron {
    color: var(--ta-gray-400) !important;
    font-size: calc(12px * var(--sis-font-scale, 1.17)) !important;
}

/* Bảng thả xuống: bo 12px, viền mảnh, bóng nhẹ. */
body.edu-compact-theme .sis-dropdown {
    border: 1px solid var(--ta-gray-200) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 16px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .03) !important;
    padding: 6px !important;
}

body.edu-compact-theme .sis-dropdown__item {
    border-radius: 8px !important;
    font-size: calc(14px * var(--sis-font-scale, 1.17)) !important;
}

/* ── 5 · Vỏ nội dung ─────────────────────────────────────────────────────
   Bản gốc chỉ có MỘT hàng: tiêu đề trang, rồi tới nội dung. Hệ cũ xếp chồng
   breadcrumb có nền, dải "menu trail" do JS sinh, và một hộp xám tiêu đề. */

body.edu-compact-theme .erpui-menu-trail {
    display: none !important;
}

body.edu-compact-theme .app-breadcrumb,
body.edu-compact-theme .sis-breadcrumb,
body.edu-compact-theme .breadcrumb {
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 0 6px !important;
    border: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ta-gray-500) !important;
    font-size: calc(13px * var(--sis-font-scale, 1.17)) !important;
}

body.edu-compact-theme .sis-page-header,
body.edu-compact-theme .app-page-header,
body.edu-compact-theme .content-header {
    margin: 0 0 22px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.edu-compact-theme .sis-page-header__title,
body.edu-compact-theme .app-page-header__title,
body.edu-compact-theme .content-header h1 {
    color: var(--ta-gray-800) !important;
    font-size: calc(20px * var(--sis-font-scale, 1.17)) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

body.edu-compact-theme .sis-page-header__description,
body.edu-compact-theme .app-page-header__description {
    color: var(--ta-gray-500) !important;
    font-size: calc(14px * var(--sis-font-scale, 1.17)) !important;
}

/* ── 6 · Thẻ ─────────────────────────────────────────────────────────────
   Công thức thẻ của TailAdmin: bo 2xl (16px), viền gray-200, nền trắng,
   KHÔNG đổ bóng. Bộ da cũ bo 6px kèm bóng — đó là nét "hệ cũ" rõ nhất còn
   sót trong vùng nội dung. */

body.edu-compact-theme .card,
body.edu-compact-theme .panel,
body.edu-compact-theme .box,
body.edu-compact-theme .sis-card,
body.edu-compact-theme .sis-form-section,
body.edu-compact-theme .sis-table-wrap,
body.edu-compact-theme .portal-card,
body.edu-compact-theme .portal-section,
body.edu-compact-theme .fp-card,
body.edu-compact-theme .faculty-card,
body.edu-compact-theme .hssv-card,
body.edu-compact-theme .tdash-card,
body.edu-compact-theme .spec-card,
body.edu-compact-theme .spec-kpi,
body.edu-compact-theme .legal-card,
body.edu-compact-theme .sis-backup-card,
body.edu-compact-theme .wbp-card {
    border: 1px solid var(--ta-gray-200) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.edu-compact-theme .card-header,
body.edu-compact-theme .panel-heading,
body.edu-compact-theme .box-header,
body.edu-compact-theme .sis-card__header,
body.edu-compact-theme .sis-form-section__header {
    padding: 18px 20px !important;
    border-color: var(--ta-gray-200) !important;
    background: transparent !important;
    border-radius: 16px 16px 0 0 !important;
}

body.edu-compact-theme .card-body,
body.edu-compact-theme .panel-body,
body.edu-compact-theme .box-body,
body.edu-compact-theme .sis-card__body,
body.edu-compact-theme .sis-form-section__body {
    padding: 20px !important;
}

/* Dải thanh công cụ trên bảng: cùng công thức thẻ. */
body.edu-compact-theme .page-action-strip,
body.edu-compact-theme .sis-toolbar,
body.edu-compact-theme .app-toolbar,
body.edu-compact-theme .action-toolbar {
    padding: 12px 16px !important;
    margin-bottom: 20px !important;
    border: 1px solid var(--ta-gray-200) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

/* ── 7 · Bảng ────────────────────────────────────────────────────────────
   Bản gốc: tiêu đề cột chữ xám nhạt trên nền gray-50, chỉ kẻ ngang. */

body.edu-compact-theme .table > thead > tr > th,
body.edu-compact-theme table > thead > tr > th {
    padding: 12px 16px !important;
    background: var(--ta-gray-50) !important;
    border-bottom: 1px solid var(--ta-gray-200) !important;
    border-top: 0 !important;
    color: var(--ta-gray-500) !important;
    font-weight: 500 !important;
}

body.edu-compact-theme .table > tbody > tr > td,
body.edu-compact-theme table > tbody > tr > td {
    padding: 12px 16px !important;
    border-top: 1px solid var(--ta-gray-200) !important;
    color: var(--ta-gray-700) !important;
}

body.edu-compact-theme .table > tbody > tr:hover > td {
    background: var(--ta-gray-25) !important;
}

/* ── 8 · Nút và ô nhập ───────────────────────────────────────────────────
   TailAdmin bo 8px cho cả hai, nút chính dùng brand-500, ô nhập focus có
   vòng sáng 4px thay vì chỉ đổi màu viền. */

body.edu-compact-theme .btn {
    padding: 9px 16px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

body.edu-compact-theme .btn-primary {
    background: var(--ta-brand) !important;
    border-color: var(--ta-brand) !important;
    color: #ffffff !important;
}

body.edu-compact-theme .btn-primary:hover,
body.edu-compact-theme .btn-primary:focus {
    background: var(--ta-brand-hover) !important;
    border-color: var(--ta-brand-hover) !important;
}

body.edu-compact-theme .btn-default,
body.edu-compact-theme .btn-secondary {
    background: #ffffff !important;
    border-color: var(--ta-gray-300) !important;
    color: var(--ta-gray-700) !important;
}

body.edu-compact-theme .btn-default:hover,
body.edu-compact-theme .btn-secondary:hover {
    background: var(--ta-gray-50) !important;
}

body.edu-compact-theme .form-control,
body.edu-compact-theme .form-select,
body.edu-compact-theme select.form-control,
body.edu-compact-theme textarea.form-control {
    min-height: calc(42px * var(--sis-font-scale, 1.17)) !important;
    padding: 9px 14px !important;
    border: 1px solid var(--ta-gray-300) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: var(--ta-gray-800) !important;
    box-shadow: none !important;
}

body.edu-compact-theme .form-control:focus,
body.edu-compact-theme .form-select:focus {
    border-color: var(--ta-brand) !important;
    box-shadow: 0 0 0 4px rgba(70, 95, 255, .12) !important;
    outline: 0 !important;
}

/* select2 dùng ở 46 màn — kéo về cùng hình dạng ô nhập. */
body.edu-compact-theme .select2-container--default .select2-selection--single,
body.edu-compact-theme .select2-container--default .select2-selection--multiple {
    min-height: calc(42px * var(--sis-font-scale, 1.17)) !important;
    border: 1px solid var(--ta-gray-300) !important;
    border-radius: 8px !important;
}

/* ── 9 · Chế độ tối ──────────────────────────────────────────────────────
   Bộ chuyển nền tối đã có sẵn (Alpine store `theme`), gắn `.dark` lên <html>. */

html.dark body.edu-compact-theme,
html[data-theme='dark'] body.edu-compact-theme {
    --ta-gray-25: #161d29;
    --ta-gray-50: #101828;
    --ta-gray-100: #1d2939;
    --ta-gray-200: #344054;
    --ta-gray-300: #475467;
    --ta-gray-400: #667085;
    --ta-gray-500: #98a2b3;
    --ta-gray-700: #d0d5dd;
    --ta-gray-800: #f2f4f7;
    --ta-brand-50: rgba(70, 95, 255, .12);
}

html.dark body.edu-compact-theme .app-sidebar,
html.dark body.edu-compact-theme .erpui-main-sidebar,
html.dark body.edu-compact-theme .app-topbar,
html.dark body.edu-compact-theme .sis-topbar,
html.dark body.edu-compact-theme .card,
html.dark body.edu-compact-theme .panel,
html.dark body.edu-compact-theme .sis-card,
html.dark body.edu-compact-theme .tdash-card {
    background: #1a2231 !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   Nội dung phải giãn hết bề ngang

   Nguyên nhân co lại nằm ở chính `sis-fullwidth.css` — tệp sinh ra để ÉP full
   width. Nó đặt lên `.app-page-shell`:

       align-items: start !important;

   Ý đồ ban đầu là cho lưới (grid): ở đó `align-items` chỉnh theo TRỤC DỌC,
   nên `start` chỉ khiến thẻ không bị kéo cao bằng nhau — vô hại.

   Nhưng `sis-data-workspace.css` biến chính phần tử đó thành FLEX CỘT:

       .sis-data-workspace-shell.sis-standard-body { display: flex; flex-direction: column; }

   Trong flex cột, trục chéo là TRỤC NGANG. `align-items: start` lúc này bắt
   các khối con co theo bề rộng nội dung thay vì giãn ra — nên trang chỉ chiếm
   khoảng nửa màn hình và chừa trống hẳn bên phải.

   Lớp `sis-standard-body` do JS gắn sau khi tải trang, nên lỗi chỉ xuất hiện
   ở các màn được "chuẩn hóa thân trang" — đó là lý do bảng điều hành không
   dính còn màn danh sách thì dính.
   ══════════════════════════════════════════════════════════════════════════ */

.global-layout .app-page-shell.sis-standard-body,
.global-layout .app-content > main.sis-standard-body {
    align-items: stretch !important;
}

.global-layout .app-page-shell.sis-standard-body > *,
.global-layout .app-content > main.sis-standard-body > * {
    max-width: none !important;
    width: 100% !important;
}

/* ---------------------------------------------------------------
| --- thuong hieu menu trai + ten truong tren thanh tren ---
|
| Menu trai: logo va ten du an "Vabis" di lien nhau, ca cum can giua.
| Nut thu gon phai tach ra dinh vi tuyet doi o mep phai, neu khong no chiem
| cho trong hang flex va keo cum logo lech sang trai.
+ --------------------------------------------------------------- */
body.edu-compact-theme .sidebar-logo {
    position: relative !important;
    justify-content: center !important;
}

body.edu-compact-theme .sidebar-logo__home {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
}

body.edu-compact-theme .sidebar-logo__name {
    color: var(--edu-menu-text) !important;
    font-size: calc(18px * var(--sis-font-scale, 1.17)) !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

body.edu-compact-theme .sidebar-collapse-btn {
    position: absolute !important;
    top: 50% !important;
    right: 16px !important;
    transform: translateY(-50%) !important;
    margin-left: 0 !important;
}

/* Menu thu gon con 90px: giau chu, chi chua vua logo va nut mo lai. */
body.edu-compact-theme .app-wrapper.sidebar-collapsed .sidebar-logo__name {
    display: none !important;
}

/*
| Thanh tren: bo nut ba gach, lay cho cho ten truong.
|
| Ten truong von da co san trong markup nhung bi
| `.global-layout .sis-topbar__brand { display: none }` trong goi Vite giau di.
| Nut ba gach o day la ban desktop (topbar-sidebar-toggle) va thua: menu trai da
| co san nut mui ten thu gon/mo lai ngay trong no.
| KHONG dung toi .topbar-mobile-menu-toggle — tren dien thoai do la loi duy nhat
| de mo menu.
*/
body.edu-compact-theme .topbar-sidebar-toggle {
    display: none !important;
}

body.edu-compact-theme .global-layout .topbar-brand,
body.edu-compact-theme .global-layout .sis-topbar__brand,
body.edu-compact-theme .sis-topbar__brand {
    display: flex !important;
}

/* ---------------------------------------------------------------
| --- bo khoang trong duoi breadcrumb ---
|
| Duoi dai breadcrumb tung co ~41px trang truot tren MOI trang. Khong phai mot
| khoi rong nao, ma la BA lop long nhau cung an mot khai bao trong goi Vite:
|   .app-content, .global-layout main, ..., .container-fluid { padding: 10px 12px !important }
| Lop vo dem 10px, lop main dem 10px, roi container cua trang dem tiep 10px.
|
| Vi sao phai boc trong @layer base:
| Khai bao tren nam trong `@layer components`. Voi khai bao !important, thu tu
| lop bi DAO NGUOC — lop khai bao TRUOC thang, va !important khong thuoc lop nao
| lai la yeu nhat. Nen mot rule !important binh thuong o day thua, du selector
| cu the hon va nap sau. `base` dung truoc `components` nen thang duoc.
+ --------------------------------------------------------------- */
@layer base {
    body.edu-compact-theme .app-content {
        padding-top: 0 !important;
    }

    body.edu-compact-theme .app-content > main {
        padding-top: 0 !important;
    }

    /* Container cua tung trang cung bo dem tren; khoang tho duy nhat con lai la
       margin duoi cua breadcrumb ngay ben duoi day. */
    body.edu-compact-theme .app-content > main > :where(.container-fluid, .container, .page-container, .module-page) {
        padding-top: 0 !important;
    }

    /* Khoang tho DUY NHAT giua breadcrumb va noi dung. Dat o day de moi trang
       giong nhau, ke ca trang khong co container rieng (neu khong chu se dinh
       sat vao breadcrumb). */
    body.edu-compact-theme :where(.app-breadcrumb, .sis-breadcrumb) {
        margin-bottom: 8px !important;
    }
}