@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@700&family=Quicksand:wght@400;600;700&display=swap');

/* ===== KHAI BÁO BIẾN TOÀN CỤC (Đã chuyển lên đầu file) ===== */
:root {
  --shadow: 0;
}
/* ===== BASE ===== */
body {
  background: #020617;
  color: white;
  font-family: 'Quicksand', Arial, sans-serif;
  display: flex;
  justify-content: center;
  padding: 30px 10px; /* Thêm lề trái/phải 10px để card không bị dính chặt mép màn hình */
  box-sizing: border-box;
}

/* ===== CARD ===== */
.card {
  max-width: 500px;
  width: 100%;
  background: #111827;
  padding: 20px 10px; /* Giảm nhẹ padding trái/phải để nhường không gian cho ô vuông co giãn */
  border-radius: 40px;
  text-align: center;
  box-sizing: border-box; /* Ép card tính toán kích thước thông minh, chống tràn viền tuyệt đối */
}

/* ===== TIÊU ĐỀ (Lịch Âm Việt Nam) ===== */
.title {
  font-size: 21px !important;  /* Hạ xuống 21px để vừa khít 1 hàng ngang */
  font-weight: 600;            
  color: #ffffff;
  margin-top: 0px;             
  margin-bottom: 0px;          
  letter-spacing: 0.5px;         
  display: flex;
  justify-content: center;        /* Căn giữa dòng tiêu đề */
  align-items: center;         
  gap: 6px;                       /* Khoảng cách giữa chữ Lịch Âm VN và Năm */
  white-space: nowrap;            /* Cấm tuyệt đối xuống dòng */
}

/* Định dạng chữ Năm kế bên chữ Lịch Âm Việt Nam */
.title-year {
  font-size: 21px !important;
  font-weight: 600;
  color: #a78bfa;                /* Giữ nguyên màu tím nhạt của class weekday cũ */
}

/* ===== CLOCK ===== */
.clock {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 56px !important;              
  font-weight: 700;                        
  color: #22d3ee;                          /* ĐÃ SỬA: Đổi từ xanh neon sang xanh cyan giống màu Âm Lịch */
  margin: 15px 0;
  letter-spacing: 3px;                     
  
  /* ĐÃ SỬA: Cập nhật hiệu ứng phát sáng đèn LED theo tông màu xanh cyan mới */
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.5), 
               0 0 20px rgba(34, 211, 238, 0.2);
}

/* ===== DƯƠNG LỊCH (Đã căn chỉnh) ===== */
.solar {
  font-size: 20px;
  color: #ffffff;
  font-weight: 400;
  margin: 10px 0 1px 0;          /* Dùng margin trên và dưới bằng nhau để tạo sự cân đối */
  padding: 10px;
}


/* ===== THỨ ===== */
.weekday {
  font-size: 20px !important;  /* Tăng kích thước cho phần thứ */
  font-weight: 600;
  color: #a78bfa;              /* Màu tím nhạt hoặc bạn có thể đổi thành #22d3ee cho đồng bộ */
  margin-bottom: 10px;
}

/* ===== LUNAR TEXT (ĐÃ ĐỒNG BỘ DẠNG ĐỒNG HỒ) ===== */
.lunar {
  font-family: 'Chakra Petch', sans-serif; /* Đổi sang font chữ của đồng hồ */
  font-size: 50px;
  font-weight: 700;                        /* Làm đậm nét giống đồng hồ */
  color: #22d3ee;                          /* Giữ màu xanh cyan */
  margin: 10px 0;
  letter-spacing: 2px;                     /* Tạo độ giãn chữ nhẹ cho giống phong cách LED */
  
  /* Hiệu ứng phát sáng đèn LED y hệt đồng hồ */
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.5), 
               0 0 20px rgba(34, 211, 238, 0.2);
}

/* ===== ĐẢM BẢO CHỮ N MÀU ĐỎ CŨNG CÓ HIỆU ỨNG PHÁT SÁNG ĐỒNG BỘ ===== */
.leap-badge {
  display: inline;
  margin-left: 2px;
  margin-right: 1px;
  padding: 0;
  color: #ef4444;                          /* Giữ chữ N màu đỏ */
  font-weight: 700;
  
  /* Hiệu ứng phát sáng màu đỏ riêng cho chữ N để không bị lệch tông */
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.6), 
               0 0 20px rgba(239, 68, 68, 0.3);
}

/* ===== CAN CHI ===== */
.canchi {
  margin-top: 10px;
  padding: 8px 16px;          /* TĂNG padding hai bên từ 10px lên 16px để chữ không bị dính sát sạt vào mép bo góc */
  border-radius: 10px;
  background: #1e1e2f;
  color: #ffffff;
  font-size: 18px;
  font-weight: 500;
  transition: 0.2s;
  display: flex;             
  justify-content: space-between; /* THAY ĐỔI: Đẩy Ngày dạt sang trái, Năm dạt sang phải, Tháng ở chính giữa */
  /* gap: 15px; */               /* Bạn có thể xóa hoặc tắt dòng gap này đi vì space-between sẽ tự tự động tính khoảng cách đều */
  white-space: nowrap;
}

.canchi:hover {
  transform: scale(1.02);
}

.canchi-year {
  color: #ffcc66;
  font-weight: 700;
}

.canchi-month {
  color: #66d9ff;
  font-weight: 600;
}

.canchi-day {
  color: #ff6b81;
  font-weight: 600;
}

/* ===== HOLIDAY ===== */
.holiday-item {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: 6px;
}

.holiday {
  margin-top: 10px;
  padding: 8px 12px;
  background: #fff3cd;
  color: #856404;
  border-left: 4px solid #ffcc00;
  border-radius: 6px;
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.3;
  opacity: 0.9;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

/* ===== CALENDAR (ĐÃ KHÔI PHỤC NÚT BẤM TRƯỢT THÁNG) ===== */
.calendar {
  margin-top: 10px !important;
  background: #1f2937;
  padding: 10px;                /* Hạ từ 15px xuống 10px để phần lịch tháng ôm gọn gàng bên trong card */
  border-radius: 20px;
  box-sizing: border-box;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

/* MỞ KHÓA: Cho phép hiển thị nút bấm điều hướng tháng */
.calendar-header button {
  display: inline-block;
  background: #374151;
  border: none;
  color: white;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: 0.2s;
}

.calendar-header button:hover {
  background: #4b5563;
}

#calendar-title {
  font-weight: 600;
  font-size: 23px;
  color: #22d3ee;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;                              /* Hạ từ 6px xuống 4px để dồn các ô khít lại gần nhau, loại bỏ hoàn toàn lỗi tràn */
}

.calendar-grid > div:not(.day) {
  font-size: 16px !important;    /* Tăng kích thước (mặc định thường là 12px-14px), bạn có thể chỉnh lên 18px nếu thích */
  font-weight: 700;              /* Làm chữ đậm lên rõ nét */
  color: #a78bfa;                /* Đổi màu sang tím nhạt sang trọng cho đồng bộ với giao diện */
  padding: 6px 0;                /* Tạo khoảng cách trên dưới cho thoáng rộng */
  text-align: center;
}

/* ========================================================
   CẬP NHẬT Ô NGÀY TRONG LỊCH THÁNG (DƯƠNG TRÊN TRÁI - ÂM DƯỚI PHẢI)
   ======================================================== */
.day {
  position: relative; 
  aspect-ratio: 1 / 1;                    /* KHÓA CỨNG HÌNH VUÔNG: Chiều cao luôn bằng chiều rộng trên mọi thiết bị */
  background: #111827;
  border-radius: 8px;
  padding: 4px;                          /* Thu gọn padding một chút để không bị đè vào chữ khi ô vuông lại */
  display: flex;
  flex-direction: column;
  justify-content: space-between;        /* Đẩy ngày dương lên đỉnh, ngày âm xuống đáy */
  box-sizing: border-box;
}

/* Khớp chính xác class .solar-num từ file app.js */
.solar-num {
  align-self: flex-start;                /* Ép sát về góc bên TRÁI */
  text-align: left;
  font-size: 18px !important;            /* Điều chỉnh thành 16px để chữ Dương nằm vừa vặn trong cấu trúc vuông */
  font-weight: 700;
  color: #ffffff;
}

/* Khớp chính xác class .lunar-num từ file app.js */
.lunar-num {
  align-self: flex-end;                  /* Ép sát về góc bên PHẢI */
  text-align: right;
  font-size: 14px !important;            /* Điều chỉnh thành 11px để chữ Âm cân đối và đẹp mắt */
}


/* Đảm bảo chữ "today" khi được chọn không làm lệch layout */
.today .solar-num {
  color: black !important;
}
.today .lunar-num {
  color: #374151 !important;            /* Đổi màu chữ âm lịch một chút khi là ngày hôm nay để dễ nhìn */
}

.today {
  background: #22d3ee;
  color: black !important;
}

/* Làm nổi bật ô ngày có sự kiện */
.calendar-day.has-event {
  background-color: #fff9e6; /* Đổi nền vàng nhạt nhẹ nhàng */
  position: relative;
}

/* Định vị icon nhỏ nằm ở góc ô lịch (Đã sửa: Hắt hẳn sang góc dưới phía trái) */
.grid-event-icon {
  position: absolute;
  bottom: 2px;
  left: 2px;
  right: auto;
  display: flex;       /* Kích hoạt flexbox để xếp hàng ngang */
  gap: 2px;            /* Khoảng cách nhỏ giữa các icon nếu có từ 2 cái trở lên */
  font-size: 10px;     
  opacity: 0.9;
  line-height: 1;
  pointer-events: none;
}


/* ===== MÀU SẮC CHO Ô NGÀY ĐƯỢC CHỌN VÀO ===== */
.day.selected-day {
  background: #3b82f6 !important; /* Đổi thành màu xanh dương nổi bật (hoặc màu bạn thích) */
  border: 2px solid #60a5fa;     /* Thêm viền sáng xung quanh ô */
}

/* Đảm bảo chữ dương và chữ âm bên trong ô được chọn vẫn dễ nhìn */
.day.selected-day .solar-num {
  color: #ffffff !important;
}
.day.selected-day .lunar-num {
  color: #e0f2fe !important;      /* Chữ âm lịch chuyển sang màu xanh dương nhạt cực kỳ rõ */
  opacity: 1 !important;
}

/* ===== MOON CHỈNH CHO PHẦN TRĂNG ===== */

.moon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}

.moon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 35% 35%, #ffea80 0%, #ffcc00 25%, #e68a00 100%);
  box-shadow: 0 0 30px 6px rgba(255, 255, 255, 0.4), 
              0 0 90px 35px rgba(255, 204, 0, 0.05);
  transition: box-shadow 0.3s ease;
}

.moon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: inset var(--inset-x) 0px 15px 0px #111111; 
  transition: box-shadow 0.1s ease;
}


/* ===== FOOTER ===== */
.footer {
  margin-top: 15px;                             /* Khoảng cách giãn xuống dưới lịch */
  text-align: center;
  font-family: 'Quicksand', Arial, sans-serif;  /* Font chữ Quicksand giống Can chi */
  font-size: 18px;                              /* Cỡ chữ vừa vặn */
  font-weight: 600;                             /* Độ đậm chữ vừa phải */
  color: #ffcc66;                               /* Màu vàng hoàng kim sang trọng giống Can Chi Năm */
  opacity: 0.9;                                 /* Tăng độ hiển thị rõ nét hơn */
  padding-bottom: 1px;                          /* Khoảng cách an toàn với đáy */
}