/* ═══════════════════════════════════════════════════════════════════════
   ĐỒNG BỘ GIAO DIỆN POPUP — theo mẫu "Hồ sơ lô hàng" & "Quản lý tài khoản"
   ───────────────────────────────────────────────────────────────────────
   Nạp SAU style.css (xem base.html). Chỉ tác động vào popup có class
   `.popup-sync` trên .modal-box → muốn đồng bộ thêm popup nào chỉ cần
   thêm class đó vào thẻ .modal-box, KHÔNG phải sửa CSS/JS.

   Ngôn ngữ thiết kế chung (lấy từ 2 popup mẫu):
   • Nền popup trắng, khối phụ (form/ô nhập) nền --bg + viền --border-soft, bo --radius-m
   • Mỗi dòng dữ liệu = 1 "thẻ": nền trắng, viền --border-soft, bo --radius-m, hover nổi bóng
   • Nhãn nhóm: chữ hoa 12.5px --ink-faint + huy hiệu đếm nền --navy-3
   • Nút icon 34×34 trong suốt, hover nền --border-soft; nút xoá đỏ
   • Trạng thái rỗng: khung nét đứt --border, bo --radius-m
   • Nút "thêm" = khung nét đứt giống vùng kéo-thả
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Khung / tiêu đề ─────────────────────────────────────────────────── */
.popup-sync .modal-box__header { margin-bottom: 14px; }
.popup-sync .modal-box__title { display: flex; align-items: center; gap: 8px; }
.popup-sync .modal-box__title .ico { color: var(--chu-navy-3, var(--navy-3)); }

.popup-sync .modal-box__hint,
.popup-sync .nhacnho-hint {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  padding: 10px 14px;
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* Nhãn nhóm + huy hiệu đếm dùng lại y như .hoso-list__title / .tkx-count */
.popup-sync .ktq-nhom-nhan { margin: 0 0 8px; }

/* ─── Danh sách dạng thẻ (Chi phí / Khoản thu / Nhắc nhở) ─────────────── */
.popup-sync #dsDongChiPhi,
.popup-sync #dsDongKhoanThu,
.popup-sync #dsDongNhacNho {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100vh - 400px);
  min-height: 0;
  overflow-y: auto;
  padding: 2px 4px 4px 2px;
  margin-bottom: 10px;
}

.popup-sync :is(.chiphi-row, .khoanthu-row, .nhacnho-row) {
  margin-bottom: 0;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.popup-sync :is(.chiphi-row, .khoanthu-row, .nhacnho-row):hover {
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}
/* Dòng dữ liệu cũ đang khoá → thẻ nền xám nhạt, giống trạng thái "chỉ xem" */
.popup-sync .chiphi-row--khoa { background: var(--bg); }
.popup-sync .chiphi-row--khoa .field__input { background: transparent; border-color: transparent; }

/* Cột cuối rộng đủ cho nút icon 34px */
.popup-sync .chiphi-row,
.popup-sync .chiphi-list__head { grid-template-columns: 1.4fr 0.85fr 0.85fr 1.05fr 1.05fr 112px; }
.popup-sync .khoanthu-row,
.popup-sync .khoanthu-list__head { grid-template-columns: 1.4fr 0.85fr 0.85fr 1.05fr 76px; }
.popup-sync .nhacnho-row,
.popup-sync .nhacnho-list__head { grid-template-columns: 1.4fr 0.85fr 1.5fr 0.8fr 76px; }

/* Đầu cột: chữ hoa nhỏ như nhãn ID / MẬT KHẨU bên popup tài khoản */
.popup-sync :is(.chiphi-list__head, .khoanthu-list__head, .nhacnho-list__head) {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 13px;
  margin-bottom: 6px;
}

/* Nút icon trong dòng = .hoso-ib / .tkx-ib */
.popup-sync :is(.chiphi-row__edit, .chiphi-row__thukhach, .chiphi-row__remove) {
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-s);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.popup-sync .chiphi-row__edit { color: var(--chu-navy-3, var(--navy-3)); }
.popup-sync .chiphi-row__edit:hover { background: var(--border-soft); border-color: var(--border); }
.popup-sync .chiphi-row__thukhach { color: var(--accent); }
.popup-sync .chiphi-row__thukhach:hover { background: var(--accent-soft); border-color: #EBC9A6; }
.popup-sync .chiphi-row__thukhach:disabled { background: transparent; border-color: transparent; }
.popup-sync .chiphi-row__remove { color: var(--red); }
.popup-sync .chiphi-row__remove:hover { background: var(--red-soft); border-color: #E9C3B4; }
.popup-sync .chiphi-row__actions { justify-content: flex-end; }

/* Trạng thái rỗng = .hoso-empty */
.popup-sync .chiphi-list__empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius-m);
  padding: 26px 12px;
  margin: 0 0 10px;
  color: var(--ink-soft);
  font-size: 13.5px;
}
.popup-sync .chiphi-list__empty[hidden] { display: none; }

/* Nút "+ Thêm dòng" = khung nét đứt như vùng kéo-thả */
.popup-sync :is(#btnThemDongChiPhi, #btnThemDongKhoanThu, #btnThemDongNhacNho) {
  width: 100%;
  min-height: 42px;
  margin: 0 0 14px;
  justify-content: center;
  background: var(--bg);
  border: 2px dashed var(--border);
  border-radius: var(--radius-m);
  color: var(--chu-navy-3, var(--navy-3));
  font-weight: 600;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.popup-sync :is(#btnThemDongChiPhi, #btnThemDongKhoanThu, #btnThemDongNhacNho):hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

/* Tổng tiền */
.popup-sync .chiphi-total {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  padding: 12px 16px;
  margin-top: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
}
.popup-sync .chiphi-total > span:last-child {
  font-family: var(--font-mono);
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--chu-navy, var(--navy));
}

/* ─── Ghi chú ─────────────────────────────────────────────────────────── */
.popup-sync textarea.field__input { resize: vertical; min-height: 120px; line-height: 1.6; }

/* ─── Kiểm tra thông quan ─────────────────────────────────────────────── */
.popup-sync .ktq-grid {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  padding: 14px 14px 2px;
  margin-bottom: 18px;
  gap: 0 14px;
}
.popup-sync .ktq-field .field__label { font-size: 12px; color: var(--ink-soft); }

/* Nút phương pháp: nền nhạt + chữ/viền cùng tông, hover đặc (giống chip EWMS/PQS/VNSW) */
.popup-sync .ktq-btn {
  --kc: var(--navy-3);
  background: color-mix(in srgb, var(--kc) 10%, var(--surface));
  color: var(--kc);
  border: 1px solid color-mix(in srgb, var(--kc) 30%, var(--surface));
  border-radius: var(--radius-m);
  padding: 10px 14px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.popup-sync .ktq-btn:hover:not(:disabled) { background: var(--kc); border-color: var(--kc); color: #fff; }
.popup-sync .ktq-btn--api { --kc: var(--green); }
.popup-sync .ktq-btn--pdf { --kc: var(--navy-3); }
.popup-sync .ktq-btn--no-thue { --kc: var(--amber); }
.popup-sync .ktq-btn--tt-tk { --kc: var(--navy); }
.popup-sync .ktq-btn--tk { --kc: var(--accent); }
.popup-sync .ktq-btn--api:hover:not(:disabled),
.popup-sync .ktq-btn--pdf:hover:not(:disabled),
.popup-sync .ktq-btn--no-thue:hover:not(:disabled),
.popup-sync .ktq-btn--tt-tk:hover:not(:disabled),
.popup-sync .ktq-btn--tk:hover:not(:disabled) { background: var(--kc); }

/* Dòng trạng thái = thanh nhỏ nền --bg */
.popup-sync .ktq-trang-thai {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-s);
  padding: 8px 12px;
  margin-bottom: 16px;
}
.popup-sync .ktq-trang-thai--ok { background: var(--green-soft); border-color: #BFE0CC; }
.popup-sync .ktq-trang-thai--loi { background: var(--red-soft); border-color: #E9C3B4; }
.popup-sync .ktq-trang-thai--cho { background: var(--amber-soft); border-color: #F7DC6F; }

/* Bố cục rộng: 4 ô dữ liệu trên 1 hàng, CCCD + nút Lưu hàng riêng,
   nút phương pháp xếp 3 + 2 (popup Kiểm tra thông quan). */
#modalKiemTraTQBox { max-width: 880px; }
.popup-sync .ktq-grid { grid-template-columns: 1.25fr 1.25fr 1fr 0.8fr; }
.popup-sync .ktq-phuong-thuc {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.popup-sync .ktq-phuong-thuc .ktq-btn { grid-column: span 2; flex: none; min-width: 0; }
.popup-sync .ktq-phuong-thuc .ktq-btn:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 640px) {
  .popup-sync .ktq-grid { grid-template-columns: 1fr 1fr; }
  .popup-sync .ktq-phuong-thuc { grid-template-columns: 1fr; }
  .popup-sync .ktq-phuong-thuc .ktq-btn,
  .popup-sync .ktq-phuong-thuc .ktq-btn:nth-child(n+4) { grid-column: auto; }
}

/* ─── Danh sách hàng hóa (bảng) ───────────────────────────────────────── */
.popup-sync #dsHangHoaThongTin {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  padding: 10px 14px;
}
.popup-sync #dsHangHoaNoiDung {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  overflow: auto;
  max-height: calc(100vh - 260px);
}
.popup-sync #dsHangHoaNoiDung thead th {
  position: sticky;
  top: 0;
  background: var(--bg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ─── Xuất PDF: các nút chọn loại ─────────────────────────────────────── */
.popup-sync .loai-pdf-actions .btn {
  border-radius: var(--radius-m);
  justify-content: flex-start;
}

/* ─── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .popup-sync .chiphi-row,
  .popup-sync .khoanthu-row,
  .popup-sync .nhacnho-row { grid-template-columns: 1fr; }
  .popup-sync :is(.chiphi-list__head, .khoanthu-list__head, .nhacnho-list__head) { display: none; }
  .popup-sync .chiphi-row__actions { justify-content: flex-start; }
  .popup-sync :is(.chiphi-row__edit, .chiphi-row__thukhach, .chiphi-row__remove) { flex: 1; width: auto; }
  .popup-sync .ktq-grid { padding: 12px 12px 0; }
}

/* ─── Popup Thêm/Sửa lô hàng: khối Khách hàng full-width phía trên,
   bên dưới 2 cột — trái: Tờ khai + Bill/Invoice + hàng hóa; phải: Hình thức +
   Vận tải. Chỉ tác động #modalThemLoHangBox. ─────────────────────────────── */
#modalThemLoHangBox { max-width: 1080px; }
#modalThemLoHangBox .field { min-width: 0; }
#modalThemLoHangBox .field__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Khách hàng: hàng 1 = Mã lô | Tên công ty | ĐKKD; hàng 2 = MST | Địa chỉ (2 cột) */
#modalThemLoHangBox .tlh-khach {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  padding: 12px 16px 4px;
  margin-bottom: 18px;
}
#modalThemLoHangBox .tlh-khach__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2.2fr);
  gap: 0 14px;
}
#modalThemLoHangBox .tlh-khach__diachi { grid-column: span 2; min-width: 0; }

/* Chế độ SỬA lô hàng: Mã lô chỉ đọc -> thu ô lại vừa khít mã (~16-18 ký tự), ẩn gợi ý
   "để trống sẽ tự sinh" (chỉ đúng khi thêm mới), phần chiều rộng dôi ra dồn hết cho
   "Tên công ty" (cột 2). Cột 3 (Tên Cty ĐKKD) giữ nguyên bề rộng cũ. Ô MST nằm dưới cùng
   cột 1 nên thu theo, vẫn đủ cho MST 10-14 số. Màn hẹp (<=640px) giữ 1 cột như cũ. */
@media (min-width: 641px) {
  #modalThemLoHangBox .tlh-khach__grid {
    grid-template-columns: 11.5rem minmax(0, 1fr) minmax(0, 1.85fr);
  }
}
#modalThemLoHangBox.tlh-dang-sua label:has(#fMaLo) .field__optional { display: none; }
/* Ô khoá: nền xám nhạt, con trỏ thường, không viền xanh khi bị click -> nhìn là biết không nhập được */
#modalThemLoHangBox #fMaLo[readonly] {
  background: var(--bg);
  color: var(--ink-soft);
  cursor: default;
  text-overflow: ellipsis;
}
#modalThemLoHangBox #fMaLo[readonly]:hover,
#modalThemLoHangBox #fMaLo[readonly]:focus {
  outline: none;
  border-color: var(--border);
}

/* Tiêu đề nhóm */
#modalThemLoHangBox .tlh-sec__title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--chu-navy, var(--navy));
}
#modalThemLoHangBox .tlh-sec__title .ico { color: var(--chu-navy-3, var(--navy-3)); }

/* 2 cột, có vạch chia mảnh */
#modalThemLoHangBox .tlh-cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
}
#modalThemLoHangBox .tlh-cols .modal-col { min-width: 0; }
#modalThemLoHangBox .tlh-cols .modal-col + .modal-col {
  border-left: 1px solid var(--border-soft);
  padding-left: 24px;
}

/* Hàng 4 ô: Số tờ khai | Ngày tờ khai | Loại hình | Mã Hải Quan */
#modalThemLoHangBox .tlh-tk-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.65fr) minmax(0, 0.75fr);
  gap: 0 10px;
}
/* 2 ô cạnh nhau (Cty vận tải | Ngày giao, Loại xe | Cước xe) */
#modalThemLoHangBox .tlh-2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 10px;
}
/* Số Bill / Số Invoice rộng, Ngày hẹp hơn → không cắt số dài */
#modalThemLoHangBox .field-so-ngay { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/* Tiêu đề "Vận tải" + nút Gợi ý cùng 1 hàng */
#modalThemLoHangBox .tlh-vt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 10px;
}
#modalThemLoHangBox .tlh-vt-head .tlh-sec__title { margin: 0; flex: 0 0 auto; }
#modalThemLoHangBox .tlh-vt-head .goi-y-vt-row { flex: 1 1 auto; max-width: 340px; }

/* Footer: Đọc PDF + Xem danh sách hàng bên trái, Lưu đứng riêng bên phải */
#modalThemLoHangBox .modal-box__footer--tlh { flex-wrap: nowrap; }
#modalThemLoHangBox .modal-box__footer--tlh .btn { flex: 0 0 auto; min-width: 0; white-space: nowrap; }
#modalThemLoHangBox .modal-box__footer--tlh #btnLuuLoHang { margin-left: auto; min-width: 120px; }

/* Màn hẹp */
@media (max-width: 900px) {
  #modalThemLoHangBox .tlh-cols { grid-template-columns: 1fr; }
  #modalThemLoHangBox .tlh-cols .modal-col + .modal-col {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--border-soft); margin-top: 6px; padding-top: 14px;
  }
}
@media (max-width: 640px) {
  #modalThemLoHangBox .tlh-khach__grid,
  #modalThemLoHangBox .tlh-tk-row { grid-template-columns: 1fr; }
  #modalThemLoHangBox .tlh-khach__diachi { grid-column: auto; }
  #modalThemLoHangBox .tlh-vt-head { flex-wrap: wrap; }
  #modalThemLoHangBox .tlh-vt-head .goi-y-vt-row { max-width: none; flex: 1 1 100%; }
  #modalThemLoHangBox .modal-box__footer--tlh { flex-wrap: wrap; }
  #modalThemLoHangBox .modal-box__footer--tlh .btn { flex: 1 1 100%; }
  #modalThemLoHangBox .modal-box__footer--tlh #btnLuuLoHang { margin-left: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ICON TIÊU ĐỀ / GỢI Ý — hiệu ứng rê chuột (màu nhấn + chuyển động)
   ───────────────────────────────────────────────────────────────────────
   Bộ icon trong style.css chỉ phản ứng khi icon nằm TRONG nút/link/label.
   Icon ở tiêu đề popup (h2), tiêu đề mục (h3: Khách hàng, Tờ khai, Vận tải)
   và dòng gợi ý (p) không nằm trong phần tử tương tác nên trước đây đứng yên.
   Ở đây dùng lại đúng biến của bộ icon (--ico-a / --fx / --fxd / --fxe / --fxo)
   → mỗi icon vẫn có màu nhấn và kiểu chuyển động riêng theo ý nghĩa.
   Rê chuột vào cả tiêu đề / khung gợi ý là icon bên trong sẽ chạy hiệu ứng.
   ═══════════════════════════════════════════════════════════════════════ */
.popup-sync :is(.modal-box__title, .tlh-sec__title, .modal-box__hint):hover :is(.ico, .ico-solo) {
  --ico-o: var(--ico-a, currentColor);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px color-mix(in srgb, var(--ico-a, currentColor) 55%, transparent));
  transform-origin: var(--fxo, 50% 50%);
  animation: var(--fx, ico-pop) var(--fxd, 0.6s) var(--fxe, cubic-bezier(.34, 1.56, .64, 1));
}
/* Icon tiêu đề popup có hiệu ứng "bật ra" khi mở (ico-in). Giữ nguyên nó trong danh sách
   animation để khi rời chuột không bị chạy lại hiệu ứng bật ra. */
.popup-sync .modal-box__title:hover :is(.ico, .ico-solo) {
  animation:
    ico-in 0.5s cubic-bezier(.34, 1.56, .64, 1) both,
    var(--fx, ico-pop) var(--fxd, 0.6s) var(--fxe, cubic-bezier(.34, 1.56, .64, 1));
}
/* Tôn trọng chế độ "giảm chuyển động" của hệ điều hành */
@media (prefers-reduced-motion: reduce) {
  .popup-sync :is(.modal-box__title, .tlh-sec__title, .modal-box__hint):hover :is(.ico, .ico-solo) {
    animation: none !important;
    transition: none !important;
  }
}

/* ─── Hình thức FCL / LCL: icon cạnh chữ, lựa chọn đang chọn sáng màu nhấn ─── */
#modalThemLoHangBox .hinhthuc-pick > span { display: inline-flex; align-items: center; gap: 6px; }
#modalThemLoHangBox .hinhthuc-pick .ico { margin-right: 0; }
#modalThemLoHangBox .hinhthuc-pick:has(input:checked) .ico { --ico-o: var(--ico-a, currentColor); }


/* ─── Danh sách hàng hóa: chia lại độ rộng cột ───────────────────────────
   Trước đây 5 cột chia đều nhau → cột "Mô tả" (chữ dài) bị bóp hẹp, xuống
   dòng rất nhiều, còn STT / Đơn vị thì thừa chỗ. Nay cột ngắn có bề rộng cố
   định, phần còn lại dồn hết cho "Mô tả". Số lượng căn phải cho dễ so sánh. */
.popup-sync #dsHangHoaNoiDung .table {
  width: 100%;
  min-width: 640px;
  table-layout: fixed;
}
.popup-sync #dsHangHoaNoiDung :is(th, td):nth-child(1) { width: 56px; text-align: center; }
.popup-sync #dsHangHoaNoiDung :is(th, td):nth-child(2) { width: 112px; white-space: nowrap; }
.popup-sync #dsHangHoaNoiDung :is(th, td):nth-child(3) { width: auto; overflow-wrap: anywhere; line-height: 1.5; }
.popup-sync #dsHangHoaNoiDung :is(th, td):nth-child(4) { width: 116px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.popup-sync #dsHangHoaNoiDung :is(th, td):nth-child(5) { width: 84px; text-align: center; white-space: nowrap; }
.popup-sync #dsHangHoaNoiDung tbody td { vertical-align: top; }


/* ═══════════════════════════════════════════════════════════════════════
   POPUP CHI PHÍ PHÁT SINH — thiết kế lại dạng "sổ chi phí"
   Áp dụng cho :is(#modalChiPhiBox, #modalKhoanThuBox) và #modalKhoanThuBox (Khoản thu dùng chung
   giao diện này, lấy Chi phí làm chuẩn). Nhắc nhở giữ nguyên.
   • 1 khối bảng duy nhất, đầu cột dính trên, dòng ngăn bằng đường kẻ mảnh
   • Dòng đã lưu = chữ thường (như ô bảng), bấm ✏ mới thành ô nhập
   • Dòng mới/đang sửa = nền cam nhạt + vạch cam bên trái, ô nhập rõ viền
   • Số tiền căn phải, phông mono; nút thao tác mờ, rõ khi rê chuột vào dòng
   ═══════════════════════════════════════════════════════════════════════ */
:is(#modalChiPhiBox, #modalKhoanThuBox) .chiphi-scroll {
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--surface);
  max-height: max(220px, calc(100vh - 390px));
  overflow-y: auto;
  margin-bottom: 14px;
}

/* Đầu cột */
:is(#modalChiPhiBox, #modalKhoanThuBox) :is(.chiphi-list__head, .khoanthu-list__head) {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 14px;
  margin: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
:is(#modalChiPhiBox, #modalKhoanThuBox) :is(.chiphi-list__head, .khoanthu-list__head) > span { padding: 0 10px; }
:is(#modalChiPhiBox, #modalKhoanThuBox) :is(.chiphi-list__head, .khoanthu-list__head) > span:nth-child(2) { text-align: right; }

/* Danh sách: cuộn theo khung ngoài, không tự cuộn riêng */
:is(#modalChiPhiBox, #modalKhoanThuBox) :is(#dsDongChiPhi, #dsDongKhoanThu) {
  display: block;
  max-height: none;
  overflow: visible;
  padding: 0;
  margin: 0;
}

/* Dòng */
:is(#modalChiPhiBox, #modalKhoanThuBox) :is(.chiphi-row, .khoanthu-row) {
  position: relative;
  align-items: start;
  padding: 10px 14px;
  margin: 0;
  background: var(--surface);
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  box-shadow: none;
}
:is(#modalChiPhiBox, #modalKhoanThuBox) :is(.chiphi-row, .khoanthu-row):last-child { border-bottom: 0; }
:is(#modalChiPhiBox, #modalKhoanThuBox) :is(.chiphi-row, .khoanthu-row):hover { box-shadow: none; background: color-mix(in srgb, var(--bg) 45%, var(--surface)); }

/* Ô nhập dùng chung */
:is(#modalChiPhiBox, #modalKhoanThuBox) :is(.chiphi-row, .khoanthu-row) .field__input {
  height: 38px;
  padding: 0 10px;
  font-size: 13.5px;
  border-radius: var(--radius-s);
  box-sizing: border-box;
}
:is(#modalChiPhiBox, #modalKhoanThuBox) :is(.chiphi-row, .khoanthu-row) :is(.chiphi-row__tien, .khoanthu-row__tien) { text-align: right; font-weight: 600; }
:is(#modalChiPhiBox, #modalKhoanThuBox) :is(.chiphi-row, .khoanthu-row) .field__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Dòng đã lưu (khoá): trông như ô bảng, không viền, không mũi tên select */
:is(#modalChiPhiBox, #modalKhoanThuBox) .chiphi-row--khoa { background: var(--surface); }
:is(#modalChiPhiBox, #modalKhoanThuBox) .chiphi-row--khoa .field__input {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--ink-soft);
  cursor: default;
  text-overflow: ellipsis;
}
:is(#modalChiPhiBox, #modalKhoanThuBox) .chiphi-row--khoa :is(.chiphi-row__ten, .khoanthu-row__ten) { color: var(--ink); font-weight: 600; }
:is(#modalChiPhiBox, #modalKhoanThuBox) .chiphi-row--khoa :is(.chiphi-row__tien, .khoanthu-row__tien) { color: var(--chu-navy, var(--navy)); }
:is(#modalChiPhiBox, #modalKhoanThuBox) .chiphi-row--khoa select.field__input {
  -webkit-appearance: none;
  appearance: none;
  background-image: none;
  opacity: 1;
}
:is(#modalChiPhiBox, #modalKhoanThuBox) .chiphi-row--khoa .field__input:focus { box-shadow: none; border-color: transparent; }

/* Dòng mới / đang sửa: nổi bật để biết còn chưa lưu */
:is(#modalChiPhiBox, #modalKhoanThuBox) :is(.chiphi-row, .khoanthu-row):not(.chiphi-row--khoa) {
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  box-shadow: inset 3px 0 0 var(--accent);
}
:is(#modalChiPhiBox, #modalKhoanThuBox) :is(.chiphi-row, .khoanthu-row):not(.chiphi-row--khoa) .field__input {
  background: var(--surface);
  border: 1px solid var(--border);
}
:is(#modalChiPhiBox, #modalKhoanThuBox) :is(.chiphi-row, .khoanthu-row):not(.chiphi-row--khoa) .field__input.field__input--trong,
:is(#modalChiPhiBox, #modalKhoanThuBox) :is(.chiphi-row, .khoanthu-row):not(.chiphi-row--khoa) :is(.chiphi-row__ten, .khoanthu-row__ten):placeholder-shown {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

/* Hoá đơn đính kèm dưới ô Loại */
:is(#modalChiPhiBox, #modalKhoanThuBox) .chiphi-hoadon { padding: 0 4px; }
:is(#modalChiPhiBox, #modalKhoanThuBox) .chiphi-hoadon__select { height: 32px; }

/* Nút thao tác: mờ nhẹ, rõ khi rê vào dòng */
:is(#modalChiPhiBox, #modalKhoanThuBox) .chiphi-row__actions {
  align-self: start;
  margin-top: 3px;
  gap: 2px;
  justify-content: flex-end;
}
:is(#modalChiPhiBox, #modalKhoanThuBox) :is(.chiphi-row__edit, .chiphi-row__thukhach, .chiphi-row__remove) {
  width: 32px;
  height: 32px;
  opacity: 0.6;
  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
:is(#modalChiPhiBox, #modalKhoanThuBox) :is(.chiphi-row, .khoanthu-row):hover :is(.chiphi-row__edit, .chiphi-row__thukhach, .chiphi-row__remove),
:is(#modalChiPhiBox, #modalKhoanThuBox) :is(.chiphi-row, .khoanthu-row):focus-within :is(.chiphi-row__edit, .chiphi-row__thukhach, .chiphi-row__remove) { opacity: 1; }

/* Trạng thái rỗng nằm trong khung bảng */
:is(#modalChiPhiBox, #modalKhoanThuBox) .chiphi-list__empty {
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 34px 12px;
  text-align: center;
}

/* Tổng chi phí */
:is(#modalChiPhiBox, #modalKhoanThuBox) .chiphi-total {
  padding: 12px 18px;
  margin: 0 0 14px;
  background: var(--bg);
  border: 1px solid var(--border);
}
:is(#modalChiPhiBox, #modalKhoanThuBox) .chiphi-total > span:last-child { font-size: 22px; font-weight: 700; }

/* Chân: "Thêm dòng" (khung nét đứt, gọn) + "Lưu" (nút chính, rộng) */
:is(#modalChiPhiBox, #modalKhoanThuBox) .modal-box__footer--chiphi {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  gap: 12px;
}
:is(#modalChiPhiBox, #modalKhoanThuBox) .modal-box__footer--chiphi .btn { min-height: 46px; margin: 0; }
:is(#modalChiPhiBox, #modalKhoanThuBox) .modal-box__footer--chiphi :is(#btnThemDongChiPhi, #btnThemDongKhoanThu) {
  flex: 0 0 auto;
  width: auto;
  padding: 0 22px;
  background: var(--surface);
  border: 1.5px dashed var(--navy-3);
}
:is(#modalChiPhiBox, #modalKhoanThuBox) .modal-box__footer--chiphi :is(#btnThemDongChiPhi, #btnThemDongKhoanThu):hover {
  background: var(--border-soft);
  border-style: solid;
  border-color: var(--navy-3);
}
:is(#modalChiPhiBox, #modalKhoanThuBox) .modal-box__footer--chiphi :is(#btnLuuChiPhi, #btnLuuKhoanThu) { flex: 1 1 auto; }

/* Cột (chỉ màn rộng; màn hẹp giữ dạng thẻ xếp dọc như cũ) */
@media (min-width: 641px) {
  :is(#modalChiPhiBox, #modalKhoanThuBox) :is(.chiphi-row, .khoanthu-row),
  :is(#modalChiPhiBox, #modalKhoanThuBox) :is(.chiphi-list__head, .khoanthu-list__head) {
    grid-template-columns: minmax(0, 1.7fr) 128px 118px 156px minmax(0, 1.3fr) 104px;
    gap: 6px;
  }
}
@media (max-width: 640px) {
  :is(#modalChiPhiBox, #modalKhoanThuBox) .chiphi-scroll { max-height: none; overflow: visible; border-radius: var(--radius-m); }
  :is(#modalChiPhiBox, #modalKhoanThuBox) :is(.chiphi-row, .khoanthu-row) { gap: 6px; padding: 12px; }
  :is(#modalChiPhiBox, #modalKhoanThuBox) .chiphi-row__actions { width: 100%; }
  :is(#modalChiPhiBox, #modalKhoanThuBox) .modal-box__footer--chiphi { flex-wrap: wrap; }
  :is(#modalChiPhiBox, #modalKhoanThuBox) .modal-box__footer--chiphi :is(#btnThemDongChiPhi, #btnThemDongKhoanThu) { flex: 1 1 100%; }
}

/* Khoản thu: 5 cột (không có cột "Loại") — cùng khoảng cách, cùng cột thao tác 104px với Chi phí */
@media (min-width: 641px) {
  #modalKhoanThuBox .khoanthu-row,
  #modalKhoanThuBox .khoanthu-list__head {
    grid-template-columns: minmax(0, 1.7fr) 128px 118px minmax(0, 1.6fr) 104px;
    gap: 6px;
  }
}