.calendar-selector {
    margin-bottom: 10px;
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
}

.calendar-selector label {
    font-size: 14px;
}

.calendar-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;    
    background: #e3f2fd; /* ✅ xanh dương nhạt */
}
.calendar-table th {
    text-align: center;
    padding: 5px;
    background-color: #bbdefb; /* xanh đậm hơn #e3f2fd */
  color: #000;
}

.calendar-table th.weekday,
.calendar-table td {
    width: 14%;
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.calendar-header a {
    text-decoration: none;
    color: #000;
    padding: 2px 5px;
    font-weight: bold;
}

.calendar-header a:hover {
    background-color: #f0e0c0;
    border-radius: 4px;
}

.calendar-table th.weekend {
    color: red;
    font-weight: bold;
}

.calendar-table td {
    border: 1px solid #ccc;
    text-align: center;
    padding: 5px;
    font-size: 15px;
    border-radius: 4px;
    padding: 2px 6px;
    background-color: #eee;
}

.calendar-table a {
    text-decoration: none;
    color: #333;
    display: block;
    padding: 2px;
}

.calendar-table a:hover {
    background-color: #ffeb99;
}

.calendar-table .disabled-day {
    color: #ccc;
}

.calendar-table td.weekend a.calendar-day:not(.selected-day),
.calendar-table td.weekend span.calendar-day:not(.selected-day) {
  color: red;
}

.calendar-table td {
    position: relative;
}

.calendar-table td .today-mark {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 10px;
    color: red;
}

.calendar-day {
    background-color: #eee;
    font-weight: bold;
    border-radius: 4px;
    padding: 2px;
}
/* Ngày thường hover */
.calendar-table a.calendar-day:not(.today):not(.selected-day):hover {
  background-color: #ffeb99;
  color: #000;
}

/* Ngày được chọn */
.calendar-day.selected-day {
  background-color: #bbdefb;
  color: #000;
  font-weight: bold;
  border-radius: 4px;
  border: 2px solid #2196f3;
  padding: 2px;
}
.calendar-table td.weekend .calendar-day.selected-day {
  color: red !important;
}
.calendar-table td.weekend .calendar-day.selected-day:hover {
  color: #fff !important;
}
/* Ngày được chọn khi hover */
.calendar-day.selected-day:hover {
  background-color: #2196f3;
  color: #fff;
}

/* Ngày hôm nay (không đổi nền, có gạch chân) */
.calendar-day.today:not(.selected-day) {
  position: relative;
  background-color: transparent;
  color: #2196f3;
  font-weight: bold;
  border: none;
}
/* Chấm tròn dưới ngày hôm nay */
.calendar-day.today:not(.selected-day)::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background-color: #2196f3;
  border-radius: 50%;
}
/* Hover vào hôm nay không được chọn */
.calendar-day.today:not(.selected-day):hover {
  background-color: #ffeb99; /* nền vàng nhạt */
  color: #2196f3;
}

/* Cuối tuần không được chọn */
.calendar-table td.weekend a.calendar-day:not(.selected-day),
.calendar-table td.weekend span.calendar-day:not(.selected-day) {
  color: red;
}
.calendar-day.selected-day.today::after {
  content: '';
  position: absolute;
  bottom: 2px; /* hoặc -6px nếu muốn xa hơn nữa */
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background-color: #2196f3;
  border-radius: 50%;
}
.calendar-day.today::after {
  transition: transform 0.2s ease;
}
.calendar-day.today:hover::after {
  transform: translateX(-50%) scale(1.3);
}
.calendar-day.today.selected-day:hover::after {
  background-color: #ffffff; /* hoặc màu tương phản nếu nền xanh */  
}