/* =============================================================================
   Cổng thông tin sinh viên — giao diện Bootstrap 5.3
   Đổi màu thương hiệu cho từng trường chỉ cần sửa các biến ở :root.
   ============================================================================= */

:root {
    /* Giá trị mặc định — bị ghi đè bởi mục "Branding" trong appsettings.json
       (xem partial _BrandingStyles.cshtml). */
    --main-primary: #037683;
    --main-primary-rgb: 3, 118, 131;
    --main-primary-dark: #025b65;
    --main-primary-light: #e0f1f2;
    --main-secondary: #0f9d8f;
    --main-secondary-rgb: 15, 157, 143;
    --main-accent: #ffb71b;
    --main-hover: #025b65;
    --main-body-bg: #f2f6f6;
    --main-auth-bg: #e4f0f0;
    --main-navbar: #037683;
    --main-ink: #1f3a3d;
    --main-muted: #7f9598;
    --main-line: #dfe8e9;
    --main-radius: 0.75rem;
    --main-shadow: 0 0.125rem 0.5rem rgba(16, 40, 73, 0.08);
    --main-shadow-lg: 0 1.5rem 3rem rgba(29, 45, 92, 0.12);
    --main-navbar-height: 3.75rem;
}

/* Ghi đè token của Bootstrap để dùng màu thương hiệu ------------------------- */
:root,
[data-bs-theme="light"] {
    --bs-primary: var(--main-primary);
    --bs-primary-rgb: var(--main-primary-rgb);
    --bs-link-color: var(--main-primary);
    --bs-link-color-rgb: var(--main-primary-rgb);
    --bs-link-hover-color: var(--main-hover);
    --bs-body-bg: var(--main-body-bg);
    --bs-body-color: var(--main-ink);
    --bs-border-color: var(--main-line);
    --bs-border-radius: 0.75rem;
    --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: 1.75rem 2.5rem;
}

/* 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);
    }

    .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;
    }

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

    .ctt-sidemenu .nav-link {
        padding: 0.625rem 0.75rem;
        border-radius: 0.5rem;
    }

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

    .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-ink);
        white-space: normal;
    }

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

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

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

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

    /* 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;
    }
}


/* Đầ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;
    }
}

/* Thẻ nội dung -------------------------------------------------------------- */

.ctt-card {
    background-color: #fff;
    border: 0;
    border-radius: var(--main-radius);
    box-shadow: var(--main-shadow);
}

/* Khoảng cách giữa các thẻ đặt tại đây, không rải lớp mb-3 trong từng view.
   Có thẻ chỉ hiện theo điều kiện, đặt lớp ở view thì lúc có lúc quên, nhìn ra
   ngoài thành chỗ cách chỗ dính. */
.ctt-noidung > .ctt-card:not(:first-child),
.ctt-card + .ctt-card {
    margin-top: 1rem;
}

/* Hàng chia cột đặt xen giữa các thẻ: Bootstrap kéo hàng lên đúng bằng gutter dọc
   để dòng đầu không dôi lề. Bỏ phần kéo lên đó thì khoảng cách tới thẻ phía trên
   vừa bằng khoảng cách giữa hai thẻ, nhờ phần đệm trên của cột. */
.ctt-noidung > .row.g-3:not(:first-child) {
    margin-top: 0;
}

/* 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;
}

/* Bảng khoản phải nộp ---------------------------------------------------------
   Bảng nhiều cột nên trên màn hình hẹp phải kéo ngang. Ghim cột tích chọn ở mép
   trái để kéo tới đâu vẫn bấm được, và tô nền lại vì ô ghim trôi lên trên các ô
   khác thì nền trong suốt sẽ nhìn xuyên qua. */

.ctt-bang-noptien .ctt-cot-ghim {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #fff;
}

.ctt-bang-noptien thead .ctt-cot-ghim {
    z-index: 3;
    background-color: var(--main-primary);
}

/* Dòng đang rê chuột đổi nền, ô ghim phải đổi theo cho khớp. */
.ctt-bang-noptien tbody tr:hover .ctt-cot-ghim {
    background-color: var(--bs-table-hover-bg, #f2f2f2);
}

/* Ô chọn ngân hàng -----------------------------------------------------------
   Mỗi ngân hàng là một ô bấm được, ô nào đang chọn thì viền và nền đổi màu.
   Ô tròn của radio ẩn đi nhưng vẫn nằm trong luồng bàn phím để còn dùng Tab. */

.ctt-o-nganhang {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ctt-o-nganhang-muc {
    align-items: center;
    background-color: #fff;
    border: 1px solid var(--main-line);
    border-radius: var(--main-radius);
    cursor: pointer;
    display: flex;
    justify-content: center;
    min-height: 4.5rem;
    min-width: 8rem;
    padding: 0.5rem 0.75rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ctt-o-nganhang-muc img {
    max-height: 3.25rem;
    max-width: 7.5rem;
    object-fit: contain;
}

.ctt-o-nganhang-ten {
    font-weight: 600;
    text-align: center;
}

.ctt-o-nganhang-muc input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ctt-o-nganhang-muc:hover {
    border-color: var(--main-primary);
}

.ctt-o-nganhang-muc:has(input:checked) {
    background-color: var(--main-primary-light);
    border-color: var(--main-primary);
    box-shadow: 0 0 0 1px var(--main-primary);
}

.ctt-o-nganhang-muc:has(input:focus-visible) {
    outline: 2px solid var(--main-primary);
    outline-offset: 2px;
}

.ctt-page-title {
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.ctt-page-title i {
    color: var(--main-primary);
    margin-inline-end: 0.5rem;
}

/* =============================================================================
   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;
}

.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);
}

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

.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-brand,
.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;
}

/* Khối thương hiệu đầu thanh bên và thanh trên là hai thẻ rời nhau nhưng phải trông
   như một dải liền: cùng kéo ảnh rộng bằng khung nhìn rồi neo một bên trái, một bên
   phải — thu gọn thanh bên thì hai nửa vẫn khớp. */
.ctt-admin-brand {
    background-size: 100% 100%, 100vw 100%;
    background-position: center, left center;
}

.ctt-admin-topbar {
    background-size: 100% 100%, 100vw 100%;
    background-position: center, right center;
}

.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.15;
}

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

.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.9rem, 0.8rem + 0.35vw, 1.05rem);
    font-weight: 700;
    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;
}

.ctt-brandbar-school {
    font-size: clamp(0.9rem, 0.8rem + 0.35vw, 1.05rem);
    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;
    }
}

/* Thư viện ngoài ----------------------------------------------------------- */

.famfamfam-flags {
    display: inline-block;
    vertical-align: text-bottom;
}

.swal-footer {
    text-align: center;
}

/* =============================================================================
   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;
    }
}

/* =============================================================================
   Trang chủ (khách chưa đăng nhập và dashboard sinh viên)
   ============================================================================= */

.ctt-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    overflow: hidden;
    margin-bottom: 1.25rem;
    padding: 1.75rem 2rem;
    border-radius: var(--main-radius);
    background-color: var(--main-navbar);
    box-shadow: var(--main-shadow);
    color: #fff;
}

.ctt-hero-text h1 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
    font-weight: 700;
}

.ctt-hero-text p {
    max-width: 46rem;
    margin: 0 0 1.125rem;
    color: rgba(255, 255, 255, 0.88);
}

.ctt-hero .btn-primary {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-color: var(--main-primary);
    --bs-btn-hover-bg: #eef3fb;
    --bs-btn-hover-border-color: #eef3fb;
    --bs-btn-hover-color: var(--main-hover);
    --bs-btn-active-bg: #e3ebf7;
    --bs-btn-active-border-color: #e3ebf7;
    --bs-btn-active-color: var(--main-hover);
    font-weight: 600;
}

.ctt-hero-icon {
    flex-shrink: 0;
    font-size: 5rem;
    opacity: 0.18;
}

@media (max-width: 767.98px) {
    .ctt-hero {
        padding: 1.25rem;
    }

    .ctt-hero-icon {
        display: none;
    }
}

/* Khung nội dung dùng chung ------------------------------------------------- */

.ctt-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--main-radius);
    background-color: #fff;
    box-shadow: var(--main-shadow);
}

.ctt-panel-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.125rem;
    border-top: 3px solid var(--main-primary);
    border-bottom: 1px solid var(--main-line);
}

.ctt-panel-head i {
    color: var(--main-primary);
}

.ctt-panel-head h2 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--main-ink);
}

.ctt-panel-head-note {
    margin-inline-start: auto;
    font-size: 0.8125rem;
    color: var(--main-muted);
    white-space: nowrap;
}

.ctt-panel-body {
    flex: 1 1 auto;
    padding: 1rem 1.125rem;
}

.ctt-panel-foot {
    padding: 0.625rem 1.125rem;
    border-top: 1px solid var(--main-line);
    text-align: end;
}

.ctt-panel-foot a {
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

.ctt-panel-empty {
    margin: 0;
    padding-block: 1.5rem;
    color: var(--main-muted);
    text-align: center;
}

/* Màu nhấn riêng cho từng khung */
.ctt-panel--thongbao .ctt-panel-head {
    border-top-color: var(--main-secondary);
}

.ctt-panel--thongbao .ctt-panel-head i {
    color: var(--main-secondary);
}

.ctt-panel--vanban .ctt-panel-head {
    border-top-color: var(--main-accent);
}

.ctt-panel--vanban .ctt-panel-head i {
    color: var(--main-accent);
}

/* Tin tức ------------------------------------------------------------------- */

.ctt-news {
    padding-block: 0.875rem;
    border-bottom: 1px dashed var(--main-line);
}

.ctt-news:first-child {
    padding-top: 0;
}

.ctt-news:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.ctt-news-title {
    display: block;
    font-weight: 600;
    color: var(--main-ink);
    text-decoration: none;
}

.ctt-news-title:hover {
    color: var(--main-primary);
}

.ctt-news-summary {
    margin: 0.25rem 0 0.375rem;
    font-size: 0.875rem;
    color: var(--main-muted);
}

.ctt-news-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.875rem;
    font-size: 0.8125rem;
    color: var(--main-muted);
}

.ctt-news-meta i {
    margin-inline-end: 0.25rem;
}

/* Danh sách thông báo ------------------------------------------------------- */

.ctt-notice-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ctt-notice-list > li {
    padding-block: 0.75rem;
    border-bottom: 1px dashed var(--main-line);
}

.ctt-notice-list > li:first-child {
    padding-top: 0;
}

.ctt-notice-list > li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.ctt-notice-list > li > a {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
    color: var(--main-ink);
    text-decoration: none;
}

.ctt-notice-list > li > a:hover {
    color: var(--main-primary);
}

/* Văn bản, biểu mẫu --------------------------------------------------------- */

.ctt-doc-group + .ctt-doc-group {
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--main-line);
}

.ctt-doc-group-title {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--main-primary);
}

.ctt-doc-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ctt-doc-list > li + li {
    margin-top: 0.375rem;
}

.ctt-doc-list a {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--main-ink);
    text-decoration: none;
}

.ctt-doc-list a:hover {
    color: var(--main-primary);
}

.ctt-doc-list i {
    color: var(--main-muted);
}

/* Hồ sơ sinh viên ----------------------------------------------------------- */

.ctt-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--main-line);
}

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

.ctt-profile-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--main-ink);
}

.ctt-profile-code {
    font-size: 0.875rem;
    color: var(--main-muted);
}

.ctt-profile-list {
    margin: 0;
    padding-top: 0.875rem;
}

.ctt-profile-list > div {
    display: flex;
    gap: 0.75rem;
    padding-block: 0.375rem;
}

.ctt-profile-list dt {
    flex: 0 0 7.5rem;
    font-weight: 500;
    color: var(--main-muted);
}

.ctt-profile-list dd {
    min-width: 0;
    margin: 0;
    color: var(--main-ink);
    word-break: break-word;
}

/* Ô chỉ số nhanh ------------------------------------------------------------ */

.ctt-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    height: 100%;
    padding: 1rem 1.125rem;
    border-radius: var(--main-radius);
    border-inline-start: 4px solid var(--main-primary);
    background-color: #fff;
    box-shadow: var(--main-shadow);
}

.ctt-stat > i {
    margin-bottom: 0.375rem;
    font-size: 1.25rem;
    color: var(--main-primary);
}

.ctt-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--main-ink);
}

.ctt-stat-label {
    font-size: 0.8125rem;
    color: var(--main-muted);
}

.ctt-stat--secondary {
    border-inline-start-color: var(--main-secondary);
}

.ctt-stat--secondary > i {
    color: var(--main-secondary);
}

.ctt-stat--accent {
    border-inline-start-color: var(--main-accent);
}

.ctt-stat--accent > i {
    color: var(--main-accent);
}


/* Thẻ số liệu của bảng điều khiển quản trị ---------------------------------- */

.ctt-kpi {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    height: 100%;
    padding: 1.125rem;
    border-radius: 0.875rem;
    background-color: var(--main-navbar);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    color: #fff;
}

.ctt-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background-color: rgba(255, 255, 255, 0.22);
    font-size: 1.1rem;
}

.ctt-kpi-noi {
    min-width: 0;
}

.ctt-kpi-nhan {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.88);
}

.ctt-kpi-so {
    font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
    font-weight: 700;
    line-height: 1.15;
    word-break: break-word;
}

.ctt-kpi-phu {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.82);
}

/* Bốn sắc độ cho bốn chỉ số, chỉ để phân biệt thẻ chứ không mang ý nghĩa trạng thái. */
.ctt-kpi--hai {
    background-color: var(--main-secondary);
}

.ctt-kpi--ba {
    background-color: #6d5ce0;
}

.ctt-kpi--bon {
    background-color: #0f9d8f;
}


/* Trang thông báo ----------------------------------------------------------- */

.ctt-tb-ds {
    display: flex;
    flex-direction: column;
}

.ctt-tb-muc {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.875rem 0.5rem;
    border-bottom: 1px solid var(--main-line);
    color: inherit;
    text-decoration: none;
}

.ctt-tb-muc:last-child {
    border-bottom: 0;
}

.ctt-tb-muc:hover {
    background-color: var(--main-primary-light);
}

/* Chưa đọc thì đậm hơn và có vệt màu bên trái, không chỉ dựa vào chấm tròn. */
.ctt-tb-muc--chuadoc {
    box-shadow: inset 3px 0 0 var(--main-primary);
}

.ctt-tb-muc--chuadoc .ctt-tb-tieude {
    font-weight: 700;
}

.ctt-tb-noi {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    flex: 1 1 auto;
}

.ctt-tb-tieude {
    font-weight: 600;
    color: var(--main-ink);
}

.ctt-tb-tomtat {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.875rem;
    color: var(--main-muted);
}

.ctt-tb-thoigian {
    font-size: 0.78rem;
    color: var(--main-muted);
}

/* Nội dung do phòng ban gõ tay nên giữ nguyên chỗ xuống dòng. */
.ctt-tb-noidung {
    white-space: pre-line;
    line-height: 1.6;
    color: var(--main-ink);
}

/* Tài chính ----------------------------------------------------------------- */

.ctt-money {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 0.875rem;
}

.ctt-money-label {
    display: block;
    font-size: 0.8125rem;
    color: var(--main-muted);
}

.ctt-money-value {
    font-size: 1.1rem;
    font-weight: 700;
    white-space: nowrap;
}

.ctt-money-progress {
    height: 1.25rem;
    border-radius: 999px;
    background-color: var(--main-primary-light);
}

.ctt-money-progress .progress-bar {
    background-color: var(--main-primary);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Biểu đồ điểm theo học kỳ -------------------------------------------------- */

.ctt-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    overflow-x: auto;
    padding-top: 0.5rem;
}

.ctt-chart-col {
    display: flex;
    flex: 1 1 0;
    min-width: 3.25rem;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}

.ctt-chart-value {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--main-ink);
}

.ctt-chart-track {
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 9rem;
    border-radius: 0.375rem;
    background-color: var(--main-primary-light);
}

.ctt-chart-bar {
    width: 100%;
    min-height: 0.25rem;
    border-radius: 0.375rem;
    background: linear-gradient(180deg, var(--main-primary), var(--main-primary-dark));
}

.ctt-chart-label {
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--main-muted);
    text-align: center;
}

/* =============================================================================
   Chuông thông báo trên thanh menu
   ============================================================================= */

.ctt-noti-toggle {
    position: relative;
}

.ctt-noti-toggle > i {
    font-size: 1.05rem;
}

.ctt-noti-badge {
    position: absolute;
    top: 0.15rem;
    inset-inline-start: 1.35rem;
    min-width: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background-color: #e0245e;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
    box-shadow: 0 0 0 2px var(--main-navbar);
}

.ctt-noti-menu {
    width: min(23rem, calc(100vw - 2rem));
    padding: 0;
    overflow: hidden;
}

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

.ctt-noti-head h6 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--main-ink);
}

.ctt-noti-readall {
    padding: 0;
    border: 0;
    background: none;
    color: var(--main-primary);
    font-size: 0.8125rem;
    font-weight: 500;
}

.ctt-noti-readall:hover {
    text-decoration: underline;
}

.ctt-noti-list {
    max-height: min(60vh, 26rem);
    overflow-y: auto;
}

.ctt-noti-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--main-line);
    color: inherit;
    text-decoration: none;
}

.ctt-noti-item:last-child {
    border-bottom: 0;
}

.ctt-noti-item:hover,
.ctt-noti-item:focus-visible {
    background-color: #f4f7fc;
    color: inherit;
}

.ctt-noti-item--chuadoc {
    background-color: rgba(var(--main-primary-rgb), 0.06);
}

.ctt-noti-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-size: 1rem;
}

.ctt-noti-icon--hoctap {
    background-color: var(--main-primary-light);
    color: var(--main-primary);
}

.ctt-noti-icon--tien {
    background-color: #fdecea;
    color: #d92d20;
}

.ctt-noti-icon--lich {
    background-color: #fff4e5;
    color: #b54708;
}

.ctt-noti-icon--hethong {
    background-color: #eef1f6;
    color: #475467;
}

.ctt-noti-body {
    min-width: 0;
    flex: 1 1 auto;
}

.ctt-noti-title {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--main-ink);
}

.ctt-noti-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--main-muted);
}

.ctt-noti-time {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--main-primary);
}

.ctt-noti-dot {
    flex-shrink: 0;
    align-self: center;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background-color: var(--main-primary);
}

.ctt-noti-empty {
    margin: 0;
    padding: 2rem 1rem;
    color: var(--main-muted);
    text-align: center;
}

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

.ctt-noti-foot {
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--main-line);
    text-align: center;
}

.ctt-noti-foot a {
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

/* Bảng thông báo nổi lên như popup của Facebook.

   Hai luật của Bootstrap phải vượt qua:

   1. .navbar-nav .dropdown-menu { position: static } (bootstrap.css:4001) — chỉ được
      trả về absolute trong @media (min-width: 1200px). Nghĩa là dưới 1200px bảng nằm
      thẳng trong dòng chảy, chiếm hết bề ngang và top/left/right hoàn toàn vô hiệu.
      Đây là lý do bảng bị kéo dài rồi cắt cụt ở mép phải trên điện thoại.
   2. .dropdown-menu[data-bs-popper] { left: 0 } (bootstrap.css:3447), độ ưu tiên (0,2,0).

   Ghép ba lớp cho lên (0,3,0) để thắng cả hai. */
.ctt-noti .dropdown-menu.ctt-noti-menu {
    position: absolute;
    top: 100%;
    left: auto;
    right: 0;
    margin-top: .5rem;
    border-radius: .5rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
}

@media (max-width: 1199.98px) {
    /* Chuông không đứng cuối hàng — sau nó còn khối họ tên — nên neo bảng vào chuông
       thì bảng rộng 23rem sẽ trổ ra ngoài mép trái màn hình. Bỏ mốc neo ở thẻ <li>
       để bảng neo vào <nav class="navbar"> (Bootstrap đặt sẵn position: relative),
       thẻ này trải hết bề ngang màn hình. */
    .ctt-navbar-nguoidung .ctt-noti {
        position: static;
    }

    .ctt-noti .dropdown-menu.ctt-noti-menu {
        /* top: 100% giờ tính theo navbar nên bảng rơi ngay dưới thanh trên cùng,
           right khớp với phần đệm ngang của container. */
        top: 100%;
        right: .75rem;
        margin-top: 0;
        width: min(23rem, calc(100vw - 1.5rem));
        max-height: calc(100vh - 8rem);
        overflow-y: auto;
    }

    /* Danh sách đã nằm trong khung cuộn của cả bảng nên bỏ giới hạn riêng của nó */
    .ctt-noti .ctt-noti-menu .ctt-noti-list {
        max-height: none;
    }
}

/* Ô tiết học trong trang lịch học ------------------------------------------- */

.ctt-lich-tiet {
    padding-block: 0.75rem;
    border-bottom: 1px dashed var(--main-line);
}

.ctt-lich-tiet:first-child {
    padding-top: 0;
}

.ctt-lich-tiet:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.ctt-lich-gio {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--main-primary);
}

.ctt-lich-ten {
    margin-bottom: 0.25rem;
    font-weight: 600;
    color: var(--main-ink);
}

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

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

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

.ctt-admin-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    /* Cao bằng thanh đầu trang để hai khối thẳng hàng nhau. */
    min-height: 5rem;
    padding: 0.75rem 1.25rem;
    background-color: var(--main-navbar);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
}

.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;
}

.ctt-admin-nav hr {
    margin: 0.5rem 0;
    border-color: var(--main-line);
    opacity: 1;
}

/* 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-main {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
}

.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.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}

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

.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;
}

.ctt-admin-ten-truong {
    font-size: 0.95rem;
}

.ctt-admin-ten-phanmem {
    font-size: 0.95rem;
    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;
    padding: 0.35rem 0.5rem;
    color: #fff;
}

.ctt-admin-chuong .nav-link:hover {
    color: #fff;
}

.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: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    white-space: nowrap;
}

.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;
    align-items: center;
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

.ctt-admin-toggle:hover {
    background-color: rgba(255, 255, 255, 0.18);
    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-brand,
    .ctt-admin.thu-gon .ctt-admin-nav a {
        justify-content: center;
        padding-inline: 0.5rem;
    }
}

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

@media (max-width: 991.98px) {
    .ctt-admin-sidebar {
        position: fixed;
        z-index: 1040;
        top: 0;
        bottom: 0;
        inset-inline-start: 0;
        width: 15rem;
        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;
    }

    .ctt-admin-user-ten {
        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;
    }
}

/* =============================================================================
   Chương trình đào tạo
   ============================================================================= */

/* Bề rộng cột cố định để bảng không nhảy khi lọc theo từ khoá.
   min-width phải lớn hơn tổng các cột cố định cộng bề rộng tối thiểu của cột tên môn,
   nếu không cột tên môn bị bóp lại và mỗi chữ xuống một dòng. */
.ctt-ctdt-bang {
    min-width: 67rem;
}

.ctt-w-stt { width: 3rem; }
.ctt-w-so { width: 5.5rem; }
.ctt-w-ma { width: 7rem; }
.ctt-w-loai { width: 9.5rem; }
.ctt-w-rb { width: 13rem; }
.ctt-w-nut { width: 4rem; }

.ctt-ctdt-bang th:nth-child(2),
.ctt-ctdt-bang td:nth-child(2) {
    min-width: 17rem;
}

.ctt-ctdt-bang tbody td {
    border-bottom: 1px solid var(--main-line);
    vertical-align: middle;
}

.ctt-ctdt-bang tbody tr:last-child td {
    border-bottom: 0;
}

/* Chỉ cuộn ngang trong thẻ học kỳ; không giới hạn chiều cao để không cắt ngang dòng
   và không lồng thanh cuộn dọc vào trong thanh cuộn của trang. */
.ctt-ctdt-ky .table-responsive {
    border-bottom-left-radius: var(--main-radius);
    border-bottom-right-radius: var(--main-radius);
}

.ctt-badge-batbuoc {
    background-color: var(--main-primary-light);
    color: var(--main-primary-dark);
}

.ctt-badge-tuchon {
    background-color: rgba(var(--main-secondary-rgb), 0.12);
    color: var(--main-secondary);
}

/* Cây chọn chuyên ngành ------------------------------------------------------ */

.ctt-ctdt-cay {
    position: sticky;
    top: calc(var(--main-navbar-height) + 1rem);
}

.ctt-ctdt-cay-cuon {
    max-height: min(60vh, 34rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ctt-ctdt-nut,
.ctt-ctdt-nganh {
    background: none;
    border: 0;
    border-radius: 0.375rem;
    display: flex;
    font-size: 0.875rem;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    text-align: start;
    width: 100%;
}

.ctt-ctdt-nut:hover,
.ctt-ctdt-nganh:hover {
    background-color: var(--main-primary-light);
    color: var(--main-primary-dark);
}

.ctt-ctdt-mui {
    color: var(--main-muted);
    flex: 0 0 0.75rem;
    font-size: 0.7rem;
    margin-top: 0.3rem;
    transition: transform 0.15s ease;
}

.ctt-ctdt-nut[aria-expanded="true"] .ctt-ctdt-mui {
    transform: rotate(90deg);
}

.ctt-ctdt-nganh {
    color: var(--main-ink);
    padding-inline-start: 1.375rem;
}

.ctt-ctdt-nganh.dang-chon {
    background-color: var(--main-primary);
    color: #fff;
    font-weight: 500;
}

@media (max-width: 991.98px) {
    /* Trên màn hình hẹp cây nằm trên bảng nên không dính, và thu ngắn lại. */
    .ctt-ctdt-cay { position: static; }
    .ctt-ctdt-cay-cuon { max-height: 18rem; }
}

/* =============================================================================
   Bảng điểm
   ============================================================================= */

.ctt-diem-bang {
    min-width: 78rem;
}

.ctt-w-tp { width: 16rem; }

.ctt-diem-bang th:nth-child(3),
.ctt-diem-bang td:nth-child(3) {
    min-width: 16rem;
}

.ctt-diem-bang tbody td {
    vertical-align: middle;
}

/* Mỗi điểm thành phần là một viên nhỏ, xuống dòng được khi cột hẹp. */
.ctt-diem-tp {
    background-color: var(--main-body-bg);
    border-radius: 0.375rem;
    display: inline-flex;
    gap: 0.25rem;
    margin: 0.125rem 0.25rem 0.125rem 0;
    padding: 0.125rem 0.375rem;
    white-space: nowrap;
}

.ctt-diem-nut {
    align-items: center;
    background: none;
    border: 0;
    display: flex;
    gap: 0.5rem;
    padding: 0;
    text-align: start;
    width: 100%;
}

.ctt-diem-mui {
    color: var(--main-muted);
    font-size: 0.75rem;
    transition: transform 0.15s ease;
}

.ctt-diem-nut[aria-expanded="false"] .ctt-diem-mui {
    transform: rotate(-90deg);
}

.ctt-badge-dat {
    background-color: rgba(var(--main-secondary-rgb), 0.14);
    color: var(--main-secondary);
}

.ctt-badge-khongdat {
    background-color: #fdecec;
    color: #b42318;
}

.ctt-badge-chocho {
    background-color: var(--main-body-bg);
    color: var(--main-muted);
}

/* Bảng tiền ------------------------------------------------------------------ */

.ctt-tien-bang {
    min-width: 52rem;
}

.ctt-tien-bang td,
.ctt-tien-bang tfoot th {
    font-variant-numeric: tabular-nums;
}

.ctt-tien-tong > * {
    background-color: var(--main-body-bg);
    border-top: 2px solid var(--main-line);
}

/* Thời khoá biểu tuần ---------------------------------------------------------
   Lưới 7 cột chỉ đọc được từ tablet trở lên; dưới đó chuyển sang danh sách
   theo thứ, nên hai khối thay nhau hiển thị chứ không cùng lúc. */

.ctt-tkb {
    min-width: 60rem;
}

.ctt-tkb-buoi {
    width: 6rem;
    white-space: nowrap;
}

.ctt-tkb td {
    min-width: 8rem;
    vertical-align: top;
}

.ctt-tkb-mon {
    background-color: var(--main-primary-light);
    border-inline-start: 3px solid var(--main-primary);
    border-radius: 0.375rem;
    padding: 0.5rem 0.625rem;
}

.ctt-tkb td .ctt-tkb-mon + .ctt-tkb-mon {
    margin-top: 0.5rem;
}

.ctt-tkb-danhsach {
    display: none;
}

@media (max-width: 767.98px) {
    .ctt-tkb-danhsach { display: block; }
    .ctt-tkb-luoi { display: none; }
}

/* Cột thao tác ghim ở mép phải ---------------------------------------------
   Ô sticky vẫn dùng nền của Bootstrap (--bs-table-bg là màu nền body, không
   trong suốt) nên sọc của .table-striped và hover vẫn hiện đúng bên dưới. */

.ctt-cot-thaotac {
    position: sticky;
    right: 0;
    z-index: 2;
}

.table > thead .ctt-cot-thaotac {
    z-index: 3;
}

/* Không thêm bóng đổ: bóng sẽ hiện cả khi bảng chưa cuộn, làm cột cuối trông
   như bị tách khỏi bảng. Đường kẻ của .table-bordered đã đủ tách cột. */

/* Vùng nội dung ---------------------------------------------------------------
   Nền trắng cho phần thân trang; tiêu đề trang do layout dựng bên ngoài nên vẫn
   nằm trên nền chung của body. */

.ctt-noidung {
    background-color: #fff;
    border-radius: var(--main-radius);
    box-shadow: var(--main-shadow);
    padding: 1.25rem;
}

/* Thẻ con nằm trên nền trắng thì viền rõ hơn là đổ bóng. */
.ctt-noidung .ctt-card {
    border: 1px solid var(--main-line);
    box-shadow: none;
}

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

/* Đă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);
}

/* Lý lịch sinh viên ----------------------------------------------------------
   Dựng theo phần mềm cũ: các ô thông tin là input chỉ đọc, ảnh thẻ khổ 150x200. */

/* Nhãn của ô lý lịch: dùng màu chữ chính và in đậm vừa, màu nhạt trước đây khó đọc. */
.ctt-nhan-hoso {
    color: var(--main-ink);
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.ctt-o-hoso:disabled,
.ctt-o-hoso[readonly] {
    background-color: var(--main-body-bg);
    border-color: var(--main-line);
    color: var(--main-ink);
    opacity: 1;
}

.ctt-o-hoso--dam:disabled,
.ctt-o-hoso--dam[readonly] {
    color: var(--main-primary-dark);
    font-weight: 600;
}

.ctt-anh-the {
    align-items: center;
    background-color: var(--main-body-bg);
    border: 2px dashed var(--main-line);
    border-radius: 0.375rem;
    color: var(--main-primary);
    display: flex;
    font-size: 4rem;
    font-weight: 600;
    height: 280px;
    justify-content: center;
    max-width: 100%;
    width: 210px;
}

.ctt-tieu-de-phu {
    color: var(--main-primary-dark);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.ctt-anh-the-img {
    border: 1px solid var(--main-line);
    border-radius: 0.375rem;
    height: 280px;
    max-width: 100%;
    object-fit: cover;
    width: 210px;
}

/* Khung ảnh thẻ: rộng đúng bằng ảnh nên nút tải ảnh dùng w-100 là vừa khít,
   mx-auto ở thẻ div đưa cả khung ra giữa cột. */
.ctt-khung-anh-the {
    max-width: 210px;
    width: 100%;
}

/* Form sơ yếu lý lịch --------------------------------------------------------
   Ô khoá để màu xám như quy ước của phần mềm cũ; ô sửa được giữ nền trắng
   và có biểu tượng bút ở nhãn để nhìn ra ngay. */

.ctt-o-hoso--khoa:disabled,
.ctt-o-hoso--khoa[readonly] {
    background-color: #eef1f1;
    color: var(--main-muted);
}

.ctt-o-hoso:not(.ctt-o-hoso--khoa) {
    background-color: #fff;
}

.ctt-bieu-tuong-sua {
    color: var(--main-primary);
    font-size: 0.6875rem;
    margin-inline-start: 0.375rem;
}

.ctt-hoso-luuy {
    background-color: var(--main-primary-light);
    border-inline-start: 3px solid var(--main-primary);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
}

.ctt-hoso-thanhtacvu {
    border-top: 1px solid var(--main-line);
    padding-top: 1rem;
}

/* Trang đề xuất chỉnh sửa thông tin ------------------------------------------ */

.ctt-dexuat-bang {
    min-width: 68rem;
}

.ctt-dexuat-list {
    font-size: 0.8125rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ctt-dexuat-list li + li {
    margin-top: 0.125rem;
}

/* Dấu bắt buộc và ảnh giấy tờ ------------------------------------------------ */

.ctt-bat-buoc {
    color: #d92d20;
    font-weight: 700;
    margin-inline-start: 0.2rem;
}

/* Bốn ảnh giấy tờ chia đều cả hàng; hẹp dần còn 2 rồi 1 cột. */
.ctt-anh-giayto-luoi {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 991.98px) {
    .ctt-anh-giayto-luoi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .ctt-anh-giayto-luoi {
        grid-template-columns: 1fr;
    }
}

.ctt-anh-giayto img,
.ctt-anh-giayto-trong {
    background-color: var(--main-body-bg);
    border: 1px solid var(--main-line);
    border-radius: 0.375rem;
    display: block;
    height: 13rem;
    /* contain chứ không cover: giấy tờ phải thấy trọn, cắt mất góc là mất thông tin. */
    object-fit: contain;
    width: 100%;
}

/* Khung rỗng khi hồ sơ chưa có ảnh, giữ đúng khổ để lưới không xô lệch. */
.ctt-anh-giayto-trong {
    align-items: center;
    background-color: var(--main-body-bg);
    border-style: dashed;
    color: var(--main-muted);
    display: flex;
    font-size: 2rem;
    justify-content: center;
}

/* Bảng điểm: cột ghi chú hẹp lại, nội dung dài thì xuống dòng thay vì kéo bảng ra. */
.ctt-w-ghichu {
    max-width: 12rem;
    width: 12rem;
    word-break: break-word;
}

/* Ảnh bấm được để chọn tệp ---------------------------------------------------- */

.ctt-anh-giayto-img {
    background-color: var(--main-body-bg);
    border: 1px solid var(--main-line);
    border-radius: 0.375rem;
    display: block;
    height: 13rem;
    object-fit: contain;
    width: 100%;
}

[data-xem-to] {
    cursor: zoom-in;
}

[data-xem-to]:hover {
    border-color: var(--main-primary);
}

/* Ảnh trong hộp phóng to: vừa màn hình, không tràn ra ngoài. */
.ctt-anh-to {
    max-height: 78vh;
    max-width: 100%;
    object-fit: contain;
}

.ctt-o-check {
    align-items: center;
    display: flex;
    min-height: calc(1.5em + 0.75rem + 2px);
}

/* Bảng chi tiết trong một đề xuất sửa lý lịch */
.ctt-cot-noidung {
    min-width: 26rem;
}

.ctt-bang-thaydoi {
    font-size: 0.85rem;
    --bs-table-bg: transparent;
}

.ctt-bang-thaydoi thead th {
    font-weight: 600;
    color: var(--bs-secondary-color);
    text-transform: none;
    background: transparent;
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: .25rem;
}

.ctt-bang-thaydoi tbody th {
    width: 12rem;
    font-weight: 600;
}

.ctt-bang-thaydoi td,
.ctt-bang-thaydoi th {
    padding: .3rem .5rem .3rem 0;
    vertical-align: top;
}

.ctt-giatri-moi {
    font-weight: 600;
    color: var(--main-primary);
}

.ctt-anh-thaydoi {
    max-width: 8rem;
    max-height: 6rem;
    object-fit: contain;
    border: 1px solid var(--bs-border-color);
    border-radius: .25rem;
    cursor: zoom-in;
}

/* Theme bootstrap-5 dùng số cứng của Bootstrap gốc (padding .375rem, bo góc .25rem,
   viền #ced4da) nên ô select2 thấp hơn .form-control đã nới padding-block lên .6rem
   ở trên. Ép lại cho bằng đúng ô nhập: cùng cao, cùng bo góc, cùng viền, cùng vệt sáng. */
.select2-container--bootstrap-5 .select2-selection {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    font-size: var(--bs-body-font-size);
    min-height: calc(1.5em + 1.2rem + 2px);
    padding: 0.6rem 0.75rem;
}

/* Ô một lựa chọn phải chừa chỗ bên phải cho mũi tên, giống .form-select */
.select2-container--bootstrap-5 .select2-selection--single {
    padding: 0.6rem 2.25rem 0.6rem 0.75rem;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.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);
}

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

/* 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 */
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options {
    max-height: 15rem;
}

/* Nội dung bài đăng do trang quản trị soạn, ép cho vừa khung và dễ đọc */
.ctt-tin-noidung { line-height: 1.75; }

.ctt-tin-noidung img,
.ctt-tin-noidung video,
.ctt-tin-noidung iframe {
    max-width: 100%;
    height: auto;
}

.ctt-tin-noidung table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}

.ctt-tin-noidung table td,
.ctt-tin-noidung table th {
    border: 1px solid var(--bs-border-color);
    padding: .4rem .6rem;
}

/* Bảng rộng trong bài viết thì cho cuộn ngang thay vì đội khung ra */
.ctt-tin-chitiet { overflow-x: auto; }

/* Thanh tab của trang lịch học, lấy màu nhận diện của ứng dụng */
.ctt-tab-lich .nav-link {
    color: var(--bs-secondary-color);
    font-weight: 600;
    border: 0;
    border-bottom: 2px solid transparent;
}

.ctt-tab-lich .nav-link:hover {
    color: var(--main-primary);
}

.ctt-tab-lich .nav-link.active {
    color: var(--main-primary);
    background: transparent;
    border-bottom-color: var(--main-primary);
}

/* Con số đếm thông báo trên nhãn tab */
.ctt-badge-dem {
    background: var(--main-accent);
    color: #333;
    font-size: .7rem;
}

/* Lưới tuần: cột buổi cố định, bảy cột thứ chia đều phần còn lại */
.ctt-tkb {
    table-layout: fixed;
}

.ctt-tkb .ctt-tkb-buoi {
    width: 7rem;
}

.ctt-tkb th:not(.ctt-tkb-buoi),
.ctt-tkb td:not(.ctt-tkb-buoi) {
    width: calc((100% - 7rem) / 7);
}

/* Tên học phần dài phải xuống dòng, không được kéo giãn cột */
.ctt-tkb td {
    overflow-wrap: anywhere;
}

/* Bảy cột đều nhau thì bảng cần bề ngang tối thiểu, hẹp hơn thì cuộn ngang */
.ctt-tkb-luoi .table-responsive .ctt-tkb {
    min-width: 60rem;
}

/* Bảng đánh giá rèn luyện ba cấp: tô nền nhạt dần để phân biệt cấp */
.ctt-rl-cap1 > * {
    --bs-table-bg: #ddeffe;
}

.ctt-rl-cap2 > * {
    --bs-table-bg: #eef6fd;
}

.ctt-rl-tong > * {
    --bs-table-bg: var(--bs-secondary-bg);
}

/* Ô nhập điểm tự đánh giá trong bảng rèn luyện */
.ctt-rl-nhap {
    width: 5rem;
    text-align: center;
}

.ctt-rl-chon {
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
}

/* ================= Khối cố định trên đầu trang ================= */
/* Header và thanh menu dính chung một khối; để hai khối sticky riêng thì
   khi cuộn cái dưới sẽ trượt lên đè mất cái trên. */
/* Bảng xổ xuống trong khối cố định phải nổi trên mọi nội dung của trang */
.ctt-thanhtren .dropdown-menu {
    z-index: 1035;
}

.ctt-thanhtren {
    z-index: 1030;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

/* Khối bên phải thanh menu: hồ sơ rút gọn và chuông thông báo */
/* Thanh menu dưới xl chỉ có nút mở menu và khối người dùng, ép hai cái nằm cùng
   một hàng. Không chặn thì container của navbar cho xuống dòng và khối người dùng
   trải hết chiều ngang, đẩy bảng thông báo lệch hẳn sang trái. */
.ctt-navbar > .container {
    flex-wrap: nowrap;
    column-gap: .5rem;
}

/* navbar-nav mặc định xếp dọc dưới ngưỡng mở rộng nên phải ép về hàng ngang */
.ctt-navbar-nguoidung {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: .25rem;
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Từng mục giữ đúng bề rộng nội dung, không co giãn theo hàng */
.ctt-navbar-nguoidung > li {
    flex: 0 0 auto;
}

.ctt-navbar-nguoidung .nav-link {
    padding: .25rem .5rem;
}

.ctt-navbar-hoso {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    line-height: 1.25;
    min-width: 0;
}

.ctt-navbar-hoten {
    font-weight: 600;
    font-size: .875rem;
    color: #fff;
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ctt-navbar-lop {
    font-size: .75rem;
    color: rgba(255, 255, 255, .75);
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Trạng thái khác "Đang học" thì làm nổi lên cho sinh viên để ý */
.ctt-navbar-trangthai {
    color: var(--main-accent);
    font-weight: 600;
}

/* Màn hình hẹp thì tên dài dễ đẩy chuông ra khỏi thanh */
@media (max-width: 575.98px) {
    .ctt-navbar-hoten,
    .ctt-navbar-lop {
        max-width: 8rem;
    }
}

/* Nút đăng xuất ở cuối menu trong sidebar. Sidebar nền trắng nên nút phải
   dùng màu nhận diện, để chữ trắng như thanh menu tối là mất hút. */
.ctt-sidemenu-dangxuat {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--main-line);
}

.ctt-nut-dangxuat {
    color: var(--main-primary);
    border: 1px solid var(--main-primary);
    font-weight: 600;
}

.ctt-nut-dangxuat:hover,
.ctt-nut-dangxuat:focus {
    background-color: var(--main-primary);
    color: #fff;
}

/* =============================================================================
   Bảng khung chương trình đào tạo và bảng đối sánh chuyên ngành
   ============================================================================= */

/* Bảng rất dài nên cho cuộn trong khung riêng và ghim dòng tiêu đề lại. */
.ctt-bang-khungct {
    max-height: 70vh;
    overflow: auto;
}

.ctt-bang-khungct > table {
    font-size: .875rem;
}

.ctt-bang-khungct thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--main-primary-light);
    color: var(--main-ink);
    vertical-align: middle;
}

/* Bốn cấp tiêu đề trong bảng, đậm dần từ ngoài vào trong cho dễ nhìn ra tầng. */
.ctt-bang-khungct .ctt-khungct-khoicha > td {
    background-color: var(--main-primary-light);
}

.ctt-bang-khungct .ctt-khungct-khoicon > td {
    background-color: rgba(var(--main-primary-rgb), .06);
}

.ctt-bang-khungct .ctt-khungct-phan > td,
.ctt-bang-khungct .ctt-khungct-nhom > td {
    background-color: rgba(var(--main-primary-rgb), .03);
}

.ctt-bang-khungct .ctt-khungct-tong > td {
    background-color: var(--main-primary-light);
    border-top: 2px solid var(--main-primary);
}

/* =============================================================================
   Câu hỏi thường gặp
   ============================================================================= */

/* Danh sách dài nên cho cuộn riêng, tránh đẩy ô câu trả lời tụt xuống quá xa. */
.ctt-chtg-danhsach {
    max-height: 60vh;
    overflow-y: auto;
}

.ctt-chtg-muc {
    border-left: 3px solid transparent;
    font-weight: 500;
    text-align: start;
}

.ctt-chtg-muc:hover {
    border-left-color: var(--main-primary);
}

/* Ghi đè màu active của Bootstrap cho hợp màu thương hiệu, chữ trắng trên nền đậm khó đọc. */
.ctt-chtg-danhsach .ctt-chtg-muc.active {
    background-color: var(--main-primary-light);
    border-color: var(--main-line);
    border-left-color: var(--main-primary);
    color: var(--main-primary-dark);
}

.ctt-chtg-tieude {
    color: var(--main-primary-dark);
}

/* Nội dung trả lời là HTML soạn sẵn, chặn ảnh và bảng cho khỏi tràn khung. */
.ctt-chtg-than img {
    max-width: 100%;
    height: auto;
}

.ctt-chtg-than table {
    max-width: 100%;
}

.ctt-chtg-than :last-child {
    margin-bottom: 0;
}

/* =============================================================================
   Tra cứu văn bằng, chứng chỉ
   ============================================================================= */

/* Bảng cặp nhãn - giá trị: cột nhãn cố định bề ngang cho các dòng thẳng hàng nhau. */
.ctt-bang-vanbang th {
    width: 14rem;
    background-color: var(--main-primary-light);
    color: var(--main-ink);
    font-weight: 600;
}

@media (max-width: 575.98px) {
    /* Màn hình hẹp thì 14rem chiếm quá nửa, thu lại cho phần giá trị đủ chỗ. */
    .ctt-bang-vanbang th {
        width: 9rem;
    }
}

/* =============================================================================
   Cảnh báo học tập — số tiết nghỉ
   ============================================================================= */

/* Ba mức cảnh báo tô nền cả dòng. Giữ đúng ba màu của cổng thông tin cũ nhưng
   nhạt hơn một chút cho chữ vẫn đọc rõ trên nền. */
.ctt-bang-tietnghi .ctt-tietnghi--thuong > td {
    background-color: #e8f6f9;
}

.ctt-bang-tietnghi .ctt-tietnghi--chuy > td {
    background-color: #fff8e1;
}

.ctt-bang-tietnghi .ctt-tietnghi--vuot > td {
    background-color: #fbe3e2;
}

/* Chú giải màu đặt trên bảng, dùng lại đúng ba màu nền đó. */
.ctt-tietnghi-chu {
    color: var(--main-ink);
    font-weight: 500;
    border: 1px solid var(--main-line);
}

.ctt-tietnghi-chu.ctt-tietnghi--thuong {
    background-color: #e8f6f9;
}

.ctt-tietnghi-chu.ctt-tietnghi--chuy {
    background-color: #fff8e1;
}

.ctt-tietnghi-chu.ctt-tietnghi--vuot {
    background-color: #fbe3e2;
}

/* =============================================================================
   Nhật ký thực tập
   ============================================================================= */

/* Mỗi ngày nhật ký là một thẻ riêng, nội dung dài không xếp vừa cột bảng. */
.ctt-nktt-the {
    background-color: #fff;
    border: 1px solid var(--main-line);
    border-radius: var(--main-radius);
    box-shadow: var(--main-shadow);
    padding: 1rem;
    margin-bottom: 1rem;
}

.ctt-nktt-the dt {
    color: var(--main-muted);
    font-weight: 500;
}