/*
 * Thay thế checkbox của nút chọn lịch cá nhân thành hình ngôi sao của Bootstrap 5
 *
 */
 
/* Ẩn checkbox gốc chỉ với id star-toggle */
.event-check {
  display: none;
}

/* Label biến thành icon ngôi sao */
label.star {
  cursor: pointer;
  display: inline-block;
}

/* Outline star khi unchecked */
label.star .bi-star {
  font-size: 1.5rem;
  color: gold;
  display: inline;
  transition: color 0.2s;
}

/* Fill star mặc định ẩn */
label.star .bi-star-fill {
  font-size: 1.5rem;
  color: gold;
  display: none;
  transition: color 0.2s;
}

/* Khi checked: ẩn outline, hiện fill */
.event-check:checked + label.star .bi-star {
  display: none;
}
.event-check:checked + label.star .bi-star-fill {
  display: inline;
}