.amlich {
  border-collapse: collapse;
  font-size: 16px;
  font-family: Roboto, sans-serif;
  /* === BỔ SUNG SỬA LỖI NGANG === */
  table-layout: fixed; /* Buộc các cột phải rộng bằng nhau */
  width: 100%;         /* Đảm bảo bảng luôn rộng 100% container */
  /* === KẾT THÚC BỔ SUNG === */
}
.calendar { font-size: 14px; }
.calendar td { background-color: none;  }
.calendar-month {
  background-color: #1e8cbe !important;
  color: #fff; text-shadow: 0px 0px 3px #000;
  padding: 6px; font-weight: bold; text-transform: uppercase;
  font-size: 25px !important;
}
.amlich-tennam {
  text-align: center;
  font-weight: bold;
  color: #ffffff; /* THAY ĐỔI: Đổi màu chữ/icon thành trắng */
  background-color: #025227;
  font-size: 20px;
  font-family: Roboto, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center; /* THÊM MỚI: Căn giữa toàn bộ cụm điều khiển */
  gap: 10px; /* THÊM MỚI: Tạo khoảng cách cho đẹp mắt */
}
.amlich .calendar-month,
.amlich .calendar-b-left,
.amlich .calendar-b-right { 
  text-align: center; padding: 4px 0; 
  /* --- THAY ĐỔI: Tăng từ 12px lên 14px --- */
  font-size: 16px; 
}

/* --- BỔ SUNG: CSS CHO MỆNH NGÀY & TUỔI XUNG (2 DÒNG) --- */
.amlich .calendar-menh-xung {
  padding: 4px 0;
  font-size: 14px; /* Giống kích thước chữ của các chi tiết khác */
  text-align: center;
  border-top: 1px solid #ddd; /* Thêm đường kẻ phân cách */
  background-color: none; /* Giống màu nền các ô khác */
  line-height: 1.4;
}
/* === THAY ĐỔI: Thêm '>' để chỉ target span con trực tiếp === */
.amlich .calendar-menh-xung > span {
  display: block; /* Đảm bảo mỗi span 1 dòng */
}
/* === THÊM MỚI: Căn chỉnh Hoàng Đạo trên panel === */
#amlich-hoang-dao-status {
  margin-left: 8px; /* Thêm khoảng cách với Mệnh ngày */
  white-space: nowrap; /* Đảm bảo dấu chấm và chữ không bị vỡ dòng */
}
/* === KẾT THÚC THÊM MỚI === */
/* --- KẾT THÚC BỔ SUNG --- */

.amlich .calendar-day { text-align: center; font-weight: bold; }
.amlich .calendar-day .day-num { 
  font-size: 85px; 
  font-family: Roboto, sans-serif; line-height: 100%; color: #14570b; 
}
/* --- BỔ SUNG: Định dạng cho "Thứ Hai" (Tên thứ trong box hôm nay) --- */
.amlich .calendar-day .day-tuan {
  font-size: 25px;
  font-weight: bold;
  color: #14570b; /* Giống màu của số ngày */
  margin-top: 5px; /* Thêm chút khoảng cách */
}
.amlich .lunar-day-num { 
  font-size: 48px; 
  line-height: 100%; font-weight: bold; color: #300434; 
}
.amlich .calendar-holiday,
.amlich .calendar-hoangdao { 
  padding: 0 4px 4px 4px; 
  /* --- THAY ĐỔI: Tăng từ 12px lên 14px --- */
  font-size: 14px; 
  text-align: center; 
}

.amlich .calendar-hoangdao { 
  padding: 0 4px 4px 4px; 
  font-size: 14px; 
  text-align: center; 
}

/* --- BỔ SUNG: CSS CHO CHÚ THÍCH (LEGEND) --- */
.calendar-legend {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid #ddd; /* Đường kẻ phân cách với Giờ hoàng đạo */
  font-size: 13px; /* Hơi nhỏ hơn một chút */
}
.calendar-legend b {
  color: #333; /* Màu chữ đậm cho dễ đọc */
}
.calendar-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
  margin-bottom: 2px; /* Căn chỉnh với text */
  box-shadow: 0 0 2px rgba(0,0,0,0.4);
}
.calendar-legend-dot.green {
  background-color: #28a745; /* Màu xanh lá cây (giống ở trên) */
}
.calendar-legend-dot.gray {
  background-color: #868e96; /* Màu xám (giống ở trên) */
}
/* --- KẾT THÚC BỔ SUNG --- */

.amlich .calendar-holiday { color: #ff0000; font-weight: bold; }
.amlich a { text-decoration: none; color: white; }
.amlich a:hover { color: #eedd6d; }
.amlich .tenthang,
.amlich .navi-l,
.amlich .navi-r {
  text-align: center;
  padding: 8px;
  background-color: #f94a4a;
  color: #fff;
  font-weight: bold;
}

.amlich .tenthang { 
    text-shadow: 0px 0px 3px #000;
    font-size: 22px; /* Thêm dòng này */
}

.amlich .tenthang { text-shadow: 0px 0px 3px #000; }
.amlich .navi-l { 
  font-size: 22px;
  text-align: center; /* Thêm hoặc sửa dòng này */
}
.amlich .navi-r { 
  font-size: 14px;
}
.amlich .ngaytuan {
  text-align: center;
  color: #330033;
  background-color: #ddd;
  padding: 3px;
  width: 14.286%;
  /* --- THAY ĐỔI: Tăng từ 10px lên 14px --- */
  font-size: 14px; 
  font-weight: bold;
}
.amlich .ngaythang,
.amlich .homnay,
.amlich .tet,
.amlich .leam,
.amlich .leduong {
  cursor: pointer;
  border-bottom: solid 1px #eee;
  padding: 3px;
  width: 14.286%;
  vertical-align: top; 
  min-height: 70px; 
  box-sizing: border-box; 
  position: relative; /* --- BỔ SUNG: Để định vị dấu chấm --- */
}

/* --- BỔ SUNG: CSS CHO DẤU CHẤM HOÀNG ĐẠO/HẮC ĐẠO --- */
.amlich-dot-wrapper {
  position: absolute;
  top: 4px; /* Căn lề trên */
  left: 4px; /* Căn lề trái */
  width: 8px;
  height: 8px;
}
.amlich-hd-dot, .amlich-hkd-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 2px rgba(0,0,0,0.4); /* Thêm bóng mờ cho nổi bật */
  
  /* --- BỔ SUNG ĐỂ SỬA LỖI HIỂN THỊ PANEL --- */
  display: inline-block;
  vertical-align: middle;
  margin-right: 3px;
  margin-bottom: 2px;
  /* --- KẾT THÚC BỔ SUNG --- */
}
.amlich-hd-dot {
  background-color: #28a745; /* Màu xanh lá cây */
}
.amlich-hkd-dot {
  background-color: #868e96; /* Màu xám */
}
/* --- KẾT THÚC BỔ SUNG --- */

.amlich .ngaythang div,
.amlich .homnay div,
.amlich .tet div,
.amlich .leam div,
.amlich .leduong div { line-height: 110%; }
.amlich .ngaythang { color: #5a5c5b; }
.amlich tr:nth-child(odd) td.ngaythang:nth-child(odd) { background-color: #f9f9f9; }
.amlich tr:nth-child(odd) td.ngaythang:nth-child(even) { background-color: #fff; }
.amlich tr:nth-child(even) td.ngaythang:nth-child(odd) { background-color: #fff; }
.amlich tr:nth-child(even) td.ngaythang:nth-child(even) { background-color: #f9f9f9; }
.amlich tr td.ngaythang:hover { background-color: #f5f5f5 !important }
.amlich .homnay { background-color: #fcf8e3; color: #fff; }
.amlich .homnay:hover { background-color: #faf2cc; }
.amlich .tet { background-color: #fbf3f3; }
.amlich .tet:hover { background-color: #ebcccc }
.amlich .leam { background-color: #edf4f8; }
.amlich .leam:hover { background-color: #c4e3f3 }
.amlich .leduong { background-color: #f3fcef; }
.amlich .leduong:hover { background-color: #d0e9c6 }
.amlich .am { 
  text-align: center;
  /* --- THAY ĐỔI: Tăng từ 14px lên 16px --- */
  font-size: 18px; 
  color: #090802; 
}
.amlich .am2 { 
  text-align: center;
  /* --- THAY ĐỔI: Tăng từ 14px lên 16px --- */
  font-size: 16px; 
  color: #1013a8; 
  font-weight: bold; 
}
.amlich .t2t6 { 
  text-align: center;
  font-size: 18px;
  color: #5a5c5b; 
  font-weight: bold; 
}
.amlich .t7 { 
  font-weight: bold; 
  text-align: center;
  font-size: 18px;
  color: blue; 
}
.amlich .cn { 
  font-weight: bold; 
  text-align: center;
  font-size: 18px;
  color: red; 
}

/* Định dạng cho Can Chi (ví dụ: Giáp Tý) */
.amlich .amlich-canchi {
  /* --- THAY ĐỔI: Tăng từ 10px lên 13px --- */
  font-size: 13px;
  color: #1f1e1e;
  text-align: center;
  line-height: 1.2;
  padding-top: 3px;
}

/* Định dạng cho Tên ngày lễ */
.amlich .amlich-holiday-text {
  /* --- THAY ĐỔI: Tăng từ 10px lên 13px --- */
  font-size: 13px;
  font-weight: bold;
  color: #ff0000; /* Màu đỏ cho dễ thấy */
  text-align: center;
  line-height: 1.2;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

.amlich .leam .amlich-holiday-text { color: #033046; }
.amlich .leduong .amlich-holiday-text { color: #0d3b0d; }
.amlich .tet .amlich-holiday-text { color: #ff0000; }
.amlich .homnay .amlich-holiday-text { color: #8a6d3b; }

@media (max-width: 600px) {
  .amlich, .calendar {
    font-size: 14px;
  }
  .amlich .ngaytuan {
    font-size: 14px;
    padding: 2px;
  }
  .amlich .am, .amlich .am2 {
     font-size: 13px; /* Điều chỉnh cho mobile */
  }
  .amlich .t2t6, .amlich .t7, .amlich .cn {
     font-size: 16px; /* Điều chỉnh cho mobile */
  }
}

.amlich .ngaythang, .amlich .homnay, .amlich .tet, .amlich .leam, .amlich .leduong {
  transition: background-color 0.2s ease-in-out; 
}

:root {
  --amlich-header-bg: #f94a4a;
  --amlich-header-text: #fff;
  --amlich-today-bg: #fcf8e3;
  --amlich-sunday-text: red;
}

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

.amlich .homnay {
  background-color: var(--amlich-today-bg);
}

/* --- BỔ SUNG: CSS CHO CÂU QUOTE NGẪU NHIÊN --- */
.amlich-quote-wrapper {
  padding: 10px;
  margin-top: 5px; /* Tách biệt khỏi lịch */
  border-top: 1px solid #eee;
  background-color: #f9f9f9;
  /* Đảm bảo chiều rộng khớp với lịch nếu width được set */
  box-sizing: border-box; 
}
.amlich-quote-wrapper p {
  font-size: 14px;
  font-style: italic;
  color: #050563;
  margin: 0;
  text-align: center;
  line-height: 1.4;
}
/* --- KẾT THÚC BỔ SUNG --- */


/* === BẮT ĐẦU THÊM MỚI: CSS CHO POPUP === */

/* Icon mở popup trên tiêu đề */
/* === BẮT ĐẦU SỬA ĐỔI: CSS CHO ICON MỞ POPUP === */

/* Wrapper cho icon + text */
.amlich .tenthang .amlich-open-modal {
  cursor: pointer;
  margin-left: 10px;
  display: inline-flex; /* Dùng flex để căn chỉnh icon và text */
  align-items: center; /* Căn giữa theo chiều dọc */
  vertical-align: text-bottom; /* Căn lề dưới của cụm này với chữ "Tháng X Năm Y" */
  transition: all 0.2s ease;
  opacity: 1; /* Hơi mờ 1 chút, nhưng không mất màu */
  /* Đã bỏ filter: grayscale(100%) để icon hiện màu */
  /* === THAY ĐỔI MỚI: Thêm nền và padding === */
  background-color: #173c19; /* Màu nền xanh đậm theo yêu cầu */
  padding: 4px 8px; /* Thêm padding để tạo nút */
  border-radius: 4px; /* Bo góc nhẹ */
  box-shadow: 0 0 3px rgba(0,0,0,0.3); /* Thêm bóng mờ */
}

/* Icon lịch */
.amlich .tenthang .amlich-modal-icon {
  /* Kích thước 2.0em = 2.5 (lần) * 0.8em (kích thước cũ) */
  font-size: 2.0em; 
  line-height: 1; /* Ngăn icon làm tăng chiều cao dòng */
  margin-right: 5px; /* Khoảng cách giữa icon và chữ */
  /* THÊM MỚI: Đảm bảo icon màu trắng */
  color: #fff;
}

/* Chữ "Xem nhanh theo ngày" */
.amlich .tenthang .amlich-modal-text {
  font-size: 0.9em; /* Kích thước chữ (hơi nhỏ hơn tiêu đề) */
  font-weight: normal; /* Bỏ bold (vì tiêu đề đã bold) */
  text-shadow: none; /* Bỏ bóng đổ kế thừa từ .tenthang */
  white-space: nowrap; /* Không cho chữ xuống dòng */
  color: #fff; /* Đảm bảo chữ màu trắng */
}

/* Hiệu ứng khi hover */
.amlich .tenthang .amlich-open-modal:hover {
  opacity: 1;
  transform: scale(1.05); /* Phóng to nhẹ cả cụm */
  background-color: #1b5e20; /* Màu hover sậm hơn một chút */
}

/* === KẾT THÚC SỬA ĐỔI === */

/* Lớp phủ (Overlay) */
.amlich-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  display: flex; /* Dùng flex để căn giữa */
  align-items: center;
  justify-content: center;
}

/* Nội dung Popup */
.amlich-modal-content {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  position: relative;
  padding: 20px;
  width: 410px; /* Độ rộng cố định, bạn có thể điều chỉnh */
  max-width: 90%;
  font-family: Roboto, sans-serif;
  /* === BẮT ĐẦU THÊM MỚI === */
  max-height: 85vh; /* Giới hạn chiều cao tối đa là 85% chiều cao màn hình */
  overflow-y: auto; /* Tự động thêm thanh cuộn dọc nếu nội dung dài hơn */
  box-sizing: border-box; /* Đảm bảo padding không làm tăng kích thước */
  /* === KẾT THÚC THÊM MỚI === */
}

/* Nút đóng (X) */
.amlich-modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 28px;
  font-weight: 300;
  color: #aaa;
  cursor: pointer;
  line-height: 1;
}
.amlich-modal-close:hover {
  color: #333;
}

/* Tiêu đề popup */
.amlich-modal-content h4 {
  margin: 0 0 15px 0;
  font-size: 18px;
  font-weight: bold;
  color: #1e8cbe; /* Giống màu tiêu đề lịch */
  text-align: center;
}

/* Lịch mini bên trong popup */
.amlich-modal-calendar {
  margin-bottom: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
}
/* Tùy chỉnh lịch mini */
.amlich-modal-calendar .amlich {
  font-size: 13px; /* Thu nhỏ font */
  width: 100% !important; /* Ghi đè width */
}
.amlich-modal-calendar .amlich .tenthang {
  padding: 5px; /* Giảm padding tiêu đề */
  font-size: 20px;
}
.amlich-modal-calendar .amlich .ngaytuan {
  font-size: 12px;
  padding: 2px;
}
.amlich-modal-calendar .amlich .ngaythang,
.amlich-modal-calendar .amlich .homnay,
.amlich-modal-calendar .amlich .tet,
.amlich-modal-calendar .amlich .leam,
.amlich-modal-calendar .amlich .leduong {
  min-height: 30px; /* Giảm chiều cao ô */
  padding: 2px;
}
.amlich-modal-calendar .amlich .t2t6,
.amlich-modal-calendar .amlich .t7,
.amlich-modal-calendar .amlich .cn {
  font-size: 14px; /* Giảm font số ngày */
}
.amlich-modal-calendar .amlich .am,
.amlich-modal-calendar .amlich .am2 {
  font-size: 10px; /* Giảm font ngày âm */
}
/* Ẩn các chi tiết thừa trong lịch mini */
.amlich-modal-calendar .amlich .amlich-canchi,
.amlich-modal-calendar .amlich .amlich-holiday-text,
.amlich-modal-calendar .amlich .amlich-dot-wrapper,
.amlich-modal-calendar .amlich .navi-l,
.amlich-modal-calendar .amlich .navi-r,
.amlich-modal-calendar .amlich .amlich-open-modal {
  display: none !important;
}
.amlich-modal-calendar .amlich .tenthang {
  text-align: center !important;
}

/* Form chọn ngày */
.amlich-modal-form .amlich-modal-label {
  display: block;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}
.amlich-modal-form .amlich-modal-selects {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.amlich-modal-form select {
  width: 32%;
  padding: 8px 5px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.amlich-modal-form .amlich-modal-day { width: 25%; }
.amlich-modal-form .amlich-modal-month { width: 40%; }
.amlich-modal-form .amlich-modal-year { width: 32%; }

/* Nút "Xem" */
.amlich-modal-form .amlich-modal-view {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: #1e8cbe;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.amlich-modal-form .amlich-modal-view:hover {
  background-color: #156b95;
}

/* === KẾT THÚC THÊM MỚI: CSS CHO POPUP === */

/* === BẮT ĐẦU THÊM MỚI: HIGHLIGHT NGÀY ĐƯỢC CHỌN TRONG POPUP === */
.amlich-modal-calendar .amlich .ngay-da-chon {
  background-color: #1e8cbe !important; /* Màu xanh highlight */
  color: #fff !important;
  border-radius: 4px;
}
.amlich-modal-calendar .amlich .ngay-da-chon .t2t6,
.amlich-modal-calendar .amlich .ngay-da-chon .t7,
.amlich-modal-calendar .amlich .ngay-da-chon .cn {
  color: #fff; /* Chữ ngày màu trắng */
}
.amlich-modal-calendar .amlich .ngay-da-chon .am,
.amlich-modal-calendar .amlich .ngay-da-chon .am2 {
  color: #eee; /* Chữ âm lịch màu xám nhạt */
}
/* === KẾT THÚC THÊM MỚI === */

.amlich-modal-separator {
  border: 0;
  border-top: 1px solid #eee;
  margin: 15px 0;
}
.amlich-modal-view-lunar {
    /* Dán các thuộc tính đã copy vào đây */
    width: 100%;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    /* background-color: #1e8cbe; */ /* (Thuộc tính này bị ghi đè bởi dòng dưới) */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;

    /* Đây là màu nền gốc của bạn */
    background-color: #134413; /* Màu xanh lá */
}
.amlich-modal-view-lunar:hover {
    background-color: #4cae4c;
}

/* === BỔ SUNG: CSS CHO ĐIỀU HƯỚNG LỊCH NĂM === */
.amlich .amlich-tennam {
  /* Chuyển sang flex để chứa 3 mục: lùi, tiêu đề, tiến */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
}

.amlich .year-nav-title {
  flex-grow: 1; /* Cho phép tiêu đề chiếm phần không gian còn lại */
  text-align: center;
  cursor: pointer; /* Giữ lại con trỏ cho onClick (nếu có) */
}

.amlich .year-nav-prev,
.amlich .year-nav-next {
  font-size: 24px;
  font-weight: bold;
  color: #046bd2;
  text-decoration: none;
  cursor: pointer;
  padding: 5px 8px; /* Tăng vùng nhấn */
  line-height: 1;
  border-radius: 4px;
}
.amlich .year-nav-prev:hover,
.amlich .year-nav-next:hover {
  background-color: rgba(0,0,0,0.2); /* Hiệu ứng hover */
}

/* Lớp 'disabled' khi đạt giới hạn 1900 hoặc 2052 */
.amlich .year-nav-prev.disabled,
.amlich .year-nav-next.disabled {
  color: #046bd2; 
  opacity: 0.3;
  cursor: default;
  pointer-events: none; /* Không cho click */
}

/* --- BẮT ĐẦU THÊM MỚI: CSS CHO FORM CHỌN NĂM --- */

.amlich-year-nav-form {
  display: flex;
  align-items: center;
  gap: 5px;

}

.amlich-year-nav-form select,
.amlich-year-nav-form button {
  padding: 6px 8px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #ccc;
  height: 32px;
  box-sizing: border-box;
  font-family: Roboto, sans-serif;
}

.amlich-year-nav-form button {
  background-color: #fff;
  color: #18613a;
  font-weight: bold;
  cursor: pointer;
  border: none;
  transition: background-color 0.2s ease;
}

.amlich-year-nav-form button:hover {
  background-color: #edf6a4;
}

/* --- KẾT THÚC THÊM MỚI --- */

/* === KẾT THÚC BỔ SUNG === */


/* === BẮT ĐẦU CSS ĐIỀU HƯỚNG (DESKTOP / TABLET / MOBILE) === */

/* --- 1. CSS MẶC ĐỊNH (DESKTOP) --- */
.amlich .navi-r {
  text-align: center;
  vertical-align: middle;
}
.amlich-nav-form {
  display: inline-flex;  /* Giữ các mục trên 1 hàng */
  flex-direction: row; /* Xếp ngang */
  align-items: center;  
  gap: 5px;             
  width: 95%; /* Chiếm 95% ô chứa nó */
  max-width: 250px; /* Độ rộng tối đa cho 3 mục nằm ngang */
  margin: 0 auto; /* Căn giữa form */
}

/* CSS chung cho select và button */
.amlich-nav-form .amlich-nav-select,
.amlich-nav-form .amlich-nav-button {
  padding: 6px 8px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #ccc;
  height: 32px; /* Đồng bộ chiều cao */
  box-sizing: border-box;
}

/* Nút XEM */
.amlich-nav-form .amlich-nav-button {
  background-color: #173c19; 
  color: white;
  font-weight: bold;
  cursor: pointer;
  border: none;
  transition: background-color 0.2s ease;
}
.amlich-nav-form .amlich-nav-button:hover {
  background-color: #1b5e20; 
}

/* Độ rộng 2 dropdown trên desktop */
.amlich-nav-form select[name="amlich-nav-month"] {
  min-width: 105px; 
}
.amlich-nav-form select[name="amlich-nav-year"] {
  min-width: 80px; 
}


/* --- 2. CSS CHO TABLET (Yêu cầu 1: Nút XEM xuống dòng) --- */
/* Áp dụng cho màn hình tablet, ví dụ từ 769px đến 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
  .amlich .navi-r {
     /* Đảm bảo ô .navi-r có đủ không gian */
     padding-left: 10px;
     padding-right: 10px;
  }
  .amlich-nav-form {
    display: inline-flex;
    flex-wrap: wrap; /* Cho phép rớt dòng */
    gap: 5px;
    width: 100%; /* Chiếm hết ô .navi-r */
    max-width: 200px; /* Giới hạn độ rộng form (vừa đủ 2 select) */
    justify-content: center; 
  }
  .amlich-nav-form .amlich-nav-select {
     flex-basis: 48%; /* 2 select chiếm 1 hàng */
     width: 48%;
  }
  /* Reset min-width kế thừa từ desktop */
  .amlich-nav-form select[name="amlich-nav-month"],
  .amlich-nav-form select[name="amlich-nav-year"] {
     min-width: 0; 
  }
  .amlich-nav-form .amlich-nav-button {
     flex-basis: 100%; /* Nút XEM chiếm 1 hàng (rớt xuống) */
     width: 100%;
  }
}


/* --- 3. CSS CHO MOBILE (Yêu cầu 2: Giữ thanh nav 1 hàng) --- */
/* Áp dụng cho màn hình mobile (768px trở xuống) */
@media (max-width: 768px) {
	
  /* YÊU CẦU 2: Giữ thanh nav nằm ngang nhưng tối ưu không gian */
  /* KHÔNG thay đổi display của .navi-l, .tenthang, .navi-r để chúng giữ là table-cell */
  
  /* Ẩn bớt các nút nav không cần thiết bên trái */
  
  /* === BẮT ĐẦU SỬA LỖI: HIỂN THỊ ICON & CHỮ XEM NHANH TRÊN MOBILE === */

/* Thay đổi .tenthang để căn chỉnh dọc tốt hơn */
.amlich .tenthang {
  vertical-align: middle; /* Căn giữa cụm icon/chữ với chữ "Tháng/Năm" */
}

/* Chuyển cụm icon và chữ sang xếp dọc */
.amlich .tenthang .amlich-open-modal {
  display: inline-flex;  /* Giữ nó inline với chữ Tháng/Năm */
  flex-direction: column; /* **Quan trọng: Xếp dọc các mục bên trong** */
  align-items: center;    /* Căn giữa icon và chữ theo chiều ngang */
  margin-left: 5px;       /* Giảm khoảng cách với chữ Tháng/Năm */
  padding: 3px 6px; /* Giảm padding trên mobile */
}

/* Thu nhỏ icon lại một chút */
.amlich .tenthang .amlich-modal-icon {
  font-size: 1.6em;       /* Giảm kích thước icon */
  margin-right: 0;        /* Bỏ margin phải không còn cần thiết */
}

/* Thay vì ẩn, chúng ta sẽ hiển thị và định dạng lại chữ */
.amlich .tenthang .amlich-modal-text {
  display: block !important; /* **Quan trọng: Ghi đè để chữ luôn hiện** */
  font-size: 14px;        /* Thu nhỏ chữ */
  line-height: 1.1;       /* Giảm khoảng cách dòng */
  font-weight: normal;
  margin-top: 2px;
}

/* === KẾT THÚC SỬA LỖI === */
  /* Giảm cỡ chữ tiêu đề */
  .amlich .tenthang {
    font-size: 16px; 
    padding: 8px 0; /* Giảm padding */
  }
  /* Giảm padding navi-l và căn giữa */
  .amlich .navi-l {
      padding: 8px 0;
      font-size: 20px;
      text-align: center;
  }
  
  /* Cấu hình form .navi-r (bên phải) */
  .amlich .navi-r {
    padding: 5px; /* Giảm padding ô chứa form */
  }
  .amlich-nav-form {
    display: flex; 
    flex-direction: column; /* Xếp dọc các mục trong form */
    width: 100%; /* Chiếm 100% ô .navi-r */
    max-width: 110px; /* Giới hạn độ rộng (tùy chỉnh nếu cần) */
    margin: 0 auto; /* Căn giữa form */
    gap: 5px;
  }
  
  /* Select và Button trong form (xếp dọc) */
  .amlich-nav-form .amlich-nav-select,
  .amlich-nav-form .amlich-nav-button {
    width: 100%; /* Chiếm 100% form (đã xếp dọc) */
    min-width: 0; /* Reset min-width */
    padding: 5px; /* Giảm padding 1 chút */
    height: 30px; /* Giảm chiều cao */
    font-size: 13px;
  }
  /* Reset min-width kế thừa từ desktop */
  .amlich-nav-form select[name="amlich-nav-month"],
  .amlich-nav-form select[name="amlich-nav-year"] {
     min-width: 0; 
  }
  
  /* --- CÁC TỐI ƯU MOBILE KHÁC (Giữ nguyên từ code cũ) --- */
  
  /* Ẩn Can Chi và Lễ để tránh vỡ layout ngang */
  .amlich .amlich-canchi,
  .amlich .amlich-holiday-text {
    display: none;
  }
  
  /* Đảm bảo các ô ngày có padding tối thiểu và giảm chiều cao */
  .amlich .ngaythang,
  .amlich .homnay,
  .amlich .tet,
  .amlich .leam,
  .amlich .leduong {
    padding: 2px; /* Giảm padding */
    min-height: 55px; /* Giảm chiều cao tối thiểu */
  }
  
  .amlich .t2t6, .amlich .t7, .amlich .cn {
    font-size: 16px; 
  }
  .amlich .am, .amlich .am2 {
    font-size: 12px; 
  }
  /* === BỔ SUNG: SỬA LAYOUT LỊCH NĂM TRÊN MOBILE === */

/* 1. Cho phép các mục trong tiêu đề Lịch Năm (nút, tên, form) xuống dòng */
.amlich .amlich-tennam {
    flex-wrap: wrap; /* Cho phép các mục rớt dòng */
    gap: 5px;        /* Giảm khoảng cách một chút */
}

/* 2. Style riêng cho form chọn năm (amlich-year-nav-form) trên mobile */
.amlich-year-nav-form {
    display: flex;
    flex-direction: column; /* **Quan trọng: Xếp dọc dropdown và nút XEM** */
    align-items: center;    /* Căn giữa */
    width: 100%;            /* Chiếm 100% chiều rộng để rớt xuống */
    max-width: 100px;       /* Giới hạn độ rộng của form cho đẹp mắt */
    margin: 5px auto 0 auto; /* Tự động căn giữa và thêm khoảng cách ở trên */
}

/* 3. Bắt buộc dropdown và nút XEM chiếm 100% độ rộng của form (đã xếp dọc) */
.amlich-year-nav-form select,
.amlich-year-nav-form button {
    width: 100%;
}

/* === KẾT THÚC BỔ SUNG === */
/* === BỔ SUNG: THU NHỎ VÀ CĂN LẠI DẤU CHẤM TRÊN MOBILE === */

/* 1. Căn lại vị trí của wrapper (khung chứa dấu chấm) */
.amlich-dot-wrapper {
    top: 2px;    /* Giảm lề trên (mặc định là 4px) */
    left: 2px;   /* Giảm lề trái (mặc định là 4px) */
    width: 5px;  /* Thu nhỏ kích thước wrapper */
    height: 5px; /* Thu nhỏ kích thước wrapper */
}

/* 2. Thu nhỏ kích thước của chính dấu chấm */
.amlich-hd-dot, .amlich-hkd-dot {
    width: 5px;  /* Phải khớp với wrapper */
    height: 5px; /* Phải khớp với wrapper */
}

/* === KẾT THÚC BỔ SUNG === */
} /* Kết thúc @media (max-width: 768px) */
/* Tăng độ ưu tiên để buộc các nút tiến/lùi năm có màu trắng */
.amlich-tennam .year-nav-prev,
.amlich-tennam .year-nav-next {
    color: #ffffff;
}

/* THÊM VÀO KHI CẦN: Nếu các nút là icon (thường là thẻ <i>) nằm trong thẻ <a>, 
   chúng ta cần nhắm mục tiêu vào thẻ <i> đó (vì <a> có thể chỉ là khung chứa) */
.amlich-tennam .year-nav-prev i,
.amlich-tennam .year-nav-next i {
    color: #ffffff;
}

/* Hiệu ứng di chuột: Làm tối màu nút khi con trỏ chuột chạm vào */
.amlich-tennam .year-nav-prev:hover,
.amlich-tennam .year-nav-next:hover {
    /* Tùy chọn 1: Giữ nguyên màu trắng và làm tối nền */
    background-color: #f94a4a; /* Màu đỏ đậm hơn so với nền #025227 */
    text-decoration: none; /* Bỏ gạch chân (nếu nút là thẻ <a>) */
    cursor: pointer; /* Đảm bảo con trỏ chuột hiển thị dạng bàn tay */
}

/* Ghi đè font size cho các con số ngày trong lịch mini (popup) */

/* 1. Tăng kích thước chữ cho số Dương Lịch (sử dụng class .t2t6 mà bạn cung cấp) */
.amlich-modal-calendar .t2t6 {
    font-size: 25px !important; /* Điều chỉnh kích thước tại đây. Ví dụ: 19px */
    font-weight: bold !important; 
    line-height: 1.2 !important; /* Đảm bảo khoảng cách dòng không bị vỡ */
}

/* BỔ SUNG: Tăng kích thước chữ cho số Dương Lịch (Thứ 7) */
.amlich-modal-calendar .t7 {
    font-size: 25px !important; /* Cùng kích thước với ngày thường */
    font-weight: bold !important; 
    line-height: 1.2 !important; 
    color: blue !important; /* Giữ màu xanh đã định */
}

/* BỔ SUNG: Tăng kích thước chữ cho số Dương Lịch (Chủ Nhật) */
.amlich-modal-calendar .cn {
    font-size: 25px !important; /* Cùng kích thước với ngày thường */
    font-weight: bold !important; 
    line-height: 1.2 !important; 
    color: red !important; /* Giữ màu đỏ đã định */
}

/* 2. Đảm bảo số Âm Lịch (thường là .ngay-am, .am, .am2) vẫn nhỏ hơn và hoạt động */
.amlich-modal-calendar .ngay-am,
.amlich-modal-calendar .am,
.amlich-modal-calendar .am2 {
    font-size: 15px !important; /* Giữ kích thước nhỏ hơn cho Âm Lịch (Điều chỉnh 14px nếu cần) */
    line-height: 1.2 !important; 
}


/* --- BẮT ĐẦU TÙY CHỈNH TĂNG CỠ CHỮ LỊCH THÁNG --- */

/* * Áp dụng cho LỊCH THÁNG CHÍNH, không ảnh hưởng lịch mini trong popup.
 * Dùng !important để đảm bảo ghi đè lên các định dạng cũ trên mọi thiết bị.
 */

/* 1. Tăng cỡ chữ cho SỐ DƯƠNG LỊCH (Ngày thường, Thứ 7, Chủ Nhật) */
.amlich-wrapper .t2t6,
.amlich-wrapper .t7,
.amlich-wrapper .cn {
    font-size: 25px !important; /* Bạn có thể thay đổi số 26px thành kích thước mong muốn */
}

/* 2. Tăng cỡ chữ cho SỐ ÂM LỊCH */
.amlich-wrapper .am,
.amlich-wrapper .am2 {
    font-size: 14px !important; /* Bạn có thể thay đổi số 18px thành kích thước mong muốn */
}

/* 3. (QUAN TRỌNG) Tăng chiều cao tối thiểu của ô ngày để chứa vừa chữ lớn hơn */
.amlich-wrapper .ngaythang,
.amlich-wrapper .homnay,
.amlich-wrapper .tet,
.amlich-wrapper .leam,
.amlich-wrapper .leduong {
    min-height: 90px !important; /* Tăng chiều cao ô để giao diện không bị vỡ */
}

/* --- KẾT THÚC TÙY CHỈNH --- */


/* === BỔ SUNG: CSS CHO KHUNG CHI TIẾT TRONG POPUP === */
.amlich-modal-details {
  padding: 10px;
  margin-top: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #f9f9f9;
  font-size: 14px;
}

.amlich-modal-details .detail-line {
  display: block;
  margin-bottom: 5px;
}

.amlich-modal-details .detail-line:last-child {
  margin-bottom: 0;
}

.amlich-modal-details strong {
  color: #333;
}

/* Đảm bảo dấu chấm hoàng đạo hiển thị đúng */
.amlich-modal-details .amlich-hd-dot,
.amlich-modal-details .amlich-hkd-dot {
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
    margin-bottom: 2px;
}
/* === KẾT THÚC BỔ SUNG === */
/* BỔ SUNG: ĐỔI MÀU PANEL "LỊCH NGÀY" KHI LÀ CHỦ NHẬT */
.amlich .calendar-day.sunday .day-num,
.amlich .calendar-day.sunday .day-tuan {
    color: red !important;
}

/* =======================================================
   BỔ SUNG TỐI ƯU PAGE SPEED (LCP & CLS): GIỮ CHỖ CHO LỊCH
   ======================================================= */
.amlich-wrapper {
    display: block;
    min-height: 538px; /* Chiều cao ước lượng của lịch trên Máy tính (Desktop) */
    background-color: #ffffff; /* Hoặc đổi thành #f9f9f9 nếu muốn tạo một khối nền nhạt chờ sẵn */
}

/* Tối ưu chiều cao giữ chỗ riêng cho giao diện Điện thoại (Mobile) */
@media (max-width: 768px) {
    .amlich-wrapper {
        min-height: 576px; /* Chiều cao ước lượng của lịch trên Điện thoại */
    }
}


/* === DÁN ĐOẠN CODE MỚI VÀO ĐÂY === */
/* =======================================================
   BỔ SUNG TỐI ƯU PAGE SPEED (LCP & CLS): GIỮ CHỖ CHO LỊCH
   ======================================================= */
.amlich-wrapper {
    display: block;
    min-height: 538px;
    background-color: #ffffff;
}

@media (max-width: 768px) {
    .amlich-wrapper {
        min-height: 576px;
    }
}