@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap");
:root {
    
}

:root,
[data-bs-theme="light"] {
    --bs-primary: var(--main-primary);
    --bs-primary-rgb: var(--main-primary-rgb);
    --bs-secondary: var(--main-secondary);
    --bs-secondary-rgb: var(--main-secondary-rgb);
    --bs-link-color: var(--main-primary);
    --bs-link-color-rgb: var(--main-primary-rgb);
    --bs-link-hover-color: var(--main-hover);
    /* Không gán --bs-body-bg = --main-body-bg: Bootstrap lấy biến này làm nền cho ô nhập,
       select, bảng, hộp thoại, menu thả xuống... nên cả trang sẽ xám theo. Nền xám chỉ
       đặt cho body ở dưới, các thành phần giữ nền trắng. */
    --bs-body-color: var(--main-ink);
    --bs-border-color: var(--main-line);
    --bs-border-radius: var(--main-radius);
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: 1rem;
}

html,
body {
    min-height: 100%;
}

body {
    background-color: var(--main-body-bg);
    -webkit-font-smoothing: antialiased;
}


/* Layout -------------------------------------------------------------------- */

.ctt-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.ctt-main {
    flex: 1 0 auto;
    padding-block: 1rem 2.5rem;
}


/* =============================================================================
   Nội dung trang (RenderBody)
   Hơn trăm trang sinh viên được port từ bản Bootstrap 3 nên cùng một bộ khung:
   thanh đường dẫn #breadcumb làm tiêu đề trang, các khối .row.bg-white / .row.news-listing
   làm thân trang, bảng .table-condensed, lớp cũ btn-default / panel / control-label...
   Làm đẹp tập trung ở đây theo đúng khung đó thay vì sửa từng trang.
   Mọi luật gói trong .ctt-noidung để không lan sang khu quản trị.
   ============================================================================= */

/* Thẻ nội dung: tách các khối xếp sát nhau thành từng thẻ trắng, cách nhau, bo góc, bóng nhẹ.
   .news-listing là khối thân trang không gắn bg-white nên trước đây nằm trơ trên nền xám. */
.ctt-noidung > .row.bg-white,
.ctt-noidung > .row.news-listing {
    margin-bottom: 1rem;
    padding-block: 1rem;
    background-color: #fff;
    border-radius: var(--main-radius);
    box-shadow: var(--main-shadow);
}

/* Thanh đường dẫn = tiêu đề trang: mục cuối (tên trang) in đậm, vạch màu chính bên trái. */
.ctt-noidung #breadcumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0;
    margin-bottom: 1rem;
    padding: 0.875rem 1.25rem !important;
    background-color: #fff;
    border-left: 4px solid var(--main-primary);
    border-radius: var(--main-radius);
    box-shadow: var(--main-shadow);
    list-style: none;
}

    .ctt-noidung #breadcumb > li,
    .ctt-noidung #breadcumb > li a,
    .ctt-noidung #breadcumb > li span {
        font-size: 0.9rem;
        color: var(--main-muted);
    }

    .ctt-noidung #breadcumb a {
        padding: 0;
        text-decoration: none;
    }

        .ctt-noidung #breadcumb a:hover {
            color: var(--main-primary);
        }

    /* Mục cuối là tên trang đang xem */
    .ctt-noidung #breadcumb > li:last-child,
    .ctt-noidung #breadcumb > li:last-child a,
    .ctt-noidung #breadcumb > li:last-child span {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--main-primary);
    }

    /* Bootstrap chỉ chèn dấu ngăn cho .breadcrumb-item, trang cũ dùng <li> trơn thì tự chèn */
    .ctt-noidung #breadcumb > li + li::before {
        content: "\203A";
        float: none;
        padding-inline: 0.5rem;
        color: var(--main-muted);
        font-weight: 400;
    }

.ctt-noidung .breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
}

/* Bảng ------------------------------------------------------------------------ */

.ctt-noidung .table {
    --bs-table-striped-bg: rgba(var(--main-primary-rgb), 0.035);
    --bs-table-hover-bg: rgba(var(--main-primary-rgb), 0.07);
    margin-bottom: 0;
}

    .ctt-noidung .table > :not(caption) > * > * {
        padding: 0.625rem 0.75rem;
        vertical-align: middle;
        font-size: 0.875rem;
    }

    /* _ThemeColors ép * { font-size: 16px } nên chữ trong ô (span, a, b...) không ăn theo cỡ của ô.
       Chọn theo tên thẻ (độ ưu tiên 0,0,1) để vẫn nhường cho lớp riêng như .badge, .btn-sm. */
    :where(.ctt-noidung .table th, .ctt-noidung .table td) :is(span, a, b, strong, em, i, u, div, p, label, font) {
        font-size: inherit;
    }

.ctt-noidung .table-condensed > :not(caption) > * > * {
    padding: 0.4rem 0.5rem;
}

.ctt-noidung .table-responsive {
    border-radius: 0.5rem;
}

.ctt-noidung .table > thead th {
    border-color: rgba(255, 255, 255, 0.25);
}

/* Hàng tiêu đề nằm trong tbody (<tr class="table-header"><th>...) — lớp này vốn ở main.css không
   được nạp nên trước đây hàng tiêu đề lẫn vào dữ liệu. Tô như thead, bỏ lớp sọc và hover. */
.ctt-noidung .table tr.table-header > th,
.ctt-noidung .table tr.table-header > td {
    --bs-table-bg: var(--main-primary);
    --bs-table-color: #fff;
    --bs-table-bg-type: transparent;
    --bs-table-bg-state: transparent;
    color: #fff;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    border-color: rgba(255, 255, 255, 0.25);
}

/* Tiêu đề từng mục trong trang */
.ctt-tieude-muc {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 1.75rem 0 0.875rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--main-ink);
}

    .ctt-tieude-muc:first-child {
        margin-top: 0;
    }

/* Ô nền của biểu tượng tiêu đề mục. Bọc bằng span chứ không tạo kiểu thẳng cho <i>: layout sinh viên
   nạp Font Awesome dạng JS nên <i> bị thay bằng <svg> mang sẵn width 1em của FA, thêm padding vào
   là vùng vẽ bằng 0 và hình phình ra đè cả trang. */
.ctt-tieude-muc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background-color: var(--main-primary-light);
    color: var(--main-primary);
}

    .ctt-tieude-muc-icon > i,
    .ctt-tieude-muc-icon > svg {
        font-size: 0.95rem;
    }

/* Ô chỉ số (điểm TBC, tín chỉ tích lũy...) — con số sinh viên cần nhìn thấy ngay */
.ctt-chiso {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .ctt-chiso {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.ctt-chiso-o {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.875rem 1rem;
    background-color: #fff;
    border: 1px solid var(--main-line);
    border-radius: var(--main-radius);
}

.ctt-chiso-o--noibat {
    background-color: var(--main-primary);
    border-color: var(--main-primary);
}

.ctt-chiso-nhan {
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--main-muted);
}

.ctt-chiso-giatri {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--main-primary);
    overflow-wrap: anywhere;
}

/* Màn hẹp hai ô một hàng, chữ số to quá thì mã sinh viên 10 ký tự bị ngắt dòng */
@media (max-width: 575.98px) {
    .ctt-chiso-giatri {
        font-size: 1.15rem;
    }
}

.ctt-chiso-o--noibat .ctt-chiso-nhan {
    color: rgba(255, 255, 255, 0.8);
}

.ctt-chiso-o--noibat .ctt-chiso-giatri {
    color: #fff;
}

/* Dòng chú thích nhỏ dưới một khối */
.ctt-ghichu,
.ctt-ghichu * {
    font-size: 0.8125rem;
}

.ctt-ghichu {
    margin: 0.75rem 0 0;
    color: var(--main-muted);
}

/* Accordion (bảng điểm theo học kỳ...) — mỗi mục là một thẻ riêng */
.ctt-noidung .accordion {
    --bs-accordion-border-color: var(--main-line);
    --bs-accordion-border-radius: var(--main-radius);
    --bs-accordion-inner-border-radius: calc(var(--main-radius) - 1px);
    --bs-accordion-btn-color: var(--main-ink);
    --bs-accordion-active-bg: var(--main-primary-light);
    --bs-accordion-active-color: var(--main-primary);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(var(--main-primary-rgb), 0.2);
}

    .ctt-noidung .accordion .accordion-item {
        margin-bottom: 0.75rem;
        overflow: hidden;
        border: 1px solid var(--main-line);
        border-radius: var(--main-radius);
    }

    .ctt-noidung .accordion .accordion-button {
        font-size: 0.95rem;
        font-weight: 600;
    }

/* Card / panel (panel là của Bootstrap 3, trang cũ còn dùng) */
.ctt-noidung .card,
.ctt-noidung .panel {
    margin-bottom: 1rem;
    background-color: #fff;
    border: 1px solid var(--main-line);
    border-radius: var(--main-radius);
    box-shadow: var(--main-shadow);
    overflow: hidden;
}

.ctt-noidung .card-header,
.ctt-noidung .panel-heading {
    padding: 0.75rem 1rem;
    background-color: var(--main-primary-light);
    border-bottom: 1px solid var(--main-line);
    color: var(--main-primary);
    font-weight: 600;
}

.ctt-noidung .panel-body {
    padding: 1rem;
}

/* Lớp cũ của Bootstrap 3 không còn trong Bootstrap 5 -------------------------- */

.ctt-noidung .btn-default {
    --bs-btn-color: var(--main-ink);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #cfd8e3;
    --bs-btn-hover-color: var(--main-primary);
    --bs-btn-hover-bg: var(--main-primary-light);
    --bs-btn-hover-border-color: rgba(var(--main-primary-rgb), 0.35);
    --bs-btn-active-color: var(--main-primary);
    --bs-btn-active-bg: var(--main-primary-light);
    --bs-btn-active-border-color: rgba(var(--main-primary-rgb), 0.35);
    --bs-btn-focus-shadow-rgb: var(--main-primary-rgb);
}

.ctt-noidung .form-group {
    margin-bottom: 0.75rem;
}

.ctt-noidung .control-label {
    font-weight: 500;
    color: var(--main-ink);
}

.ctt-noidung .text-main {
    color: var(--main-primary) !important;
}

.ctt-noidung .pull-right {
    float: right !important;
}

/* Nhãn trạng thái kiểu Bootstrap 3 (label label-success...) — 21 trang còn dùng, dựng lại thành
   badge. Chỉ nhận khi có kèm label-*: vài trang dùng "label" trơn làm lớp chữ, không được tô nền. */
.ctt-noidung .label:is(.label-default, .label-primary, .label-success, .label-info, .label-warning, .label-danger) {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
}

.ctt-noidung .label-default { background-color: #6c757d; }
.ctt-noidung .label-primary { background-color: var(--main-primary); }
.ctt-noidung .label-success { background-color: var(--bs-success); }
.ctt-noidung .label-info { background-color: var(--bs-info); color: #052c65 !important; }
.ctt-noidung .label-warning { background-color: var(--bs-warning); color: #332701 !important; }
.ctt-noidung .label-danger { background-color: var(--bs-danger); }

/* Badge trong ô bảng: .badge tính cỡ theo em của ô (0.875rem) nên còn quá nhỏ */
.ctt-noidung .table .badge {
    font-size: 0.75rem;
}

/* Ô chọn nằm trong bảng nhiều cột bị ép còn vài chục px, chữ lựa chọn không đọc được —
   giữ tối thiểu cho bảng cuộn ngang thay vì bóp ô */
.ctt-noidung .table select {
    min-width: 12rem;
}

/* Thanh hành động dính ngay dưới cụm header (tiêu đề mục + nút Đăng ký...) khi cuộn danh sách dài.
   --sticky-header-h do _MasterSinhVien đo từ .ctt-thanhtren; thiếu biến thì dính sát mép trên. */
.ctt-thanh-hanhdong {
    position: sticky;
    top: var(--sticky-header-h, 0px);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    /* Tràn ra bằng lề âm của .row bên dưới để bảng cuộn qua không lộ mép hai bên */
    margin: 1.75rem -0.75rem 0.875rem;
    padding: 0.625rem 0.75rem;
    background-color: #fff;
    border-bottom: 1px solid var(--main-line);
}

    .ctt-thanh-hanhdong .ctt-tieude-muc {
        margin: 0;
    }

/* Thông báo chặn xem lịch thi khi còn nợ học phí (Views/Shared/_ThongBaoNoHocPhi) — trang Lịch thi
   và widget lịch thi của DashBoard. Cỡ chữ đặt trên từng phần tử vì * { font-size: 16px }. */
.ctt-no-hoc-phi {
    max-width: 34rem;
    margin: 0 auto;
    padding: 1.75rem 1rem;
    text-align: center;
}

.ctt-no-hoc-phi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.75rem;
    border-radius: 50%;
    background-color: var(--bs-danger-bg-subtle);
    color: var(--bs-danger);
}

    .ctt-no-hoc-phi-icon > i,
    .ctt-no-hoc-phi-icon > svg {
        font-size: 1.5rem;
    }

.ctt-no-hoc-phi-tieude {
    margin-bottom: 0.375rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--main-ink);
}

.ctt-no-hoc-phi-noidung {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--main-muted);
}

.ctt-no-hoc-phi-sotien {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    padding: 0.875rem 1rem;
    background-color: var(--bs-danger-bg-subtle);
    border: 1px solid var(--bs-danger-border-subtle);
    border-radius: var(--main-radius);
}

    .ctt-no-hoc-phi-sotien > span {
        font-size: 0.8125rem;
        color: var(--bs-danger-text-emphasis);
    }

    .ctt-no-hoc-phi-sotien > strong {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.2;
        color: var(--bs-danger);
    }

.ctt-no-hoc-phi-nut {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

/* Vài chục chỗ còn gắn cứng font Times New Roman bằng style inline — đưa về font chung của cổng */
.ctt-noidung [style*="Times New Roman"] {
    font-family: inherit !important;
}

/* Màn hẹp container tràn hết chiều ngang, thẻ chạm mép màn hình nên bỏ bo góc. */
@media (max-width: 575.98px) {
    .ctt-noidung > .row.bg-white,
    .ctt-noidung > .row.news-listing,
    .ctt-noidung #breadcumb {
        border-radius: 0;
    }

    .ctt-noidung #breadcumb {
        padding: 0.75rem 1rem !important;
    }
}


/* Navbar ------------------------------------------------------------------- */

.ctt-navbar {
    /* Nằm ngay dưới thanh thương hiệu cùng màu nên phủ thêm một lớp sẫm cho tách bạch. */
    box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.1);
    --bs-navbar-color: rgba(255, 255, 255, 0.82);
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: #fff;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
    background-color: var(--main-navbar);
    box-shadow: var(--main-shadow);
    min-height: var(--main-navbar-height);
}

    .ctt-navbar .navbar-brand {
        font-weight: 600;
        letter-spacing: 0.01em;
        gap: 0.625rem;
    }

        .ctt-navbar .navbar-brand i {
            font-size: 1.35rem;
            opacity: 0.9;
        }

    /* Khoảng cách giữa các mục menu */
    .ctt-navbar .navbar-nav {
        gap: 0.5rem;
    }

    .ctt-navbar .nav-link {
        --bs-nav-link-padding-x: 0.7rem;
        white-space: nowrap;
        border-radius: 0.5rem;
        font-weight: 500;
        transition: background-color 0.15s ease-in-out;
    }

        .ctt-navbar .nav-link:hover,
        .ctt-navbar .nav-link:focus-visible {
            background-color: var(--main-hover);
            color: #fff;
        }

        .ctt-navbar .nav-link.active,
        .ctt-navbar .nav-link.show,
        .ctt-navbar .show > .nav-link {
            background-color: rgba(255, 255, 255, 0.18);
        }

    .ctt-navbar .navbar-toggler {
        border: 0;
        padding: 0.375rem 0.5rem;
    }

        .ctt-navbar .navbar-toggler:focus {
            box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
        }

    .ctt-navbar .dropdown-menu {
        --bs-dropdown-padding-x: 0.375rem;
        --bs-dropdown-padding-y: 0.375rem;
        --bs-dropdown-item-padding-x: 0.75rem;
        --bs-dropdown-item-padding-y: 0.5rem;
        --bs-dropdown-link-hover-bg: var(--main-primary);
        --bs-dropdown-link-hover-color: #fff;
        --bs-dropdown-link-active-bg: var(--main-primary);
        --bs-dropdown-link-active-color: #fff;
        border: 0;
        border-radius: 0.625rem;
        box-shadow: var(--main-shadow-lg);
    }

    .ctt-navbar .dropdown-item {
        border-radius: 0.375rem;
    }

    /* Khoảng cách giữa các mục menu con */
    .ctt-navbar .dropdown-menu > li + li {
        margin-top: 0.25rem;
    }

    /* Icon menu con tô màu chính, canh thẳng hàng cho chữ đều nhau.
   Khi hover / đang mở thì nền là màu chính nên icon phải ăn theo màu chữ (trắng). */
    .ctt-navbar .dropdown-item i {
        width: 1.15rem;
        text-align: center;
        color: var(--main-primary);
    }

    .ctt-navbar .dropdown-item:hover i,
    .ctt-navbar .dropdown-item:focus i,
    .ctt-navbar .dropdown-item:active i,
    .ctt-navbar .dropdown-item.active i {
        color: inherit;
    }

/* Menu con dài (ví dụ nhóm Đăng ký) thì cho cuộn thay vì tràn khỏi màn hình */
@media (min-width: 1200px) {
    .ctt-navbar .dropdown-menu {
        max-height: min(70vh, 32rem);
        overflow-y: auto;
    }
}

.ctt-navbar-toggler-text {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
}

/* Nút đăng nhập: nền trắng khi nằm trên navbar màu */
.ctt-login-btn {
    --bs-btn-color: var(--main-primary);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: var(--main-hover);
    --bs-btn-hover-bg: #f1f5fb;
    --bs-btn-hover-border-color: #f1f5fb;
    --bs-btn-active-color: var(--main-hover);
    --bs-btn-active-bg: #e8eef8;
    --bs-btn-active-border-color: #e8eef8;
    --bs-btn-focus-shadow-rgb: 255, 255, 255;
    font-weight: 600;
    white-space: nowrap;
}

/* =============================================================================
   Side menu cho màn hình nhỏ (< 1200px)
   Từ 1200px trở lên Bootstrap tự biến khối .offcanvas thành thanh menu ngang,
   nên toàn bộ phần dưới đây chỉ áp dụng cho mobile/tablet.
   ============================================================================= */

@media (max-width: 1199.98px) {
    .ctt-navbar .navbar-toggler {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    .ctt-navbar .ctt-sidemenu {
        --bs-offcanvas-width: min(19rem, 85vw);
        --bs-navbar-color: var(--main-ink);
        --bs-navbar-hover-color: var(--main-primary);
        --bs-navbar-active-color: #fff;
        background-color: #fff;
        color: var(--main-ink);
    }

    .ctt-sidemenu .offcanvas-header {
        gap: 0.75rem;
        padding: 1rem;
        border-bottom: 1px solid var(--main-line);
        background-color: #fff;
    }

    .ctt-sidemenu-logo {
        width: 2.25rem;
        height: 2.25rem;
        object-fit: contain;
        flex-shrink: 0;
    }

    .ctt-sidemenu-title {
        font-size: 0.85rem;
        font-weight: 700;
        line-height: 1.25;
        color: var(--main-primary);
        text-transform: uppercase;
    }

    .ctt-sidemenu .offcanvas-body {
        padding: 0.75rem;
        background-color: #fff;
    }

    .ctt-sidemenu .navbar-nav {
        gap: 0.25rem;
    }

    .ctt-sidemenu .nav-link {
        padding: 0.625rem 0.75rem;
        border-radius: 0.5rem;
        color: var(--main-primary);
        font-weight: 500;
    }

        .ctt-sidemenu .nav-link:hover,
        .ctt-sidemenu .nav-link:focus-visible {
            background-color: var(--main-primary-light);
            color: var(--main-primary);
        }

        .ctt-sidemenu .nav-link.active,
        .ctt-sidemenu .nav-link.show,
        .ctt-sidemenu .show > .nav-link {
            background-color: var(--main-primary);
            color: #fff;
        }

    /* Menu con xổ thẳng trong side menu, không nổi lên như trên desktop */
    .ctt-sidemenu .dropdown-menu {
        margin: 0 0 0 0.75rem;
        padding: 0.125rem 0 0.25rem 0.625rem;
        border: 0;
        border-left: 2px solid var(--main-line);
        border-radius: 0;
        background-color: transparent;
        box-shadow: none;
    }

    .ctt-sidemenu .dropdown-item {
        padding: 0.5rem 0.75rem;
        border-radius: 0.375rem;
        color: var(--main-primary);
        white-space: normal;
        font-weight: 500;
    }

        .ctt-sidemenu .dropdown-item:hover,
        .ctt-sidemenu .dropdown-item:focus {
            background-color: var(--main-primary-light);
            color: var(--main-primary);
        }

        .ctt-sidemenu .dropdown-item.active {
            background-color: var(--main-primary);
            color: #fff;
        }

    .ctt-sidemenu .dropdown-header {
        color: var(--main-muted);
        font-weight: 600;
    }

    /* Chuông thông báo: trong side menu có chữ đi kèm nên số đếm đứng cuối dòng
       thay vì nổi ở góc biểu tượng như trên thanh ngang. */
    .ctt-sidemenu .ctt-noti-toggle {
        gap: 0.5rem;
    }

    .ctt-sidemenu .ctt-noti-badge {
        position: static;
        margin-left: auto;
    }

    .ctt-sidemenu .dropdown-menu {
        background-color: transparent !important;
    }

    .ctt-sidemenu-divider {
        margin: 0.75rem 0;
        border-top: 1px solid var(--main-line);
        opacity: 1;
    }

    /* Phần đăng xuất/đổi mật khẩu trong side menu */
    .ctt-sidemenu-dangxuat {
        padding: 0.75rem;
        border-top: 1px solid var(--main-line);
    }

    .ctt-nut-dangxuat {
        --bs-btn-color: #fff;
        --bs-btn-bg: var(--main-primary);
        --bs-btn-border-color: var(--main-primary);
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: var(--main-hover);
        --bs-btn-hover-border-color: var(--main-hover);
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: var(--main-primary-dark);
        --bs-btn-active-border-color: var(--main-primary-dark);
        --bs-btn-focus-shadow-rgb: var(--main-primary-rgb);
        font-weight: 600;
    }

    /* Trong side menu nền trắng thì nút đăng nhập phải đảo màu và tràn ngang */
    .ctt-sidemenu .ctt-login-btn {
        --bs-btn-color: #fff;
        --bs-btn-bg: var(--main-primary);
        --bs-btn-border-color: var(--main-primary);
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: var(--main-hover);
        --bs-btn-hover-border-color: var(--main-hover);
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: var(--main-primary-dark);
        --bs-btn-active-border-color: var(--main-primary-dark);
        --bs-btn-focus-shadow-rgb: var(--main-primary-rgb);
        display: block;
        margin-top: 0.25rem;
        padding-block: 0.5rem;
    }
}

/* Phần user info trên navbar (dưới xl: hiển thị, từ xl trở lên: ẩn) */
.ctt-navbar-hoso {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
    line-height: 1.25;
}

.ctt-navbar-hoten {
    display: block;
    font-weight: 600;
    color: #fff;
    font-size: 0.9rem;
}

.ctt-navbar-lop {
    display: block;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
}

.ctt-navbar-trangthai {
    color: var(--main-accent);
}

/* Khối user trên navbar (từ xl trở lên) */
.ctt-navbar-nguoidung {
    align-items: center;
}

/* Góc phải thanh menu khi màn < 1200px (cạnh nút MENU): nút Đăng nhập hoặc tài khoản.
   Từ 1200px khối này ẩn (d-xl-none) vì tài khoản đã nằm cuối thanh menu ngang. */
.ctt-navbar-taikhoan {
    min-width: 0;
    margin-left: auto;
}

    .ctt-navbar-taikhoan .dropdown {
        min-width: 0;
    }

.ctt-navbar-taikhoan-nut {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.25rem 0.375rem 0.25rem 0.5rem;
    border-radius: 0.5rem;
    color: #fff;
    text-decoration: none;
}

    .ctt-navbar-taikhoan-nut:hover,
    .ctt-navbar-taikhoan-nut:focus-visible,
    .ctt-navbar-taikhoan-nut.show {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.12);
    }

    /* Khối này chỉ hiện khi menu thu gọn (< 1200px) nên chữ, avatar để cỡ nhỏ gọn cho mọi màn trong khoảng đó */
    .ctt-navbar-taikhoan-nut > i,
    .ctt-navbar-taikhoan-nut > svg {
        flex-shrink: 0;
        font-size: 1.5rem;
        width: 1.5rem;
        height: 1.5rem;
    }

    .ctt-navbar-taikhoan-nut .ctt-navbar-hoso {
        min-width: 0;
        padding: 0;
        text-align: right;
    }

    .ctt-navbar-taikhoan-nut .ctt-navbar-hoten,
    .ctt-navbar-taikhoan-nut .ctt-navbar-lop {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .ctt-navbar-taikhoan-nut .ctt-navbar-hoten {
        font-size: 0.8125rem;
    }

    .ctt-navbar-taikhoan-nut .ctt-navbar-lop {
        font-size: 0.6875rem;
    }

    .ctt-navbar-taikhoan-nut.dropdown-toggle::after {
        flex-shrink: 0;
    }

.ctt-navbar-taikhoan .dropdown-menu {
    min-width: 12rem;
}

    /* Các mục trong menu tài khoản: chữ và biểu tượng nhỏ lại cho cân với khối tên
       (không đặt thì * { font-size: 16px } của _ThemeColors ép 16px) */
    .ctt-navbar-taikhoan .dropdown-item,
    .ctt-navbar-taikhoan .dropdown-item * {
        font-size: 0.875rem;
    }

    .ctt-navbar-taikhoan .dropdown-item {
        padding: 0.45rem 0.75rem;
    }

/* Có chuột (máy tính / laptop cửa sổ < 1200px): rê chuột vào tên là mở menu tài khoản, giống menu ngang,
   không phải bấm. Màn cảm ứng không có hover nên vẫn bấm như cũ. Menu bám sát mép dưới nút (không chừa
   khe) để rê chuột từ tên xuống các mục không bị đóng giữa chừng. */
@media (hover: hover) and (pointer: fine) {
    .ctt-navbar-taikhoan .dropdown:hover > .dropdown-menu {
        display: block;
        top: 100%;
        right: 0;
        left: auto;
        margin-top: 0;
    }
}

/* Nút MENU và khối tài khoản luôn cùng một hàng: tên dài thì cắt "..." chứ không rớt xuống dòng */
@media (max-width: 1199.98px) {
    .ctt-navbar > .container {
        flex-wrap: nowrap;
        gap: 0.75rem;
    }

    .ctt-navbar .navbar-toggler {
        flex-shrink: 0;
    }
}

/* Điện thoại: bỏ chữ "MENU" cạnh biểu tượng ☰ (nút vẫn có aria-label="Menu") để nhường chỗ cho họ tên —
   tên dài như "Nguyễn Phan Thị Thanh Thảo" khỏi bị cắt "..." quá sớm */
@media (max-width: 575.98px) {
    .ctt-navbar-toggler-text {
        display: none;
    }

    .ctt-navbar > .container {
        gap: 0.5rem;
    }

    .ctt-navbar-taikhoan-nut {
        gap: 0.375rem;
    }
}

/* Menu dropdown user */
.ctt-navbar .dropdown-menu {
    --bs-dropdown-link-hover-bg: var(--main-primary);
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-link-active-bg: var(--main-primary);
    --bs-dropdown-link-active-color: #fff;
}


/* Đầu bảng dùng biến bảng của Bootstrap 5 (--bs-table-*) chứ không đè background-color,
   nhờ vậy .table-striped, .table-hover, .table-bordered vẫn hoạt động bình thường.
   Màu lấy từ --main-primary nên đổi màu thương hiệu trong appsettings là bảng đổi theo. */
.table > thead {
    --bs-table-bg: var(--main-primary);
    --bs-table-color: #fff;
    --bs-table-border-color: var(--main-primary);
}

    /* Đầu bảng căn giữa, chữ thường — giống bảng của cổng cũ, dễ đối chiếu cột hơn
   so với kiểu chữ in hoa cỡ nhỏ. */
    .table > thead th {
        font-weight: 600;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
    }

/* Kẻ ô: --main-line quá nhạt nên gần như không nhìn thấy trên nền sọc,
   dùng tông đậm hơn một chút cho ra dạng lưới như bảng của cổng cũ. */
.table {
    --bs-table-border-color: #c9d6d7;
}

/* Nới container -------------------------------------------------------------
   Mặc định của Bootstrap là 1140px (xl) và 1320px (xxl); các trang ở đây nhiều
   bảng rộng nên nới thêm để bớt phải cuộn ngang. main.css nạp sau bootstrap.css
   nên cùng độ ưu tiên là ghi đè được. */

@media (min-width: 1200px) {
    .container {
        max-width: 1240px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1440px;
    }
}


/* Hộp thoại ------------------------------------------------------------------
   Hộp nào tách sẵn phần thân thì đã có lớp modal-dialog-scrollable của Bootstrap
   lo việc cuộn. Hộp gọn không tách thân thì chặn chiều cao ở đây, nếu không trên
   màn hình thấp phần đầu hộp sẽ bị đẩy khuất mà không cuộn tới được. */

.modal-dialog:not(.modal-dialog-scrollable) > .modal-content {
    max-height: calc(100vh - var(--bs-modal-margin) * 2);
    overflow-y: auto;
}

/* Hộp thoại cuộn được mà bên trong còn bọc thêm thẻ form: Bootstrap chỉ xếp
   header - body - footer thành cột khi ba khối đó là con trực tiếp của .modal-content.
   Có form chen giữa thì phần thân không bị chặn chiều cao, nội dung dài bị
   .modal-content cắt mất mà không cuộn tới được. Cho form xếp y như .modal-content
   để mắt xích không đứt. */

.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* =============================================================================
   Các trang đăng nhập
   ============================================================================= */

.ctt-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
    background: var(--main-auth-bg);
    background: linear-gradient(160deg, color-mix(in srgb, var(--main-auth-bg) 55%, #fff) 0%, var(--main-auth-bg) 50%, color-mix(in srgb, var(--main-auth-bg) 55%, #fff) 100%);
}

.ctt-auth-inner {
    width: 100%;
    max-width: 27rem;
    min-width: 0;
}

.ctt-auth-inner--wide {
    max-width: 31rem;
}

.ctt-auth-card {
    width: 100%;
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: var(--main-shadow-lg);
    padding: 2.25rem 2rem;
}

.ctt-auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 1.75rem;
    text-align: center;
}

.ctt-auth-logo-img {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: contain;
    margin-bottom: 0.5rem;
}

.ctt-auth-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.5rem;
    border-radius: 50%;
    background-color: var(--main-primary-light);
    color: var(--main-primary);
    font-size: 1.75rem;
}

.ctt-auth-brand h1 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--main-ink);
    margin: 0;
}

.ctt-auth-brand p {
    color: var(--main-muted);
    font-size: 0.9rem;
    margin: 0;
}

/* Ô chọn đối tượng đăng nhập ------------------------------------------------ */

.ctt-auth-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.ctt-auth-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.375rem 1rem;
    border: 1px solid var(--main-line);
    border-radius: 0.875rem;
    background-color: #fff;
    color: inherit;
    text-align: center;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

    .ctt-auth-option:hover,
    .ctt-auth-option:focus-visible {
        border-color: var(--main-primary);
        box-shadow: 0 0.5rem 1.25rem rgba(var(--main-primary-rgb), 0.14);
        transform: translateY(-2px);
        color: inherit;
    }

.ctt-auth-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.875rem;
    font-size: 1.5rem;
}

.ctt-auth-option-icon--student {
    background-color: var(--main-primary-light);
    color: var(--main-primary);
}

.ctt-auth-option-icon--admin {
    background-color: #fdeceb;
    color: #e03131;
}

.ctt-auth-option-title {
    font-weight: 600;
    color: var(--main-ink);
}

.ctt-auth-option-desc {
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--main-muted);
}

.ctt-auth-footer {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.85rem;
    color: #6b7794;
}

    .ctt-auth-footer a {
        color: #4b587c;
    }

        .ctt-auth-footer a:hover {
            color: var(--main-primary);
        }

@media (max-width: 575.98px) {
    .ctt-auth {
        padding: 0.75rem;
    }

    .ctt-auth-card {
        padding: 1.5rem 1.25rem;
    }

    .ctt-auth-options {
        grid-template-columns: 1fr;
    }
}

/* Ô nhập có icon nằm bên trong --------------------------------------------- */

.ctt-field {
    position: relative;
}

    .ctt-field .form-control {
        padding-left: 2.75rem;
        background-color: #f5f7fc;
        border-color: var(--main-line);
    }

        .ctt-field .form-control:focus {
            background-color: #fff;
        }

        .ctt-field .form-control::placeholder {
            color: #a8b0c8;
        }

.ctt-field-input--action {
    padding-right: 2.75rem;
}

.ctt-field-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa3bf;
    font-size: 0.95rem;
    pointer-events: none;
}

.ctt-field-action {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.25rem 0.5rem;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: #9aa3bf;
    line-height: 1;
}

    .ctt-field-action:hover,
    .ctt-field-action:focus-visible {
        color: var(--main-primary);
    }

/* Form --------------------------------------------------------------------- */

.form-label {
    font-weight: 500;
    color: var(--main-ink);
    margin-bottom: 0.375rem;
}

.form-control,
.form-select {
    padding-block: 0.6rem;
}

/* Luật trên cùng độ ưu tiên, nạp sau bootstrap nên đè luôn padding của cỡ nhỏ/lớn — trả lại cho đúng cỡ */
.form-control-sm,
.form-select-sm {
    padding-block: 0.25rem;
}

.form-control-lg,
.form-select-lg {
    padding-block: 0.5rem;
}

    .form-control:focus,
    .form-select:focus {
        border-color: rgba(var(--main-primary-rgb), 0.45);
        box-shadow: 0 0 0 0.25rem rgba(var(--main-primary-rgb), 0.15);
    }

/* --bs-border-color bị gán --main-line (gần như trắng) nên ô tích chưa chọn gần như vô hình */
.form-check-input {
    border-color: #a3b1bf;
}

.form-check-input:checked {
    background-color: var(--main-primary);
    border-color: var(--main-primary);
}

/* Ô tích trong bảng (cột "Chọn") to hơn cho dễ bấm trên điện thoại */
.ctt-noidung .table .form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0;
    vertical-align: middle;
}

.form-check-input:focus {
    border-color: rgba(var(--main-primary-rgb), 0.45);
    box-shadow: 0 0 0 0.25rem rgba(var(--main-primary-rgb), 0.15);
}

.input-group-text {
    background-color: var(--main-primary-light);
    border-color: var(--bs-border-color);
    color: var(--main-primary);
}

/* Nút ---------------------------------------------------------------------- */

.btn {
    font-weight: 500;
}

.btn-primary {
    --bs-btn-bg: var(--main-primary);
    --bs-btn-border-color: var(--main-primary);
    --bs-btn-hover-bg: var(--main-hover);
    --bs-btn-hover-border-color: var(--main-hover);
    --bs-btn-active-bg: var(--main-primary-dark);
    --bs-btn-active-border-color: var(--main-primary-dark);
    --bs-btn-disabled-bg: var(--main-primary);
    --bs-btn-disabled-border-color: var(--main-primary);
    --bs-btn-focus-shadow-rgb: var(--main-primary-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--main-primary);
    --bs-btn-border-color: var(--main-primary);
    --bs-btn-hover-bg: var(--main-primary);
    --bs-btn-hover-border-color: var(--main-primary);
    --bs-btn-active-bg: var(--main-primary-dark);
    --bs-btn-active-border-color: var(--main-primary-dark);
    --bs-btn-focus-shadow-rgb: var(--main-primary-rgb);
}

/* Nút chính của cổng thông tin. Dùng lớp này cho mọi nút hành động chính
   thay vì tự đặt màu ở từng trang: đổi màu thương hiệu trong appsettings.json
   là mọi nút đổi theo.

       <button class="btn btn-main">Tra cứu</button>

   Bootstrap dựng nút hoàn toàn bằng biến --bs-btn-*, nên ở đây chỉ cần khai đủ
   bộ biến đó là thừa hưởng nguyên hình dáng, kích thước và trạng thái của .btn.
   Khác .btn-primary ở chỗ .btn-primary là lớp có sẵn của Bootstrap được phủ màu,
   còn .btn-main là lớp riêng nên phải khai cả màu chữ và trạng thái tắt. */
.btn-main {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--main-primary);
    --bs-btn-border-color: var(--main-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--main-hover);
    --bs-btn-hover-border-color: var(--main-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--main-primary-dark);
    --bs-btn-active-border-color: var(--main-primary-dark);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--main-primary);
    --bs-btn-disabled-border-color: var(--main-primary);
    --bs-btn-disabled-opacity: .65;
    --bs-btn-focus-shadow-rgb: var(--main-primary-rgb);
}

/* Bản viền của nút chính, dùng cho hành động phụ đứng cạnh .btn-main */
.btn-outline-main {
    --bs-btn-color: var(--main-primary);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--main-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--main-primary);
    --bs-btn-hover-border-color: var(--main-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--main-primary-dark);
    --bs-btn-active-border-color: var(--main-primary-dark);
    --bs-btn-disabled-color: var(--main-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--main-primary);
    --bs-btn-disabled-opacity: .65;
    --bs-btn-focus-shadow-rgb: var(--main-primary-rgb);
}

/* Nút phụ nền trắng viền nhạt, dùng cho nút Trang chủ ở trang đăng nhập */
.ctt-btn-ghost {
    --bs-btn-color: #334155;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #e2e6f0;
    --bs-btn-hover-color: var(--main-ink);
    --bs-btn-hover-bg: #f6f8fc;
    --bs-btn-hover-border-color: #d7dcea;
    --bs-btn-active-color: var(--main-ink);
    --bs-btn-active-bg: #eef1f8;
    --bs-btn-active-border-color: #d7dcea;
    --bs-btn-focus-shadow-rgb: var(--main-primary-rgb);
}

/* Thanh thương hiệu phía trên navbar --------------------------------------- */

.ctt-brandbar {
    background-color: var(--main-navbar);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    padding-block: 0.625rem;
}


/* Ảnh nền dải đầu trang — dùng chung cho khu quản trị và cổng sinh viên. */
.ctt-admin-topbar,
.ctt-brandbar {
    position: relative;
    /* Không đặt overflow: hidden — menu thả xuống của tài khoản nằm trong thanh này. */
    z-index: 20;
}

    .ctt-admin-topbar > *,
    .ctt-brandbar > * {
        position: relative;
        z-index: 1;
    }

.ctt-brandbar,
.ctt-admin-topbar {
    /* Giữ màu nền để lúc ảnh chưa tải xong dải đầu trang không loé trắng. */
    background-color: var(--main-navbar);
    /* Lớp phủ sẫm nằm trên ảnh, giữ cho chữ trắng đọc rõ ở chỗ ảnh sáng nhất. */
    background-image: linear-gradient(rgba(2, 26, 62, 0.14), rgba(2, 26, 62, 0.14)), url("../images/header_background.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%, cover;
}


.ctt-brandbar-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    /* Cộng với padding-block hai bên là vừa 80px. */
    min-height: 3.75rem;
}

/* Khối bên trái: logo và tên phần mềm. */
.ctt-brandbar-hieu {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
    color: #fff;
    text-decoration: none;
}

.ctt-brandbar-logo {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    background-color: #fff;
    border-radius: 50%;
    padding: 0.15rem;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.ctt-brandbar-chu {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.4;
}

.ctt-brandbar-nho {
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.4;
}

.ctt-brandbar-vach {
    align-self: stretch;
    width: 1px;
    margin-block: 0.25rem;
    background-color: rgba(255, 255, 255, 0.4);
}

.ctt-brandbar-lon {
    font-size: clamp(0.95rem, 0.85rem + 0.45vw, 1.1875rem);
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Khối bên phải vạch: tên trường và tên cổng. */
.ctt-brandbar-ten {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    line-height: 1.25;
}

.ctt-brandbar-school,
.ctt-brandbar-portal {
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.ctt-brandbar-school {
    font-size: clamp(0.95rem, 0.85rem + 0.45vw, 1.1875rem);
    color: #fff;
}

.ctt-brandbar-portal {
    font-size: clamp(0.8rem, 0.75rem + 0.3vw, 0.95rem);
    color: rgba(255, 255, 255, 0.92);
}

/* Màn hẹp chỉ giữ khối bên trái, tên trường dài để lại là tràn hàng. */
@media (max-width: 767.98px) {
    .ctt-brandbar-vach,
    .ctt-brandbar-ten {
        display: none;
    }

    .ctt-brandbar-logo {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* Footer ------------------------------------------------------------------- */

.ctt-footer {
    flex-shrink: 0;
    padding-block: 1.5rem;
    background-color: #fff;
    border-top: 3px solid var(--main-primary);
    color: #64748b;
    font-size: 0.875rem;
}

.ctt-footer-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-bottom: 0.5rem;
}

    .ctt-footer-item:last-child {
        margin-bottom: 0;
    }

.ctt-footer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--main-primary-light);
    color: var(--main-primary);
    font-size: 0.75rem;
}

.ctt-footer-label {
    min-width: 5.5rem;
    flex-shrink: 0;
    color: var(--main-ink);
    font-weight: 500;
}

.ctt-footer-value {
    min-width: 0;
    word-break: break-word;
}

    .ctt-footer-value a {
        text-decoration: none;
    }

.ctt-footer-bottom {
    margin-top: 1.25rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--main-line);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
    font-size: 0.8125rem;
}

@media (max-width: 575.98px) {
    .ctt-footer-label {
        min-width: 4.5rem;
    }
}


/* =============================================================================
   Bảng dữ liệu (partial _Table / _TableToolbar / _TablePagination)
   ============================================================================= */

.table-main {
    background-color: #fff;
    border-radius: var(--main-radius);
    box-shadow: var(--main-shadow);
    overflow: hidden;
}

.table-main-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--main-line);
}

.table-main-toolbar-label {
    margin: 0;
    font-size: 0.875rem;
    color: var(--main-muted);
    white-space: nowrap;
}

.table-main-pagesize {
    width: auto;
    min-width: 4.5rem;
}

.table-main-toolbar-info {
    font-size: 0.875rem;
    color: var(--main-muted);
}

.table-main thead th {
    padding: 0.75rem 1rem;
}

.table-main tbody td {
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
}

.table-main-index {
    width: 3.5rem;
}

.table-main-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: inherit;
    text-decoration: none;
}

    .table-main-sort:hover {
        color: var(--main-primary);
    }

.table-main-empty {
    padding-block: 2.5rem;
    color: var(--main-muted);
    text-align: center;
}

    .table-main-empty i {
        margin-bottom: 0.5rem;
        font-size: 1.75rem;
        opacity: 0.45;
    }

.table-main-pagination {
    display: flex;
    justify-content: flex-end;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--main-line);
}

    .table-main-pagination .page-link {
        --bs-pagination-color: var(--main-ink);
        --bs-pagination-hover-color: var(--main-primary);
        --bs-pagination-hover-bg: var(--main-primary-light);
        --bs-pagination-hover-border-color: var(--main-line);
        --bs-pagination-focus-color: var(--main-primary);
        --bs-pagination-focus-bg: var(--main-primary-light);
        --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(var(--main-primary-rgb), 0.2);
        --bs-pagination-active-bg: var(--main-primary);
        --bs-pagination-active-border-color: var(--main-primary);
        --bs-pagination-border-color: var(--main-line);
    }

@media (max-width: 575.98px) {
    .table-main-toolbar {
        justify-content: flex-start;
    }

    .table-main-pagination {
        justify-content: center;
    }

    .table-main thead th,
    .table-main tbody td {
        padding: 0.625rem 0.75rem;
    }
}


/* Theme bootstrap-5 của select2 gắn cứng màu và bo góc của Bootstrap 5.0, nên ô select2
   trông lệch hẳn so với .form-select 5.3 của trang. Kéo hết về biến --bs-* để hai loại ô
   nhìn như nhau: cùng chiều cao, cùng viền, cùng bo góc, cùng vành focus theo màu thương hiệu.
   Layout nạp CSS của select2 và theme SAU app.css, nên mọi selector ở đây thêm "body" phía trước
   cho nặng hơn một bậc — không có nó thì cùng độ ưu tiên, file nạp sau thắng và ô chỉ cao 38px. */
body .select2-container--bootstrap-5 .select2-selection {
    /* app.css nới padding-block của .form-control/.form-select lên .6rem, select2 phải nới theo
       thì ô chọn mới cao bằng ô nhập bên cạnh. */
    min-height: calc(1.5em + 1.2rem + calc(var(--bs-border-width) * 2));
    padding-block: .6rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

body .select2-container--bootstrap-5.select2-container--focus .select2-selection,
body .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: rgba(var(--main-primary-rgb), .45);
    box-shadow: 0 0 0 .25rem rgba(var(--main-primary-rgb), .15);
}

/* Mở xuống dưới thì bo góc dưới phải phẳng để dính liền với danh sách, và ngược lại. */
body .select2-container--bootstrap-5.select2-container--open.select2-container--below .select2-selection {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

body .select2-container--bootstrap-5.select2-container--open.select2-container--above .select2-selection {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

body .select2-container--bootstrap-5.select2-container--disabled .select2-selection {
    color: var(--bs-secondary-color);
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}

/* Padding khớp .form-select (dọc .6rem như app.css nới, ngang .75rem / 2.25rem chừa mũi tên).
   Khai đủ bốn phía ở đây để CDN theme có tải hụt thì ô vẫn đúng cỡ. */
body .select2-container--bootstrap-5 .select2-selection--single {
    padding: .6rem 2.25rem .6rem .75rem;
}

/* select2.min.css (Scripts/select2) nạp sau theme thêm padding-left 8px cho chữ bên trong, làm chữ
   thụt vào so với ô nhập bên cạnh — bỏ đi để chữ thẳng hàng với .form-control. Giữ padding-right
   để chữ dài không chạy đè lên nút xoá (×) khi bật allowClear. */
body .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
}

body .select2-container--bootstrap-5 .select2-selection--multiple {
    padding-top: .6rem;
    padding-bottom: .6rem;
}

body .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
body .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
    line-height: 1.5;
}

body .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--bs-body-color);
}

    body .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
        color: var(--bs-secondary-color);
    }

body .select2-container--bootstrap-5 .select2-dropdown {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: rgba(var(--main-primary-rgb), .45);
    border-radius: var(--bs-border-radius);
}

    body .select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--below {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    body .select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--above {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    /* Ô tìm kiếm trong danh sách cũng kẻ như .form-control cho đồng bộ. */
    body .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
        color: var(--bs-body-color);
        background-color: var(--bs-body-bg);
        border: var(--bs-border-width) solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
    }

        body .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
            border-color: rgba(var(--main-primary-rgb), .45);
            box-shadow: 0 0 0 .25rem rgba(var(--main-primary-rgb), .15);
        }

    body .select2-container--bootstrap-5 .select2-dropdown .select2-results__option--selected,
    body .select2-container--bootstrap-5 .select2-dropdown .select2-results__option--highlighted {
        color: #fff;
        background-color: var(--bs-primary);
    }

/* Chọn nhiều ------------------------------------------------------------------
   select2.min.css (Scripts/select2) nạp sau theme ép danh sách thẻ về inline-block, dòng chữ
   bám baseline nên ô trống dôi 6px so với ô nhập. Trả về flex như theme định, thẻ đã chọn
   thu gọn cao đúng một dòng chữ (1.5rem) và ô gõ tìm nằm nối tiếp sau các thẻ: chưa chọn
   hoặc chọn ít thì ô cao bằng ô nhập, chọn nhiều mới dãn thêm từng dòng. */
body .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.375rem;
    margin: 0;
    padding: 0;
    white-space: normal;
    list-style: none;
}

/* Thẻ đã chọn lấy màu thương hiệu thay vì xám mặc định của theme */
body .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    display: flex;
    align-items: center;
    height: 1.5rem;
    margin: 0;
    padding: 0 0.5rem 0 0.375rem;
    color: var(--main-primary);
    background-color: var(--main-primary-light);
    border: var(--bs-border-width) solid rgba(var(--main-primary-rgb), 0.2);
    border-radius: var(--bs-border-radius-sm);
}

    body .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice,
    body .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice * {
        font-size: 0.875rem;
        line-height: 1.2;
    }

body .select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline {
    flex: 1 1 3rem;
    width: auto;
    min-width: 3rem;
    height: 1.5rem;
}

    body .select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline .select2-search__field {
        height: 1.5rem;
        margin: 0;
    }

/* Danh mục xã tới cả nghìn dòng nên chặn chiều cao lại cho khỏi tràn màn hình */
body .select2-container--bootstrap-5 .select2-dropdown .select2-results__options {
    max-height: 15rem;
}

/* Select2 theme mặc định (select2-container--default) ------------------------------------------
   _MasterSinhVien đặt theme bootstrap-5 làm mặc định, nhưng ô nào lỡ dựng bằng theme mặc định
   (trang tự khởi tạo sớm, script đặt theme không chạy...) thì mặc định cao 28px, viền xám bo 4px,
   lệch hẳn ô nhập bên cạnh. Kẻ lại y như .form-control/.form-select để theme nào cũng khớp.
   Gói trong .ctt-shell để không đụng khu quản trị (tự kẻ select2 riêng). */
.ctt-shell .select2-container--default .select2-selection--single,
.ctt-shell .select2-container--default .select2-selection--multiple {
    min-height: calc(1.5em + 1.2rem + calc(var(--bs-border-width) * 2));
    font-size: 1rem;
    line-height: 1.5;
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.ctt-shell .select2-container--default .select2-selection--single {
    height: auto;
    padding: 0.6rem 2.25rem 0.6rem 0.75rem;
}

    .ctt-shell .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding-left: 0;
        line-height: 1.5;
        color: var(--bs-body-color);
    }

    .ctt-shell .select2-container--default .select2-selection--single .select2-selection__placeholder {
        color: var(--bs-secondary-color);
    }

    /* Mũi tên: đúng hình chevron của .form-select (nhúng thẳng — biến --bs-form-select-bg-img Bootstrap
       chỉ khai trên chính .form-select nên ở đây rỗng), giữa chiều cao ô, cách mép phải như .form-select */
    .ctt-shell .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 0;
        right: 0.75rem;
        width: 16px;
        height: 100%;
        background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat center / 16px 12px;
    }

        .ctt-shell .select2-container--default .select2-selection--single .select2-selection__arrow b {
            display: none;
        }

.ctt-shell .select2-container--default .select2-selection--multiple {
    padding: 0.6rem 0.75rem;
}

    .ctt-shell .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem 0.375rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .ctt-shell .select2-container--default .select2-selection--multiple .select2-selection__choice {
        display: flex;
        align-items: center;
        height: 1.5rem;
        margin: 0;
        padding: 0 0.5rem;
        color: var(--main-primary);
        background-color: var(--main-primary-light);
        border: var(--bs-border-width) solid rgba(var(--main-primary-rgb), 0.2);
        border-radius: var(--bs-border-radius-sm);
    }

        .ctt-shell .select2-container--default .select2-selection--multiple .select2-selection__choice,
        .ctt-shell .select2-container--default .select2-selection--multiple .select2-selection__choice * {
            font-size: 0.875rem;
            line-height: 1.2;
        }

        /* CSS select2 4.1 (nạp trước) đặt nút xoá position: absolute đè lên chữ, bản 4.0.13 nạp sau không gỡ —
           đưa về nằm trong dòng, cách chữ một chút */
        .ctt-shell .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
            position: static;
            margin-right: 0.375rem;
            padding: 0;
            border: 0;
            background: transparent;
            color: inherit;
        }

    .ctt-shell .select2-container--default .select2-selection--multiple .select2-search--inline {
        flex: 1 1 3rem;
        min-width: 3rem;
        height: 1.5rem;
    }

        .ctt-shell .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
            height: 1.5rem;
            margin: 0;
        }

.ctt-shell .select2-container--default.select2-container--focus .select2-selection,
.ctt-shell .select2-container--default.select2-container--open .select2-selection {
    border-color: rgba(var(--main-primary-rgb), 0.45);
    box-shadow: 0 0 0 0.25rem rgba(var(--main-primary-rgb), 0.15);
    outline: 0;
}

.ctt-shell .select2-container--default.select2-container--disabled .select2-selection {
    color: var(--bs-secondary-color);
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}

/* Show loader */
.loader {
    border: 8px solid #f3f3f3;
    border-radius: 50%;
    border-top: 8px solid #20c997;
    width: 60px;
    height: 60px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    margin: 0 auto;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Đăng nhập bằng Google / Microsoft ------------------------------------------ */

.ctt-auth-chia {
    align-items: center;
    color: var(--main-muted);
    display: flex;
    font-size: 0.8125rem;
    gap: 0.75rem;
    margin: 1.25rem 0 1rem;
}

    .ctt-auth-chia::before,
    .ctt-auth-chia::after {
        background-color: var(--main-line);
        content: "";
        flex: 1;
        height: 1px;
    }

.ctt-btn-ngoai {
    align-items: center;
    background-color: #fff;
    border: 1px solid var(--main-line);
    color: var(--main-ink);
    display: flex;
    font-weight: 500;
    justify-content: center;
}

    .ctt-btn-ngoai:hover {
        background-color: var(--main-primary-light);
        border-color: var(--main-primary);
        color: var(--main-primary-dark);
    }

/* =============================================================================
   Khu vực quản trị (Areas/Admin)
   ============================================================================= */

.ctt-admin {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Hàng dưới thanh đầu trang: thanh bên và phần nội dung nằm cạnh nhau. */
.ctt-admin-duoi {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.ctt-admin-sidebar {
    display: flex;
    flex: 0 0 16.25rem;
    min-width: 0;
    flex-direction: column;
    background-color: #fff;
    border-inline-end: 1px solid var(--main-line);
    color: var(--main-ink);
}

/* Hàng nút bung/đóng mọi nhóm, nằm sát trên cùng thanh bên. */
.ctt-admin-nhom-nut {
    display: flex;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--main-line);
}

.ctt-admin-nut-nhom {
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--main-line);
    border-radius: 0.5rem;
    background-color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--main-ink);
}

    .ctt-admin-nut-nhom > i {
        font-size: 0.75rem;
        color: var(--main-muted);
    }

    .ctt-admin-nut-nhom:hover {
        border-color: var(--main-primary);
        background-color: var(--main-primary-light);
        color: var(--main-primary);
    }

        .ctt-admin-nut-nhom:hover > i {
            color: var(--main-primary);
        }

.ctt-admin-nav {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
    overflow-y: auto;
}

    .ctt-admin-nav a {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.625rem 0.75rem;
        border-radius: 0.625rem;
        font-size: 0.9rem;
        font-weight: 500;
        line-height: 1.35;
        color: var(--main-ink);
        text-decoration: none;
    }

        .ctt-admin-nav a > i {
            width: 1.25rem;
            font-size: 0.95rem;
            text-align: center;
            color: var(--main-muted);
        }

        .ctt-admin-nav a:hover {
            background-color: var(--main-primary-light);
            color: var(--main-primary);
        }

            .ctt-admin-nav a:hover > i {
                color: var(--main-primary);
            }

        .ctt-admin-nav a.active {
            background-color: var(--main-primary);
            color: #fff;
            font-weight: 600;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
        }

            .ctt-admin-nav a.active > i {
                color: #fff;
            }

/* Nhóm menu: nút tiêu đề bung/đóng danh sách màn hình nằm bên dưới. */
.ctt-admin-nhom {
    display: flex;
    flex-direction: column;
}

.ctt-admin-nhom-dau {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 0;
    border-radius: 0.625rem;
    background-color: transparent;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: start;
    color: var(--main-ink);
}

    .ctt-admin-nhom-dau > i {
        width: 1.25rem;
        font-size: 0.95rem;
        text-align: center;
        color: var(--main-muted);
    }

    .ctt-admin-nhom-dau:hover {
        background-color: var(--main-primary-light);
        color: var(--main-primary);
    }

        .ctt-admin-nhom-dau:hover > i {
            color: var(--main-primary);
        }

    /* Nhóm chứa màn hình đang mở thì tô đậm để biết mình đang đứng ở đâu. */
    .ctt-admin-nhom-dau.active {
        background-color: var(--main-primary);
        color: #fff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    }

        .ctt-admin-nhom-dau.active > i {
            color: #fff;
        }

    /* Mũi tên đẩy về cuối hàng, xoay theo trạng thái bung/đóng do Bootstrap đặt. */
    .ctt-admin-nhom-dau > .ctt-admin-nhom-mui {
        width: auto;
        margin-inline-start: auto;
        font-size: 0.7rem;
        transition: transform 0.18s ease-in-out;
    }

    .ctt-admin-nhom-dau[aria-expanded="true"] > .ctt-admin-nhom-mui {
        transform: rotate(180deg);
    }

/* Màn hình con thụt vào một nấc, chữ nhỏ hơn tiêu đề nhóm. */
.ctt-admin-nhom-con {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.25rem 0 0.25rem 0.75rem;
}

    .ctt-admin-nhom-con a {
        position: relative;
        padding-block: 0.5rem;
        font-size: 0.85rem;
    }

    /* Tên màn hình dài hơn 260px thì xuống dòng, cắt bằng dấu ba chấm là mất chữ. */
    .ctt-admin-nhom-con .ctt-admin-nav-chu {
        white-space: normal;
        overflow: visible;
    }

    /* Trong nhóm chỉ đánh dấu bằng chữ đậm và vạch dọc, phần tô nền để dành cho
   tiêu đề nhóm — tô cả hai thì hai mức của menu nhìn ngang nhau. */
    .ctt-admin-nhom-con a.active {
        background-color: transparent;
        color: var(--main-primary);
        box-shadow: none;
    }

        .ctt-admin-nhom-con a.active > i {
            color: var(--main-primary);
        }

        .ctt-admin-nhom-con a.active::before {
            content: "";
            position: absolute;
            inset-inline-start: -0.75rem;
            top: 0.35rem;
            bottom: 0.35rem;
            width: 3px;
            border-radius: 999px;
            background-color: var(--main-primary);
        }

/* Chân sidebar: logo trường, bản quyền, phiên bản. */
.ctt-admin-chan {
    margin: 0.75rem;
    padding: 0.875rem;
    border-radius: 0.75rem;
    background-color: var(--main-body-bg, #f2f6f6);
    text-align: center;
}

    .ctt-admin-chan img {
        width: 2.75rem;
        height: 2.75rem;
        object-fit: contain;
    }

.ctt-admin-chan-ten {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--main-primary);
}

.ctt-admin-chan-phu {
    margin-top: 0.125rem;
    font-size: 0.6875rem;
    color: var(--main-muted);
}

.ctt-admin-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 5rem;
    padding: 0.625rem 1.25rem;
    background-color: var(--main-navbar);
    color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
}

/* Khối bên trái: logo + tên phần mềm quản trị. */
.ctt-admin-hieu {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #fff;
    text-decoration: none;
    min-width: 0;
}

.ctt-admin-logo {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    object-fit: contain;
    background-color: #fff;
    border-radius: 50%;
    padding: 0.15rem;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* Chưa khai logo thì lấy chữ viết tắt thay ảnh, khỏi để trống một mảng. */
.ctt-admin-logo--chu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--main-primary);
}

.ctt-admin-hieu-chu {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.ctt-admin-hieu-nho {
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.4;
}

.ctt-admin-hieu-lon {
    font-size: 1.1875rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.ctt-admin-vach {
    align-self: stretch;
    width: 1px;
    margin: 0.25rem 0;
    background-color: rgba(255, 255, 255, 0.4);
}

/* Khối bên phải vạch: tên trường và tên phần mềm. */
.ctt-admin-ten {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.1rem;
    line-height: 1.2;
    min-width: 0;
}

.ctt-admin-ten-truong,
.ctt-admin-ten-phanmem {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.ctt-admin-ten-truong {
    font-size: 1.1875rem;
    font-weight: 800;
}

.ctt-admin-ten-phanmem {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.92);
}

/* Chuông mượn từ thanh menu sinh viên nên phải gỡ khoảng đệm của navbar-nav. */
.ctt-admin-chuong {
    flex-direction: row;
    margin-inline-start: auto;
    padding: 0;
    list-style: none;
}

    .ctt-admin-chuong .nav-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.18);
        color: #fff;
    }

        .ctt-admin-chuong .nav-link:hover,
        .ctt-admin-chuong .nav-link[aria-expanded="true"] {
            background-color: rgba(255, 255, 255, 0.28);
            color: #fff;
        }

    /* Nút tròn rộng hơn chỗ cũ nên số chưa đọc phải dời ra mép trên bên phải. */
    .ctt-admin-chuong .ctt-noti-badge {
        top: -0.15rem;
        inset-inline-start: auto;
        inset-inline-end: -0.15rem;
    }

.ctt-admin-taikhoan {
    margin-inline-start: 0.5rem;
}

.ctt-admin-user {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    /*border-radius: 999px;*/
    background-color: transparent;
    border: none;
    color: #fff;
    white-space: nowrap;
}

/* Vòng tròn chữ cái đầu, đứng thay ảnh đại diện. */
.ctt-admin-user-anh {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--main-primary);
}

.ctt-admin-user-chu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    min-width: 0;
}

.ctt-admin-user-ten,
.ctt-admin-user-tk {
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ctt-admin-user-ten {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.ctt-admin-user-tk {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.8);
}

.ctt-admin-user:hover,
.ctt-admin-user[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.ctt-admin-user-mui {
    font-size: 0.7rem;
    opacity: 0.85;
}

.ctt-admin-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    border-radius: 0.625rem;
    background-color: transparent;
    font-size: 1rem;
    color: #fff;
}

    .ctt-admin-toggle:hover {
        background-color: rgba(255, 255, 255, 0.28);
        border-color: rgba(255, 255, 255, 0.7);
        color: #fff;
    }

.ctt-admin-sidebar {
    transition: flex-basis 0.18s ease-in-out;
}

.ctt-admin-nav-chu {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Thu gọn chỉ có nghĩa ở màn rộng; màn hẹp sidebar đã là panel trượt. */
@media (min-width: 992px) {
    .ctt-admin.thu-gon .ctt-admin-sidebar {
        flex-basis: 4.75rem;
    }

    .ctt-admin.thu-gon .ctt-admin-nav-chu {
        display: none;
    }

    .ctt-admin.thu-gon .ctt-admin-chan-ten,
    .ctt-admin.thu-gon .ctt-admin-chan-phu {
        display: none;
    }

    .ctt-admin.thu-gon .ctt-admin-chan {
        padding: 0.5rem;
    }

    .ctt-admin.thu-gon .ctt-admin-nav a {
        justify-content: center;
        padding-inline: 0.5rem;
    }

    /* Thu gọn chỉ còn biểu tượng: hàng nút bung/đóng và mũi tên nhóm hết chỗ đứng. */
    .ctt-admin.thu-gon .ctt-admin-nhom-nut,
    .ctt-admin.thu-gon .ctt-admin-nhom-dau > .ctt-admin-nhom-mui {
        display: none;
    }

    .ctt-admin.thu-gon .ctt-admin-nhom-dau {
        justify-content: center;
        padding-inline: 0.5rem;
    }

    .ctt-admin.thu-gon .ctt-admin-nhom-con {
        padding-inline-start: 0;
    }

        .ctt-admin.thu-gon .ctt-admin-nhom-con a.active::before {
            display: none;
        }
}

.ctt-admin-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.5rem 1.25rem;
}

@media (max-width: 991.98px) {
    .ctt-admin-sidebar {
        position: fixed;
        z-index: 1040;
        /* Nằm ngay dưới thanh đầu trang, không đè lên nó. */
        top: 5rem;
        bottom: 0;
        inset-inline-start: 0;
        width: 16.25rem;
        transform: translateX(-100%);
        transition: transform 0.2s ease-in-out;
    }

        .ctt-admin-sidebar.mo {
            transform: translateX(0);
        }


    /* Màn hẹp chỉ giữ logo và tên khu quản trị, phần tên trường dài dễ tràn hàng. */
    .ctt-admin-vach,
    .ctt-admin-ten {
        display: none;
    }

    /* Màn hẹp chỉ giữ vòng tròn chữ cái đầu, hai dòng tên chiếm hết bề ngang. */
    .ctt-admin-user-chu {
        display: none;
    }

    .ctt-admin-topbar {
        gap: 0.625rem;
        padding-inline: 0.75rem;
    }

    .ctt-admin-logo {
        width: 2.25rem;
        height: 2.25rem;
    }

    .ctt-admin-hieu-lon {
        font-size: 0.9rem;
    }
}