:root {
  --bg: #EDF1EF;
  --surface: #FFFFFF;
  --ink: #17262B;
  --ink-soft: #55686D;
  --ink-faint: #8A9A9C;
  --navy: #123245;
  --navy-2: #1C4258;
  --navy-3: #2A5A72;
  --accent: #DE7B37;
  --accent-soft: #F7E2CE;
  --accent-ink: #8A3F14;
  --border: #DAE3E0;
  --border-soft: #E9EFEC;
  --green: #2E7D53;
  --green-soft: #E1F0E5;
  --amber: #B4791C;
  --amber-soft: #FBEBD2;
  --red: #B8452B;
  --red-soft: #F7E2DB;
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
  --shadow-card: 0 1px 2px rgba(18, 50, 69, 0.06), 0 6px 20px -12px rgba(18, 50, 69, 0.25);
  --font-ui: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  height: 100%;
}

/* Luôn chừa sẵn chỗ cho thanh cuộn dọc, kể cả khi body đang overflow:hidden
   (lúc mở popup). Nếu không có dòng này, mỗi lần mở/đóng popup thanh cuộn
   biến mất/xuất hiện làm toàn bộ trang co giãn bề ngang đúng lúc animation
   của popup đang chạy → giật/lag. Đây là nguyên nhân chính. */
html { scrollbar-gutter: stable; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > main.page { flex: 1 0 auto; }

a { color: inherit; }

button, input { font-family: inherit; font-size: inherit; }

/* ─── Topbar ─────────────────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, var(--navy-2) 0%, var(--navy) 100%);
  box-shadow: 0 1px 0 rgba(222, 123, 55, 0.35), 0 8px 18px -12px rgba(18, 50, 69, 0.65);
  color: #EAF1F0;
  padding: 14px 28px;
  position: relative;
}

.topbar__brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar__brandlink {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  border-radius: 10px;
}
/* position:relative (KHÔNG đặt z-index) để brand/nav luôn nằm TRÊN bản đồ nền
   mà không tạo stacking context mới — menu dropdown (z-index:60) giữ nguyên. */
.topbar__brand, .topbar__nav { position: relative; }

/* Logo: vòng sáng xanh → cam quay chậm bằng transform (rẻ hơn nhiều so với
   animate filter: drop-shadow). Chỉ quay khi rê chuột vào; lúc thường đứng yên. */
.topbar__logo-wrap {
  position: relative;
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  flex: none;
}
.topbar__logo-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #7FD08A, var(--accent), #7FD08A);
  opacity: 0.85;
  transition: opacity 0.25s ease;
}
.topbar__logo {
  position: relative;
  width: 30px;
  height: 30px;
  padding: 3px;
  object-fit: contain;
  border-radius: 50%;
  background: var(--navy);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.topbar__brandlink:hover .topbar__logo-wrap::before {
  opacity: 1;
  animation: logoQuay 2.4s linear infinite;
}
.topbar__brandlink:hover .topbar__logo { transform: scale(1.08) rotate(-6deg); }

@keyframes logoQuay { to { transform: rotate(360deg); } }

.topbar__mark {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.14em;
  font-size: 13px;
  color: var(--accent);
  position: relative;
  background: linear-gradient(
    100deg,
    var(--accent) 40%,
    #FFD9AE 50%,
    var(--accent) 60%
  );
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: markShine 4.5s ease-in-out infinite;
  transition: filter 0.25s ease, letter-spacing 0.25s ease;
}

.topbar__mark:hover {
  letter-spacing: 0.2em;
  filter: drop-shadow(0 0 6px rgba(222, 123, 55, 0.7));
}

@keyframes markShine {
  0%   { background-position: 200% 0; }
  60%  { background-position: -20% 0; }
  100% { background-position: -20% 0; }
}

.topbar__divider {
  width: 1px;
  height: 16px;
  background: rgba(234, 241, 240, 0.25);
}

.topbar__agency {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 260px;
  font-weight: 500;
  font-size: 14px;
  color: #CBDBD9;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.topbar__agency-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.topbar__agency:hover { color: #fff; border-color: var(--accent); }

.topbar__nav { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* Nút ghost-pill trên topbar ("Báo cáo", "Quyết toán") — cùng ngôn ngữ với nút nhà cũ */
.topbar__navbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 10px 0 12px;
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(234, 241, 240, 0.16);
  color: #CBDBD9;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.topbar__navbtn::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.topbar__navbtn:hover,
.topbar__navbtn[aria-expanded="true"] {
  border-color: rgba(222, 123, 55, 0.7);
  color: #fff;
  background: linear-gradient(160deg, rgba(222, 123, 55, 0.24), rgba(222, 123, 55, 0.06));
}
.topbar__navbtn:hover::after,
.topbar__navbtn[aria-expanded="true"]::after { transform: scaleX(1); }
.topbar__navbtn-ico { width: 15px; height: 15px; }
.topbar__navbtn .topbar__caret { margin-left: 0; }
.topbar__dropdown.is-open > .topbar__navbtn .topbar__caret,
.topbar__navbtn[aria-expanded="true"] .topbar__caret { transform: rotate(180deg); }

/* Chuông nhắc nhở + số đỏ */
.topbar__bell {
  position: relative;
  padding: 0;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #CBDBD9;
  text-decoration: none;
  border: 1px solid rgba(234, 241, 240, 0.16);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.topbar__bell .ico-solo { width: 17px; height: 17px; }
.topbar__bell:hover { border-color: var(--accent); color: var(--accent-soft); transform: translateY(-1px); }
.topbar__bell.co-nhac-nho { color: #FFD9AE; border-color: rgba(222, 123, 55, 0.6); }
.topbar__bell.co-nhac-nho .ico-solo { transform-origin: 50% 0; animation: chuongLac 4s ease-in-out infinite; }
.topbar__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #D9432B;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--navy);
}
@keyframes chuongLac {
  0%, 88%, 100% { transform: rotate(0); }
  90% { transform: rotate(14deg); }
  93% { transform: rotate(-12deg); }
  96% { transform: rotate(8deg); }
}

/* Avatar + tên người dùng: cắt chữ dài, avatar chữ cái đầu khi chưa có ảnh */
.topbar__ava { position: relative; display: inline-flex; flex: none; }
.topbar__ava::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7FD08A;
  box-shadow: 0 0 0 2px var(--navy);
}
.topbar__uname { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__avatar--chu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--navy-3), var(--navy-2));
  color: #EAF1F0;
  font-size: 12px;
  font-weight: 700;
}

/* Focus rõ ràng khi dùng bàn phím */
.topbar__brandlink:focus-visible,
.topbar__agency:focus-visible,
.topbar__navbtn:focus-visible,
.topbar__bell:focus-visible,
.topbar__user--btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.topbar__dropdown-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--border-soft);
}

/* ─── Topbar: bản đồ chuyến hàng HCM ⇄ LAX (nền trang trí ở giữa) ─────────
   Chỉ hiện từ 1100px trở lên để không đè lên tên đại lý / menu tài khoản.
   Hoạt ảnh: static/js/topbar_logistics.js (tự tắt khi "giảm chuyển động"). */
/* Khung bản đồ là phần tử flex nằm giữa logo và menu tài khoản: tự giãn lấp đầy
   khoảng trống (tối đa 780px, căn giữa) → bố cục 3 cụm cân đối. Margin âm dọc để
   bản đồ phủ kín chiều cao topbar mà không làm topbar cao thêm. */
.topbar__map-wrap {
  display: none;
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 780px;
  align-self: stretch;
  margin: -14px auto;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.topbar__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
@media (min-width: 1100px) { .topbar__map-wrap { display: block; } }

.topbar__map .tbm-waves path { fill: none; stroke: rgba(143, 168, 200, 0.28); stroke-width: 1; stroke-linecap: round; }
.topbar__map .tbm-stars circle { fill: rgba(234, 241, 240, 0.35); }
.topbar__map .tbm-pole { stroke: #8FA8C8; stroke-width: 1; }
.topbar__map .tbm-pill { fill: rgba(18, 50, 69, 0.92); stroke-width: 1; }
.topbar__map .tbm-pill--hcm { stroke: rgba(240, 169, 60, 0.7); }
.topbar__map .tbm-pill--lax { stroke: rgba(127, 208, 138, 0.7); }
.topbar__map .tbm-dot   { fill: rgba(143, 168, 200, 0.34); }
.topbar__map .tbm-land  { fill: url(#tbm-dots); stroke: none; }
.topbar__map .tbm-grid line { stroke: rgba(234, 241, 240, 0.07); stroke-width: 0.5; }
.topbar__map .tbm-route { fill: none; stroke: rgba(143, 168, 200, 0.3); stroke-width: 1; }
.topbar__map .tbm-route--sea { stroke-dasharray: 4 5; }
.topbar__map .tbm-route--air { stroke-dasharray: 2 4; }
.topbar__map .tbm-trail {
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  opacity: 0;
}
.topbar__map .tbm-trail--sea { stroke: #F0A93C; }
.topbar__map .tbm-trail--air { stroke: #E8EEF7; stroke-width: 1.6; }
.topbar__map .tbm-port { fill: var(--navy); stroke-width: 1.5; }
.topbar__map .tbm-port--hcm { stroke: #F0A93C; }
.topbar__map .tbm-port--lax { stroke: #7FD08A; }
.topbar__map .tbm-label {
  fill: #D5E1F0;
  font-family: var(--font-ui);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 1px;
}

.topbar__map .tbm-caption {
  fill: rgba(213, 225, 240, 0.55);
  font-family: var(--font-ui);
  font-size: 6.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  transition: opacity 0.4s ease;
}

.topbar__user { font-size: 13.5px; color: #A9C0BE; }

.topbar__link {
  text-decoration: none;
  font-size: 13.5px;
  color: #D9E7E5;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.15s ease;
}

.topbar__link:hover { border-color: var(--accent); }

.topbar__link--exit { color: #E9AF95; }

.topbar__link--btn {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0 0 2px;
  margin: 0;
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}

/* ─── Dropdown menu (nút "Xuất báo cáo" → menu chọn loại báo cáo) ──────── */
.topbar__dropdown { position: relative; }

.topbar__dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  min-width: 236px;
  background: var(--surface);
  border: 1px solid rgba(18, 50, 69, 0.06);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(18, 50, 69, 0.18), 0 2px 8px rgba(18, 50, 69, 0.08);
  padding: 8px;
  z-index: 60;
  animation: menuXuatHien 0.14s ease;
}

@keyframes menuXuatHien {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mucMenuVao {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Mũi tên nhỏ chỉ lên nút mở menu */
.topbar__dropdown-menu::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 22px;
  width: 11px;
  height: 11px;
  background: var(--surface);
  border-left: 1px solid rgba(18, 50, 69, 0.06);
  border-top: 1px solid rgba(18, 50, 69, 0.06);
  transform: rotate(45deg);
}
.topbar__dropdown-menu--right::before { left: auto; right: 22px; }
.topbar__dropdown-menu > .topbar__dropdown-item { animation: mucMenuVao 0.18s ease backwards; }
.topbar__dropdown-menu > .topbar__dropdown-item:nth-child(2) { animation-delay: 0.02s; }
.topbar__dropdown-menu > .topbar__dropdown-item:nth-child(3) { animation-delay: 0.04s; }
.topbar__dropdown-menu > .topbar__dropdown-item:nth-child(4) { animation-delay: 0.06s; }
.topbar__dropdown-menu > .topbar__dropdown-item:nth-child(5) { animation-delay: 0.08s; }
.topbar__dropdown-item .ico-solo { transition: color 0.12s ease, transform 0.15s ease; }
.topbar__dropdown-item:hover .ico-solo { color: var(--accent); transform: scale(1.1); }

.topbar__dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 9px 10px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.topbar__dropdown-item:hover { background: var(--border-soft); text-decoration: none; }
.topbar__dropdown-item > span:first-child {
  flex: none;
  width: 18px;
  font-size: 14px;
  text-align: center;
  line-height: 1;
}

/* ─── Dropdown "tên tài khoản" gộp toàn bộ menu điều hướng ────────────── */
.topbar__user--btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 6px 4px 6px 6px;
  margin: 0;
  border-radius: 20px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: #E7F0EF;
  cursor: pointer;
  transition: background 0.12s ease;
}
.topbar__user--btn:hover,
.topbar__user--btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.09); }
.topbar__user--btn .topbar__avatar { margin-right: 0; }

.topbar__caret {
  margin-left: 2px;
  font-size: 10px;
  color: #A9C0BE;
  transition: transform 0.15s ease;
}
.topbar__dropdown.is-open > .topbar__user--btn .topbar__caret,
.topbar__user--btn[aria-expanded="true"] .topbar__caret { transform: rotate(180deg); }

.topbar__dropdown-menu--right { left: auto; right: 0; }

.topbar__dropdown-sep {
  height: 1px;
  margin: 6px 6px;
  background: var(--border-soft);
}

.topbar__dropdown-item--exit { color: #C0492E; }
.topbar__dropdown-item--exit:hover { background: rgba(192, 73, 46, 0.09); }

/* ─── Menu chuột phải (Sửa / Xoá đại lý) — định vị theo toạ độ chuột ──── */
.ctx-menu {
  position: fixed;
  min-width: 170px;
  background: var(--surface);
  border-radius: var(--radius-s);
  box-shadow: 0 10px 28px rgba(18, 50, 69, 0.28);
  padding: 6px;
  z-index: 200;
}

/* ─── Nút "Về đầu trang" (nổi góc dưới phải, chỉ hiện khi đã cuộn xuống) ── */

.btn-ve-dau-trang {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--navy);
  color: #EAF1F0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(18, 50, 69, 0.35);
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, background .15s ease;
}
.btn-ve-dau-trang.is-hien {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.btn-ve-dau-trang:hover { background: var(--navy-3); }
.btn-ve-dau-trang svg { width: 20px; height: 20px; }

@media (max-width: 640px) {
  .btn-ve-dau-trang { right: 14px; bottom: 14px; width: 40px; height: 40px; }
}

/* ─── Footer trang (đồng bộ tông màu với topbar) ────────────────────────── */

.app-footer {
  background: var(--navy);
  color: #A9C0BE;
  margin-top: 20px;
  flex-shrink: 0;
}

/* Gọn: 1 hàng duy nhất (thương hiệu bên trái, liên hệ + bản quyền bên phải),
   tự xuống dòng khi màn hình hẹp. */
.app-footer__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px 20px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(234, 241, 240, 0.12);
  font-size: 12px;
  line-height: 1.5;
}

.app-footer__brand { display: flex; align-items: baseline; gap: 10px; }

.app-footer__mark {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.14em;
  font-size: 12px;
  color: var(--accent);
}

.app-footer__tagline { color: #8CA6A3; }

.app-footer__contact {
  color: #CBDBD9;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.app-footer__link {
  color: #CBDBD9;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.app-footer__link:hover { color: #fff; border-color: var(--accent); }

.app-footer__sep { color: rgba(234, 241, 240, 0.25); }

.app-footer__copy { color: #6F8B88; }

@media (max-width: 720px) {
  .app-footer__inner { justify-content: center; text-align: center; padding: 10px 16px; }
  .app-footer__brand { flex-direction: column; gap: 0; }
  .app-footer__contact { justify-content: center; }
}

/* ─── Flash — nâng lên thành "toast" tự ẩn, có icon + nút đóng ─────────── */
/* Trước đây flash chỉ là 1 thanh tĩnh nằm nguyên trên đầu trang cho tới
   khi chuyển trang khác; giờ tự trượt vào, tự mờ dần biến mất sau vài
   giây (trừ khi người dùng đưa chuột vào), và bấm ✕ để tắt ngay.
   Xem phần JS tương ứng cuối main.js (khoiTaoFlash). */

.flash-stack {
  position: fixed;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  width: 100%;
  max-width: 480px;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 14px;
  border-radius: var(--radius-s);
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 10px 26px rgba(18, 50, 69, 0.16), 0 2px 8px rgba(18, 50, 69, 0.08);
  pointer-events: auto;
  animation: flashTruotVao 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.flash.is-an { opacity: 0; transform: translateY(-8px); }

@keyframes flashTruotVao {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.flash::before {
  flex-shrink: 0;
  font-weight: 700;
  line-height: 1.45;
}

.flash--loi { background: var(--red-soft); color: var(--accent-ink); border: 1px solid #E9C3B4; }
.flash--loi::before { content: "⚠️"; }

.flash--ok, .flash--thanh_cong { background: var(--green-soft); color: var(--green); border: 1px solid #BFE0CC; }
.flash--ok::before, .flash--thanh_cong::before { content: "✅"; }

.flash__text { flex: 1; }

.flash__dong {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 2px;
  opacity: 0.55;
  color: inherit;
  transition: opacity 0.12s ease;
}
.flash__dong:hover { opacity: 1; }

@media (max-width: 560px) {
  .flash-stack { top: 64px; }
}

/* ─── Page shell ─────────────────────────────────────────────────────── */

.page { max-width: var(--content-max, 1180px); margin: 0 auto; padding: 32px 28px 64px; }

.page-lo-hang .page { padding-top: 20px; }
/* Trang Lô hàng nhiều cột: nút "↔" trên thanh công cụ bật/tắt chế độ RỘNG (class
   bang-rong trên <body>, nhớ theo từng máy trong localStorage). Tắt = theo độ rộng
   theme; bật = tới 1600px nhưng không bao giờ vượt chiều rộng cửa sổ. */
.page-lo-hang.bang-rong .page { max-width: max(var(--content-max, 1180px), min(1600px, 100vw)); }
.col-toggle__sep { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border-soft); }
.col-toggle__hint { display: block; font-size: 11.5px; color: var(--ink-faint); margin-top: 1px; }

.section-head { margin-bottom: 26px; }

.section-head--row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.section-head--row .btn { flex-shrink: 0; white-space: nowrap; }

.section-head__title {
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.section-head__sub { margin: 0; color: var(--ink-soft); font-size: 14.5px; }

/* ─── Buttons / fields ───────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-s);
  padding: 11px 18px;
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 0.1s ease, background 0.15s ease;
}
.btn[hidden] { display: none; }

.btn--primary {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 0 0 rgba(18, 50, 69, 0);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn--primary:hover {
  background: var(--navy-2);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(18, 50, 69, 0.22);
}
.btn--primary:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 2px 6px rgba(18, 50, 69, 0.18);
}

.btn--ghost {
  background: transparent;
  color: var(--chu-navy-2, var(--navy-2));
  border: 1px solid var(--border);
  width: 100%;
  margin-top: 14px;
}
.btn--ghost:hover { background: var(--border-soft); border-color: var(--navy-3); }

.btn--block { width: 100%; }

.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-ink); }

.btn--outline {
  background: var(--surface);
  color: var(--chu-navy-3, var(--navy-3));
  border: 1px solid var(--navy-3);
}
.btn--outline:hover { background: var(--border-soft); }

.btn--ghost-s {
  background: transparent;
  color: var(--chu-navy-3, var(--navy-3));
  border: 1px dashed var(--border);
  border-radius: var(--radius-s);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  margin-top: 4px;
}
.btn--ghost-s:hover { border-color: var(--navy-3); background: var(--border-soft); }

.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.field { display: block; margin-bottom: 18px; }
.field[hidden] { display: none; }

.field__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 7px;
}

.field__input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
}

.field__input:hover:not(:disabled):not(:focus) { border-color: var(--navy-3); }
select.field__input { cursor: pointer; }

.field__input:focus {
  outline: 2px solid var(--navy-3);
  outline-offset: 1px;
  border-color: var(--navy-3);
}

textarea.field__input {
  font-family: inherit;
  font-size: inherit;
  resize: vertical;
  min-height: 120px;
}

/* Ô chưa có thông tin — tô màu khác cho dễ nhận biết ô nào còn trống
   (chỉ mang tính trực quan, không phải báo lỗi/bắt buộc). */
.field__input--trong {
  background: color-mix(in srgb, var(--amber) 6%, var(--surface));
  border-color: color-mix(in srgb, var(--amber) 35%, var(--surface));
}
.field__input--trong:focus { border-color: var(--navy-3); }

/* Hiệu ứng cho ô "Số"/"Ngày" ngay sau khi bấm 🔍 Đọc (hoặc vừa kéo-thả
   file lần đầu) ở panel "Nhập Tên Hồ Sơ" — xem ho_so.js/danhDauKetQuaDoan:
   ô đọc được nội dung file thì nháy xanh rồi tự nhạt dần (báo "vừa tự
   điền, kiểm tra lại"); ô không đọc được thì giữ nguyên, không đổi màu. */
@keyframes hosoDaDoanNhay {
  0%   { background: var(--green-soft); border-color: var(--green); }
  100% { background: var(--surface); border-color: var(--border); }
}
.field__input--da-doan {
  animation: hosoDaDoanNhay 1.8s ease-out;
}

/* Ô mật khẩu có nút "mắt" để hiện/ẩn ký tự */
.field__pass-wrap { position: relative; display: block; }
.field__pass-wrap .field__input { padding-right: 40px; }
.field__eye {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  border-radius: var(--radius-s);
  color: var(--ink-soft);
}
.field__eye:hover { background: var(--border-soft); }

/* ─── Login ──────────────────────────────────────────────────────────── */

.page-login .page { max-width: none; padding: 0; }

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}

.login-side {
  background: var(--navy);
  color: #EAF1F0;
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.login-side::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 340px;
  height: 340px;
  border: 1px solid rgba(222, 123, 55, 0.28);
  border-radius: 50%;
}

.login-side__mark {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--accent);
  font-size: 15px;
  margin-bottom: 18px;
}

.login-side__tag {
  font-size: 21px;
  line-height: 1.45;
  max-width: 380px;
  color: #DCE9E7;
  margin: 0 0 40px;
}

.login-side__ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-side__ticks li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 14.5px;
  color: #B7CBC9;
}

.login-side__ticks span {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 13px;
}

.login-form-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.login-form { width: 100%; max-width: 360px; }

.login-form__title { font-size: 24px; font-weight: 600; margin: 0 0 6px; }

.login-form__sub { color: var(--ink-soft); font-size: 14px; margin: 0 0 28px; }

/* ─── Bảng danh sách đại lý (trang "Chọn đại lý") ───────────────────────── */

.dai-ly-table td, .dai-ly-table th { white-space: normal; }

.dai-ly-row { cursor: pointer; }

.dai-ly-row__ma {
  display: inline-block;
  color: var(--accent-ink);
  background: var(--accent-soft);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* Hover lift trên khối mã đại lý — di chuột vào cả dòng là badge nhấc lên,
   sáng viền nhẹ, tạo cảm giác dòng đó đang "được chọn". */
.dai-ly-row:hover .dai-ly-row__ma {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.10);
}

.dai-ly-row__ten { font-weight: 600; }

.dai-ly-row__hanh-dong { text-align: right; }
.dai-ly-row__hanh-dong form { display: inline-block; }

.dai-ly-row__btn {
  padding: 6px 14px;
  font-size: 13px;
}

/* Mũi tên "Chọn →" dịch chuyển nhẹ sang phải khi hover dòng hoặc hover
   thẳng vào nút — tạo lực hướng dẫn thị giác, khuyến khích bấm tiếp. */
.dai-ly-row__arrow {
  display: inline-block;
  transition: transform 0.18s ease;
}

.dai-ly-row:hover .dai-ly-row__arrow,
.dai-ly-row__btn:hover .dai-ly-row__arrow {
  transform: translateX(5px);
}

/* ─── Toolbar (thanh chọn tháng + tìm kiếm + nút thêm, gọn 1 hàng) ────── */

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.toolbar__search {
  flex: 1 1 160px;
  min-width: 140px;
  margin-bottom: 0;
}

.toolbar__add { flex-shrink: 0; white-space: nowrap; margin-left: auto; margin-top: 0; width: auto; height: 40px; padding: 0 18px; }

/* ─── Nút + menu "⚙️ Cột hiển thị" (ẩn/hiện cột bảng lô hàng) ──────────── */

.col-toggle { position: relative; flex-shrink: 0; }

.col-toggle__btn {
  width: 40px;
  height: 40px;
  margin-top: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  border-radius: var(--radius-s);
  transition: border-color 0.15s ease, background 0.15s ease,
              transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
}
.col-toggle__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(18, 50, 69, 0.12);
}
.col-toggle__btn:active { transform: translateY(0); box-shadow: none; }

.col-toggle__icon {
  display: inline-block;
}

.col-toggle__btn:hover .col-toggle__icon {
  animation: colToggleSpin 1s linear infinite;
}

@keyframes colToggleSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.col-toggle__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid rgba(18, 50, 69, 0.08);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(18, 50, 69, 0.18), 0 2px 8px rgba(18, 50, 69, 0.08);
  padding: 8px;
  z-index: 55;
  animation: menuXuatHien 0.14s ease;
}

.col-toggle__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.col-toggle__reset {
  background: none;
  border: none;
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  padding: 2px 4px;
}
.col-toggle__reset:hover { text-decoration: underline; }

.col-toggle__list { display: flex; flex-direction: column; gap: 1px; }

.col-toggle__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 6px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  transition: background .12s ease;
}
.col-toggle__item:hover { background: var(--border-soft); }
.col-toggle__item input { accent-color: var(--navy); cursor: pointer; }

@media (max-width: 720px) {
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar__add { margin-left: 0; width: 100%; }
  .month-nav { flex-wrap: wrap; justify-content: flex-start; row-gap: 8px; }
  .col-toggle__menu { left: 0; right: 0; }
}

/* ─── Filter bar ─────────────────────────────────────────────────────── */

.filter-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 16px 18px;
  margin-bottom: 20px;
}

.filter-bar__years {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  display: block;
}

.search-bar__input {
  flex: 1;
  height: 40px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-bar__input:focus {
  outline: none;
  border-color: var(--navy-3);
  box-shadow: 0 0 0 3px rgba(42, 90, 114, 0.14);
}

.search-bar__btn {
  flex-shrink: 0;
  height: 40px;
  width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--navy);
  background: var(--surface);
  color: var(--chu-navy, var(--navy));
  border-radius: var(--radius-s);
  padding: 0;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.search-bar__btn:hover {
  border-color: var(--accent);
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
  animation: searchBtnWiggle 0.35s ease;
}

.search-bar__btn:active {
  transform: translateY(0) scale(0.94);
  box-shadow: none;
}

@keyframes searchBtnWiggle {
  0%, 100% { rotate: 0deg; }
  30% { rotate: -12deg; }
  60% { rotate: 10deg; }
}

.search-bar__clear {
  flex-shrink: 0;
  height: 40px;
  width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 0;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.search-bar__clear:hover { border-color: var(--navy-3); color: var(--chu-navy, var(--navy)); background: var(--border-soft); transform: rotate(90deg); }

.filter-bar__months {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ─── Bộ chọn tháng/năm (nút qua lại + dropdown) ─────────────────────── */

.month-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.month-nav__btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-s);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease,
              transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
}

.month-nav__btn:hover {
  border-color: var(--navy-3);
  color: var(--chu-navy, var(--navy));
  background: var(--border-soft);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(18, 50, 69, 0.12);
}
.month-nav__btn:active { transform: translateY(0); box-shadow: none; }

.month-nav__btn--today {
  margin-left: 6px;
  font-size: 15px;
}

/* ─── Toggle chế độ xem (📅 theo tháng / ⏳ chưa hoàn thành) — chỉ nút
   đang ở chế độ hiện tại (.is-active) mới tô đậm, nút còn lại giữ style
   mặc định của .month-nav__btn (nền trắng). ────────────────────────── */
.month-nav__btn--mode.is-active {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--chu-navy, var(--navy));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

.month-nav__btn--mode.is-active:hover {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent),
              0 3px 8px rgba(18, 50, 69, 0.12);
}

/* ─── Đồng hồ cát (⏳) trên nút "Xem chưa hoàn thành": cát chảy hết rồi
   tự lật ngược 180° để chảy tiếp, lặp vô hạn. ─────────────────────── */
.hourglass-icon {
  display: inline-block;
}

#btnXemChuaXong .hourglass-icon {
  animation: hourglassFlip 15s ease-in-out infinite;
}

@keyframes hourglassFlip {
  0%   { transform: rotate(0deg); }
  45%  { transform: rotate(0deg); }
  55%  { transform: rotate(180deg); }
  95%  { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

.month-nav__select {
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  appearance: auto;
}

.month-nav__select:focus {
  outline: 2px solid var(--navy-3);
  outline-offset: 1px;
  border-color: var(--navy-3);
}

.chip {
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--ink-soft);
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.chip[hidden] { display: none; }

.chip--year { font-family: var(--font-ui); font-size: 13.5px; }

.chip:hover { border-color: var(--navy-3); color: var(--chu-navy, var(--navy)); }

.chip--active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.chip--empty { opacity: 0.42; }

.chip__badge {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 0 6px;
  font-size: 11px;
}

.chip:not(.chip--active) .chip__badge {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

/* ─── Cấu hình hệ thống: lưới thẻ chức năng đồng bộ kích thước, luôn 3 cột
   trên màn hình rộng (2 cột ≤900px, 1 cột ≤640px), tự xuống hàng khi thêm
   chức năng mới. Không dùng auto-fill: khung nội dung hẹp thì số cột tụt. ── */
.cau-hinh-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

/* ─── Cấu hình: nhóm thẻ theo mục đích ─────────────────────────────── */
.cau-hinh-section { margin-bottom: 30px; }
.cau-hinh-section:last-child { margin-bottom: 0; }

.cau-hinh-section__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft, var(--border));
}

.cau-hinh-section__title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.cau-hinh-section__sub { font-size: 13px; color: var(--ink-soft); opacity: .8; }

/* Nút hành động nguy hiểm (không phải thẻ cài đặt) */
.btn--khoa-ngay {
  color: #B3261E;
  border-color: #B3261E;
}
.btn--khoa-ngay:hover { background: rgba(179, 38, 30, .08); }

/* Chip "cần chú ý" (chưa thiết lập / chưa sao lưu) */
.status--warn { background: #FFF1D6; color: #8A5A00; }

.cau-hinh-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 158px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

/* Vệt sáng nhỏ bên trái, "nở" ra khi hover — báo hiệu thẻ đang được
   chọn, đồng thời tạo điểm nhấn thị giác đồng bộ màu accent. */
.cau-hinh-card::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .2s ease;
}

.cau-hinh-card:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 20px rgba(20, 30, 40, .10);
  transform: translateY(-3px);
}

.cau-hinh-card:hover::before { transform: scaleY(1); }

.cau-hinh-card:active { transform: translateY(-1px) scale(0.99); }

.cau-hinh-card:hover .cau-hinh-card__title { color: var(--accent-ink); }

.cau-hinh-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--chu-navy, var(--navy));
  transition: color .15s ease;
}

.cau-hinh-card__desc {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

/* Dấu ✓ phẳng trong pill trạng thái — không theo bộ icon (3D...) để luôn đúng nghĩa "OK" */
.status__check { width: 1em; height: 1em; margin-right: 0.35em; vertical-align: -0.14em; flex-shrink: 0; }
.cau-hinh-card__status {
  align-self: flex-start;
  margin-top: 2px;
  transition: transform .15s ease;
}

.cau-hinh-card:hover .cau-hinh-card__status { transform: translateY(-1px); }

/* ─── Thẻ "🎨 Giao diện": hiệu ứng riêng, gợi liên tưởng đổi màu theme —
   viền + bóng đổ chạy qua 3 sắc màu, tiêu đề ánh lên như dải màu chạy. ─ */
@keyframes themeCardGlow {
  0%, 100% { border-color: #6C5CE7; box-shadow: 0 8px 20px rgba(108, 92, 231, .22); }
  33% { border-color: #FF9F43; box-shadow: 0 8px 20px rgba(255, 159, 67, .22); }
  66% { border-color: #1DD1A1; box-shadow: 0 8px 20px rgba(29, 209, 161, .22); }
}

#btnMoTheme:hover {
  animation: themeCardGlow 2.4s ease-in-out infinite;
}

@keyframes themeTitleShimmer {
  to { background-position: -200% center; }
}

#btnMoTheme:hover .cau-hinh-card__title {
  background: linear-gradient(90deg, var(--navy), #6C5CE7, #FF9F43, #1DD1A1, var(--navy));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: themeTitleShimmer 1.6s linear infinite;
}

@media (max-width: 900px) {
  .cau-hinh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cau-hinh-grid { grid-template-columns: 1fr; }
}

/* ─── Popup "🎨 Giao diện": lưới thẻ chọn theme dựng sẵn (radio ẩn +
   label bấm được) + ô chọn màu accent tuỳ chỉnh ─────────────────────── */
.theme-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.theme-swatch {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 2px solid var(--border);
  border-radius: var(--radius-m);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

.theme-swatch:hover { border-color: var(--navy-3); }

.theme-swatch input { position: absolute; opacity: 0; pointer-events: none; }

.theme-swatch--active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.theme-swatch__dots { display: flex; gap: 6px; }

.theme-swatch__dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .12);
}

.theme-swatch__ten { font-weight: 600; font-size: 14.5px; color: var(--chu-navy, var(--navy)); }

.theme-swatch__mota { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }

/* ─── Nhóm nút chọn cỡ chữ — dạng pill ngang, chữ "A" tự phóng to theo
   từng mức để xem trước ngay trên nút ─────────────────────────────── */
.co-chu-grid { display: flex; gap: 10px; flex-wrap: wrap; }

.co-chu-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 76px;
  border: 2px solid var(--border);
  border-radius: var(--radius-m);
  padding: 10px 14px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

.co-chu-opt:hover { border-color: var(--navy-3); }

.co-chu-opt input { position: absolute; opacity: 0; pointer-events: none; }

.co-chu-opt--active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.co-chu-opt__chu { font-weight: 700; color: var(--chu-navy, var(--navy)); line-height: 1; }

.co-chu-opt__ten { font-size: 12px; color: var(--ink-soft); }

/* ─── Stat row ───────────────────────────────────────────────────────── */

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 20px;
  margin-bottom: 22px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px -14px rgba(18, 50, 69, 0.32), 0 4px 10px -4px rgba(18, 50, 69, 0.12);
}

.stat-card--accent { border-color: var(--accent); background: var(--accent-soft); }

.stat-card--so-lo:hover { border-color: var(--navy-2); }
.stat-card--hoan-thanh:hover { border-color: var(--green); }
.stat-card--chi-phi:hover { border-color: var(--red); }
.stat-card--accent:hover { border-color: var(--accent-ink); }

.stat-card__label { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }

.stat-card__value { font-family: var(--font-mono); font-size: 22px; font-weight: 600; }

/* ─── Table ──────────────────────────────────────────────────────────── */

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  overflow-x: auto;
  box-shadow: var(--shadow-card);
  /* Ẩn thanh cuộn ngang MẶC ĐỊNH của trình duyệt ở đây — đã có
     .table-scroll-top dính trên đầu màn hình thay thế rồi, khỏi cần 2
     thanh cuộn ngang cùng lúc (bảng vẫn cuộn ngang bình thường qua JS
     đồng bộ hoặc kéo bằng touch, chỉ ẩn thanh scrollbar hiển thị). */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.table-wrap::-webkit-scrollbar { display: none; }
/* Thanh cuộn ngang mặc định của trình duyệt ẩn ở MỌI ".table-wrap" (kể cả
   trong popup) — vì giờ mọi bảng đều tự có ".table-scroll-top" dính trên
   đầu thay thế (gắn tự động qua JS, xem main.js), khỏi cần 2 thanh cuộn
   ngang cùng lúc. */

.table-scroll-top {
  overflow-x: auto;
  overflow-y: hidden;
  height: 16px;
  margin-bottom: 6px;
  /* Dính lại trên đầu màn hình khi cuộn trang xuống xem nhiều lô hàng —
     trước đây thanh này nằm trong luồng bình thường ngay trên bảng nên
     cuộn xuống là mất, không cách nào kéo ngang xem hết cột được nữa. */
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg, #fff);
}

.table-scroll-top__spacer {
  height: 1px;
}

/* Trong popup (.modal-box) nền là trắng (--surface), không phải nền xám
   của trang (--bg) — thanh cuộn tự gắn bên trong popup phải lấy đúng nền
   trắng đó, không thì hiện thành vệt xám lệch tông ngay trong popup. */
.modal-box .table-scroll-top { background: var(--surface); }

.lo-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

.lo-table thead th {
  text-align: left;
  padding: var(--table-th-pad, 12px 14px);
  background: var(--border-soft);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 12px;
  text-transform: none;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.th-sort {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 20px !important;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.th-sort:hover {
  /* Trước dùng #E3EAE7 — quá gần màu nền mặc định (--border-soft
     #E9EFEC) nên rê chuột khó nhận ra khác biệt. Đổi qua tông cam accent
     sẵn có của app (khác hẳn tông xám-xanh) + viền nhấn dưới cho rõ hẳn. */
  background: var(--accent-soft);
  color: var(--accent-ink);
  box-shadow: inset 0 -2px 0 0 var(--accent);
}
.th-sort::after {
  content: "";
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%) scale(1);
  border: 4px solid transparent;
  border-top-color: var(--ink-faint);
  opacity: 0.55;
  transition: opacity 0.18s ease, transform 0.18s ease, border-top-color 0.18s ease;
}
/* Rê chuột: mũi tên sắp xếp rõ hơn + nhích to lên 1 chút, gợi ý "bấm để
   sắp xếp" — áp dụng luôn cho cả 2 trạng thái asc/desc, opacity/border
   màu vẫn giữ nguyên theo trạng thái đó, chỉ thêm scale khi hover. */
.th-sort:hover::after {
  opacity: 0.85;
  transform: translateY(-50%) scale(1.15);
}
.th-sort--asc::after {
  border-top-color: transparent;
  border-bottom-color: var(--navy);
  margin-top: -4px;
  opacity: 1;
}
.th-sort--desc::after {
  border-top-color: var(--navy);
  opacity: 1;
}

/* Hover chung cho tiêu đề cột TĨNH (không bấm sắp xếp được) của MỌI bảng
   .lo-table — bảng nào có thêm sau này tự được phủ, khỏi liệt kê #id.
   :not(.th-sort) để không đụng các cột sắp xếp được (đã có hover riêng ở
   trên) — bảng trộn cả 2 loại như #loHangBang vẫn đúng. */
.lo-table thead th:not(.th-sort) {
  transition: background-color 0.18s ease, color 0.18s ease;
}
.lo-table thead th:not(.th-sort):hover {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.lo-table td {
  padding: var(--table-td-pad, 11px 14px);
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}

.lo-row { cursor: pointer; }
.lo-row td { transition: background-color 0.15s ease, var(--tx-trans); }
.lo-row:hover td { background-color: var(--fx-row-hover, color-mix(in srgb, var(--ink) 6%, var(--surface))); }
.lo-row:last-child td { border-bottom: none; }

/* Hiệu ứng mượt khi dữ liệu bảng trong popup xuất hiện: mỗi lần JS xoá
   rồi vẽ lại các dòng <tr> (mở popup, lọc, thêm/sửa/xoá xong tải lại...)
   thì từng dòng tự mờ dần + trượt nhẹ lên thay vì bật ra ngay lập tức.
   Thuần CSS — trình duyệt tự chạy animation này mỗi khi có <tr> MỚI được
   gắn vào DOM, không cần sửa gì bên JS. Áp dụng cho MỌI bảng bên trong
   .modal-box (.lo-table, .table, .info-table, .bcvt-nx-table, .dai-ly-table,
   .tai-khoan-table...) nên không ảnh hưởng bảng lô hàng chính ngoài trang
   (bảng đó đã có hiệu ứng riêng — xem lohRowFadeIn bên dưới). */
@keyframes dlRowFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.modal-box table tbody tr {
  animation: dlRowFadeIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.modal-box table tbody tr:nth-child(2)  { animation-delay: 28ms; }
.modal-box table tbody tr:nth-child(3)  { animation-delay: 56ms; }
.modal-box table tbody tr:nth-child(4)  { animation-delay: 84ms; }
.modal-box table tbody tr:nth-child(5)  { animation-delay: 112ms; }
.modal-box table tbody tr:nth-child(6)  { animation-delay: 140ms; }
.modal-box table tbody tr:nth-child(7)  { animation-delay: 168ms; }
.modal-box table tbody tr:nth-child(8)  { animation-delay: 196ms; }
.modal-box table tbody tr:nth-child(9)  { animation-delay: 224ms; }
.modal-box table tbody tr:nth-child(10) { animation-delay: 252ms; }
.modal-box table tbody tr:nth-child(n+11) { animation-delay: 280ms; }
/* bảng dài (hàng trăm dòng): không animate từ dòng 13 trở đi để mở modal không giật */
.modal-box table tbody tr:nth-child(n+13) { animation: none; }

/* Lô hàng chưa hoàn thành ("Đang xử lý") — cả dòng hiện chữ màu đỏ +
   IN ĐẬM để dễ nhận biết nhanh, giống cách hiển thị bên phần mềm desktop. */
.lo-row--dang-xu-ly td { color: var(--red); font-weight: 600; }
.lo-row--dang-xu-ly .mono { color: var(--red); }
/* Chưa Hoàn thành nhưng ĐÃ thông quan (tra cứu "⚡ API (Nhanh)" trong
   modal "🔍 Kiểm tra thông quan") — xem _lo_hang_rows.html + db.cap_nhat_thong_quan. */
.lo-row--da-thong-quan td { color: var(--green); font-weight: 600; }
.lo-row--da-thong-quan .mono { color: var(--green); }

/* Dòng lô hàng vừa được thêm mới — tô sáng tạm thời để người dùng dễ nhận
   ra ngay sau khi popup "Thêm lô hàng mới" đóng lại và trang tải lại
   (xem them_lo_hang.js + main.js). Tự mờ dần rồi biến mất. */
.lo-row--vua-them td {
  background: var(--accent-soft);
  transition: background 2s ease 0.4s, var(--tx-trans);
}

/* Hiệu ứng mượt khi bảng lô hàng CHÍNH (#tbodyLoHang) tải lại dữ liệu mới
   (đổi tháng/năm, lọc, tìm kiếm...) — main.js thay nguyên tbody.innerHTML
   nên toàn bộ <tr> là node mới, trình duyệt tự chạy animation này, không
   cần sửa JS. CHỈ dùng opacity, KHÔNG dùng transform: bảng này có cột
   sticky (.col-sticky ở dưới) — nếu để transform tồn tại trên <tr> sau khi
   animation kết thúc (animation-fill-mode: both) thì sticky sẽ hỏng vĩnh
   viễn vì transform tạo containing block mới cho các cột con. */
@keyframes lohRowFadeIn { from { opacity: 0; } to { opacity: 1; } }
#tbodyLoHang tr.lo-row { animation: lohRowFadeIn 0.32s ease both; }
#tbodyLoHang tr.lo-row:nth-child(2)  { animation-delay: 18ms; }
#tbodyLoHang tr.lo-row:nth-child(3)  { animation-delay: 36ms; }
#tbodyLoHang tr.lo-row:nth-child(4)  { animation-delay: 54ms; }
#tbodyLoHang tr.lo-row:nth-child(5)  { animation-delay: 72ms; }
#tbodyLoHang tr.lo-row:nth-child(6)  { animation-delay: 90ms; }
#tbodyLoHang tr.lo-row:nth-child(7)  { animation-delay: 108ms; }
#tbodyLoHang tr.lo-row:nth-child(8)  { animation-delay: 126ms; }
#tbodyLoHang tr.lo-row:nth-child(9)  { animation-delay: 144ms; }
#tbodyLoHang tr.lo-row:nth-child(10) { animation-delay: 162ms; }
#tbodyLoHang tr.lo-row:nth-child(11) { animation-delay: 180ms; }
#tbodyLoHang tr.lo-row:nth-child(12) { animation-delay: 198ms; }
#tbodyLoHang tr.lo-row:nth-child(13) { animation-delay: 216ms; }
#tbodyLoHang tr.lo-row:nth-child(14) { animation-delay: 234ms; }
#tbodyLoHang tr.lo-row:nth-child(15) { animation-delay: 252ms; }
#tbodyLoHang tr.lo-row:nth-child(16) { animation-delay: 270ms; }
#tbodyLoHang tr.lo-row:nth-child(17) { animation-delay: 288ms; }
#tbodyLoHang tr.lo-row:nth-child(18) { animation-delay: 306ms; }
#tbodyLoHang tr.lo-row:nth-child(19) { animation-delay: 180ms; }
#tbodyLoHang tr.lo-row:nth-child(20) { animation-delay: 190ms; }
#tbodyLoHang tr.lo-row:nth-child(n+21) { animation-delay: 200ms; }

/* ─── Cột cố định (sticky) khi cuộn ngang: STT / Mã lô / Tên cty / Số TK ── */

.col-sticky {
  position: sticky;
}

thead .col-sticky {
  background: var(--border-soft);
  z-index: 3;
}

tbody .col-sticky {
  background: var(--surface);
  z-index: 2;
  transition: background-color 0.15s ease, var(--tx-trans);
}

/* Hover cột sticky PHẢI dùng màu ĐẶC (không phải rgba trong suốt) — nếu
   không, khi cuộn ngang, các cột đã cuộn qua sẽ lộ xuyên qua nền cột cố
   định, gây chồng chữ (xem ảnh lỗi "sáng đè khi rê chuột lúc cuộn ngang").
   Màu hover lấy từ biến --fx-row-hover (theo theme; mặc định = 6% --ink trộn
   lên --surface → đặc, không còn trắng cứng #F1F3F4 làm sáng chói theme tối). */
.lo-row:hover .col-sticky { background-color: var(--fx-row-hover, color-mix(in srgb, var(--ink) 6%, var(--surface))); transition: background-color 0.15s ease, var(--tx-trans); }

.col-sticky-4 { box-shadow: 4px 0 6px -4px rgba(18, 50, 69, 0.25); }

/* ═══════════════════════════════════════════════════════════════════════
   HIỆU ỨNG CHỮ KHI RÊ CHUỘT TRONG BẢNG (.lo-table — dùng chung mọi bảng)
   Chỉ dùng thuộc tính KHÔNG đổi kích thước chữ nên cột không bị giật:
     • Cả hàng: chữ "đậm lên" nhẹ (text-stroke .25px — không đổi độ rộng)
     • Ô đang trỏ: chữ đậm hơn chút + phát sáng nhẹ theo màu nhấn của theme
   Hàng "Đang xử lý" (đỏ) / "Đã thông quan" (xanh) / ô mã lô nhấp nháy: giữ
   nguyên màu chữ, ánh sáng lấy theo màu chữ đó.
   Ô có nhãn trạng thái (.status/.luong) bỏ qua.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --tx-trans: color 0.2s ease, text-shadow 0.3s ease, -webkit-text-stroke-width 0.25s ease;
}
:where(.lo-table tbody td:not(:has(.status, .luong))) { -webkit-text-stroke: 0 currentColor; }
:where(.lo-table tbody td) { transition: var(--tx-trans); }

/* cả hàng */
.lo-table tbody tr:hover > td:not(:has(.status, .luong)) { -webkit-text-stroke-width: 0.25px; }
/* ô đang trỏ */
.lo-table tbody tr td:not(:has(.status, .luong)):hover {
  -webkit-text-stroke-width: 0.4px;
  text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 38%, transparent);
}
.lo-table tbody .lo-row--dang-xu-ly td:not(:has(.status, .luong)):hover,
.lo-table tbody .lo-row--da-thong-quan td:not(:has(.status, .luong)):hover,
.lo-table tbody tr td.ma-lo--nhac-nho-den-han:hover {
  text-shadow: 0 0 12px color-mix(in srgb, currentColor 40%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  :root { --tx-trans: color 0s; }
  .lo-table tbody td:hover { text-shadow: none; }
}

/* Tắt hiệu ứng chuyển động theo lựa chọn CỦA NGƯỜI DÙNG (Cấu hình → Giao
   diện → "Hiệu ứng chuyển động: Tắt") — khác với prefers-reduced-motion
   ở trên (đó là cờ hệ điều hành, cái này admin tự chọn trong app). Đưa
   mọi transition/animation về 0s thay vì "none" để không cần khai báo lại
   từng thuộc tính riêng — phần tử vẫn đổi trạng thái ngay lập tức. */
html.giam-chuyen-dong *,
html.giam-chuyen-dong *::before,
html.giam-chuyen-dong *::after {
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* Tăng độ tương phản theo lựa chọn CỦA NGƯỜI DÙNG (Cấu hình → Giao diện
   → "Tương phản cao: Bật") — kéo chữ mờ/viền về sát màu --ink đang dùng,
   tự đúng với MỌI theme/preset (kể cả nền tối) vì chỉ tham chiếu lại
   biến --ink hiện có, không hardcode màu. */
html.tuong-phan-cao {
  --ink-soft: var(--ink);
  --ink-faint: var(--ink);
  --border: var(--ink-soft);
  --border-soft: var(--ink-faint);
}

/* Cố định tiêu đề bảng theo lựa chọn CỦA NGƯỜI DÙNG (Cấu hình → Giao
   diện → "Cố định tiêu đề bảng khi cuộn: Bật") — dính dòng thead lại
   trên đầu khi cuộn dọc, áp dụng cho MỌI bảng dùng chung class
   ".lo-table" (danh sách lô hàng, đại lý, tài khoản...). z-index thấp
   hơn ".table-scroll-top" (20) vì thanh cuộn ngang luôn cần nằm trên
   cùng, cao hơn nội dung ô thường để không bị các dòng dữ liệu đè lên. */
html.co-dinh-tieu-de-bang .lo-table thead th {
  position: sticky;
  top: 0;
  z-index: 15;
}
html.co-dinh-tieu-de-bang .lo-table thead .col-sticky {
  z-index: 16;
}

/* Ẩn cột theo vị trí (nth-child) khi người dùng bỏ chọn trong menu
   "⚙️ Cột" — xem static/js/cot_hien_thi.js. Cột 1–4 là sticky (cố định),
   không cho ẩn nên không có rule tương ứng. */
.lo-table.col-hidden-5 th:nth-child(5), .lo-table.col-hidden-5 td:nth-child(5) { display: none; }
.lo-table.col-hidden-6 th:nth-child(6), .lo-table.col-hidden-6 td:nth-child(6) { display: none; }
.lo-table.col-hidden-7 th:nth-child(7), .lo-table.col-hidden-7 td:nth-child(7) { display: none; }
.lo-table.col-hidden-8 th:nth-child(8), .lo-table.col-hidden-8 td:nth-child(8) { display: none; }
.lo-table.col-hidden-9 th:nth-child(9), .lo-table.col-hidden-9 td:nth-child(9) { display: none; }
.lo-table.col-hidden-10 th:nth-child(10), .lo-table.col-hidden-10 td:nth-child(10) { display: none; }
.lo-table.col-hidden-11 th:nth-child(11), .lo-table.col-hidden-11 td:nth-child(11) { display: none; }
.lo-table.col-hidden-12 th:nth-child(12), .lo-table.col-hidden-12 td:nth-child(12) { display: none; }
.lo-table.col-hidden-13 th:nth-child(13), .lo-table.col-hidden-13 td:nth-child(13) { display: none; }
.lo-table.col-hidden-14 th:nth-child(14), .lo-table.col-hidden-14 td:nth-child(14) { display: none; }
.lo-table.col-hidden-15 th:nth-child(15), .lo-table.col-hidden-15 td:nth-child(15) { display: none; }
.lo-table.col-hidden-16 th:nth-child(16), .lo-table.col-hidden-16 td:nth-child(16) { display: none; }
.lo-table.col-hidden-17 th:nth-child(17), .lo-table.col-hidden-17 td:nth-child(17) { display: none; }
.lo-table.col-hidden-18 th:nth-child(18), .lo-table.col-hidden-18 td:nth-child(18) { display: none; }
.lo-table.col-hidden-19 th:nth-child(19), .lo-table.col-hidden-19 td:nth-child(19) { display: none; }
.lo-table.col-hidden-20 th:nth-child(20), .lo-table.col-hidden-20 td:nth-child(20) { display: none; }
.lo-table.col-hidden-21 th:nth-child(21), .lo-table.col-hidden-21 td:nth-child(21) { display: none; }
.lo-table.col-hidden-22 th:nth-child(22), .lo-table.col-hidden-22 td:nth-child(22) { display: none; }
.lo-table.col-hidden-23 th:nth-child(23), .lo-table.col-hidden-23 td:nth-child(23) { display: none; }
.lo-table.col-hidden-24 th:nth-child(24), .lo-table.col-hidden-24 td:nth-child(24) { display: none; }

.mono { font-family: var(--font-mono); font-size: 12.5px; }

.num { font-family: var(--font-mono); text-align: right; }

.luong {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15px;
  line-height: 1.3;
}

.luong::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 5px currentColor;
  flex-shrink: 0;
}

/* Không chỉ dựa vào màu để phân biệt luồng — mỗi luồng có thêm 1 icon
   hình dạng riêng (✓ / ! / ✕) để người khó phân biệt màu vẫn nhận ra
   ngay, không cần đọc chữ. */
.luong--xanh::before,
.luong--vàng::before, .luong--vang::before,
.luong--đỏ::before, .luong--do::before {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
}

.luong--xanh::before { content: "✓"; }
.luong--vàng::before, .luong--vang::before { content: "!"; }
.luong--đỏ::before, .luong--do::before { content: "✕"; }

.luong--xanh {
  background: var(--green-soft);
  color: var(--green);
  box-shadow: 0 0 0 1px rgba(46, 125, 83, 0.16), 0 0 10px rgba(46, 125, 83, 0.22);
}

.luong--vàng, .luong--vang {
  background: var(--amber-soft);
  color: var(--amber);
  box-shadow: 0 0 0 1px rgba(180, 121, 28, 0.18), 0 0 10px rgba(180, 121, 28, 0.24);
}

.luong--đỏ, .luong--do {
  background: var(--red-soft);
  color: var(--red);
  box-shadow: 0 0 0 1px rgba(184, 69, 43, 0.18), 0 0 10px rgba(184, 69, 43, 0.24);
}

.status {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
}

.status--done { background: var(--green-soft); color: var(--green); }
.status--pending { background: var(--red-soft); color: var(--red); }

/* Nhãn "đang bật / đã hoàn thành" phát sáng nhẹ theo nhịp — thu hút mắt
   về những trạng thái đang hoạt động mà không gây chói/rối mắt. */
/* Chỉ animate opacity của vòng sáng (::before) — không animate box-shadow
   trực tiếp vì mỗi khung hình phải vẽ lại, nhân với hàng chục dòng bảng. */
@keyframes statusRing { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.status--done::before, .status--pending::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}
.status--done::before { box-shadow: 0 0 0 3px rgba(46, 160, 90, 0.22); }
.status--pending::before { box-shadow: 0 0 0 3px rgba(184, 69, 43, 0.22); }
@media (prefers-reduced-motion: no-preference) {
  .status--done::before { animation: statusRing 2.6s ease-in-out infinite; }
  .status--pending::before { animation: statusRing 3s ease-in-out infinite; }
}

/* Icon cảnh báo ở cột STT (thiếu chi phí / chưa gắn hóa đơn) — mặc định
   vàng nhấp nháy cho dễ để ý; khi người dùng đã TẮT công tắc cảnh báo
   ở popup chi tiết của ĐÚNG lô đó (nhớ riêng từng lô ở localStorage,
   xem chuyenDoiCanhBaoBox trong main.js) thì đổi qua màu tối, không
   nhấp nháy nữa. */
@keyframes canhBaoSttNhapNhay {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.canh-bao-stt-icon {
  display: inline-block;
  margin-left: 3px;
  color: var(--amber);
  animation: canhBaoSttNhapNhay 1.1s ease-in-out infinite;
  /* Cho color/opacity chuyển mượt khi tắt công tắc (đổi qua xám) —
     animation dừng đột ngột nhưng opacity/color còn lại vẫn trượt êm
     về giá trị đích nhờ transition này, xem .canh-bao-stt-icon--tat. */
  transition: color 0.35s ease, opacity 0.35s ease, filter 0.35s ease;
}

/* Khi đã tắt cảnh báo: bình thường đứng yên (tối mờ, không gây chú ý); chỉ khi
   rê chuột vào icon mới có hiệu ứng động nhẹ (mờ đi mờ lại 0.38 ↔ 0.2 + nhún). */
@keyframes canhBaoSttNhapNhayTat {
  0%, 100% { opacity: 0.38; }
  50% { opacity: 0.2; }
}

.canh-bao-stt-icon--tat {
  color: var(--ink-soft);
  animation: none;
  opacity: 0.38;
  /* Đặt filter lên CHÍNH thẻ span (không phải svg bên trong) để tối đi cho
     MỌI bộ icon: bộ 3D/emoji/neon tô màu cố định bằng gradient/fill riêng nên
     đổi `color` không có tác dụng — chỉ filter mới làm chúng xám tối được. */
  filter: grayscale(1) brightness(0.6);
}
.canh-bao-stt-icon--tat:hover {
  animation: canhBaoSttNhapNhayTat 1.6s ease-in-out infinite;
}
/* Icon tam giác còn 1 animation riêng (phóng to + phát sáng vàng) gắn
   thẳng vào svg ở chỗ khác trong file (".ico-solo:has(use[...alert-
   triangle...])"), không tự tắt theo class trên — phải chặn tay ở đây,
   kèm !important vì rule kia cụ thể hơn (có thêm :has). Đồng thời ép
   --ico-a về currentColor để phần phát sáng (drop-shadow) cũng chuyển
   xám theo, không còn vàng. */
.canh-bao-stt-icon--tat :is(.ico, .ico-solo) {
  animation: none !important;
  --ico-a: currentColor !important;
  filter: none !important;
  transition: filter 0.35s ease;
}
/* Rê chuột vào icon đã tắt → svg nhún nhẹ (vẫn không phát sáng). */
.canh-bao-stt-icon--tat:hover :is(.ico, .ico-solo) {
  animation: ico-alert-loop 1.6s ease-in-out infinite !important;
}

/* Chữ "Mã lô" nhấp nháy khi lô hàng có nhắc nhở ĐÃ ĐẾN HẠN (hoặc đã
   gửi Telegram) mà chưa đánh dấu hoàn thành ở modal "🔔 Nhắc nhở" (xem
   db.co_nhac_nho_den_han) — tín hiệu RIÊNG với icon cảnh báo ở cột STT
   (chi phí thiếu/chưa gắn hóa đơn), 2 cái có thể cùng hiện 1 lúc. */
@keyframes maLoNhacNhoNhapNhay {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.ma-lo--nhac-nho-den-han {
  color: var(--amber);
  animation: maLoNhacNhoNhapNhay 1.1s ease-in-out infinite;
}

.cau-hinh-card:hover .status--done { transform: scale(1.05); }

/* ─── Pagination ─────────────────────────────────────────────────────── */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.pagination[hidden] { display: none; }

.pagination__info { font-size: 13px; color: var(--ink-soft); }

.pagination__nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.pagination__btn {
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: var(--radius-s);
  border: 1px solid var(--border);
  color: var(--ink-soft);
  background: var(--surface);
  transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.pagination__btn:hover { border-color: var(--navy-3); color: var(--chu-navy, var(--navy)); }

.pagination__btn--active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.pagination__btn--disabled {
  opacity: 0.4;
  pointer-events: none;
}

.pagination__ellipsis {
  color: var(--ink-faint);
  padding: 0 2px;
  font-size: 13px;
}

/* ─── Empty state ────────────────────────────────────────────────────── */

.empty-state {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-m);
  padding: 48px;
  text-align: center;
  color: var(--ink-soft);
  animation: emptyStateFadeIn .25s ease;
}

.empty-state::before {
  content: "🔍";
  display: block;
  font-size: 34px;
  margin-bottom: 10px;
  opacity: .65;
}

.empty-state p { max-width: 420px; margin: 0 auto; line-height: 1.6; }

@keyframes emptyStateFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Trạng thái đang tải khi tìm kiếm / lọc dữ liệu bằng AJAX ─────────── */
/* Làm mờ nhẹ + khoá tương tác + spinner giữa bảng trong lúc chờ kết quả,
   để người dùng biết chắc hệ thống đang xử lý chứ không phải bị đứng.
   .table-wrap tự có sẵn; nơi khác (không phải bảng lô hàng) gắn thêm
   class "spinner-overlay" để dùng chung hiệu ứng này. */
.table-wrap { position: relative; }
.spinner-overlay { position: relative; }

.table-wrap.is-loading, .spinner-overlay.is-loading {
  opacity: .45;
  pointer-events: none;
  transition: opacity .12s ease;
}

.table-wrap.is-loading::after, .spinner-overlay.is-loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  border: 3px solid var(--border);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: dangTaiXoay .6s linear infinite;
  z-index: 10;
}

@keyframes dangTaiXoay { to { transform: rotate(360deg); } }

/* ─── LAN banner ─────────────────────────────────────────────────────── */

.lan-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 16px;
  background: var(--navy);
  color: #EAF1F0;
  border-radius: var(--radius-m);
  padding: 4px 20px;
  margin-bottom: 24px;
}

/* .lan-banner__row chỉ còn để gom nhóm markup cho dễ đọc — "display:
   contents" khiến các phần tử con (info / qr / nút sao chép) trở thành
   ô lưới trực tiếp của .lan-banner, nên 2 hàng luôn thẳng cột với nhau
   dù nhãn dài ngắn khác nhau. */
.lan-banner__row {
  display: contents;
}

.lan-banner__divider {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(234, 241, 240, 0.14);
}

.lan-banner__label {
  display: block;
  font-size: 12px;
  color: #9FB8B5;
  margin-bottom: 4px;
}

/* Vùng chứa nhãn + link — hover vào là sáng nhẹ lên để báo hiệu đây là
   khu vực quan trọng, dễ đọc / dễ bấm sao chép. Padding dọc ở đây cũng
   là thứ quyết định chiều cao của cả hàng (QR/nút sẽ tự canh giữa nhờ
   align-items:center trên .lan-banner). */
.lan-banner__info {
  padding: 20px 10px;
  margin: -6px -10px;
  border-radius: 6px;
  transition: background 0.18s ease;
}

.lan-banner__info:hover {
  background: rgba(234, 241, 240, 0.06);
}

.lan-banner__url {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.01em;
  transition: text-shadow 0.18s ease, color 0.18s ease;
}

.lan-banner__info:hover .lan-banner__url {
  color: var(--accent);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
}

.lan-banner__copy {
  flex-shrink: 0;
  margin-top: 0;
  width: auto;
  border-color: rgba(234, 241, 240, 0.35);
  color: #EAF1F0;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.lan-banner__copy:hover { background: rgba(234, 241, 240, 0.1); border-color: var(--accent); }

/* Trạng thái "Đã sao chép" — đổi màu mượt sang xanh lá để admin chắc
   chắn 100% link đã nằm trong bộ nhớ tạm, không cần dán thử để kiểm tra. */
.lan-banner__copy.is-copied {
  background: rgba(46, 160, 90, 0.16);
  border-color: #2EA05A;
  color: #6FE39B;
}

.lan-banner__copy-text {
  display: inline-block;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.lan-banner__copy.is-copied .lan-banner__copy-text {
  animation: laBannerCopyIn 0.2s ease;
}

@keyframes laBannerCopyIn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

.lan-banner__qr-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  padding: 6px;
  background: #fff;
  border-radius: var(--radius-s);
  animation: menuXuatHien 0.16s ease;
}

.lan-banner__qr-box svg { width: 100%; height: 100%; }

.lan-banner__actions { display: flex; align-items: center; gap: 8px; }

/* Nút "Hiện QR" — chỉ dùng trên màn hẹp, ẩn sẵn ở desktop vì QR đã
   hiện thẳng luôn rồi (xem @media bên dưới). */
.lan-banner__qr-toggle {
  display: none;
  flex-shrink: 0;
  white-space: nowrap;
  border-color: rgba(234, 241, 240, 0.35);
  color: #EAF1F0;
}
.lan-banner__qr-toggle:hover { background: rgba(234, 241, 240, 0.1); border-color: var(--accent); }

@media (max-width: 640px) {
  /* Gọn khối địa chỉ LAN lại: xếp dọc, ẩn QR mặc định (đỡ chiếm chỗ),
     bấm "Hiện QR" mới hiện — xem xử lý ở block scripts của chon_dai_ly.html. */
  .lan-banner { grid-template-columns: 1fr; row-gap: 10px; padding: 16px; }
  .lan-banner__info { padding: 4px 0; margin: 0; }
  .lan-banner__qr-box { display: none; margin: 4px auto 0; }
  .lan-banner__qr-box.is-open { display: flex; }
  .lan-banner__qr-toggle { display: inline-flex; align-items: center; justify-content: center; }
}

/* Bảng đại lý ("Chọn đại lý") — ẩn cột Số điện thoại trên màn hẹp để
   đỡ phải cuộn ngang mới thấy cột "Số lô hàng" quan trọng hơn. */
@media (max-width: 640px) {
  .dai-ly-table th:nth-child(4), .dai-ly-table td:nth-child(4) { display: none; }
}

/* ─── Detail panel ───────────────────────────────────────────────────── */

.detail-panel { position: fixed; inset: 0; z-index: 50; }

/* Mở & ĐÓNG mượt y hệt các popup khác (.modal-overlay ở dưới): JS chỉ
   toggle [hidden]; transition trên "display" (allow-discrete) giữ panel
   hiện cho tới khi mờ dần xong, @starting-style cho khung hình đầu khi
   vừa mở. Sheet căn giữa bằng translate(-50%, -50%) nên phải giữ nguyên
   phần translate đó trong mọi trạng thái transform. */
.detail-panel {
  opacity: 1;
  transition: opacity 0.26s ease, display 0.26s ease allow-discrete;
}
.detail-panel[hidden] {
  display: none;
  opacity: 0;
  pointer-events: none;
}
@starting-style {
  .detail-panel:not([hidden]) { opacity: 0; }
  .detail-panel:not([hidden]) > .detail-panel__sheet {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 28px)) scale(0.95);
  }
}

.detail-panel__backdrop { position: absolute; inset: 0; background: rgba(18, 50, 69, 0.45); }

.detail-panel__sheet {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(940px, 95vw);
  max-height: 92vh;
  /* Sàn chiều cao: lúc đang tải ("Đang tải…", header rỗng) khung đã gần
     bằng cỡ cuối, nên khi dữ liệu về không bị giật/nhảy chiều cao. */
  min-height: min(620px, 92vh);
  background: var(--surface);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.detail-panel[hidden] > .detail-panel__sheet {
  opacity: 0;
  transform: translate(-50%, calc(-50% + 20px)) scale(0.96);
}

.detail-panel__close {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 2;
  background: none;
  border: none;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px;
}

.detail-header {
  flex: none;
  padding: 20px 60px 16px 28px;
  border-bottom: 1px solid var(--border-soft);
}

.detail-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.detail-header__info {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.detail-header__company {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "- Thông quan" hiện cạnh tên công ty trên panel chi tiết, sau khi tra
   cứu "⚡ API (Nhanh)" trong modal "🔍 Kiểm tra thông quan" xác nhận
   ĐÃ thông quan — xem static/js/main.js (xayDungHeader). Tự động tra lại
   MỖI LẦN mở panel chi tiết (nếu lô hàng chưa từng xác nhận đã thông
   quan) — xem hàm tuDongKiemTraThongQuan trong main.js. */
.detail-header__thong-quan { color: var(--green); font-weight: 600; }
.detail-header__thong-quan--cho { color: var(--amber); font-weight: 600; }
.detail-header__thong-quan--loi { color: var(--red); font-weight: 600; }
.detail-header__thong-quan--dang { color: var(--ink-faint); font-weight: 500; }

/* ── Icon SVG động cho badge thông quan (hover để xem hiệu ứng) ── */
.detail-header__thong-quan { display: inline-flex; align-items: center; gap: 6px; cursor: default; }
.ktq-trang-thai--tq { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; cursor: default; }
.ktq-trang-thai--tq .tt-ico { margin-top: 1px; }
:is(.detail-header__thong-quan, .ktq-trang-thai--tq) .tt-ico { width: 20px; height: 20px; flex: none; overflow: visible; }
:is(.detail-header__thong-quan, .ktq-trang-thai--tq) .tt-ico * { transform-box: fill-box; transform-origin: center; }
:is(.detail-header__thong-quan, .ktq-trang-thai--tq) .bg { fill: currentColor; opacity: .14; transition: opacity .25s, transform .25s; }
:is(.detail-header__thong-quan, .ktq-trang-thai--tq) .ring { fill: none; stroke: currentColor; stroke-width: 1.8; }
:is(.detail-header__thong-quan, .ktq-trang-thai--tq) .pulse { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: 0; }
:is(.detail-header__thong-quan, .ktq-trang-thai--tq):hover .bg { opacity: .28; transform: scale(1.08); }
/* Đã thông quan: tick vẽ lại + vòng nảy + sóng lan */
:is(.detail-header__thong-quan, .ktq-trang-thai--tq) .tick { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 0; }
:is(.detail-header__thong-quan, .ktq-trang-thai--tq):hover .ring { animation: tt-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
:is(.detail-header__thong-quan, .ktq-trang-thai--tq):hover .tick { animation: tt-draw .5s ease-out .05s backwards; }
:is(.detail-header__thong-quan, .ktq-trang-thai--tq):hover .pulse { animation: tt-pulse .8s ease-out; }
/* Chưa thông quan: kim phút quay, kim giờ nhích, sóng lan liên tục */
:is(.detail-header__thong-quan, .ktq-trang-thai--tq) .hand { stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
:is(.detail-header__thong-quan, .ktq-trang-thai--tq) .dot { fill: currentColor; }
:is(.detail-header__thong-quan, .ktq-trang-thai--tq) .hand-m, :is(.detail-header__thong-quan, .ktq-trang-thai--tq) .hand-h { transform-origin: 12px 12px; transform-box: view-box; }
:is(.detail-header__thong-quan, .ktq-trang-thai--tq) .hand-h { transition: transform .9s ease-in-out; }
:is(.detail-header__thong-quan--cho, .ktq-trang-thai--cho):hover .hand-m { animation: tt-spin 1.1s cubic-bezier(.5, 0, .3, 1) infinite; }
:is(.detail-header__thong-quan--cho, .ktq-trang-thai--cho):hover .hand-h { transform: rotate(60deg); }
:is(.detail-header__thong-quan--cho, .ktq-trang-thai--cho):hover .pulse { animation: tt-pulse 1.1s ease-out infinite; }
@keyframes tt-draw { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }
@keyframes tt-pop { 0% { transform: scale(.8); } 100% { transform: scale(1); } }
@keyframes tt-pulse { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes tt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  :is(.detail-header__thong-quan, .ktq-trang-thai--tq) * { animation: none !important; transition: none !important; }
}

.detail-header__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.detail-header__nav {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 12.5px;
  cursor: pointer;
}

.detail-header__nav:hover:not(:disabled) { border-color: var(--navy-3); color: var(--chu-navy, var(--navy)); }
.detail-header__nav:disabled { opacity: .35; cursor: not-allowed; }

.detail-header__pos { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); margin: 0 2px; }

.detail-toggle {
  background: var(--surface);
  color: var(--ink-soft);
  border: 1px solid var(--border);
  padding: 5px 12px;
  font-size: 12px;
  border-radius: var(--radius-s);
}
.detail-toggle:hover:not(:disabled) { background: var(--border-soft); border-color: var(--navy-3); color: var(--chu-navy, var(--navy)); }
.detail-toggle--done { background: var(--green-soft); color: var(--green); border-color: transparent; }
.detail-toggle--done:hover:not(:disabled) { background: #D3EBDA; }

.detail-phu-trach {
  background: var(--surface);
  color: var(--ink-soft);
  border: 1px solid var(--border);
  padding: 5px 8px;
  font-size: 12px;
  border-radius: var(--radius-s);
  max-width: 140px;
  cursor: pointer;
}
.detail-phu-trach:hover:not(:disabled) { border-color: var(--navy-3); color: var(--chu-navy, var(--navy)); }
.detail-phu-trach:disabled { opacity: .6; cursor: wait; }

.bot-collapse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  background: var(--border-soft, #F3F6F5);
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 14px;
}
.bot-collapse-header:hover { background: var(--border, #E3E8E7); }
.bot-collapse-caret {
  transition: transform .15s ease;
  color: var(--ink-soft);
  flex-shrink: 0;
  margin-left: 8px;
}
.bot-collapse-header.is-open .bot-collapse-caret { transform: rotate(90deg); }
.bot-collapse-body { padding: 16px; }

.detail-panel__body { flex: 1; overflow-y: auto; padding: 18px 28px; }

/* ─── Footer: lưới nút đồng bộ kích thước — mỗi hàng 4 nút bằng nhau ─── */
.detail-footer {
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 10px 20px;
  border-top: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--ink) 2%, var(--surface));
}

.detail-footer .btn {
  width: 100%;
  height: 34px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  gap: 4px;
  padding: 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .detail-footer { grid-template-columns: repeat(2, 1fr); }
}

.detail-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13.5px;
}

.detail-row__label { color: var(--ink-soft); }
.detail-row__value { font-family: var(--font-mono); text-align: right; }

.detail-title { font-size: 18px; font-weight: 600; margin: 0; font-family: var(--font-mono); white-space: nowrap; }
.detail-sub { color: var(--ink-soft); font-size: 13.5px; margin: 0; }

.detail-section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 20px 0 8px;
}

/* ─── Accordion (các khối gấp/mở trong panel chi tiết lô hàng) ─────────── */

.accordion { border: 1px solid var(--border-soft); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.accordion + .accordion { margin-top: 0; }

/* ─── Hàng 2 cột song song ở panel chi tiết lô hàng: cột trái "Thông tin
   tờ khai hải quan", cột phải "Hồ sơ lô hàng" + "Vận tải đường bộ" xếp
   chồng lên nhau. Mỗi cột là 1 flex-column riêng nên các accordion bên
   trong (.accordion) không cần margin-bottom vẫn cách đều nhờ "gap".
   Xuống 1 cột trên màn hình hẹp. ─────────────────────────────────────── */
.detail-2col { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 10px; }
.detail-2col__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.detail-2col__col > .accordion { margin-bottom: 0; }
@media (max-width: 720px) {
  .detail-2col { flex-direction: column; }
}

.accordion__head {
  list-style: none;
  cursor: pointer;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--chu-navy, var(--navy));
  background: color-mix(in srgb, var(--ink) 4%, var(--surface));
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  transition: background-color 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
}
.accordion__head::-webkit-details-marker { display: none; }
.accordion__head::marker { content: ""; }
/* Rê chuột: nền cam accent rõ hẳn (thay vì #E9F0EF quá gần màu nền mặc
   định #F4F7F7) + chữ nhích sang phải 1 chút cho có cảm giác "bấm được". */
.accordion__head:hover {
  background: var(--accent-soft);
  color: var(--accent-ink);
  padding-left: 17px;
}
.accordion[open] > .accordion__head { background: color-mix(in srgb, var(--ink) 6%, var(--surface)); }

.accordion__icon {
  display: inline-block;
  font-size: 11px;
  color: var(--ink-soft);
  transition: transform 0.22s cubic-bezier(.4, 0, .2, 1), color 0.18s ease;
}
.accordion[open] > .accordion__head .accordion__icon { transform: rotate(90deg); }
.accordion__head:hover .accordion__icon { color: var(--accent-ink); }

/* Mở/đóng mượt bằng kỹ thuật grid-template-rows 0fr → 1fr: ".accordion__body"
   luôn được render (không còn bị trình duyệt ẩn cứng display:none như
   <details> mặc định — rule của ta ở đây override được UA stylesheet vì
   author CSS luôn thắng UA style dù specificity ngang nhau), chỉ co/giãn
   chiều cao qua grid-row; "-inner" bên trong overflow:hidden để nội dung
   không tràn ra lúc đang co. Thêm mờ dần (opacity) cho mượt mắt hơn nữa. */
.accordion__body {
  display: grid;
  content-visibility: visible; /* một số engine mới ẩn nội dung <details> đóng
    bằng content-visibility:hidden thay vì display:none — ghi đè lại để
    kỹ thuật grid-rows bên dưới còn tác dụng */
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.28s cubic-bezier(.4, 0, .2, 1), opacity 0.22s ease;
}
.accordion[open] > .accordion__body {
  grid-template-rows: 1fr;
  opacity: 1;
}
.accordion__body-inner {
  overflow: hidden;
  min-height: 0; /* phần tử con của grid mặc định min-height:auto, không
    cho co về 0 được nếu thiếu dòng này */
  padding: 12px 14px;
  font-size: 13.5px;
}

.accordion--canh-bao > .accordion__head { background: var(--accent-soft); color: var(--accent-ink); }

/* ─── Khối CẢNH BÁO — hiện thẳng dạng text, KHÔNG thu gọn/mở ───────────── */

.canh-bao-box {
  border: 1px solid #F0C6A8;
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 11px 14px 13px;
  background: var(--accent-soft);
}

.canh-bao-box__hang-tieu-de {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.canh-bao-box--an .canh-bao-box__hang-tieu-de { margin-bottom: 0; }
.canh-bao-box--an .canh-bao-box__noi-dung { display: none; }

/* Tắt công tắc → chuyển màu trung tính giống khối GHI CHÚ (bỏ màu cam
   nổi bật vì nội dung đang bị ẩn), giữ nguyên kích thước như lúc bật. */
.canh-bao-box--an {
  background: var(--border-soft);
  border-color: var(--border);
}
.canh-bao-box--an .canh-bao-box__title { color: var(--ink-soft); }
.canh-bao-box--an .canh-bao-box__cong-tac-track { background: #C7D2D6; }

.canh-bao-box__cong-tac {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.canh-bao-box__cong-tac-input { position: absolute; opacity: 0; width: 0; height: 0; }
.canh-bao-box__cong-tac-track {
  position: relative;
  width: 30px;
  height: 17px;
  border-radius: 999px;
  background: #E0B48C;
  transition: background 0.18s ease;
}
.canh-bao-box__cong-tac-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(18, 50, 69, 0.35);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.canh-bao-box__cong-tac-input:checked ~ .canh-bao-box__cong-tac-track { background: var(--accent-ink); }
.canh-bao-box__cong-tac-input:checked ~ .canh-bao-box__cong-tac-track .canh-bao-box__cong-tac-thumb { transform: translateX(13px); }
.canh-bao-box__cong-tac-input:focus-visible ~ .canh-bao-box__cong-tac-track { outline: 2px solid var(--navy-3); outline-offset: 2px; }

.canh-bao-box__title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-ink);
  letter-spacing: .02em;
  margin-bottom: 4px;
}

.canh-bao-box__line {
  font-size: 13.5px;
  color: var(--accent-ink);
  margin: 6px 0 0;
  line-height: 1.5;
}

/* Các tên chi phí cảnh báo — bấm để thêm nhanh dòng chi phí đó (xem
   chi_phi.js: hienCanhBaoThieu + sự kiện click uỷ quyền). */
.canh-bao-box__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.canh-bao-chip {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--surface);
  border: 1px solid #F0C6A8;
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.canh-bao-chip:hover { background: var(--accent-soft); border-color: var(--accent); }
.canh-bao-chip:active { transform: translateY(1px); }
.canh-bao-chip--da-them,
.canh-bao-chip:disabled {
  background: var(--border-soft);
  border-color: var(--border);
  color: var(--ink-faint);
  cursor: default;
}
/* Số tiền gợi ý (trung vị lịch sử) hiện mờ hơn tên chi phí, tránh rối mắt */
.canh-bao-chip__tien {
  font-weight: 400;
  opacity: .75;
}

/* ─── Khối GHI CHÚ — hiện thẳng dạng text, KHÔNG thu gọn/mở (chỉ hiện khi
   đã có ghi chú — xem xayDungKhoiGhiChu trong main.js) ─────────────────── */

.ghi-chu-box {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 11px 14px 13px;
  background: var(--border-soft);
}

.ghi-chu-box__title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--chu-navy, var(--navy));
  letter-spacing: .02em;
  margin-bottom: 4px;
}

.ghi-chu-box__line {
  font-size: 13.5px;
  color: var(--ink);
  margin: 6px 0 0;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* ─── Danh sách hồ sơ (tên file) trong mục "HỒ SƠ LÔ HÀNG" ─────────────── */

.ho-so-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ho-so-list__item {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border-soft);
}

.ho-so-list__item:last-child { border-bottom: none; }

.ho-so-list__item--dang-keo { opacity: .35; }

.ho-so-list__keo {
  flex-shrink: 0;
  cursor: grab;
  color: var(--chu-navy-3, var(--navy-3));
  font-size: 14px;
  line-height: 1;
  user-select: none;
}
.ho-so-list__keo:active { cursor: grabbing; }

.ho-so-list__link {
  display: block;
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  color: var(--ink);
  text-decoration: none;
  padding: 5px 0;
  word-break: break-all;
  cursor: pointer;
}

.ho-so-list__link:hover {
  color: var(--primary, #1a56db);
  text-decoration: underline;
}

.ho-so-list__tai {
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-s);
  width: 26px;
  height: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--chu-navy-3, var(--navy-3));
  font-size: 13px;
}
.ho-so-list__tai:hover { background: var(--border-soft); }
.ho-so-list__tai:disabled { opacity: .5; cursor: default; background: var(--surface); }

/* Huy hiệu loại file (PDF/DOC/XLS/IMG) trước tên file — cùng bảng màu với
   .hoso-row__icon ở modal "Hồ sơ lô hàng". */
.ho-so-list__icon {
  --hs-c: var(--ink-faint);
  flex-shrink: 0;
  width: 34px;
  height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--hs-c) 12%, var(--surface));
  color: var(--hs-c);
  border: 1px solid color-mix(in srgb, var(--hs-c) 28%, var(--surface));
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  user-select: none;
}
.ho-so-list__icon--pdf { --hs-c: #C2452F; }
.ho-so-list__icon--doc { --hs-c: #2F6FB5; }
.ho-so-list__icon--xls { --hs-c: #2E7D53; }
.ho-so-list__icon--img { --hs-c: #7B61D1; }

/* Hiệu ứng rê chuột cho từng dòng file: nền đổi màu, dòng xê nhẹ sang phải,
   huy hiệu loại file phóng nhẹ, nút tải chuyển cam. Màu nền lấy theo loại
   file (--hs-c) để PDF ra đỏ nhạt, DOC xanh dương nhạt, XLS xanh lá nhạt... */
.ho-so-list__item {
  padding: 2px 6px;
  margin: 0 -6px;
  border-radius: var(--radius-s);
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ho-so-list__item:hover {
  background: var(--accent-soft);
  transform: translateX(3px);
  box-shadow: inset 3px 0 0 var(--accent);
}
.ho-so-list__item:has(.ho-so-list__icon--pdf):hover { background: color-mix(in srgb, #C2452F 9%, var(--surface)); box-shadow: inset 3px 0 0 #C2452F; }
.ho-so-list__item:has(.ho-so-list__icon--doc):hover { background: color-mix(in srgb, #2F6FB5 9%, var(--surface)); box-shadow: inset 3px 0 0 #2F6FB5; }
.ho-so-list__item:has(.ho-so-list__icon--xls):hover { background: color-mix(in srgb, #2E7D53 9%, var(--surface)); box-shadow: inset 3px 0 0 #2E7D53; }
.ho-so-list__item:has(.ho-so-list__icon--img):hover { background: color-mix(in srgb, #7B61D1 9%, var(--surface)); box-shadow: inset 3px 0 0 #7B61D1; }
.ho-so-list__item--dang-keo:hover { transform: none; }

.ho-so-list__icon { transition: transform .18s ease, box-shadow .18s ease; }
.ho-so-list__item:hover .ho-so-list__icon {
  transform: scale(1.08);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--hs-c) 35%, transparent);
}
.ho-so-list__keo { transition: color .18s ease; }
.ho-so-list__item:hover .ho-so-list__keo { color: var(--accent); }
.ho-so-list__link { transition: color .18s ease; }
.ho-so-list__item:hover .ho-so-list__link { color: var(--chu-navy, var(--navy)); font-weight: 500; }

.ho-so-list__tai { transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
.ho-so-list__tai:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-1px);
}
.ho-so-list__tai:active:not(:disabled) { transform: translateY(0) scale(.94); }

@media (prefers-reduced-motion: reduce) {
  .ho-so-list__item:hover,
  .ho-so-list__item:hover .ho-so-list__icon,
  .ho-so-list__tai:hover:not(:disabled) { transform: none; }
}

/* ─── Bảng thông tin tờ khai hải quan ───────────────────────────────────── */

.info-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.info-table th {
  text-align: left;
  padding: 8px 10px;
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  font-size: 12px;
}
.info-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.info-table tr:nth-child(even) { background: color-mix(in srgb, var(--ink) 3%, var(--surface)); }
.info-table__label { color: var(--ink-soft); width: 38%; white-space: nowrap; }
.info-table__value { font-family: var(--font-mono); }

/* ─── Bảng chung ".table" — popup "Lịch sử thao tác" (.ls-table) và popup
   "Quản lý danh sách hàng hóa" (.dsh-table) trong Cấu hình. Trước đây các
   bảng này KHÔNG có CSS riêng nên trình duyệt tự co giãn cột theo kiểu
   mặc định → cột "Loại"/"Hành động" bị bóp quá hẹp, chữ dồn xuống 4-5 dòng
   rất rối mắt. Nay: độ rộng cột cố định (table-layout:fixed + colgroup do
   JS gắn), header dính khi cuộn dọc, các cột nội dung ngắn (thời gian,
   người dùng, đại lý, loại, đối tượng, IP) không xuống dòng — cắt gọn kèm
   "..." và có title="" để xem đủ khi rê chuột; chỉ "Hành động"/"Mô tả" (dễ
   dài hơn hẳn) mới xuống dòng bình thường. ─────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  padding: var(--table2-th-pad, 8px 10px);
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}
.table td {
  padding: var(--table2-td-pad, 8px 10px);
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
  word-break: break-word;
}
.table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--ink) 3%, var(--surface)); }
.table tbody tr:hover td { background-color: rgba(18, 50, 69, 0.06); }
.table td.td-nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0; /* bắt buộc để text-overflow hoạt động đúng trong ô table-layout:fixed */
}

/* Popup "Lịch sử thao tác" — 8 cột: Thời gian · Người dùng · Đại lý · Loại ·
   Hành động · Đối tượng · Mô tả · IP. */
.ls-table col.ls-col-thoi-gian  { width: 12%; }
.ls-table col.ls-col-nguoi-dung { width: 13%; }
.ls-table col.ls-col-dai-ly     { width: 6%;  }
.ls-table col.ls-col-loai       { width: 9%;  }
.ls-table col.ls-col-hanh-dong  { width: 15%; }
.ls-table col.ls-col-doi-tuong  { width: 13%; }
.ls-table col.ls-col-mo-ta      { width: 22%; }
.ls-table col.ls-col-ip         { width: 10%; }

/* Popup "Quản lý danh sách hàng hóa" — 7 cột: Đại lý · Số tờ khai · Mã lô ·
   Mã HS · Mô tả hàng hóa · Số lượng · Đơn vị. */
.dsh-table col.dsh-col-dai-ly    { width: 9%;  }
.dsh-table col.dsh-col-so-tk     { width: 16%; }
.dsh-table col.dsh-col-ma-lo     { width: 13%; }
.dsh-table col.dsh-col-ma-hs     { width: 11%; }
.dsh-table col.dsh-col-mo-ta     { width: 36%; }
.dsh-table col.dsh-col-so-luong  { width: 8%;  }
.dsh-table col.dsh-col-don-vi    { width: 7%;  }

/* ─── Mọi popup (.modal-box): cỡ chữ/khoảng cách dòng gọn lại giống
   bảng THÔNG TIN TỜ KHAI HẢI QUAN ở panel chi tiết lô hàng (.info-table).
   Chỉ áp dụng trong .modal-box — KHÔNG ảnh hưởng các trang full-page
   dùng chung class .field (login, form tài khoản). ──────────────────── */
.modal-box .field { margin-bottom: 10px; }
.modal-box .field__label { font-size: 12px; margin-bottom: 4px; }
.modal-box .field__input { padding: 8px 10px; font-size: 13px; }
.modal-box textarea.field__input { min-height: 90px; }

/* ─── Toast — xếp chồng nhiều cái, icon riêng từng loại, thanh đếm ngược ── */

.toast-wrap {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}
.toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: 380px;
  background: var(--navy);
  color: #fff;
  padding: 12px 38px 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 8px 24px rgba(18, 50, 69, .28);
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition: opacity .2s, transform .2s;
  pointer-events: auto;
  overflow: hidden;
}
.toast--show { opacity: 1; transform: translateY(0) scale(1); }
.toast--dang-dong { opacity: 0; transform: translateY(4px) scale(.97); }
.toast--ok { background: var(--green); }
.toast--loi { background: var(--red); }
.toast--canh-bao { background: #9A7D0A; }
.toast__icon { flex: none; width: 18px; height: 18px; }
.toast__noi-dung { flex: 1 1 auto; word-break: break-word; }
.toast__dong {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(255, 255, 255, .14);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  padding: 0;
  opacity: .75;
  transition: opacity .15s, background .15s;
}
.toast__dong:hover { opacity: 1; background: rgba(255, 255, 255, .26); }
.toast__dong svg { width: 11px; height: 11px; }
.toast__thanh {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: rgba(255, 255, 255, .45);
}
.toast--khong-tu-dong { padding-right: 38px; }

/* ─── Hộp thoại xác nhận dùng chung (window.hienXacNhan, thay confirm()) ── */
/* Tăng độ đặc hiệu (2 class) để CHẮC CHẮN thắng .modal-overlay (z-index:60)
   và .modal-overlay--nested (z-index:70) dù quy tắc đó nằm SAU trong file
   này — trước đây chỉ ghi ".xac-nhan-overlay" (1 class, cùng độ đặc hiệu
   với ".modal-overlay") nên bị ".modal-overlay" khai báo sau đè mất
   z-index:95, khiến hộp xác nhận Xoá bị nằm DƯỚI modal chi tiết đợt quyết
   toán (mở bằng modal-overlay--nested). */
.modal-overlay.xac-nhan-overlay { z-index: 95; }

/* Popup "Xem trước PDF" phải NỔI TRÊN modal "Kiểm tra thông quan" (cùng
   z-index:60 nên modal nào đứng sau trong DOM sẽ đè lên) — khi bấm "Xuất
   PDF" trong modal Kiểm tra TQ, popup xem trước trước đây nằm dưới. */
#modalXemTruocPdf.modal-overlay { z-index: 72; }
.xac-nhan-overlay .modal-box__hint {
  margin: 0 0 4px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ─── Menu chuột phải trên bảng lô hàng (Xoá lô hàng) ───────────────────── */

.ctx-menu {
  position: fixed;
  z-index: 90;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-card);
  padding: 4px;
  min-width: 170px;
}
.ctx-menu[hidden] { display: none; }

.ctx-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 12px;
  font-size: 13.5px;
  border-radius: var(--radius-s);
  cursor: pointer;
  color: var(--ink);
}
.ctx-menu__item:hover { background: var(--border-soft); }
.ctx-menu__item--xoa { color: var(--red); }
.ctx-menu__item--xoa:hover { background: var(--red-soft); }

/* ─── Modal: Thêm lô hàng mới ────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(18, 50, 69, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
  overflow-y: auto;
}

/* Mở & ĐÓNG popup đều mượt, chỉ bằng CSS — không cần sửa JS ở đâu cả.
   JS khắp app chỉ toggle thuộc tính [hidden] (thêm/gỡ) như trước giờ vẫn
   làm; nhờ transition trên chính "display" (transition-behavior:
   allow-discrete) mà khi [hidden] được gắn vào, trình duyệt KHÔNG chuyển
   display:none ngay mà đợi hết animation mờ dần/thu nhỏ rồi mới ẩn hẳn.
   @starting-style định nghĩa trạng thái "khung hình đầu tiên" khi popup
   vừa được hiện ra (từ display:none) để có cái mà chạy transition tới —
   không có nó thì trình duyệt không biết "mờ dần TỪ đâu" khi vừa hiện. */
.modal-overlay {
  opacity: 1;
  transition: opacity 0.26s ease, display 0.26s ease allow-discrete;
}
.modal-overlay > .modal-box {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.modal-overlay[hidden] {
  display: none;
  opacity: 0;
  pointer-events: none;
}
.modal-overlay[hidden] > .modal-box {
  opacity: 0;
  transform: translateY(20px) scale(0.96);
}

@starting-style {
  .modal-overlay:not([hidden]) {
    opacity: 0;
  }
  .modal-overlay:not([hidden]) > .modal-box {
    opacity: 0;
    transform: translateY(28px) scale(0.95);
  }
}

.modal-overlay--nested {
  z-index: 70;
  background: rgba(18, 50, 69, 0.35);
}
.modal-overlay--nested .modal-box {
  max-width: 420px;
}

.modal-box {
  background: var(--surface);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  width: 100%;
  max-width: 560px;
  padding: 24px 26px 26px;
}

.modal-box--wide { max-width: 920px; }
.modal-box--xwide {
  max-width: 1320px;
  width: calc(100% - 32px);
  padding: 18px 22px 20px;
}
.modal-box--xwide .ktq-nhom-nhan { margin: 0 0 6px; }
.modal-box--xwide .tkm-ds-head { margin-bottom: 6px; }
.modal-box--xwide .qt-hai-cot { margin-bottom: 14px; }
.modal-box--xwide .tkm-them-grid { margin-bottom: 0; }
/* .btn--ghost mặc định width:100% (xem ghi chú ở .nx-form-actions phía
   dưới) — trong popup "Lịch sử thao tác" nút "Xóa lọc" nằm chung hàng
   flex với "Tải lại" nên phải trả lại width tự nhiên, không thì tràn
   hết cả hàng, lệch hẳn so với nút cạnh bên. */
#modalLichSu .btn--ghost { width: auto; margin-top: 0; }

.modal-box--drag-over {
  outline: 3px dashed var(--accent);
  outline-offset: -6px;
}

.modal-box__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.modal-box__title {
  font-size: 19px;
  font-weight: 600;
  margin: 0;
  color: var(--chu-navy, var(--navy));
}

.modal-box__close {
  background: none;
  border: none;
  font-size: 16px;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-s);
}
.modal-box__close:hover { background: var(--border-soft); color: var(--ink); }

.modal-box__hint {
  font-size: 12.5px;
  color: var(--ink-soft);
  background: var(--border-soft);
  border-radius: var(--radius-s);
  padding: 10px 12px;
  margin: 12px 0 18px;
  line-height: 1.6;
}

.modal-alert {
  border-radius: var(--radius-s);
  padding: 10px 14px;
  font-size: 13.5px;
  margin-bottom: 16px;
}
.modal-alert--ok { background: var(--green-soft); color: var(--green); border: 1px solid #BFE0CC; }
.modal-alert--loi { background: var(--red-soft); color: var(--accent-ink); border: 1px solid #E9C3B4; }
.modal-alert--canh-bao { background: var(--amber-soft); color: var(--amber); border: 1px solid #F7DC6F; }

/* ─── Modal: Xem trước file (PDF / ảnh / Word / Excel...) — dùng chung
   toàn app, xem static/js/xem_truoc_file.js. z-index cao hơn mọi modal
   khác (kể cả modal-overlay--nested:70 và xac-nhan-overlay:95) vì có
   thể được mở TỪ BÊN TRONG các modal đó (vd: từ trong "📁 Hồ sơ lô
   hàng" hay "🧾 Chứng từ vận tải"). ────────────────────────────────── */
.xtf-overlay {
  z-index: 300;
  align-items: stretch;
  padding: 20px;
}
.xtf-box {
  max-width: 1100px;
  width: 100%;
  height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  padding: 16px 18px 18px;
}
.xtf-header {
  flex: none;
  margin-bottom: 10px;
  gap: 12px;
}
.xtf-title {
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xtf-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.xtf-btn { margin-top: 0; width: auto; text-decoration: none; }
.xtf-close { flex: none; }

.xtf-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: var(--bg);
  border-radius: var(--radius-m);
  border: 1px solid var(--border-soft);
}

.xtf-loading {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 14px;
}
.xtf-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  animation: xtf-giay 0.8s linear infinite;
}
@keyframes xtf-giay { to { transform: rotate(360deg); } }

.xtf-loi {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 24px;
  color: var(--ink-soft);
}
.xtf-loi__icon .ico-solo { width: 34px; height: 34px; color: var(--amber); }
.xtf-loi p { margin: 0; max-width: 440px; font-size: 14px; }
.xtf-loi__hint { font-size: 12.5px; color: var(--ink-faint); }

.xtf-pdf {
  width: 100%;
  height: 100%;
  min-height: 60vh;
  border: none;
  display: block;
}
.xtf-pdf__fallback { display: none; }

.xtf-anh-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.xtf-anh-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
}
.xtf-anh-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: var(--radius-s);
  padding: 5px 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
}
.xtf-anh-btn:hover { background: var(--bg); color: var(--ink); }
.xtf-anh-btn .ico, .xtf-anh-btn .ico-solo { width: 16px; height: 16px; }
.xtf-anh-btn--chu { margin-left: auto; }
.xtf-anh-ty-le {
  min-width: 46px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
}
.xtf-anh-tach {
  width: 1px;
  align-self: stretch;
  background: var(--border-soft);
  margin: 0 4px;
}

.xtf-anh-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
  touch-action: none;
}
.xtf-anh {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-card);
  background: var(--surface);
  transition: transform 0.08s linear;
  user-select: none;
}
.xtf-anh--to { cursor: grab; }
.xtf-anh--to:active { cursor: grabbing; }

.xtf-text {
  margin: 0;
  padding: 18px 22px;
  font-family: var(--font-mono);
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink);
}

.xtf-docx {
  background: var(--surface);
  max-width: 820px;
  margin: 18px auto;
  padding: 40px 48px;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-card);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink);
}
.xtf-docx img { max-width: 100%; }
.xtf-docx table { border-collapse: collapse; width: 100%; margin: 10px 0; }
.xtf-docx table td, .xtf-docx table th { border: 1px solid var(--border); padding: 6px 8px; }

.xtf-sheet-wrap { height: 100%; display: flex; flex-direction: column; }
.xtf-sheet-tabs {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 12px 0;
}
.xtf-sheet-tab {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.xtf-sheet-tab.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.xtf-sheet-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px; }
.xtf-sheet-table {
  background: var(--surface);
  font-size: 12.5px;
  white-space: nowrap;
}
.xtf-sheet-table td, .xtf-sheet-table th { border: 1px solid var(--border-soft); padding: 4px 8px; }
.xtf-sheet-cat { margin: 10px 2px 0; font-size: 12px; color: var(--ink-faint); text-align: center; }

@media (max-width: 640px) {
  .xtf-overlay { padding: 0; }
  .xtf-box { height: 100vh; border-radius: 0; padding: 12px 12px 14px; }
  .xtf-title { font-size: 13px; }
  .xtf-btn { padding: 6px 9px; font-size: 0; }
  .xtf-btn .ico { margin-right: 0; }
  .xtf-docx { padding: 20px; margin: 10px; }
  .xtf-anh-toolbar { padding: 6px 8px; gap: 3px; }
  .xtf-anh-btn { padding: 5px 7px; }
  .xtf-anh-btn--chu { font-size: 11px; }
}

.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
}

.modal-col .field { margin-bottom: 14px; }

.field__optional { font-weight: 400; color: var(--ink-faint); text-transform: none; }
.field__label--required { color: var(--red); }

/* Dòng chú thích nhỏ dưới 1 field (mô tả preset/preview...) — dùng
   chung cho mọi popup, thay cho việc lặp lại style inline mỗi nơi. */
.field__hint {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ─── Popup "Giao diện" (cau_hinh.html): bố cục 2 cột qua .modal-grid,
   card màu nhấn gọn trong 1 hàng, footer tách riêng nút Áp dụng/Đặt lại
   mặc định khỏi phần chọn lựa để đỡ rối mắt. ─────────────────────────── */
.theme-font-preview {
  margin: 10px 0 0;
  font-size: 18px;
  color: var(--ink);
}

.theme-accent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.theme-accent-swatch {
  flex: 0 0 auto;
  width: 42px;
  height: 38px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  cursor: pointer;
}
.theme-accent-row #fAccentTuyChinh {
  flex: 1 1 130px;
  max-width: 170px;
}
.theme-accent-reset {
  flex: 0 0 auto;
  width: auto;
  margin-top: 0;
  padding: 9px 14px;
  font-size: 12.5px;
  white-space: nowrap;
}

.theme-reset-form { margin-top: 12px; }
.theme-reset-form .btn--ghost { width: auto; }

@media (max-width: 640px) {
  .theme-accent-row #fAccentTuyChinh { max-width: none; }
}

.modal-box__footer {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}
.modal-box__footer .btn { flex: 1; min-width: 160px; }
/* .btn--ghost mặc định full-width + margin-top riêng (dùng ở chỗ khác,
   VD nút "Huỷ" đứng 1 mình) — trong footer 2 nút cạnh nhau (Lưu/Huỷ) thì
   bỏ 2 thuộc tính này để 2 nút cao/rộng đồng bộ, thẳng hàng với nhau. */
.modal-box__footer .btn--ghost { width: auto; margin-top: 0; }

/* Footer "Xem trước PDF" (Quay lại / Lưu PDF) — LUÔN 1 HÀNG, không bao
   giờ wrap xuống 2 dòng dù màn hình hẹp: nút "Quay lại" co gọn theo nội
   dung, nút "Lưu PDF" (chính) chiếm phần còn lại. */
.modal-box__footer--pdf { flex-wrap: nowrap; }
.modal-box__footer--pdf .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; }
.modal-box__footer--pdf .btn--outline { flex: 0 0 auto; }

.luong-picker { display: flex; gap: 8px; }

.luong-pick {
  flex: 1;
  border: 1.5px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-s);
  padding: 9px 10px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink-soft);
}
.luong-pick--xanh { color: var(--green); }
.luong-pick--vang { color: var(--amber); }
.luong-pick--do { color: var(--red); }

.luong-pick--xanh.is-active { background: var(--green-soft); border-color: var(--green); }
.luong-pick--vang.is-active { background: var(--amber-soft); border-color: var(--amber); }
.luong-pick--do.is-active { background: var(--red-soft); border-color: var(--red); }

.hinhthuc-picker { display: flex; gap: 16px; padding: 6px 2px; }

.hinhthuc-pick {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.chitiet-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 12px 14px 6px;
  margin-top: 10px;
  background: var(--border-soft);
}

.chitiet-panel .field { margin-bottom: 10px; }

.socont-row {
  display: grid;
  /* Thứ tự cột: Số container / Số seal / Loại cont / nút xoá — co giãn
     theo tỉ lệ dữ liệu thực tế thay vì cố định px cứng: số container và
     số seal (thường 7-11 ký tự) cần nhiều chỗ nhất, loại cont chỉ cần
     4-5 ký tự (VD "20DC") nên để hẹp nhất. minmax() đảm bảo không ô nào
     bị bóp về 0 khi khung modal hẹp lại. */
  grid-template-columns: minmax(92px, 1.3fr) minmax(84px, 1fr) minmax(60px, 0.7fr) 38px;
  gap: 6px;
  margin-bottom: 8px;
}

.socont-row input { min-width: 0; } /* cho phép grid item co nhỏ hơn nội dung mặc định, tránh tràn */

.socont-row .socont-row__loai,
.socont-row .socont-row__seal {
  width: auto;
}

.socont-row__remove {
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-s);
  width: 38px;
  cursor: pointer;
  color: var(--red);
}
.socont-row__remove:hover { background: var(--red-soft); }

/* ─── Hàng nút "Gợi ý vận tải" + nút "x" xoá nội dung gợi ý vừa điền ──── */
.goi-y-vt-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
/* .btn--block mặc định width:100% — ghi đè lại để chia chỗ với nút "x"
   bên cạnh thay vì chiếm hết cả hàng như khi đứng 1 mình. */
.goi-y-vt-row .btn--block { width: auto; flex: 1 1 auto; min-width: 0; }

.btn-icon-xoa {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-s);
  width: 38px;
  padding: 0;
  cursor: pointer;
  color: var(--red);
}
.btn-icon-xoa:hover { background: var(--red-soft); }
/* Icon mặc định có margin-right + vertical-align -> làm dấu x bị lệch; căn giữa tuyệt đối. */
.btn-icon-xoa .ico { margin: 0; vertical-align: middle; }

/* ─── Modal chi phí phát sinh ────────────────────────────────────────── */
.chiphi-row {
  display: grid;
  grid-template-columns: 1.4fr 0.85fr 0.85fr 1.05fr 1.05fr 104px;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}

.chiphi-row--khoa .field__input { background: color-mix(in srgb, var(--ink) 4%, var(--surface)); color: var(--ink-soft); cursor: default; }

.chiphi-row .field__input { margin: 0; }

/* ─── Đính kèm hóa đơn ngay trong ô "Loại" (chỉ hiện khi = "Có hóa
   đơn") — chọn từ hồ sơ có sẵn hoặc tải file mới, xem chi_phi.js. */
.chiphi-row__loai-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.chiphi-hoadon { display: flex; align-items: center; gap: 4px; min-width: 0; }

.chiphi-hoadon__select { font-size: 12px; height: 30px; padding: 2px 6px; }

.chiphi-hoadon__ten {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
}
.chiphi-hoadon__ten:hover { text-decoration: underline; }

.chiphi-hoadon__go {
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-s);
  width: 20px;
  height: 20px;
  line-height: 1;
  font-size: 11px;
  cursor: pointer;
  color: var(--red);
}
.chiphi-hoadon__go:hover { background: var(--red-soft); }

.chiphi-hoadon__dangtai,
.chiphi-hoadon__goiy { font-size: 11.5px; color: var(--ink-faint); }

/* Cảnh báo trong cột "Hóa đơn" của bảng chi tiết chi phí (panel chi
   tiết lô hàng, KHÔNG phải modal sửa) — dòng "Có hóa đơn" nhưng chưa
   đính kèm file, xem main.js. */
.canh-bao-thieu-hd { color: var(--amber); font-weight: 600; white-space: nowrap; }
.canh-bao-thieu-hd--btn {
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 2px;
}
.canh-bao-thieu-hd--btn:hover { color: var(--amber-ink, var(--amber)); text-decoration-style: solid; }

.chiphi-row__actions { display: flex; gap: 4px; }

.chiphi-row__edit {
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-s);
  width: 30px;
  height: 40px;
  cursor: pointer;
  color: var(--chu-navy-3, var(--navy-3));
}
.chiphi-row__edit:hover { background: var(--border-soft); }

.chiphi-row__thukhach {
  flex-shrink: 0;
  border: 1px solid var(--accent);
  background: var(--surface);
  border-radius: var(--radius-s);
  width: 30px;
  height: 40px;
  cursor: pointer;
  color: var(--accent);
  font-size: 15px;
}
.chiphi-row__thukhach:hover { background: var(--accent-soft); }
.chiphi-row__thukhach:disabled { opacity: .5; cursor: default; background: var(--surface); }

.chiphi-row__remove {
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-s);
  width: 30px;
  height: 40px;
  cursor: pointer;
  color: var(--red);
}
.chiphi-row__remove:hover { background: var(--red-soft); }

.chiphi-list__head {
  display: grid;
  grid-template-columns: 1.4fr 0.85fr 0.85fr 1.05fr 1.05fr 104px;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 8px;
  padding: 0 2px;
}

.chiphi-list__empty {
  text-align: center;
  color: var(--ink-faint);
  font-size: 13.5px;
  padding: 18px 0;
}

/* ─── "🚢 Lịch tàu dự kiến" trong form báo giá (bao_gia.js) — 8 cột,
   grid riêng (khác 6 cột của .chiphi-row dùng cho hàng hoá/dịch vụ). */
.bgf-lich-tau-head,
.bgf-lich-tau-row {
  display: grid;
  grid-template-columns: 1fr 0.85fr 0.85fr 0.9fr 0.9fr 0.9fr 1fr 40px;
  gap: 8px;
  align-items: center;
}
.bgf-lich-tau-head {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 8px;
  padding: 0 2px;
}
.bgf-lich-tau-row { margin-bottom: 8px; }
.bgf-lich-tau-row .field__input { margin: 0; }

/* Dòng hàng hoá của lô hàng (báo giá logistics) */
.bgf-hang-head,
.bgf-hang-row {
  display: grid;
  grid-template-columns: 2fr 0.9fr 0.8fr 0.9fr 1fr 1fr 40px;
  gap: 8px;
  align-items: center;
}
.bgf-hang-head {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 14px 0 8px;
  padding: 0 2px;
}
.bgf-hang-row { margin-bottom: 8px; }
.bgf-hang-row .field__input { margin: 0; }
.bgf-hang-tong {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 2px 2px 8px;
  text-align: right;
}
@media (max-width: 720px) {
  .bgf-hang-head, .bgf-hang-row { grid-template-columns: 1fr; }
  .bgf-hang-head { display: none; }
  .bgf-hang-row .chiphi-row__remove { width: 100%; height: 32px; }
}

@media (max-width: 720px) {
  .bgf-lich-tau-head, .bgf-lich-tau-row { grid-template-columns: 1fr; }
  .bgf-lich-tau-head { display: none; }
  .bgf-lich-tau-row .chiphi-row__remove { width: 100%; height: 32px; }
}

.qtdt-chi-tiet-hang {
  font-size: 12.5px;
  color: var(--ink-soft);
  min-width: 200px;
}
.qtdt-chi-tiet-hang__dong {
  white-space: nowrap;
}
.qtdt-chi-tiet-hang__dong + .qtdt-chi-tiet-hang__dong {
  margin-top: 2px;
}

.qtdt-hang-hoa {
  font-size: 12.5px;
  color: var(--ink-soft);
  min-width: 160px;
}
.qtdt-hang-hoa__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.qtdt-hang-hoa__badge--fcl {
  background: #dbeafe;
  color: #1d4ed8;
}
.qtdt-hang-hoa__badge--lcl {
  background: #fef3c7;
  color: #b45309;
}
.qtdt-hang-hoa__so-luong {
  color: var(--ink-soft);
}
.qtdt-hang-hoa__cont {
  margin-top: 3px;
  font-size: 12px;
  color: var(--ink-faint);
}
.qtdt-hang-hoa__cont-hop {
  margin-top: 2px;
}
.qtdt-hang-hoa__toggle {
  display: block;
  margin-top: 4px;
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--chu-navy-3, var(--navy-3));
  cursor: pointer;
}
.qtdt-hang-hoa__toggle:hover {
  text-decoration: underline;
}



.chiphi-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--chu-navy, var(--navy));
  background: var(--border-soft);
  border-radius: var(--radius-s);
  padding: 10px 14px;
  margin-top: 4px;
}

@media (max-width: 640px) {
  .chiphi-row, .chiphi-list__head { grid-template-columns: 1fr; }
  .chiphi-list__head { display: none; }
  .chiphi-row__actions { width: 100%; }
  .chiphi-row__remove, .chiphi-row__edit, .chiphi-row__thukhach { width: 100%; height: 32px; }
}

/* ─── Modal hồ sơ lô hàng (xem/kéo-thả tải lên/xoá/đổi tên file) ────────── */
.hoso-upload {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.hoso-dropzone {
  flex: 1;
  min-width: 240px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-s);
  padding: 18px 14px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.hoso-dropzone:hover { border-color: var(--accent); }
.hoso-dropzone--dragover { border-color: var(--accent); background: var(--accent-soft); }
#modalVanBanBox.hoso-dropzone--dragover { outline: 2px dashed var(--accent); outline-offset: -6px; background: var(--accent-soft); }
.hoso-dropzone--dang-tai { opacity: .6; pointer-events: none; }

/* Trạng thái đọc nội dung file vừa kéo-thả/chọn (Văn bản — van_ban.py):
   đang đọc (xanh dương, nhấp nháy nhẹ) -> đọc xong: đọc được ít nhất 1
   thông tin (xanh lá) hoặc không đọc được gì (hổ phách/cảnh báo). Chỉ
   đổi màu khung + chữ, không chặn thao tác. */
@keyframes hosoDangDocNhap { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.hoso-dropzone--dang-doc { border-color: var(--navy-3); }
.hoso-dropzone--dang-doc .hoso-dropzone__text { color: var(--chu-navy-3, var(--navy-3)); animation: hosoDangDocNhap 1.1s ease-in-out infinite; }
.hoso-dropzone--doc-duoc { border-color: var(--green); background: var(--green-soft); }
.hoso-dropzone--doc-duoc .hoso-dropzone__text { color: var(--green); font-weight: 600; }
.hoso-dropzone--doc-khong-duoc { border-color: var(--amber); background: var(--amber-soft); }
.hoso-dropzone--doc-khong-duoc .hoso-dropzone__text { color: var(--amber); font-weight: 600; }

.hoso-dropzone__text { margin: 0; color: var(--ink-soft); font-size: 13.5px; }
.hoso-dropzone__link { color: var(--chu-navy-3, var(--navy-3)); font-weight: 600; text-decoration: underline; }

/* Biến thể gọn — dùng khi vùng kéo-thả nằm chung hàng với select/nút bấm
   khác (VD: giấy tờ tài khoản, chứng từ vận tải) thay vì đứng riêng 1
   khu upload lớn như .hoso-upload. */
.hoso-dropzone--nho {
  padding: 8px 12px;
  min-width: 160px;
  text-align: left;
  display: flex;
  align-items: center;
  height: 40px;
  box-sizing: border-box;
}
.hoso-dropzone--nho .hoso-dropzone__text {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Hàng đợi tải hàng loạt nhiều file cùng lúc (thẻ "Văn bản" — kéo-thả
   >1 file vào 1 lần thay vì chỉ 1 file/lượt như trước): mỗi dòng = 1 file,
   tự đọc + lưu tuần tự, đổi màu theo trạng thái giống .hoso-dropzone ở
   trên; file nào không tự đoán được Tiêu đề thì dừng lại ở dòng đó chờ
   nhập tay (không chặn các file còn lại trong hàng đợi). ─────────────── */
.vb-hang-doi__dong {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-s);
  margin-bottom: 8px;
  font-size: 13.5px;
  transition: border-color .15s, background .15s;
}
.vb-hang-doi__dong:last-child { margin-bottom: 0; }
.vb-hang-doi__ten { display: flex; align-items: center; font-weight: 600; word-break: break-all; }
.vb-hang-doi__trang-thai { color: var(--ink-soft); }
.vb-hang-doi__dong--dang-xu-ly { border-color: var(--navy-3); }
.vb-hang-doi__dong--dang-xu-ly .vb-hang-doi__trang-thai { color: var(--chu-navy-3, var(--navy-3)); animation: hosoDangDocNhap 1.1s ease-in-out infinite; }
.vb-hang-doi__dong--xong { border-color: var(--green); background: var(--green-soft); }
.vb-hang-doi__trang-thai--xong { color: var(--green); font-weight: 600; }
.vb-hang-doi__dong--loi { border-color: var(--red); background: var(--red-soft); }
.vb-hang-doi__dong--loi .vb-hang-doi__trang-thai { color: var(--accent-ink); font-weight: 600; }
.vb-hang-doi__dong--can-nhap { border-color: var(--amber); background: var(--amber-soft); }
.vb-hang-doi__nhap { flex: 1 1 200px; min-width: 160px; }
.vb-hang-doi__btn-luu { padding: 6px 14px; font-size: 13px; width: auto; flex-shrink: 0; }

/* ─── Panel "Nhập Tên Hồ Sơ" — hiện sau khi kéo-thả 1 file, thay cho khu
   upload cho tới khi Lưu/Hủy (xem ho_so.js: moPanelNhapTen). ────────── */
.hoso-nhapten { margin-bottom: 18px; }
.hoso-nhieufile { margin-bottom: 18px; }
.hoso-nf-row {
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
  position: relative;
}
.hoso-nf-row__bo {
  position: absolute;
  top: 8px;
  right: 8px;
}

.hoso-nhapten__file-goc {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--ink-soft);
  word-break: break-all;
}
.hoso-nhapten__file-goc span { color: var(--ink); font-weight: 600; }

/* ─── Picker dạng thẻ chọn (radio ẩn) — dùng cho "Lưu vào: Hóa Đơn / Chứng
   Từ Khác" và "Cách lưu: Lưu riêng / Ghép file" — trực quan hơn radio
   thường: mỗi lựa chọn là 1 thẻ bo viền, thẻ đang chọn tô đậm nền + có dấu
   ✓ ở góc, dùng CSS :has() để tô theo trạng thái input:checked bên trong,
   không cần thêm JS. ─────────────────────────────────────────────────── */
.hoso-nhom-picker { display: flex; gap: 10px; padding: 6px 2px; }

.hoso-nhom-pick {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-s);
  padding: 12px 14px;
  background: var(--surface);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.hoso-nhom-pick:hover { border-color: var(--navy-3); background: var(--border-soft); }

.hoso-nhom-pick input[type="radio"] {
  /* Ẩn khỏi mắt nhưng vẫn giữ tương tác bằng bàn phím/trình đọc màn hình
     — label vẫn bấm được cả thẻ nhờ position:relative ở trên. */
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.hoso-nhom-pick:has(input:checked) {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

.hoso-nhom-pick::after {
  content: "";
}
.hoso-nhom-pick:has(input:checked)::after {
  content: "✓";
  position: absolute;
  top: 4px;
  right: 7px;
  font-size: 11px;
  font-weight: 700;
}

.hoso-nhapten__hint {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--chu-navy-3, var(--navy-3));
}

.hoso-nhapten__preview {
  margin: 10px 0 18px;
  font-size: 13px;
  color: var(--ink-soft);
  word-break: break-all;
}
.hoso-nhapten__preview span { color: var(--ink); font-weight: 600; font-family: var(--font-mono, monospace); }

/* Danh sách hồ sơ — mỗi file là 1 thẻ: huy hiệu loại file | tên + (kích
   thước · giờ sửa) | 3 nút Tải / Đổi tên / Xoá. JS: ho_so.js/veDongFile. */
.hoso-list__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 10px;
}
.hoso-list__title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.hoso-list__count {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--navy-3);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  letter-spacing: 0;
}

#dsFileHoSo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100vh - 360px);
  min-height: 120px;
  overflow-y: auto;
  padding: 2px 4px 4px 2px;
}

.hoso-row {
  --hs-c: var(--ink-faint);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.hoso-row:hover { border-color: var(--border); box-shadow: var(--shadow-card); }
.hoso-row--pdf { --hs-c: #C2452F; }
.hoso-row--doc { --hs-c: #2F6FB5; }
.hoso-row--xls { --hs-c: #2E7D53; }
.hoso-row--img { --hs-c: #7B61D1; }

.hoso-row__icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--hs-c) 12%, var(--surface));
  color: var(--hs-c);
  border: 1px solid color-mix(in srgb, var(--hs-c) 28%, var(--surface));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.hoso-row__info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hoso-row__ten {
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hoso-row__ten:hover { color: var(--chu-navy-3, var(--navy-3)); text-decoration: underline; }

.hoso-row__metaline { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.hoso-row__meta { color: var(--ink-soft); font-size: 12.5px; }
.hoso-row__meta--time::before { content: "·"; margin-right: 6px; color: var(--ink-faint); }

.hoso-row__actions { display: flex; gap: 4px; }
.hoso-ib {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--chu-navy-3, var(--navy-3));
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.hoso-ib .ico, .hoso-ib .ico-solo { width: 16px; height: 16px; }
.hoso-ib:hover { background: var(--border-soft); border-color: var(--border); }
.hoso-ib--xoa { color: var(--red); }
.hoso-ib--xoa:hover { background: var(--red-soft); border-color: #E9C3B4; }
.hoso-ib:disabled { opacity: .5; cursor: default; background: transparent; border-color: transparent; }

/* Hiệu ứng rê chuột cho dòng file ở popup "Hồ sơ lô hàng": nền + viền đổi
   theo màu loại file, thẻ nhấc nhẹ, huy hiệu phóng nhẹ, nút Tải/Sửa/Xoá
   đổi màu và nảy lên. */
.hoso-row {
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, transform .18s ease;
}
.hoso-row:hover {
  background: color-mix(in srgb, var(--hs-c) 6%, var(--surface));
  border-color: color-mix(in srgb, var(--hs-c) 45%, var(--surface));
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--hs-c) 45%, transparent), inset 3px 0 0 var(--hs-c);
  transform: translateY(-1px);
}
.hoso-row__icon { transition: transform .18s ease, box-shadow .18s ease; }
.hoso-row:hover .hoso-row__icon {
  transform: scale(1.07) rotate(-2deg);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--hs-c) 35%, transparent);
}
.hoso-row:hover .hoso-row__ten { color: var(--chu-navy, var(--navy)); }
.hoso-ib { transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
.hoso-ib:hover:not(:disabled) { transform: translateY(-2px); }
.hoso-ib:active:not(:disabled) { transform: scale(.92); }
.hoso-ib--tai:hover:not(:disabled) { background: color-mix(in srgb, #2F6FB5 12%, var(--surface)); border-color: #2F6FB5; color: #2F6FB5; }
.hoso-ib--sua:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.hoso-ib--xoa:hover:not(:disabled) { background: var(--red); border-color: var(--red); color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .hoso-row:hover, .hoso-row:hover .hoso-row__icon, .hoso-ib:hover:not(:disabled) { transform: none; }
}

/* Khung kéo-thả riêng của popup Hồ sơ lô hàng */
#hosoDropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 14px;
  border-radius: var(--radius-m);
  background: var(--bg);
}
#hosoDropzone:hover { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
#hosoDropzone.hoso-dropzone--dragover { background: var(--accent-soft); }
.hoso-dropzone__icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--chu-navy-3, var(--navy-3));
  margin-bottom: 2px;
}
.hoso-dropzone__icon .ico-solo { width: 18px; height: 18px; }

/* Hiệu ứng động icon tải lên khi rê chuột / kéo file vào vùng hồ sơ:
   vòng tròn nhô lên + phóng nhẹ + tỏa sáng, mũi tên bên trong nảy lên xuống,
   có 1 vòng sóng lan ra. Chỉ chạy khi hệ điều hành không bật giảm chuyển động
   (tắt trong app đã có html.giam-chuyen-dong lo). */
.hoso-dropzone__icon {
  position: relative;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s, border-color .25s, background .25s;
}
.hoso-dropzone__icon::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}
@keyframes hosoIconNay { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes hosoIconSong { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .hoso-dropzone:hover .hoso-dropzone__icon,
  .hoso-dropzone--dragover .hoso-dropzone__icon {
    transform: translateY(-3px) scale(1.12);
    border-color: var(--accent);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 28%, transparent);
  }
  .hoso-dropzone:hover .hoso-dropzone__icon .ico-solo,
  .hoso-dropzone--dragover .hoso-dropzone__icon .ico-solo {
    animation: hosoIconNay .9s ease-in-out infinite;
  }
  .hoso-dropzone:hover .hoso-dropzone__icon::after,
  .hoso-dropzone--dragover .hoso-dropzone__icon::after {
    animation: hosoIconSong 1.4s ease-out infinite;
  }
  .hoso-dropzone--dragover .hoso-dropzone__icon { transform: translateY(-4px) scale(1.2); }
}
.hoso-dropzone__sub { font-size: 12px; color: var(--ink-faint); }

.hoso-empty { text-align: center; padding: 30px 12px; border: 1px dashed var(--border); border-radius: var(--radius-m); color: var(--ink-soft); }
.hoso-empty[hidden] { display: none; }
.hoso-empty .ico-solo { width: 30px; height: 30px; color: var(--ink-faint); }
.hoso-empty p { margin: 8px 0 2px; font-weight: 600; color: var(--ink); }
.hoso-empty span { font-size: 13px; }

@media (max-width: 640px) {
  .hoso-row { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; padding: 9px 10px; }
  .hoso-row__icon { width: 38px; height: 38px; }
  .hoso-ib { width: 32px; height: 32px; }
  #dsFileHoSo { max-height: calc(100vh - 300px); }
}

/* ─── Modal khoản thu — giống chi phí nhưng không có cột "Loại" ────────── */
.khoanthu-row {
  display: grid;
  grid-template-columns: 1.4fr 0.85fr 0.85fr 1.05fr 68px;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}

.khoanthu-row .field__input { margin: 0; }

.khoanthu-list__head {
  display: grid;
  grid-template-columns: 1.4fr 0.85fr 0.85fr 1.05fr 68px;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 8px;
  padding: 0 2px;
}

@media (max-width: 640px) {
  .khoanthu-row, .khoanthu-list__head { grid-template-columns: 1fr; }
  .khoanthu-list__head { display: none; }
}

/* ─── Modal nhắc nhở — danh sách nhắc nhở kèm mốc thời gian đến hạn,
   gửi Telegram tự động cho "Người phụ trách" khi đến hạn (xem
   nhac_nho.js + telegram_nhac_nho.py) ──────────────────────────────── */
.nhacnho-hint {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 14px;
  line-height: 1.5;
}

.nhacnho-row {
  display: grid;
  grid-template-columns: 1.4fr 0.85fr 1.5fr 0.8fr 68px;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}

.nhacnho-row .field__input { margin: 0; }

.nhacnho-row--hoan-thanh .nhacnho-row__noidung { text-decoration: line-through; color: var(--ink-faint); }

.nhacnho-row__laplai-box {
  display: flex;
  gap: 6px;
}
.nhacnho-row__laplai { flex: 1 1 auto; min-width: 0; }
.nhacnho-row__songay { width: 52px; flex: 0 0 auto; padding-left: 8px; padding-right: 4px; }
.nhacnho-row__donvi { width: 68px; flex: 0 0 auto; padding-left: 8px; padding-right: 4px; }

.nhacnho-list__head {
  display: grid;
  grid-template-columns: 1.4fr 0.85fr 1.5fr 0.8fr 68px;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 8px;
  padding: 0 2px;
}

.nhacnho-row__badge {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 999px;
  text-align: center;
  white-space: nowrap;
  background: var(--border-soft);
  color: var(--ink-soft);
}
.nhacnho-row__badge--cho { background: var(--border-soft); color: var(--ink-soft); }
.nhacnho-row__badge--trehan { background: var(--amber-soft); color: var(--amber); }
.nhacnho-row__badge--gui { background: var(--accent-soft); color: var(--accent-ink); }
.nhacnho-row__badge--xong { background: var(--green-soft); color: var(--green); }

@media (max-width: 640px) {
  .nhacnho-row, .nhacnho-list__head { grid-template-columns: 1fr; }
  .nhacnho-list__head { display: none; }
  .nhacnho-row__actions { width: 100%; }
}

/* ─── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-side { display: none; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .page { padding: 22px 16px 48px; }
  .topbar { padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
  .topbar__navbtn-text, .topbar__uname { display: none; }
  .topbar__navbtn { padding: 0 9px; }
  .modal-grid { grid-template-columns: 1fr; }
  .modal-box { padding: 18px; }
}
/* ─── Modal: Xuất PDF (chọn hồ sơ kèm + xem trước) — đồng bộ tông sáng
   với phần còn lại của app (trước đây dùng nền tối riêng) ────────────── */

.modal-box--dark {
  background: var(--surface);
  color: var(--ink);
}
.modal-box--dark .modal-box__title { color: var(--chu-navy, var(--navy)); }
.modal-box--dark .modal-box__close { color: var(--ink-soft); }
.modal-box--dark .modal-box__close:hover { background: var(--border-soft); color: var(--ink); }
.modal-box--dark .modal-box__hint--dark {
  background: var(--border-soft); color: var(--ink-soft); border: 1px solid var(--border-soft);
}
.hoso-kem-drag-icon { color: var(--ink-faint); }

.hoso-kem-list {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-s);
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 14px;
}

.hoso-kem-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-soft);
  cursor: default;
  user-select: none;
}
.hoso-kem-row:last-child { border-bottom: none; }
.hoso-kem-row--dragging { opacity: .4; }
.hoso-kem-row--dragover { border-top: 2px solid var(--accent); }

.hoso-kem-row__handle {
  cursor: grab;
  color: var(--ink-faint);
  font-size: 15px;
  padding: 2px 4px;
}
.hoso-kem-row__handle:active { cursor: grabbing; }

.hoso-kem-row__check { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }

.hoso-kem-row__label { flex: 1; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.hoso-kem-row__nhom { color: var(--ink-faint); font-size: 12px; }
.hoso-kem-row__ten { font-size: 14px; color: var(--ink); }
.hoso-kem-row__ngay { color: var(--ink-faint); font-size: 12px; white-space: nowrap; }

.hoso-kem-actions { display: flex; gap: 10px; margin-bottom: 4px; }
.hoso-kem-actions .btn { flex: 1; }
.modal-box--dark .btn--outline {
  background: transparent; color: var(--ink-soft); border-color: var(--border);
}
.modal-box--dark .btn--outline:hover { background: var(--border-soft); }
.modal-box--dark .btn--ghost { background: var(--border-soft); color: var(--ink); border: none; }
.modal-box--dark .btn--ghost:hover { background: var(--border); }
.modal-box--dark .modal-box__footer { border-top-color: var(--border-soft); }

/* ─── Popup xem trước PDF (iframe PDF viewer có sẵn của trình duyệt) ──── */

.modal-box--pdf { max-width: 900px; }

/* ─── Modal "Kiểm tra thông quan" ────────────────────────────────────── */
.ktq-nhom-nhan {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 10px;
}
.ktq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.ktq-field { margin-bottom: 14px; }
.ktq-field--wide { grid-column: 1 / -1; }

.ktq-cccd-trang-thai { font-weight: 600; color: var(--green); text-transform: none; letter-spacing: normal; }
.ktq-cccd-hang { display: flex; gap: 8px; }
.ktq-cccd-hang .field__input { flex: 1; }
.ktq-cccd-hang .btn { flex-shrink: 0; padding: 11px 16px; }

.ktq-phuong-thuc {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.ktq-btn {
  flex: 1 1 150px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-s);
  padding: 11px 14px;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease;
}
.ktq-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.ktq-btn--api { background: var(--green); }
.ktq-btn--api:hover { background: #245F41; }
.ktq-btn--pdf { background: var(--navy-3); }
.ktq-btn--pdf:hover { background: var(--navy-2); }
.ktq-btn--no-thue { background: var(--amber); }
.ktq-btn--no-thue:hover { background: #93610F; }
.ktq-btn--tt-tk { background: var(--navy); }
.ktq-btn--tt-tk:hover { background: var(--navy-2); }
.ktq-btn--tk { background: var(--accent); }
.ktq-btn--tk:hover { background: var(--accent-ink); }

.ktq-trang-thai {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.ktq-trang-thai--loi { color: var(--red); }
.ktq-trang-thai--ok { color: var(--green); }
.ktq-trang-thai--cho { color: var(--amber); }

@media (max-width: 560px) {
  .ktq-grid { grid-template-columns: 1fr; }
}

/* ─── Popup "Quản lý tài khoản" theo MST (mở từ modal Kiểm tra thông quan) ─ */
.tkm-them-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  gap: 0 12px;
  align-items: start;
  margin-bottom: 16px;
}
.tkm-field { margin-bottom: 0; }
.tkm-field--link { grid-column: span 1; }
.tkm-btn-them { white-space: nowrap; height: 44px; align-self: end; margin-bottom: 18px; }

.tkm-ds-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
/* Cùng lỗi width:100% của .btn--ghost-s tràn ra ngoài hàng flex này
   (xem ghi chú ở .nx-form-actions .btn--ghost-s phía trên). */
.tkm-ds-head .btn--ghost-s { width: auto; }

#tkmDs td.mono { font-family: var(--mono, monospace); }
.tkm-row-actions { white-space: nowrap; display: flex; gap: 6px; }
.tkm-row-actions .btn { padding: 5px 10px; font-size: 12.5px; width: auto; margin-top: 0; }

/* Dòng đang sửa inline trong bảng "Tài khoản đã lưu" — 4 ô Loại/ID/Mật
   khẩu/Link chuyển thành input, thu nhỏ padding để vừa hàng bảng. */
.tkm-row--sua td { padding: 6px 8px; vertical-align: middle; }
.tkm-row--sua .field__input { padding: 7px 9px; min-width: 90px; }
.tkm-link-cell a { color: var(--chu-navy-3, var(--navy-3)); text-decoration: none; }
.tkm-link-cell a:hover { text-decoration: underline; }

/* ─── Modal "Quản lý nhà xe" (2 cấp: nhà xe → xe) ────────────────────── */

.nx-btn-mo-form { margin-bottom: 20px; }
.nx-btn-mo-form[hidden] { display: none; }

/* Form đầy đủ thông tin nhà xe — dùng chung cho cả "Thêm nhà xe mới" và
   khối sửa thông tin trong popup chi tiết. 2 cột; Địa chỉ/Ghi chú tràn
   hết chiều rộng (.nx-field--wide). */
.nx-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
  margin-bottom: 16px;
}
.nx-form-grid[hidden] { display: none; }
.nx-form-grid .field { margin-bottom: 14px; }
.nx-field--wide { grid-column: 1 / -1; }
.nx-form-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.nx-form-actions .btn { flex-shrink: 0; }
/* .btn--ghost-s có width:100% (để đứng riêng 1 nút full-width ở nơi
   khác) — trong hàng nút .nx-form-actions (vd "+ Lưu" cạnh "Huỷ") thì
   ghi đè lại để nó chỉ lấp phần còn trống của hàng, tránh đòi thêm
   100% chiều rộng khiến nút tràn ra ngoài khung modal. */
.nx-form-actions .btn--ghost-s { width: auto; flex: 1 1 auto; }
/* "Xoá mục mẫu"/"Xoá danh mục" trong form sửa (mmbgBtnXoa) dùng
   .btn--ghost (width:100% mặc định, dùng riêng ở nơi khác) — cùng lỗi
   tràn như .btn--ghost-s ở trên, ghi đè lại để đứng gọn trong hàng
   cạnh "Cập nhật"/"Huỷ" thay vì đẩy "Huỷ" ra ngoài khung modal. */
.nx-form-actions .btn--ghost { width: auto; margin-top: 0; flex: 1 1 auto; }
/* Chuẩn nút Lưu/Huỷ trong popup: Huỷ (ghost + icon) đứng trước, Lưu (primary + icon)
   đứng sau, cùng chia đều phần trống của hàng. */
.nx-form-actions .btn--primary { flex: 1 1 auto; }

/* "⚙ Điều khoản mẫu" — cột "Nội dung" trong bảng danh sách chỉ hiện
   xem trước 1 dòng (nội dung đầy đủ xem/sửa khi bấm vào dòng đó),
   tránh bảng bị giãn quá cao vì đoạn văn dài. */
.dkm-noi-dung-cell {
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hàng "select mẫu + nút Chèn" phía trên ô textarea "Điều khoản" trong
   form Tạo/Sửa báo giá (_modal_bao_gia_form.html) — chọn 1 điều khoản
   đã lưu trong "⚙ Điều khoản mẫu" rồi chèn nội dung vào textarea. */
.bgf-dieu-khoan-chen {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.bgf-dieu-khoan-chen select.field__input { flex: 1 1 auto; }
.bgf-dieu-khoan-chen .btn { flex-shrink: 0; width: auto; margin-top: 0; }
@media (max-width: 640px) {
  .nx-form-grid { grid-template-columns: 1fr; }
}

/* Ẩn label khỏi màn hình nhưng vẫn còn cho trình đọc màn hình — dùng
   cho field đã đủ rõ nghĩa qua placeholder/label của field bên cạnh
   (VD "Công ty"/"Địa chỉ" trong khối BÊN A biên bản giao nhận). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Khối "BÊN A" trong popup xuất PDF Biên bản giao nhận (_modal_xuat_pdf.
   html #khoiBenABBGN) — lưới 3 cột: hàng 1 MST (hẹp) + Công ty (rộng
   gấp đôi) chung hàng; Địa chỉ tràn hết hàng (.nx-field--wide); các
   field còn lại chia đều 3/hàng (Người đại diện|Chức vụ|Điện thoại và
   Tài xế|CCCD|Điện thoại tài xế); Số xe|Rơ-moóc chỉ chiếm 2/3 hàng. */
.bbgn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 16px;
  margin-bottom: 16px;
}
.bbgn-grid .field { margin-bottom: 14px; }

/* Hàng MST + Công ty dùng chung 1 label phía trên (field nx-field--wide
   bọc ngoài) — bên trong là flex row: ô MST hẹp cố định + ô Công ty
   giãn hết phần còn lại, đúng như bản thiết kế minh hoạ. */
.bbgn-mst-cty-row { display: flex; gap: 16px; }
.bbgn-mst-cty-row__mst { display: block; flex: 0 0 160px; }
.bbgn-mst-cty-row__cty { display: block; flex: 1 1 auto; min-width: 0; }
@media (max-width: 640px) {
  .bbgn-grid { grid-template-columns: 1fr; }
  .bbgn-mst-cty-row { flex-direction: column; gap: 10px; }
  .bbgn-mst-cty-row__mst { flex: 1 1 auto; }
}

/* "📋 Tạo bộ hồ sơ" (_modal_bo_ho_so.html) — mỗi loại hồ sơ (báo giá,
   hợp đồng...) là 1 khối .bhs-section, tiêu đề + nút hành động cùng
   hàng trên 1 dòng (.bhs-section__head). */
.bhs-section { margin-bottom: 8px; }
.bhs-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.bhs-section__title { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--ink); }
.bhs-section__actions { display: flex; gap: 8px; flex-shrink: 0; }

/* "📁 Chi tiết bộ hồ sơ" — hàng 3 nút hành động đầu popup (Sửa tên,
   Xoá bộ, Tạo báo giá mới): đồng bộ 1 kiểu btn--outline, cùng cỡ,
   thẳng hàng trên cùng 1 dòng. Không dùng .bhs-section__head vì class
   đó có justify-content:space-between + .btn--ghost width:100% khiến
   các nút lệch cỡ (xem ghi chú các nơi khác trong file ghi đè lỗi này). */
.bhs-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.bhs-header-actions .btn {
  flex: 1 1 0;
  width: auto;
  margin-top: 0;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .bhs-header-actions { flex-direction: column; align-items: stretch; }
  .bhs-header-actions .btn { flex: none; }
}

/* "⚙ Mục mẫu báo giá" — hàng đang được chọn để sửa trong bảng mục mẫu. */
.mmbg-row--dang-sua td { background: var(--accent-soft, #e8f0fe); }

.nx-chi-tiet__actions { display: flex; gap: 8px; }
/* Cùng lỗi tràn như .nx-form-actions ở trên — "Xoá nhà xe" dùng
   .btn--ghost-s (width:100%) nằm cạnh nút "Lưu thông tin" trong hàng
   flex này nên cũng cần ghi đè lại. */
.nx-chi-tiet__actions .btn--ghost-s { width: auto; flex: 1 1 auto; }

/* Form thêm xe chỉ có 2 trường (Số xe / Tải trọng) + nút, khác với
   .tkm-them-grid gốc (4 trường) — .tkm-them-grid.nx-them-xe-grid có độ
   ưu tiên cao hơn nên luôn thắng, kể cả ở khung @media 640px. */
.tkm-them-grid.nx-them-xe-grid { grid-template-columns: 1fr 1fr auto; }
@media (max-width: 640px) {
  .tkm-them-grid.nx-them-xe-grid { grid-template-columns: 1fr; }
}

/* ─── Modal "🧾 Quyết toán chi phí" (topbar, chỉ admin) ─────────────── */
.qt-conlai--warn { color: var(--red); font-weight: 600; }
.qt-thang-row { cursor: pointer; }
.qt-thang-row:hover { background: var(--border-soft); }
.qt-thang-row--active { background: var(--accent-soft, #e8f0fe); }
.qt-thang-row--active:hover { background: var(--accent-soft, #e8f0fe); }

.qt-hai-cot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
  align-items: start;
}
.qt-cot { min-width: 0; }
.qt-cot .table-wrap { max-height: 420px; overflow-y: auto; }

@media (max-width: 900px) {
  .qt-hai-cot { grid-template-columns: 1fr; gap: 20px 0; }
}

/* Bảng "Chi tiết đợt quyết toán": không còn cột nút Sửa/Xoá riêng (từng
   bị khuất do cột Ghi chú dài đẩy tràn ngang) — thay bằng bấm đúp vào
   dòng để sửa (xem quyet_toan_doanh_thu.js). Vẫn giữ giới hạn độ rộng +
   rút gọn "…" cho Ghi chú để bảng gọn, xem đầy đủ qua title khi hover. */
#qtdtBangChiTiet td:nth-child(6) {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: help;
}
.qt-chitiet-row { cursor: pointer; }
.qt-chitiet-row:hover td { background: rgba(18, 50, 69, 0.06); }

@media (max-width: 700px) {
  .tkm-them-grid { grid-template-columns: 1fr 1fr; }
  .tkm-field--link { grid-column: 1 / -1; }
  .tkm-btn-them { grid-column: 1 / -1; align-self: stretch; }
}

/* ─── Danh sách hồ sơ hiển thị NGAY trong accordion "HỒ SƠ LÔ HÀNG" của
   panel chi tiết (không cần mở modal "📁 Mở hồ sơ" mới thấy có gì) ───── */
.hoso-panel-ds { display: flex; flex-direction: column; gap: 2px; }
.hoso-panel-ds__item {
  display: block;
  padding: 7px 8px;
  border-radius: var(--radius-s);
  color: var(--chu-navy-3, var(--navy-3));
  text-decoration: none;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hoso-panel-ds__item:hover { background: var(--border-soft); text-decoration: underline; }

.pdf-preview__frame-wrap {
  position: relative;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-s);
  height: 75vh;
  min-height: 480px;
  max-height: 820px;
  overflow: hidden;
}
.pdf-preview__frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: #fff;
}
.pdf-preview__dang-tai {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: var(--ink-faint); font-size: 13.5px; margin: 0;
}

@media (max-width: 640px) {
  .pdf-preview__frame-wrap { height: 68vh; min-height: 380px; }
}

/* ─── Modal "Chọn loại PDF cần xuất" ────────────────────────────────────── */

.loai-pdf-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.loai-pdf-actions .btn { width: 100%; padding: 14px 16px; font-size: 14.5px; }

/* Các nút chọn loại PDF giữ NGUYÊN màu giao diện gốc — tông màu tuỳ
   chỉnh ở panel "Chỉnh màu" bên dưới áp dụng cho NỘI DUNG file PDF xuất
   ra (xem cau_hinh_mau_loai_pdf.py), không phải màu của các nút này. */
#btnLoaiPdfChiPhi { background: var(--navy); border-color: var(--navy); color: #fff; }
#btnLoaiPdfChiPhi:hover { filter: brightness(1.1); }
#btnLoaiPdfDeNghiThanhToan { background: var(--accent); border-color: var(--accent); color: #fff; }
#btnLoaiPdfDeNghiThanhToan:hover { filter: brightness(1.1); }
#btnLoaiPdfThongKeHoSo { background: var(--surface); border-color: var(--navy-3); color: var(--chu-navy-3, var(--navy-3)); }
#btnLoaiPdfThongKeHoSo:hover { filter: brightness(0.96); }
#btnLoaiPdfBienBanGiaoNhan { background: var(--surface); border-color: var(--navy-3); color: var(--chu-navy-3, var(--navy-3)); }
#btnLoaiPdfBienBanGiaoNhan:hover { filter: brightness(0.96); }

/* Panel "Chỉnh tông màu" — gấp/mở ngay trong popup Modal 0 (Chọn loại PDF),
   xem #btnMauLoaiPdf trong templates/_modal_xuat_pdf.html. */
.loai-pdf-mau-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 12px 14px;
  margin: 4px 0 14px;
  background: var(--border-soft);
}
.loai-pdf-mau-hang {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.loai-pdf-mau-hang + .loai-pdf-mau-hang { border-top: 1px dashed var(--border); }
.loai-pdf-mau-ten { flex: 1 1 auto; font-size: 13.5px; color: var(--ink); }
.loai-pdf-mau-input {
  width: 40px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: none;
  cursor: pointer;
  flex: 0 0 auto;
}
.loai-pdf-mau-xoa {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}
.loai-pdf-mau-xoa:hover { background: var(--border-soft); color: var(--ink); }
.loai-pdf-mau-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.loai-pdf-mau-actions .btn { width: auto; flex: 1 1 auto; padding: 9px 12px; font-size: 13px; }

/* ─── Ô "Nội dung chuyển khoản" (chỉ hiện với PDF Đề nghị thanh toán) ──── */

.noi-dung-ck { margin-bottom: 16px; }
.noi-dung-ck__label { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }
.noi-dung-ck__input {
  width: 100%; padding: 9px 12px; border-radius: var(--radius-s);
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-size: 14px;
  box-sizing: border-box;
}
.noi-dung-ck__input:focus { outline: none; border-color: var(--accent); }
.noi-dung-ck__dem { margin: 6px 0 0; font-size: 11.5px; color: var(--ink-faint); }

/* ─── Modal: Xuất báo cáo (đã chọn loại từ menu, modal chỉ còn chọn tháng/năm) ─── */
.bc-nam-field { margin-bottom: 14px; }
/* Hàng chung: chọn năm/tháng + lọc khách hàng */
.bc-loc-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}
.bc-loc-row > .bc-nam-field { flex: 0 0 auto; margin-bottom: 0; }
.bc-loc-row > .bc-khach-field { flex: 1 1 auto; min-width: 0; margin: 0; }
.bc-loc-row .bc-khach-row .field__input { height: 40px; }
@media (max-width: 640px) {
  .bc-loc-row { flex-direction: column; align-items: stretch; gap: 10px; }
}
.bc-nam-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bc-nam-row #bcThang { flex: 0 0 92px; }
.bc-nam-row #bcNam { flex: 0 0 110px; }

/* ─── Lọc theo tên khách hàng (popup Báo cáo chi tiết) ──────────────── */
.bc-khach-row { display: flex; align-items: center; gap: 8px; }
.bc-khach-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.bc-khach-wrap .field__input { width: 100%; }
.bc-khach-goiy {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  box-shadow: 0 8px 24px rgba(18, 50, 69, 0.18);
  padding: 4px;
}
.bc-khach-goiy__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-s);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.bc-khach-goiy__item:hover,
.bc-khach-goiy__item--active { background: var(--border-soft); }
.bc-khach-goiy__ten { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-khach-goiy__so { flex-shrink: 0; font-size: 11.5px; color: var(--ink-faint); }
.bc-khach-goiy__rong { padding: 8px 10px; font-size: 12.5px; color: var(--ink-faint); }
.bc-khach-hint {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--ink-faint);
  line-height: 1.4;
}

/* ─── Toggle "Chỉ xuất riêng tháng đang chọn" — công tắc gạt hiện đại ── */
.bc-toggle-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 2px 0 16px;
}
.bc-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-m);
  border: 1px solid var(--border);
  background: var(--border-soft);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.bc-toggle:hover { border-color: var(--navy-3); }
.bc-toggle__input { position: absolute; opacity: 0; width: 0; height: 0; }
.bc-toggle__track {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: #C7D2D6;
  transition: background 0.18s ease;
}
.bc-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(18, 50, 69, 0.35);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.bc-toggle__input:checked ~ .bc-toggle__track { background: var(--navy); }
.bc-toggle__input:checked ~ .bc-toggle__track .bc-toggle__thumb { transform: translateX(16px); }
.bc-toggle__input:focus-visible ~ .bc-toggle__track { outline: 2px solid var(--navy-3); outline-offset: 2px; }
.bc-toggle__text .field__optional { font-weight: 500; font-size: 11.5px; }

@media (max-width: 480px) {
  .bc-toggle-row { grid-template-columns: 1fr; }
}

/* ─── Lưới 12 tháng — thẻ mini-dashboard đồng bộ với .stat-card ──────── */
.bc-chot-grid-field { margin-top: 4px; margin-bottom: 0; }
.bc-chot-grid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.bc-chot-grid-head .field__label { margin-bottom: 0; }
.bc-chot-grid-head__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#btnBcChonNhieu.chip--active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.bc-chot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.bc-chot-grid__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 7px;
  padding: 10px 11px 11px;
  border-radius: var(--radius-m);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  font-family: var(--font-ui);
  text-align: left;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.bc-chot-grid__item:hover {
  transform: translateY(-2px);
  border-color: var(--navy-3);
  box-shadow: 0 10px 22px -14px rgba(18, 50, 69, 0.35), 0 3px 8px -4px rgba(18, 50, 69, 0.14);
}
.bc-chot-grid__item:focus-visible { outline: 2px solid var(--navy-3); outline-offset: 2px; }

.bc-chot-grid__head { display: flex; align-items: center; gap: 5px; }
.bc-chot-grid__icon { font-size: 13px; line-height: 1; }
.bc-chot-grid__label { font-size: 12px; font-weight: 700; color: var(--ink); }
.bc-mth-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-faint);
}
.bc-chot-grid__check { font-size: 13px; line-height: 1; position: absolute; top: 10px; right: 11px; }

.bc-mth-lo { display: flex; gap: 5px; flex-wrap: wrap; }
.bc-mth-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.6;
  padding: 0 7px;
  border-radius: 999px;
}
.bc-mth-badge--ok { background: var(--green-soft); color: var(--green); }
.bc-mth-badge--warn { background: var(--amber-soft); color: var(--amber); }

.bc-mth-fin {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 7px;
  border-top: 1px dashed var(--border);
}
.bc-mth-fin__col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.bc-mth-fin__label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
}
.bc-mth-fin__value {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bc-mth-pill {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bc-mth-pill--ok { background: var(--green-soft); color: var(--green); }
.bc-mth-pill--warn { background: var(--amber-soft); color: var(--amber); }
.bc-mth-pill--muted { background: var(--border-soft); color: var(--ink-faint); font-weight: 600; }

.bc-mth-empty { font-size: 11.5px; font-style: italic; color: var(--ink-faint); padding: 2px 0 1px; }

.bc-chot-grid__item--locked { border-color: #E9C3B4; background: var(--red-soft); }
.bc-chot-grid__item--locked:hover { border-color: var(--red); }
.bc-chot-grid__item--locked .bc-chot-grid__label,
.bc-chot-grid__item--locked .bc-mth-count { color: var(--accent-ink); }
.bc-chot-grid__item--active { border-color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
.bc-chot-grid__item--selected {
  border-color: var(--navy);
  box-shadow: inset 0 0 0 2px var(--navy);
  background: #EAF1F8;
}

@media (max-width: 480px) {
  .bc-chot-grid { grid-template-columns: repeat(2, 1fr); }
}

.bc-chot-nhieu-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-m);
  border: 1px solid var(--navy-3);
  background: var(--border-soft);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--chu-navy, var(--navy));
}
.bc-chot-nhieu-bar[hidden] { display: none; }
.bc-chot-nhieu-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-right: 4px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}
.bc-chot-nhieu-actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 480px) {
  .bc-chot-nhieu-bar { flex-direction: column; align-items: stretch; }
}

.bc-chot-thang {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--border-soft);
  flex-wrap: nowrap;
}
.bc-chot-thang[hidden] { display: none; }
.bc-chot-thang__status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 600;
  white-space: nowrap;
}
#btnChotThangToggle { flex-shrink: 0; padding: 4px 10px; font-size: 12px; }

@media (max-width: 480px) {
  .bc-chot-thang { flex-wrap: wrap; border-radius: var(--radius-s); }
  .bc-chot-thang__status { white-space: normal; }
  #btnChotThangToggle { width: 100%; }
}

@media (max-width: 480px) {
  .bc-nam-row #bcThang { flex: 1 1 80px; }
  .bc-nam-row #bcNam { flex: 1 1 100px; }
}

/* ─── Modal: Báo cáo vận tải (quản lý theo tháng + nhà xe, tạo bảng kê) ─── */
.bcvt-loc {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 16px;
}
.bcvt-loc__thoigian .field__label { display: block; margin-bottom: 6px; }
.bcvt-loc__chon { display: flex; gap: 8px; }
.bcvt-loc__chon .field__input { width: auto; min-width: 72px; }
.bcvt-toolbar {
  display: flex;
  flex: 1 1 auto;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}
.bcvt-toolbar .btn { flex: 1 1 0; min-width: 150px; max-width: 240px; white-space: nowrap; margin-top: 0; }
.bcvt-nhaxe { margin-bottom: 16px; }
.bcvt-nhaxe .field__label { display: block; margin-bottom: 8px; }
.bcvt-nhaxe-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bcvt-nhaxe-chips .chip {
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 500;
  user-select: none;
}
.bcvt-nhaxe-chips .chip.chip--active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.bcvt-nhaxe-chips .chip:focus-visible {
  outline: 2px solid var(--navy-3);
  outline-offset: 1px;
}
.bc-hoadon-thang-field { margin-top: 4px; }
.bc-hoadon-thang-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bc-hoadon-thang-chips .chip {
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 500;
  user-select: none;
}
.bc-hoadon-thang-chips .chip.chip--active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.bc-hoadon-thang-chips .chip.chip--empty {
  cursor: not-allowed;
}
.bc-hoadon-thang-chips .chip:focus-visible {
  outline: 2px solid var(--navy-3);
  outline-offset: 1px;
}

.bcvt-nx-table th, .bcvt-nx-table td { white-space: nowrap; }

.bcvt-nx-row { cursor: pointer; }
.bcvt-nx-row:hover { background: color-mix(in srgb, var(--ink) 4%, var(--surface)); }
.bcvt-nx-row--active { background: var(--accent-soft, #e8f0fe); }
.bcvt-nx-row--active:hover { background: var(--accent-soft, #e8f0fe); }
.bcvt-nx-row--tatca { font-weight: 600; }
.bcvt-nx-checkbox-cell { text-align: center; }
.bcvt-nx-checkbox-cell input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--navy);
  vertical-align: middle;
}
/* Bảng kê/Hóa đơn: checkbox chỉ mang tính hiển thị (disabled), tick màu
   XANH LÁ khi đã có file đính kèm — phân biệt với "Thanh toán" (vẫn
   tự tích tay, giữ màu --navy mặc định ở trên). */
.bcvt-nx-checkbox-cell input[type="checkbox"]:disabled {
  opacity: 1;
  cursor: default;
}
.bcvt-nx-checkbox-cell input[type="checkbox"]:disabled:checked {
  accent-color: var(--green);
}
.bcvt-nx-attach {
  display: inline-block;
  margin-left: 6px;
  padding: 0 4px;
  border: none;
  background: transparent;
  color: var(--ink-faint);
  font-size: 13px;
  cursor: pointer;
  vertical-align: middle;
  border-radius: var(--radius-s);
}
.bcvt-nx-attach:hover { background: var(--border-soft); }
.bcvt-nx-attach--co-file { color: var(--chu-navy-2, var(--navy-2)); font-weight: 600; }

/* ─── Popup "📎 Chứng từ vận tải" ───────────────────────────────── */
.ctvt-phu-de {
  margin: -6px 0 16px;
  color: var(--ink-faint);
  font-size: 13.5px;
  font-weight: 600;
}
.ctvt-tai-len {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
}
.ctvt-tai-len .btn { margin-top: 0; width: auto; padding: 0 18px; height: 40px; }
.ctvt-ghi-chu {
  margin: -8px 0 16px;
  font-size: 12.5px;
  color: var(--ink-faint);
}
@media (max-width: 720px) {
  .ctvt-tai-len { grid-template-columns: 1fr; }
  .ctvt-tai-len .btn { width: 100%; }
}

/* Tên file rút gọn (…) kèm tooltip đầy đủ khi hover — tên file tự sinh
   khá dài, nếu để tràn tự nhiên sẽ đẩy 2 nút Xem/Xoá ra ngoài vùng nhìn
   thấy, phải cuộn ngang mới bấm được. */
#ctvtBang .ctvt-ten-file {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
#ctvtBang td:last-child { white-space: nowrap; }
.btn--nho {
  display: inline-block;
  width: auto;
  margin-top: 0;
  padding: 4px 10px;
  font-size: 12.5px;
  text-decoration: none;
}
.btn--nho[hidden] { display: none; }
.bcvt-tong {
  margin: 0;
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--chu-navy, var(--navy));
  white-space: nowrap;
}
.bcvt-vat-field {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}
.bcvt-vat-field input {
  width: 56px;
  padding: 5px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  font-family: var(--font-mono);
  font-size: 12.5px;
  text-align: right;
}
/* Danh sách chuyến: hàng tiêu đề cho phép xuống dòng khi thêm ô lọc khách hàng */
#modalBaoCaoVanTai .tkm-ds-head { flex-wrap: wrap; gap: 8px 0; }
.bcvt-loc-khach-field { margin-left: auto; }
.bcvt-loc-khach {
  width: auto;
  min-width: 170px;
  max-width: 240px;
  padding: 5px 8px;
  font-size: 12.5px;
}
.bcvt-cot-chon { width: 34px; text-align: center; }
#bcvtBang td.bcvt-cot-chon { text-align: center; }
#bcvtBang .bcvt-cot-chon input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--navy);
  vertical-align: middle;
}
#bcvtBang tbody tr.bcvt-chuyen--bo-chon td:not(.bcvt-cot-chon) { opacity: .45; }
/* Chuyến ĐÃ lập bảng kê: mờ cả dòng (trừ ô chọn + nhãn), ô chọn bị khoá */
#bcvtBang tbody tr.bcvt-chuyen--da-lap td:not(.bcvt-cot-chon):not(.bcvt-cot-malo) { opacity: .4; }
#bcvtBang tbody tr.bcvt-chuyen--da-lap .bcvt-malo-txt { opacity: .4; }
#bcvtBang tbody tr.bcvt-chuyen--da-lap { background: color-mix(in srgb, var(--ink) 4%, var(--surface)); }
/* Mã lô bấm được -> mở chi tiết lô hàng */
.bcvt-malo-link { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.bcvt-malo-link:hover { color: var(--navy, #16324A); text-decoration-style: solid; }
#bcvtBang tbody tr.bcvt-chuyen--da-lap .bcvt-cot-chon input { opacity: .35; cursor: not-allowed; }
.bcvt-tag-bk {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border: 1px solid var(--green, #2e9e6b);
  border-radius: 999px;
  background: #E8F6EF;
  color: var(--green, #2e9e6b);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  font-family: inherit;
  white-space: nowrap;
  vertical-align: middle;
}
.bcvt-hint {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--ink-faint);
}

@media (max-width: 640px) {
  .bcvt-loc { flex-direction: column; align-items: stretch; }
  .bcvt-toolbar .btn { max-width: none; min-width: 45%; }
}

/* ─── Ảnh đại diện tài khoản / Phân quyền ────────────────────────────── */

.topbar__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 6px;
  border: 1px solid #7FD08A;
}

.tk-avatar-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--border-soft);
}
.tk-avatar-sm--rong { font-size: 16px; color: var(--ink-faint); }

.avatar-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-soft);
}
.avatar-upload__preview {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--border-soft);
  border: 2px solid var(--border);
}
.avatar-upload__hint { font-size: 12.5px; color: var(--ink-faint); }
.avatar-upload.hoso-dropzone--dragover {
  background: var(--accent-soft);
  border-radius: var(--radius-s);
}

.quyen-list {
  /* 2 cột; tiêu đề nhóm (.quyen-nhom) trải full hàng, các quyền chảy ngang
     rồi xuống dòng. ≤640px về 1 cột. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 28px;
  margin: 10px 0 6px;
  padding: 12px 14px;
  background: var(--border-soft);
  border-radius: var(--radius-s);
}
.quyen-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}
.quyen-item input { width: auto; }

/* Tiêu đề nhóm trong danh sách phân quyền (Lô hàng / Báo cáo / Chốt tháng...) */
.quyen-nhom {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.quyen-list > .quyen-nhom:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.quyen-list > .quyen-nhom { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .quyen-list { grid-template-columns: 1fr; }
}

/* Thanh "Mẫu nhanh" phía trên danh sách phân quyền (static/js/mau_quyen.js) */
.quyen-mau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
}
.quyen-mau__nhan { font-size: 12.5px; color: var(--ink-soft); margin-right: 2px; }
.quyen-mau__btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.quyen-mau__btn:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.quyen-mau__btn--phu { color: var(--ink-soft); border-style: dashed; }

/* ─── Giấy tờ đính kèm của nhân viên ────────────────────────────────── */
.giay-to-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.giay-to-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--border-soft);
  border-radius: var(--radius-s);
  font-size: 13.5px;
}
.giay-to-item__icon { font-size: 18px; flex: 0 0 auto; }
.giay-to-item__info { flex: 1 1 auto; min-width: 0; }
.giay-to-item__loai { font-weight: 600; color: var(--ink); }
.giay-to-item__ten {
  color: var(--ink-soft);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.giay-to-item__xoa {
  flex: 0 0 auto;
  border: none;
  background: none;
  color: var(--red);
  cursor: pointer;
  font-size: 13px;
  padding: 4px 6px;
}
.giay-to-item__xoa:hover { text-decoration: underline; }

.giay-to-upload {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.giay-to-upload .field__input { width: auto; flex: 1 1 160px; margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   Bộ icon SVG — 2 tông màu + chuyển động  (sprite: templates/icons_sprite.html)
   • Viền icon theo màu chữ, chi tiết nhấn theo --ico-a (đổi theo theme của app)
   • Rê chuột / focus vào nút: icon chuyển sang màu nhấn + phát chuyển động riêng
   • Tự động: đồng hồ cát lật khi chờ, chuông/cảnh báo nhịp trong khung cảnh báo,
     icon bật ra khi hiện thông báo. Tắt hết nếu hệ điều hành bật "giảm chuyển động".
   Dùng: <svg class="ico"><use href="#i-save"></use></svg>   (.ico-solo = icon đứng một mình)
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --ico-blue: #3A86C8;
  --ico-blue: color-mix(in srgb, var(--navy-3, #2A5A72) 50%, #3A9BE8);
  --ico-violet: #7B61D1;
}

.ico, .ico-solo {
  width: 1.35em;
  height: 1.35em;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -0.27em;
  margin-right: 0.4em;
  pointer-events: none;
  transition: filter 0.2s ease;
}
.ico-solo { margin-right: 0; }
/* Các nút flex đã có gap riêng -> không cộng thêm lề */
.btn .ico, .ktq-btn .ico, .chip .ico, .topbar__dropdown-item .ico, .bc-mth-badge .ico { margin-right: 0; }
/* .btn--nho đổi sang inline-block (không còn gap) -> trả lại lề cho icon */
.btn.btn--nho .ico { margin-right: 0.4em; }
.modal-box__title .ico { width: 1.15em; height: 1.15em; margin-right: 0.5em; }
.topbar__caret .ico-solo { width: 1em; height: 1em; vertical-align: -0.15em; }

/* ── Màu nhấn theo ý nghĩa: xanh lá = thành công/tiền · đỏ = xoá/lỗi · vàng = cảnh báo/chờ
      cam = vận chuyển · xanh dương = thao tác · tím = con người/công cụ ── */
:is(.ico,.ico-solo):has(:is(use[href="#i-check"],use[href="#i-check-circle"],use[href="#i-square-check"],use[href="#i-shield-check"],use[href="#i-file-check"],use[href="#i-unlock"],use[href="#i-wallet"],use[href="#i-banknote"],use[href="#i-plus"],use[href="#i-file-spreadsheet"])) { --ico-a: var(--green); }
:is(.ico,.ico-solo):has(:is(use[href="#i-trash"],use[href="#i-x-circle"],use[href="#i-siren"],use[href="#i-close"],use[href="#i-log-out"])) { --ico-a: var(--red); }
:is(.ico,.ico-solo):has(:is(use[href="#i-alert-triangle"],use[href="#i-lightbulb"],use[href="#i-star"],use[href="#i-crown"],use[href="#i-bell"],use[href="#i-zap"],use[href="#i-hourglass"],use[href="#i-clock"],use[href="#i-folder"],use[href="#i-folder-open"],use[href="#i-note"],use[href="#i-lock"],use[href="#i-calendar"])) { --ico-a: var(--amber); }
:is(.ico,.ico-solo):has(:is(use[href="#i-truck"],use[href="#i-package"],use[href="#i-ship"],use[href="#i-receipt"],use[href="#i-printer"],use[href="#i-pencil"],use[href="#i-home"],use[href="#i-building"],use[href="#i-sparkles"])) { --ico-a: var(--accent); }
:is(.ico,.ico-solo):has(:is(use[href="#i-save"],use[href="#i-search"],use[href="#i-zoom-in"],use[href="#i-globe"],use[href="#i-send"],use[href="#i-download"],use[href="#i-upload"],use[href="#i-refresh"],use[href="#i-file"],use[href="#i-file-export"],use[href="#i-clipboard"],use[href="#i-arrow-right"],use[href="#i-arrow-left"],use[href="#i-arrows-lr"],use[href="#i-undo"],use[href="#i-paperclip"],use[href="#i-image"],use[href="#i-eye"],use[href="#i-eye-off"],use[href="#i-credit-card"],use[href="#i-bar-chart"],use[href="#i-settings"],use[href="#i-plug"],use[href="#i-shuffle"],use[href="#i-user"])) { --ico-a: var(--ico-blue); }
:is(.ico,.ico-solo):has(:is(use[href="#i-users"],use[href="#i-bot"],use[href="#i-palette"])) { --ico-a: var(--ico-violet); }

/* ── Icon v2 (80 icon) ─────────────────────────────────────────────────────
   • 10 icon mới: chevron-up, info, copy, filter, more, link, external-link,
     file-pdf, container, stamp.
   • Icon "cấu trúc" (close, chevron-*, dot, square, more) CỐ Ý đơn sắc: chúng
     là ký hiệu điều hướng/trạng thái, không mang nghĩa nghiệp vụ nên không tô
     màu nhấn. Riêng close đổi sang đỏ khi rê chuột (qua --ico-o).
   • Độ đậm nền tô chỉnh bằng --ico-fo (mặc định .26) và --ico-fo2 (.42, cho
     star/sparkles). Nếu sau này có giao diện nền tối, chỉ cần đặt
     .theme-toi { --ico-fo: .34; --ico-fo2: .5; } — không phải sửa sprite. ── */
:is(.ico,.ico-solo):has(use[href="#i-stamp"]) { --ico-a: var(--green); }
:is(.ico,.ico-solo):has(:is(use[href="#i-info"],use[href="#i-copy"],use[href="#i-filter"],use[href="#i-link"],use[href="#i-external-link"],use[href="#i-file-pdf"])) { --ico-a: var(--ico-blue); }
:is(.ico,.ico-solo):has(use[href="#i-container"]) { --ico-a: var(--accent); }
:is(.ico,.ico-solo):has(use[href="#i-chevron-up"]) { --fx: ico-rise; --fxd: .5s; --fxe: ease-in-out; }
:is(.ico,.ico-solo):has(use[href="#i-more"]) { --fx: ico-pulse; --fxd: .6s; --fxe: ease-in-out; }
:is(.ico,.ico-solo):has(:is(use[href="#i-copy"],use[href="#i-file-pdf"],use[href="#i-container"])) { --fx: ico-hop; --fxd: .6s; --fxe: cubic-bezier(.34,1.56,.64,1); }
:is(.ico,.ico-solo):has(use[href="#i-link"]) { --fx: ico-wiggle; --fxd: .65s; --fxe: ease-in-out; }
:is(.ico,.ico-solo):has(use[href="#i-external-link"]) { --fx: ico-nudge-r; --fxd: .5s; --fxe: ease-in-out; }
:is(.ico,.ico-solo):has(use[href="#i-stamp"]) { --fx: ico-drop; --fxd: .55s; --fxe: cubic-bezier(.34,1.56,.64,1); }

/* Icon cũ (.icon-svg) đã chuyển sang sprite -> giữ đúng kích thước 17px như trước */
.icon-svg.ico-solo { width: 17px; height: 17px; display: block; vertical-align: baseline; }

/* ── Nền đặc (nút chính, thông báo, huy hiệu...) -> icon 1 màu theo chữ cho dễ đọc ── */
:is(.btn--primary, .btn--accent, .chip--active, .pagination__btn--active, .toast, .modal-alert,
    .ktq-trang-thai, .detail-toggle--done, .nhacnho-row__badge, .bc-mth-pill, .bc-mth-badge,
    .flash, .ctx-menu__item--xoa) :is(.ico, .ico-solo) {
  --ico-a: currentColor !important;
  --ico-o: currentColor !important;
}

/* ── Kiểu chuyển động của từng icon (dùng khi rê chuột) ── */
:is(.ico,.ico-solo):has(:is(use[href="#i-square"],use[href="#i-check"],use[href="#i-check-circle"],use[href="#i-square-check"],use[href="#i-shield-check"],use[href="#i-file-check"],use[href="#i-user"],use[href="#i-users"],use[href="#i-calendar"],use[href="#i-unlock"],use[href="#i-wallet"],use[href="#i-banknote"],use[href="#i-folder"],use[href="#i-folder-open"])) { --fx: ico-pop; --fxd: .6s; --fxe: cubic-bezier(.34,1.56,.64,1); }
:is(.ico,.ico-solo):has(:is(use[href="#i-close"],use[href="#i-plus"])) { --fx: ico-turn; --fxd: .5s; --fxe: cubic-bezier(.34,1.56,.64,1); }
:is(.ico,.ico-solo):has(:is(use[href="#i-palette"],use[href="#i-pencil"],use[href="#i-paperclip"],use[href="#i-note"],use[href="#i-shuffle"],use[href="#i-arrows-lr"])) { --fx: ico-wiggle; --fxd: .65s; --fxe: ease-in-out; }
:is(.ico,.ico-solo):has(:is(use[href="#i-trash"])) { --fx: ico-trash; --fxd: .6s; --fxe: ease-in-out; --fxo: 50% 92%; }
:is(.ico,.ico-solo):has(:is(use[href="#i-bell"])) { --fx: ico-ring; --fxd: .9s; --fxe: ease-in-out; --fxo: 50% 10%; }
:is(.ico,.ico-solo):has(:is(use[href="#i-x-circle"],use[href="#i-alert-triangle"],use[href="#i-siren"],use[href="#i-printer"],use[href="#i-lock"],use[href="#i-plug"])) { --fx: ico-shake; --fxd: .5s; --fxe: ease-in-out; }
:is(.ico,.ico-solo):has(:is(use[href="#i-refresh"],use[href="#i-settings"],use[href="#i-globe"])) { --fx: ico-spin; --fxd: .9s; --fxe: cubic-bezier(.5,0,.2,1); }
:is(.ico,.ico-solo):has(:is(use[href="#i-arrow-right"],use[href="#i-chevron-right"],use[href="#i-log-out"])) { --fx: ico-nudge-r; --fxd: .5s; --fxe: ease-in-out; }
:is(.ico,.ico-solo):has(:is(use[href="#i-arrow-left"],use[href="#i-chevron-left"],use[href="#i-undo"])) { --fx: ico-nudge-l; --fxd: .5s; --fxe: ease-in-out; }
:is(.ico,.ico-solo):has(:is(use[href="#i-download"],use[href="#i-save"],use[href="#i-chevron-down"])) { --fx: ico-drop; --fxd: .55s; --fxe: cubic-bezier(.34,1.56,.64,1); }
:is(.ico,.ico-solo):has(:is(use[href="#i-upload"])) { --fx: ico-rise; --fxd: .55s; --fxe: cubic-bezier(.34,1.56,.64,1); }
:is(.ico,.ico-solo):has(:is(use[href="#i-package"],use[href="#i-building"],use[href="#i-home"],use[href="#i-crown"],use[href="#i-receipt"],use[href="#i-clipboard"],use[href="#i-file"],use[href="#i-file-export"],use[href="#i-file-spreadsheet"],use[href="#i-image"],use[href="#i-bot"],use[href="#i-credit-card"])) { --fx: ico-hop; --fxd: .6s; --fxe: cubic-bezier(.34,1.56,.64,1); }
:is(.ico,.ico-solo):has(:is(use[href="#i-hourglass"])) { --fx: ico-flip; --fxd: .7s; --fxe: ease-in-out; }
:is(.ico,.ico-solo):has(:is(use[href="#i-eye"],use[href="#i-eye-off"])) { --fx: ico-blink; --fxd: .5s; --fxe: ease-in-out; }
:is(.ico,.ico-solo):has(:is(use[href="#i-ship"])) { --fx: ico-rock; --fxd: .9s; --fxe: ease-in-out; --fxo: 50% 88%; }
:is(.ico,.ico-solo):has(:is(use[href="#i-truck"])) { --fx: ico-drive; --fxd: .8s; --fxe: ease-in-out; }
:is(.ico,.ico-solo):has(:is(use[href="#i-send"])) { --fx: ico-fly; --fxd: .8s; --fxe: ease-in-out; }
:is(.ico,.ico-solo):has(:is(use[href="#i-lightbulb"])) { --fx: ico-glow; --fxd: .9s; --fxe: ease-in-out; }
:is(.ico,.ico-solo):has(:is(use[href="#i-sparkles"],use[href="#i-star"])) { --fx: ico-twinkle; --fxd: .7s; --fxe: ease-in-out; }
:is(.ico,.ico-solo):has(:is(use[href="#i-zap"])) { --fx: ico-flash; --fxd: .6s; --fxe: ease-in-out; }
:is(.ico,.ico-solo):has(:is(use[href="#i-clock"])) { --fx: ico-tilt; --fxd: .6s; --fxe: cubic-bezier(.34,1.56,.64,1); }
:is(.ico,.ico-solo):has(:is(use[href="#i-bar-chart"])) { --fx: ico-grow; --fxd: .6s; --fxe: cubic-bezier(.34,1.56,.64,1); --fxo: 50% 100%; }
:is(.ico,.ico-solo):has(:is(use[href="#i-search"],use[href="#i-zoom-in"])) { --fx: ico-orbit; --fxd: .6s; --fxe: ease-in-out; }
:is(.ico,.ico-solo):has(:is(use[href="#i-dot"])) { --fx: ico-pulse; --fxd: .6s; --fxe: ease-in-out; }

/* ── Rê chuột / focus: viền chuyển sang màu nhấn, phát sáng nhẹ, chạy chuyển động ── */
:is(button:not(:disabled), a, label, summary, [role="button"], .btn):is(:hover, :focus-visible) :is(.ico, .ico-solo) {
  --ico-o: var(--ico-a, currentColor);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px color-mix(in srgb, var(--ico-a, currentColor) 55%, transparent));
  transform-origin: var(--fxo, 50% 50%);
  animation: var(--fx, ico-pop) var(--fxd, 0.6s) var(--fxe, cubic-bezier(.34, 1.56, .64, 1));
}
/* Nhấn xuống: icon lún nhẹ */
:is(button:not(:disabled), a, .btn):active :is(.ico, .ico-solo) {
  animation: none;
  transform: scale(0.86);
  transition: transform 0.08s ease, filter 0.2s ease;
}

/* ── Tự chuyển động ── */
/* Icon bật ra khi hiện thông báo / toast / tiêu đề modal */
:is(.modal-alert, .toast, .ktq-trang-thai, .canh-bao-box, .modal-box__title) :is(.ico, .ico-solo) {
  animation: ico-in 0.5s cubic-bezier(.34, 1.56, .64, 1) both;
}
/* Đồng hồ cát: lật liên tục (đang chờ) — trừ huy hiệu trạng thái tĩnh */
:is(.ico, .ico-solo):has(use[href="#i-hourglass"]) {
  animation: ico-hourglass 2.4s ease-in-out infinite;
}
:is(.nhacnho-row__badge, .bc-mth-badge, .bc-mth-pill) :is(.ico, .ico-solo) { animation: none !important; }
/* Khung cảnh báo: chuông rung, cảnh báo nhịp thở để gây chú ý */
.canh-bao-box :is(.ico, .ico-solo):has(use[href="#i-bell"]) {
  transform-origin: 50% 10%;
  animation: ico-ring-loop 3.6s ease-in-out infinite;
}
:is(.canh-bao-box, .canh-bao-stt-icon) :is(.ico, .ico-solo):has(:is(use[href="#i-alert-triangle"], use[href="#i-siren"])) {
  filter: drop-shadow(0 0 4px var(--ico-a, currentColor));
  animation: ico-alert-loop 1.8s ease-in-out infinite;
}
/* Chấm luồng đang chọn nhịp nhẹ */
.luong-pick.is-active :is(.ico, .ico-solo) { animation: ico-pulse-loop 1.6s ease-in-out infinite; }

/* ── Keyframes ── */
@keyframes ico-pop    { 0% { transform: scale(1); } 40% { transform: scale(1.3) rotate(-5deg); } 70% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes ico-turn   { 0% { transform: rotate(0); } 60% { transform: rotate(100deg) scale(1.18); } 100% { transform: rotate(90deg) scale(1); } }
@keyframes ico-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 50% { transform: rotate(11deg); } 75% { transform: rotate(-6deg); } }
@keyframes ico-trash  { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg) translateY(-1px); } 45% { transform: rotate(10deg); } 70% { transform: rotate(-5deg); } }
@keyframes ico-ring   { 0%, 100% { transform: rotate(0); } 12% { transform: rotate(20deg); } 28% { transform: rotate(-17deg); } 44% { transform: rotate(13deg); } 60% { transform: rotate(-8deg); } 76% { transform: rotate(4deg); } }
@keyframes ico-shake  { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-2.5px) rotate(-6deg); } 40% { transform: translateX(2.5px) rotate(6deg); } 60% { transform: translateX(-1.5px); } 80% { transform: translateX(1.5px); } }
@keyframes ico-spin   { to { transform: rotate(360deg); } }
@keyframes ico-nudge-r{ 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3.5px); } }
@keyframes ico-nudge-l{ 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3.5px); } }
@keyframes ico-drop   { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(3.5px); } 70% { transform: translateY(-1px); } }
@keyframes ico-rise   { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-3.5px); } 70% { transform: translateY(1px); } }
@keyframes ico-hop    { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-4px) rotate(-3deg); } 65% { transform: translateY(.5px); } }
@keyframes ico-flip   { to { transform: rotate(180deg); } }
@keyframes ico-blink  { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.08); } }
@keyframes ico-rock   { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg) translateY(1px); } 75% { transform: rotate(8deg) translateY(-1px); } }
@keyframes ico-drive  { 0% { transform: translateX(0); } 30% { transform: translateX(-2px); } 65% { transform: translateX(4px); } 100% { transform: translateX(0); } }
@keyframes ico-fly    { 0% { transform: translate(0, 0); opacity: 1; } 45% { transform: translate(6px, -6px) scale(.85); opacity: 0; } 46% { transform: translate(-6px, 6px) scale(.85); opacity: 0; } 100% { transform: translate(0, 0); opacity: 1; } }
@keyframes ico-glow   { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); filter: drop-shadow(0 0 7px var(--ico-a, currentColor)); } }
@keyframes ico-twinkle{ 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.25) rotate(18deg); } }
@keyframes ico-flash  { 0%, 100% { opacity: 1; transform: scale(1); } 20% { opacity: .35; } 40% { opacity: 1; transform: scale(1.25); } 60% { opacity: .5; } 80% { opacity: 1; } }
@keyframes ico-tilt   { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-12deg) translateY(-1px); } }
@keyframes ico-grow   { 0% { transform: scaleY(1); } 40% { transform: scaleY(.6); } 70% { transform: scaleY(1.14); } 100% { transform: scaleY(1); } }
@keyframes ico-orbit  { 0% { transform: translate(0, 0); } 25% { transform: translate(1.6px, -1.6px); } 50% { transform: translate(0, -2.6px) scale(1.1); } 75% { transform: translate(-1.6px, -1.6px); } 100% { transform: translate(0, 0); } }
@keyframes ico-pulse  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@keyframes ico-in     { 0% { opacity: 0; transform: scale(.3) rotate(-25deg); } 60% { opacity: 1; transform: scale(1.18) rotate(6deg); } 100% { opacity: 1; transform: none; } }
@keyframes ico-hourglass { 0%, 35% { transform: rotate(0); } 65%, 100% { transform: rotate(180deg); } }
@keyframes ico-ring-loop { 0%, 24%, 100% { transform: rotate(0); } 4% { transform: rotate(16deg); } 8% { transform: rotate(-14deg); } 12% { transform: rotate(10deg); } 16% { transform: rotate(-6deg); } 20% { transform: rotate(3deg); } }
@keyframes ico-alert-loop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes ico-pulse-loop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }

@media (prefers-reduced-motion: reduce) {
  .ico, .ico-solo,
  :is(button, a, .btn):is(:hover, :focus-visible, :active) :is(.ico, .ico-solo) {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Rê chuột vào phần tử KHÔNG tương tác (tiêu đề, gợi ý, nhãn, huy hiệu, trạng thái
   rỗng…) → icon bên trong cũng chạy hiệu ứng riêng của nó, giống icon trong nút.
   Trước đây chỉ 9 popup có class .popup-sync (popup_dong_bo.css) mới có; các popup
   còn lại (Hồ sơ lô hàng, Quyết toán, Bảng kê, Tài khoản…) và phần ngoài popup đứng yên.
   Dùng lại đúng biến --ico-a / --fx / --fxd / --fxe / --fxo của bộ icon. ── */
:is(
  h1, h2, h3, h4, h5, h6, legend,
  .modal-box__title, .modal-box__hint, .tlh-sec__title, .bhs-section__title, .section-head__sub,
  .ktq-nhom-nhan, .ktq-trang-thai, .bcvt-hint, .hoso-nhapten__hint, .hoso-nhapten__file-goc,
  .ctvt-ghi-chu, .field__label, .field__hint, .dl-nhom, .tkx-add__title, .tkx-empty, .hoso-empty,
  .hoso-dropzone__text, .status, .login-form__title, .ghi-chu-box__title, .xtf-loi__icon,
  .bc-chot-grid__icon, .bc-chot-grid__item, .bc-mth-badge, .nhacnho-row__badge, .tk-avatar-sm,
  .pagination__info, .pagination__info strong
):hover :is(.ico, .ico-solo) {
  --ico-o: var(--ico-a, currentColor);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px color-mix(in srgb, var(--ico-a, currentColor) 55%, transparent));
  transform-origin: var(--fxo, 50% 50%);
  animation: var(--fx, ico-pop) var(--fxd, 0.6s) var(--fxe, cubic-bezier(.34, 1.56, .64, 1));
}
/* Tiêu đề popup / dòng trạng thái có sẵn hiệu ứng "bật ra" (ico-in) → giữ nó trong danh sách
   animation để rời chuột không bị chạy lại. */
:is(.modal-box__title, .ktq-trang-thai):hover :is(.ico, .ico-solo) {
  animation:
    ico-in 0.5s cubic-bezier(.34, 1.56, .64, 1) both,
    var(--fx, ico-pop) var(--fxd, 0.6s) var(--fxe, cubic-bezier(.34, 1.56, .64, 1));
}
@media (prefers-reduced-motion: reduce) {
  :is(h1, h2, h3, h4, h5, h6, legend, p, span, div, strong):hover :is(.ico, .ico-solo) {
    animation: none !important;
    transition: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   HIỆU ỨNG ĐỘNG CHO THẺ — luồng (Xanh/Vàng/Đỏ), trạng thái, huy hiệu, chip
   • Rê chuột vào thẻ: thẻ nhấc lên (nảy nhẹ) + toả sáng theo màu của thẻ +
     một vệt sáng quét ngang qua. Riêng thẻ luồng, biểu tượng bên trong có
     chuyển động riêng theo ý nghĩa: ✓ bật lên · ! lắc · ✕ xoay.
   • Rê chuột vào cả hàng: các thẻ trong hàng sáng nhẹ lên.
   • Luôn chuyển động: luồng Vàng/Đỏ và trạng thái "chưa xong" thở nhẹ (cần
     chú ý); luồng Xanh đứng yên (bình thường).
   • Nhấc thẻ bằng top:-Npx (không dùng transform) nên chạy được cả với thẻ
     dạng inline như .status mà KHÔNG làm đổi chiều cao dòng của bảng.
   ═══════════════════════════════════════════════════════════════════════ */
:is(.luong, .status, .nhacnho-row__badge, .bc-mth-badge, .bc-mth-pill, .qtdt-hang-hoa__badge) {
  position: relative;
  top: 0;
  transition: top 0.22s cubic-bezier(.34, 1.56, .64, 1), filter 0.25s ease,
              transform 0.15s ease, box-shadow 0.15s ease;
}
/* vệt sáng — lớp phủ nằm trong đúng khung thẻ, chỉ chạy khi rê chuột */
:is(.luong, .status, .nhacnho-row__badge, .bc-mth-badge, .bc-mth-pill, .qtdt-hang-hoa__badge)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.7) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%;
  background-position: 160% 0;
}
/* cả hàng đang rê -> thẻ sáng nhẹ (đặt TRƯỚC rule rê thẻ để rê thẻ thắng khi bằng nhau) */
.lo-row:hover :where(.luong, .status) {
  filter: drop-shadow(0 1px 3px color-mix(in srgb, currentColor 24%, transparent));
}
:is(.luong, .status, .nhacnho-row__badge, .bc-mth-badge, .bc-mth-pill, .qtdt-hang-hoa__badge):hover {
  top: -1.5px;
  filter: drop-shadow(0 3px 6px color-mix(in srgb, currentColor 36%, transparent)) saturate(1.15);
}
:is(.luong, .status, .nhacnho-row__badge, .bc-mth-badge, .bc-mth-pill, .qtdt-hang-hoa__badge):hover::after {
  animation: tagSheen 0.75s ease-out;
}
@keyframes tagSheen { from { background-position: 160% 0; } to { background-position: -60% 0; } }

/* biểu tượng trong thẻ luồng */
.luong:hover::before { animation: luongDot 0.5s ease; }
.luong--xanh:hover::before { animation: luongTick 0.55s cubic-bezier(.34, 1.56, .64, 1); }
.luong--vàng:hover::before, .luong--vang:hover::before { animation: luongWarn 0.6s ease-in-out; }
.luong--đỏ:hover::before, .luong--do:hover::before { animation: luongCross 0.6s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes luongDot   { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.7); } }
@keyframes luongTick  { 0% { transform: scale(1); } 40% { transform: scale(1.6) rotate(-10deg); } 100% { transform: scale(1); } }
@keyframes luongWarn  { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-18deg); } 40% { transform: rotate(15deg); } 60% { transform: rotate(-10deg); } 80% { transform: rotate(5deg); } }
@keyframes luongCross { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(90deg) scale(1.4); } 100% { transform: rotate(180deg) scale(1); } }

/* thở nhẹ: Vàng chậm, Đỏ nhanh hơn một chút */
/* Quầng sáng nền đứng yên; lớp glow mạnh hơn (::after) chỉ nhấp nhô opacity.
   Khi rê chuột ::after chuyển sang chạy tagSheen (vệt sáng) nên glow tạm dừng. */
@keyframes tagGlow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
:is(.luong--vàng, .luong--vang, .luong--đỏ, .luong--do) {
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent), 0 0 8px color-mix(in srgb, currentColor 20%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  :is(.luong--vàng, .luong--vang, .luong--đỏ, .luong--do)::after {
    box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 24%, transparent), 0 0 15px color-mix(in srgb, currentColor 46%, transparent);
    opacity: 0;
  }
  .luong--vàng::after, .luong--vang::after { animation: tagGlow 3.4s ease-in-out infinite; }
  .luong--đỏ::after, .luong--do::after { animation: tagGlow 2.4s ease-in-out infinite; }
}

/* nút chọn luồng trong form + chip lọc: nhấc lên khi rê, lún xuống khi bấm */
.luong-pick {
  transition: transform 0.18s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.2s ease,
              background-color 0.15s ease, border-color 0.15s ease;
}
.luong-pick:hover {
  transform: translateY(-2px);
  border-color: currentColor;
  box-shadow: 0 4px 10px color-mix(in srgb, currentColor 22%, transparent);
}
.luong-pick:not(.is-active):hover { background: color-mix(in srgb, currentColor 8%, #fff); }
.luong-pick:active { transform: translateY(0) scale(0.97); box-shadow: none; }
.chip:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(18, 50, 69, 0.12); }
.chip:active { transform: translateY(0) scale(0.97); box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  :is(.luong, .status, .nhacnho-row__badge, .bc-mth-badge, .bc-mth-pill, .qtdt-hang-hoa__badge),
  :is(.luong, .status, .nhacnho-row__badge, .bc-mth-badge, .bc-mth-pill, .qtdt-hang-hoa__badge)::before,
  :is(.luong, .status, .nhacnho-row__badge, .bc-mth-badge, .bc-mth-pill, .qtdt-hang-hoa__badge)::after {
    animation: none !important;
  }
  .luong-pick:hover, .chip:hover { transform: none; }
}

/* ─── Nút "Về đầu trang" — hiện góc dưới phải khi cuộn xuống ─────────── */
.ve-dau-trang {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(18, 50, 69, .28);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, background .15s ease;
  z-index: 40;
}
.ve-dau-trang.ve-dau-trang--hien {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ve-dau-trang:hover { background: var(--accent); }
.ve-dau-trang .ico-solo { width: 22px; height: 22px; }
@media (max-width: 640px) {
  .ve-dau-trang { right: 14px; bottom: 14px; width: 40px; height: 40px; }
}

/* Hàng "Số Bill/Invoice" + "Ngày Bill/Invoice" đứng cạnh nhau trong form lô hàng */
.field-so-ngay { display: grid; grid-template-columns: 1fr 140px; gap: 10px; }
.field-so-ngay .field { min-width: 0; }

/* Ô vừa được tự điền từ file PDF (them_lo_hang.js): nháy 1 nhịp rồi GIỮ nền
   + viền xanh cho tới khi lưu xong / đóng form — khác --da-doan (tự nhạt). */
@keyframes daDienNhay {
  0%   { box-shadow: 0 0 0 0 var(--green); }
  40%  { box-shadow: 0 0 0 4px var(--green-soft); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.field__input--da-dien,
.field__input--da-dien:hover:not(:disabled):not(:focus) {
  background: var(--green-soft);
  border-color: var(--green);
  animation: daDienNhay 1.2s ease-out;
}

/* Ô "Tên hàng đại diện" cuối cột phải form lô hàng — chỉ hiển thị (không nhập) */
.ten-hang-dd__noidung {
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--border-soft);
  color: var(--ink);
  line-height: 1.45;
  word-break: break-word;
  max-height: 7.5em;
  overflow-y: auto;
}
.ten-hang-dd__noidung--trong { color: var(--ink-faint); font-style: italic; }
.ten-hang-dd__them { margin-top: 6px; font-size: 12.5px; color: var(--ink-soft); }


/* ─── Kéo-thả file từ máy vào khung "HỒ SƠ LÔ HÀNG" (panel chi tiết) ───── */
.accordion--ho-so--keo-file {
  border-color: var(--accent);
  outline: 2px dashed var(--accent);
  outline-offset: -4px;
  background: var(--accent-soft);
}
.ho-so-thahint {
  margin: 8px 0 0;
  padding: 8px 10px;
  border: 1px dashed var(--border-soft);
  border-radius: 8px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted, #7a8594);
}
.accordion--ho-so--keo-file .ho-so-thahint {
  border-color: var(--accent);
  color: var(--accent);
}


/* ─── Form Thêm/Sửa đại lý (chia nhóm + tra cứu MST) ─────────────────── */
.dl-modal { max-width: 760px; }
.dl-form { max-height: calc(100vh - 230px); overflow-y: auto; padding-right: 4px; }
.dl-nhom {
  margin: 4px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dl-form .nx-form-grid { margin-bottom: 8px; }
.dl-mst-row { display: flex; gap: 8px; }
.dl-mst-row .field__input { flex: 1 1 auto; min-width: 0; }
.dl-mst-btn { flex: 0 0 auto; width: auto; margin-top: 0; white-space: nowrap; }
.dl-mst-tinh-trang { display: block; margin-top: 6px; font-size: 12px; }
.dl-mst-tinh-trang[hidden] { display: none; }
.dl-mst-tinh-trang--ok { color: #2e7d4f; }
.dl-mst-tinh-trang--loi { color: #c0392b; }
.dl-mst-tinh-trang--dang-tra { color: var(--ink-faint); }
@media (max-width: 640px) {
  .dl-form .nx-form-grid { grid-template-columns: 1fr; }
}

/* Nút chỉ có icon SVG (thay cho ◀ ▶ ⬇ cũ) */
.detail-header__nav,
.ho-so-list__tai,
.hoso-row__tai { display: inline-flex; align-items: center; justify-content: center; }
.detail-header__nav .ico-solo { width: 14px; height: 14px; vertical-align: 0; }
.ho-so-list__tai .ico-solo,
.hoso-row__tai .ico-solo { width: 15px; height: 15px; vertical-align: 0; }
.accordion__icon .ico-solo { width: 1em; height: 1em; vertical-align: -0.12em; }

/* ─── Popup "Quản lý tài khoản" theo MST — giao diện thẻ (tkx-*) ─────────
   Thay cho bảng cũ: mỗi tài khoản là 1 thẻ có huy hiệu màu theo Loại, ô ID /
   Mật khẩu kèm nút sao chép, nút Sửa / Xoá bên phải. JS: tai_khoan_mst.js */
.tkx-box { max-width: 860px; padding: 22px 24px 24px; }
.tkx-mst-chip {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--border-soft);
  color: var(--chu-navy-3, var(--navy-3));
  font-size: 13px;
  font-weight: 600;
  vertical-align: 2px;
}

/* Khung thêm mới */
.tkx-add {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  padding: 12px 14px 14px;
  margin-bottom: 18px;
}
.tkx-add__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.tkx-add__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--chu-navy-2, var(--navy-2));
}
.tkx-add__title .ico { width: 14px; height: 14px; }
.tkx-quick { display: inline-flex; gap: 6px; }
.tkx-quick__chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--chu-navy-3, var(--navy-3));
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tkx-quick__chip:hover { background: var(--navy-3); border-color: var(--navy-3); color: #fff; }

.tkx-add__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.3fr auto;
  gap: 10px;
  align-items: end;
}
.tkx-f { display: block; min-width: 0; }
.tkx-f__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
.tkx-add__btn {
  height: 36px;
  width: auto;
  margin: 0;
  padding: 0 16px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Đầu danh sách */
.tkx-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.tkx-list-head .btn--ghost-s { width: auto; margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.tkx-count {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--navy-3);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  letter-spacing: 0;
}

/* Thẻ tài khoản */
.tkx-list { display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow-y: auto; padding: 2px 4px 4px 2px; }
.tkx-card {
  --tkx-c: var(--navy-3);
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) 2fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 14px 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--tkx-c);
  border-radius: var(--radius-m);
  box-shadow: 0 1px 2px rgba(18, 50, 69, 0.05);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.tkx-card:hover { box-shadow: var(--shadow-card); transform: translateY(-1px); }

.tkx-card__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tkx-badge {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--tkx-c);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.tkx-card__name { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.tkx-card__type { font-size: 15px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkx-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--chu-navy-3, var(--navy-3));
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tkx-link .ico, .tkx-link .ico-solo { width: 12px; height: 12px; flex: 0 0 auto; }
a.tkx-link:hover { text-decoration: underline; }
.tkx-link--none { color: var(--ink-faint); font-style: italic; }

.tkx-card__vals { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-width: 0; }
.tkx-val { min-width: 0; }
.tkx-val__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px; }
.tkx-val__row {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-s);
  padding: 3px 4px 3px 10px;
  min-height: 32px;
}
.tkx-val__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }

.tkx-card__actions { display: flex; gap: 4px; }

/* Nút icon */
.tkx-ib {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--chu-navy-3, var(--navy-3));
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tkx-ib .ico, .tkx-ib .ico-solo { width: 16px; height: 16px; }
.tkx-ib:hover { background: var(--border-soft); border-color: var(--border); }
.tkx-ib--s { width: 26px; height: 26px; }
.tkx-ib--s .ico, .tkx-ib--s .ico-solo { width: 14px; height: 14px; }
.tkx-ib--danger { color: var(--red); }
.tkx-ib--danger:hover { background: var(--red-soft); border-color: #E9C3B4; }
.tkx-ib.is-done { color: var(--green); background: var(--green-soft); }

/* Thẻ đang sửa */
.tkx-card--sua { grid-template-columns: 1fr; gap: 12px; background: color-mix(in srgb, var(--amber) 4%, var(--surface)); border-color: color-mix(in srgb, var(--amber) 35%, var(--surface)); border-left-color: var(--accent); }
.tkx-card--sua:hover { transform: none; }
.tkx-edit { display: grid; grid-template-columns: 1fr 1fr 1fr 1.3fr; gap: 10px; }
.tkx-edit__actions { display: flex; justify-content: flex-end; gap: 8px; }
.tkx-edit__actions .btn { width: auto; margin: 0; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; }

/* Đang tải + rỗng */
.tkx-skel {
  height: 66px;
  border-radius: var(--radius-m);
  background: linear-gradient(90deg, var(--border-soft) 25%, var(--bg) 50%, var(--border-soft) 75%);
  background-size: 200% 100%;
  animation: tkxSkel 1.2s ease-in-out infinite;
}
@keyframes tkxSkel { to { background-position: -200% 0; } }
.tkx-empty { text-align: center; padding: 28px 12px; color: var(--ink-soft); border: 1px dashed var(--border); border-radius: var(--radius-m); }
.tkx-empty[hidden] { display: none; }
.tkx-empty .ico-solo { width: 28px; height: 28px; color: var(--ink-faint); }
.tkx-empty p { margin: 8px 0 2px; font-weight: 600; color: var(--ink); }
.tkx-empty span { font-size: 13px; }

@media (max-width: 760px) {
  .tkx-add__grid, .tkx-edit { grid-template-columns: 1fr 1fr; }
  .tkx-add__btn { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .tkx-card { grid-template-columns: 1fr auto; gap: 10px 8px; }
  .tkx-card__vals { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 480px) {
  .tkx-add__grid, .tkx-edit, .tkx-card__vals { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ĐỒNG BỘ NÚT TOÀN APP — 3 quy cách: Chuẩn 40px · Nhỏ 32px · Icon vuông 40px
   ───────────────────────────────────────────────────────────────────────
   Khối này nằm CUỐI style.css để thắng các định nghĩa cũ cùng độ ưu tiên.
   Chỉ chuẩn hoá KÍCH THƯỚC / CỠ CHỮ / BO GÓC — giữ nguyên màu và bố cục
   (flex, width, margin) của từng nút. Muốn hoàn tác: xoá cả khối này.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --btn-h: 40px;
  --btn-h-s: 32px;
  --btn-fs: 14px;
  --btn-fs-s: 13px;
}

/* 1) Chuẩn — 40px */
.btn,
.ktq-btn,
.ktq-cccd-hang .btn,
.tkm-btn-them,
.tkx-add__btn {
  min-height: var(--btn-h);
  padding-top: 0;
  padding-bottom: 0;
  font-size: var(--btn-fs);
  line-height: 1.2;
  border-radius: var(--radius-s);
}
.tkm-btn-them, .tkx-add__btn { height: var(--btn-h); }

/* 2) Nhỏ — 32px (nút trong bảng, dòng danh sách, thanh công cụ phụ) */
.btn--nho,
.btn--ghost-s,
.tkm-row-actions .btn,
.loai-pdf-mau-actions .btn,
.tkx-edit__actions .btn,
.dai-ly-row__btn,
.vb-hang-doi__btn-luu,
.pagination__btn {
  min-height: var(--btn-h-s);
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 12px;
  padding-right: 12px;
  font-size: var(--btn-fs-s);
  line-height: 1.2;
  border-radius: var(--radius-s);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 3) Icon vuông — 40×40 */
.col-toggle__btn,
.search-bar__btn,
.month-nav__btn,
.btn-icon-xoa {
  width: var(--btn-h);
  min-width: var(--btn-h);
  height: var(--btn-h);
  padding: 0;
  border-radius: var(--radius-s);
}

/* Viền focus bàn phím thống nhất */
.btn:focus-visible,
.ktq-btn:focus-visible,
.col-toggle__btn:focus-visible,
.month-nav__btn:focus-visible,
.search-bar__btn:focus-visible,
.btn-icon-xoa:focus-visible {
  outline: 2px solid var(--navy-3);
  outline-offset: 2px;
}


/* ─── Popup "Nhắc nhở" mở từ chuông trên topbar (nhac_nho_chung.js) ─────── */
.nnc-box { max-width: 760px; }
.nnc-tabs { display: flex; gap: 6px; margin: 0 0 14px; border-bottom: 1px solid var(--border-soft); }
.nnc-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; margin-bottom: -1px;
  background: none; border: none; border-bottom: 2px solid transparent;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nnc-tab:hover { color: var(--ink); }
.nnc-tab.is-active { color: var(--chu-navy, var(--navy)); border-bottom-color: var(--accent); }
.nnc-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
.nnc-tab__so {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #D9432B; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.nnc-tab__so[hidden] { display: none; }

.nnc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.nnc-toolbar [hidden] { display: none; }
.nnc-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); cursor: pointer; }

.nnc-form {
  border: 1px solid var(--border-soft); border-radius: 12px; background: var(--bg-soft, #F5F8F7);
  padding: 14px; margin-bottom: 14px;
}
.nnc-form[hidden] { display: none; }
.nnc-form .field { margin-bottom: 10px; }
.nnc-form__grid { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 10px; }
.nnc-form__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.nnc-opt { font-weight: 400; color: var(--ink-faint); }
.nnc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.nnc-chips:empty { display: none; }
.nnc-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 9px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink); font-size: 12.5px; font-weight: 600;
}
.nnc-chip__x {
  width: 18px; height: 18px; border: none; border-radius: 50%; background: transparent; color: inherit;
  font-size: 15px; line-height: 1; cursor: pointer;
}
.nnc-chip__x:hover { background: rgba(138, 63, 20, 0.16); }

.nnc-list { display: flex; flex-direction: column; gap: 8px; }
.nnc-item {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: start;
  padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface);
}
.nnc-item--den-han { border-color: rgba(222, 123, 55, 0.55); background: linear-gradient(180deg, rgba(247, 226, 206, 0.35), var(--surface)); }
.nnc-item--xong { opacity: 0.7; }
.nnc-item--xong .nnc-item__noidung { text-decoration: line-through; color: var(--ink-faint); }
.nnc-list > .nnc-item:has(.nnc-item__main--lo) { grid-template-columns: 1fr auto; }
.nnc-item__tich {
  width: 26px; height: 26px; padding: 0; border: none; background: none; cursor: pointer; color: var(--chu-navy-3, var(--navy-3));
  display: inline-flex; align-items: center; justify-content: center; border-radius: 6px;
}
.nnc-item__tich:hover:not(:disabled) { color: var(--green); background: var(--green-soft); }
.nnc-item__tich:disabled { cursor: default; opacity: 0.5; }
.nnc-item__tich .ico-solo { width: 18px; height: 18px; }
.nnc-item__main { min-width: 0; }
.nnc-item__noidung { font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.4; overflow-wrap: anywhere; }
.nnc-item__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 4px; font-size: 12px; color: var(--ink-soft); }
.nnc-item__han { font-weight: 600; color: var(--ink); }
.nnc-item__tag { padding: 1px 8px; border-radius: 999px; background: var(--border-soft); color: var(--ink-soft); font-weight: 600; }
.nnc-item__lo { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.nnc-item__lo-dau { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 2px; }
.nnc-item__cty { font-size: 12.5px; color: var(--ink-soft); }
.nnc-item__nut { display: flex; gap: 2px; }
.nnc-lo {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 6px;
  background: var(--border-soft); color: var(--chu-navy-3, var(--navy-3)); text-decoration: none;
}
.nnc-lo:hover { background: var(--accent-soft); color: var(--accent-ink); }
.nnc-lo--to { font-size: 13.5px; background: none; padding: 0; color: var(--chu-navy, var(--navy)); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.nnc-iconbtn {
  width: 28px; height: 28px; padding: 0; border: none; background: none; border-radius: 8px; cursor: pointer;
  color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center;
}
.nnc-iconbtn:hover { background: var(--border-soft); color: var(--ink); }
.nnc-iconbtn--xoa:hover { background: var(--red-soft); color: var(--red); }
.nnc-item__tich:focus-visible, .nnc-iconbtn:focus-visible, .nnc-chip__x:focus-visible, .nnc-lo:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

@media (max-width: 640px) {
  .nnc-form__grid { grid-template-columns: 1fr; }
  .nnc-item { grid-template-columns: auto 1fr; }
  .nnc-item .nhacnho-row__badge, .nnc-item__nut { grid-column: 2; justify-self: start; }
}


/* ─── Modal chi phí: nút "Thêm dòng chi phí" + "Lưu" chung 1 hàng ─────── */
.modal-box__footer--chiphi { flex-wrap: nowrap; align-items: stretch; }
.modal-box__footer--chiphi .btn { flex: 1 1 0; min-width: 0; }
.btn--them-chiphi {
  background: var(--surface);
  color: var(--chu-navy-3, var(--navy-3));
  border: 1.5px dashed var(--navy-3);
  box-shadow: 0 0 0 rgba(18, 50, 69, 0);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, border-style 0.15s ease;
}
.btn--them-chiphi:hover {
  background: var(--border-soft);
  border-style: solid;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(18, 50, 69, 0.14);
}
.btn--them-chiphi:active { transform: translateY(0) scale(0.97); box-shadow: 0 2px 6px rgba(18, 50, 69, 0.12); }
.btn--them-chiphi .ico,
.btn--luu-chiphi .ico { transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); }
.btn--them-chiphi:hover .ico { transform: rotate(90deg) scale(1.2); }
.btn--luu-chiphi:hover:not(:disabled) .ico { transform: scale(1.2) rotate(-8deg); }


/* ─── Popup hồ sơ: cột "Loại chứng từ" (huy hiệu) ─────────────────────── */
.hoso-row { grid-template-columns: 42px minmax(0, 1fr) minmax(96px, 190px) auto; }
.hoso-row__loai {
  justify-self: start;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hs-c) 12%, var(--surface));
  color: var(--hs-c);
  border: 1px solid color-mix(in srgb, var(--hs-c) 30%, transparent);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hoso-row__loai--chua-ro {
  background: transparent;
  color: var(--ink-faint);
  border-style: dashed;
  border-color: var(--border);
  font-weight: 600;
}
@media (max-width: 640px) {
  .hoso-row { grid-template-columns: 42px minmax(0, 1fr) auto; }
  .hoso-row__loai { grid-column: 2 / 4; grid-row: 2; }
}

/* ── Thẻ chọn luồng (Xanh / Vàng / Đỏ): icon riêng, KHÔNG phụ thuộc bộ icon theme ── */
.luong-pick { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.luong-pick--xanh { --luong-c: var(--green); }
.luong-pick--vang { --luong-c: var(--amber); }
.luong-pick--do   { --luong-c: var(--red); }
.luong-ico {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--luong-c, currentColor) 14%, #fff);
  color: var(--luong-c, currentColor);
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.luong-ico svg { width: 15px; height: 15px; display: block; }
.luong-pick:hover .luong-ico { transform: scale(1.08); }
.luong-pick.is-active .luong-ico {
  background: var(--luong-c, currentColor); color: #fff;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--luong-c, currentColor) 40%, transparent);
  animation: luong-ico-pop .35s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes luong-ico-pop { 0% { transform: scale(.7); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .luong-pick.is-active .luong-ico { animation: none; } }


/* ─── Trang Tài khoản: thanh công cụ + bảng gọn (7 cột) ─────────────── */
.tk-bar { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 20px; margin-bottom:16px; }
.tk-bar__title { margin:0; font-size:1.35rem; line-height:1.2; }
.tk-bar__count { font-weight:500; color:var(--ink-soft); margin-left:4px; }
.tk-bar__stats { margin:4px 0 0; font-size:.85rem; color:var(--ink-soft); }
.tk-bar__tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.tk-bar__tools select.field__input { width:auto; min-width:150px; }
.tk-bar__search { position:relative; display:flex; align-items:center; }
.tk-bar__search .ico { position:absolute; left:10px; width:16px; height:16px; opacity:.6; pointer-events:none; }
.tk-bar__search input { padding-left:34px; min-width:230px; }
.tai-khoan-table td { vertical-align:middle; }
.tai-khoan-table td > .tk-sub { display:block; }
.tk-sub { font-size:.8rem; color:var(--ink-soft); }
.tk-ident { display:flex; align-items:center; gap:12px; }
.tk-ident__txt { display:flex; flex-direction:column; min-width:0; }
.tk-act-cell { white-space:nowrap; text-align:right; }
.tk-act { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; margin-left:4px;
  border:1px solid transparent; border-radius:8px; background:none; color:var(--ink-soft); cursor:pointer; }
.tk-act:hover, .tk-act:focus-visible { background:var(--border-soft); color:var(--ink); border-color:var(--border); outline:none; }
.tk-act--xoa:hover, .tk-act--xoa:focus-visible { color:#ff6b6b; border-color:#ff6b6b; background:rgba(255,107,107,.12); }
.tk-act .ico-solo { width:18px; height:18px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ─── Cấu hình → "Quản lý tài khoản" (tkq-*) — dùng lại thẻ tkx-* ─────── */
.tkq-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.tkq-toolbar .field__input { width: auto; }
.tkq-toolbar #qltkTimKiem { flex: 2 1 260px; }
.tkq-toolbar #qltkLoc { flex: 0 1 160px; }
.tkq-toolbar .btn { width: auto; margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.tkq-add__grid { grid-template-columns: 1fr 1fr 1fr 1.3fr; }
.tkq-add__btns { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.tkq-add__btns .btn { width: auto; margin: 0; padding: 7px 16px; }
.tkq-list { max-height: 52vh; }
.tkq-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 2px 0; }
.tkq-group:first-child { margin-top: 0; }
.tkq-group__name { font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tkq-group__count { margin-left: auto; font-size: 12px; color: var(--ink-faint); }
@media (max-width: 760px) {
  .tkq-add__grid { grid-template-columns: 1fr 1fr; }
  .tkq-f--wide { grid-column: 1 / -1; }
}
.tkq-f--wide { grid-column: span 3; }
.tkq-edit__ten { grid-column: 1 / -1; }


/* ─── Nội dung đọc được trong panel "Nhập Tên Hồ Sơ": xem toàn bộ + bôi đen
   để gán vào Tên hồ sơ / Số / Ngày ─────────────────────────────────────── */
.hoso-noidung {
  margin: 4px 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--surface);
  overflow: hidden;
}
.hoso-noidung__toggle {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 9px 12px;
  border: none; background: var(--border-soft); color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left;
}
.hoso-noidung__dem { color: var(--ink-faint); font-weight: 400; font-size: 12px; }
.hoso-noidung__mui { margin-left: auto; transition: transform .15s; }
.hoso-noidung__toggle[aria-expanded="false"] .hoso-noidung__mui { transform: rotate(-90deg); }
.hoso-noidung__toggle[aria-expanded="false"] + .hoso-noidung__body { display: none; }
.hoso-noidung__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 10px; border-bottom: 1px solid var(--border-soft);
  font-size: 12.5px; color: var(--ink-soft);
}
.hoso-noidung__guide { margin-right: auto; }
.hoso-noidung__chon {
  max-width: 100%; padding: 2px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink);
  font-family: var(--font-mono, monospace); font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hoso-noidung__bar.co-chon .hoso-noidung__guide { display: none; }
.hoso-noidung__gan { padding: 4px 10px; font-size: 12.5px; }
.hoso-noidung__gan:disabled { opacity: .45; cursor: not-allowed; }
.hoso-noidung__text {
  max-height: 260px; min-height: 90px; overflow: auto; resize: vertical;
  padding: 10px 12px; font-family: var(--font-mono, monospace); font-size: 12.5px;
  line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  color: var(--ink); user-select: text; -webkit-user-select: text; cursor: text;
}
.hoso-noidung__text:focus { outline: none; }
.hoso-noidung__text.rong { color: var(--ink-faint); font-family: inherit; font-style: italic; cursor: default; }
.hoso-noidung__text::selection { background: var(--accent-soft); color: var(--accent-ink); }

.hoso-noidung__sua { padding: 4px 10px; font-size: 12.5px; width: auto; margin-top: 0; }
.hoso-noidung__sua[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-ink); }
.hoso-noidung__text.dang-sua { background: var(--surface-2, rgba(0,0,0,.03)); box-shadow: inset 0 0 0 2px var(--accent-soft); }
.hoso-noidung__text.dang-sua:focus { outline: none; }
.hoso-noidung__goiy-tg { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; user-select: none; }
.hoso-goiy { border-radius: 3px; padding: 0 1px; cursor: pointer; transition: background .12s; }
.hoso-goiy--ngay { background: rgba(70, 150, 90, .22); border-bottom: 1px solid rgba(70, 150, 90, .65); }
.hoso-goiy--so { background: rgba(200, 140, 40, .22); border-bottom: 1px solid rgba(200, 140, 40, .65); }
.hoso-goiy:hover { background: var(--accent-soft); }
.hoso-noidung__text.an-goi-y .hoso-goiy { background: none; border-bottom: none; cursor: text; }

.hoso-nhapten__canhbao {
  margin: 8px 0 0; padding: 8px 12px; font-size: 13px; line-height: 1.5;
  border-left: 3px solid #d9822b; background: rgba(217, 130, 43, .12);
  border-radius: 6px; color: var(--ink); word-break: break-word;
}
.hoso-nhapten__canhbao strong { color: #b4600f; }
.hoso-nhapten__canhbao ul { margin: 4px 0 0; padding-left: 18px; }

/* Nút "Mở bằng phần mềm" + menu trong modal xem trước file */
.xtf-mongoai { position: relative; display: inline-flex; }
.xtf-mongoai[hidden] { display: none; }
.xtf-mongoai__chinh { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.xtf-mongoai__mui { border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 6px; padding-right: 6px; border-left: 1px solid var(--border-soft, rgba(0,0,0,.12)); }
.xtf-mongoai__menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; min-width: 230px;
  display: flex; flex-direction: column; padding: 4px;
  background: var(--surface, #fff); border: 1px solid var(--border, rgba(0,0,0,.15));
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.xtf-mongoai__menu[hidden] { display: none; }
.xtf-mongoai__item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: none; border-radius: 6px;
  background: none; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.xtf-mongoai__item:hover { background: var(--accent-soft, rgba(0,0,0,.06)); }
@media (max-width: 720px) { .xtf-mongoai__chinh { font-size: 0; } }