/**
 * common/css/app.css — CSS dùng chung cho TOÀN BỘ ứng dụng (khung layout,
 * sidebar, header, toolbar, DataTable, LookupPopup, EntryGrid/VoucherForm,
 * FilterDrawer, badge...). Style riêng cho 1 phân hệ con cụ thể (nếu có)
 * nên để ngay trong thư mục phân hệ con đó, không thêm vào đây.
 */
/* Bộ màu/font khảo sát trực tiếp từ MISA AMIS Kế toán (actapp.misa.vn —
   Danh sách khách hàng + form Thêm khách hàng) qua getComputedStyle: nền
   header/nút chính #245fdf, chữ link "Xem" kiểu nhanh (Thu tiền/Lập CT bán
   hàng) #1570ef đậm 600, chữ gốc #10141b, font InterVariable (biến thể co
   giãn — đúng khớp các font-weight lẻ như 650/420 vốn đã dùng rải rác trong
   file này nhưng trước đây chạy trên font hệ thống không hỗ trợ trọng số lẻ). */
:root {
  --sidebar-width: 240px;
  --header-height: 52px;
  --primary: #02907B;
  --primary-hover: #007A69;
  --primary-active: #00695C;
  --primary-dark: #02907B;
  /* Dạng r,g,b của --primary — dùng trong rgba(var(--primary-rgb), alpha) cho viền sáng/box-shadow khi focus
     (trước đây các chỗ này hardcode rgba theo mã xanh dương cũ của MISA, nay đổi hết sang xanh ngọc hệ thống). */
  --primary-rgb: 2, 144, 123;
  --link: #02907B;
  --sidebar-bg: #ffffff;
  --sidebar-active: #02907B;
  /* Nền nhạt dùng cho khối "đang chọn" (mục sidebar, thẻ nhóm...) + mảng
     trang trí mờ (blob) ở header/nền trang — khảo sát từ mẫu thiết kế mới
     (header/sidebar nền trắng, điểm nhấn xanh ngọc nhạt thay vì mảng xanh đặc). */
  --primary-light: #e3f5f1;
  --primary-lighter: #f1faf8;
  --text-dark: #0f2a3d;
  --text-muted: #6b7280;
  --brand-green: #1a9e64;
  --border: #e5e7eb;
  --danger: #dc3545;
  --warning: #f59e0b;
}

html, body { min-height: 100%; margin: 0; }
body {
  position: relative;
  overflow-x: hidden;
  font-size: 13px;
  font-weight: 420;
  color: #12324A;
  font-family: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Nền xanh ngọc rất nhạt (gradient toả từ 2 góc + dải chéo) thay cho nền xám phẳng cũ. */
  background-color: #F4FBF9;
  background-image:
    radial-gradient(ellipse at 0% 0%, rgba(2, 144, 123, 0.09) 0%, transparent 35%),
    radial-gradient(ellipse at 100% 100%, rgba(101, 188, 174, 0.12) 0%, transparent 38%),
    linear-gradient(135deg, #F4FBF9 0%, #F8FCFB 50%, #F0FAF7 100%);
  background-attachment: fixed;
}
/* Mảng trang trí mờ góc trên-phải của toàn trang (lặp lại cảm giác header),
   rất nhạt, không ảnh hưởng độ tương phản nội dung. */
#main-layout {
  background: radial-gradient(ellipse 760px 420px at 100% 0%, rgba(2,144,123,.07), transparent 65%);
}

/* ---------- SÓNG TRANG TRÍ (2 mảng SVG mờ góc trên-phải/dưới-trái của toàn trang, đặt trực tiếp
   trong <body> — xem index.html) — nằm DƯỚI mọi nội dung (z-index:0), không chặn click (pointer-events:none). ---------- */
.body-wave {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  width: 600px;
  height: 300px;
  opacity: .8;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.body-wave-top {
  top: 0;
  right: 0;
  background-image: url("/common/img/backgrounds/wave-top.svg");
}
/* Sóng dưới: 1 DẢI LIÊN TỤC chạy hết chiều ngang trang (trước đây chỉ là 1 mảng nhỏ góc trái nên nhìn như bị
   cắt ngang) — SVG kéo giãn trọn 100% chiều rộng (preserveAspectRatio="none" trong chính file SVG + background-size:100% 100%). */
.body-wave-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 170px;
  background-image: url("/common/img/backgrounds/wave-bottom.svg");
}
/* Đưa nội dung (khung sườn chính + modal) lên trên 2 mảng sóng. */
.app-header, .sidebar, .main-content, .modal, #main-layout, .voucher-popup-backdrop, #login-container {
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  .body-wave-top { width: 320px; height: 180px; }
  .body-wave-bottom { height: 110px; }
}

/* ---------- CHECKBOX (thiết kế riêng, dùng CHUNG cho TOÀN BỘ checkbox trong ứng dụng — không cần class
   riêng, mọi <input type="checkbox"> tự động theo giao diện này) — bo góc vuông nhẹ, khi tích chuyển nền
   xanh ngọc (var(--primary)) + dấu tích trắng "bung ra" (scale 0→1, nảy nhẹ) + 1 vòng sóng lan toả mờ dần. */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin: 0;
  border: 1.5px solid var(--primary);
  border-radius: 5px;
  background: #fff;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
input[type="checkbox"]:hover:not(:disabled) { border-color: var(--primary); }
input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-light); }
input[type="checkbox"]:checked, input[type="radio"]:checked {
  background: var(--primary);
  border-color: var(--primary);
  animation: cb-ripple .4s ease-out;
}
/* Dấu tích: vẽ bằng border (hình chữ V lật), căn đúng giữa checkbox bằng left/top:50% + translate(-50%,-50%)
   (không lệch theo border/box-sizing), "bung" ra bằng scale có nảy nhẹ (cubic-bezier vượt 1 rồi hồi lại). */
input[type="checkbox"]::after {
  content: '';
  position: absolute;
  left: 50%; top: 48%;
  width: 5px; height: 9.5px;
  border: solid #fff;
  border-width: 0 2.2px 2.2px 0;
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  opacity: 0;
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), opacity .1s ease;
}
input[type="checkbox"]:checked::after, input[type="radio"]:checked::after  { transform: translate(-50%, -50%) rotate(45deg) scale(1); opacity: 1; }
input[type="checkbox"]:disabled {
  background: #f1f5f9;
  border-color: #e2e8f0;
  cursor: default;
}
input[type="checkbox"]:disabled:checked { background: #a8d4ca; border-color: #a8d4ca; }
@keyframes cb-ripple {
  0% { box-shadow: 0 0 0 0 rgba(2, 144, 123, .35); }
  100% { box-shadow: 0 0 0 6px rgba(2, 144, 123, 0); }
}

/* ---------- LAYOUT ---------- */
#main-layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  color: #334155;
  height: 100vh;
  position: fixed;
  overflow-y: auto;
  top: 0; left: 0;
  border-right: 1px solid var(--border);
  transition: width .15s ease;
  z-index: 20;
}
.sidebar.collapsed { width: 64px; }
/* Logo "Vitek Accounting" cùng chiều cao --header-height với .app-header bên
   cạnh — 2 khối liền kề nền trắng tạo cảm giác 1 THANH HEADER TRẮNG liền mạch
   chạy hết chiều ngang trang (mẫu thiết kế mới), không cần dựng lại layout DOM. */
.sidebar .brand {
  height: var(--header-height);
  box-sizing: border-box;
  padding: 0 12px;
  font-weight: 650;
  color: var(--text-dark);
  /* Cùng tông nhuốm xanh ngọc nhạt với .app-header bên cạnh — để thanh header "liền mạch" không bị lệch màu. */
  background-color: #F4FBF9;
  background-image: linear-gradient(100deg, #EAF8F4 0%, #F2FAF8 100%);
  font-size: 15px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.sidebar .brand #btn-sidebar-toggle { color: var(--text-dark) !important; }
.sidebar.collapsed .brand-full { display: none; }
.brand-full { display: inline-flex; align-items: center; gap: 7px; }
.brand-full .brand-logo-mark { height: 24px; width: 24px; flex-shrink: 0; }
.sidebar-item {
  color: var(--text-dark);
  margin: 2px 10px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  border-radius: 8px;
  white-space: nowrap;
  position: relative;
  font-weight: 700;
}
.sidebar-item i { width: 16px; text-align: center; color: var(--primary); }
.sidebar-item:hover { background: var(--primary-light); color: var(--primary); }
.sidebar-item.active {
  background: var(--primary-light);
  color: var(--primary);
}
.sidebar.collapsed .sidebar-item span { display: none; }
.sidebar.collapsed .sidebar-item { justify-content: center; }
.sidebar.collapsed .sidebar-item:hover::after {
  content: attr(title);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: #111827;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 30;
  margin-left: 6px;
}

.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  transition: margin-left .15s ease;
}
.main-content.sidebar-collapsed { margin-left: 64px; }
/* Form chứng từ toàn màn hình nhúng TĨNH trong HTML từng trang (vd purchase-contracts.html #puc-form-backdrop —
   KHÁC với popup dựng qua tlModal_ ở ccdc/tools.js, hàm đó document.body.appendChild nên thoát hẳn khỏi đây, không
   bị lỗi này) bị NẰM DƯỚI .sidebar dù tự khai z-index riêng cao hơn hẳn (.voucher-popup-backdrop: 1600 > .sidebar:
   20) — vì .main-content tự tạo 1 stacking context riêng (position:relative;z-index:1, xem khối "Đưa nội dung lên
   trên 2 mảng sóng" phía trên), nên MỌI phần tử con bên trong không bao giờ thoát ra để đè .sidebar (1 stacking
   context khác, là sibling) được, bất kể z-index khai cao cỡ nào. Chỉ nâng z-index .main-content lên trên .sidebar
   ĐÚNG LÚC đang mở popup toàn màn hình (không đổi mặc định, tránh ảnh hưởng tooltip hover khi thu gọn sidebar lúc
   bình thường — tooltip đó cũng nằm trong .sidebar, z-index 30, chỉ so với nội bộ .sidebar nên không bị ảnh hưởng). */
.main-content:has(.voucher-popup-backdrop.fullscreen.show) { z-index: 21; }

/* ---------- HORIZONTAL MODULE MENU ---------- */
.horizontal-menu {
  display: flex;
  flex-shrink: 0;
  gap: 4px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 16px;
  overflow-x: auto;
  white-space: nowrap;
}
.h-menu-tab {
  padding: 10px 12px;
  font-size: 13px;
  color: #475569;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  flex-shrink: 0;
}
.h-menu-tab:hover { color: var(--primary); }
.h-menu-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 650; }
/* Tab báo cáo đã mở (phân hệ Báo cáo tổng hợp, bao-cao.js bchRenderTabBar_) — có nút đóng (x) riêng, không đóng
   theo click cả tab (stopPropagation ở bchCloseTab_), tối đa 1 dòng + "…" khi tên báo cáo dài. */
.h-menu-tab-closable { display: inline-flex; align-items: center; gap: 8px; max-width: 220px; }
.h-menu-tab-closable > span:first-child, .h-menu-tab-closable { overflow: hidden; text-overflow: ellipsis; }
.h-menu-tab-close { flex-shrink: 0; color: #94a3b8; font-size: 11px; width: 16px; height: 16px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; }
.h-menu-tab-close:hover { background: #e2e8f0; color: #334155; }

.app-header {
  height: var(--header-height);
  flex-shrink: 0;
  /* Nhuốm xanh ngọc đều khắp chiều ngang header (trước đây chỉ có mảng mờ góc phải, bên trái vẫn trắng trơn). */
  background-color: #F4FBF9;
  background-image:
    radial-gradient(ellipse at 0% 0%, rgba(2,144,123,.14) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(101,188,174,.22) 0%, transparent 60%),
    linear-gradient(100deg, #EAF8F4 0%, #F2FAF8 45%, #EAF8F3 100%);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 10;
  overflow: hidden;
}
/* Mảng trang trí mờ (blob) góc phải header, đậm hơn nền chung — chỉ trang trí, nằm DƯỚI các nút/chữ thật
   (xem z-index 2 khối con). */
.app-header::before {
  content: '';
  position: absolute;
  top: -70%; right: -4%;
  width: 460px; height: 260px;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(2,144,123,.22), transparent 60%),
    radial-gradient(ellipse at 100% 80%, rgba(2,144,123,.14), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.app-header > * { position: relative; z-index: 1; }
.header-tenant-name { font-weight: 650; color: var(--text-dark); }
/* Bộ chuyển chi nhánh (Hệ thống > Tuỳ chọn > Tuỳ chọn chung > Đa chi nhánh)
   — chỉ có con trỏ/hiệu ứng hover khi bật (.has-switcher, xem
   updateHeaderTenantLabel_ trong app.js); tắt thì header-tenant-name chỉ là
   chữ thường như trước, không có gì đổi. */
.header-branch-switcher.has-switcher { cursor: pointer; padding: 4px 8px; margin: -4px -8px; border-radius: 6px; }
.header-branch-switcher.has-switcher:hover { background: var(--primary-light); }
.header-branch-popup {
  position: fixed; background: #fff; border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0,0,0,.15); z-index: 1650; min-width: 220px; max-height: 320px; overflow-y: auto; padding: 4px 0;
}
.header-branch-option, .header-branch-option-empty {
  padding: 8px 14px; font-size: 13px; cursor: pointer; color: #10141b;
}
.header-branch-option:hover { background: #eef4ff; color: var(--primary); }
.header-branch-option-empty { color: var(--text-muted); cursor: default; padding-left: 14px; }
/* Bảng cây: "Công ty mẹ" đứng trên cùng (đậm, nền nhạt để tách khối rõ),
   "công ty con" (chi nhánh) thụt lề + icon nhánh cây bên dưới — khớp mô tả
   người dùng "Công ty mẹ bên trên và công ty con ở dưới dạng bảng cây". */
.header-branch-option-company { font-weight: 650; background: #f8fafc; border-bottom: 1px solid var(--border); }
.header-branch-option-branch { padding-left: 30px; }
.header-branch-option i { width: 16px; text-align: center; color: #94a3b8; margin-right: 2px; }
.header-branch-option:hover i { color: var(--primary); }
.header-actions { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.header-icon-btn {
  width: 30px; height: 30px; border: none; background: none; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-dark); cursor: pointer; position: relative;
}
.header-icon-btn:hover { background: var(--primary-light); color: var(--primary); }
.header-icon-btn .badge-dot {
  position: absolute; top: 2px; right: 2px; background: var(--danger); color: #fff; border-radius: 50%;
  font-size: 9px; min-width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; padding: 0 2px;
}
/* Nền avatar tô đặc xanh chủ đạo (chữ/icon trắng) — header giờ nền trắng nên
   đảo lại so với trước (trước avatar trắng để nổi trên header xanh đặc). */
.avatar-circle {
  width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 650;
}

/* ---------- Menu tài khoản ở avatar góc phải header (common/js/account-menu.js) — khảo sát MISA AMIS Kế toán:
   avatar bấm mở panel nổi gồm avatar lớn + tên + email, 2 dòng Công ty/Dữ liệu (bấm mở danh sách con để chuyển),
   rồi các hành động Đổi mật khẩu/Thời hạn giấy phép/Đăng xuất. */
.header-account-trigger { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 8px; margin: -4px -8px; border-radius: 8px; }
.header-account-trigger:hover { background: var(--primary-light); }
.header-account-trigger #header-user-name { font-weight: 500; color: var(--text-dark); font-size: 13px; }
.acct-menu-panel {
  position: fixed; width: 300px; background: #fff; border-radius: 10px; box-shadow: 0 10px 32px rgba(0,0,0,.18);
  z-index: 1650; padding: 18px 0 8px; font-size: 13px;
}
.acct-menu-header { text-align: center; padding: 0 16px 14px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.acct-menu-avatar {
  width: 56px; height: 56px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 22px; font-weight: 650;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 10px;
}
.acct-menu-name { font-weight: 650; color: var(--text-dark); font-size: 15px; }
.acct-menu-email { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.acct-menu-row, .acct-menu-action {
  display: flex; align-items: center; gap: 10px; padding: 9px 16px; cursor: pointer; color: var(--text-dark);
}
.acct-menu-row:hover, .acct-menu-action:hover { background: #f3f6fa; }
.acct-menu-row i:first-child, .acct-menu-action i:first-child { width: 16px; text-align: center; color: var(--text-muted); }
.acct-menu-row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu-row .fa-chevron-right { font-size: 11px; color: #c3cad6; }
.acct-menu-divider { height: 1px; background: var(--border); margin: 6px 0; }
.acct-menu-logout { color: var(--danger, #dc2626); }
.acct-submenu {
  position: fixed; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,.15);
  z-index: 1660; min-width: 260px; max-height: 320px; overflow-y: auto; padding: 4px 0; font-size: 13px;
}
.acct-submenu-item { padding: 9px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
.acct-submenu-item:hover { background: #eef4ff; }
.acct-submenu-item.active { background: var(--primary-light); }
.acct-submenu-item-name { color: var(--text-dark); }
.acct-submenu-item-sub { font-size: 11px; color: var(--text-muted); }
.acct-submenu-empty { padding: 10px 14px; color: var(--text-muted); }

.page-content { padding: 20px; flex: 1; min-height: 0; overflow-y: auto; }

/* ---------- TRANG DANH MỤC (bảng): tiêu đề + thanh công cụ cố định phía
   trên, chân bảng (tổng số + phân trang) cố định phía dưới, tự co giãn
   theo chiều cao màn hình — chỉ vùng bảng (.dt-scroll) có scrollbar dọc VÀ
   ngang riêng, không cuộn cả trang. Nhận diện trang danh mục qua chính cấu
   trúc HTML sẵn có (luôn có .catalog-page-header) — không cần thêm class
   hay sửa từng trang. */
.page-content:has(> .catalog-page-header) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.page-content:has(> .catalog-page-header) > .catalog-page-header,
.page-content:has(> .catalog-page-header) > .toolbar {
  flex-shrink: 0;
}
.page-content:has(> .catalog-page-header) > div[id$="-table"],
.page-content:has(> .catalog-page-header) > div[id$="-root"] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.page-content:has(> .catalog-page-header) > div[id$="-root"] > div[id$="-table"] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- TRANG BÁO CÁO (tong-hop/gl.js, mrp.js, tien-mat/tien-gui/mua-hang process.js...): thanh "Quay lại +
   Chọn tham số" (.gl-rv-bar, reportBackBarHtml_) cố định phía trên, bảng kết quả bên dưới tự co giãn hết chiều cao
   còn lại + CHỈ cuộn RIÊNG bên trong .dt-scroll (thead dính trên — table.data-table th đã position:sticky sẵn —
   .dt-footer dính dưới cùng khung bảng), không cuộn cả trang — cùng nguyên tắc "TRANG DANH MỤC" phía trên. Nhận diện
   qua chính cấu trúc HTML sẵn có (div trực tiếp trong .page-content chứa .gl-rv-bar) — không cần thêm class hay sửa
   từng trang báo cáo. 2 rule ".gl-rv-bar + div" xử lý được CẢ 2 kiểu lồng div khác nhau giữa các trang: gl.js tự tạo
   thêm 1 div bọc ("tableHost") trước khi new DataTable(), mrp.js/process.js new DataTable() thẳng vào div kết quả. */
.page-content:has(> div > .gl-rv-bar) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.page-content:has(> div > .gl-rv-bar) > div {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gl-rv-bar { flex-shrink: 0; }
.gl-rv-bar + div:has(.dt-wrap),
.gl-rv-bar + div:has(.dt-wrap) > div:has(.dt-wrap) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- THANH KÉO DỌC (bảng danh sách Thu/Chi tiền + xem nhanh dưới,
   crpInitSplitPane_/bnkInitSplitPane_ trong receipts-payments.js — DÙNG
   CHUNG cho cả 2 trang Tiền mặt (#crp-split) và Tiền gửi (#bnk-split), xem
   ghi chú đầu tien-gui/receipts-payments/receipts-payments.html) — cùng
   nguyên tắc bó khung chiều cao như khối "TRANG DANH MỤC" phía trên:
   .page-content không cuộn (overflow:hidden), CHỈ #crp-split/#bnk-split và
   các phần bên trong nó tự co giãn + cuộn riêng, không cuộn cả trang. */
.page-content:has(> #crp-split), .page-content:has(> #bnk-split) { display: flex; flex-direction: column; overflow: hidden; }
#crp-split, #bnk-split { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.crp-split-pane {
  display: flex; flex-direction: column; overflow: hidden; min-height: 70px;
}
#crp-split-top, #bnk-split-top { flex: 1 1 60%; }
#crp-split-bottom, #bnk-split-bottom { flex: 1 1 40%; }
#crp-split-top > div, #crp-split-bottom > div,
#bnk-split-top > div, #bnk-split-bottom > div { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.crp-split-divider {
  flex-shrink: 0; height: 12px; position: relative; cursor: row-resize;
  display: flex; align-items: center; justify-content: center;
}
.crp-split-divider::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--border);
}
.crp-split-toggle {
  position: relative; z-index: 1; width: 26px; height: 18px; border: 1px solid var(--border); border-radius: 4px;
  background: #fff; display: none; align-items: center; justify-content: center; cursor: pointer; color: #64748b; font-size: 11px;
}
.crp-split-toggle:hover { color: var(--primary); border-color: var(--primary); }
.crp-split-divider:hover .crp-split-toggle { display: flex; }
/* Đã ẩn phần dưới — phần trên chiếm hết chỗ, thanh kéo hết con trỏ resize (không kéo được nữa cho tới khi hiện lại). */
#crp-split.crp-split-collapsed #crp-split-bottom, #bnk-split.crp-split-collapsed #bnk-split-bottom { display: none; }
#crp-split.crp-split-collapsed .crp-split-divider, #bnk-split.crp-split-collapsed .crp-split-divider { cursor: default; }
.crp-quickview { height: 100%; }
/* Vùng cuộn RIÊNG chỉ bọc <table> (giống .dt-scroll của DataTable chính) —
   .dt-footer (phân trang) nằm NGOÀI vùng này nên không cuộn mất theo.
   KHÔNG đặt padding-top trên .crp-qv-scroll (ancestor cuộn của <thead
   position:sticky;top:0>) — padding-top trên đúng ancestor đang cuộn làm
   Chrome tính sai vùng "dính", khiến thead mất dính giữa chừng và dữ liệu
   cuộn chạy xuyên qua header (padding ngang thì không ảnh hưởng, vẫn giữ
   16px 2 bên; khoảng đệm trên/dưới chuyển sang margin của bảng thay vì
   padding của vùng cuộn). */
.crp-quickview-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.crp-qv-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px; }
.crp-qv-scroll .crp-qv-table { margin-bottom: 12px; }
.crp-quickview-body > .dt-footer { flex-shrink: 0; padding: 8px 16px; }
.crp-quickview-body > p { padding: 14px 16px; margin: 0; }

/* ---------- LOGIN ---------- */
#login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("/common/img/backgrounds/bg-login.png") center center / cover no-repeat;
}
.login-card {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(6px);
  border-radius: 18px;
  padding: 36px 40px;
  width: 460px;
  box-shadow: 0 20px 50px rgba(10,60,70,.18);
}
/* Logo "VITEK ERP" (chữ V ribbon 2 tông xanh + tên + khẩu hiệu) — xem login.html */
.login-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.login-logo-mark { flex-shrink: 0; }
.login-logo-text { line-height: 1.35; }
.login-brand-dark { color: var(--text-dark); font-weight: 800; font-size: 19px; letter-spacing: .3px; }
.login-brand-teal { color: var(--primary); font-weight: 800; font-size: 19px; letter-spacing: .3px; }
.login-logo-tagline { color: var(--text-muted); font-size: 12.5px; }
.login-title { font-size: 25px; font-weight: 750; color: var(--text-dark); margin: 0 0 4px; }
.login-subtitle { color: var(--text-muted); font-size: 13.5px; margin-bottom: 22px; }
/* Ô nhập có icon (thư/khoá) bên trái, icon mắt (hiện/ẩn mật khẩu) bên phải — viền xanh khi focus */
.login-field {
  display: flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 14px; margin-bottom: 16px;
  border: 1px solid var(--border); border-radius: 10px; background: #fff;
}
.login-field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.login-field > i:first-child { color: var(--text-muted); font-size: 14px; width: 16px; text-align: center; }
.login-field input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 14px; color: var(--text-dark); font-family: inherit;
}
.login-field input::placeholder { color: #9aa5b1; }
.login-eye-toggle { color: var(--text-muted); cursor: pointer; font-size: 14px; }
.login-eye-toggle:hover { color: var(--primary); }
.login-btn {
  width: 100%; height: 50px; margin-top: 6px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--primary); color: #fff; border: none; border-radius: 10px;
  font-size: 15px; font-weight: 650; cursor: pointer;
}
.login-btn:hover { background: var(--primary-hover); }
.login-forgot { text-align: center; margin-top: 18px; font-size: 13px; }
.login-forgot a { color: var(--primary); text-decoration: underline; }
.login-tenant-list { display: flex; flex-direction: column; gap: 8px; }
.login-tenant-list .list-group-item {
  border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
  background: #fff; text-align: left; font-size: 14px; color: var(--text-dark); cursor: pointer;
}
.login-tenant-list .list-group-item:hover { border-color: var(--primary); background: var(--primary-lighter); color: var(--primary-dark); }

/* ---------- KPI CARD (bản icon tròn màu, giống dải thẻ tổng hợp MISA) ---------- */
.kpi-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  display: flex; align-items: center; gap: 12px;
}
.kpi-card .kpi-icon {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.kpi-card .kpi-icon.icon-blue { background: var(--primary-light); color: var(--primary); }
.kpi-card .kpi-icon.icon-green { background: #e7f7ef; color: var(--brand-green); }
.kpi-card .kpi-icon.icon-red { background: #fdecec; color: var(--danger); }
.kpi-card .kpi-icon.icon-orange { background: #fef3e2; color: var(--warning); }
.kpi-card .kpi-body { flex: 1; min-width: 0; }
.kpi-card .kpi-label { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.kpi-card .kpi-value { font-size: 18px; font-weight: 650; margin-top: 2px; }
.kpi-card .kpi-delta { font-size: 11.5px; margin-top: 3px; display: flex; align-items: center; gap: 3px; }
.kpi-card .kpi-delta.up { color: var(--brand-green); }
.kpi-card .kpi-delta.down { color: var(--danger); }
/* Dải 3 ô KPI công nợ đầu trang Khách hàng/Nhà cung cấp (kpi-card đã có sẵn
   từ trước, chỉ thiếu container xếp hàng ngang — khớp MISA AMIS Kế toán). */
.kpi-row { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.kpi-row .kpi-card { flex: 1; min-width: 220px; }

/* ---------- DANH SÁCH BÁO CÁO (thanh bên trái trang "Báo cáo" — Tiền mặt và các phân hệ sau) ---------- */
.car-report-item {
  padding: 9px 16px; font-size: 13px; color: #334155; cursor: pointer; display: flex; align-items: center; gap: 8px;
}
.car-report-item:hover { background: #f8fafc; }
.car-report-item.active { background: #eef6ff; color: var(--primary); font-weight: 650; }
.car-report-item.disabled { color: var(--text-muted); cursor: not-allowed; }
.car-report-item.disabled:hover { background: none; }
.car-inline-check { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 13px; white-space: nowrap; }
/* Hàng tuỳ chọn hiển thị dưới hàng tham số báo cáo (VD "Cộng gộp...", "Thu trước chi..." — carParamsCashBookExtra_) — xếp ngang, tự xuống dòng khi hẹp. */
.rpt-extra-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin-top: 12px; }
/* Sao báo cáo ưa thích (report-favorites.js) — nút cạnh mỗi báo cáo trong danh sách (car-report-item / mrp), tách click khỏi việc chọn báo cáo. */
.rpt-star { margin-left: auto; color: #cbd5e1; cursor: pointer; padding: 2px 5px; flex-shrink: 0; }
.rpt-star:hover { color: #f59e0b; }
.rpt-star.starred { color: #f59e0b; }

/* ---------- Trang "Quy trình" dùng chung mọi phân hệ (common/js/process-page.js) ---------- */
.qtr-wrap { display: flex; gap: 16px; align-items: flex-start; }
.qtr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.qtr-side { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1100px) { .qtr-wrap { flex-direction: column; } .qtr-side { width: 100%; } }
.qtr-card { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.06); padding: 18px 20px; }
.qtr-card-title { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 15px; margin-bottom: 16px; }
.qtr-card-title i { color: var(--primary); font-size: 16px; }
.qtr-steps { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.qtr-step { flex: 1; min-width: 150px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px 10px; cursor: pointer; border-radius: 10px; transition: background .15s; }
.qtr-step:hover { background: var(--primary-lighter); }
.qtr-step:hover .qtr-step-icon { background: var(--primary); color: #fff; }
.qtr-step-icon { width: 56px; height: 56px; border-radius: 50%; background: #eef6ff; color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 10px; transition: background .15s, color .15s; }
.qtr-step-title { font-weight: 650; font-size: 13.5px; margin-bottom: 4px; }
.qtr-step-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.qtr-step-arrow { display: flex; align-items: center; justify-content: center; color: #cbd5e1; font-size: 16px; padding-top: 22px; flex: 0 0 auto; width: 28px; }
@media (max-width: 760px) { .qtr-step-arrow { transform: rotate(90deg); width: 100%; padding: 6px 0; } .qtr-steps { flex-direction: column; } }
/* Nhiều phương pháp tính giá thành, mỗi phương pháp 1 hàng riêng có tiêu đề bên trên (VD Giản đơn/Hệ số tỷ lệ/Phân
   bước/Công trình/Đơn hàng/Hợp đồng — PROCESS_CONFIGS_['gia-thanh'].stepGroups). */
.qtr-step-groups { display: flex; flex-direction: column; gap: 26px; }
.qtr-step-group-title { font-weight: 650; font-size: 13.5px; color: var(--primary); margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid #e2e8f0; }
.qtr-fav-item { display: flex; align-items: center; gap: 10px; padding: 9px 4px; font-size: 13px; color: #334155; cursor: pointer; border-bottom: 1px solid #f1f5f9; }
.qtr-fav-item:last-child { border-bottom: none; }
.qtr-fav-item:hover { color: var(--primary); }
.qtr-fav-item i.fa-star { color: #f59e0b; flex-shrink: 0; }
.qtr-fav-empty { color: var(--text-muted); font-size: 13px; padding: 6px 4px; }
.qtr-mini-kpi-row { display: flex; gap: 10px; margin-bottom: 4px; }
.qtr-mini-kpi { flex: 1; background: #f8fafc; border-radius: 8px; padding: 10px 12px; }
.qtr-mini-kpi .lbl { font-size: 11.5px; color: var(--text-muted); }
.qtr-mini-kpi .val { font-size: 15px; font-weight: 650; margin-top: 2px; }

/* ---------- Phân hệ "Báo cáo" (bao-cao/bao-cao.js) — tổng hợp danh mục báo cáo mọi phân hệ vào 1 trang, khảo sát
   MISA AMIS Kế toán > Báo cáo: thanh tìm kiếm trên cùng, danh mục phân hệ bên trái, danh sách 2 cột bên phải. ---------- */
.bch-topbar { display: flex; align-items: center; padding: 4px 4px 16px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.bch-search { position: relative; max-width: 420px; flex: 1; }
.bch-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 13px; }
.bch-search input { width: 100%; padding: 8px 12px 8px 34px; border: 1px solid #cfe4df; border-radius: 8px; font-size: 13.5px; }
.bch-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12); }
.bch-body { display: flex; gap: 20px; align-items: flex-start; }
.bch-nav { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.06); padding: 8px; }
.bch-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: #334155; text-decoration: none; font-size: 13.5px; font-weight: 550; }
.bch-nav-item i { width: 16px; text-align: center; color: #94a3b8; }
.bch-nav-item:hover { background: #f1f5f9; }
.bch-nav-item.active { background: var(--primary-lighter); color: var(--primary); }
.bch-nav-item.active i { color: var(--primary); }
.bch-main { flex: 1; min-width: 0; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.06); padding: 18px 20px; }
.bch-group { margin-bottom: 20px; }
.bch-group-title { font-weight: 650; font-size: 13px; color: #475569; background: #f8fafc; padding: 8px 10px; border-radius: 6px; margin-bottom: 6px; }
.bch-group-items { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 24px; }
.bch-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13.5px; color: #1e293b; }
.bch-item:hover { background: var(--primary-lighter); color: var(--primary); }
@media (max-width: 900px) { .bch-body { flex-direction: column; } .bch-nav { width: 100%; flex-direction: row; flex-wrap: wrap; } .bch-group-items { grid-template-columns: 1fr; } }

/* ---------- Tiền mặt > Báo cáo (trang gộp Quy trình + Báo cáo — tien-mat/process/process.html) ---------- */
.car-page-icon {
  width: 36px; height: 36px; border-radius: 9px; background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0;
}
/* Tiêu đề khối "Chọn loại báo cáo" — icon + <h4>Báo cáo Tiền mặt</h4> (trước
   đây là 1 khối .car-page-header riêng ở đầu trang, nay dời thẳng vào đây). */
.car-sidebar-title { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 13.5px; padding: 0 16px 12px; }
.car-sidebar-title h4 { margin: 0; font-size: 15px; }
.car-chart-card h6 { margin: 0 0 10px; font-size: 13.5px; font-weight: 650; }
.car-report-title-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.car-report-title-row h5 { margin: 0; }
/* .car-report-subtitle giờ nằm trong .dt-filter-chips (toolbar DataTable của bảng báo cáo) thay vì dòng phụ đề riêng — xem carInjectSubtitleChip_ ở process.js. */
.car-report-subtitle { font-size: 13px; color: var(--text-muted); font-style: italic; }
.car-donut-legend { list-style: none; margin: 10px 0 0; padding: 0; font-size: 12px; }
.car-donut-legend li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.car-donut-legend .car-donut-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.car-donut-legend .car-donut-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.car-donut-legend .car-donut-percent { font-weight: 650; color: var(--text); }
.kpi-collapse-toggle {
  display: flex; justify-content: center; margin: -4px 0 8px;
}
.kpi-collapse-toggle button {
  border: none; background: #fff; color: var(--text-muted); border-radius: 0 0 8px 8px;
  padding: 2px 14px; font-size: 11px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* ---------- TOOLBAR (search + filter nhanh + action buttons) ---------- */
.toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-bottom: 10px;
}
.toolbar-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }
.toolbar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.toolbar-search {
  position: relative; width: 260px; max-width: 40vw;
}
.toolbar-search i {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 12px;
}
.toolbar-search input {
  width: 100%; padding: 6px 10px 6px 28px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px;
}
.toolbar-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .12); }
.toolbar select.form-select-sm { font-size: 13px; width: auto; }
.icon-btn {
  width: 30px; height: 30px; border: 1px solid var(--border); background: #fff; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center; color: #475569; cursor: pointer; font-size: 13px;
}
.icon-btn:hover { background: #f1f5f9; }
/* Nút hành động chính (Lưu/Thêm mới/Cất...) đổi từ xanh lá sang xanh dương
   #245fdf khớp nút "Thêm"/"Cất và Thêm" của MISA — --brand-green vẫn giữ
   nguyên định nghĩa vì còn dùng cho vài chỗ mang nghĩa "xanh lá" riêng
   (icon KPI icon-green...), chỉ .btn-brand (nút chính dùng chung toàn app)
   đổi màu. */
.btn-brand {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.btn-brand:hover { background: var(--primary-hover); border-color: var(--primary-dark); color: #fff; }
.btn-outline-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #7d6c72;
    --bs-btn-active-border-color: #6c757d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6c757d;
    --bs-gradient: none;
}

/* ---------- DATA TABLE ---------- */
.dt-wrap {
  background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.06); overflow: hidden;
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
/* thead tách riêng khỏi vùng cuộn dọc (datatable.js renderHead_/headScrollEl) — để scrollbar DỌC chỉ chạy dọc
   theo phần thân bảng (tbody/tfoot trong .dt-scroll), không chạy ngang qua cả header. Không có scrollbar riêng
   (overflow-x:hidden) — chỉ dịch theo .dt-scroll khi cuộn ngang (JS set scrollLeft, xem listener 'scroll'). */
.dt-head-scroll { flex-shrink: 0; overflow: hidden; }
/* Vùng cuộn RIÊNG của bảng — cả dọc lẫn ngang, không cuộn cả trang */
.dt-scroll { flex: 1; min-height: 0; overflow: auto; }
/* table-layout:fixed BẮT BUỘC cho cơ chế độ rộng cột tuỳ chỉnh/cố định (kéo
   resize, cố định trái/phải qua offset tính bằng JS) — với table-layout:auto
   (mặc định), trình duyệt tự tính lại độ rộng cột theo nội dung ô (đặc biệt
   với white-space:nowrap) và BỎ QUA độ rộng khai báo ở <col>, khiến offset
   "cố định" JS tính ra sai với độ rộng thật sự render ra → cột cố định thứ 2
   trở đi bị lệch/che nhau khi cuộn ngang (dấu hiệu: khoảng trắng xen giữa 2
   cột đã cố định liền nhau). */
table.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.8px; white-space: nowrap; table-layout: fixed; }
table.data-table td:not([class="dt-pin-left"]), table.data-table th:not([class="dt-pin-left"]) { overflow: hidden; text-overflow: ellipsis; }
/* Header tối màu hơn + đậm hơn 1 chút so với thân bảng, kèm kẻ dọc giữa các
   cột (cả header lẫn thân) để tách bạch từng cột theo chiều dọc, đúng kiểu
   lưới MISA — viền dọc ở header đậm hơn viền dọc ở thân 1 chút cho nổi bật. */
table.data-table th {
  background: #e6e7ea; color: #10141b; font-weight: 700; text-align: left;
  padding: 8px 26px 8px 10px; border-bottom: 1px dotted #ced4da; border-right: 1px dotted #ced4da;
  position: sticky; top: 0; z-index: 2; user-select: none;
}
table.data-table th:last-child { border-right: none; }
/* Tiêu đề nhóm 2 tầng (cột khai báo group — xem renderHead_ ở datatable.js): hàng 2 dính ngay dưới hàng nhóm. */
table.data-table th.dt-group-th { border-bottom: 1px solid #c3c8d0; padding-right: 10px; }
table.data-table tr.dt-head-row2 th { top: 34px; }
table.data-table th.sortable { cursor: pointer; }
table.data-table th.sortable:hover { color: var(--primary); }
table.data-table th .sort-icon { font-size: 10px; margin-left: 4px; opacity: .5; }
table.data-table td { padding: 7px 10px; border-bottom: 1px dotted #ced4da; border-right: 1px dotted #ced4da; vertical-align: middle; }
table.data-table td:last-child { border-right: none; }
table.data-table tbody tr:hover { background: #ecebeb; }
table.data-table tbody tr.row-selected { background: var(--primary-light); }
/* Dòng đang "xem nhanh" (onRowActivate, khác row-selected của checkbox) —
   nổi màu rõ hơn để biết chi tiết bên dưới đang thuộc dòng nào. */
table.data-table tbody tr.row-quickview-active { background: var(--primary-lighter); }
table.data-table tbody tr.row-quickview-active td.dt-pin-left,
table.data-table tbody tr.row-quickview-active td.dt-pin-right { background: var(--primary-lighter); }
table.data-table td.text-end, table.data-table th.text-end { text-align: right; }
table.data-table td.text-center, table.data-table th.text-center { text-align: center; }
/* Cột "Chức năng" (nút Xem/dropdown, xem rowActionsHtml() trong datatable.js)
   LUÔN căn giữa, áp dụng 1 LẦN cho mọi bảng qua ".row-action" — kể cả các
   bảng cây tự dựng HTML riêng (accounts.js, tree-catalog.js,
   product-categories.js...) không cần sửa từng nơi, không cần khai báo
   align:'center' ở từng trang Danh mục dùng DataTable dùng chung. */
table.data-table td:has(> .row-action) { text-align: center; }
table.data-table td.doc-link { color: var(--link); cursor: pointer; font-weight: 500; }
table.data-table td.doc-link:hover { text-decoration: underline; }
/* Bỏ in đậm cột Mã (và các cột định danh tương tự: Số TK, Ký hiệu, cột cây...)
   trên mọi bảng danh mục — khớp style MISA (chỉ tiêu đề cột in đậm, dữ liệu
   dòng để chữ thường). Rất nhiều trang tự bọc <b> quanh ô này trong hàm
   render cột riêng của từng trang (vd products.js, accounts.js,
   tree-catalog.js...) nên sửa 1 lần ở đây thay vì sửa tay từng trang — không
   đụng tới <b class="dt-total-count"> ở dt-footer vì nằm ngoài <table>.
   Không đụng tới tfoot (hàng Tổng cộng) vì đã có font-weight đậm riêng. */
table.data-table tbody td b,
table.data-table tbody td strong {
  font-weight: 400;
}
table.data-table tfoot td { font-weight: 650; background: #fafafa; border-top: 2px solid var(--border); border-right: 1px solid #eef1f5; }
table.data-table tfoot td:last-child { border-right: none; }
/* opts.rowGroup (datatable.js) — dòng tổng hợp chèn trước mỗi nhóm, giống .tx-grp (thue/tax.js) nhưng dùng chung
   cho MỌI bảng khai báo rowGroup, không riêng Thuế. */
.dt-group-row td { font-weight: 700; background: #f1f5f9; }
.dt-empty { padding: 40px 0; text-align: center; color: var(--text-muted); }
.dt-empty-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dt-empty-icon { font-size: 38px; color: #9ed9cb; }
.dt-empty-text { font-size: 13px; color: var(--text-muted); max-width: 420px; }

/* Mặc định: hiện lồng ngay sau ô tìm kiếm, trên cùng 1 dòng với thanh công cụ (khảo sát MISA) */
.dt-bulk-toolbar {
  display: none; align-items: center; gap: 10px; font-size: 13px;
}
.dt-bulk-toolbar.show { display: flex; }
.dt-bulk-count { font-weight: 650; color: #334155; white-space: nowrap; }
.dt-bulk-clear { color: var(--primary); text-decoration: none; white-space: nowrap; }
.dt-bulk-clear:hover { text-decoration: underline; }
.dt-bulk-slot { display: flex; gap: 6px; flex-wrap: wrap; }
/* Biến thể dự phòng khi bảng không bật toolbar (không có ô tìm kiếm để đứng cạnh) — dải riêng phía trên bảng */
.dt-bulk-toolbar--bar {
  padding: 8px 12px; background: #eef6ff; border-bottom: 1px solid var(--border);
}

/* ---------- DT TOOLBAR (khảo sát MISA: tìm kiếm trái, icon phải) ---------- */
.dt-toolbar-wrap { flex-shrink: 0; }
.dt-toolbar-wrap .toolbar { margin-bottom: 8px; }
.dt-toolbar-check {
  font-size: 13px; display: flex; align-items: center; gap: 4px; cursor: pointer; color: #475569; white-space: nowrap;
}

/* ---------- NÚT "+ THÊM MỚI" KÈM DROPDOWN NHẬP KHẨU EXCEL ---------- */
.dt-add-split { display: inline-flex; position: relative; }
.dt-add-split .dt-add-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dt-add-split .dt-add-caret {
  border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid rgba(255,255,255,.4); padding: 0 8px;
}
.dt-add-menu {
  display: none; position: absolute; top: 100%; right: 0; margin-top: 4px; background: #fff;
  border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.12);
  min-width: 240px; max-width: 360px; z-index: 50;
}
.dt-add-menu.show { display: block; }
.dt-add-menu a {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: #334155; text-decoration: none; font-size: 13px;
  white-space: normal;
}
.dt-add-menu a:hover { background: #f1f5f9; }
/* Danh sách "nghiệp vụ ngầm định" chèn giữa nút Thu/Chi và Nhập khẩu từ excel — xem vimSetSplitScenarios_ */
.dt-add-menu-scenarios { max-height: 320px; overflow-y: auto; }
.dt-add-menu-scenarios:not(:empty) { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.dt-add-menu-scenarios a { padding-left: 24px; color: var(--text-muted); }

/* ---------- DROPLIST 2 CẤP (vd. "Lập chứng từ" của phân hệ Hoá đơn, mua vào) ----------
   Cấp 1 (.dt-add-menu-item) là 1 dòng trong .dt-add-menu bình thường; bấm vào dòng (không bấm đúng lên link cấp 2)
   bật/tắt flyout .dt-add-submenu của chính nó, nằm bung sang phải ngay cạnh. */
.dt-add-menu-item { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: #334155; font-size: 13px; cursor: pointer; }
.dt-add-menu-item:hover { background: #f1f5f9; }
.dt-add-menu-item .dt-add-submenu-caret { margin-left: auto; font-size: 11px; color: var(--text-muted); }
.dt-add-submenu {
  display: none; position: absolute; left: 100%; top: 0; margin-left: 2px; background: #fff;
  border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.12);
  min-width: 190px; z-index: 51;
}
.dt-add-submenu.show { display: block; }
.dt-add-submenu a { display: block; padding: 8px 12px; color: #334155; text-decoration: none; font-size: 13px; }
.dt-add-submenu a:hover { background: #f1f5f9; }

/* ---------- MODAL "Nhập khẩu từ Excel" ---------- */
.dt-import-preview .data-table th, .dt-import-preview .data-table td { white-space: normal; }
.dt-import-summary.text-danger { color: var(--danger, #dc2626); }

/* ---------- CỘT CỐ ĐỊNH (pin trái/phải khi cuộn ngang) ---------- */
table.data-table th.dt-pin-left, table.data-table td.dt-pin-left,
table.data-table th.dt-pin-right, table.data-table td.dt-pin-right {
  position: sticky; z-index: 3; background: #fff;
}
table.data-table th.dt-pin-left, table.data-table th.dt-pin-right { background: #e7ecf3; z-index: 4; }
table.data-table tbody tr:hover td, table.data-table tbody tr:hover td.dt-pin-left, table.data-table tbody tr:hover td.dt-pin-right { background: #ecebeb !important; }
table.data-table tbody tr.row-selected td.dt-pin-left, table.data-table tbody tr.row-selected td.dt-pin-right { background: var(--primary-light); }

/* ---------- KÉO ĐỔI ĐỘ RỘNG CỘT ----------
   (th đã "position: sticky" ở khối DATA TABLE phía trên — đó cũng chính là
   positioning context cho .dt-resize-handle bên dưới, không cần "relative"
   riêng — nếu đặt lại "relative" ở đây sẽ GHI ĐÈ mất sticky vì cùng độ đặc
   hiệu selector nhưng đứng sau trong file.) */
.dt-th-label { display: inline-flex; align-items: center; }
.dt-resize-handle {
  position: absolute; right: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 5;
}
.dt-resize-handle:hover { background: var(--primary); opacity: .3; }

/* ---------- LỌC THEO CỘT (icon phễu trên tiêu đề, khảo sát MISA) ---------- */
.dt-col-filter-btn {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; padding: 0; border: none; background: transparent; border-radius: 3px;
  display: none; align-items: center; justify-content: center;
  color: #94a3b8; cursor: pointer; font-size: 11px; z-index: 2;
}
/* Chỉ hiện icon lọc khi rê chuột vào ô tiêu đề cột, trừ khi cột đó đang có điều kiện lọc áp dụng (luôn hiện để biết cột nào đang lọc) */
table.data-table th:hover .dt-col-filter-btn,
.dt-col-filter-btn.active { display: inline-flex; }
.dt-col-filter-btn:hover { background: #e2e8f0; color: #475569; }
.dt-col-filter-btn.active { color: var(--primary); }
.dt-filter-popup {
  /* position:fixed + toạ độ JS — cùng lý do với .row-action-menu (thoát clip của .dt-scroll) */
  display: block; position: fixed; background: #fff; padding: 10px;
  border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,.12);
  width: 240px; z-index: 60;
}
.dt-filter-popup-title { font-size: 13px; font-weight: 650; color: #334155; margin-bottom: 8px; }
.dt-filter-op, .dt-filter-value {
  width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; margin-bottom: 8px;
}
.dt-filter-value:disabled { background: #f8fafc; color: var(--text-muted); }
.dt-filter-popup-actions { display: flex; justify-content: space-between; gap: 8px; }
.dt-filter-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dt-filter-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; border-radius: 12px;
  background: #eef6ff; color: var(--primary); font-size: 12px; white-space: nowrap;
}
.dt-filter-chip-x {
  color: var(--primary); text-decoration: none; font-size: 14px; line-height: 1; padding: 2px; border-radius: 50%;
}
.dt-filter-chip-x:hover { background: rgba(var(--primary-rgb), .15); }

/* Panel "Tùy chỉnh giao diện" (openColumnCustomizeModal_) trượt ra từ bên
   phải giống .filter-drawer (không phải modal giữa màn hình) — dựng động
   bằng JS nên có class riêng, KHÔNG dùng lại chính .filter-drawer (trang
   nào cũng có sẵn 1 filter-drawer tĩnh riêng trong HTML, dùng chung id sẽ
   đụng nhau). z-index cao hơn .voucher-popup-backdrop (1600) vì panel này
   còn được mở từ trong lưới hạch toán của form Thu/Chi tiền/Bút toán
   (voucher-popup-backdrop) — panel dựng thẳng vào <body> nên nằm ở stacking
   context gốc, phải thắng thẳng 1600 mới hiện lên trên được (xem ghi chú
   tương tự ở .lookup-fill-menu). */
.dcc-drawer-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 1700;
}
.dcc-drawer-backdrop.show { display: block; }
.dcc-drawer {
  position: fixed; top: 0; right: -680px; width: 660px; max-width: 92vw; height: 100vh; background: #fff;
  box-shadow: -4px 0 16px rgba(0,0,0,.12); z-index: 1701; transition: right .2s ease;
  display: flex; flex-direction: column;
}
.dcc-drawer.show { right: 0; }
.dcc-drawer-header {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.dcc-drawer-header h5 { margin: 0; font-weight: 650; font-size: 16px; }
.dcc-drawer-header .spacer { flex: 1; }
.dcc-drawer-header .close-btn { border: none; background: none; font-size: 16px; cursor: pointer; color: var(--text-muted); }
.dcc-drawer-body { flex: 1; overflow-y: auto; }
.dcc-drawer-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-top: 1px solid var(--border); }
.dcc-drawer-footer .actions { display: flex; gap: 8px; }

/* ---------- MODAL "Tùy chỉnh giao diện" — dùng CHUNG cho DataTable (mọi
   trang Danh mục) và thanh công cụ lưới hạch toán (entry-dimensions.js,
   xem openColumnCustomizeModal_) — bảng 6 cột: kéo sắp xếp | hiện/ẩn | tên
   cột dữ liệu của phần mềm (cố định) | tên muốn hiện thị (sửa được) | độ
   rộng | cố định. Trang nào chưa hỗ trợ kéo sắp xếp/cố định (vd cột chiều
   hạch toán) thì ẩn hẳn cột đó (colspan tự co lại, không còn nút bấm chết). */
.dt-colcfg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dt-colcfg-table th {
  background: #f1f5f9; font-size: 11.5px; text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--border); position: sticky; top: 0;
}
.dt-colcfg-table td { padding: 5px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.dt-colcfg-table tbody tr:hover { background: #ecebeb; }
.dt-colcfg-table tbody tr.dragging { opacity: .4; }
.dt-colcfg-table tbody tr:last-child td { border-bottom: none; }
.dt-colcfg-drag { color: #94a3b8; cursor: grab; text-align: center; }
.dt-colcfg-label { width: 100%; padding: 3px 6px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; }
.dt-colcfg-width { width: 64px; padding: 3px 5px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; text-align: right; }

.dt-footer {
  display: flex; align-items: center; justify-content: space-between; padding: 8px 12px;
  border-top: 1px solid var(--border); font-size: 13px; color: var(--text-muted); flex-wrap: wrap; gap: 8px;
  flex-shrink: 0;
}
.dt-footer-left { display: flex; align-items: center; gap: 16px; }
/* Số dòng/trang nằm SÁT BÊN TRÁI phân trang (cùng 1 khối bên phải .dt-footer,
   đối xứng "Tổng số" bên trái) thay vì tách rời — dễ liên tưởng "chọn số
   dòng/trang" với chính phần điều hướng trang ngay cạnh nó. */
.dt-footer-right { display: flex; align-items: center; gap: 14px; }
/* Chọn số dòng/trang cho bảng nhập liệu (lưới hạch toán crpCreateLinesGrid_/EntryGrid)
   VÀ cho DataTable (opts.pageSizeOptions, tuỳ trang khai báo). */
.dt-page-size { display: flex; align-items: center; gap: 6px; }
.dt-page-size label { white-space: nowrap; }
.dt-page-size-cell { width: 60px; }
.dt-page-size-cell input { text-align: center; }
/* Icon to hơn (32px, trước 26px) + bo góc 6px khớp style nút chung của app
   (trước 4px) — dễ bấm/dễ nhận hơn nút chữ «‹›» cũ. */
.dt-pagination { display: flex; align-items: center; gap: 4px; }
.dt-pagination button {
  border: 1px solid var(--border); background: #fff; border-radius: 6px; width: 32px; height: 32px;
  font-size: 13px; cursor: pointer; color: #475569; display: inline-flex; align-items: center; justify-content: center;
}
.dt-pagination button i { font-size: 13px; }
.dt-pagination button:hover:not(:disabled):not(.active) { background: #f4f6f9; color: var(--primary); }
.dt-pagination button.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 650; }
.dt-pagination button:disabled { opacity: .4; cursor: default; }
/* Ô "Trang [x] / N" gõ số nhảy thẳng tới trang bất kỳ, cạnh các nút mũi tên. */
.dt-pagination-goto { display: flex; align-items: center; gap: 6px; margin-left: 10px; font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.dt-pagination-goto-input {
  width: 46px; text-align: center; border: 1px solid var(--border); border-radius: 6px; padding: 5px 2px; font-size: 13px;
}
.dt-pagination-goto-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .12); }

/* Dropdown hành động theo dòng ("Chức năng") — chữ nhãn ("Xem"/"Sửa"...) và
   mũi tên tách riêng 2 phần tử (xem rowActionsHtml trong datatable.js): chữ
   "Xem" có action 'view' riêng thì bấm chạy thẳng, không cần mở dropdown;
   mũi tên luôn mở dropdown chứa các hành động còn lại. Bỏ khung viền nút -
   chỉ còn chữ + icon trần, mũi tên to hơn và tách khoảng cách rõ với chữ. */
.row-action { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.row-action-text { cursor: pointer; font-size: 13px; color: #334155; }
.row-action-text:hover { color: var(--primary); }
.row-action-btn {
  border: none; background: none; padding: 2px 2px; font-size: 16px; line-height: 1; color: #64748b; cursor: pointer;
}
.row-action-btn:hover { color: var(--primary); }
/* "Xem" (action 'view' riêng, xem rowActionsHtml) luôn màu xanh giống cột
   "Số chứng từ" (.doc-link) — không chỉ khi hover, để nổi rõ đây là 1 hành
   động mở thẳng chứng từ giống bấm vào link số chứng từ. */
.row-action--view .row-action-text, .row-action--view .row-action-btn { color: var(--link); font-weight: 650; }
.row-action-menu {
  /* position:fixed (không phải absolute) + toạ độ set bằng JS lúc mở (xem
     datatable.js/accounts.js) — để dropdown thoát khỏi .dt-scroll{overflow-x:auto}
     (auto ở 1 trục kéo theo trục kia cũng bị clip theo spec CSS Overflow, nên
     absolute/right/top thuần CSS sẽ bị cắt khi bảng có nhiều cột cần cuộn ngang). */
  display: none; position: fixed; background: #fff;
  border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,.12);
  min-width: 140px; z-index: 60; overflow: hidden;
}
.row-action-menu.show { display: block; }
.row-action-menu a {
  display: block; padding: 7px 12px; font-size: 13px; color: #334155; text-decoration: none; cursor: pointer;
}
.row-action-menu a:hover { background: #f1f5f9; }
.row-action-menu a.text-danger { color: var(--danger); }
.row-action-menu hr { margin: 4px 0; border-color: var(--border); }

/* Khối "đang lọc" ngoài cùng bên phải toolbar (trước nút Tải lại — xem
   opts.toolbarLeadingHtml ở datatable.js, dựng bằng filterToolbarLabelHtml_
   ở api.js): nhãn khoảng ngày CHỈ ĐỌC (không phải nút bấm — bộ lọc thật vẫn
   ở drawer Bộ lọc, mở qua icon phễu) + chip có nút x cho từng điều kiện lọc
   KHÁC (Loại phiếu/Trạng thái/...) đang áp dụng. */
.filter-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.filter-range-label { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 4px; background: #eef2f7; color: #334155;
  border-radius: 999px; padding: 2px 6px 2px 10px; font-size: 12px; white-space: nowrap;
}
.filter-chip-x { color: var(--danger); text-decoration: none; font-size: 14px; line-height: 1; padding: 0 2px; }

/* ---------- ACCOUNT TREE TABLE ---------- */
.tree-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border: 1px solid var(--border); border-radius: 3px;
  cursor: pointer; font-size: 10px; color: #64748b; background: #fff; margin-right: 4px; flex-shrink: 0;
}
.tree-toggle:hover { background: #f1f5f9; }
.tree-toggle-spacer { display: inline-block; width: 20px; flex-shrink: 0; }
.tree-code-cell { display: flex; align-items: center; }
tr.tree-row-inactive td { color: #9ca3af; }
/* Chọn nhiều + bộ lọc dùng chung cho danh mục dạng cây (common/js/tree-catalog.js) — xem renderToolbarBar_ */
th.dt-check-col, td.dt-check-col { width: 36px; text-align: center; }
.tree-toolbar-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.tree-filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tree-bulk-bar { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #334155; }

/* ---------- DIMENSION CHECKBOX GRID (Theo dõi chi tiết theo) ---------- */
.dimension-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin-top: 8px;
}
.dimension-item { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.dimension-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dimension-row .dimension-item { flex: 1; min-width: 0; }
.dimension-detail-select, .acc-dim-detail {
  font-size: 11.5px; padding: 2px 4px; border: 1px solid var(--border); border-radius: 4px; max-width: 128px; color: #334155;
}
.acc-dim-detail:disabled { color: var(--text-muted); background: #f8fafc; }
/* Ô lookup-popup thay cho <select class="acc-dim-detail"> cũ (xem memory
   no-native-select-elements) — thu nhỏ về đúng cỡ select cũ, input disabled
   khi chưa tích checkbox chiều tương ứng. */
.acc-dim-detail-cell { max-width: 148px; }
.acc-dim-detail-cell .lookup-input-wrap input { font-size: 11.5px; padding: 2px 4px; }
.acc-dim-detail-cell .lookup-input-wrap input:disabled { color: var(--text-muted); background: #f8fafc; }

/* ---------- CATALOG PAGE HEADER ("← Tên danh mục", giống MISA) ----------
   .opt-page-header/.opt-back-link (Hệ thống > Tuỳ chọn) dùng CHUNG style
   này nhưng KHÁC CLASS — cố tình không dùng lại .catalog-page-header vì
   selector .page-content:has(> .catalog-page-header) bên dưới áp cơ chế
   flex+overflow:hidden riêng cho các trang danh mục dạng bảng (DataTable tự
   cuộn qua .dt-scroll); trang Tuỳ chọn không có cơ chế cuộn nội bộ đó nên
   nếu dùng chung class sẽ bị cắt mất nội dung, không cuộn được (đã xảy ra
   thực tế — xem báo lỗi "chồng lên nhau, không thấy scrollbar"). */
.catalog-page-header, .opt-page-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.catalog-back-link, .opt-back-link {
  width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  color: #475569; text-decoration: none; border: 1px solid var(--border); background: #fff;
}
.catalog-back-link:hover, .opt-back-link:hover { background: #f1f5f9; color: #475569; }
.catalog-page-header h5, .opt-page-header h5 { margin: 0; font-weight: 650; font-size: 16px; color: #111827; }

/* ---------- DANH MỤC HUB (trang tổng — nhóm thẻ liên kết) ---------- */
.danhmuc-hub-title { font-weight: 650; font-size: 18px; margin: 4px 0 18px; color: #111827; }
.danhmuc-hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; align-items: start; background-color: #fff; padding: 30px;border-radius: 16px;}
.danhmuc-hub-column { display: flex; flex-direction: column; gap: 20px; }
.danhmuc-hub-group h6 {
  font-weight: 650; font-size: 13px; text-transform: uppercase;
  letter-spacing: .02em; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.danhmuc-hub-group {height: 160px;}
.danhmuc-hub-group ul { list-style: none; margin: 0; padding: 0; }
.danhmuc-hub-group li { margin-bottom: 4px; }
.danhmuc-hub-link {
  color: var(--primary); text-decoration: none; font-size: 13px; cursor: pointer;
  display: inline-block; padding: 3px 0;
}
.danhmuc-hub-link:hover { text-decoration: underline; }
.danhmuc-hub-link.disabled { color: #94a3b8; cursor: default; }
.danhmuc-hub-link.disabled:hover { text-decoration: none; }
@media (max-width: 900px) {
  .danhmuc-hub-grid { grid-template-columns: 1fr; }
}

/* ---------- TUỲ CHỌN HUB (Hệ thống > Tuỳ chọn — khảo sát MISA
   actapp.misa.vn/app/Options: lưới thẻ vuông, icon + nhãn giữa thẻ) ---------- */
.opt-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; max-width: 1100px; }
.opt-hub-card {
  border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 24px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer;
  text-align: center; font-size: 13px; color: #10141b; transition: box-shadow .15s ease, border-color .15s ease;
}
.opt-hub-card:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(var(--primary-rgb), .12); }
.opt-hub-card.disabled { cursor: default; color: var(--text-muted); }
.opt-hub-card.disabled:hover { border-color: var(--border); box-shadow: none; }
.opt-hub-card-icon {
  width: 48px; height: 48px; border-radius: 50%; background: #eef4ff; color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.opt-hub-card.disabled .opt-hub-card-icon { background: #f1f5f9; color: #94a3b8; }

/* ---------- TRANG TUỲ CHỌN (Tuỳ chọn chung/Vật tư hàng hoá/Định dạng số) —
   mỗi section hiển thị "nhãn trái - giá trị phải" chỉ đọc, bút chì ở đầu
   section chuyển CẢ SECTION sang sửa tại chỗ, không phải modal riêng. */
.opt-section { padding: 14px 0; border-bottom: 1px solid var(--border); }
.opt-section:last-child { border-bottom: none; }
.opt-section-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; font-weight: 650; font-size: 13px; color: #10141b; margin-bottom: 6px; }
.opt-badge { font-size: 11px; color: var(--danger); font-style: italic; font-weight: 500; }
.opt-section-edit { border: none; background: none; color: #94a3b8; cursor: pointer; font-size: 13px; padding: 4px; border-radius: 4px; }
.opt-section-edit:hover { color: var(--primary); background: #eef4ff; }
.opt-field-row { display: grid; grid-template-columns: 340px 1fr; gap: 16px; padding: 5px 0; font-size: 13px; align-items: start; }
.opt-field-label { color: #10141b; }
.opt-field-hint { font-size: 11.5px; color: var(--text-muted); font-style: italic; margin-top: 2px; max-width: 320px; }
.opt-field-value { color: #10141b; font-weight: 600; }
.opt-field-example { color: var(--text-muted); font-weight: 400; font-style: italic; }
.opt-field-edit input { width: 100%; max-width: 360px; }
/* Ô select/account/account-pair (type: select/account/account-pair) dùng
   attachLookupCell — khung .lookup-input-wrap mới là khối có viền + icon
   mũi tên, input bên trong tự co giãn theo flex (flex:1) của khung đó. Nếu
   để input tự nhận luôn max-width:360px như trên thì khung (không bị giới
   hạn) vẫn giãn hết chiều rộng ô, còn input+icon chỉ chiếm 1 phần bên trái
   — icon bị "trôi" giữa khung, không nằm sát mép phải (đã xảy ra thực tế).
   Đặt max-width lên khung, trả input về auto để flex tự quản lý như thiết
   kế gốc của lookup-cell. */
.opt-field-edit .lookup-input-wrap { width: 100%; max-width: 360px; }
.opt-field-edit .lookup-input-wrap input { width: auto; max-width: none; }
.opt-radio { display: inline-flex; align-items: center; gap: 5px; margin-right: 18px; font-weight: 400; cursor: pointer; }
/* Lưới checkbox "Quản lý danh mục riêng theo từng chi nhánh" (Đa chi nhánh,
   khảo sát ảnh MISA thật: 3 cột) — .opt-branch-catalog-item dùng lại
   .opt-radio nên không cần margin-right (đã có gap của grid). */
.opt-branch-catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 10px 24px; }
.opt-branch-catalog-item { margin-right: 0; }
.opt-section-actions { display: flex; gap: 8px; margin-top: 12px; }

/* ---------- STATUS BADGE ---------- */
.status-badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 650; }
.status-badge.status-posted { background: var(--primary-light); color: var(--primary); }
.status-badge.status-draft { background: #f1f5f9; color: #64748b; }
.status-badge.status-cancelled, .status-badge.status-reversed { background: #fdecec; color: var(--danger); }

/* ---------- CARD SECTION (khối bo tròn có tiêu đề icon màu nhạt — dùng ở form "Lập bảng lương" và
   các form nhiều nhóm trường khác, theo mẫu MISA) ---------- */
.lpay-card { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.lpay-card-head { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--primary-lighter); font-weight: 650; font-size: 13.5px; color: var(--text-dark); }
.lpay-card-head i { color: var(--primary); font-size: 13px; }
.lpay-card-body { padding: 14px; }
.lpay-field-icon { color: var(--primary); width: 16px; display: inline-block; text-align: center; margin-right: 5px; }
.lpay-comp-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.8px; padding: 4px 10px 4px 6px; border: 1px solid var(--border); border-radius: 20px; margin: 3px; background: #fff; cursor: pointer; }
.lpay-comp-chip:has(input:checked) { background: var(--primary-light); border-color: var(--primary); color: var(--primary-dark); }
.lpay-comp-chip input { margin: 0; }

/* ---------- NHÓM MỞ RỘNG/THU GỌN (form Nhân viên > Thông tin tiền lương: Cơ cấu lương/Bảo hiểm xã hội/Thuế
   TNCN/Công đoàn — bấm tiêu đề mở nhóm đó, tự thu gọn các nhóm khác, xem partner-form-modal.js) ---------- */
.prtnr-acc-group { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.prtnr-acc-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #f8f9fa; font-weight: 650; font-size: 13.5px; cursor: pointer; user-select: none; }
.prtnr-acc-group.open > .prtnr-acc-head { background: var(--primary-lighter); color: var(--text-dark); }
.prtnr-acc-head .prtnr-acc-icon { color: var(--primary); width: 15px; text-align: center; }
.prtnr-acc-chevron { margin-left: auto; color: #9aa5b1; transition: transform .15s; }
.prtnr-acc-group.open .prtnr-acc-chevron { transform: rotate(90deg); color: var(--primary); }
.prtnr-acc-body { padding: 14px; display: none; }
.prtnr-acc-group.open .prtnr-acc-body { display: block; }

/* ---------- XEM NHANH CHỨNG TỪ (crpShowQuickView_ — panel trong nửa dưới
   thanh kéo, bấm vào 1 dòng để xem NGAY bảng hạch toán, không cần mở form
   full màn hình) — chỉ đúng bảng Diễn giải/TK Nợ/TK Có/Số tiền + phân
   trang. Layout thật (height:100%, .crp-quickview-body cuộn riêng) đã khai
   ở khối "THANH KÉO DỌC" phía trên. ---------- */
.crp-quickview { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.crp-qv-table { width: 100%; }

/* ---------- FILTER DRAWER ---------- */
.filter-drawer-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 1500;
}
.filter-drawer-backdrop.show { display: block; }
.filter-drawer {
  position: fixed; top: 0; right: -360px; width: 340px; height: 100vh; background: #fff;
  box-shadow: -4px 0 16px rgba(0,0,0,.12); z-index: 1501; transition: right .2s ease;
  display: flex; flex-direction: column;
}
.filter-drawer.show { right: 0; }
.filter-drawer-header {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 16px;
  border-bottom: 1px solid var(--border); font-weight: 650;
}
.filter-drawer-header button { border: none; background: none; font-size: 16px; cursor: pointer; color: var(--text-muted); }
.filter-drawer-body { flex: 1; overflow-y: auto; padding: 14px 16px; }
.filter-field { margin-bottom: 14px; }
.filter-field label { display: block; font-size: 13px; color: #334155; margin-bottom: 4px; }
.filter-field select, .filter-field input {
  width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px;
}
.filter-field-row { display: flex; gap: 10px; }
.filter-field-row .filter-field { flex: 1; }
.filter-drawer-footer {
  display: flex; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--border);
}

/* ---------- SIDE DRAWER (form Thêm/Sửa trượt từ bên phải) — khảo sát MISA
   AMIS: phần lớn form Thêm/Sửa danh mục (Tài khoản ngầm định, Công trình,
   Loại tiền, Khoản mục chi phí...) mở dạng panel trượt từ phải, KHÔNG phải
   modal giữa màn hình như .voucher-popup-backdrop (dùng cho form chứng từ
   Thu/Chi/Bút toán). Cùng kiểu hình ảnh với .filter-drawer nhưng RỘNG hơn để
   chứa form nhiều trường/bảng con — dùng CHUNG ở đây cho mọi trang muốn
   khớp đúng kiểu tương tác này thay vì mỗi trang tự vẽ riêng (xem memory
   centralize-shared-ui-fixes); mỗi trang vẫn khai TĨNH backdrop/panel riêng
   trong HTML của mình với id riêng (giống .filter-drawer), chỉ dùng chung
   CSS class nên không đụng id. */
.side-drawer-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 1600;
}
.side-drawer-backdrop.show { display: block; }
.side-drawer {
  position: fixed; top: 0; right: -700px; width: 680px; max-width: 92vw; height: 100vh; background: #fff;
  box-shadow: -4px 0 16px rgba(0,0,0,.12); z-index: 1601; transition: right .2s ease;
  display: flex; flex-direction: column;
}
.side-drawer-backdrop.show .side-drawer { right: 0; }
.side-drawer-header {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.side-drawer-header h5 { margin: 0; font-weight: 650; font-size: 16px; }
.side-drawer-header .spacer { flex: 1; }
.side-drawer-header .close-btn { border: none; background: none; font-size: 16px; cursor: pointer; color: var(--text-muted); }
.side-drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px; }
.side-drawer-footer {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-top: 1px solid var(--border);
}
.side-drawer-footer .actions { display: flex; gap: 8px; }

/* ---------- LOOKUP POPUP (chọn TK / đối tượng ngay tại ô) ---------- */
.lookup-cell { position: relative; }
/* Viền đặt DUY NHẤT trên .lookup-input-wrap (khối bọc ngoài input + icon +
   nút mũi tên) — input/icon/nút mũi tên bên trong luôn border:none, tránh
   tình trạng mỗi phần tử tự có viền riêng (bo góc lệch nhau, có khe hở giữa
   input và nút khi icon cảnh báo hiện ra) như trước đây. overflow:hidden để
   bo góc của wrap cắt gọn cả input/nút bên trong theo đúng 1 khối liền. */
.lookup-input-wrap {
  display: flex; align-items: stretch; border: 1px solid var(--primary); border-radius: 4px;
  background: #fff; overflow: hidden;
}
.lookup-input-wrap input {
  flex: 1; min-width: 0; border: none; background: transparent; padding: 4px 6px; font-size: 13px; font-weight: 420;
}
.lookup-input-wrap .lookup-caret-btn {
  border: none; background: transparent; width: 22px; color: #ced4da; cursor: pointer; font-size: 11px; flex-shrink: 0;
}
.lookup-input-wrap input:focus { outline: none; }
/* Click vào ô (focus) mới nổi màu xanh var(--primary) cho viền wrap + nút
   mũi tên — mặc định (chưa click) nút mũi tên nhạt màu giống viền ô. */
.lookup-input-wrap:focus-within {
  border-color: var(--primary) !important; /* !important: thắng rule ẩn viền theo dòng active của lưới hạch toán (table.entry-table tbody tr:focus-within ...) — ô ĐANG focus luôn phải nổi bật xanh, không chỉ xám như các ô khác cùng dòng */
}
.lookup-input-wrap:focus-within .lookup-caret-btn { color: var(--primary); }
/* Mũi tên xoay lên khi danh sách đang mở (class .open toggle trong
   lookup.js renderPopup/closePopup), xoay lại xuống khi đóng. */
.lookup-caret-btn i { display: inline-block; font-size: medium; transition: transform .12s ease; color: var(--primary);}
.lookup-caret-btn.open i { transform: rotate(180deg); }

/* Gõ tay giá trị không khớp danh mục nào (xem attachLookupCell strictValidate
   trong lookup.js) — viền đỏ + icon cảnh báo, tooltip giải thích khi hover.
   !important để LUÔN thắng rule ẩn viền mặc định theo dòng active ở khối
   "Lưới hạch toán" bên dưới — ô sai phải luôn nổi bật dù dòng có đang được
   thao tác hay không. */
.lookup-invalid-icon { display: none; align-self: center; color: var(--danger); font-size: 12px; padding: 0 4px; flex-shrink: 0; }
.lookup-cell.lookup-invalid .lookup-input-wrap { border-color: var(--danger) !important; }
.lookup-cell.lookup-invalid .lookup-invalid-icon { display: inline-block; }

/* ---------- FILL HANDLE (mũi tên góc phải-dưới khi ô trong bảng đang
   focus — giống Excel: bấm mở menu "Thêm dòng bên dưới"/"Sao chép xuống
   các dòng dưới") — dùng chung cho ô lookup LẪN input thường (attachFillHandle_,
   xem lookup.js) nên chọn theo .has-fill-handle, không riêng .lookup-cell. ---------- */
.has-fill-handle { position: relative; }
/* right:0/bottom:0 (không lồi ra ngoài ô như trước — trước để -1px tràn
   nhẹ ra ngoài ô, phần tràn đó có thể bị ô cố định (sticky) bên cạnh vẽ đè
   lên) — nằm gọn hẳn trong góc phải-dưới của Ô, cùng khoảng cách 0 với biên
   input ở cả 2 chiều, không còn bị đè bởi cột bên cạnh. Nền trắng + icon
   xanh (thay icon mũi tên bằng icon copy) để rõ đây là 1 icon riêng, không
   phải khối màu nổi trên input. */
.lookup-fill-handle {
  display: none; position: absolute; right: 0; bottom: -4px; width: 10px; height: 10px;
  background: #fff; border: 1px solid var(--primary); border-radius: 2px 0 0 0; cursor: pointer; z-index: 3;
  align-items: center; justify-content: center; color: var(--primary); font-size: 9px; line-height: 1;
}
.has-fill-handle:focus-within .lookup-fill-handle { display: flex; }
.lookup-fill-menu {
  /* Chèn thẳng vào <body> (xem lookup.js attachFillHandle_) nên z-index phải
     thắng thẳng .voucher-popup-backdrop (1600) VÀ .dcc-drawer (1701, xem lý do
     ở .lookup-popup ngay trên) — cùng giá trị 1750 đã dùng cho .lookup-popup. */
  position: fixed; background: #fff; border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12); z-index: 1750; min-width: 200px; padding: 4px; font-size: 13px;
}
.lookup-fill-menu a { display: block; padding: 7px 10px; color: var(--text); text-decoration: none; border-radius: 4px; white-space: nowrap; }
.lookup-fill-menu a:hover { background: #f1f5f9; }

/* ---------- Ô CHỌN NHIỀU KIỂU "CHIP" (vd Nhóm khách hàng/nhà cung cấp) ---------- */
.multi-lookup-cell { position: relative; }
.multi-lookup-box {
  width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  border: 1px solid #ced4da; border-radius: 6px; padding: 5px 8px; cursor: pointer; background: #fff; min-height: 31px;
}
.multi-lookup-box:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .12); }
.multi-lookup-box > i { color: #94a3b8; font-size: 11px; flex-shrink: 0; }
/* Ô "Nhóm" ở chế độ Xem (partner-list.js setPartnerFormEditable_) — khoá
   tương tác (không mở được popup chọn) + đổi nền xám nhạt như các ô input
   disabled khác, KHÔNG làm mờ chữ chip đã chọn. */
.multi-lookup-box--locked { pointer-events: none; background: #f4f6f9; cursor: default; }
.multi-lookup-chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; }
.multi-lookup-placeholder { color: var(--text-muted); font-size: 13px; }
.multi-lookup-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 6px 2px 8px; border-radius: 10px;
  background: #eef6ff; color: var(--primary); font-size: 12px; white-space: nowrap;
}
.multi-lookup-chip-x { color: var(--primary); text-decoration: none; font-size: 13px; line-height: 1; }
.multi-lookup-chip-x:hover { opacity: .7; }

/* Ô vuông tích chọn kiểu MISA (nền xanh đặc + dấu tích trắng khi tích, thay
   checkbox mặc định của trình duyệt) — dùng cho popup .multi-lookup-popup
   bên dưới và mọi nơi khác muốn khớp đúng kiểu tích chọn này. */
.ms-checkbox {
  appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0; cursor: pointer;
  width: 16px; height: 16px; border: 1.5px solid #cbd5e1; border-radius: 4px; background: #fff; position: relative;
}
.ms-checkbox:hover { border-color: var(--primary); }
.ms-checkbox:checked, .ms-checkbox:indeterminate { background: var(--primary); border-color: var(--primary); }
.ms-checkbox:checked::after {
  content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.ms-checkbox:indeterminate::after {
  content: ''; position: absolute; left: 3px; top: 6.5px; width: 8px; height: 2px; background: #fff;
}

/* Popup "chọn nhiều" DẠNG BẢNG (khảo sát MISA — vd "Chọn tài khoản" ở Lọc
   tài khoản của Tài khoản ngầm định): ô tìm kiếm trên cùng, bảng có checkbox
   chọn tất cả ở đầu cột. Rộng/cao hơn .lookup-popup thường (đủ chỗ nhiều
   cột) — chỉ áp dụng khi trang truyền headerHtml/gridTemplate/renderOption
   cho attachMultiLookupCell, các trang chưa truyền vẫn giữ danh sách 1 cột
   như trước (chỉ khác thêm ô tìm kiếm + kiểu checkbox mới). */
.multi-lookup-popup { max-width: 640px; max-height: 420px; }
.multi-lookup-search {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.multi-lookup-search i { color: #94a3b8; font-size: 12px; }
.multi-lookup-search input { flex: 1; border: none; outline: none; font-size: 13px; background: transparent; }
/* .lookup-popup-header.multi-lookup-table-header (2 class) để thắng độ ưu
   tiên so với ".lookup-popup-header{display:grid}" định nghĩa dưới đây,
   giống cách .lookup-option.lookup-option-check đã xử lý ở trên. */
.lookup-popup-header.multi-lookup-table-header { display: flex; align-items: center; gap: 8px; }
.multi-lookup-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; font-size: 13px; }
.multi-lookup-row:hover { background: #f1f5f9; }
.multi-lookup-row-data { display: grid; flex: 1; min-width: 0; }
/* .lookup-option.lookup-option-check (2 class thay vì 1) để thắng độ ưu
   tiên CSS so với ".lookup-option{display:grid}" định nghĩa bên dưới — nếu
   không, dòng checkbox bị grid ép xuống dòng riêng, không còn nằm ngang
   giữa với chữ (lỗi "checkbox không ở giữa"). */
.lookup-option.lookup-option-check { display: flex; align-items: center; gap: 8px; }
.lookup-option-check input { margin: 0; flex-shrink: 0; }
.lookup-popup {
  /* position:fixed, toạ độ set bằng JS lúc mở (xem lookup.js renderPopup),
     VÀ chèn thẳng vào <body> (không còn nằm trong <td>) — ô lookup trong
     lưới hạch toán (table.entry-table) nằm cùng .entry-table-scroll với các
     cột cố định (.entry-pin-cell/.entry-idx-cell/.entry-row-delete-cell,
     position:sticky + z-index riêng), bị trình duyệt đẩy lên lớp
     compositing riêng và đè lên popup dù popup z-index cao hơn hẳn (tăng
     200→1200 vẫn còn bị đè) — thoát HẲN khỏi vùng cuộn bằng cách chèn ra
     <body> mới triệt để, giống .row-action-menu (datatable.js). Vì vậy giờ
     phải thắng thẳng z-index của .voucher-popup-backdrop (1600, vì popup
     đang ở stacking context GỐC) nên nâng tiếp lên 1650 — rồi lại bị .dcc-drawer
     (1701, thêm SAU này cho txNew_/tlOpenSourcePicker_) đè lên: ô lookup đặt
     trong .dcc-drawer (vd "Danh mục ngành nghề" lúc lập tờ khai 01/GTGT) mở
     popup ra nhưng popup nằm DƯỚI tấm nền trắng của drawer nên không thấy gì —
     nâng tiếp lên 1750 để luôn thắng .dcc-drawer (1701) lẫn .dt-filter-popup
     (1700). */
  position: fixed; width: max-content; max-width: 560px;
  background: #fff; border: 1px solid #d1d5db; border-radius: 6px; box-shadow: 0 8px 20px rgba(0,0,0,.15);
  z-index: 1750; max-height: 280px; display: flex; flex-direction: column;
}
.lookup-popup-header {
  display: grid; font-size: 11px; text-transform: uppercase; color: #94a3b8; font-weight: 650;
  padding: 6px 10px; border-bottom: 1px solid var(--border); background: #e6e7ea;
}
.lookup-popup-list { overflow-y: auto; flex: 1; }
.lookup-option { display: grid; padding: 6px 10px; cursor: pointer; font-size: 13px; align-items: center; }
.lookup-option:hover, .lookup-option.highlighted { background: var(--primary); color: #fff; }
.lookup-option .opt-code { font-weight: 650; }
.lookup-option-empty { padding: 14px 10px; text-align: center; color: var(--text-muted); font-size: 13px; }
/* Chân popup "+ Thêm mới" (khảo sát MISA: .dropdown-footer > .btn-add-menu
   > .btn-add — icon tròn nền xanh + chữ, nằm cố định dưới cùng danh sách,
   danh sách phía trên tự cuộn riêng — xem .lookup-popup-list overflow-y) */
.lookup-option-addnew {
  padding: 7px 10px; font-size: 13px; color: var(--primary); cursor: pointer; border-top: 1px solid var(--border);
  font-weight: 650; display: flex; align-items: center; gap: 7px; flex-shrink: 0; background: #fff;
}
.lookup-option-addnew i {
  width: 16px; height: 16px; border-radius: 50%; background: var(--primary); color: #fff;
  font-size: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.lookup-option-addnew:hover { background: #eef4ff; }

/* ---------- VOUCHER FORM / ENTRY GRID (form chứng từ nhiều dòng hạch toán) ---------- */
.voucher-popup-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 1600;
  align-items: flex-start; justify-content: center; overflow-y: auto; padding: 24px 0;
}
.voucher-popup-backdrop.show { display: flex; }

/* ---------- "LẬP NHIỀU CHỨNG TỪ" (einv-multi-create.js) — vỏ fullscreen riêng. Form chứng từ thật (pur/crp/brp,
   .voucher-popup-backdrop, bình thường z-index 1600, position:fixed toàn viewport) khi mở từ đây được GẮN THÊM
   class .einv-embedded và REPARENT (JS, xem einvMultiEmbedBackdrop_) vào thẳng bên trong #einv-multi-content —
   để sidebar danh sách hoá đơn bên trái LUÔN hiện cùng lúc với form (đúng mẫu MISA: nhieuct.jpg), không che
   khuất toàn màn hình như trước. Reparent an toàn vì các form này tự gắn lại MỌI sự kiện mỗi lần mở
   (ensureGlobalVoucherModals_, common/js/app.js) nên không phụ thuộc vị trí DOM — đóng cả màn Lập nhiều chứng từ
   thì JS trả form về lại #global-voucher-modals, gỡ class .einv-embedded, không ảnh hưởng mọi nơi khác dùng chung
   form này. */
.einv-multi-backdrop { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 1550; }
.einv-multi-backdrop.show { display: flex; flex-direction: column; }
.einv-multi-shell { display: flex; width: 100%; flex: 1 1 auto; min-height: 0; background: #f3f5f7; }
.einv-multi-sidebar { width: 260px; flex: none; background: #fff; border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.einv-multi-sidebar-head { padding: 14px 16px; font-weight: 650; border-bottom: 1px solid var(--border); }
.einv-multi-sidebar-list { flex: 1 1 auto; overflow-y: auto; }
.einv-multi-slot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #f1f5f9; font-size: 13px; }
.einv-multi-slot:hover { background: #f8fafc; }
.einv-multi-slot.active { background: #eef4ff; font-weight: 600; }
.einv-multi-slot .einv-multi-slot-ic { color: var(--text-muted); width: 14px; text-align: center; }
.einv-multi-slot.saved .einv-multi-slot-ic { color: #16a34a; }
.einv-multi-slot .einv-multi-slot-remove { margin-left: auto; color: var(--text-muted); }
.einv-multi-slot .einv-multi-slot-remove:hover { color: var(--danger, #dc2626); }
.einv-multi-sidebar-note { padding: 12px 14px; font-size: 12px; color: var(--text-muted); border-top: 1px solid var(--border); }
.einv-multi-sidebar-note .btn { width: 100%; margin-top: 6px; }
.einv-multi-content { position: relative; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 14px; overflow: hidden; }
.einv-multi-footer { flex: none; background: #fff; border-top: 1px solid var(--border); padding: 10px 16px; display: flex; gap: 8px; justify-content: flex-end; }
/* Form reparent vào #einv-multi-content (position:relative ở trên): đổi từ position:fixed/100vw/100vh (toàn
   viewport) sang lấp đầy ĐÚNG phần diện tích còn lại cạnh sidebar. */
.voucher-popup-backdrop.einv-embedded { position: absolute; inset: 0; z-index: 1; background: none; }
.voucher-popup-backdrop.einv-embedded .voucher-popup.fullscreen { width: 100%; max-width: 100%; height: 100%; max-height: 100%; }

/* "Thêm VTHH/nhà cung cấp hàng loạt" (einv-multi-create.js) — toggle Ghép có sẵn/Tạo mới trong 1 ô bảng. */
.emb-mode-toggle { display: flex; gap: 4px; margin-bottom: 6px; }
.emb-mode-btn { flex: 1; padding: 3px 6px; font-size: 11px; border: 1px solid var(--border); background: #fff; border-radius: 6px; cursor: pointer; color: var(--text-muted); }
.emb-mode-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.emb-new-name { width: 100%; height: 28px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; box-sizing: border-box; }
.emb-new-name:focus { outline: none; border-color: var(--primary); }

/* Popup "Chọn tính chất" (Vật tư hàng hóa) nằm CỐ ĐỊNH trong HTML trước cả
   popup form chính (#pr-modal-backdrop) nên cùng z-index sẽ bị đè xuống DƯỚI
   khi mở qua link "Thay đổi tính chất" lúc form chính đã mở sẵn (thứ tự DOM
   quyết định lớp trên/dưới khi z-index bằng nhau) — nâng riêng z-index để
   luôn nổi trên bất kể mở trước hay sau popup chính.
   Xem danh-muc/products/products.js prOpenTypePicker_. */
#pr-type-modal-backdrop { z-index: 1610; }
.voucher-popup {
  background: #e6e9ed; background-image: radial-gradient(ellipse at 0% 0%, rgba(2, 144, 123, 0.09) 0%, transparent 35%),
    radial-gradient(ellipse at 100% 100%, rgba(101, 188, 174, 0.12) 0%, transparent 38%),
    linear-gradient(135deg, #F4FBF9 0%, #F8FCFB 50%, #F0FAF7 100%); border-radius: 8px; width: min(1200px, 96vw); box-shadow: 0 20px 50px rgba(0,0,0,.3);
  display: flex; flex-direction: column; max-height: calc(100vh - 48px);
}
/* Form chứng từ FULL MÀN HÌNH (khảo sát MISA: Phiếu thu/Phiếu chi mở chiếm
   toàn bộ viewport, không còn khoảng lề/bo góc như popup thường) */
.voucher-popup-backdrop.fullscreen { padding: 0; align-items: stretch; }
.voucher-popup.fullscreen { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
.voucher-popup-header {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); background: #fff; 
}
.voucher-popup-header h5 { margin: 0; font-weight: 650; font-size: 16px; flex-shrink: 0; }
.voucher-popup-header .spacer { flex: 1; }
/* Chọn "kịch bản" tài khoản ngầm định (document_default_account_rules) ngay
   trên thanh tiêu đề phiếu Thu/Chi — chọn xong áp luôn TK đối ứng mặc định
   vào dòng mẫu đầu tiên, chỉ hiện khi có kịch bản khớp loại phiếu (RECEIPT/
   PAYMENT) và chỉ khi đang Lập phiếu mới (không áp cho phiếu đã có sẵn dữ
   liệu thật khi Xem/Sửa). */
.voucher-default-rule-field { display: flex; align-items: center; gap: 8px; margin-left: 18px; }
.voucher-default-rule-field .lookup-cell { width: 260px; }
/* Phiếu thu/chi (Tiền mặt LẪN Tiền gửi ngân hàng — 2 trang cùng khuôn giao
   diện, xem tien-gui/receipts-payments/receipts-payments.js): chia
   voucher-header-grid thành 3 phần (Đối tượng.../Ngày tháng/Tổng tiền) theo
   tỉ lệ 3/1/1 — chỉ áp dụng riêng cho 2 form Thu/Chi tiền (scope theo
   #crp-form-backdrop/#brp-form-backdrop), KHÔNG đụng tới rule 2 cột gốc
   .voucher-header-grid (2fr 1fr) mà Bút toán và các modal khác vẫn đang
   dùng nguyên. */
#crp-form-backdrop .voucher-header-grid, #brp-form-backdrop .voucher-header-grid, #jn-form-backdrop .voucher-header-grid { grid-template-columns: 3fr 1fr 1fr; }
/* Ô "Đối tượng" trên header phiếu Thu/Chi — giữ nguyên viền mặc định của
   .lookup-input-wrap (#ced4da, xem khối LOOKUP POPUP); mã đối tượng KHÔNG
   in đậm (khác các ô lookup khác vẫn dùng .opt-code in đậm mặc định — chỉ
   ghi đè riêng cho popup này qua popupClass:'crp-partner-popup', dùng
   chung cho cả trang Tiền gửi), nhãn "Đối tượng" vẫn tô đậm. */
#crp-f-partner-label, #brp-f-partner-label { font-weight: 650; }
.crp-partner-popup .opt-code { font-weight: 420; }
.voucher-popup-header button.close-btn { border: none; background: none; font-size: 16px; color: var(--text-muted); cursor: pointer; }
.voucher-popup-body { padding: 16px 18px; overflow-y: auto; flex: 1; }
.voucher-header-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin-bottom: 14px; }
.voucher-header-grid .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.voucher-field > label { display: block; font-size: 12px; color: #334155; margin-bottom: 3px; font-weight: 650; }
/* Viền ô input rõ hơn viền quá nhạt var(--border) nhưng nhạt hơn viền nút
   #6c757d — dùng #ced4da (viền input mặc định của Bootstrap). Khi click vào
   (focus), viền chuyển sang màu xanh var(--primary) — cùng màu icon mũi tên
   xuống (fa-caret-down) của ô lookup Tài khoản bên dưới. */
.voucher-field input:not([type="checkbox"]):not([type="radio"]), .voucher-field select, .voucher-field textarea {
  width: 100%; padding: 6px 9px; border: 1px solid var(--primary); border-radius: 6px; font-size: 13px;
}
/* height cố định + box-sizing:border-box cho ô input/select (KHÔNG áp cho textarea — 1 số nơi cần tự cao theo nội
   dung): chỉ khớp padding thôi chưa chắc chiều cao bằng nhau, vì ô Ngày có icon lịch cao 20px (webkit-calendar-
   picker-indicator bên dưới) làm nội dung ô đó cao hơn ô chữ thường — ép cùng 1 chiều cao tuyệt đối mới chắc chắn
   khớp, không phụ thuộc icon/line-height của từng loại ô. */
.voucher-field input:not([type="checkbox"]):not([type="radio"]), .voucher-field select {
  height: 30.5px; box-sizing: border-box;
}
.voucher-field input:not([type="checkbox"]):not([type="radio"]):focus,
.voucher-field select:focus, .voucher-field textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .12);
}
/* Field bị khoá (disabled) — chế độ Xem (Đối tác Khách hàng/Nhà cung cấp...)
   — KHÔNG để chữ mờ theo mặc định trình duyệt (khó đọc), chỉ đổi nền xám
   nhạt để phân biệt với ô đang sửa được, chữ vẫn giữ đậm/rõ bình thường.
   -webkit-text-fill-color cần thêm vì Chrome/Edge tô màu chữ ô disabled qua
   thuộc tính riêng này — chỉ đặt color không đủ để ghi đè. */
.voucher-field input:disabled, .voucher-field textarea:disabled,
.prtnr-tab-pane input:disabled, .prtnr-tab-pane textarea:disabled,
.lookup-input-wrap input:disabled {
  color: #10141b; -webkit-text-fill-color: #10141b; opacity: 1;
  background: #f4f6f9; cursor: default;
}
/* Ô lookup (Đối tượng...) đặt trong .voucher-field vẫn khớp rule ở trên
   (".voucher-field input") vì input bên trong .lookup-input-wrap cũng là
   1 <input> — rule đó đặc trưng hơn ".lookup-input-wrap input" (border:none)
   nên viền lại bị đặt NHẦM thẳng lên input thay vì để nguyên trên div bọc
   ngoài (.lookup-input-wrap) như thiết kế chung. Viền/box-shadow phải nằm
   trên CẢ DIV, không phải riêng input — ghi đè lại về none ở đây. */
.voucher-field .lookup-input-wrap input,
.voucher-field .lookup-input-wrap input:focus { border: none !important; box-shadow: none !important; }
/* Ép .lookup-input-wrap (khối bọc ô chọn Tài khoản/Mã đối tượng...) cùng chiều cao 34px tuyệt đối với ô input/select
   thường ở trên — canh theo padding thôi chưa đủ vì cao thật của ô còn phụ thuộc icon lịch riêng của input[type=date]
   (xem input[type="date"]::-webkit-calendar-picker-indicator bên dưới, cao 20px), input bên trong stretch lấp đầy. */
.voucher-field .lookup-input-wrap { height: 34px; box-sizing: border-box; }
.voucher-field .lookup-input-wrap input { padding: 6px 9px; }
/* Ô nhập số tự phân cách nghìn (attachNumericInput_ trong api.js) — luôn
   căn phải giống MISA, kể cả khi đang để trống (placeholder). */
.numeric-input { text-align: right; }
.voucher-total-display { text-align: right; }
.voucher-total-display .label { font-size: 12px; color: var(--text-muted); }
.voucher-total-display .value { font-size: 22px; font-weight: 650; }

/* Form "Thêm mới" Khách hàng/Nhà cung cấp khớp MISA AMIS Kế toán (xem
   partner-list.js renderMisaModal_) — radio Tổ chức/Cá nhân trên header,
   tabs (Thông tin liên hệ/Điều khoản thanh toán/Tài khoản ngân hàng/Địa chỉ
   khác/Ghi chú/Thông tin bổ sung). */
.prtnr-org-radio { display: flex; align-items: center; gap: 6px; margin-left: 14px; font-size: 13px; white-space: nowrap; }
.prtnr-tab-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-top: 16px; }
.prtnr-tab-btn {
  border: none; background: none; padding: 8px 14px; font-size: 13px; color: var(--text-muted);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.prtnr-tab-btn:hover { color: var(--primary); }
.prtnr-tab-btn.active { color: var(--primary); font-weight: 600; border-bottom-color: var(--primary); }
.prtnr-tab-pane { display: none; padding: 0 2px; }
.prtnr-tab-pane.active { display: block; }
.prtnr-tab-section-title { font-size: 13px; font-weight: 650; color: #334155; margin-bottom: 8px; }
/* Input trần (không bọc .voucher-field) bên trong tab — vẫn khớp style
   input chung của form (viền/bo góc/padding) mà không phải bọc từng cái. */
.prtnr-tab-pane input:not([type="checkbox"]):not([type="radio"]),
.prtnr-tab-pane select, .prtnr-tab-pane textarea {
  width: 100%; padding: 6px 9px; border: 1px solid var(--primary); border-radius: 6px; font-size: 13px;
}
.prtnr-tab-pane input:focus, .prtnr-tab-pane select:focus, .prtnr-tab-pane textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .12);
}
.prtnr-tab-pane table.data-table input {padding: 4px 6px; }
.prtnr-tab-pane table.data-table input:focus { box-shadow: none; }
.prtnr-custom-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.prtnr-custom-field-row { display: grid; grid-template-columns: 200px 1fr; gap: 10px; margin-bottom: 8px; }

/* Bước 1 "Chọn tính chất hàng hóa dịch vụ" (Vật tư hàng hóa, khớp MISA) —
   danh sách ô lựa chọn dạng thẻ, mỗi thẻ 1 icon tròn + tên + mô tả ngắn. */
.pr-type-tile {
  display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 8px; cursor: pointer;
}
.pr-type-tile:hover { background: #f8fafc; }
.pr-type-tile .pr-type-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--primary-light); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.pr-type-tile .pr-type-tile-name { font-weight: 600; font-size: 13.5px; }
.pr-type-tile .pr-type-tile-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
/* Icon nhỏ cạnh tiêu đề modal Thêm/Sửa vật tư — cùng kiểu tròn như trên. */
.voucher-popup-header .pr-type-icon {
  width: 28px; height: 28px; border-radius: 50%; background: var(--primary-light); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 13px; margin-right: 4px; flex-shrink: 0;
}

/* Danh sách chọn đối tượng "giữ lại" trong modal Gộp hàng loạt (bulkAddGroup_
   dùng lookup-cell có sẵn nên không cần CSS riêng, chỉ mergeBulk_ cần). */
.prtnr-merge-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; }
.prtnr-merge-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 13px; cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.prtnr-merge-row:last-child { border-bottom: none; }
.prtnr-merge-row:hover { background: #f8fafc; }

/* Wizard "Nhập khẩu" 4 bước (Chọn tệp/Ghép dữ liệu/Kiểm tra dữ liệu/Kết
   quả) khớp MISA AMIS Kế toán — xem common/js/import-wizard.js. Full màn
   hình giống form chứng từ (voucher-popup-backdrop.fullscreen có sẵn),
   .import-wizard tự bố cục header/body/footer riêng thay vì .voucher-popup. */
.import-wizard { background: #f8fafc; width: 100vw; height: 100vh; display: flex; flex-direction: column; }
.iw-header {
  display: flex; align-items: center; gap: 24px; padding: 14px 24px; background: #fff;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.iw-header h5 { margin: 0; font-weight: 650; font-size: 17px; flex-shrink: 0; }
.iw-header .iw-close { margin-left: auto; border: none; background: none; font-size: 16px; color: var(--text-muted); cursor: pointer; }
.iw-breadcrumb { display: flex; align-items: center; flex: 1; justify-content: center; gap: 0; }
.iw-step { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.iw-step.current { color: var(--primary); font-weight: 650; }
.iw-step.done { color: #16a34a; }
.iw-step-num {
  width: 22px; height: 22px; border-radius: 50%; background: #e2e8f0; color: #fff; display: inline-flex;
  align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0;
}
.iw-step.current .iw-step-num { background: var(--primary); }
.iw-step.done .iw-step-num { background: none; color: #16a34a; font-size: 18px; }
.iw-step-line { width: 60px; height: 1px; background: var(--border); margin: 0 10px; }
.iw-body { flex: 1; overflow-y: auto; padding: 24px; max-width: 960px; margin: 0 auto; width: 100%; }
/* Bước "Đọc dữ liệu tờ khai"/"Chọn hợp đồng cho từng dòng hàng" (common/js/customs-declarations.js) chứa bảng chi
   tiết hàng hoá nhiều cột trong .iw-map-scroll — nới hết màn hình thay vì giữ max-width:960px chung của .iw-body
   (max-width hẹp đó ĐÚNG ý cho các bước/wizard import Excel khác chỉ có vài trường key-value dạng form, không có
   bảng nhiều cột cần nhiều chỗ). Không đụng .iw-body nói chung — chỉ bước nào thực sự có bảng mới nới ra. */
.iw-body:has(.iw-map-scroll) { max-width: 100%; }
.iw-footer {
  display: flex; align-items: center; justify-content: flex-end; padding: 12px 24px; background: #fff;
  border-top: 1px solid var(--border); flex-shrink: 0;
}
.iw-footer .actions { display: flex; gap: 8px; }
.iw-dropzone {
  border: 1.5px dashed #ced4da; border-radius: 8px; padding: 32px; text-align: center; background: #fff;
  cursor: pointer; color: var(--text-muted); font-size: 13px;
}
.iw-dropzone:hover, .iw-dropzone.drag { border-color: var(--primary); background: #f0f5ff; }
.iw-dropzone i { font-size: 26px; color: var(--primary); margin-bottom: 8px; display: block; }
.iw-link { color: var(--primary); font-weight: 600; cursor: pointer; }
.iw-link:hover { text-decoration: underline; }
.iw-template-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f1f5f9;
  cursor: pointer; color: var(--primary); font-size: 14px;
}
.iw-template-row i { margin-top: 3px; }
.iw-field-row { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.iw-checkbox, .iw-radio { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; margin-top: 10px; cursor: pointer; }
.iw-radio input { margin-top: 2px; }
.iw-tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.iw-tab { border: none; background: none; padding: 8px 14px; font-size: 13px; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.iw-tab.active { color: var(--primary); font-weight: 650; border-bottom-color: var(--primary); }
.iw-map-scroll { max-height: calc(100vh - 340px); overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
/* .data-table dùng table-layout:fixed (đúng cho bảng danh sách chính — cột
   co giãn theo container, JS tự quản độ rộng qua colgroup) — nhưng bảng
   "Ghép dữ liệu"/"Kiểm tra dữ liệu" của wizard có thể có RẤT NHIỀU cột (tới
   ~25 trường), fixed sẽ ép co hết vào vừa khung, không bao giờ tràn ra nên
   KHÔNG BAO GIỜ hiện được scrollbar ngang của .iw-map-scroll (overflow:auto
   phía trên chỉ kích hoạt khi nội dung con THẬT SỰ rộng hơn). Đổi riêng
   bảng trong .iw-map-scroll sang auto để mỗi cột co theo đúng nội dung, bảng
   tự rộng ra hơn khung khi nhiều cột — lúc đó .iw-map-scroll mới có cái để
   cuộn ngang. Không đụng tới table.data-table nói chung (mọi trang danh
   sách khác vẫn giữ nguyên hành vi cũ). */
.iw-map-scroll table.data-table { table-layout: auto; width: max-content; min-width: 100%; }
.iw-map-table td { position: relative; }
.iw-progress { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 0; }
.iw-result { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 0; text-align: center; }

/* Lưới hạch toán (crpCreateLinesGrid_/EntryGrid) nay có thêm ~14 cột chiều
   hạch toán (Đối tượng...CP không hợp lý, xem entry-dimensions.js) nên rộng
   hơn nhiều so với popup/màn hình — bọc trong .entry-table-scroll để cuộn
   ngang thay vì bị bóp méo cột hoặc tràn ra ngoài modal. */
.entry-table-scroll { overflow-x: auto; }
/* Phiếu thu/chi (Tiền mặt + Tiền gửi) + Bút toán: neo scrollbar ngang của
   lưới hạch toán ngay phía trên voucher-popup-footer thay vì phải cuộn hết
   trang mới thấy — chỉ áp dụng cho 3 form chứng từ full-màn-hình này (không
   áp dụng chung .voucher-popup-body vì ~30 modal Danh mục khác dùng chung
   class đó với nội dung ngắn, không cần bó khung chiều cao). */
#crp-form-backdrop .voucher-popup-body, #jn-form-backdrop .voucher-popup-body, #brp-form-backdrop .voucher-popup-body {
  display: flex; flex-direction: column; overflow-y: hidden; min-height: 0;
}
#crp-form-backdrop .voucher-header-grid, #jn-form-backdrop .voucher-header-grid, #brp-form-backdrop .voucher-header-grid { flex-shrink: 0; }
#crp-entry-grid, #jn-entry-grid, #brp-entry-grid { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#crp-entry-grid .entry-table-scroll, #jn-entry-grid .entry-table-scroll, #brp-entry-grid .entry-table-scroll { flex: 1; min-height: 0; overflow: auto; }
#crp-entry-grid .entry-toolbar, #jn-entry-grid .entry-toolbar, #brp-entry-grid .entry-toolbar,
#crp-entry-grid .dt-footer, #jn-entry-grid .dt-footer, #brp-entry-grid .dt-footer,
#crp-entry-grid .entry-grid-actions, #jn-entry-grid .entry-grid-actions, #brp-entry-grid .entry-grid-actions { flex-shrink: 0; }
/* table-layout:fixed + <colgroup><col style="width:Npx"> (bắt buộc đi cùng
   nhau — xem ghi chú tương tự ở table.data-table phía trên) để mỗi cột GIỮ
   ĐÚNG width khai báo bất kể nội dung ô rỗng/hẹp (vd input flex:1 trong ô TK
   Nợ 100px nằm cạnh ô Diễn giải 806px) — chỉ khai width trên <th> mà không
   có colgroup khiến trình duyệt co giãn tỉ lệ các cột "nhẹ nội dung" gần về
   0 để nhường chỗ cho cột nặng, làm input lookup bị bóp không hiển thị được
   giá trị. */
table.entry-table { background:#fff; table-layout: fixed; width: 100%; border-collapse: collapse; font-size: 13px; }
table.entry-table th {
  background: #e6e7ea; font-size: 13px; white-space: nowrap; text-align: left; padding: 6px 8px;
  border-bottom: 1px solid var(--border); position: relative;
}
table.entry-table td { padding: 4px 6px; border-bottom: 1px solid #f1f5f9; }
/* Ô checkbox (CP không hợp lý) căn giữa cả ngang lẫn dọc trong dòng — mặc
   định vertical-align:top ở trên khiến checkbox dồn lên sát mép trên ô. */
table.entry-table td.text-center { text-align: center; vertical-align: middle; }
/* Input trong lưới hạch toán: KHÔNG viền theo mặc định — chỉ hiện viền +
   nền dòng khác biệt cho DÒNG đang thao tác (tr:focus-within), đỡ rối mắt
   với bảng nhiều dòng/nhiều cột chiều hạch toán mà vẫn làm nổi bật rõ dòng
   đang nhập liệu. Ô lookup báo sai danh mục (.lookup-invalid) vẫn LUÔN viền
   đỏ (!important ở khối LOOKUP POPUP phía trên) bất kể dòng có active hay
   không; ô đang thật sự có con trỏ vẫn luôn viền xanh (cũng !important). */
table.entry-table input, table.entry-table textarea {
  font-size: 13px; font-family: inherit; border: 1px solid transparent; background: transparent;
  width: 100%; padding: 4px 6px; border-radius: 4px;
}
/* Diễn giải dùng textarea (thay vì input) để cho phép xuống dòng/mở rộng
   khi nội dung dài — rows="1" giữ chiều cao ban đầu bằng 1 dòng như input
   bình thường, resize:vertical cho phép người dùng kéo giãn khi cần. */
table.entry-table textarea { resize: vertical; min-height: 26px; line-height: 1.4; }
/* Ô lookup trong lưới: viền đặt DUY NHẤT trên .lookup-input-wrap (khớp
   nguyên tắc chung ở khối LOOKUP POPUP phía trên — input/nút mũi tên bên
   trong luôn border:none), KHÔNG đặt lại trên input/nút riêng lẻ nữa để
   tránh bị rule "table.entry-table input" (đặc trưng hơn selector
   ".lookup-input-wrap input" theo thứ tự type+class) ghi đè mất viền trong
   suốt/viền dòng active bên dưới. */
table.entry-table .lookup-input-wrap { border-color: transparent; background: transparent; }
table.entry-table .lookup-input-wrap input, table.entry-table .lookup-caret-btn { border: none !important; background: transparent; }
/* Nút mũi tên chỉ hiện khi click/focus vào ô (giống fill-handle) — dùng
   visibility (không phải display) để giữ nguyên bề rộng ô, tránh input
   giật/co giãn khi mũi tên ẩn/hiện. */
table.entry-table .lookup-caret-btn { visibility: hidden; }
table.entry-table .lookup-input-wrap:focus-within .lookup-caret-btn { visibility: visible; }
table.entry-table input.text-end { text-align: right; }
table.entry-table input:focus, table.entry-table textarea:focus { outline: none; border-color: var(--primary) !important; background: #fff; }
table.entry-table .lookup-input-wrap:focus-within { border-color: var(--primary) !important; background: #fff; }
/* Dòng đang thao tác (tr:focus-within): nền dòng tối hơn hẳn nền bảng để
   dễ nhận biết, đồng thời TẤT CẢ input/khối lookup trong dòng đó chuyển
   nền trắng để nổi bật rõ vùng đang nhập liệu so với nền dòng tối. */
table.entry-table tbody tr:focus-within { background: var(--primary-light); }
table.entry-table tbody tr:focus-within td.entry-row-delete-cell { background: var(--primary-light); }
table.entry-table tbody tr:focus-within input,
table.entry-table tbody tr:focus-within textarea,
table.entry-table tbody tr:focus-within .lookup-input-wrap { border-color: var(--border); background: #fff; }
table.entry-table tfoot td { font-weight: 650; background: #fafafa; }
/* Ô "Tên..." chỉ đọc (dim-name-cell, vd Tên đối tượng/Tên khoản mục CP...) —
   nội dung thường dài hơn hẳn độ rộng cột cố định (table-layout:fixed) —
   cắt ngắn bằng ... thay vì tràn/xuống dòng làm vỡ layout; title đi kèm
   (setDimNameCellText_ trong entry-dimensions.js) hiện đủ tên khi rê chuột. */
table.entry-table td.dim-name-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;}
.entry-row-delete { border: none; background: none; color: var(--danger); cursor: pointer; padding: 2px 6px; }
/* Cột xoá dòng LUÔN neo bên phải (position:sticky) — cuộn ngang qua ~20 cột
   chiều hạch toán không còn làm mất nút xoá. */
table.entry-table th.entry-row-delete-cell, table.entry-table td.entry-row-delete-cell {
  position: sticky; right: 0; background: #fff; z-index: 2; text-align: center;
}
table.entry-table th.entry-row-delete-cell { background: #e6e7ea; z-index: 3; }
table.entry-table tfoot td.entry-row-delete-cell { background: #fafafa; }
/* Cột chiều hạch toán được "Cố định" qua Tuỳ chỉnh giao diện (entry-
   dimensions.js, applyPins_) — neo TRÁI (position:sticky + left tính động
   bằng JS), cùng cách làm với cột xoá dòng ở trên nhưng phía ngược lại. */
table.entry-table th.entry-pin-cell, table.entry-table td.entry-pin-cell { position: sticky; background: #fff; z-index: 2; }
table.entry-table th.entry-pin-cell { background: #e6e7ea; z-index: 3; }
table.entry-table tbody tr:focus-within td.entry-pin-cell { background: var(--primary-light); }
/* Cột "#" (thứ tự dòng) LUÔN neo trái (giống cột xoá dòng luôn neo phải) —
   trước đây chỉ có width khai báo, không sticky nên cuộn ngang qua các cột
   chiều hạch toán làm mất luôn số thứ tự dòng đang xem. Căn giữa cả ngang
   (text-align) và dọc (vertical-align, mặc định td trong bảng này là
   vertical-align:top) để số thứ tự nổi rõ giữa ô. */
table.entry-table th.entry-idx-cell, table.entry-table td.entry-idx-cell {
  position: sticky; left: 0; background: #fff; z-index: 2; text-align: center; vertical-align: middle;
}
table.entry-table th.entry-idx-cell { background: #e6e7ea; z-index: 3; }
table.entry-table tbody tr:focus-within td.entry-idx-cell { background: var(--primary-light); }
/* .entry-grid-actions (nút "Thêm dòng"/"Xoá hết dòng") giờ nằm trong
   voucher-popup-footer, dùng thẳng class .btn/.btn-outline-secondary/
   .btn-outline-danger dùng chung toàn app (giống Đóng/Cất bên cạnh) — bỏ
   hẳn style nút riêng + hover nền sáng (#f8fafc) từng đặt ở đây, vì nó đè
   lên rule hover của .btn-outline-* (đổi nền màu đậm + chữ trắng), khiến
   chữ trắng lại rơi lên nền gần trắng, không đọc được. */
.entry-grid-actions { display: flex; gap: 8px; }

/* ---------- THANH CÔNG CỤ PHÍA TRÊN LƯỚI HẠCH TOÁN (entry-dimensions.js
   entryToolbarHtml_) — tab "Hạch toán" bên trái (chừa chỗ cho tab khác của
   phiếu sau này, vd "Thuế"), Loại tiền/Tỷ giá bên phải. ---------- */
.entry-toolbar {
  display: flex; background: #fff; border-radius: 10px;; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 4px 2px; border-bottom: 1px solid var(--border);
}
.entry-toolbar-tabs { display: flex; gap: 4px; }
.entry-toolbar-tab {
  padding: 6px 14px; font-size: 13px; font-weight: 650; color: var(--text-muted); cursor: default;
  border-radius: 6px 6px 0 0; border-bottom: 2px solid transparent;
}
.entry-toolbar-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.entry-toolbar-right { display: flex; align-items: center; gap: 10px; }
.entry-toolbar-currency { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.entry-toolbar-currency label { color: var(--text-muted); white-space: nowrap; }
.entry-exchange-rate-field { display: flex; align-items: center; gap: 6px; }
.entry-exchange-rate-field input { border: 1px solid #ced4da; border-radius: 4px; padding: 4px 6px; font-size: 13px; width: 100px; text-align: right; }

.attachment-dropzone {
  border: 2px dashed var(--border); border-radius: 8px; padding: 16px; text-align: center;
  color: var(--text-muted); font-size: 13px; margin-top: 12px;
}

.voucher-popup-footer {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 18px;
  border-top: 1px solid var(--border); background: #fafafa;
}
.voucher-popup-footer .actions { display: flex; gap: 8px; }

/* ---------- POPUP XEM TRƯỚC KHI IN (khảo sát đúng ảnh MISA AMIS
   "Popup Printview" người dùng gửi — common/js/print-preview.js) — nổi TRÊN
   voucher-popup-backdrop (1600, chứng từ đang mở vẫn thấy phía sau/rìa
   ngoài, không đóng lại), z-index cao hơn. Không dùng lại .voucher-popup-*
   (nền trắng, bo góc, form data) vì đây là 1 KHUNG KHÁC HẲN — thanh công cụ
   tối màu kiểu trình xem PDF, sidebar thumbnail trang, vùng xem giấy trắng
   nằm giữa nền xám đậm. */
.pv-modal-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 1700;
  align-items: stretch; justify-content: flex-end;
}
.pv-modal-backdrop.show {     display: flex;flex-wrap: wrap;align-content: center;flex-direction: column;}
.pv-modal { width: calc(100vw - 240px); max-width: 1300px; margin-left: auto; background: #fff; display: flex; flex-direction: column; height: 100vh; box-shadow: -8px 0 30px rgba(0,0,0,.35); }
.pv-modal-header {
  display: flex; align-items: center; gap: 22px; padding: 10px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.pv-modal-title { font-size: 19px; font-weight: 700; color: #1e293b; margin-right: auto; white-space: nowrap; }
.pv-action-btn {
  display: flex; align-items: center; gap: 6px; border: none; background: none; cursor: pointer;
  font-size: 13.5px; color: #334155; padding: 6px 4px; white-space: nowrap;
}
.pv-action-btn:hover { color: var(--primary); }
.pv-action-btn.pv-action-primary { color: #fff; background: var(--primary); padding: 7px 14px; border-radius: 6px; }
.pv-action-btn.pv-action-primary:hover { background: var(--primary-hover); color: #fff; }
.pv-modal-header .pv-icon-btn { font-size: 15px; }
.pv-icon-btn { border: none; background: none; cursor: pointer; color: #64748b; padding: 6px; border-radius: 4px; line-height: 1; }
.pv-icon-btn:hover { background: #f1f5f9; color: #1e293b; }
.pv-modal-toolbar {
  display: flex; align-items: center; gap: 14px; padding: 8px 16px; background: #26262f; color: #e2e8f0; flex-shrink: 0;
}
.pv-modal-toolbar .pv-icon-btn { color: #cbd5e1; }
.pv-modal-toolbar .pv-icon-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.pv-file-name { font-size: 13px; color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.pv-toolbar-spacer { flex: 1; }
.pv-page-nav { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.pv-page-nav input { width: 40px; text-align: center; background: #38384a; border: 1px solid #4b4b5e; color: #fff; border-radius: 4px; padding: 3px 4px; }
.pv-zoom { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pv-zoom button { border: none; background: none; color: #cbd5e1; cursor: pointer; font-size: 16px; width: 24px; }
.pv-zoom button:hover { color: #fff; }
.pv-zoom-level { min-width: 42px; text-align: center; }
.pv-modal-body { flex: 1; display: flex; overflow: hidden; }
.pv-sidebar { width: 170px; flex-shrink: 0; background: #1c1c24; overflow-y: auto; padding: 14px 0; }
.pv-thumb { width: 120px; margin: 0 auto 18px; cursor: pointer; }
.pv-thumb-page { width: 120px; height: 156px; background: #fff; border: 2px solid transparent; border-radius: 2px; overflow: hidden; position: relative; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.pv-thumb.active .pv-thumb-page { border-color: var(--primary); }
.pv-thumb-page iframe { width: 850px; height: 1100px; border: none; transform: scale(0.14117); transform-origin: top left; pointer-events: none; }
.pv-thumb-label { text-align: center; color: #cbd5e1; font-size: 12px; margin-top: 6px; }
.pv-viewer { flex: 1; overflow: auto; background: #57575f; padding: 24px 0; }
.pv-page-wrap { display: flex; justify-content: center; margin-bottom: 24px; }
.pv-page-sheet { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.4); transform-origin: top center; }
.pv-page-sheet iframe { width: 850px; height: 1100px; border: none; display: block; }

/* ---------- TOAST / LOADING ---------- */
#global-loading-overlay {
  position: fixed; inset: 0; background: rgba(255,255,255,.6);
  display: none; align-items: center; justify-content: center; z-index: 2000;
}
/* SweetAlert2 mặc định z-index 1060 — thấp hơn .voucher-popup-backdrop
   (1600), nên Swal.fire() (vd confirmDialog/toast bấm ra từ 1 modal đang
   mở) bị che khuất phía sau modal đó. Đẩy Swal lên trên cùng mọi overlay. */
.swal2-container { z-index: 2100 !important; }

.btn { font-size: 13px; font-weight: 550;}

/* ---------- THÔNG TIN CÔNG TY ---------- */
.company-info-toolbar{display:flex;align-items:center;justify-content:space-between;margin:10px 0 14px;padding:12px 16px;background:#fff;border:1px solid var(--border);border-radius:8px}.company-info-section{background:#fff;border:1px solid var(--border);border-radius:8px;margin-bottom:12px;padding:0 16px 12px}.company-info-section-head{display:flex;align-items:center;justify-content:space-between;margin:0 -16px 8px;padding:0 10px 0 16px;border-bottom:1px solid #edf0f3}.company-info-section-head h6{margin:0;padding:10px 0;font-weight:700}.company-info-section-edit{border:0;background:transparent;color:#64748b;cursor:pointer;width:28px;height:28px;border-radius:4px}.company-info-section-edit:hover{background:#eef4ff;color:var(--primary)}.company-info-row{display:grid;grid-template-columns:260px 1fr;min-height:32px;align-items:center;border-bottom:1px solid #f3f4f6}.company-info-row:last-child{border-bottom:0}.company-info-label{color:#5b6472}.company-info-value{color:#1f2937}.company-signer-table{width:100%;border-collapse:collapse;margin:6px 0 8px}.company-signer-table th,.company-signer-table td{border:1px solid #dfe3e8;padding:7px 9px;text-align:left}.company-signer-table th{background:#f7f8fa;font-weight:600}.company-info-edit-grid{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:10px 18px;padding:8px 0}.company-info-input{display:grid;grid-template-columns:190px 1fr;align-items:center;gap:8px}.company-info-input span{color:#5b6472;font-size:13px}.company-info-input input{width:100%;border:1px solid #d6dbe1;border-radius:4px;padding:6px 8px}.company-info-checks{display:flex;gap:24px;margin-top:14px}.company-info-section-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid #edf0f3}@media(max-width:800px){.company-info-row{grid-template-columns:1fr}.company-info-edit-grid{grid-template-columns:1fr}.company-info-input{grid-template-columns:1fr}.company-info-checks{flex-direction:column;gap:8px}}

/* Popup xem trước khi in dạng FULL MÀN HÌNH + trang A4 NGANG — dùng cho in báo cáo (common/js/print-report.js) */
.pv-modal.pv-full { width: 100vw; max-width: none; margin-left: 0; }
.pv-landscape .pv-page-sheet iframe { width: 1123px; height: 794px; }
.pv-landscape .pv-thumb-page { height: 85px; }
.pv-landscape .pv-thumb-page iframe { width: 1123px; height: 794px; transform: scale(0.1069); }

/* ---------- CHỨNG TỪ MUA HÀNG (mua-hang/vouchers): danh sách + chi tiết dưới, form lập/xem ---------- */
.page-content:has(> .pur-list-wrap) { display: flex; flex-direction: column; overflow: hidden; }
.pur-list-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.pur-list-top { flex: 1 1 62%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.pur-list-top > div { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.pur-detail { flex: 0 0 32%; min-height: 120px; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 8px; background: #fff; overflow: hidden; }
.pur-detail-title { padding: 8px 12px; font-weight: 650; border-bottom: 1px solid var(--border); font-size: 13px; }
.pur-detail-body { flex: 1; min-height: 0; overflow: auto; padding: 0 8px 8px; }
.pur-options-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 12px; }
.pur-options-bar .voucher-field { margin: 0; }
.pur-radio, .pur-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; margin: 0; }
.pur-tabs { display: flex; background: #fff; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.pur-tab { border: none; background: none; padding: 5px 16px; font-size: 13.5px; font-weight: 650; color: #64748b; border-bottom: 2px solid transparent; cursor: pointer; }
.pur-tab:hover { color: var(--primary); }
.pur-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.pur-totals { display: flex; flex-wrap: wrap; gap: 28px; justify-content: flex-end; margin-top: 14px; font-size: 13px; }
.pur-totals > div { display: flex; gap: 14px; align-items: baseline; }
.pur-totals b { min-width: 110px; text-align: right; }
.pur-totals-main b { font-size: 15px; }
.pur-readonly-cell { color: #64748b; padding: 0 6px; }
/* Đang Xem: khoá các ô chọn/radio/lưới (input đã disabled bằng JS — pointer-events chỉ để chặn mở popup lookup). Sửa nhanh chỉ mở lại đúng ô Diễn giải (input thường, không nằm trong .lookup-cell). */
.pur-readonly .lookup-cell, .pur-readonly .pur-radio, .pur-readonly .pur-check, .pur-readonly .entry-table tbody { pointer-events: none; }
.pur-cost-actions { margin-top: 10px; display: flex; gap: 8px; }

/* ===== Khế ước đi vay / Khế ước cho vay (loan-agreements.js) ===== */
.la-cc-modal, .la-sched-modal { width: 900px; max-width: 95vw; }
.la-f-radio-row { display: flex; gap: 28px; margin-bottom: 10px; }
.la-grid-actions { margin-top: 8px; display: flex; gap: 8px; }
table.la-plain-table { margin-top: 4px; }
table.la-plain-table th { position: static; }
table.la-plain-table td { padding: 4px 6px; }
table.la-plain-table td input { width: 100%; box-sizing: border-box; border: 1px solid #cfe4df; border-radius: 5px; height: 30px; padding: 0 8px; font-size: 12.8px; }
table.la-plain-table td .lookup-input-wrap { height: 30px; }
.la-f-attach-dropzone { border: 1.5px dashed #c7d2e3; border-radius: 10px; padding: 28px; text-align: center; color: #94a3b8; background: #f8fafc; cursor: not-allowed; }
.la-f-attach-dropzone i { font-size: 20px; display: block; margin-bottom: 6px; }
.la-row-contract td { font-weight: 650; background: #f8fafc; }
.la-row-contract .la-doc-link { font-weight: 650; }
.la-toolbar-actions { display: inline-flex; gap: 8px; }

/* ===== Đối trừ chứng từ (mua-hang/offsets/offsets.js) ===== */
.poff-header-bar { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.poff-header-bar .voucher-field { margin: 0; min-width: 160px; }
.poff-header-bar #poff-f-fetch, .poff-header-bar #poff-w-fetch { margin-bottom: 1px; }
.poff-total { margin-left: auto; margin-bottom: 0; }
.poff-section { margin-bottom: 20px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.poff-section-header { display: flex; justify-content: space-between; align-items: center; background: #f8fafc; padding: 8px 12px; font-weight: 650; border-bottom: 1px solid var(--border); }
.poff-section-header input[type="text"] { width: 260px; border: 1px solid #cfe4df; border-radius: 6px; height: 30px; padding: 0 10px; font-size: 12.8px; }
.poff-table-wrap { max-height: 320px; overflow: auto; }
.poff-table-wrap table.la-plain-table thead th { position: sticky; top: 0; z-index: 1; }
tr.poff-total-row td { font-weight: 650; background: #f8fafc; }
.poff-wizard-steps { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 0; }
.poff-wizard-step { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #94a3b8; font-size: 12px; font-weight: 650; }
.poff-wizard-step.active { color: var(--primary); }
.poff-wizard-dot { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #cbd5e1; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.poff-wizard-step.active .poff-wizard-dot { border-color: var(--primary); color: var(--primary); }
.poff-wizard-line { width: 140px; height: 2px; background: #cbd5e1; margin-bottom: 20px; }
.poff-allow-edit { margin-bottom: 7px; }
.poff-w-search-input { height: 32px; border: 1px solid #cfe4df; border-radius: 6px; padding: 0 10px; font-size: 12.8px; margin-left: auto; width: 240px; }
.poff-wd-modal { width: 1300px; max-width: 97vw; }
/* Nút Hủy/Đối trừ/Tiếp tục/Thực hiện lệch hẳn sang phải — .voucher-popup-footer mặc định
   justify-content:space-between, chỉ đẩy đúng hướng khi có ĐỦ 2 khối con; các form Đối trừ chứng từ chỉ có 1 khối
   .actions nên phải tự đẩy bằng margin-left thay vì trông chờ space-between. */
#poff-f-backdrop .voucher-popup-footer .actions,
#poff-w-backdrop .voucher-popup-footer .actions,
#poff-wd-backdrop .voucher-popup-footer .actions { margin-left: auto; }
.poff-table-wrap input[type="checkbox"], .poff-header-bar input[type="checkbox"] { width: 14px; height: 14px; border-radius: 4px; }
.poff-table-wrap input[type="checkbox"]::after, .poff-header-bar input[type="checkbox"]::after { left: 50%; top: 48%; width: 4px; height: 7.5px; border-width: 0 1.8px 1.8px 0; }
/* ---------- Quản lý hoá đơn (hoa-don/einvoices.js) ---------- */
/* Popup (đồng bộ, xem hoá đơn) được gắn vào body; bảng dùng DataTable chuẩn (không ghi đè cuộn/cố định cột) */
.einv-popup { width: min(520px, 94vw); }
.einv-popup.einv-popup-wide { width: min(980px, 96vw); }
.einv-popup-body { font-size: 13px; }
.einv-progress-head { font-weight: 650; margin-bottom: 6px; }
.einv-progress-track { height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
.einv-progress-bar { height: 100%; background-color: var(--primary); transition: width 0.4s ease; }
.einv-progress-bar.animated { background-image: linear-gradient(45deg, rgba(255,255,255,0.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.25) 75%, transparent 75%); background-size: 16px 16px; animation: einv-stripes 1s linear infinite; }
.einv-progress-line { color: #334155; margin-top: 4px; }
.einv-fail { color: #b91c1c; margin: 6px 0; }
.einv-view-head { display: grid; gap: 4px; margin-bottom: 10px; }
.einv-view-scroll { max-height: 50vh; overflow: auto; }
@keyframes einv-stripes { from { background-position: 0 0; } to { background-position: 16px 0; } }

/* ---------- Kết nối API (he-thong/api-connections) ---------- */
.apic-ok { color: #15803d; font-weight: 650; }
.apic-fail { color: #b91c1c; font-weight: 650; }
.apic-none { color: #64748b; }
.apic-captcha-box { margin-top: 12px; padding: 12px; border: 1px solid #cfe4df; border-radius: 8px; background: #f8fafc; max-width: 460px; }
.apic-captcha-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.apic-captcha-img { height: 48px; background: #fff; border: 1px solid #cfe4df; border-radius: 6px; padding: 4px; }
.apic-captcha-input { width: 160px; height: 30px; border: 1px solid #cfe4df; border-radius: 6px; padding: 0 8px; font-size: 14px; letter-spacing: 2px; }
#apic-content textarea { width: 100%; box-sizing: border-box; border: 1px solid #cfe4df; border-radius: 6px; padding: 6px 8px; font-size: 12.8px; font-family: inherit; }
#apic-content input[type="password"], #apic-content input[type="text"] { width: 280px; height: 30px; border: 1px solid #cfe4df; border-radius: 6px; padding: 0 8px; font-size: 12.8px; }
.tl-view-row { padding: 6px 0; border-bottom: 1px dashed #e2e8f0; font-size: 13px; }
.tl-view-row b { display: inline-block; min-width: 180px; color: var(--text-muted); font-weight: 600; }
/* Wizard "Thêm mới kết nối" (bước 1: thẻ chọn đối tượng kết nối) */
.apic-wiz-cards { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.apic-wiz-card { flex: 1 1 180px; max-width: 220px; border: 1.5px solid var(--primary); border-radius: 10px; padding: 18px 14px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.apic-wiz-card:hover { box-shadow: 0 4px 12px rgba(var(--primary-rgb), .25); transform: translateY(-2px); }
.apic-wiz-card.selected { border-color: var(--primary); background: #f0f9f7; }
.apic-wiz-card i { font-size: 26px; color: var(--primary); margin-bottom: 8px; display: block; }
.apic-wiz-card-label { font-weight: 650; margin-bottom: 4px; }
.apic-wiz-card-sub { font-size: 12px; color: var(--text-muted); }
.apic-wiz-note { margin-top: 10px; padding: 8px 12px; border-radius: 6px; background: #fff7ed; color: #9a3412; font-size: 12.8px; }
.apic-radio-group { display: flex; gap: 16px; align-items: center; height: 30px; }
.apic-radio-group label { display: flex; align-items: center; gap: 5px; font-weight: 400; cursor: pointer; }
.apic-connect-status { padding: 14px 0; color: var(--text-muted); }
.apic-connect-result { padding: 14px 16px; border-radius: 8px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.apic-connect-result.apic-connect-ok { background: #ecfdf5; color: #15803d; }
.apic-connect-result.apic-connect-fail { background: #fef2f2; color: #b91c1c; }

/* ---------- Đối chiếu ngân hàng (tien-gui/bank-reconcile) ---------- */
.brc-pop-header { margin-bottom: 10px; color: #334155; font-size: 13px; }
.brc-pop-footer { margin-top: 14px; }
.brc-sum { display: grid; grid-template-columns: 160px 1fr 1fr; max-width: 560px; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
.brc-sum-row { display: contents; }
.brc-sum-row > span { padding: 6px 10px; border-top: 1px solid #e2e8f0; font-size: 12.8px; text-align: right; }
.brc-sum-row > span:first-child { text-align: left; color: #475569; }
.brc-sum-head > span { border-top: none; font-weight: 600; background: #f8fafc; }
.brc-hint { color: #15803d; font-size: 12.8px; margin-bottom: 10px; }
.brc-match-cols { display: flex; gap: 14px; }
.brc-match-col { flex: 1; min-width: 0; }
.brc-match-col h6 { margin: 0 0 6px; font-size: 13px; color: #334155; }
.brc-match-col table.data-table tbody tr { cursor: pointer; }
.brc-match-col table.data-table tbody tr.brc-selected { background: var(--primary-light); }
.brc-match-actions { margin-top: 10px; text-align: center; }

.poff-v-modal { width: 900px; max-width: 95vw; }
.poff-v-fx-box { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 10px 14px; background: #f8fafc; border-radius: 8px; border: 1px solid var(--border); }
/* Bảng 2 dòng header nhóm cột (Tổng tiền/Đã đối trừ/Chưa đối trừ/Đối trừ lần này, mỗi nhóm 2 cột con Nguyên tệ/Quy
   đổi) — xem poffRenderPaySection_/poffRenderDebtSection_ (offsets.js). .poff-group-start kẻ viền trái phân tách
   đầu mỗi nhóm cho dễ đọc, áp cho CẢ ô header lẫn ô dữ liệu cùng cột. */
.poff-grouped-table thead tr:first-child th { text-align: center; }
.poff-grouped-table thead th.poff-group-start { border-left: 1px solid var(--border); }
.poff-grouped-table #poff-f-pay-body td:nth-child(6), .poff-grouped-table #poff-f-pay-body td:nth-child(7), .poff-grouped-table #poff-f-pay-body td:nth-child(9), .poff-grouped-table #poff-f-pay-body td:nth-child(11), .poff-grouped-table #poff-f-pay-body td:nth-child(13),
.poff-grouped-table #poff-wd-pay-body td:nth-child(6), .poff-grouped-table #poff-wd-pay-body td:nth-child(7), .poff-grouped-table #poff-wd-pay-body td:nth-child(9), .poff-grouped-table #poff-wd-pay-body td:nth-child(11), .poff-grouped-table #poff-wd-pay-body td:nth-child(13),
.poff-grouped-table #poff-f-debt-body td:nth-child(7), .poff-grouped-table #poff-f-debt-body td:nth-child(8), .poff-grouped-table #poff-f-debt-body td:nth-child(10), .poff-grouped-table #poff-f-debt-body td:nth-child(12), .poff-grouped-table #poff-f-debt-body td:nth-child(14),
.poff-grouped-table #poff-wd-debt-body td:nth-child(7), .poff-grouped-table #poff-wd-debt-body td:nth-child(8), .poff-grouped-table #poff-wd-debt-body td:nth-child(10), .poff-grouped-table #poff-wd-debt-body td:nth-child(12), .poff-grouped-table #poff-wd-debt-body td:nth-child(14)
{ border-left: 1px solid #eef2f7; }
tr.poff-total-row td.poff-group-start { border-left: 1px solid var(--border); }
.entry-toolbar-tab[data-gtab] { padding: 6px 6px; }
/* Khối tổng tiền ở voucher-header-grid của chứng từ mua hàng: Tổng tiền thanh toán (trong đó tiền hàng/thuế) + Tổng giá trị nhập kho (trong đó tiền hàng/chi phí) */
.pur-total-block { text-align: right; min-width: 260px; }
.pur-total-block .pur-total-sub { display: flex; justify-content: space-between; gap: 16px; font-size: 12.5px; color: #475569; margin-top: 3px; }
.pur-total-block .pur-total-sub b { font-weight: 650; color: #1e293b; }
.pur-total-block hr { margin: 10px 0 8px; border-color: var(--border); }
.pur-total-block .pur-total-stock .value { font-size: 18px; }

.pur-cols-menu { position: fixed; z-index: 3000; width: 230px; max-height: 60vh; overflow: auto; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.15); padding: 8px 12px; }
.pur-cols-menu .pur-cols-title { font-weight: 650; font-size: 12.5px; margin-bottom: 6px; color: #334155; }
.pur-cols-menu .pur-check { display: flex; margin: 4px 0; }
.pur-tfoot-note { display: none; }

.pur-doclink { color: var(--link); cursor: pointer; font-weight: 500; text-decoration: none; }
.pur-doclink:hover { text-decoration: underline; }
/* Bảng DataTable trong popup chọn chứng từ (Chọn chứng từ CP, Trả tiền) — chiếm phần cao còn lại của popup, cuộn riêng */
.pur-picker-wrap { height: calc(100vh - 290px); min-height: 260px; display: flex; flex-direction: column; }
.pur-picker-wrap > div { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* Popup lọc theo cột của bảng chuẩn phải nổi TRÊN các popup/form toàn màn hình (z-index 1600) — trước đây 60 nên bị che khi bảng nằm trong popup chọn chứng từ */
.dt-filter-popup { z-index: 1700; }
/* Bảng chuẩn nằm trong tab của form (Hàng tiền/Chi phí/Chứng từ tham chiếu/Hạch toán dạng Xem) */
.pur-dt-wrap { height: 380px; min-height: 220px; display: flex; flex-direction: column; margin-top: 8px; }
.pur-dt-wrap > div { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
/* Chữ ở dạng khoá (Xem/ô bị vô hiệu) đủ đậm, dễ đọc — mặc định của trình duyệt xám nhạt */
.voucher-popup input:disabled, .voucher-popup textarea:disabled, .voucher-popup input[readonly] {
  color: #1e293b; -webkit-text-fill-color: #1e293b; opacity: 1; background: #f1f5f9;
}
.voucher-popup input:disabled::placeholder { color: #94a3b8; -webkit-text-fill-color: #94a3b8; }

/* Đang Xem: bảng chuẩn trong tab vẫn dùng được (đổi số dòng/trang, lọc, phân trang) dù các ô lookup khác bị khoá */
.pur-readonly .pur-dt-wrap .lookup-cell, .pur-readonly .pur-dt-wrap .pur-check { pointer-events: auto; }



/* =====================================================================
   MẪU M2 — kiểu nhập chứng từ (áp cho mọi form full màn hình: Thu/Chi, Giấy báo, Bút toán, Mua hàng)
   Nền xanh nhạt, thẻ trắng bo góc, nhãn có icon xanh, ô nhập cao + bo tròn, thẻ tổng tiền xanh dương.
   ===================================================================== */
.voucher-popup.fullscreen .voucher-popup-header, .voucher-popup.fullscreen .voucher-popup-footer { background: #fff; }
.voucher-popup.fullscreen .voucher-popup-body { padding: 20px 26px; }
.voucher-popup.fullscreen .voucher-header-grid {
  background: #fff; border: 1px solid #e6ecf5; border-radius: 10px; padding: 10px 10px; gap: 26px;
  box-shadow: 0 1px 4px rgba(var(--primary-rgb), .07);
}
.voucher-popup.fullscreen .voucher-field > label, .pf-l {
  display: flex; align-items: center; gap: 9px; font-weight: 650; color: #334155; margin-bottom: 7px;
}
.voucher-popup.fullscreen .voucher-field > label .vs-ic, .pf-l i { color: var(--primary); width: 18px; text-align: center; }
.voucher-popup.fullscreen .voucher-field input:not([type="checkbox"]):not([type="radio"]), .voucher-popup.fullscreen .voucher-field textarea, .pf input, .pf textarea {
  width: 100%; padding: 3px 10px; border: 1px solid #cfe4df; border-radius: 10px; background: #fff; color: #1e293b;
}
.voucher-popup.fullscreen .voucher-field textarea { height: auto; }
.voucher-popup.fullscreen .voucher-field input:focus, .pf input:focus, .pf textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12); }
.voucher-popup.fullscreen .lookup-input-wrap input { border-radius: 10px; }
.voucher-popup.fullscreen .lookup-input-wrap { border-radius: 10px; }
.voucher-popup.fullscreen .voucher-header-grid .lookup-cell { display: block; }
/* Thẻ "Tổng tiền" của Thu/Chi/Giấy báo/Bút toán: xanh dương như mẫu */
.voucher-popup.fullscreen .voucher-total-display {
  background: linear-gradient(135deg, var(--primary), #45c4a2 55%, #77c4b0); color: #fff; border-radius: 16px; padding: 20px 24px; text-align: left;
  box-shadow: 0 6px 16px rgba(var(--primary-rgb), .25);
}
.voucher-popup.fullscreen .voucher-total-display .label { color: #fff; font-size: 16px; font-weight: 650; }
.voucher-popup.fullscreen .voucher-total-display .value { color: #fff; font-size: 32px; font-weight: 700; text-align: right; }

/* ----- Form Mua hàng ----- */
.pur-topbar { display: flex; background: #fff; border-bottom: 1px solid #e2e8f0; }
.pur-seg { flex: 1; padding: 10px 22px 12px; border-right: 1px solid #e2e8f0; min-width: 0; }
.pur-seg:last-child { border-right: 0; }
.pur-seg-title { font-size: 11.5px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 7px; display: flex; align-items: center; gap: 7px; }
.pur-seg-body { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 34px; }
.voucher-popup.pur-style .voucher-popup-header { border-bottom: 1px solid #e2e8f0; }
.voucher-popup.pur-style .voucher-popup-body { padding-top: 14px; }
.pur-head.voucher-header-grid {
  background: transparent; border: 0; box-shadow: none; padding: 0; gap: 20px;
  display: grid; grid-template-columns: minmax(0, 1fr) 370px; align-items: start;
}
.pur-card { background: #fff; padding: 12px 26px; }
.pur-fields { display: grid; grid-template-columns: 300px minmax(0, 1fr) 270px; gap: 12px 22px; }
.pur-fields .pf-wide { grid-column: 1 / span 2; }
.pur-fields .pf { min-width: 0; }
.pur-fields .lookup-cell, .pur-fields .pur-partner-cell { display: block; }
.pur-total-col { display: flex; flex-direction: column; gap: 14px; }
.pur-tc-main {
  background: linear-gradient(135deg, #004f43, var(--primary) 55%, #2fb89a); color: #fff; border-radius: 16px; padding: 5px 26px;
  display: flex; align-items: center; gap: 14px; box-shadow: 0 6px 16px rgba(var(--primary-rgb), .28);
}
.pur-tc-main i { font-size: 30px; opacity: .95; }
.pur-tc-main .lbl { font-size: 17px; font-weight: 650; flex: 1; }
.pur-tc-main .big { font-size: 34px; font-weight: 700; }
.pur-tc-sub { background: var(--primary-light); border-radius: 14px; padding: 5px 20px; }
.pur-tc-stock { background: #e8f8f0; border-radius: 14px; padding: 5px 20px; }
.pur-total-col .trow { display: flex; align-items: center; gap: 12px; padding: 1px 0; font-size: 14px; color: #475569; }
.pur-total-col .trow i { color: var(--primary); width: 20px; text-align: center; }
.pur-total-col .trow span { flex: 1; }
.pur-total-col .trow b { font-weight: 650; color: #1e293b; text-align: right; }
.pur-total-col .trow.strong { color: var(--primary-active); font-weight: 650; font-size: 15.5px; }
.pur-total-col .trow.strong b { color: var(--primary-active); font-size: 22px; }
.pur-tc-stock .trow i { color: #16a34a; }
.pur-tc-stock .trow + .trow { border-top: 1px solid rgba(22, 163, 74, .14); }
.pur-tc-stock .trow.strong { color: #15803d; }
.pur-tc-stock .trow.strong b { color: #15803d; font-size: 24px; }
.pur-tabs { margin-bottom: 14px; border-radius: 10px;}
@media (max-width: 1280px) {
  .pur-head.voucher-header-grid { grid-template-columns: minmax(0, 1fr); }
  .pur-fields { grid-template-columns: 1fr 1fr; }
  .pur-fields .pf-wide { grid-column: 1 / span 2; }
}

/* Thanh Nhập kho | Thanh toán | Hóa đơn nằm TRONG voucher-popup-header của form Mua hàng; cột tổng tiền gọn hơn */
.voucher-popup.pur-style .voucher-popup-header { gap: 18px; padding-top: 8px; padding-bottom: 8px; align-items: center; }
.voucher-popup.pur-style .voucher-popup-header > h5 { white-space: nowrap; margin: 0; }
.voucher-popup.pur-style .pur-topbar { flex: 1; min-width: 0; background: transparent; border: 0; margin: 0 6px; }
.voucher-popup.pur-style .pur-seg { padding: 2px 16px 4px; }
.voucher-popup.pur-style .pur-seg:first-child { padding-left: 0; }
.pur-head.voucher-header-grid { grid-template-columns: minmax(0, 1fr) 310px; gap: 16px; }
.pur-tc-main { padding: 1px 18px; gap: 10px; border-radius: 14px; }
.pur-tc-main i { font-size: 22px; }
.pur-tc-main .lbl { font-size: 14.5px; }
.pur-tc-main .big { font-size: 26px; }
.pur-tc-sub, .pur-tc-stock { padding: 8px 16px; border-radius: 12px; }
.pur-total-col { gap: 10px; }
.pur-total-col .trow { padding: 5px 0; font-size: 13px; gap: 10px; }
.pur-total-col .trow.strong { font-size: 14px; }
.pur-total-col .trow.strong b { font-size: 18px; }
.pur-tc-stock .trow.strong b { font-size: 19px; }

/* Header form Mua hàng: tiêu đề phần + ô chọn cùng 1 dòng */
.voucher-popup.pur-style .pur-seg { display: flex; align-items: center; gap: 10px; padding: 2px 16px; }
.voucher-popup.pur-style .pur-seg-title { margin: 0; white-space: nowrap; }
.voucher-popup.pur-style .pur-seg-body { flex-wrap: nowrap; }
/* Cột tổng tiền: rộng hơn để nhãn + số tiền (kể cả số lớn) luôn trên 1 dòng; thẻ "Tổng tiền thanh toán" nằm trong thẻ xanh nhạt */
.pur-head.voucher-header-grid { grid-template-columns: minmax(0, 1fr) 430px; }
.pur-total-col .trow, .pur-tc-main { white-space: nowrap; }
.pur-total-col .trow b, .pur-tc-main .big { white-space: nowrap; }
.pur-tc-sub { padding: 0; overflow: hidden; }
.pur-tc-sub .pur-tc-main { border-radius: 0; box-shadow: none; }
.pur-tc-sub .pur-tc-rows { padding: 1% 18px; }
/* Ô ngày chứng từ / số ngày được nợ gọn hơn */
.pur-fields .pf input[type="date"] { max-width: 190px; }
.pur-fields #pur-f-days { max-width: 130px; }


/* ===== Chỉnh mẫu M2 (lần 2) ===== */
/* Thanh Nhập kho | Thanh toán | Hóa đơn: mỗi phần rộng theo nội dung, không co lại nên không chồng lên nhau; vạch ngăn nằm giữa các phần */
.voucher-popup.pur-style .pur-topbar { display: flex; align-items: stretch; overflow-x: auto; overflow-y: visible; }
.voucher-popup.pur-style .pur-seg { flex: 0 0 auto; border-right: 0; border-left: 1px solid #d9e2f0; padding: 2px 18px; }
.voucher-popup.pur-style .pur-seg:first-child { border-left: 0; padding-left: 0; }
.voucher-popup.pur-style .pur-seg-body { flex-wrap: nowrap; }
/* Ô nhập trong form: bo góc 5px */
.voucher-popup.fullscreen .voucher-field input:not([type="checkbox"]):not([type="radio"]), .voucher-popup.fullscreen .voucher-field textarea, .pf input { border-radius: 5px; }
.voucher-popup.fullscreen .lookup-input-wrap, .voucher-popup.fullscreen .lookup-input-wrap input { border-radius: 5px; }
/* Ô nhập nằm trong bảng chuẩn (data-table) cùng kiểu: viền xanh xám, bo 5px, nền trắng, focus xanh */
table.data-table td input:not([type="checkbox"]):not([type="radio"]), table.data-table td textarea {
  width: 100%; min-height: 32px; padding: 5px 10px; border: 1px solid #cfe4df; border-radius: 5px; background: #fff; font-size: 13px; color: #1e293b;
}
table.data-table td input:not([type="checkbox"]):not([type="radio"]):focus, table.data-table td textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12); }
table.data-table td .lookup-input-wrap { border: 1px solid #cfe4df; border-radius: 5px; background: #fff; }
table.data-table td .lookup-input-wrap input { border: 0; box-shadow: none; min-height: 30px; }
table.data-table td textarea.cel-description { resize: none; height: 32px; }

/* ===== Chỉnh mẫu M2 (lần 3) ===== */
/* Phiếu nhập gọn hơn (giảm chiều cao vùng nhập) */
.pur-card { padding: 14px 20px; }
.pur-fields { gap: 10px 18px; }
.pur-fields .pf-l { margin-bottom: 4px; font-size: 13px; }
.pur-fields .pf input { height: 34px; padding: 4px 12px; }
.pur-fields .lookup-input-wrap input { height: 32px; }
.pur-tabs { margin-bottom: 10px; }
.voucher-popup.pur-style .voucher-popup-body { padding-top: 10px; }
/* Ô nhập trong bảng Hàng tiền/Chi phí: như lưới phiếu chi — viền trong suốt, hiện viền xanh khi bấm vào ô; dòng đang nhập nền xanh đậm nhạt */
.pur-dt-wrap table.data-table td input:not([type="checkbox"]):not([type="radio"]), .pur-dt-wrap table.data-table td textarea {
  border: 1px solid transparent; background: transparent; padding: 4px 6px; border-radius: 4px; min-height: 26px; height: auto; box-shadow: none;
}
.pur-dt-wrap table.data-table td textarea.cel-description { resize: vertical; min-height: 26px; height: auto; line-height: 1.4; }
.pur-dt-wrap table.data-table td input:focus, .pur-dt-wrap table.data-table td textarea:focus { border-color: var(--primary); background: #fff; box-shadow: none; }
.pur-dt-wrap table.data-table td .lookup-input-wrap { border-color: transparent; background: transparent; }
.pur-dt-wrap table.data-table td .lookup-input-wrap input, .pur-dt-wrap table.data-table td .lookup-caret-btn { border: none !important; background: transparent; }
.pur-dt-wrap table.data-table td .lookup-caret-btn { visibility: hidden; }
.pur-dt-wrap table.data-table td .lookup-input-wrap:focus-within .lookup-caret-btn { visibility: visible; }
.pur-dt-wrap table.data-table td .lookup-input-wrap:focus-within { border-color: var(--primary); background: #fff; }
.pur-dt-wrap table.data-table tbody tr:focus-within { background: var(--primary-light); }
/* Nhóm nút của bảng chuẩn nằm trong entry-toolbar-right */
.entry-toolbar-right .pur-dt-right { display: flex; align-items: center; gap: 6px; }

/* ===== Form Mua hàng: không cuộn cả trang — chỉ cuộn trong .dt-scroll của bảng khi nhiều dòng ===== */
.voucher-popup.pur-style .voucher-popup-body { display: flex; flex-direction: column; overflow: hidden; }
.voucher-popup.pur-style .voucher-popup-body > * { flex: 0 0 auto; }
.voucher-popup.pur-style #pur-grid-table, .voucher-popup.pur-style #pur-cost-panel, .voucher-popup.pur-style #pur-refs-panel,
.voucher-popup.pur-style #prr-grid-table, .voucher-popup.pur-style #prd-grid-table,
.voucher-popup.pur-style #srr-grid-table, .voucher-popup.pur-style #sdc-grid-table {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
.voucher-popup.pur-style .pur-dt-wrap { flex: 1 1 auto; height: auto; min-height: 160px; }
.voucher-popup.pur-style .pur-cost-actions { flex: 0 0 auto; }

/* Bảng Hàng tiền/Chi phí gọn: dòng thấp hơn, khoảng đệm giữa ô nhập và ô bảng nhỏ */
.pur-dt-wrap table.data-table td { padding: 1px 3px; height: 28px; line-height: 1.25; }
.pur-dt-wrap table.data-table th { padding: 5px 6px; }
.pur-dt-wrap table.data-table td input:not([type="checkbox"]):not([type="radio"]), .pur-dt-wrap table.data-table td textarea {
  padding: 2px 4px; min-height: 22px; font-size: 13px;
}
.pur-dt-wrap table.data-table td textarea.cel-description { min-height: 22px; height: 22px; padding: 2px 4px; }
.pur-dt-wrap table.data-table td .lookup-input-wrap input { min-height: 22px; height: 22px; padding: 2px 4px; }
.pur-dt-wrap table.data-table td .lookup-caret-btn { padding: 0 4px; }
.pur-dt-wrap table.data-table td .entry-row-delete { padding: 0 4px; line-height: 1; }

/* ===== Chỉnh mẫu M2 (lần 4) ===== */
/* Dòng bảng Hàng tiền/Chi phí bằng độ cao dòng lưới phiếu thu/chi (td 4px 6px, ô nhập cao tối thiểu 26px) */
.pur-dt-wrap table.data-table td { padding: 4px 6px; height: auto; line-height: 1.4; }
.pur-dt-wrap table.data-table th { padding: 6px 8px; }
.pur-dt-wrap table.data-table td input:not([type="checkbox"]):not([type="radio"]), .pur-dt-wrap table.data-table td textarea { padding: 4px 6px; min-height: 26px; }
.pur-dt-wrap table.data-table td textarea.cel-description { min-height: 26px; height: 26px; padding: 4px 6px; }
.pur-dt-wrap table.data-table td .lookup-input-wrap input { min-height: 26px; height: 26px; padding: 4px 6px; }
/* Vùng nhập phiếu nhập/chi/hoá đơn thấp hơn nữa */
.pur-card { padding: 8px 16px 10px; }
.pur-fields { gap: 6px 16px; }
.pur-fields .pf-l { margin-bottom: 2px; font-size: 12.5px; gap: 7px; }
.pur-fields .pf input { height: 30px; padding: 3px 10px; font-size: 13px; }
.pur-fields .lookup-input-wrap input { height: 28px; }
.pur-tabs { margin-bottom: 6px; }
.pur-tabs .pur-tab { padding: 5px 14px; }
.voucher-popup.pur-style .voucher-popup-body { padding-top: 6px; }
.pur-tc-main { padding: 10px 16px; }
.pur-tc-sub .pur-tc-rows { padding: 3px 16px 5px; }
.pur-tc-stock { padding: 4px 16px; }
.pur-total-col { gap: 8px; }
.pur-total-col .trow { padding: 3px 0; }
/* Số ngày được nợ + Hạn thanh toán đứng cạnh nhau ở cột giữa */
.pur-fields .pf-pair { display: flex; gap: 16px; min-width: 0; }
.pur-fields .pf-pair .pf:first-child input { width: 130px; }
.pur-fields .pf-pair .pf:last-child input { width: 170px; }
/* Cột 3 (ngày hạch toán, ngày chứng từ, số phiếu nhập/chứng từ, hoá đơn): ô nhập cùng độ rộng ở cả 3 tab */
.pur-fields .pf-c3 input, .pur-fields .pf-c3 input[type="date"] { width: 170px; max-width: 170px; }

/* Ô diễn giải (textarea) trong bảng: không hiện thanh cuộn */
.pur-dt-wrap table.data-table td textarea, table.entry-table textarea.cel-description { overflow: hidden; scrollbar-width: none; -ms-overflow-style: none; resize: none; }
.pur-dt-wrap table.data-table td textarea::-webkit-scrollbar, table.entry-table textarea.cel-description::-webkit-scrollbar { display: none; }

/* Tiêu đề cột của mọi bảng chuẩn: thu hẹp cột (kéo colresize) thì chữ XUỐNG DÒNG thay vì bị cắt/ẩn */
table.data-table th { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: normal; vertical-align: middle; line-height: 1.3; }
.dt-th-label { display: inline; white-space: normal; }
table.data-table th.dt-group-th { white-space: nowrap; }

/* Dòng đang nhập của bảng Hàng tiền/Chi phí: nền dòng đậm hơn, các ô nhập/lookup trong dòng đó chuyển nền trắng nổi lên (như lưới phiếu thu/chi) */
.pur-dt-wrap table.data-table tbody tr:focus-within td { background: var(--primary-light); }
.pur-dt-wrap table.data-table tbody tr:focus-within td input:not([type="checkbox"]):not([type="radio"]),
.pur-dt-wrap table.data-table tbody tr:focus-within td textarea,
.pur-dt-wrap table.data-table tbody tr:focus-within td .lookup-input-wrap { border-color: var(--border); background: #fff; }
.pur-dt-wrap table.data-table tbody tr:focus-within td .lookup-input-wrap input { background: #fff; }

/* ===== Bộ lịch chọn ngày (common/js/date-picker.js) — theo mẫu Lich.png ===== */
.dp-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 2050; display: flex; align-items: center; justify-content: center; }
.dp-modal { background: #fff; border-radius: 14px; width: 500px; max-width: 94vw; box-shadow: 0 20px 50px rgba(15, 23, 42, .35); overflow: hidden; color: #1e293b; }
.dp-modal.dp-with-time { width: 700px; }
.dp-head { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid #e8edf5; font-size: 17px; font-weight: 650; }
.dp-head > i { color: var(--primary); font-size: 22px; }
.dp-head span { flex: 1; }
.dp-x { border: 0; background: none; font-size: 18px; color: #64748b; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.dp-x:hover { background: #f1f5f9; color: #1e293b; }
.dp-body { display: flex; gap: 0; }
.dp-cal { flex: 1; padding: 14px 20px 10px; min-width: 0; }
.dp-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dp-nav b { font-size: 15.5px; font-weight: 650; }
.dp-nav button { border: 0; background: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; color: #1e293b; font-size: 14px; }
.dp-nav button:hover { background: var(--primary-lighter); color: var(--primary); }
.dp-week, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.dp-week span { font-size: 13px; font-weight: 600; padding: 8px 0; color: #334155; }
.dp-week span.we { color: #94a3b8; }
.dp-day { border: 0; background: none; height: 38px; width: 38px; margin: 2px auto; border-radius: 50%; font-size: 14px; color: #1e293b; cursor: pointer; }
.dp-day:hover { background: var(--primary-lighter); }
.dp-day.other { color: #c2cad8; }
.dp-day.we:not(.sel):not(.other) { color: #64748b; }
.dp-day.today:not(.sel) { box-shadow: inset 0 0 0 1.5px var(--primary); color: var(--primary); }
.dp-day.sel { background: var(--primary); color: #fff; font-weight: 650; }
.dp-time { width: 210px; border-left: 1px solid #e8edf5; padding: 10px 14px; background: #fafbfe; }
.dp-time-head { display: flex; align-items: center; gap: 9px; background: var(--primary-light); color: var(--primary-active); font-weight: 650; padding: 10px 12px; border-radius: 8px; margin-bottom: 10px; }
.dp-spin input { width: 100%; height: 38px; margin-bottom: 8px; border: 1px solid #cfe4df; border-radius: 8px; padding: 0 12px; font-size: 14px; }
.dp-slots { max-height: 190px; overflow-y: auto; }
.dp-slot { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 8px 12px; border-radius: 8px; font-size: 14px; color: #475569; cursor: pointer; text-align: left; }
.dp-slot i { color: #94a3b8; }
.dp-slot:hover { background: var(--primary-lighter); }
.dp-slot.sel { background: var(--primary-light); color: var(--primary-active); font-weight: 600; }
.dp-slot.sel i { color: var(--primary); }
.dp-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px 16px; border-top: 1px solid #e8edf5; }
.dp-preview { display: flex; align-items: center; gap: 10px; background: var(--primary-light); color: var(--primary-active); padding: 9px 14px; border-radius: 8px; font-size: 14px; }
.dp-actions { display: flex; gap: 10px; }
.dp-actions button { height: 38px; padding: 0 22px; border-radius: 6px; font-size: 14px; cursor: pointer; }
.dp-cancel { border: 1px solid #cfe4df; background: #fff; color: #1e293b; }
.dp-cancel:hover { background: #f8fafc; }
.dp-apply { border: 1px solid var(--primary); background: var(--primary); color: #fff; }
.dp-apply:hover { background: var(--primary-hover); }

/* ===== Bộ lịch: popup nhỏ hiện dưới ô nhập + icon lịch riêng ===== */
.dp-backdrop { background: transparent; display: block; }
.dp-modal { position: fixed; width: 296px; border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .28); border: 1px solid #e2e8f0; }
.dp-modal.dp-with-time { width: 440px; }
.dp-head { padding: 9px 14px; font-size: 14px; gap: 9px; }
.dp-head > i { font-size: 16px; }
.dp-x { font-size: 14px; padding: 2px 6px; }
.dp-cal { padding: 8px 12px 6px; }
.dp-nav { margin-bottom: 4px; }
.dp-nav b { font-size: 13.5px; }
.dp-nav button { width: 28px; height: 28px; font-size: 12px; }
.dp-week span { font-size: 12px; padding: 5px 0; }
.dp-day { height: 32px; width: 32px; margin: 1px auto; font-size: 13px; }
.dp-time { width: 150px; padding: 8px 10px; }
.dp-time-head { padding: 7px 9px; font-size: 13px; margin-bottom: 6px; }
.dp-spin input { height: 30px; margin-bottom: 5px; font-size: 13px; }
.dp-slots { max-height: 150px; }
.dp-slot { padding: 5px 8px; font-size: 13px; }
.dp-foot { padding: 8px 14px 10px; }
.dp-preview { padding: 6px 10px; font-size: 12.5px; gap: 7px; }
.dp-actions button { height: 30px; padding: 0 14px; font-size: 13px; }
/* Icon lịch của ô ngày = icon lịch xanh của bộ lịch (thay icon gốc của trình duyệt) */
input[type="date"]::-webkit-calendar-picker-indicator {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%232563eb'><path d='M128 0c17.7 0 32 14.3 32 32v32h128V32c0-17.7 14.3-32 32-32s32 14.3 32 32v32h48c26.5 0 48 21.5 48 48v48H0v-48c0-26.5 21.5-48 48-48h48V32c0-17.7 14.3-32 32-32zM0 192h448v272c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16h-32z'/></svg>") center / 15px no-repeat; width: 20px; height: 20px; cursor: pointer; opacity: 1;
}

/* Bộ chọn tháng (input type="month") — cùng kiểu popup lịch + icon lịch xanh */
.dp-modal.dp-month { width: 260px; }
.dp-mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px 0 6px; }
.dp-mon { border: 0; background: none; height: 34px; border-radius: 8px; font-size: 13px; color: #1e293b; cursor: pointer; }
.dp-mon:hover { background: var(--primary-lighter); }
.dp-mon.today { box-shadow: inset 0 0 0 1.5px var(--primary); color: var(--primary); }
.dp-mon.sel { background: var(--primary); color: #fff; font-weight: 650; }
input[type="month"]::-webkit-calendar-picker-indicator {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%232563eb'><path d='M128 0c17.7 0 32 14.3 32 32v32h128V32c0-17.7 14.3-32 32-32s32 14.3 32 32v32h48c26.5 0 48 21.5 48 48v48H0v-48c0-26.5 21.5-48 48-48h48V32c0-17.7 14.3-32 32-32zM0 192h448v272c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192z'/></svg>") center / 15px no-repeat;
  width: 20px; height: 20px; cursor: pointer; opacity: 1;
}

/* Icon của ô ngày/tháng: mũi tên sổ xuống (giống ô chọn đối tượng) thay icon lịch — bấm vào vẫn mở bộ lịch */
input[type="date"]::-webkit-calendar-picker-indicator, input[type="month"]::-webkit-calendar-picker-indicator {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='%2364748b'><path d='M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z'/></svg>") center / 12px no-repeat;
  width: 20px; height: 20px; cursor: pointer; opacity: 1;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator, input[type="date"]:focus::-webkit-calendar-picker-indicator,
input[type="month"]:hover::-webkit-calendar-picker-indicator, input[type="month"]:focus::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='%232563eb'><path d='M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z'/></svg>");
}

/* Mũi tên trong ô ngày/tháng quay lên/xuống mượt khi mở/đóng bộ lịch (giống mũi tên ô chọn đối tượng) */
input[type="date"]::-webkit-calendar-picker-indicator, input[type="month"]::-webkit-calendar-picker-indicator { transition: transform .2s ease; }
input.dp-open::-webkit-calendar-picker-indicator { transform: rotate(180deg); }

/* Ô chọn (mã nhà cung cấp, điều khoản thanh toán...): viền chỉ nằm trên khối .lookup-input-wrap, input bên trong KHÔNG viền → hết vạch ngăn giữa ô và mũi tên */
.pf .lookup-input-wrap input, .voucher-popup.fullscreen .voucher-field .lookup-input-wrap input {
  border: 0 !important; box-shadow: none !important; background: transparent; border-radius: 0; height: auto; min-height: 0; padding: 4px 10px;
}
.pf .lookup-input-wrap, .voucher-popup.fullscreen .voucher-field .lookup-input-wrap { border: 1px solid #cfe4df; border-radius: 5px; background: #fff; height: 30px; align-items: center; }
.pf .lookup-input-wrap:focus-within, .voucher-popup.fullscreen .voucher-field .lookup-input-wrap:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12); }
.pf .lookup-input-wrap .lookup-caret-btn { border: 0; height: 100%; }

/* Mũi tên của ô ngày/tháng: ẩn cho tới khi bấm vào ô (hoặc đang mở lịch) mới hiện */
input[type="date"]:not(:focus):not(.dp-open)::-webkit-calendar-picker-indicator, input[type="month"]:not(:focus):not(.dp-open)::-webkit-calendar-picker-indicator { opacity: 0; }

/* ===== Mua hàng > Báo cáo: tiêu đề nhóm trong danh sách báo cáo ===== */
.prp-group { padding: 10px 16px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
.prp-table-wrap { min-width: 0; }

/* ===== Bán hàng: form/danh sách dùng lại bố cục mẫu M2 của Mua hàng (.pur-*) — chỉ bổ sung các luật khoá theo id của form Mua hàng ===== */
.pur-fields .sav-days { max-width: 130px; }
.voucher-popup.pur-style #sav-grid-table, .voucher-popup.pur-style #sav-refs-panel {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
.voucher-popup.pur-style #sav-panels { flex: 0 0 auto; }

.voucher-popup.pur-style #ivt-grid-table { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.voucher-popup.pur-style #ivt-panels { flex: 0 0 auto; }
.voucher-popup.pur-style #ivc-grid-table { flex: 1 1 auto; min-height: 200px; display: flex; flex-direction: column; }
.voucher-popup.ivc-style .voucher-popup-body { overflow: auto; }

/* ===== Số dư ban đầu ===== */
.opn-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.opn-title { margin: 0; font-size: 20px; font-weight: 700; }
.opn-back { color: #475569; font-size: 16px; }
.opn-filters { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #475569; }
.opn-status { background: #fff; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
.opn-badge { padding: 2px 10px; border-radius: 12px; background: #eef2f7; color: #475569; font-size: 12px; }
.opn-badge.ok { background: #dcfce7; color: #166534; }
.opn-badge.warn { background: #fef3c7; color: #92400e; }
.opn-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 190px)); gap: 16px; }
.opn-card { border: 1px solid var(--primary); background: #fff; border-radius: 10px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 12px; cursor: pointer; font-weight: 600; font-size: 13px; box-shadow: 0 1px 3px rgba(15,23,42,.08); transition: box-shadow .15s, transform .15s; }
.opn-card:hover { box-shadow: 0 4px 12px rgba(var(--primary-rgb), .25); transform: translateY(-2px); }
.opn-card.disabled { opacity: .5; cursor: not-allowed; }
.opn-card-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.opn-form { display: flex; flex-direction: column; gap: 12px; } /* form Số dư đầu kỳ giờ full-screen (.voucher-popup.fullscreen) — .opn-form-top giới hạn bề rộng các field đơn (TK/Đối tượng/Dư Nợ-Có/tiền tệ), còn bảng chi tiết (#opn-dt-wrap) tự full bề rộng vì nhiều cột */
.opn-form-top { display: flex; flex-direction: column; gap: 12px; max-width: 900px; }
.opn-form-row { display: flex; gap: 12px; }
.opn-form-row > .voucher-field { flex: 1; }
.opn-form .req { color: #dc2626; }

/* ===== Giá thành ===== */
.cst-tabs, .cst-dtabs { display: flex; gap: 20px; border-bottom: 1px solid #e2e8f0; margin-bottom: 12px; }
.cst-tab { text-decoration: none; padding: 8px 2px; cursor: pointer; color: #475569; font-size: 13px; border-bottom: 2px solid transparent; white-space: nowrap; }
.cst-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.cst-dtabs { overflow-x: auto; }
.cst-year { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #475569; margin-right: 8px; }
.cst-form { display: flex; flex-direction: column; gap: 12px; }
.cst-row { display: flex; gap: 12px; }
.cst-row > .voucher-field { flex: 1; }
.cst-form .req { color: #dc2626; }
.cst-objs-head { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
/* .cst-objs giờ chỉ là khung chứa 1 DataTable thật (cstObjectsTable_, costing.js) — DataTable tự phân trang/cuộn riêng nên bỏ max-height/overflow/viền cũ
   (trước đây bọc 1 <table> dựng tay không phân trang, phải tự giới hạn chiều cao + cuộn). */
.cst-objs { margin-top: 4px; }
.cst-sum { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; background: #fff; border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
.cst-sum > div { display: flex; flex-direction: column; font-size: 12px; color: #64748b; }
.cst-sum b { font-size: 15px; color: #0f172a; }
.cst-sum .big b { color: var(--primary); font-size: 17px; }
.cst-sum-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-direction: row !important; }
.cst-d-footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; margin-top: 8px; border-top: 1px solid #e2e8f0; flex-shrink: 0; }
.cst-func { position: relative; }

/* Header có icon (cstModal_ opts.icon/subtitle) — trình tính giá thành (cstWizard_/cstWizardStage_) */
.voucher-popup-header.cst-modal-header-icon { padding-top: 14px; padding-bottom: 14px; align-items: center; }
.cst-modal-icon { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, #004f43, var(--primary) 55%, #2fb89a); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.cst-modal-titles { display: flex; flex-direction: column; gap: 2px; }
.cst-modal-titles h5 { font-size: 18px; }
.cst-modal-subtitle { margin: 0; font-size: 12.5px; color: #64748b; font-weight: 400; }

/* Dòng "Kỳ/Từ ngày/Đến ngày/Lấy dữ liệu" + thẻ "Kỳ hiện tại" (bước 1 trình tính giá thành) */
.cst-period-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr auto 1.5fr; gap: 12px; align-items: end; margin-bottom: 12px; }
.cst-period-row .voucher-field > label { display: flex; align-items: center; gap: 6px; }
.cst-period-row .voucher-field > label i { color: var(--primary); width: 14px; text-align: center; }
.cst-period-now { display: flex; align-items: center; gap: 10px; background: var(--primary-lighter); border: 1px solid #9ed9cb; border-radius: 8px; padding: 8px 14px; height: 38px; }
.cst-period-now i.cst-period-now-ic { color: var(--primary); font-size: 18px; }
.cst-period-now .cst-period-now-text { display: flex; flex-direction: column; gap: 1px; font-size: 11.5px; color: #475569; }
.cst-period-now .cst-period-now-text b { font-size: 12.5px; color: var(--primary-active); font-weight: 650; }
@media (max-width: 960px) { .cst-period-row { grid-template-columns: 1fr 1fr; } }

/* ===== Công cụ dụng cụ ===== */
.tl-form { display: flex; flex-direction: column; gap: 12px; }
.tl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.tl-asof { margin-left: auto; font-size: 12px; color: #475569; display: inline-flex; align-items: center; gap: 6px; }
/* ===== Tổng hợp (tong-hop/gl.js): danh mục báo cáo, báo cáo tài chính, tiện ích ===== */
.gl-catalog { padding: 12px 4px; }
.gl-cat-group { margin-bottom: 18px; }
.gl-cat-group h6 { font-weight: 700; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid #e2e8f0; }
.gl-cat-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 24px; }
@media (max-width: 760px) { .gl-cat-items { grid-template-columns: 1fr; } }
.gl-cat-item { display: flex; text-decoration: none; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; color: #1e293b; cursor: pointer; font-size: 13px; }
.gl-cat-item:hover { background: var(--primary-lighter); color: var(--primary); }
.gl-cat-item i { color: #94a3b8; }
.gl-rv-bar { display: flex; align-items: center; margin-bottom: 10px; }
/* Nút quay lại danh mục báo cáo: chỉ icon (không chữ), dạng nút tròn — chữ "Báo cáo" đặt ở tiêu đề ngay bên cạnh rồi nên không cần lặp lại.
   Mặc định: nền trắng, viền xanh, icon tô gradient xanh (kỹ thuật gradient-text — gradient/clip phải đặt trên ::before
   vì Font Awesome vẽ glyph qua content của ::before, không phải text trực tiếp trong <i>). Hover: nền đổi hẳn sang
   gradient đó, icon trắng. */
.gl-back {
  cursor: pointer; text-decoration: none; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: #fff; border: 1.5px solid var(--primary); font-size: 14px; transition: background .15s, border-color .15s;
}
.gl-back i::before {
  background: linear-gradient(135deg, var(--primary), #45c4a2 55%, #77c4b0);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.gl-back:hover {
  background: linear-gradient(135deg, var(--primary), #45c4a2 55%, #77c4b0); border-color: transparent;
}
.gl-back:hover i::before { -webkit-text-fill-color: #fff; color: #fff; }
/* Nút "Chọn tham số" trên gl-rv-bar (gl.js/mrp.js/tien-mat/tien-gui/mua-hang process.js — mở rpt-params-backdrop bên
   dưới) — neo cuối thanh, cách tiêu đề báo cáo ra 1 khoảng (margin-left:auto, không cần thêm phần tử đệm). */
.gl-rv-params-btn { margin-left: auto; }
/* Popup "Chọn tham số" trượt từ bên phải (khảo sát đúng MISA AMIS) — DÙNG CHUNG cho mrp.js/tien-mat/tien-gui/mua-hang
   process.js (xem rptOpenParamsDrawer_, common/js/report-catalog.js), THAY khối tham số nhúng thẳng trên trang kiểu cũ
   (.rpt-params-card — đã bỏ). Tái dùng nguyên .voucher-popup-header/-body/-footer (đã có style header/footer chuẩn,
   xem khối VOUCHER POPUP) — chỉ cần định nghĩa phần "khung" trượt từ phải, không phải giữa màn hình như .voucher-popup. */
.rpt-params-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 1600;
}
.rpt-params-backdrop.show { display: flex; }
.rpt-params-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 94vw);
  background: #fff; box-shadow: -8px 0 24px rgba(0,0,0,.18);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .22s ease;
}
.rpt-params-backdrop.show .rpt-params-drawer { transform: translateX(0); }
.rpt-params-drawer .voucher-popup-body { padding: 18px; }
/* Ô tham số báo cáo (.tl-grid — Tổng hợp/Tiền mặt/Tiền gửi/Mua hàng/mrp.js) tham khảo đúng style voucher-header-grid
   (VD khối "Phiếu chi" mua-hang/vouchers/purchase-form.html — viền xanh ngọc nhạt #cfe4df, label có icon xanh ngọc
   var(--primary) đứng trước) để đồng bộ giao diện ô nhập giữa trang chứng từ và trang báo cáo. */
.tl-grid .voucher-field input:not([type="checkbox"]):not([type="radio"]),
.tl-grid .voucher-field select,
.tl-grid .voucher-field .lookup-input-wrap { border-color: #cfe4df; }
.tl-grid .voucher-field > label { display: flex; align-items: center; gap: 7px; }
.tl-grid .voucher-field > label i { color: var(--primary); width: 15px; text-align: center; font-size: 13px; flex-shrink: 0; }
/* Báo cáo tài chính (B01/B02/B03-DN, tong-hop/gl.js — xem nhanh #gl-fsr-out và bản đã lập #gl-f-backdrop): scrollbar
   CHỈ trong vùng bảng (.gl-fs-scroll) — table dựng tay (table.gl-fs-table), KHÔNG dùng DataTable/.dt-wrap nên không
   khớp rule ":has(.dt-wrap)" chung ở khối "TRANG BÁO CÁO" phía trên, phải khai riêng từng cấp lồng của 2 chỗ render. */
#gl-fsr-out, #gl-an-out { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#gl-fsr-tabs, #gl-an-tabs { flex-shrink: 0; }
#gl-fsr-body, #gl-an-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#gl-f-backdrop .voucher-popup-body { display: flex; flex-direction: column; overflow: hidden; }
#gl-f-tabs { flex-shrink: 0; }
#gl-f-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.gl-fs-wrap { max-width: 1100px; margin: 0 auto; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.gl-fs-title { text-align: center; margin: 8px 0 12px; font-size: 15px; flex-shrink: 0; }
.gl-fs-audit { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 13px; flex-shrink: 0; }
.gl-fs-audit input#gl-f-opinion { min-width: 260px; }
.gl-fs-wrap > .tl-grid { flex-shrink: 0; }
.gl-fs-scroll { flex: 1; min-height: 0; overflow: auto; }
.gl-fs-scroll table.gl-fs-table thead th { position: sticky; top: 0; z-index: 1; background: #fff; }
.gl-fs-table td, .gl-fs-table th { font-size: 13px; }
.gl-util { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; padding: 12px 4px; }
.gl-util-card { border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px; background: #fff; }
.gl-util-card h6 { font-weight: 700; margin: 0 0 6px; }
/* Thẻ "Sắp xếp thứ tự trong ngày" (common/js/same-day-order.js) — danh sách kéo-thả đổi thứ tự chứng từ cùng ngày. */
.sdo-table tbody tr.sdo-row { cursor: grab; }
.sdo-table tbody tr.sdo-row.dragging { opacity: .4; }
.sdo-table .sdo-handle { color: #94a3b8; text-align: center; }
/* ===== Hệ thống > Người dùng và Phân quyền (he-thong/users/users.js) ===== */
.usr-detail { margin-top: 8px; }
.usr-wrap { display: flex; gap: 16px; align-items: flex-start; margin-top: 10px; }
.usr-sidebar { width: 190px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.usr-side { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 8px; background: #f1f5f9; color: #334155; font-weight: 600; cursor: pointer; }
.usr-side.active { background: var(--primary-light); color: var(--primary-active); }
.usr-side-n { font-size: 11px; background: var(--primary); color: #fff; border-radius: 10px; padding: 0 7px; min-width: 18px; text-align: center; }
.usr-side-n:empty { display: none; }
.usr-main { flex: 1; min-width: 0; }
.usr-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.usr-group { margin-bottom: 8px; border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden; }
.usr-group-head { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #eef1f5; cursor: pointer; }
.usr-group-title { flex: 1; font-weight: 700; }
.usr-tg { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: #475569; }
.usr-mx th, .usr-mx td { text-align: center; }
.usr-mx td:first-child, .usr-mx th:first-child { text-align: left; }
.usr-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px 24px; padding: 12px 16px; }
/* ===== Hệ thống > Quản lý dữ liệu (he-thong/data/data.js) ===== */
.dbm-bar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 10px 4px; }
.dbm-link { color: var(--primary); cursor: pointer; font-size: 13px; margin-right: 6px; }
.dbm-grid { display: flex; flex-wrap: wrap; gap: 16px; padding: 8px 4px; }
.dbm-card { position: relative; width: 300px; display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; cursor: pointer; }
.dbm-card:hover { border-color: #6cc4b0; }
.dbm-card.working { border-color: var(--primary); background: var(--primary-lighter); }
.dbm-ico { width: 38px; height: 38px; border-radius: 8px; background: #eef1f5; display: flex; align-items: center; justify-content: center; color: #64748b; font-size: 16px; }
.dbm-card.working .dbm-ico { background: var(--primary-light); color: var(--primary); }
.dbm-info { flex: 1; min-width: 0; font-size: 12px; color: #475569; }
.dbm-info b { font-size: 14px; color: #0f172a; }
.dbm-on { color: var(--primary); } .dbm-off { color: #94a3b8; } .dbm-sub { color: #94a3b8; }
.dbm-kebab { background: none; border: none; color: #64748b; cursor: pointer; padding: 6px 8px; }
.dbm-plus { width: 72px; justify-content: center; font-size: 22px; color: var(--primary); }
.dbm-menu { position: fixed; z-index: 10000; width: 160px; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; box-shadow: 0 6px 20px rgba(15,23,42,.15); padding: 4px 0; }
.dbm-menu a { display: block; padding: 8px 14px; font-size: 13px; cursor: pointer; color: #1e293b; }
.dbm-menu a:hover { background: #f1f5f9; }
.dbm-form .voucher-field { margin-bottom: 12px; }
.dbm-radios { display: flex; flex-wrap: wrap; gap: 6px 0; }
/* ===== Hệ thống > Nhật ký hệ thống (he-thong/audit/audit.js) ===== */
.aud-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 4px; }

/* ===== Thuế (thue/tax.js) ===== */
/* Khai thuế (txDecl_, khảo sát actasp.misa.vn/app/TA/TAList): danh sách tờ khai bên trái + panel "Tờ khai cần
   lập" làm SIDEBAR bên phải (trước đây xếp thành 1 khối ngang phía TRÊN bảng — không đúng layout MISA). Trang này
   không có .catalog-page-header nên .page-content cuộn cả trang bình thường (không cần bó chiều cao như modal). */
.tx-decl-layout { display: flex; gap: 16px; align-items: flex-start; }
.tx-decl-main { flex: 1; min-width: 0; }
.tx-decl-side { width: 300px; flex-shrink: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 14px; }
.tx-decl-side h6 { font-weight: 700; margin: 0 0 4px; font-size: 13px; }
.tx-need-item { padding: 8px 0; border-bottom: 1px solid #e2e8f0; font-size: 13px; }
.tx-need-item a { color: var(--primary); cursor: pointer; font-size: 13px; }
/* Dòng tổng hợp theo tờ khai (rowGroup, txDecl_) bấm được để thu/mở riêng nhóm đó (txToggleGroup_) — khảo sát
   MISA: chevron xoay khi thu gọn. */
.dt-group-row.dt-group-collapsed td:first-child::before { content: '▸'; display: inline-block; margin-right: 4px; color: #64748b; }
.dt-group-row:not(.dt-group-collapsed) td:first-child::before { content: '▾'; display: inline-block; margin-right: 4px; color: #64748b; }
.tx-reconcile-link { color: var(--primary); cursor: pointer; }
.tx-reconcile-link:hover { text-decoration: underline; }
.tx-form { max-width: 1100px; margin: 0 auto; }
.tx-meta div { margin: 3px 0; font-size: 13px; }
.tx-grp td { font-weight: 700; background: #f1f5f9; }
.tx-code { color: #64748b; font-size: 12px; }
/* [xx] lệch trái trong ô, số/ô nhập lệch phải — đúng layout MISA (trước đây .tx-code nằm ngay trước số, cùng lệch
   phải) — ô nào không dùng flex layout (chỉ 1 nội dung) vẫn không bị ảnh hưởng vì không có .tx-cell.
   .tx-code CỐ ĐỊNH không co (flex-shrink:0), .tx-val chiếm hết phần còn lại — BẮT BUỘC phải là 1 <span> thật (không
   để input/chữ số nằm trực tiếp trong .tx-cell dạng text node trần, vì text node trần tạo "anonymous flex item"
   không set được min-width:0 qua CSS) + input bên trong .tx-val dùng width:100% (không còn width:150px cố định).
   QUAN TRỌNG: .tx-cell đặt trên 1 <div> NẰM TRONG <td> (KHÔNG đặt display:flex trực tiếp lên <td> — đã thử và vẫn
   lệch cột): table-layout:fixed (table.data-table, bắt buộc cho cơ chế bảng đầu/bảng thân tách rời — xem chú
   thích ngay phía trên table.data-table) tính độ rộng cột dựa trên <td>/<th> là 1 BOX BÌNH THƯỜNG theo colgroup;
   đặt display:flex thẳng lên <td> khiến trình duyệt tính lại kích thước ô đó theo NỘI DUNG flex bên trong thay vì
   theo colgroup — bảng thân (có ô flex thật) và bảng đầu (<th> chữ thường, không flex) vì vậy tính ra độ rộng cột
   KHÁC NHAU dù cùng 1 colgroup, lệch toàn bộ cột bên phải. Bọc trong <div> giữ <td> là box bình thường (đúng
   colgroup), div bên trong chỉ lo canh code/giá trị trong phạm vi ô đã có sẵn, không ảnh hưởng tới table layout. */
.tx-cell { display: flex; align-items: center; gap: 6px; }
.tx-cell .tx-code { width: 30px; flex-shrink: 0; }
.tx-cell .tx-val { flex: 1; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; }
.tx-cell .tx-val input { min-width: 0; box-sizing: border-box; }
.tx-warn { color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 4px; padding: 6px 10px; cursor: pointer; }
.tx-warn-link { text-decoration: underline; color: #b45309; font-weight: 600; margin-left: 4px; }
.tx-warn-inline { color: #b45309; font-size: 11px; }
.tx-pick-grp { font-weight: 700; background: #f1f5f9; padding: 6px 10px; margin-top: 6px; }
.tx-pick-item { display: block; padding: 4px 10px; font-size: 13px; }
.tx-pick-disabled { opacity: .5; }
.tx-row-in { width: 90px; max-width: 100%; box-sizing: border-box; }
/* Khối ký — 1 dòng từ trái sang (yêu cầu khác layout .tl-grid tự xuống dòng theo chiều rộng). */
.tx-sign-row { display: flex; gap: 20px; align-items: flex-end; flex-shrink: 0; padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--border); }
.tx-sign-row .voucher-field { flex: 1; min-width: 0; }
/* Tab phụ lục (BKBR/BKMV) bỏ/thêm được ngay trên #tx-e-tabs — dấu ✕ nhỏ cạnh tên tab, nút "+ Phụ lục" cuối dãy
   tab dùng lại đúng .dt-add-menu (datatable.js) để hiện danh sách phụ lục còn thiếu. */
.tx-tab-x { margin-left: 6px; color: var(--text-muted); cursor: pointer; }
.tx-tab-x:hover { color: #dc2626; }
/* #tx-e-tabs/#tx-e-body (modal Thuế, tlModal_ 'full') — SCROLLBAR DỌC CHẠY Ở #tx-e-body (không tách riêng theo
   từng bảng/tbody nữa): #tx-e-body cuộn như 1 vùng duy nhất, mỗi pane chỉ là nội dung thường bên trong, KHÔNG tự
   quản lý cuộn riêng — overflow:auto đặt thẳng trên #tx-e-body. Riêng BKBR/BKMV (DataTable thật, có toolbar/phân
   trang riêng) vẫn cần pane của nó bị giới hạn chiều cao để DataTable tự cuộn nội bộ đúng kiểu — xem rule
   #tx-pane-bkbr/#tx-pane-bkmv riêng bên dưới. overflow:auto của #tx-e-body phải set bằng JS (tax.js, txEditor_)
   đè lên style INLINE overflow:auto mà tlModal_ đặt sẵn trên .voucher-popup-body (CSS thường không thắng được). */
.voucher-popup-body:has(> #tx-e-tabs) { display: flex; flex-direction: column; }
.voucher-popup-body:has(> #tx-e-tabs) > #tx-e-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
#tx-pane-bkbr, #tx-pane-bkmv, #tx-pane-nq204, #tx-pane-bkgt { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#tx-dt-bkbr, #tx-dt-bkmv { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
/* #tx-pane-main của 01/TTĐB/01/TAIN (drawTtdb_/drawTain_, tax.js) — bảng hàng hóa/tài nguyên là DataTable thật
   (nhiều dòng, cần cuộn riêng + full màn hình), khác với #tx-pane-main thường (cuộn chung theo #tx-e-body) của
   01/GTGT/03/TNDN/05/KK-TNCN — thêm class JS khi dựng lần đầu, không đổi hành vi #tx-pane-main cho các form khác. */
.tx-pane-fill { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.tx-pane-fill .tx-form { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 0 2px; }
.tx-pane-fill .tx-form > h5, .tx-pane-fill .tx-form > .tx-meta, .tx-pane-fill .tx-form > .tx-sign-row { flex: 0 0 auto; }
/* Phụ lục NQ204 (giảm thuế GTGT) — 2 bảng DataTable thật (mục I mua vào/mục II bán ra) CHIA ĐÔI chiều cao còn
   lại của pane, mỗi bảng tự cuộn riêng (giống BKBR/BKMV) — xem buildNq204Table_/drawNq204_, tax.js. */
.tx-nq-split { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }

/* ===== Trợ lý AI (common/js/ai-assistant.js) — nút nổi + khung chat, hiển thị MỌI trang (#ai-assistant-root
   nằm ngoài #page-content, trong #main-layout, xem index.html) ===== */
.ai-fab {
  position: fixed; right: 24px; bottom: 24px; width: 52px; height: 52px; border-radius: 50%;
  background: var(--primary); color: #fff; border: none; box-shadow: 0 6px 16px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; z-index: 1900;
}
.ai-fab:hover { background: #027a68; }
.ai-panel {
  position: fixed; right: 24px; bottom: 90px; width: 360px; height: 480px; max-height: calc(100vh - 120px);
  background: #fff; border-radius: 12px; box-shadow: 0 10px 32px rgba(0,0,0,.25); z-index: 1900;
  display: none; flex-direction: column; overflow: hidden;
}
.ai-panel.show { display: flex; }
.ai-panel-header {
  flex: 0 0 auto; background: var(--primary); color: #fff; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; font-weight: 600;
}
.ai-panel-header button { background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; opacity: .85; }
.ai-panel-header button:hover { opacity: 1; }
.ai-panel-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ai-msg { max-width: 85%; padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
.ai-msg-assistant { align-self: flex-start; background: var(--bg-light, #f1f5f9); color: var(--text-main, #1e293b); }
.ai-msg-user { align-self: flex-end; background: var(--primary); color: #fff; }
.ai-msg-typing { font-style: italic; opacity: .7; }
.ai-panel-footer { flex: 0 0 auto; border-top: 1px solid var(--border); padding: 8px; display: flex; gap: 8px; }
.ai-panel-footer textarea {
  flex: 1; resize: none; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  font-size: 13px; font-family: inherit; max-height: 80px;
}
.ai-panel-footer textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.ai-panel-footer button {
  flex: 0 0 auto; width: 36px; border: none; border-radius: 8px; background: var(--primary); color: #fff; cursor: pointer;
}
.ai-panel-footer button:hover { background: #027a68; }
.ai-panel-footer button:disabled { opacity: .6; cursor: default; }
.tx-nq-section { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tx-nq-section-head { flex: 0 0 auto; padding: 4px 0 6px; }
.tx-nq-dt-host { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
/* ===== Popup thông báo (common/js/popup.js): Thành công | Lỗi | Xác nhận thực hiện ===== */
.ntf-backdrop { position: fixed; inset: 0; z-index: 30000; display: flex; align-items: center; justify-content: center; background: rgba(51, 65, 85, .55); backdrop-filter: blur(2px); animation: ntf-fade .16s ease-out; }
.ntf-backdrop.ntf-out { opacity: 0; transition: opacity .14s ease-in; }
.ntf-card { position: relative; background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(15, 23, 42, .35); animation: ntf-pop .18s ease-out; max-width: calc(100vw - 32px); font-family: inherit; }
.ntf-success, .ntf-error { width: 420px; padding: 34px 32px 30px; text-align: center; }
.ntf-confirm-card { width: 640px; padding: 30px 32px 26px; display: flex; gap: 24px; align-items: stretch; }
.ntf-x { position: absolute; top: 14px; right: 16px; background: none; border: none; color: #64748b; cursor: pointer; padding: 2px; line-height: 0; }
.ntf-x:hover { color: #0f172a; }
.ntf-icon { display: flex; justify-content: center; margin-bottom: 12px; }
.ntf-title { margin: 0 0 8px; font-size: 24px; font-weight: 800; letter-spacing: -.2px; }
.ntf-ok { color: #15803d; } .ntf-err { color: #dc2626; } .ntf-confirm { color: #0f2a5c; font-size: 22px; }
.ntf-msg { margin: 0 0 4px; font-size: 15px; line-height: 1.55; color: #334155; word-break: break-word; }
.ntf-msg-l { color: #1e293b; }
.ntf-sub { margin: 6px 0 0; font-size: 14px; color: #64748b; }
.ntf-actions { display: flex; gap: 14px; justify-content: center; margin-top: 22px; }
.ntf-actions-r { justify-content: flex-end; margin-top: 26px; }
.ntf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 130px; height: 42px; padding: 0 22px; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; border: 1.5px solid transparent; }
.ntf-btn-red { background: #dc3545; color: #fff; } .ntf-btn-red:hover { background: #c22a39; }
.ntf-btn-amber { background: #f59e0b; color: #fff; } .ntf-btn-amber:hover { background: #d98a05; }
.ntf-btn-ghost { background: #fff; color: #475569; border-color: #cbd5e1; } .ntf-btn-ghost:hover { background: #f1f5f9; }
.ntf-btn:focus-visible { outline: 3px solid rgba(var(--primary-rgb), .35); outline-offset: 2px; }
.ntf-side { display: flex; align-items: center; padding-right: 24px; border-right: 1px solid #e2e8f0; }
.ntf-side .ntf-icon { margin: 0; }
.ntf-body { flex: 1; min-width: 0; text-align: left; padding-top: 2px; }
@keyframes ntf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ntf-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .ntf-confirm-card { flex-direction: column; width: auto; } .ntf-side { border-right: none; padding-right: 0; } }
/* Thành công: thẻ nhỏ giữa phía trên, không chặn thao tác */
.ntf-toast { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 30000; display: flex; align-items: center; gap: 10px; max-width: min(520px, calc(100vw - 32px)); padding: 9px 12px 9px 12px; background: #fff; border: 1px solid #bbf7d0; border-left: 4px solid #16a34a; border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, .18); font-size: 13.5px; color: #1e293b; animation: ntf-toast-in .2s ease-out; }
.ntf-toast.ntf-toast-out { opacity: 0; transform: translate(-50%, -8px); transition: opacity .18s ease-in, transform .18s ease-in; }
.ntf-toast-ico { display: inline-flex; flex-shrink: 0; }
.ntf-toast-txt { min-width: 0; word-break: break-word; line-height: 1.4; }
.ntf-toast-txt b { color: #15803d; margin-right: 2px; }
.ntf-toast-x { background: none; border: none; color: #94a3b8; cursor: pointer; padding: 4px; line-height: 0; border-radius: 4px; flex-shrink: 0; }
.ntf-toast-x:hover { color: #0f172a; background: #f1f5f9; }
@keyframes ntf-toast-in { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Hộp thoại Tính giá xuất kho */
.rc-dialog .rc-row { display: flex; align-items: center; gap: 22px; margin: 8px 0 14px; flex-wrap: wrap; }
.rc-dialog .rc-time { align-items: flex-end; gap: 14px; flex-wrap: nowrap; }
.rc-dialog .rc-time .voucher-field { margin: 0; }
.rc-info { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; font-size: 13px; color: #334155; }
.rc-info > i { color: var(--primary); font-size: 22px; margin-top: 2px; }
.rc-info ul { margin: 0; padding-left: 18px; } .rc-info li { margin-bottom: 8px; }
.rc-info a { color: var(--primary); }

/* Danh mục đang được sử dụng (không xoá được) */
.ntf-usage-backdrop { z-index: 1550; }
.ntf-usage { width: 920px; max-width: calc(100vw - 32px); padding: 26px 28px 22px; }
.ntf-usage-head { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; padding-right: 26px; }
.ntf-usage-head .ntf-icon svg { width: 52px; height: 52px; }
.ntf-usage-scroll { max-height: 46vh; overflow: auto; border: 1px solid #e2e8f0; border-radius: 8px; }
.ntf-usage-scroll .data-table { margin: 0; }
.ntf-usage-others { margin: 4px 0 0; padding-left: 20px; font-size: 13px; color: #334155; }
.ntf-doc { cursor: pointer; }

/* ===== Trình tính giá thành 4 bước (gia-thanh/costing-wizard.js) ===== */
.cstw-steps { display: flex; align-items: center; gap: 0; margin: 4px 0 16px; }
.cstw-step { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 190px; color: #94a3b8; font-size: 12px; }
.cstw-step span { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #cbd5e1; display: flex; align-items: center; justify-content: center; font-weight: 600; background: #fff; }
.cstw-step.active { color: var(--primary); } .cstw-step.active span { border-color: var(--primary); color: var(--primary); }
.cstw-step.done { color: var(--primary); } .cstw-step.done span { background: var(--primary); border-color: var(--primary); color: #fff; }
.cstw-line { flex: 1; height: 2px; background: #cbd5e1; margin-top: -22px; }
.cstw-h { margin: 12px 0 8px; font-size: 14px; font-weight: 600; }
.cstw-bar { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.cstw-bar .spacer { flex: 1; }
.cstw-sel td { background: var(--primary-lighter); }
#cstw-body table.data-table input.cel-amount-input { width: 100%; text-align: right; }
/* Trình tính giá thành Phân bước, bước "Tính giá thành cho từng công đoạn" (khảo sát ảnh MISA) — mỗi công đoạn 1 khối, công đoạn đang tính màu cam, đã xong có dấu tick, chưa tới lượt màu xám mờ. */
#cstws-body table.data-table input.cel-amount-input { width: 100%; text-align: right; }
.cstws-stage { border-radius: 6px; margin-bottom: 8px; overflow: hidden; border: 1px solid #e2e8f0; }
.cstws-stage-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.cstws-stage-active .cstws-stage-head { background: #fef3e2; }
.cstws-stage-active { border-color: #fbbf6d; }
.cstws-stage-done .cstws-stage-head { background: #f8fafc; }
.cstws-stage-pending .cstws-stage-head { background: #f1f5f9; color: #94a3b8; }
.cstws-stage-num { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; flex-shrink: 0; background: #cbd5e1; color: #fff; }
.cstws-stage-active .cstws-stage-num { background: #f97316; }
.cstws-stage-done .cstws-stage-num { background: #16a34a; }
.cstws-stage-active .cstws-stage-head b, .cstws-stage-done .cstws-stage-head b { color: #0f172a; }
.cstws-stage-active,.cstws-stage-done { padding-bottom: 4px; }
.cstws-stage-active > *:not(.cstws-stage-head), .cstws-stage-done > *:not(.cstws-stage-head) { padding-left: 14px; padding-right: 14px; }

/* Kho > Lắp ráp, tháo dỡ (assembly-form.html): 2 lưới song song trái/phải, mỗi lưới có tiêu đề + nút Thêm dòng/Xoá hết dòng riêng, giống MISA thật. */
.asm-dual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; align-items: start; }
.asm-panel { border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.asm-panel-title { font-weight: 650; font-size: 13px; }
.asm-row-del { border: none; background: none; color: var(--danger, #dc2626); cursor: pointer; padding: 4px 6px; }
.asm-row-del:hover { background: #fef2f2; border-radius: 4px; }
.asm-ratio-toggle { grid-column: 1 / span 2; }
@media (max-width: 900px) { .asm-dual-grid { grid-template-columns: 1fr; } }
.pur-qv-total td { font-weight: 650; border-top: 1px solid var(--border); }
/* Đơn giá/Thành tiền tự tính (giá vốn xuất kho / giá thành) — để trống, khoá không cho sửa, chỉ hiện số thật sau khi Cất và tính giá xong. */
.asm-locked-cell { display: block; color: var(--text-muted); background: #f1f5f9; border-radius: 4px; padding: 4px 6px; cursor: not-allowed; }
.asm-locked-cell:empty::before { content: '—'; color: #cbd5e1; }
/* Header Lệnh lắp ráp/tháo dỡ: Diễn giải (textarea) cao gộp = Ngày chứng từ + Số chứng từ xếp chồng cột 3 (Số tự trôi xuống dưới Ngày nhờ CSS Grid
   tự xếp ô trống — không cần đặt grid-row riêng cho 2 ô đó), chỉ áp riêng form này (#asm-f-backdrop), không đụng .pf-wide dùng chung nơi khác. */
#asm-f-backdrop .pur-fields .pf-wide { grid-row: 1 / span 2; display: flex; flex-direction: column; }
#asm-f-backdrop .pur-fields .pf-wide textarea {
  flex: 1; min-height: 0; resize: none; width: 100%; padding: 3px 10px; border: 1px solid #cfe4df; border-radius: 10px; background: #fff; font-size: 13px; color: #1e293b;
}
#asm-f-backdrop .pur-fields .pf-wide textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12); }
/* Số chứng từ rộng bằng Ngày chứng từ — cùng cột lưới nhưng .pf input[type="date"] có max-width riêng (190px), Số chứng từ (input thường) thì không */
#asm-f-backdrop [data-asm="orderNumber"] { max-width: 190px; }
/* Badge trạng thái cạnh tiêu đề khi Xem lệnh đã Cất (đã lập phiếu xuất/nhập) */
.asm-status-badge { font-size: 12px; font-weight: 650; padding: 3px 10px; border-radius: 999px; background: var(--primary-lighter); color: var(--primary-active); white-space: nowrap; }
.asm-status-badge.completed { background: #ecfdf5; color: #047857; }
/* Nút Lập phiếu nhập bị khoá khi chưa lập phiếu xuất (bắt buộc lập phiếu xuất trước) */
#asm-f-receipt-btn:disabled { opacity: .55; cursor: not-allowed; }
textarea {border-radius: 5px; border: 1px solid #cfe4df;}
.einv-hint { font-size: 12px; color: #64748b; margin-top: 8px; }