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

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

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

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