/* Quản trị → Tài khoản (public/js/tai-khoan.js). Dùng lại .dong-tk .nhan-tk .nut-tk .buoc-nhap .bang-nhap
   .tong-nhap của nen.css; ở đây chỉ phần riêng: thanh lọc, chân chia trang, hai ngăn, hộp duyệt nhập. */

.tk-loc { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-bottom: 12px; }
.tk-loc .o-co-ic { flex: 2 1 220px; min-width: 0; }
.tk-loc select { flex: 1 1 200px; width: auto; min-width: 0; }
.tk-loc label.chon-mot { margin: 0; white-space: nowrap; }
.tk-loc label.chon-mot:has(input:disabled) { color: var(--chu-mo); }
.tk-loi-ds { padding: 0 20px; }

/* Tên, chức vụ, đường dẫn đơn vị dài (cấp tỉnh) xuống dòng thay vì đẩy tràn ngang */
.tk-ds .dong-tk .o-nguoi { flex: 1 1 320px; min-width: 0; }   /* hẹp thì nhãn và nút xuống dòng dưới, tên giữ cả dòng */
.tk-ds .o-nguoi > div { min-width: 0; overflow-wrap: anywhere; }
.tk-ds .o-nguoi small { display: block; }
.tk-ds .o-nguoi small i { color: var(--cam); font-style: normal; }

.tk-chan { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 16px; }
.tk-chan label { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--chu-nhat); }
.tk-chan select { width: auto; min-height: 34px; padding: 4px 8px; }

.tk-ngan { display: flex; margin-bottom: 4px; }
.tk-ngan button { flex: 1; padding-left: 8px; padding-right: 8px; }
.tk-sao { color: var(--do); }
.tk-nut-rong { width: 100%; margin-top: 16px; }
.tk-xong { color: var(--luc); margin-top: 8px; }
.tk-xong:empty { display: none; }
#tkhNganTep .buoc-nhap { margin-top: 16px; }

/* Hộp thoại chức vụ: mỗi vị trí (chính, kiêm nhiệm) một khung */
.tk-ten-hop { margin: 0 0 4px; }
.tk-vitri { position: relative; min-width: 0; border: 1px solid var(--vien); border-radius: 10px; padding: 0 14px 14px; margin: 12px 0 0; }
.tk-vitri[data-kiem] { background: var(--mat-2); }
.tk-vitri legend { font-weight: 600; font-size: 13px; padding: 0 6px; color: var(--chu-nhat); }
.tk-vitri .tk-bo { position: absolute; top: 4px; right: 6px; }
.tk-hang { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; align-items: end; }
.tk-hang label.tk-ld { margin: 0 0 10px; }
.tk-them-kiem { margin-top: 12px; }
.tk-vitri.tk-ngoai { border-style: dashed; }
.tk-ngoai p { margin: 8px 0 0; overflow-wrap: anywhere; }

/* Hộp "Quản trị cấp phường": danh sách chọn một nút trong cây */
.tk-bo-qt { margin-right: auto; }

/* Hộp duyệt nhập tệp: bảng cuộn trong khung riêng, dòng tiêu đề đứng yên */
/* Hộp là cột dọc: bảng co lại cho vừa màn, nút "Nhập" ở chân hộp luôn nhìn thấy, không phải cuộn cả hộp */
.tk-hop-duyet[open] { display: flex; flex-direction: column; }
.tk-hop-duyet .than-hop-thoai, .tk-hop-duyet [data-than] { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; max-height: none; overflow: visible; }
.tk-cong-cu-duyet { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.tk-cong-cu-duyet .o-co-ic { flex: 1 1 220px; min-width: 0; }
.tk-bang-duyet { flex: 1 1 auto; min-height: 140px; max-height: min(52vh, 520px); overflow: auto; border: 1px solid var(--vien); border-radius: 10px; }
.tk-bang-duyet .bang-nhap { min-width: 760px; }     /* hẹp hơn thì cuộn ngang trong khung, không bóp cột họ tên còn một chữ */
.tk-bang-duyet th { position: sticky; top: 0; z-index: 1; }
.tk-bang-duyet .bang-nhap tr.loi { color: inherit; }
.tk-o-chon { display: flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; margin: -6px 0; cursor: pointer; }
.tk-o-chon input { width: 18px; height: 18px; }
.tk-nhan-dai { white-space: normal; }
.tk-mat-khau { margin: 0 0 12px; }
.tk-mat-khau p { margin: 8px 0 0; }

@media (max-width: 720px) {
  .tk-loc .o-co-ic, .tk-loc select { flex: 1 1 100%; }
  #vungTaiKhoan select, .tk-vitri select, .tk-chan select { min-height: 44px; }
  #vungTaiKhoan label.chon-mot { min-height: 44px; }
  .tk-chan { padding: 12px; }
  .tk-chan .day-ra { display: none; }
  .tk-lat { display: flex; flex: 1 1 100%; }
  .tk-lat button { flex: 1; }
  .tk-hang { grid-template-columns: minmax(0, 1fr); }
  .tk-hang label.tk-ld { margin: 12px 0 0; min-height: 44px; }
  .tk-cong-cu-duyet .o-co-ic { flex: 1 1 100%; }
  .tk-cong-cu-duyet button { flex: 1; }
  .tk-o-chon { min-width: 44px; min-height: 44px; margin: -12px 0; }
}
