/* ═══════════════════════════════════════════════════════════
   quan-ly-thanh-vien.css — Màn quản lý thành viên
   Dùng token và thành phần từ style.css; không khai báo lại
   ═══════════════════════════════════════════════════════════ */

/* ─── Layout: cho phép cuộn dọc ở màn này ─────────────────── */
/* Màn này là trang danh sách thường (không phải dashboard 3D). Trên máy tính
   giữ `100vh + overflow:hidden` để vùng danh sách tự cuộn trong khung ứng dụng;
   trên điện thoại chuyển sang cuộn tự nhiên theo nội dung — nếu không, công cụ
   chụp "ca-trang" dùng viewport cao 9000px sẽ kéo body dài theo và để lại ~4
   màn trống đen sau nội dung. */
body.man-quan-ly-body.khung-ung-dung {
  height: 100vh;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: hidden;
}

.man-quan-ly-body #noi-dung {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  max-width: 100%;
}

@media (max-width: 767px) {
  html { height: auto; overflow: visible; }
  body.man-quan-ly-body.khung-ung-dung {
    height: auto;
    min-height: 0;
    overflow-y: visible;
  }
  .man-quan-ly-body #noi-dung {
    overflow-y: visible;
    overflow-x: hidden;
    flex: 0 0 auto;
    min-height: 0;
  }
}

.man-quan-ly {
  padding: calc(var(--kc) * 3) calc(var(--kc) * 4);
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ─── Đầu danh sách: tiêu đề + nhóm nút ──────────────────── */
.lk-danh-sach__dau {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--kc);
  margin-bottom: calc(var(--kc) * 3);
  flex-wrap: wrap;
}

.lk-danh-sach__dau-chu {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lk-danh-sach__tieu-de {
  font-family: var(--font-tieu-de);
  font-size: 32px;
  font-weight: 700;
  color: var(--chu);
  line-height: 1.1;
}

.lk-danh-sach__phu-de {
  font-size: 13px;
  color: var(--chu-phu);
}

.nhom-nut-dau {
  display: flex;
  gap: var(--kc);
  align-items: center;
  flex-shrink: 0;
}

/* ─── Thanh thao tác chọn nhiều ───────────────────────────── */
.lk-danh-sach__thao-tac {
  display: flex;
  align-items: center;
  gap: var(--kc);
  padding: calc(var(--kc) * 1) calc(var(--kc) * 2);
  background: var(--nhan-nhat);
  border: 1px solid rgba(0, 201, 177, .3);
  border-radius: var(--bo-vua);
  margin-bottom: calc(var(--kc) * 1.5);
}

.lk-danh-sach__thao-tac[hidden] { display: none; }

.lk-danh-sach__thao-tac-so { font-size: 14px; color: var(--chu); }
.lk-danh-sach__thao-tac-so b { color: var(--nhan); }

.lk-danh-sach__thao-tac-tach {
  width: 1px;
  height: 18px;
  background: var(--vien);
  flex-shrink: 0;
}

.lk-danh-sach__thao-tac-nut {
  padding: calc(var(--kc) * .5) var(--kc);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-than);
  color: var(--chu-phu);
  border-radius: var(--bo-nho);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.lk-danh-sach__thao-tac-nut:hover { color: var(--chu); background: rgba(255,255,255,.06); }
.lk-danh-sach__thao-tac-nut--loi { color: var(--loi); }
.lk-danh-sach__thao-tac-nut--loi:hover { background: rgba(248,81,73,.1); }

.lk-danh-sach__thao-tac-dong {
  margin-left: auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bo-nho);
  color: var(--chu-phu);
  background: none;
  border: none;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.lk-danh-sach__thao-tac-dong:hover { background: rgba(255,255,255,.06); color: var(--chu); }

/* ─── Ô tìm kiếm ──────────────────────────────────────────── */
.lk-danh-sach__shell {
  margin-bottom: calc(var(--kc) * 1.5);
}
.lk-danh-sach__shell--bang { margin-bottom: 0; }

.thanh-tim { display: flex; }

.o-tim-thanh-vien {
  display: flex;
  align-items: center;
  gap: calc(var(--kc) * 1);
  background: var(--mat);
  border: 1px solid var(--vien);
  border-radius: var(--bo-nho);
  padding: 0 calc(var(--kc) * 1.5);
  color: var(--chu-phu);
  width: 340px;
  max-width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.o-tim-thanh-vien:focus-within {
  border-color: var(--nhan);
  box-shadow: 0 0 0 3px var(--nhan-nhat);
  color: var(--nhan);
}

.o-tim-thanh-vien input {
  background: none;
  border: none;
  outline: none;
  color: var(--chu);
  font-size: 14px;
  padding: calc(var(--kc) * 1.125) 0;
  width: 100%;
}
.o-tim-thanh-vien input::placeholder { color: var(--chu-phu); opacity: .7; }

/* ─── Bảng dữ liệu wrapper ────────────────────────────────── */
.lk-bang-du-lieu {
  background: var(--mat);
  border: 1px solid var(--vien);
  border-radius: var(--bo-vua);
  overflow: hidden;
}

.lk-bang-du-lieu-cuon {
  overflow-x: auto;
  position: relative;
}
.lk-bang-du-lieu-cuon::-webkit-scrollbar { height: 6px; }
.lk-bang-du-lieu-cuon::-webkit-scrollbar-track { background: transparent; }
.lk-bang-du-lieu-cuon::-webkit-scrollbar-thumb { background: var(--vien); border-radius: 3px; }

.lk-bang-du-lieu-cuon > table {
  width: 100%;
  table-layout: auto;
}
/* Màn hẹp (<640px): chuyển bảng sang danh sách thẻ dọc.
   Mỗi thành viên là 1 thẻ: Hàng 1 avatar + tên + email, Hàng 2 chức danh +
   badge vai trò, Hàng 3 công tắc hoạt động + menu ba chấm. Bỏ cột checkbox
   để tránh chen chúc; chọn hàng loạt chuyển sang menu từng dòng. */
@media (max-width: 640px) {
  .lk-bang-du-lieu {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .lk-bang-du-lieu-cuon {
    overflow: visible;
  }
  .lk-bang-du-lieu-cuon > table {
    display: block;
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
  }
  .lk-bang-du-lieu-cuon > table thead { display: none; }
  .lk-bang-du-lieu-cuon > table tbody {
    display: flex;
    flex-direction: column;
    gap: calc(var(--kc) * 1.25);
  }

  .lk-bang-du-lieu-cuon > table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "nguoi    nguoi"
      "chucdanh vaitro"
      "hoatdong menu";
    gap: calc(var(--kc) * 1.25) var(--kc);
    background: var(--mat);
    border: 1px solid var(--vien);
    border-radius: var(--bo-vua);
    padding: calc(var(--kc) * 1.5);
    align-items: center;
  }
  .lk-bang-du-lieu-cuon > table tr.duoc-chon {
    border-color: var(--nhan);
    box-shadow: 0 0 0 1px var(--nhan);
  }

  .lk-bang-du-lieu-cuon > table td {
    display: block;
    padding: 0 !important;
    border: 0;
    width: auto;
    min-width: 0;
  }

  /* Bỏ cột checkbox trên mobile để không chen vào tên */
  .lk-bang-du-lieu-cuon > table td.lk-bang-du-lieu-cot-chon { display: none; }

  /* Ẩn cột Email riêng trên mobile — email đã hiện dưới tên qua .lk-bang-du-lieu-ten-email */
  .lk-bang-du-lieu-cuon > table td.lk-bang-du-lieu-cot-email { display: none !important; }

  /* Email hiện dưới tên trên mobile */
  .lk-bang-du-lieu-ten-email { display: block; }

  /* Ẩn dòng meta-mobile cũ: nay cột 4 và 5 đã hiển thị trực tiếp */
  .lk-bang-du-lieu-meta-mobile { display: none !important; }

  /* Hàng 1 — avatar + tên + email */
  .lk-bang-du-lieu-cuon > table td.lk-bang-du-lieu-cot-nguoi {
    grid-area: nguoi;
    min-width: 0;
  }
  .lk-bang-du-lieu-nguoi { min-width: 0; }
  .lk-bang-du-lieu-anh { width: 40px; height: 40px; font-size: 13px; }
  .lk-bang-du-lieu-ten b { font-size: 15px; line-height: 1.3; }
  .lk-bang-du-lieu-ten small {
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  /* Hàng 2 — chức danh (trái) + badge vai trò (phải)
     Sau khi thêm cột Email (nth-child 3), chức danh và vai trò lùi về (4) và (5) */
  .lk-bang-du-lieu-cuon > table td:nth-child(4) {
    grid-area: chucdanh;
    font-size: 13px;
    color: var(--chu-phu);
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .lk-bang-du-lieu-cuon > table td:nth-child(5) {
    grid-area: vaitro;
    text-align: right;
  }

  /* Hàng 3 — toggle hoạt động (trái, có nhãn) + menu ba chấm (phải) */
  .lk-bang-du-lieu-cuon > table td:nth-child(6) {
    grid-area: hoatdong;
    display: flex;
    align-items: center;
    gap: calc(var(--kc) * 1);
    padding-top: calc(var(--kc) * 1.25) !important;
    border-top: 1px solid var(--vien) !important;
  }
  .lk-bang-du-lieu-cuon > table td:nth-child(6)::before {
    content: 'Hoạt động';
    font-size: 11px;
    color: var(--chu-phu);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
  }
  .lk-bang-du-lieu-cuon > table td.lk-bang-du-lieu-cot-menu {
    grid-area: menu;
    text-align: right;
    padding-top: calc(var(--kc) * 1.25) !important;
    border-top: 1px solid var(--vien) !important;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  /* Menu dropdown bung lên trên để không bị cắt dưới card */
  .menu-hanh-dong-ds {
    top: auto;
    bottom: calc(100% + 4px);
  }

  /* Nhóm nút trên đầu màn: xếp dọc để không chen tràn ở điện thoại */
  .nhom-nut-dau {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--kc) * .75);
  }
  .nhom-nut-dau .nut {
    width: 100%;
    justify-content: center;
    flex: 0 0 auto;
  }

  /* Ô tìm kiếm trải hết chiều ngang */
  .o-tim-thanh-vien { width: 100%; }

  /* Vùng cuộn chính: chặn tràn ngang */
  .man-quan-ly { overflow-x: hidden; }
}

/* ─── Cột đặc biệt ────────────────────────────────────────── */
.lk-bang-du-lieu-cot-chon {
  width: 44px;
  padding-left: calc(var(--kc) * 1.5) !important;
  padding-right: calc(var(--kc) * .5) !important;
}
.lk-bang-du-lieu-cot-chon input[type="checkbox"] {
  width: 16px;
  height: 16px;
  appearance: none;
  background: var(--nen);
  border: 1.5px solid var(--vien);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: background .15s, border-color .15s;
  vertical-align: middle;
}
.lk-bang-du-lieu-cot-chon input:checked {
  background: var(--nhan);
  border-color: var(--nhan);
}
.lk-bang-du-lieu-cot-chon input:checked::after {
  content: '';
  position: absolute;
  left: 3px; top: 1px;
  width: 7px; height: 4px;
  border-left: 2px solid var(--tren-nhan);
  border-bottom: 2px solid var(--tren-nhan);
  transform: rotate(-45deg);
}
.lk-bang-du-lieu-cot-chon input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--nhan-nhat);
}

.lk-bang-du-lieu-cot-nguoi { min-width: 220px; }
.lk-bang-du-lieu-cot-email {
  min-width: 180px;
  font-size: 13px;
  color: var(--chu-phu);
  font-family: var(--font-than);
}
.lk-bang-du-lieu-cot-menu { width: 52px; text-align: right; }

/* Email dưới tên: ẩn trên desktop (có cột riêng), hiện trên mobile (cột bị ẩn) */
.lk-bang-du-lieu-ten-email {
  display: none;
  font-size: 12px;
  color: var(--chu-phu);
}
.lk-bang-du-lieu-an {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ─── Ô avatar + tên ─────────────────────────────────────── */
.lk-bang-du-lieu-nguoi {
  display: flex;
  align-items: center;
  gap: var(--kc);
}

.lk-bang-du-lieu-anh {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--mat-2);
  border: 1px solid var(--vien);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-tieu-de);
  font-size: 12px;
  font-weight: 700;
  color: var(--chu-phu);
  flex-shrink: 0;
}
.lk-bang-du-lieu-anh--mo {
  background: var(--nen);
  color: var(--chu-phu);
}

.lk-bang-du-lieu-ten {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lk-bang-du-lieu-ten b { font-size: 14px; font-weight: 600; color: var(--chu); }
.lk-bang-du-lieu-ten small { font-size: 12px; color: var(--chu-phu); }

/* Thông tin phụ (chức danh · vai trò) chỉ hiện ở mobile khi 2 cột ẩn */
.lk-bang-du-lieu-meta-mobile {
  display: none;
  font-size: 11px;
  color: var(--chu-phu);
  margin-top: 2px;
  line-height: 1.4;
}
.lk-bang-du-lieu-meta-mobile .nhan-vai-tro {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--mat-2);
  border: 1px solid var(--vien);
  margin-left: 4px;
  font-size: 10px;
}
.lk-bang-du-lieu-meta-mobile .nhan-vai-tro--sep {
  background: var(--nhan-nhat);
  border-color: rgba(0, 201, 177, .35);
  color: var(--nhan);
}

/* ─── Nút sắp xếp trong th ────────────────────────────────── */
.lk-bang-du-lieu-nut-sap-xep {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--chu-phu);
  padding: 0;
  font-family: var(--font-than);
  transition: color .15s;
}
.lk-bang-du-lieu-nut-sap-xep:hover { color: var(--chu); }
.lk-bang-du-lieu-mui::after { content: '↕'; font-size: 10px; opacity: .5; }

/* ─── Toggle switch Hoạt động ─────────────────────────────── */
.chuyen-doi {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.chuyen-doi-nhap {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.chuyen-doi-thanh {
  display: inline-block;
  width: 36px;
  height: 20px;
  background: var(--mat-2);
  border: 1px solid var(--vien);
  border-radius: 100px;
  position: relative;
  transition: background .18s, border-color .18s;
}
.chuyen-doi-thanh::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  background: var(--chu-phu);
  border-radius: 50%;
  transition: transform .18s, background .18s;
}
.chuyen-doi-nhap:checked + .chuyen-doi-thanh {
  background: rgba(0, 201, 177, .18);
  border-color: var(--nhan);
}
.chuyen-doi-nhap:checked + .chuyen-doi-thanh::after {
  background: var(--nhan);
  transform: translateX(16px);
}
.chuyen-doi-nhap:focus-visible + .chuyen-doi-thanh {
  outline: 2px solid var(--nhan);
  outline-offset: 2px;
}

/* ─── Nút action (3 chấm) + dropdown ─────────────────────── */
.menu-hanh-dong { position: relative; }

.lk-bang-du-lieu-nut-menu {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bo-nho);
  background: none;
  border: 1px solid transparent;
  color: var(--chu-phu);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.lk-bang-du-lieu-nut-menu:hover,
.lk-bang-du-lieu-nut-menu[aria-expanded="true"] {
  background: var(--mat-2);
  color: var(--chu);
  border-color: var(--vien);
}

.menu-hanh-dong-ds {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 50;
  background: var(--mat);
  border: 1px solid var(--vien);
  border-radius: var(--bo-vua);
  box-shadow: var(--bong);
  min-width: 140px;
  padding: calc(var(--kc) * .5) 0;
  list-style: none;
}
.menu-hanh-dong-ds[hidden] { display: none; }

.menu-hanh-dong-muc {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: calc(var(--kc) * .875) calc(var(--kc) * 1.5);
  font-size: 14px;
  color: var(--chu);
  cursor: pointer;
  font-family: var(--font-than);
  transition: background .12s, color .12s;
}
.menu-hanh-dong-muc:hover { background: var(--mat-2); }
.menu-hanh-dong-muc--nguy { color: var(--loi); }
.menu-hanh-dong-muc--nguy:hover { background: rgba(248,81,73,.1); }

/* ─── Trạng thái rỗng ────────────────────────────────────── */
.lk-trang-thai-khoi {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--kc) * 10) calc(var(--kc) * 4);
  gap: calc(var(--kc) * 2);
  background: var(--mat);
  border: 1px solid var(--vien);
  border-radius: var(--bo-vua);
}
.lk-trang-thai-khoi[hidden] { display: none; }
.lk-trang-thai-khoi__icon { color: var(--chu-phu); opacity: .3; }
.lk-trang-thai-khoi__tieu-de {
  font-family: var(--font-tieu-de);
  font-size: 20px;
  font-weight: 700;
  color: var(--chu);
}
.lk-trang-thai-khoi__mo-ta { font-size: 14px; color: var(--chu-phu); max-width: 280px; line-height: 1.55; }
.lk-trang-thai-khoi__nut {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--kc) * .75);
  padding: calc(var(--kc) * .875) calc(var(--kc) * 2);
  background: var(--nhan);
  color: var(--tren-nhan);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-than);
  border: none;
  border-radius: var(--bo-nho);
  cursor: pointer;
  transition: background .15s;
}
.lk-trang-thai-khoi__nut:hover { background: #00b09b; }

/* ─── Hộp thoại biểu mẫu ─────────────────────────────────── */
.lk-hop-thoai-bieu-mau {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: var(--kc);
}
.lk-hop-thoai-bieu-mau.lk-mo { display: flex; }

.lk-hop-thoai-bieu-mau-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .72);
  cursor: pointer;
}

.lk-hop-thoai-bieu-mau-panel {
  position: relative;
  background: var(--mat);
  border: 1px solid var(--vien);
  border-radius: var(--bo-vua);
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - calc(var(--kc) * 4));
  overflow-y: auto;
  box-shadow: var(--bong);
}

.lk-hop-thoai-bieu-mau-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--kc) * 2.5) calc(var(--kc) * 3);
  border-bottom: 1px solid var(--vien);
}

.lk-hop-thoai-bieu-mau-title {
  font-family: var(--font-tieu-de);
  font-size: 22px;
  font-weight: 700;
  color: var(--chu);
}

.lk-hop-thoai-bieu-mau-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--bo-nho);
  color: var(--chu-phu);
  cursor: pointer;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.lk-hop-thoai-bieu-mau-close:hover { background: var(--mat-2); color: var(--chu); }

.lk-hop-thoai-bieu-mau-form { display: flex; flex-direction: column; }

.lk-hop-thoai-bieu-mau-body {
  padding: calc(var(--kc) * 3);
  display: flex;
  flex-direction: column;
  gap: calc(var(--kc) * 2);
}

.lk-hop-thoai-bieu-mau-field {
  display: flex;
  flex-direction: column;
  gap: calc(var(--kc) * .75);
}

.lk-hop-thoai-bieu-mau-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--chu-phu);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.lk-hop-thoai-bieu-mau-req { color: var(--loi); }

.lk-hop-thoai-bieu-mau-field input:not([type="checkbox"]) {
  background: var(--nen);
  border: 1px solid var(--vien);
  border-radius: var(--bo-nho);
  color: var(--chu);
  font-size: 14px;
  font-family: var(--font-than);
  padding: calc(var(--kc) * 1.125) calc(var(--kc) * 1.5);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.lk-hop-thoai-bieu-mau-field input:not([type="checkbox"])::placeholder { color: var(--chu-phu); opacity: .6; }
.lk-hop-thoai-bieu-mau-field input:not([type="checkbox"]):focus {
  border-color: var(--nhan);
  box-shadow: 0 0 0 3px var(--nhan-nhat);
}
.lk-hop-thoai-bieu-mau-field.lk-loi input:not([type="checkbox"]) {
  border-color: var(--loi);
}
.lk-hop-thoai-bieu-mau-field.lk-loi input:not([type="checkbox"]):focus {
  box-shadow: 0 0 0 3px rgba(248,81,73,.14);
}

.lk-hop-thoai-bieu-mau-error {
  font-size: 12px;
  color: var(--loi);
  line-height: 1.4;
}
.lk-hop-thoai-bieu-mau-error[hidden] { display: none; }

.lk-hop-thoai-bieu-mau-server-error {
  background: rgba(248,81,73,.1);
  border: 1px solid rgba(248,81,73,.3);
  border-radius: var(--bo-nho);
  padding: var(--kc) calc(var(--kc) * 1.5);
  font-size: 13px;
  color: var(--loi);
  line-height: 1.5;
}
.lk-hop-thoai-bieu-mau-server-error[hidden] { display: none; }

.lk-hop-thoai-bieu-mau-footer {
  display: flex;
  gap: var(--kc);
  justify-content: flex-end;
  padding: calc(var(--kc) * 2) calc(var(--kc) * 3);
  border-top: 1px solid var(--vien);
}

/* ─── Hộp xác nhận xoá (dialog native) ───────────────────── */
/* Đảm bảo dialog ẩn khi chưa mở — bổ sung UA rule để tránh render trong flex flow */
.lk-hop-xac-nhan:not([open]) {
  display: none;
}

.lk-hop-xac-nhan {
  background: var(--mat);
  border: 1px solid var(--vien);
  border-radius: var(--bo-vua);
  padding: 0;
  max-width: min(92vw, 400px);
  width: calc(100vw - calc(var(--kc) * 4));
  position: fixed;
  inset: 0;
  margin: auto;
  box-shadow: var(--bong);
  color: var(--chu);
}
.lk-hop-xac-nhan::backdrop { background: rgba(0,0,0,.72); }

.lk-hop-xac-nhan-hop {
  padding: calc(var(--kc) * 3);
  display: flex;
  flex-direction: column;
  gap: calc(var(--kc) * 1.5);
}

.lk-hop-xac-nhan-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(248,81,73,.12);
  border: 1px solid rgba(248,81,73,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--loi);
  flex-shrink: 0;
}

.lk-hop-xac-nhan-tieu-de {
  font-family: var(--font-tieu-de);
  font-size: 20px;
  font-weight: 700;
}

.lk-hop-xac-nhan-mo-ta {
  font-size: 14px;
  color: var(--chu-phu);
  line-height: 1.55;
  margin-top: -4px;
}

.lk-hop-xac-nhan-loi {
  font-size: 13px;
  color: var(--loi);
}
.lk-hop-xac-nhan-loi[hidden] { display: none; }

.lk-hop-xac-nhan-nut {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kc);
  justify-content: flex-end;
  margin-top: calc(var(--kc) * 1.5);
}

.lk-hop-xac-nhan-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--kc);
  padding: calc(var(--kc) * .875) calc(var(--kc) * 2);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-than);
  border-radius: var(--bo-nho);
  border: none;
  cursor: pointer;
  transition: background .15s;
}

.lk-hop-xac-nhan-huy {
  background: var(--mat-2);
  color: var(--chu);
  border: 1px solid var(--vien);
}
.lk-hop-xac-nhan-huy:hover { background: var(--vien); }

.lk-hop-xac-nhan-xac-nhan {
  background: rgba(248,81,73,.18);
  color: var(--loi);
  border: 1px solid rgba(248,81,73,.35);
}
.lk-hop-xac-nhan-xac-nhan:hover { background: rgba(248,81,73,.28); }

.lk-hop-xac-nhan-quay {
  width: 14px;
  height: 14px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  display: none;
}
.lk-hop-xac-nhan-xac-nhan.dang-chay .lk-hop-xac-nhan-quay {
  display: inline-block;
  animation: quay .6s linear infinite;
}

/* ─── Vùng upload CSV ────────────────────────────────────── */
.chu-thich-csv {
  font-size: 13px;
  color: var(--chu-phu);
  line-height: 1.6;
  margin-bottom: calc(var(--kc) * 2);
}
.chu-thich-csv code {
  background: var(--mat-2);
  border: 1px solid var(--vien);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: 'Consolas', monospace;
  font-size: 12px;
  color: var(--nhan);
}

.vung-upload {
  border: 2px dashed var(--vien);
  border-radius: var(--bo-vua);
  transition: border-color .15s, background .15s;
}
.vung-upload:hover, .vung-upload.keo-vao {
  border-color: var(--nhan);
  background: var(--nhan-nhat);
}

.nhan-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kc);
  padding: calc(var(--kc) * 4) calc(var(--kc) * 3);
  cursor: pointer;
  color: var(--chu-phu);
  text-align: center;
  font-size: 14px;
}
.nhan-upload:hover { color: var(--chu); }
.nhan-upload .chu-thich-truong { font-size: 12px; }

.nhap-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.ten-file {
  display: flex;
  align-items: center;
  gap: var(--kc);
  padding: var(--kc) calc(var(--kc) * 1.5);
  background: var(--mat-2);
  border-top: 1px solid var(--vien);
  font-size: 13px;
  color: var(--chu);
  border-radius: 0 0 calc(var(--bo-vua) - 2px) calc(var(--bo-vua) - 2px);
}
.ten-file[hidden] { display: none; }
.ten-file-icon { color: var(--nhan); flex-shrink: 0; }

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .man-quan-ly {
    padding: calc(var(--kc) * 2);
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .lk-danh-sach {
    max-width: 100%;
    min-width: 0;
  }
  .lk-danh-sach__dau {
    flex-direction: column;
    gap: calc(var(--kc) * 1.5);
    max-width: 100%;
  }
  .nhom-nut-dau { width: 100%; max-width: 100%; }
  .nhom-nut-dau .nut { flex: 1; justify-content: center; min-width: 0; max-width: 100%; }

  .o-tim-thanh-vien { width: 100%; max-width: 100%; }
}

@media (max-width: 480px) {
  .man-quan-ly {
    padding-inline: 16px;
    padding-block: calc(var(--kc) * 2);
    overflow-x: hidden;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }
  .lk-danh-sach, .lk-bang-du-lieu, .lk-bang-du-lieu-cuon {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Nhóm nút wrap column tránh bị clip nút '+ Thêm thành viên' */
  .nhom-nut-dau {
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--kc) * .75);
  }
  .nhom-nut-dau .nut { width: 100%; max-width: 100%; min-width: 0; }

  /* Mỗi thẻ thành viên có khoảng thở hai bên (feedback: sát mép phải).
     parent `.man-quan-ly` đã có padding-inline:16px; đặt thẻ co đúng 100%
     bên trong và chặn tràn ngang bằng min-width:0 để nội dung dài không
     đẩy thẻ rộng hơn khung cha. */
  .lk-bang-du-lieu-cuon > table tr {
    margin-inline: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: calc(var(--kc) * 1.5);
  }
  .lk-bang-du-lieu-cuon > table td,
  .lk-bang-du-lieu-cuon > table td.lk-bang-du-lieu-cot-nguoi {
    min-width: 0;
    max-width: 100%;
  }

  .lk-hop-thoai-bieu-mau-footer {
    flex-direction: column-reverse;
  }
  .lk-hop-thoai-bieu-mau-footer .nut { width: 100%; justify-content: center; }
  .lk-hop-xac-nhan-nut { flex-direction: column-reverse; }
  .lk-hop-xac-nhan-btn { width: 100%; justify-content: center; }
  .lk-hop-xac-nhan-hop { padding: calc(var(--kc) * 2); }
}