/* 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"] .sub-page .header {
  background-color: #1e1e1ecc !important;
}

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