/* POS Trang Anh Baby — token thiết kế lấy theo Sapo (Long chốt bis-784/785 cho HRM):
   card bo 3px không viền + shadow rgba(168,168,168,.25) 0 2px 4px · xanh #0088ff ·
   ô nhập viền #d3d5d7 bo 4px · chữ 14px · nhãn #46515f · chữ thường #0f1824 · mờ #747c87 */
:root {
  --blue: #0088ff;
  --ink: #0f1824;
  --ink2: #182537;
  --label: #46515f;
  --muted: #747c87;
  --line: #d3d5d7;
  --bg: #f5f7fa;
  --green: #00a76d;
  --red: #dc2626;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px; -webkit-text-size-adjust: 100%; }
a { color: var(--blue); text-decoration: none; cursor: pointer; }

/* ── Login ───────────────────────────────────────────────────────────────── */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-box { width: 100%; max-width: 360px; background: #fff; border-radius: 3px; padding: 28px 24px;
  box-shadow: rgba(168,168,168,.25) 0 2px 8px; }
.login-logo { font-size: 40px; text-align: center; }
.login-title { text-align: center; font-size: 18px; font-weight: 600; color: var(--ink2); margin-top: 6px; }
.login-sub { text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.login-box label { display: block; font-size: 14px; color: var(--label); margin: 12px 0 5px; }
.login-box input { width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 4px;
  padding: 0 12px; font-size: 14px; font-family: inherit; background: #fff; }
.login-err { color: var(--red); font-size: 13px; margin-top: 10px; min-height: 18px; text-align: center; }

/* ── Nút ─────────────────────────────────────────────────────────────────── */
/* pos120: hrm-legacy.css khai .btn-primary{background:#007aff;border-radius:12px;font:15px/600
   !important} nên KHAI THƯỜNG Ở ĐÂY KHÔNG THẮNG — đo ra nút chính toàn app đang là xanh iOS
   #007aff bo 12px chữ 15px thay vì token Sapo #0088ff bo 3px chữ 14px/500. Phải !important. */
.btn-primary, .btn-ghost, .btn-danger {
  height: 36px; padding: 0 16px !important; border-radius: 3px !important; font-size: 14px !important;
  font-weight: 500 !important; letter-spacing: 0 !important;
  font-family: inherit; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; gap: 6px; border: 1px solid transparent; }
.btn-primary { background: var(--blue) !important; color: #fff; }
.btn-primary:hover { background: #0077e0 !important; }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-danger { background: #fff; color: var(--red); border-color: #ffb8b8; }
.login-box .btn-primary { width: 100%; height: 42px; margin-top: 20px; }

/* ── Khung app ───────────────────────────────────────────────────────────── */
#appPage { display: flex; min-height: 100vh; }
/* pos8: thanh chức năng clone Sapo — nền #182537, rộng 225px (thu gọn 52px),
   mục cha h48 icon 24px + mũi tên, mục con h40 thụt 44px, active #0088ff bo 3px */
/* flex item: phải ép flex-basis, chỉ đặt width thì Chrome vẫn giữ bề rộng cũ */
/*pos132: Sapo đo được 230px*/
/*pos137: THU GỌN/MỞ RỘNG MƯỢT — đo từ video Sapo Long gửi 15/8 (trích frame bằng Swift,
  quét pixel tối để lấy bề rộng): mở 0.65→0.83s · thu 1.97→2.14s ⇒ **0,2s**, nhanh giữa chậm
  cuối = cubic-bezier(.4,0,.2,1). POS trước KHÔNG có transition ⇒ nhảy phát một (giật).*/
#sidebar { flex: 0 0 230px; width: 230px; background: #182537; color: #f3f4f5;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden;
  transition: flex-basis .2s cubic-bezier(.4, 0, .2, 1), width .2s cubic-bezier(.4, 0, .2, 1); }
/*pos138 (Long: "lấy khoảng cách chuẩn khi đóng, mở ra cũng khoảng cách như vậy"):
  khối đầu phải CÙNG CHIỀU CAO ở 2 trạng thái — trước đây full 67px / mini 56px ⇒ thu gọn là
  toàn bộ icon bên dưới NHẢY LÊN 11px. Chốt theo lúc đóng = 56px (cũng khớp header Sapo 55-57).*/
.side-head { display: flex; gap: 10px; align-items: center; height: 56px; padding: 0 14px;
  box-sizing: border-box; flex: 0 0 56px; overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.08); }
.side-who { min-width: 0; flex: 1; }
.side-avatar { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; }
.side-name { font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.side-role { font-size: 12px; color: #a3a8af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-mini-btn { background: none; border: 0; color: #a3a8af; cursor: pointer; padding: 4px;
  display: inline-flex; align-items: center; flex-shrink: 0; }
.side-mini-btn:hover { color: #fff; }
.side-mini-btn svg { width: 20px; height: 20px; }
#sideNav { flex: 1; overflow-y: auto; padding: 8px 0;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
#sideNav::-webkit-scrollbar { width: 6px; }
#sideNav::-webkit-scrollbar-track { background: transparent; }
#sideNav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
/*thu gọn: Sapo KHÔNG hiện thanh cuộn — có thanh là icon bị đẩy lệch khỏi tâm cột 52px*/
#sidebar.mini #sideNav { scrollbar-width: none; }
#sidebar.mini #sideNav::-webkit-scrollbar { display: none; }
/* hrm-legacy.css có .nav-item{border-left:3px} + svg.lucide{width:1em} → phải ép bằng
   selector #sideNav (0,2,0 trở lên) không thì icon 18px và cả dòng lệch 3px */
/*pos132: Sapo cách nhau 8px giữa 2 mục (y cách 56 với h48)*/
#sideNav .nav-item { display: flex; align-items: center; gap: 10px; height: 48px; margin: 0 4px 8px;
  padding: 0 4px 0 10px; border-radius: 3px; border-left: 0; font-size: 14px; font-weight: 400;
  color: #f3f4f5; cursor: pointer; }
#sideNav .nav-item:hover { background: rgba(255,255,255,.08); color: #fff; border-left: 0; }
#sideNav .nav-item.active { background: #0088ff; color: #fff; font-weight: 400; border-left: 0; }
/*pos196: nhóm cha chứa trang đang mở = nền xanh; mục con đang mở = chữ xanh KHÔNG nền (Sapo)*/
#sideNav .nav-parent.has-active, #sideNav .nav-subp.has-active { background: #0088ff; color: #fff; }
#sideNav .nav-parent.has-active svg.nav-ic, #sideNav .nav-parent.has-active svg.nav-chev, #sideNav .nav-subp.has-active svg.nav-chev { color: #fff; }
#sideNav .nav-sub .nav-item.active { background: transparent; color: #4d9dff; }
#sideNav .nav-sub .nav-item.active:hover { background: rgba(255,255,255,.08); }
.nav-tx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/*pos138: Sapo để ICON màu #a3a8af (xám) — chỉ CHỮ mới #f3f4f5; POS trước không set màu nên
  icon kế thừa màu chữ ⇒ trắng, lệch tông so với Sapo (Long gửi ảnh 15/8).*/
#sideNav svg.nav-ic { width: 24px !important; height: 24px !important; stroke-width: 1.5;
  flex-shrink: 0; color: #a3a8af; }
#sideNav .nav-item:hover svg.nav-ic,
#sideNav .nav-item.active svg.nav-ic,
#sideNav .nav-parent.open svg.nav-ic { color: #fff; }
#sideNav svg.nav-chev { width: 24px !important; height: 24px !important; margin-left: auto;
  flex-shrink: 0; color: #a3a8af; transition: transform .2s linear; }
#sideNav .nav-parent.open svg.nav-chev { transform: rotate(90deg); color: #fff; }
/*pos135: mở/thu nhóm menu MƯỢT như Sapo (MuiCollapse: height .3s cubic-bezier(.4,0,.2,1)).
  Dùng grid-template-rows 0fr→1fr — animate được, không cần JS đo scrollHeight.*/
.nav-sub { display: block; overflow: hidden; max-height: 0;
  transition: max-height .3s cubic-bezier(.4, 0, .2, 1); }
.nav-sub .nav-sub-in { overflow: hidden; }
/*⚠ grid-template-rows 0fr→1fr KHÔNG chạy ở đây: grid container cao auto nên 1fr giải thành 0
  (đo được inner h=0 dù 3 mục con mỗi cái 48px). Dùng max-height — 10 mục × 56px = 560.*/
.nav-parent.open + .nav-sub { max-height: 560px; }
#sideNav .nav-sub .nav-item { height: 40px; padding: 0 4px 0 44px; margin: 0 4px; }
/*pos156: nhóm con cấp 2 (Ứng dụng ▸ Khuyến mại ▸ …) — Sapo thụt mục cháu sâu hơn + chấm •*/
.nav-sub2 { overflow: hidden; max-height: 0; transition: max-height .3s cubic-bezier(.4, 0, .2, 1); }
.nav-subp.open + .nav-sub2 { max-height: 240px; }
#sideNav .nav-subp.open svg.nav-chev { transform: rotate(90deg); }
/*pos173: Long "mất chữ ở pos cho lùi lại" — mục cháu lùi về thẳng cột mục con (44px) để chữ không bị cắt*/
#sideNav .nav-sub .nav-sub2 .nav-item2 { padding: 0 4px 0 44px; }
#sideNav .nav-item2 .nav-dot { width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; margin-right: 10px; flex: 0 0 5px; opacity: .8; }
/*nhóm cha chứa nhóm con đang mở: trần 560px không đủ chỗ*/
.nav-parent.open + .nav-sub { max-height: 800px; }
.side-foot { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; }
.side-foot a { color: #a3a8af; cursor: pointer; }

/* thu gọn: chỉ còn icon, ẩn chữ + mũi tên + menu con */
#sidebar.mini { flex-basis: 52px; width: 52px; min-width: 0; }
/*⚠ KHÔNG dùng display:none — chữ biến mất tức thì trong khi khung còn đang co (nhìn giật).
  Sapo để nội dung bị CẮT DẦN theo bề rộng: max-width 160→0 + opacity, cùng nhịp 0,2s.*/
.nav-tx, .side-who { max-width: 160px; overflow: hidden; white-space: nowrap;
  transition: max-width .2s cubic-bezier(.4, 0, .2, 1), opacity .14s linear; }
#sideNav svg.nav-chev { max-width: 24px; overflow: hidden;
  transition: transform .2s linear, max-width .2s cubic-bezier(.4, 0, .2, 1), opacity .14s linear; }
#sidebar.mini .nav-tx, #sidebar.mini .side-who,
#sidebar.mini #sideNav svg.nav-chev { max-width: 0; opacity: 0; margin: 0; }
#sidebar.mini .nav-sub { max-height: 0; }
/*pos138: KHÔNG đổi justify-content/padding khi thu gọn — Sapo giữ icon ĐỨNG YÊN ở x=14 suốt
  quá trình mở/đóng (full: margin 4 + padding-left 10 = 14 · mini: (52-24)/2 = 14). Đổi canh lề
  giữa 2 trạng thái là icon nhảy ngang trong lúc animate.*/
/* Sapo thu gọn: đầu menu chỉ còn nút ⋮ (bấm lại để bung) */
#sidebar.mini .side-head { justify-content: center; padding: 0; }
#sidebar.mini .side-avatar { display: none; }
/*thu gọn: nhãn "Đăng xuất" mờ đi cùng nhịp với các nhãn khác thay vì bị cắt ngang chữ*/
#sidebar.mini .side-foot { text-align: center; padding: 12px 0; font-size: 12px;
  white-space: nowrap; overflow: hidden; opacity: 0; transition: opacity .14s linear; }
/*mục con khi thu gọn: bỏ thụt lề 44px để icon (nếu có) không lệch*/
#sidebar.mini #sideNav .nav-sub .nav-item { padding: 0 4px 0 10px; }
#sideMask { display: none; }
#main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#topbar { height: 56px; background: #fff; display: flex; align-items: center; gap: 12px;
  padding: 0 18px; box-shadow: rgba(168,168,168,.2) 0 1px 3px; position: sticky; top: 0; z-index: 20; }
#pageTitle { font-size: 16px; font-weight: 600; color: var(--ink2); flex: 1; }
.ham { display: none; background: none; border: 0; font-size: 20px; cursor: pointer; color: var(--ink); }
#pageContent { padding: 18px; flex: 1; }

/* ── Card + bảng ─────────────────────────────────────────────────────────── */
.card { background: #fff; border-radius: 3px; box-shadow: rgba(168,168,168,.25) 0 2px 4px; margin-bottom: 24px; }
.card-head { height: 50px; padding: 14px 16px; border-bottom: 1px solid #f3f4f5;
  font-size: 15.75px; font-weight: 500; color: var(--ink); display: flex; align-items: center;
  justify-content: space-between; }
.card-body { padding: 16px; }
table { width: 100%; border-collapse: collapse; }
th { font-size: 14px; font-weight: 500; color: var(--ink2); background: #f5f7fa; padding: 12px 10px;
  text-align: left; white-space: nowrap; }
td { font-size: 14px; padding: 11px 10px; border-bottom: 1px solid #f0f1f3; }
.table-wrap { overflow-x: auto; }
.muted { color: var(--muted); }
.tag-green { color: var(--green); }
.tag-red { color: var(--red); }

/* Toast dùng CSS của hrm-legacy.css (helper bê từ HRM phụ thuộc cấu trúc đó) */

/* ── pos120: KHUNG MODAL CHUẨN SAPO (áp cho MỌI popup của POS) ──────────────
   Số đo lấy bằng getComputedStyle trên chính popup của Sapo (modal "Chọn đơn hàng để trả",
   "Điều chỉnh cột hiển thị", "Xuất file danh sách đơn trả hàng" — 15/8/2026):
   nền mờ rgba(0,0,0,.5) KHÔNG blur · hộp CÁCH ĐỈNH 50px (không căn giữa màn) · bo 3px ·
   shadow rgba(168,168,168,.25) 0 8px 16px · rộng 700 (mặc định) / 1170 (popup có bảng) ·
   header h52 pad 0 24px border-bottom 1px #d3d5d7 · tiêu đề 20px/500 #182537 ·
   nút ✕ 24x24 icon 14px #a3a8af · body cuộn max-height calc(100vh - 200px) ·
   nút đáy h36 bo 3px 14px/500 cách nhau 16px: phụ = viền+chữ #0088ff, chính = nền #0088ff.
   hrm-legacy.css khai .modal-box{border-radius:18px !important} nên phải !important. */
#modal.modal-overlay { align-items: flex-start; justify-content: center; padding: 0;
  background: rgba(0,0,0,.5); backdrop-filter: none; }
#modal .modal-box { border-radius: 3px !important; max-width: 700px; width: calc(100% - 32px);
  margin: 50px 0 0 !important; max-height: calc(100vh - 148px);
  box-shadow: rgba(168,168,168,.25) 0 8px 16px !important;
  display: flex; flex-direction: column; overflow: hidden; }
#modal.mdl-wide .modal-box { max-width: 1170px; }
#modal:not(.mdl-filter) .modal-header { height: 52px; min-height: 52px; padding: 0 24px !important;
  border-bottom: 1px solid #d3d5d7 !important; flex: 0 0 auto; }
#modal .modal-header h3, #modal #modalTitle { font-size: 20px !important; font-weight: 500 !important;
  color: var(--ink2) !important; letter-spacing: 0 !important; }
#modal .modal-header button { width: 24px; height: 24px; padding: 0; font-size: 14px;
  color: #a3a8af; border-radius: 50%; }
#modal .modal-header button:hover { background: none; color: var(--ink); }
#modal .modal-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px 24px !important; }
#modal .modal-body .btn-ghost, #modal .modal-body button.mdl-sec {
  height: 36px; padding: 0 16px; border-radius: 3px !important; font-size: 14px !important;
  font-weight: 500 !important; font-family: inherit; cursor: pointer;
  border: 1px solid var(--blue) !important; color: var(--blue) !important; background: #fff !important; }
#modal .modal-body .btn-ghost:hover, #modal .modal-body button.mdl-sec:hover { background: #f2f9ff !important; }
/* mobile: hộp bám mép như Sapo bản hẹp (Sapo mobile chưa soi — giữ chừa lề 12px) */
@media (max-width: 768px) {
  #modal .modal-box { margin: 12px !important; width: calc(100% - 24px);
    max-height: calc(100vh - 24px); }
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ham { display: block; }
  #sidebar { position: fixed; left: -240px; top: 0; z-index: 60; transition: left .2s; }
  #sidebar.open { left: 0; }
  /* pos8: mobile là drawer → không dùng chế độ thu gọn */
  #sidebar.mini { flex-basis: 225px; width: 225px; }
  #sidebar.mini .nav-tx, #sidebar.mini .side-who { max-width: 160px; opacity: 1; }
  #sidebar.mini #sideNav svg.nav-chev { max-width: 24px; opacity: 1; }
  #sidebar.mini .side-avatar { display: flex; }
  #sidebar.mini .nav-parent.open + .nav-sub { max-height: 560px; }
  #sidebar.mini .nav-item { justify-content: flex-start; padding: 0 4px 0 10px; }
  #sidebar.mini .nav-sub .nav-item { padding: 0 4px 0 44px; }
  #sidebar.mini .side-head { justify-content: flex-start; padding: 0 14px; }
  .side-mini-btn { display: none; }
  #sideMask.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 50; }
  #pageContent { padding: 12px; }
}

.nav-badge { margin-left: auto; background: #dc2626; color: #fff; border-radius: 10px;
  min-width: 20px; height: 18px; padding: 0 6px; font-size: 11px; display: inline-flex;
  align-items: center; justify-content: center; }

/* Khung POS phủ lên hrm-legacy.css */
#pageContent.page-content { padding: 18px; }
@media (max-width: 768px) { #pageContent.page-content { padding: 12px; } }

/* ── pos108: MOBILE theo đúng cách Sapo dựng (soi /admin/orders ở khổ hẹp 15/8/2026) ──
   Sapo KHÔNG đổi bảng thành card trên mobile: bảng giữ nguyên, nằm trong vùng CUỘN NGANG;
   hàng lọc và khối KPI cũng là MỘT HÀNG cuộn ngang chứ không wrap xuống nhiều dòng.
   POS trước đó: bảng TRÀN ra ngoài (không cuộn được, mất cột phải), filter wrap 3 dòng. */
@media (max-width: 768px) {
  #pageContent .tblx { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* pos117: hrm-legacy.css (di sản HRM) có `.ts-wrap,.table-wrap{display:none!important}` ở
     mobile — HRM xưa ẩn bảng để hiện card. POS nay theo Sapo: bảng LUÔN hiện, cuộn ngang. */
  #pageContent .table-wrap { display: block !important; overflow-x: auto;
    -webkit-overflow-scrolling: touch; }
  /* pos114: KHÔNG dùng min-width:max-content — bảng list vài trăm dòng làm trình duyệt
     tính lại layout rất nặng. pos115: thay bằng nowrap cho ô — bảng tự giãn theo nội dung
     rồi cuộn ngang ĐÚNG như Sapo (cột giữ nguyên bề rộng, chữ không bị bóp/cắt). */
  /* pos119: !important vì vài cột đặt white-space:normal bằng inline style (vd cột Địa chỉ
     màn Nhân viên) — ở khổ hẹp nó wrap thành 4-5 dòng làm hàng cao vọt, lệch hẳn Sapo
     (Sapo mọi ô 1 dòng, dòng cao đều, dài thì cuộn ngang). Desktop giữ nguyên như cũ. */
  #pageContent .tblx td, #pageContent .tblx th,
  #pageContent .table-wrap td, #pageContent .table-wrap th { white-space: nowrap !important; }
  /* pos116: bảng list dựng cho desktop dùng table-layout:fixed + width:100% nên ở khổ hẹp
     bị ÉP vừa khung (cột co, chữ cắt "Thìa m..."). Sapo mobile để bảng rộng theo nội dung
     rồi cuộn ngang → trả bảng về auto và cho phép rộng hơn khung. */
  #pageContent .tblx > table, #pageContent .table-wrap > table {
    table-layout: auto !important; width: auto !important; min-width: 100%; }

  #pageContent .ol-frow, #pageContent .kx-frow, #pageContent .inv-frow,
  #pageContent .cb-frow, #pageContent .ret-frow, #pageContent .sa-frow {
    flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px; }
  #pageContent .ol-frow > *, #pageContent .kx-frow > *, #pageContent .inv-frow > *,
  #pageContent .cb-frow > *, #pageContent .ret-frow > *, #pageContent .sa-frow > * {
    flex: 0 0 auto !important; }

  #pageContent .ol-pend { flex-wrap: nowrap !important; overflow-x: auto;
    -webkit-overflow-scrolling: touch; }
  #pageContent .ol-pc { flex: 0 0 auto !important; min-width: 150px; }

  /* toolbar trên cùng (Xuất file · Nhập file · Loại SP … · nút chính) — Sapo giữ 1 HÀNG,
     cuộn ngang; POS trước đó wrap 2 dòng nên "Sản phẩm quy đổi" rơi xuống cạnh nút Thêm */
  #pageContent .olbar, #pageContent .sa-acts, #pageContent .kx-toolbar,
  #pageContent .inv-toolbar, #pageContent .cb-toolbar { flex-wrap: nowrap !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #pageContent .kx-toolbar > *, #pageContent .olbar > *, #pageContent .sa-acts > * {
    flex: 0 0 auto !important; }
  /* pos118: chữ trong nút không xuống dòng (nút "Phân quyền vai trò" đang vỡ 3 dòng) */
  #pageContent .sa-acts button, #pageContent .olbar button,
  #pageContent .kx-toolbar button { white-space: nowrap; }
  #pageContent .kx-toolbar .kx-tool { white-space: nowrap; }
}

/* pos110: header mobile copy Sapo — ☰ trái + avatar/tên user phải, BỎ tiêu đề trang */
#topbarUser { display: none; align-items: center; gap: 8px; cursor: pointer; }
#tbUserAv { width: 30px; height: 30px; border-radius: 50%; background: #0088ff; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; }
#tbUserName { font-size: 15px; color: var(--ink); max-width: 42vw; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 768px) {
  #pageTitle { display: none; }
  #topbarUser { display: inline-flex; }
  #topbarRight { margin-left: auto; display: flex; align-items: center; gap: 10px; }
}

/* pos123: .kx-filter-btn là CLASS MỒ CÔI — chỉ còn rule white-space, không ai khai style nên
   nút "Bộ lọc khác / Lưu bộ lọc" (màn Nhập hàng) và "Chọn nhiều / (F10)" (màn tạo đơn nhập)
   rơi về nút mặc định của trình duyệt: viền đen 2px, nền #efefef, cao 20px, chữ 13.33px.
   Khai lại theo token Sapo (hàng lọc màn list cao 40, trong form cao 36). */
.kx-filter-btn { height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 3px;
  background: #fff; color: var(--ink); font-size: 14px; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.kx-filter-btn:hover { border-color: var(--blue); color: var(--blue); }
.kx-frow .kx-filter-btn { height: 40px; }

/* pos125: phân trang chuẩn Sapo (dùng chung cho các màn list đọc từ Sapo) — chữ 14px,
   nút trang 24x24 tròn, trang hiện tại nền #0088ff chữ trắng, cách nhau 8px */
.pos-pg { display: flex; align-items: center; justify-content: center; gap: 24px;
  padding: 16px 8px 4px; font-size: 14px; color: var(--ink); flex-wrap: wrap; }
.pos-pg .lim { color: var(--blue); cursor: pointer; font-weight: 500; }
.pos-pgn { display: flex; align-items: center; gap: 8px; }
.pos-pgn span { width: 24px; height: 24px; border-radius: 25px; display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer; color: var(--ink2); }
.pos-pgn span.on { background: var(--blue); color: #fff; }
.pos-pgn span.dis { color: #e8eaeb; cursor: default; }

/* ── pos170: KHUNG MODAL DRILL BÁO CÁO LÃI LỖ (clone `.modal-dialog-new` của Sapo — 8 popup số xanh) ──
   Đo getComputedStyle trên popup "Tiền hàng bán ra" Sapo 17/8/2026 (@1440×623): hộp 1000px, viền 1px
   rgba(0,0,0,.2), bo 6px, shadow rgba(0,0,0,.5) 0 5px 15px, cách đỉnh 17.5px · header h65 pad 16px 20px,
   border-bottom 1px #dfe4e8, tiêu đề 20px/400 #212b35 lh30, ✕ svg 20×20 fill #637381 · body pad 0,
   max-height calc(100vh − 150px), scrollbar 10px thumb #d4d3d3 r12 · footer border-top 1px #e9ecef
   pad 10px 20px, [Thoát] h36 viền #c4cdd5 bo 3 pad 9px 15px 14px chữ #000. KHÁC khung pos120 nên tách class. */
#modal.mdl-pnd .modal-box { max-width: 1000px; margin: 17.5px 0 0 !important; max-height: none;
  border: 1px solid rgba(0,0,0,.2); border-radius: 6px !important;
  box-shadow: rgba(0,0,0,.5) 0 5px 15px !important; }
#modal.mdl-pnd .modal-header { height: 65px; min-height: 65px; padding: 16px 20px !important;
  border-bottom: 1px solid #dfe4e8 !important; align-items: flex-start; }
#modal.mdl-pnd .modal-header h3, #modal.mdl-pnd #modalTitle { font-size: 20px !important; font-weight: 400 !important;
  color: #212b35 !important; line-height: 30px; flex: 1; min-width: 0; }
#modal.mdl-pnd .modal-header .pnl-xf { flex: none; width: auto; height: 36px; margin: -2px 0 0; padding: 0 15px;
  border: 1px solid #c4cdd5; border-radius: 3px; background: transparent; color: #212b35;
  font-size: 14px; font-family: inherit; line-height: 34px; cursor: pointer; white-space: nowrap; }
#modal.mdl-pnd .modal-header > button:not(.pnl-xf) { flex: none; width: 20px; height: 20px; margin-left: 25px;
  border-radius: 0; color: #637381; position: relative; }
#modal.mdl-pnd .modal-header > button:not(.pnl-xf) > * { display: none; }
#modal.mdl-pnd .modal-header > button:not(.pnl-xf)::before { content: ""; display: block; width: 20px; height: 20px;
  background: #637381;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M11.414 10l4.293-4.293c.391-.391.391-1.023 0-1.414s-1.023-.391-1.414 0l-4.293 4.293-4.293-4.293c-.391-.391-1.023-.391-1.414 0s-.391 1.023 0 1.414l4.293 4.293-4.293 4.293c-.391.391-.391 1.023 0 1.414.195.195.451.293.707.293.256 0 .512-.098.707-.293l4.293-4.293 4.293 4.293c.195.195.451.293.707.293.256 0 .512-.098.707-.293.391-.391.391-1.023 0-1.414l-4.293-4.293z'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M11.414 10l4.293-4.293c.391-.391.391-1.023 0-1.414s-1.023-.391-1.414 0l-4.293 4.293-4.293-4.293c-.391-.391-1.023-.391-1.414 0s-.391 1.023 0 1.414l4.293 4.293-4.293 4.293c-.391.391-.391 1.023 0 1.414.195.195.451.293.707.293.256 0 .512-.098.707-.293l4.293-4.293 4.293 4.293c.195.195.451.293.707.293.256 0 .512-.098.707-.293.391-.391.391-1.023 0-1.414l-4.293-4.293z'/%3E%3C/svg%3E") center / 20px 20px no-repeat; }
#modal.mdl-pnd .modal-body { padding: 0 !important; overflow: visible; max-height: none; }
#modal.mdl-pnd .pnd-body { max-height: calc(100vh - 150px); overflow: auto; position: relative; }
#modal.mdl-pnd .pnd-body::-webkit-scrollbar { width: 10px; height: 10px; }
#modal.mdl-pnd .pnd-body::-webkit-scrollbar-thumb { background: #d4d3d3; border-radius: 12px; }
#modal.mdl-pnd .pnd-body::-webkit-scrollbar-track { background: transparent; }
#modal.mdl-pnd .pnd-loading { height: 300px; display: flex; align-items: center; justify-content: center;
  color: #212b35; font-size: 18px; }
/* bảng: th 14/500 nền #3d73a2 h36 pad 0 8px, kẻ dọc 1px trắng + kẻ dưới #ebeef0, sticky; dòng Tổng nền
   (⚠ chia cột: Sapo = td min-width 120 + STT inline width/min-width 50 → auto layout ra 120/214/214/226/214,
   thử 9 biến thể mới trúng — KHÔNG ép width cứng cột) */
/* dòng Tổng nền
   trắng 14/500 #000 sticky dưới header; td 13px #212b35 pad 6px 8px h36 kẻ dưới #ebeef0, hover #ebf5fa */
#modal.mdl-pnd .pnd-tbl { width: 100%; min-width: 0 !important; border-collapse: separate; border-spacing: 0;
  table-layout: auto; margin: 0; }
#modal.mdl-pnd .pnd-tbl th { position: sticky; top: 0; z-index: 2; height: 36px; padding: 0 8px !important;
  background: #3d73a2 !important; color: #fff !important; font-size: 14px !important; font-weight: 500 !important;
  line-height: 20px; text-align: center; text-transform: none !important; letter-spacing: 0 !important;
  border: 0 !important; border-right: 1px solid #fff !important; border-bottom: 1px solid #ebeef0 !important;
  vertical-align: middle; white-space: nowrap; }
#modal.mdl-pnd .pnd-tbl tr.pnd-sum th { top: 36px; background: #fff !important; color: #000 !important; }
#modal.mdl-pnd .pnd-tbl td { min-width: 120px; height: 36px; padding: 6px 8px; background: #fff; font-size: 13px; color: #212b35;
  line-height: 20.8px; text-align: center; border: 0; border-bottom: 1px solid #ebeef0; vertical-align: middle;
  white-space: nowrap; }
#modal.mdl-pnd .pnd-tbl tbody tr:hover td { background: #ebf5fa; }
#modal.mdl-pnd .pnd-tbl a { color: #0088ff; text-decoration: none; font-size: 13px; }
#modal.mdl-pnd .pnd-tbl a:hover { text-decoration: underline; color: #084e8a; }
/* chân bảng (trong vùng cuộn): margin-top 15 · pad-bottom 20 · trạng thái 14px pad 7px 20px 0 15px ·
   phân trang kiểu hộp bootstrap: 13px h25 pad 2px 7px viền #ddd, active nền #0088ff, đầu/cuối bo 4px */
#modal.mdl-pnd .pnd-pager { margin-top: 15px; background: #fff; }
#modal.mdl-pnd .pnd-pager-in { display: flex; align-items: flex-start; padding-bottom: 20px; }
#modal.mdl-pnd .pnd-status { padding: 7px 20px 0 15px; font-size: 14px; color: #212b35; line-height: 20px;
  white-space: nowrap; }
#modal.mdl-pnd .pnd-pg { display: flex; margin: 0 15px 0 auto; padding: 0; list-style: none; }
#modal.mdl-pnd .pnd-pg li { margin: 0; padding: 0; }
#modal.mdl-pnd .pnd-pg li a { display: block; height: 25px; padding: 2px 7px; margin-left: -1px;
  border: 1px solid #ddd; background: #fff; color: #0088ff; font-size: 13px; line-height: 18.5714px;
  text-decoration: none; cursor: pointer; white-space: nowrap; box-sizing: border-box; }
#modal.mdl-pnd .pnd-pg li:first-child a { margin-left: 0; border-radius: 4px 0 0 4px; }
#modal.mdl-pnd .pnd-pg li:last-child a { border-radius: 0 4px 4px 0; }
#modal.mdl-pnd .pnd-pg li.active a { background: #0088ff; border-color: #0088ff; color: #fff; cursor: default; }
#modal.mdl-pnd .pnd-pg li.disabled a { color: #999; cursor: not-allowed; }
#modal.mdl-pnd .pnd-foot { display: flex; justify-content: flex-end; padding: 10px 20px;
  border-top: 1px solid #e9ecef; }
#modal.mdl-pnd .modal-body button.pnd-close, #modal.mdl-pnd .modal-body button.pnd-close.mdl-sec {
  height: 36px; padding: 0 15px; border: 1px solid #c4cdd5 !important; border-radius: 3px !important;
  background: transparent !important; color: #000 !important; font-size: 14px !important;
  font-weight: 400 !important; font-family: inherit; line-height: 34px; cursor: pointer; }
#modal.mdl-pnd .modal-body button.pnd-close:hover { background: #f4f6f8 !important; }