/* ========================================================== */
/* PHẦN GIAO DIỆN CHÍNH                      */
/* ========================================================== */

/* --- Hero Section --- */
.hero-section {
    padding: 6rem 0;
    background: linear-gradient(to right, rgba(var(--bgColorRGB, 42, 43, 56), 0.9), rgba(var(--bgColorRGB, 42, 43, 56), 0.7)), url('../images/qc.jpg') no-repeat center center;
    background-size: cover;
    color: white;
}

.hero-section h1 {
    font-weight: 700;
}

/* --- Class List Section --- */
.class-list-section {
    padding: 4rem 0;
    background-color: var(--bgColor);
}

.class-list-section h2 {
    color: var(--textColor);
}

.class-card {
    background-color: var(--fgColor);
    border: 1px solid #495057;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 0.5rem;
}

.class-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.class-card .card-title {
    color: var(--priColor);
    font-weight: 600;
}

.class-card .card-text {
    color: var(--textColor);
}

.class-card .card-text .fa-solid {
    margin-right: 8px;
    color: #96c93d;
    /* Màu nhấn */
    width: 20px;
}

/* --- Quy tắc cho Theme Sáng --- */
.white-theme .hero-section {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8)), url('../images/qc.jpg') no-repeat center center;
    background-size: cover;
    color: #212529;
}

.white-theme .class-list-section h2,
.white-theme .class-card .card-text {
    color: #212529;
}

.white-theme .class-card {
    background-color: #ffffff;
    border-color: #dee2e6;
}

.white-theme .class-card .card-title {
    color: #0d6efd;
    /* Màu primary của Bootstrap */
}

/* ========================================================== */
/* HỘP THOẠI (MODAL)                      */
/* ========================================================== */

/* --- CSS chung cho bảng chọn lịch --- */
.schedule-table th,
.schedule-table td {
    text-align: center;
    vertical-align: middle;
}

.schedule-table .time-slot {
    font-weight: 500;
}

.schedule-table .form-check-input {
    width: 1.5em;
    height: 1.5em;
    cursor: pointer;
}

/* --- Theme Tối (Mặc định) --- */
.modal-content {
    background-color: var(--bgColor);
    color: var(--textColor);
    border: 1px solid #495057;
}

.modal-header,
.modal-footer {
    border-color: #495057;
}

/* .schedule-table thead th,
#studentListModal thead th {
    background-color: #794e7d;
    color: white;
} */
.schedule-table thead th,
#studentListModal thead th {
    background-color: #794e7d;
    color: white;
}
.schedule-table tbody strong {
    color: white;
}

#studentListModal .table {
    --bs-table-border-color: #495057;
}

#studentListModal .table> :not(caption)>*>* {
    color: #EAECEE;
}

#studentListModal .table-striped>tbody>tr:nth-of-type(odd)>* {
    background-color: rgba(255, 255, 255, 0.05);
    color: #EAECEE;
}
#studentListModal .table-striped>tbody>tr:nth-of-type(even)>* {
    background-color: rgba(0, 0, 0, 0.05);
    color: #EAECEE;
}
/* --- Quy tắc cho Theme Sáng --- */
.white-theme .modal-content {
    background-color: var(--bgColor);
    color: #979494;
    border: 1px solid #dee2e6;
}

.white-theme .modal-header,
.white-theme .modal-footer {
    border-color: #ffffff;
}

.white-theme .schedule-table,
.white-theme #studentListModal .table {
    color: #f5f8fa;
}

.white-theme .schedule-table th,
.white-theme .schedule-table td,
.white-theme #studentListModal .table th,
.white-theme #studentListModal .table td {
    border-color: #dee2e6;
}

.white-theme .schedule-table thead th {
    background-color: #e9ecef;
}

.white-theme .schedule-table tbody strong {
    color: #fdfeff;
}

/* SỬA LỖI MỚI: Chỉ định nghĩa màu nền cho hàng sọc, để màu chữ được kế thừa đúng */
.white-theme #studentListModal .table-striped>tbody>tr:nth-of-type(odd) {
    background-color: rgba(150, 148, 148, 0.05);
}

.white-theme #studentListModal .table> :not(caption)>*>* {
    color: #212529;
    /* Đảm bảo tất cả chữ trong bảng đều có màu tối */
}


/* ========================================================== */
/* HIỆU ỨNG ĐỘNG                       */
/* ========================================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-section h1,
.hero-section p,
.hero-section .btn,
.class-list-section .col {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
}

.hero-section p {
    animation-delay: 0.2s;
}

.hero-section .btn {
    animation-delay: 0.4s;
}

.class-list-section .col:nth-child(1) {
    animation-delay: 0.1s;
}

.class-list-section .col:nth-child(2) {
    animation-delay: 0.2s;
}

.class-list-section .col:nth-child(3) {
    animation-delay: 0.3s;
}

.class-list-section .col:nth-child(4) {
    animation-delay: 0.4s;
}

.class-list-section .col:nth-child(5) {
    animation-delay: 0.5s;
}

.class-list-section .col:nth-child(6) {
    animation-delay: 0.6s;
}

.class-list-section .col:nth-child(7) {
    animation-delay: 0.7s;
}

.class-list-section .col:nth-child(8) {
    animation-delay: 0.8s;
}