/* Mặc định là Dark Mode */
:root {
    --header-bg-color: 30, 30, 30;
    --primary-color: #d1bb6d;
    --show-bg-color: #434343;
    --show-bg-image: none;
    --section__title-color: #ffffff;
    --section__title_primary-color: #d1bb6d;
    --card__content-bg-color: ##313131;
    --card__subtitle-color: #d1bb6d;
    --card__title-color: #ffffff;
    --card__desc-color: #b3b3b3;
    --card__divider-color: rgba(255, 255, 255, 0.2);
    --btn-booking-color: #000;
    --info-icon-color: #d1bb6d;
    --nav-button-hover-bg-color: #d1bb6d;
    --upcoming-bg-color: #333333;
    --upcoming-text-color: #e0e0e0;
    --leaders-bg-gradient: linear-gradient(to right, #1e1e1e 50%, #333333 50%);
    --leaders-bg-img: none;
    --partners-bg-color: #434343;
    --news-section-bg-color: #2a2a2a;
    --content-booking-color: #333333;
    --bg-component-subpage-color: #313131;
    --header-calendar: #1e1e1e;
    --container-calendar: #2a2a2a;
    --weekday-calendar: #d4d4d4;
    --btn-booking-bg-color: #d1bb6d;
    --input-group-label-color: #d4d4d4;
    --input-group-input-bg-color: #444;
    --yellow-text-color: #d1bb6d;
    --notch-bg-color: #434343;
    --table-header-bg-color: #2a2a2a;
    --table-body-odd-bg-color: #313131;
    --table-body-even-bg-color: #434343;
    --table-container-bg-color: #333;
}

/* Khi chuyển sang Light Mode */
[data-theme="light"] {
    --header-bg-color: 67, 67, 67;
    --primary-color: #f59e0b;
    --show-bg-color: #f59e0b;
    --show-bg-image: url("../images/bg-light-theme.png");
    --section__title-color: #000000;
    --section__title_primary-color: #ffffff;
    --card__content-bg-color: #ffffff;
    --card__subtitle-color: #000000;
    --card__title-color: #f5780b;
    --card__desc-color: #000000;
    --card__divider-color: rgba(0, 0, 0, 0.2);
    --btn-booking-color: #ffffff;
    --info-icon-color: #f59e0b;
    --nav-button-hover-bg-color: #ffffff;
    --upcoming-bg-color: #ffffff;
    --upcoming-text-color: #767683;
    --leaders-bg-gradient: linear-gradient(to right, #f59e0b 50%, #ffffff 50%);
    --leaders-bg-img: url("../images/bg-light-theme.png");
    --partners-bg-color: #ffffff;
    --news-section-bg-color: #ffffff;
    --content-booking-color: rgba(212, 212, 212, 0.7);
    --bg-component-subpage-color: #d4d4d4;
    --header-calendar: rgba(115, 115, 115, 0.5);
    --container-calendar: rgba(212, 212, 212, 0.5);
    --weekday-calendar: #333333;
    --btn-booking-bg-color: #f5780b;
    --input-group-label-color: #737373;
    --input-group-input-bg-color: #ffffff;
    --yellow-text-color: #434343;
    --notch-bg-color: rgba(115, 115, 115, 0.5);
    --table-header-bg-color: #b9b9b9;
    --table-body-odd-bg-color: rgba(212, 212, 212, 0.5);
    --table-body-even-bg-color: #d4d4d4;
    --table-container-bg-color: nones;
}

.header {
    background-color: var(--header-bg-color);
}

.header--scrolled {
    background-color: rgba(var(--header-bg-color), 0.8);
    padding: 10px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
}

.shows {
    background-color: var(--show-bg-color);
    background-image: var(--show-bg-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 72%;
}

.info-icon svg {
    fill: var(--info-icon-color);
}

[data-theme="light"] .card {
    border: none;
}

[data-theme="light"] .trailer {
    background-color: #e1e1e1;
}

[data-theme="light"] .calendar-grid {
    gap: 10px;
}

[data-theme="light"] .day-cell {
    border: none;
    border-radius: 10px;
    background-color: #d9d9d9;
    min-height: 150px;
}

    [data-theme="light"] .day-cell.has-event {
        background-color: #ded5b3;
    }

    [data-theme="light"] .day-number,
    [data-theme="light"] .day-cell.active-date .day-number {
        color: #000000;
        font-weight: bold;
    }

    [data-theme="light"] .day-cell.has-event:has(.time-btn.selected) {
        background-color: #ffffff;
        border: 1px solid #f59e0b;
        outline: none;
    }

[data-theme="light"] .time-btn {
    background-color: #737373;
    color: #ffffff;
}

    [data-theme="light"].time-btn.selected {
        background-color: #f59e0b;
        color: #ffffff;
    }

[data-theme="dark"] .icon-dark {
    display: block;
}

[data-theme="dark"] .icon-light {
    display: none;
}

[data-theme="light"] .icon-dark {
    display: none;
}

[data-theme="light"] .icon-light {
    display: block;
}

[data-theme="light"] .header {
    background-color: #1e1e1ecc !important;
}

svg.icon-status path {
    fill: var(--primary-color);
}