.top-header-bar {
        background: linear-gradient(90deg, #ffffff 0%, #f8f9fa 100%);
        z-index: 1040;
    }

    /* Chiều cao của top-brand-header. Đổi 1 nơi này nếu cần điều chỉnh.
       Padding 10x2 + logo 60px ≈ 80px; thêm dư phòng cho border bottom. */
    :root { --top-brand-h: 84px; }

    /* 1. Top brand header — CỐ ĐỊNH trên đầu, không scroll theo trang */
    .top-brand-header {
        background-color: #ffffff;
        padding: 10px 20px;
        border-bottom: 3px solid #004a99;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--top-brand-h);
        z-index: 1050; /* Cao hơn cả navbar/sidebar */
        width: 100%;
    }

    /* 2. Đẩy sidebar và phần thân xuống dưới brand-header.
       Navbar (.main-header) KHÔNG fixed — scroll theo trang như mặc định. */
    @media (min-width: 768px) {
        /* Body padding-top = chiều cao brand-header để các phần tử khác
           (navbar, content) không bị brand-header che ở đầu trang. */
        body {
            padding-top: var(--top-brand-h);
        }
        /* Sidebar (đã fixed sẵn nhờ layout-fixed) cũng đẩy xuống dưới brand-header. */
        .main-sidebar {
            top: var(--top-brand-h) !important;
            height: calc(100vh - var(--top-brand-h));
        }
    }

    /* Mobile: ẩn top-brand-header (theo template d-none d-md-block đã làm),
       chỉ cần đảm bảo content không lệch */
    @media (max-width: 767.98px) {
        .content-wrapper, .main-footer { margin-top: 0; }
    }

    .school-name {
        color: #004a99;
        font-weight: bold;
        text-transform: uppercase;
        margin: 0;
        font-size: 1.4rem;
    }
   /* Đảm bảo các thông báo lỗi luôn hiển thị màu đỏ */
    .help-block {
        color: #dd4b39;
        font-style: italic;
    }
    /* Giao diện lỗi cho các ô input */
    .form-group.has-error .form-control {
        border-color: #dd4b39;
    }

    /* ==================== SELECT2 CUSTOM STYLES ==================== */
    /* Tăng kích thước ô search inline */
    .select2-container .select2-search--inline .select2-search__field {
        width: 250px !important;
        min-width: 200px !important;
        height: 32px !important;
        font-size: 14px !important;
        padding: 4px 8px !important;
    }
    
    /* Tăng chiều cao selection box */
    .select2-container--default .select2-selection--multiple {
        min-height: 42px !important;
        padding: 4px 8px !important;
    }
    
    /* Layout flex cho rendered area */
    .select2-container .select2-selection--multiple .select2-selection__rendered {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 2px !important;
    }
    
    /* Style cho tag đã chọn - tăng padding bên phải để chừa chỗ nút X */
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        margin: 3px !important;
        padding: 6px 36px 6px 10px !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        position: relative !important;
        min-width: 100px !important;
    }
    
    /* Style cho nút X remove - absolute position bên phải */
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        position: absolute !important;
        right: 4px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 24px !important;
        height: 24px !important;
        line-height: 24px !important;
        text-align: center !important;
        border-radius: 3px !important;
        font-size: 16px !important;
        font-weight: bold !important;
        color: #fff !important;
        background-color: rgba(255,255,255,0.3) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        cursor: pointer !important;
        float: none !important;
        left: auto !important;
    }
    
    /* Override mạnh hơn cho Select2 mặc định */
    span.select2-selection__choice__remove {
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        position: absolute !important;
        right: 4px !important;
    }
    
    /* Hover effect cho nút X */
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
        background-color: rgba(255,255,255,0.6) !important;
        color: #fff !important;
    }