/* Reset và Cài đặt Cơ bản */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  color: #343a40; /* Màu chữ chính - Xám đậm */
  background-color: #f8f9fa; /* Màu nền trang - Xám rất nhạt */
  padding: 20px;
}

/* Container chính */
.container {
  max-width: 800px; /* Tăng chiều rộng */
  margin: 20px auto;
  background-color: #ffffff; /* Nền trắng cho nội dung */
  padding: 30px;
  border-radius: 8px; /* Bo góc nhẹ */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Đổ bóng nhẹ */
}

/* Tiêu đề */
h1 {
  color: #0056b3; /* Màu xanh đậm */
  margin-bottom: 25px;
  text-align: center;
  font-weight: 700;
}

h2 {
  color: #007bff; /* Màu xanh dương chính */
  margin-top: 30px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dee2e6; /* Đường kẻ dưới nhẹ */
  font-weight: 600;
}

h3 {
    color: #495057; /* Xám đậm hơn */
    margin-top: 25px;
    margin-bottom: 10px;
    font-weight: 600;
}

/* Tabs */
.tabs {
  display: flex;
  margin-bottom: 30px;
  border-bottom: 2px solid #dee2e6;
}

.tab-button {
  padding: 12px 20px;
  border: none;
  background-color: transparent; /* Nền trong suốt */
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  color: #6c757d; /* Màu chữ tab không active - Xám */
  transition: color 0.2s ease, border-bottom 0.2s ease;
  border-bottom: 2px solid transparent; /* Đường kẻ dưới trong suốt ban đầu */
  margin-bottom: -2px; /* Để đường kẻ nằm đúng vị trí */
}

.tab-button:hover {
  color: #0056b3; /* Đổi màu khi hover */
}

.tab-button.active {
  color: #007bff; /* Màu chữ tab active */
  border-bottom: 2px solid #007bff; /* Đường kẻ dưới cho tab active */
  font-weight: 600;
}

/* Nội dung Tab */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  animation: fadeIn 0.5s ease; /* Hiệu ứng xuất hiện */
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Forms */
form {
  margin-bottom: 25px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #495057;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select {
  width: 100%;
  padding: 12px 15px;
  margin-bottom: 15px;
  border: 1px solid #ced4da; /* Viền xám nhạt */
  border-radius: 6px; /* Bo góc */
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus {
  border-color: #80bdff; /* Đổi màu viền khi focus */
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Hiệu ứng đổ bóng nhẹ khi focus */
}

/* Buttons */
button {
  padding: 10px 18px;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  margin-right: 8px; /* Khoảng cách giữa các nút */
  margin-top: 5px; /* Khoảng cách trên cho các nút nằm gần nhau */
}

/* Nút chính (Lưu) */
#luuEmail, #luuThanhVien {
  background-color: #007bff; /* Xanh dương */
  color: white;
  border-color: #007bff;
}
#luuEmail:hover, #luuThanhVien:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}
#luuEmail:focus, #luuThanhVien:focus {
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}


/* Nút phụ (Sửa, Gia hạn) */
#suaEmail, #suaThanhVien,
li button:not(.btn-delete):not(.btn-primary):not(.btn-danger), /* Các nút trong LI trừ nút xóa */
li button[textContent="Gia hạn"] /* Target cụ thể nếu cần */
 {
  background-color: #6c757d; /* Xám */
  color: white;
  border-color: #6c757d;
}
#suaEmail:hover, #suaThanhVien:hover,
li button:not(.btn-delete):not(.btn-primary):not(.btn-danger):hover,
li button[textContent="Gia hạn"]:hover
{
  background-color: #5a6268;
  border-color: #545b62;
}

/* Nút nguy hiểm (Xóa, Khóa) */
#xoaEmail, #xoaThanhVien,
li button[textContent="Xóa"], /* Target nút Xóa trong LI */
li button[textContent="Khóa"] /* Target nút Khóa */
{
  background-color: #dc3545; /* Đỏ */
  color: white;
  border-color: #dc3545;
}
#xoaEmail:hover, #xoaThanhVien:hover,
li button[textContent="Xóa"]:hover,
li button[textContent="Khóa"]:hover
 {
  background-color: #c82333;
  border-color: #bd2130;
}

/* Nút đặc biệt (Lấy Mã Gia Hạn) */
li button[textContent="Lấy Mã Gia Hạn"] {
    background-color: #ffc107; /* Vàng */
    color: #212529;
    border-color: #ffc107;
}
li button[textContent="Lấy Mã Gia Hạn"]:hover {
    background-color: #e0a800;
    border-color: #d39e00;
}

/* Nút Mở (khi thành viên bị Khóa) */
li button[textContent="Mở"] {
    background-color: #28a745; /* Xanh lá */
    color: white;
    border-color: #28a745;
}
li button[textContent="Mở"]:hover {
    background-color: #218838;
    border-color: #1e7e34;
}


/* Danh sách (ul, li) */
ul {
  list-style-type: none; /* Bỏ dấu chấm đầu dòng */
  padding: 0;
  margin-top: 15px;
}

li {
  background-color: #fff;
  padding: 15px 20px;
  margin-bottom: 10px; /* Khoảng cách giữa các item */
  border: 1px solid #e9ecef; /* Viền rất nhạt */
  border-radius: 6px;
  display: flex; /* Sử dụng flexbox để căn chỉnh */
  flex-wrap: wrap; /* Cho phép nút xuống dòng nếu không đủ chỗ */
  justify-content: space-between; /* Căn đều nội dung và nút */
  align-items: center; /* Căn giữa theo chiều dọc */
  transition: background-color 0.2s ease;
}

li:hover {
    background-color: #f8f9fa; /* Đổi màu nền nhẹ khi hover */
}

/* Định dạng phần text trong li */
li > span:first-of-type { /* Phần text nội dung chính */
    flex-basis: 100%; /* Chiếm toàn bộ chiều rộng ban đầu */
    margin-bottom: 10px; /* Tạo khoảng cách với các nút nếu nút xuống dòng */
    word-break: break-word; /* Tránh text quá dài làm vỡ layout */
     color: #495057;
}

/* Định dạng phần Email ZT trong li */
li > span[style*="italic"] {
    font-size: 0.9em;
    color: #6c757d;
}

/* Định dạng khu vực chứa các nút trong li */
/* Chúng ta không cần style riêng nếu các nút đã có margin */

/* Mục Thành viên đến hạn */
#thanhVienDenHan {
    border: 1px solid #ffc107; /* Viền vàng cảnh báo */
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #fffaf0; /* Nền vàng nhạt */
}
#thanhVienDenHan h3 {
    margin-top: 0;
    color: #c88f04; /* Màu vàng đậm */
}
#thanhVienDenHan li {
     border-color: #ffeeba; /* Viền vàng nhạt hơn cho item */
     background-color: #fff;
}


/* Responsive (Ví dụ cơ bản) */
@media (max-width: 600px) {
  .container {
    padding: 15px;
  }

  .tabs {
      font-size: 0.9rem; /* Giảm cỡ chữ tab */
  }
  .tab-button {
      padding: 10px 12px;
  }

  button {
      padding: 8px 12px;
      font-size: 0.9rem;
       margin-top: 8px; /* Tăng khoảng cách trên khi nút xuống dòng */
  }

  li {
      flex-direction: column; /* Chuyển sang cột trên màn hình nhỏ */
      align-items: flex-start; /* Căn trái */
  }
   li > span:first-of-type {
       margin-bottom: 15px; /* Tăng khoảng cách với nút */
   }

   /* Làm cho các nút trong li chiếm toàn bộ chiều rộng hoặc xếp cạnh nhau */
   li button {
       width: calc(50% - 4px); /* Ví dụ: 2 nút 1 hàng */
       margin-right: 8px;
   }
    li button:nth-of-type(even) { /* Bỏ margin phải cho nút cuối hàng */
        margin-right: 0;
    }
     /* Hoặc cho mỗi nút 1 hàng */
     /* li button { width: 100%; margin-bottom: 5px; margin-right: 0; } */

}
/* Trong style.css */

/* --- SỬA Quy tắc cho thẻ li --- */
li {
  background-color: #fff;
  padding: 15px 20px;
  margin-bottom: 10px;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  display: flex;                 /* BẮT BUỘC: Sử dụng Flexbox */
  /* flex-wrap: wrap; */         /* XÓA hoặc BÌNH LUẬN: Không cho phép xuống dòng */
  justify-content: space-between;/* Đẩy text sang trái, nút sang phải */
  align-items: center;           /* Căn giữa theo chiều dọc */
  gap: 15px;                   /* KHOẢNG CÁCH giữa text và nhóm nút */
  transition: background-color 0.2s ease;
}
/* Giữ lại li:hover */
li:hover {
    background-color: #f8f9fa;
}

/* --- SỬA Quy tắc cho span chứa text --- */
/* Áp dụng cho span đầu tiên bên trong li (chứa text chính) */
/* Hoặc nếu bạn dùng class khác cho span text thì thay selector */
li > span:first-child {
    /* flex-basis: 100%; */    /* XÓA hoặc BÌNH LUẬN */
    /* margin-bottom: 10px; */ /* XÓA hoặc BÌNH LUẬN */
    word-break: break-word;    /* Giữ lại: để ngắt chữ nếu quá dài */
    color: #495057;
    flex-grow: 1;              /* CHO PHÉP text chiếm không gian thừa */
    flex-shrink: 1;            /* CHO PHÉP text co lại nếu cần */
    min-width: 0;              /* QUAN TRỌNG: Ngăn text dài đẩy nút ra ngoài */
}
/* Giữ lại style cho span email ZT nếu có */
li > span[style*="italic"] {
    font-size: 0.9em;
    color: #6c757d;
    /* Đảm bảo nó không ảnh hưởng layout flex chính nếu nó nằm ngoài span đầu tiên */
    margin-left: 5px; /* Ví dụ */
    flex-shrink: 0; /* Không co lại */
}


/* --- THÊM Quy tắc cho div chứa nút --- */
.list-item-actions {
  display: flex;        /* Sắp xếp các nút bên trong nó theo hàng ngang */
  align-items: center;  /* Căn giữa các nút theo chiều dọc */
  flex-shrink: 0;       /* NGĂN nhóm nút này bị co lại */
  gap: 8px;             /* KHOẢNG CÁCH giữa các nút Sửa, Xóa */
}

/* --- SỬA Quy tắc cho nút trong li --- */
li button {
  /* padding, font-size, font-weight, border-radius, border, cursor, transition giữ nguyên */
  /* margin-right: 8px; */ /* XÓA hoặc BÌNH LUẬN (đã dùng gap) */
  /* margin-top: 5px; */   /* XÓA hoặc BÌNH LUẬN (không cần nữa) */
  /* Các style màu sắc .btn-delete, .btn-primary,... giữ nguyên */
}

/* --- SỬA Media Query --- */
@media (max-width: 600px) {
  /* ... các style responsive khác ... */

  /* --- QUAN TRỌNG: XÓA hoặc BÌNH LUẬN các quy tắc sau --- */
  /* Vì chúng ép layout thành cột và thay đổi width nút, gây xung đột */
  /*
  li {
      flex-direction: column;
      align-items: flex-start;
  }
  li > span:first-child {  // Trước đây là span:first-of-type
      margin-bottom: 15px;
  }
   li button {
       width: calc(50% - 4px);
       margin-right: 8px;
   }
    li button:nth-of-type(even) {
        margin-right: 0;
    }
   */
   /* --- Thay vào đó, có thể bạn muốn giảm padding/font size trên màn hình nhỏ --- */
    li {
        padding: 10px 15px;
        gap: 10px;
    }
    li button {
         padding: 6px 10px; /* Nút nhỏ hơn */
         font-size: 0.85rem;
    }
    /* Cân nhắc thêm về xử lý text dài/nút nhiều trên màn hình cực nhỏ nếu cần */

} /* Kết thúc media query */
/* === ĐÁNH SỐ THỨ TỰ CHO DANH SÁCH === */

/* Khởi tạo bộ đếm cho mỗi danh sách UL cụ thể */
/* Đảm bảo mỗi danh sách bắt đầu đếm từ 1 */
#danhSachEmail,
#danhSachThanhVien,
#danhSachThanhVienDenHan,
#danhSachTrangThaiThang,
#danhSachTrangThaiQuy,
#danhSachTrangThaiNam {
  counter-reset: listItemCounter; /* Đặt tên bộ đếm là 'listItemCounter' */
  /* Đảm bảo các style mặc định của list đã bị loại bỏ */
  list-style-type: none;
  padding-left: 0;
}

/* Áp dụng cho các thẻ LI trực tiếp bên trong các UL được chỉ định */
#danhSachEmail > li,
#danhSachThanhVien > li,
#danhSachThanhVienDenHan > li,
#danhSachTrangThaiThang > li,
#danhSachTrangThaiQuy > li,
#danhSachTrangThaiNam > li {
  /* Tạo không gian cho số thứ tự bằng cách thêm padding bên trái */
  /* Đồng thời giữ lại các style flexbox hiện có */
  display: flex;
  /* padding-left: 40px; /* Tạo khoảng trống bên trái cho số thứ tự */
  /* position: relative; /* Cần thiết để định vị ::before tuyệt đối nếu muốn */
}

/* Tạo và hiển thị số thứ tự bằng pseudo-element ::before */
#danhSachEmail > li::before,
#danhSachThanhVien > li::before,
#danhSachThanhVienDenHan > li::before,
#danhSachTrangThaiThang > li::before,
#danhSachTrangThaiQuy > li::before,
#danhSachTrangThaiNam > li::before {
  counter-increment: listItemCounter;      /* Tăng bộ đếm cho mỗi LI */
  content: counter(listItemCounter) ". "; /* Hiển thị số đếm, dấu chấm và khoảng trắng */
  font-weight: 600;                      /* In đậm số thứ tự */
  color: #007bff;                         /* Màu xanh dương cho số */
  margin-right: 12px;                    /* Khoảng cách giữa số và nội dung LI */
  /* Căn chỉnh số thứ tự với dòng đầu tiên của text nếu text nhiều dòng */
  align-self: flex-start;
  padding-top: 2px; /* Điều chỉnh nhỏ vị trí dọc nếu cần */
  flex-shrink: 0; /* Ngăn không cho số thứ tự bị co lại */
  min-width: 2em; /* Đảm bảo đủ rộng cho số có 2 chữ số, căn phải */
  text-align: right;
}

/* --- Điều chỉnh nhỏ cho layout hiện tại của LI để phù hợp hơn --- */
.logo {
    max-width: 150px;
    height: auto;
    display: block;
}
/* Có thể không cần thay đổi nhiều nếu bạn đã dùng flexbox tốt */
li {
  /* display: flex; */ /* Đã có */
  /* align-items: center; */ /* Đổi thành flex-start để số thẳng hàng với dòng đầu */
  align-items: flex-start;
  /* gap: 15px; */ /* Gap có thể cần điều chỉnh hoặc thay bằng margin/padding */
  gap: 0; /* Tắt gap chính, kiểm soát bằng margin/padding con */
  /* padding: 15px 20px; */ /* Điều chỉnh padding */
   padding: 15px 0px 15px 10px;
}

/* Span chứa text chính */
li > span:first-child {
  /* flex-grow: 1; */ /* Đã có */
  /* flex-shrink: 1; */ /* Đã có */
  /* min-width: 0; */ /* Đã có */
   padding-top: 2px; /* Điều chỉnh nhỏ vị trí dọc nếu cần */
   padding-left: 9px; /* Reset padding nếu có */
}

/* Div chứa các nút hành động */
.list-item-actions {
  /* display: flex; */ /* Đã có */
  /* align-items: center; */ /* Đã có */
  /* flex-shrink: 0; */ /* Đã có */
  /* gap: 8px; */ /* Đã có */
  margin-left: auto; /* Đẩy nhóm nút về cuối cùng bên phải */
  padding-right: 20px; /* Thêm padding phải cho LI */
  padding-top: 0px; /* Điều chỉnh nhỏ vị trí dọc nếu cần */
}
/* === CSS CHO KHU VỰC NHẮC VIỆC (Cập nhật) === */
.reminder-box {
  /* ... các style cơ bản giữ nguyên: padding, margin, border-radius, display, align-items, gap, font-size, box-shadow ... */
  border-left-width: 5px;
  border-left-style: solid;
  transition: background-color 0.3s ease, border-color 0.3s ease; /* Thêm transition */
}

/* Style cho nhắc việc "Mở học thử" (cần hành động) */
.reminder-box-action {
   background-color: #e2f0fb; /* Nền xanh dương nhạt */
   color: #004085;
   border-color: #b8daff;
   border-left-color: #007bff; /* Viền trái xanh dương */
}

 /* Style cho nhắc việc "Đóng học thử" (cảnh báo/hoàn thành) */
.reminder-box-warning {
   background-color: #fff3cd; /* Nền vàng nhạt */
   color: #856404;
   border-color: #ffeeba;
   border-left-color: #ffc107; /* Viền trái vàng */
}
/* === CSS CHO KHU VỰC NHẮC VIỆC === */
.reminder-box {
  background-color: #e2f0fb; /* Nền xanh dương nhạt */
  color: #004085; /* Chữ màu xanh đậm */
  border: 1px solid #b8daff; /* Viền xanh nhạt hơn */
  border-left: 5px solid #007bff; /* Viền xanh dương đậm bên trái */
  padding: 15px 20px;
  margin: 15px 0 25px 0; /* Khoảng cách trên dưới */
  border-radius: 6px;
  display: flex; /* Dùng flexbox để căn chỉnh */
  align-items: center; /* Căn giữa theo chiều dọc */
  justify-content: space-between; /* Đẩy nút xác nhận sang phải */
  gap: 15px; /* Khoảng cách giữa các phần tử */
  font-size: 0.95rem;
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.1);
}

.reminder-box span:first-child { /* Icon hoặc text đầu tiên */
    margin-right: 5px;
}

.reminder-box strong {
    font-weight: 600;
}

.reminder-link {
  color: #0056b3;
  font-weight: 500;
  text-decoration: none; /* Bỏ gạch chân mặc định */
  border-bottom: 1px dotted #0056b3; /* Gạch chân kiểu chấm */
  transition: color 0.2s ease;
}
.reminder-link:hover {
    color: #003875;
    border-bottom-style: solid; /* Gạch chân liền khi hover */
}

/* Nút xác nhận */
.btn-confirm-reminder {
   padding: 5px 10px;
   font-size: 0.85rem;
   background-color: #28a745; /* Xanh lá */
   color: white;
   border: 1px solid #28a745;
   border-radius: 4px;
   cursor: pointer;
   white-space: nowrap; /* Không xuống dòng */
   transition: background-color 0.2s ease;
}
.btn-confirm-reminder:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

/* Ẩn box đi nếu display: none */
.reminder-box[style*="display: none"] {
    display: none !important; /* Đảm bảo ẩn */
}
.reminder-box span:first-child { margin-right: 5px;}
.reminder-box strong { font-weight: 600; }

/* Style cho text khi không có link */
.reminder-text {
    font-weight: 500;
    margin-right: auto; /* Đẩy nút xác nhận sang phải */
}

.reminder-link {
  /* ... style link giữ nguyên ... */
   margin-right: auto; /* Đẩy nút xác nhận sang phải */
}

/* Nút xác nhận (style chung) */
.btn-confirm-reminder {
   /* ... style nút giữ nguyên ... */
   /* Có thể đổi màu nút cho loại "Đóng" nếu muốn */
}
.reminder-box-warning .btn-confirm-reminder {
    /* Ví dụ: đổi màu nút xác nhận cho loại "Đóng" */
    /* background-color: #ffc107; */
    /* border-color: #ffc107; */
    /* color: #212529; */
}


/* Ẩn box đi nếu display: none */
.reminder-box[style*="display: none"] { display: none !important; }