/* ===== POS KOREA STYLE - MICOVINA ===== */
:root{
  --bg:#d4d0c8;
  --panel:#ece9d8;
  --panel2:#f0eff0;
  --text:#000000;
  --muted:#6b6b6b;
  --line:#808080;
  --line2:#c0c0c0;
  --primary:#4a7a3f;
  --primary-dark:#2d5a22;
  --primary-text:#ffffff;
  --header-bg:#4a7a3f;
  --header2-bg:#6aad5e;
  --title-bar:#316a72;
  --btn-bg:#ece9d8;
  --btn-border:#808080;
  --btn-hover:#d4d0c8;
  --accent:#f59e0b;
  --danger:#cc0000;
  --danger-bg:#ffcccc;
  --success:#006600;
  --warning:#cc6600;
  --row-selected:#316a72;
  --row-selected-text:#fff;
  --row-alt:#f7f7f0;
  --shadow:inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
  --shadow-out:inset -1px -1px 0 #fff, inset 1px 1px 0 #808080;
  --radius:0px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  margin:0;
  font-family:"Be Vietnam Pro","Segoe UI","Malgun Gothic",Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:12px;
  overflow:hidden;
  height:100vh;
}
button,input,select,textarea{font:inherit;font-size:12px}
button{cursor:pointer}

/* ===== TOP BAR (title bar) ===== */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,#1a6b3a 0%,#0d5a2a 100%);
  color:#fff;
  padding:4px 8px;
  height:36px;
  border-bottom:2px solid #0a4020;
  flex-shrink:0;
}
.topbar .brand-name{font-size:14px;font-weight:700;letter-spacing:.02em}
.topbar .brand-sub{font-size:11px;opacity:.8;margin-left:8px}
.top-actions{display:flex;gap:6px;align-items:center}
.top-actions .search{
  height:24px;padding:2px 6px;font-size:11px;
  border:1px inset var(--line);background:#fff;
  border-radius:0;min-width:180px;
}
.top-actions .btn{
  height:24px;padding:0 8px;font-size:11px;
  background:var(--btn-bg);border:1px solid;
  border-color:#fff #808080 #808080 #fff;
  border-radius:0;
}
@media(max-width:820px){
  /* Việc A + E: nút Sửa/Xóa & vùng chạm chung dễ bấm hơn bằng ngón tay (chuẩn tối thiểu ~40px) */
  .action-btn{min-height:30px;padding:6px 10px;font-size:12px;margin:2px 3px 2px 0}
  .pos-btn{min-height:32px;padding:6px 10px;font-size:13px}
  input,select,textarea{font-size:14px!important}
  input[type=number],input[type=text],input[type=date],select{min-height:32px}

  /* Việc B: dialog thêm/sửa (SP, NCC, Nhóm hàng...) chuyển 2 cột cố định -> 1 cột khi màn hẹp,
     tránh cột chính bị bóp còn ~190px như trước */
  .dialog-body{grid-template-columns:1fr!important}

  /* Thanh trên cùng: bỏ chiều cao cố định 36px, cho tự xuống dòng; ẩn phụ đề + thông tin
     trang trí (tên shop tiếng Hàn/SĐT) vì đây là app quản lý nội bộ, người dùng đã biết
     số của chính mình, không cần chiếm chỗ trên màn hình nhỏ. */
  .topbar{height:auto;flex-wrap:wrap;row-gap:6px;padding:8px}
  .topbar .brand-sub{display:none}
  .top-actions{width:100%;flex-wrap:wrap}
  .top-actions .search{flex:1 1 100%;min-width:0;height:30px;font-size:13px}
  .top-actions #sideShopName,
  .top-actions #sidePhone{display:none}
  .top-actions a.pos-btn,
  .top-actions button.pos-btn{flex:1 1 auto;height:30px;font-size:12px;white-space:nowrap}
}

/* Việc D — gộp gọn thanh 12 tab thành menu sổ xuống trên mobile.
   Mặc định ẩn nút toggle (chỉ hiện khi màn hình hẹp); tab-bar mặc định vẫn hiển thị bình thường
   trên desktop, chỉ chuyển thành dropdown khi ở mobile VÀ đang bấm mở. */
.mobile-nav-toggle{
  display:none;
  width:100%;
  background:linear-gradient(180deg,#4a9a5a 0%,#316a3a 100%);
  color:#fff;border:none;border-bottom:2px solid #205a28;
  padding:10px 12px;font-size:14px;font-weight:700;text-align:left;
  cursor:pointer;
}
@media(max-width:820px){
  .mobile-nav-toggle{display:block}
  .tab-bar{display:none!important}
  /* QUAN TRỌNG: mọi thuộc tính layout của menu mobile phải đặt ở SELECTOR NÀY (.tab-bar.mobile-open,
     2 class) chứ không phải .tab-bar (1 class) — vì có 1 rule ".tab-bar{...}" KHÁC (không nằm trong
     @media) nằm ở PHÍA SAU trong file (mục "NAV TABS"), cùng độ ưu tiên 1-class nên nó sẽ THẮNG và
     âm thầm ghi đè bất kỳ thuộc tính nào đặt ở .tab-bar thường tại đây. Dùng .tab-bar.mobile-open
     (2 class) để luôn thắng bất kể thứ tự khai báo trong file.

     QUAN TRỌNG #2: dùng position:fixed + "top" ĐO THẬT bằng JS (xem toggleMobileNav() trong app.js)
     thay vì đoán chiều cao topbar bằng số cố định/calc(vh) — vì topbar có ô tìm kiếm + nhiều nút,
     rất dễ XUỐNG DÒNG trên màn hẹp làm topbar cao thấp khác nhau tuỳ máy/tuỳ lúc, đoán sai 1 chút
     là menu bị che khuất mất phần trên hoặc bị đẩy tràn xuống dưới màn hình không cuộn tới được. Với
     position:fixed + bottom:0 + top đo thật, menu LUÔN vừa khít đúng phần còn lại của màn hình. */
  .tab-bar.mobile-open{
    display:block!important;
    position:fixed;
    top:96px; /* dự phòng — sẽ bị JS ghi đè bằng giá trị đo thật ngay khi mở menu */
    left:0; right:0; bottom:0;
    z-index:1000;
    background:#fff;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
    padding:6px;
    margin:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    overscroll-behavior:contain;
  }
  /* display:block (không flex) — mỗi tab CHẮC CHẮN chiếm trọn 1 hàng, không có chuyện co lại hay
     nhảy sang "cột" khác khi danh sách dài hơn khung nhìn (đây chính là nguyên nhân bị chèn ép/che
     khuất nhau ở lần sửa trước — dùng flex-direction:column dễ bị trình duyệt tự ý bóp nhỏ hoặc bẻ
     sang cột mới khi nội dung dài hơn khung, dù đã set flex-wrap:nowrap). */
  .tab-bar.mobile-open .tab-btn{
    display:block;
    width:100%;
    max-width:none;
    text-align:left;
    border-radius:6px;
    margin-bottom:3px;
  }
}

/* ===== NAV TABS ===== */
.sidebar{
  display:none; /* hidden - nav is now tab bar */
}
.tab-bar{
  display:flex;align-items:stretch;gap:4px;flex-wrap:wrap;
  background:var(--bg);
  padding:6px 8px 0;
  border-bottom:2px solid var(--primary-dark);
  flex-shrink:0;
}
.tab-btn{
  /* flex-grow/shrink giống hệt nhau trên mọi tab → luôn ra ĐÚNG 1 độ rộng bằng nhau,
     bất kể chữ dài ngắn khác nhau (VD "In tem" vs "Kiểm soát HSD"). */
  flex:1 1 110px;
  max-width:170px;
  border:1px solid var(--line2);
  border-bottom:none;
  background:#fbfbf8;
  color:var(--primary-dark);
  padding:8px 6px;
  font-size:12px;
  font-weight:600;
  border-radius:6px 6px 0 0;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  position:relative;
  top:1px;
  cursor:pointer;
  box-shadow:0 -1px 2px rgba(0,0,0,.05);
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.tab-btn:hover{background:#e6f2e3;color:var(--primary-dark)}
.tab-btn.active{
  background:linear-gradient(180deg,var(--header2-bg) 0%,var(--primary) 100%);
  border-color:var(--primary-dark);
  color:#fff;
  font-weight:700;
  z-index:2;
  box-shadow:0 -3px 6px rgba(0,0,0,.18);
}

/* ===== DROPDOWN "Quản lý kho" (gộp Hàng hoá/Tồn kho/Nhập kho/Xuất-Bán/Nhóm hàng/HSD/Chi phí) =====
   CHỈ áp dụng dạng dropdown trên PC (>820px) — trên mobile menu đã tự xổ dọc toàn bộ (.mobile-open)
   nên để nguyên dạng phẳng, dùng display:contents để "gỡ" khung bọc ra, coi 7 nút con như đang nằm
   thẳng trong .tab-bar (không lồng thêm 1 cấp), tránh phải viết lại toàn bộ logic mobile-open. */
.tab-dropdown{position:relative;display:inline-flex}
.tab-dropdown-menu{
  position:fixed; /* toạ độ top/left do JS đo & gán thật (xem positionDropdownMenu() trong app.js) —
                      dùng fixed để THOÁT khỏi #navHeader (có overflow:hidden) là cha của tab-bar,
                      nếu để absolute thì phần menu tràn ra sẽ bị cắt/che bởi overflow đó. */
  z-index:1500; /* cao hơn hẳn nội dung các tab (.view, .db-wrap...) để không bị đè lên */
  min-width:190px;
  background:#fff;
  border:1px solid var(--primary-dark);
  border-radius:0 6px 6px 6px;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
  padding:5px;
  display:flex;
  flex-direction:column;
  gap:3px;
  /* Hiệu ứng "sổ ra": mờ dần + trượt nhẹ từ trên xuống + hơi co theo chiều cao, thay vì bật/tắt
     display đột ngột. visibility trễ khi ĐÓNG (transition-delay) để opacity/transform kịp chạy hết
     trước khi thật sự biến mất; lúc MỞ thì visibility đổi ngay (delay 0s) để không bị "khựng". */
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-8px) scaleY(.94);
  transform-origin:top left;
  transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.tab-dropdown.open .tab-dropdown-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scaleY(1);
  transition:opacity .16s ease, transform .16s ease, visibility 0s linear 0s;
}
.tab-dropdown-menu .tab-btn{
  flex:none;max-width:none;width:100%;
  text-align:left;
  border-radius:4px;
  border-bottom:1px solid var(--line2);
  top:0;box-shadow:none;
}
/* Tiêu đề nhóm nhỏ, không bấm được, chỉ để phân tách các mục trong dropdown (VD "Công cụ hệ thống"
   / "Công cụ riêng") — ẩn/hiện tuỳ quyền qua class .hidden như các nút khác (xem setupUserUI()). */
.tab-dropdown-section{
  font-size:10px;font-weight:800;color:#8a8;text-transform:uppercase;letter-spacing:.04em;
  padding:5px 8px 2px;margin-top:2px;
  border-top:1px solid var(--line2);
}
.tab-dropdown-section:first-child{border-top:none;margin-top:0}
.tab-dropdown .dropdown-trigger.active-group{
  background:linear-gradient(180deg,var(--header2-bg) 0%,var(--primary) 100%);
  border-color:var(--primary-dark);
  color:#fff;font-weight:700;
}
@media(max-width:820px){
  .tab-dropdown{display:contents}
  .tab-dropdown .dropdown-trigger{display:none} /* nút "Quản lý kho ▾" không cần trên mobile, 7 nút con hiện thẳng như các tab khác */
  .tab-dropdown-menu{
    display:contents; /* bỏ khung bọc, 7 nút con nằm ngang hàng các tab khác trong menu mobile-open */
  }
}

/* ===== TOOL SUB-TABS (tab con bên trong "🔧 Công cụ") =====
   Dùng chung style với .tab-btn nhưng nhỏ hơn 1 cấp, để phân biệt đây là tab CON, không phải tab
   chính — cho phép thêm nhiều công cụ mới sau này mà không phải sửa lại HTML/CSS. */
.tool-tab-bar{
  display:flex;align-items:stretch;gap:4px;flex-wrap:wrap;
  padding:8px 12px 0;
  border-bottom:1px solid var(--line2);
  flex-shrink:0;
}
.tool-tab-btn{
  border:1px solid var(--line2);
  border-bottom:none;
  background:#fff;
  color:var(--primary-dark);
  padding:6px 14px;
  font-size:12px;
  font-weight:600;
  border-radius:6px 6px 0 0;
  cursor:pointer;
  position:relative;
  top:1px;
}
.tool-tab-btn:hover{background:#e6f2e3}
.tool-tab-btn.active{
  background:var(--primary);
  border-color:var(--primary-dark);
  color:#fff;
  font-weight:700;
}
.tool-panel{display:none}
.tool-panel.active{display:block}
/* Tab CON bên trong "🏠 Quản lý phòng trọ" — CỐ TÌNH đặt tên class RIÊNG (không trùng .tool-tab-btn/
   .tool-panel) để switchToolTab() ở tab NGOÀI không bị nhầm lẫn quét trúng các tab con này. */
.rental-subtab-bar{
  display:flex;align-items:stretch;gap:4px;flex-wrap:wrap;
  padding:0 0 8px;margin-bottom:10px;
  border-bottom:2px solid var(--primary);
}
.rental-subtab-btn{
  border:1px solid var(--line2);
  background:#fff;color:var(--primary-dark);
  padding:6px 12px;font-size:11.5px;font-weight:600;
  border-radius:5px;cursor:pointer;
}
.rental-subtab-btn:hover{background:#e6f2e3}
.rental-subtab-btn.active{
  background:var(--primary);border-color:var(--primary-dark);
  color:#fff;font-weight:700;
}
.rental-subtab-panel{display:none}
.rental-subtab-panel.active{display:block}
@media(max-width:820px){
  .rental-subtab-btn{flex:1 1 auto}
}
@media(max-width:820px){
  .tool-tab-bar{flex-wrap:wrap}
  .tool-tab-btn{flex:1 1 auto}
}

/* ===== TAB "⚙️ Cài đặt" — chỉ hiện đúng 1 mục đang chọn (không có thanh nút chọn ngay trên trang,
   việc chuyển mục hoàn toàn qua dropdown "⚙️ Cài đặt ▾" ở thanh tab chính — xem index.html +
   switchSettingsTab()/openSettingsSection() trong app.js). */
.settings-panel{display:none;max-width:760px;margin:0 auto;padding:14px 4px}
.settings-panel.active{display:block}
.settings-panel-title{
  font-size:15px;font-weight:800;color:var(--primary-dark);
  padding-bottom:8px;margin-bottom:12px;
  border-bottom:2px solid var(--primary);
}

/* ===== LAYOUT ===== */
.app-shell{display:flex;flex-direction:column;height:100vh}
/* Khung TOP BAR + TAB BAR — co lại (ẩn) khi cuộn chuột xuống, hiện lại khi cuộn lên (xem app.js),
   để nhường thêm diện tích xem nội dung. max-height 400px đủ dư (kể cả khi tab-bar xuống hàng 3
   dòng trên màn hẹp) — CHỈ áp dụng ở desktop (>820px), trên mobile giữ nguyên hành vi cũ vì menu
   mobile dùng cơ chế "mobile-open" (position:fixed) riêng, không liên quan tới khung này. */
.nav-header{max-height:400px;overflow:hidden;transition:max-height .25s ease,opacity .2s ease}
@media(min-width:821px){
  .nav-header.nav-collapsed{max-height:0;opacity:0}
}
.app{
  flex:1;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:var(--bg);
}
.view{display:none;flex:1;overflow:hidden;flex-direction:column}
.view.active{display:flex}

/* Trang "In tem" (#labels) có 4 tab (Tem kệ / Tem SP / QC 1 SP / QC 9 SP), mỗi tab có thể cao hơn
   màn hình (nhiều tem, ảnh quảng cáo lớn...) — .view mặc định overflow:hidden nên bị cắt mất phần
   dưới, KHÔNG có thanh cuộn để xem hết. Đổi riêng #labels sang block + overflow-y:auto để luôn có
   thanh cuộn dọc khi cần, không ảnh hưởng các trang khác. */
#labels.view.active{
  display:block;
  overflow-y:auto;
  overflow-x:hidden;
}

/* Panel "🔍 Rà soát thiếu dữ liệu" (Danh mục hàng hóa) — kiểu DROPDOWN NỔI (như menu bấm-là-sổ-ra)
   thay vì chèn thẳng vào layout như trước: trước đây panel là 1 khối cố định BÊN TRÊN bảng hàng hóa,
   nên mở ra là chiếm mất diện tích của bảng (kể cả trên PC màn hình rộng, không riêng gì mobile).
   Giờ panel dùng position:absolute (position:relative đặt ở .aud-dropdown-wrap bọc quanh nút bấm) —
   nổi lên TRÊN bảng hàng hóa như 1 menu thả xuống thật sự, KHÔNG chiếm chỗ trong layout nên bảng
   hàng hóa luôn giữ nguyên kích thước dù panel đang mở hay đóng, đồng thời cũng tự giải quyết luôn
   vấn đề "bị che cứng, không cuộn" từng gặp trên mobile (panel không còn đẩy/ép layout nữa). Đóng khi
   bấm ra ngoài (xem closeProductAuditPanelIfOutside() ở app.js). */
.aud-dropdown-wrap{position:relative;display:inline-block}
.aud-dropdown{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  z-index:60;
  background:#fff;
  border:1px solid #c7d9c7;
  border-radius:8px;
  box-shadow:0 10px 28px rgba(0,0,0,.2);
  padding:10px 12px;
  width:560px;
  max-width:92vw;
  max-height:70vh;
  overflow-y:auto;
}
@media(max-width:820px){
  .aud-dropdown{
    left:50%;
    transform:translateX(-50%);
    width:94vw;
  }
}

/* ============================================================================
   TỐI ƯU MOBILE — layout "2 khung" (.two-pane): Nhập kho, Xuất/Bán, Nhà cung cấp, Chi phí.
   .two-pane vốn là CSS Grid 2 cột CỐ ĐỊNH (240px + phần còn lại) cho desktop — trên màn hình di
   động hẹp, 2 cột bị ép nằm CẠNH NHAU thay vì xếp chồng, khiến khung form nhập liệu bị bóp còn
   ~240px (nhãn + ô nhập chồng chéo, không dùng được), CỘNG THÊM .view mặc định overflow:hidden
   (thiết kế "1 màn hình cố định", xem lý do ở #labels bên trên) khiến không có cách nào cuộn xuống
   để xem hết form hay bảng lịch sử bên cạnh — đúng lỗi "form cứng đơ, không cuộn, không xem được
   hết" đã gặp. Fix: TRÊN MOBILE, xếp 2 khung CHỒNG DỌC (form trước, bảng lịch sử sau) + cho cuộn dọc
   toàn trang, thay vì ép 2 cột cố định + overflow:hidden như bên desktop. */
@media(max-width:820px){
  #purchase.view.active,
  #sales.view.active,
  #suppliers.view.active,
  #expenses.view.active{
    display:block;
    overflow-y:auto;
    overflow-x:hidden;
  }
  #purchase.view.active .two-pane,
  #sales.view.active .two-pane,
  #suppliers.view.active .two-pane,
  #expenses.view.active .two-pane{
    display:flex;
    flex-direction:column;
    overflow:visible;
    height:auto;
  }
  #purchase.view.active .two-pane .pane,
  #sales.view.active .two-pane .pane,
  #suppliers.view.active .two-pane .pane,
  #expenses.view.active .two-pane .pane{
    overflow:visible;
    flex:none;
  }
  #purchase.view.active .two-pane .pane .form-section,
  #sales.view.active .two-pane .pane .form-section,
  #suppliers.view.active .two-pane .pane .form-section,
  #expenses.view.active .two-pane .pane .form-section{
    overflow:visible;
    flex:none;
  }
  /* Bảng lịch sử bên dưới: giới hạn chiều cao + tự cuộn riêng trong khung đó, tránh trang dài vô tận
     nếu có hàng trăm/nghìn dòng lịch sử — vẫn xem được đầy đủ form phía trên trước khi cuộn tới. */
  #purchase.view.active .two-pane .pane .table-wrap,
  #sales.view.active .two-pane .pane .table-wrap,
  #suppliers.view.active .two-pane .pane .table-wrap,
  #expenses.view.active .two-pane .pane .table-wrap{
    flex:none;
    max-height:60vh;
  }
}

/* ===== SECTION TITLE BAR ===== */
.section-title{
  background:linear-gradient(180deg,#4a9a5a 0%,#316a3a 100%);
  color:#fff;
  font-size:13px;
  font-weight:700;
  padding:5px 12px;
  display:flex;align-items:center;gap:8px;
  border-bottom:1px solid #205a28;
  flex-shrink:0;
  flex-wrap:wrap; /* cho cả dòng tiêu đề tự xuống dòng nếu quá dài — không chỉ riêng title-actions,
                     tránh lặp lại lỗi tràn ngang mất nút bấm khi thanh công cụ có nhiều mục (VD:
                     tab Tồn kho sau khi thêm ô "Hiện cả SP không theo dõi tồn kho") */
  row-gap:4px;
}
.section-title .icon{font-size:14px}
.section-title .title-actions{
  margin-left:auto;
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  min-width:0; /* QUAN TRỌNG: nếu không có dòng này, trình duyệt có thể tính chiều rộng "lý tưởng"
                  của title-actions là đủ chỗ cho TẤT CẢ mục nằm 1 hàng rồi mới tràn ra ngoài thay
                  vì chủ động xuống dòng — min-width:0 cho phép co lại đúng cách để flex-wrap thực
                  sự kích hoạt khi không đủ chỗ. */
}

/* ============================================================================
   TỐI ƯU MOBILE — Mục "In tem" (#labels)
   Toàn bộ app này thiết kế cho desktop, không có breakpoint mobile nào từ trước.
   Thanh công cụ mỗi tab (ô tìm SP + số lượng + các nút) rất dễ tràn ra ngoài màn
   hình điện thoại (đo thực tế: tràn tới ~280px ở khổ 390px) vì .title-actions
   không tự xuống dòng và các input bên trong có min-width cố định quá lớn.
   ========================================================================= */
@media(max-width:820px){
  #labels .section-title{flex-wrap:wrap;row-gap:6px;padding:8px 10px}
  #labels .section-title .title-actions{
    width:100%;margin-left:0;
    flex-wrap:wrap;
  }
  #labels .section-title .title-actions input,
  #labels .section-title .title-actions select{
    flex:1 1 130px;
    min-width:0!important;
    height:30px!important;
    font-size:13px!important;
  }
  #labels .section-title .title-actions .pos-btn{
    flex:1 1 auto;
    height:30px;
    font-size:12px;
    padding:4px 8px;
  }
  #labels .product-suggest-box{width:100%!important}

  /* Thanh tab con (Tem kệ / Tem SP / QC 1 SP / QC 9 SP / Ảnh Tem): cho cuộn ngang gọn thay vì
     chữ bị bóp quá nhỏ hoặc wrap lộn xộn nhiều hàng */
  #labels > div.no-print{
    flex-wrap:nowrap!important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #labels > div.no-print::-webkit-scrollbar{display:none}
  #labels > div.no-print .pos-btn{flex:0 0 auto;white-space:nowrap;font-size:12px;padding:6px 10px}

  /* Tab "Ảnh Tem": 2 khung ảnh xếp dọc thay vì cạnh nhau cho vừa màn hình hẹp */
  #printPanel5 > div{flex-direction:column;align-items:center}
  #printPanel5 canvas{max-width:100%!important}
}


/* ===== POS BUTTONS ===== */
.pos-btn{
  border:1px solid;
  border-color:#fff #808080 #808080 #fff;
  background:var(--btn-bg);
  color:var(--text);
  padding:3px 10px;
  font-size:12px;
  border-radius:0;
  white-space:nowrap;
}
.pos-btn:hover{background:#d4e8d4}
.pos-btn:active{border-color:#808080 #fff #fff #808080}
.pos-btn.primary{background:#cce5cc;color:#004400;font-weight:700}
.pos-btn.danger{background:#ffcccc;color:#880000;font-weight:700}
.pos-btn.accent{background:#fff3cc;color:#664400;font-weight:700}
.pos-btn.blue{background:#cce0ff;color:#002288;font-weight:700}

/* ===== TWO PANE LAYOUT ===== */
.two-pane{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:2px;
  flex:1;
  overflow:hidden;
  background:#808080;
  padding:4px;
}
.two-pane.wide-list{grid-template-columns:320px 1fr}
.pane{
  background:var(--panel2);
  border:2px solid;
  border-color:#808080 #fff #fff #808080;
  display:flex;flex-direction:column;
  overflow:hidden;
  min-height:0;
}
.pane-head{
  background:linear-gradient(180deg,#4a7a3f 0%,#316a30 100%);
  color:#fff;
  padding:4px 8px;
  font-size:12px;
  font-weight:700;
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
}
.pane-head .pane-actions{display:flex;gap:3px}

/* ===== MINI LIST (left pane) ===== */
.mini-list-table{width:100%;border-collapse:collapse;flex:1}
.mini-list-table th{
  background:#4a7a3f;color:#fff;font-size:11px;
  padding:3px 5px;font-weight:700;text-align:left;
  position:sticky;top:0;z-index:1;
}
.mini-list-table td{
  padding:3px 5px;font-size:12px;border-bottom:1px solid #e0e0e0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0;
}
.mini-list-table tr:nth-child(even) td{background:#f0f7f0}
.mini-list-table tr:hover td{background:#d0e8d0;cursor:pointer}
.mini-list-table tr.selected td{background:#316a72!important;color:#fff!important}
.mini-scroll{overflow:auto;flex:1}
.mini-list-wrap{display:flex;flex-direction:column;flex:1;overflow:hidden}

/* ===== DETAIL PANE ===== */
.detail-pane{padding:6px 8px;overflow:auto;flex:1}
.detail-section{
  border:1px solid var(--line2);
  margin-bottom:6px;
  background:#fff;
}
.detail-section-head{
  background:linear-gradient(180deg,#4a7a3f,#316a30);
  color:#fff;font-size:11px;font-weight:700;
  padding:3px 8px;display:flex;align-items:center;gap:5px;
}
.detail-section-head::before{content:"◆ ";font-size:10px}
.detail-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
}
.detail-grid.cols3{grid-template-columns:repeat(3,1fr)}
.detail-row{
  display:flex;align-items:center;
  border-bottom:1px solid #e0e0e0;
  min-height:26px;
}
.detail-row:last-child{border-bottom:none}
.detail-label{
  width:110px;flex-shrink:0;
  background:#e8f0e8;
  color:#225522;
  font-weight:700;font-size:11px;
  padding:3px 6px;
  border-right:1px solid var(--line2);
  display:flex;align-items:center;
}
.detail-label.required::before{content:"*";color:red;margin-right:2px}
.detail-value{flex:1;padding:2px 6px;display:flex;align-items:center;gap:4px}
.detail-value input,.detail-value select,.detail-value textarea{
  flex:1;border:1px inset #808080;padding:2px 4px;
  background:#fff;border-radius:0;height:22px;
  font-size:12px;outline:none;
}
.detail-value input:focus,.detail-value select:focus{
  border-color:#316a72;background:#f0f8ff;
}
.detail-value textarea{height:auto;resize:vertical}
.detail-value .unit{color:var(--muted);font-size:11px;white-space:nowrap}
.detail-value .pos-btn{height:22px;padding:0 6px;font-size:11px}
.read-val{font-weight:700;color:#003300;font-size:13px;padding:2px 6px}
.inline-note{color:var(--muted);font-size:11px;margin-left:4px}

/* ===== IMAGE BOX ===== */
.img-box{
  width:100%;height:140px;
  border:1px inset #808080;
  background:#e8e8e8;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  flex-direction:column;gap:4px;
}
.img-box img{max-width:100%;max-height:130px;object-fit:contain}
.img-box .no-img{color:#888;font-size:11px}
.img-change-btn{
  width:100%;text-align:center;font-size:11px;padding:2px;
  border:1px solid var(--line2);background:#e8e8e8;
}

/* ===== ACTION BAR (top of detail) ===== */
.action-bar{
  background:#316a72;
  padding:4px 8px;
  display:flex;align-items:center;gap:4px;
  flex-shrink:0;
  border-bottom:1px solid #1a4a52;
}
.action-bar-title{
  color:#fff;font-size:13px;font-weight:700;
  margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.action-bar .pos-btn{height:24px;padding:0 10px;font-size:12px}

/* ===== TABLE VIEW (full width) ===== */
.full-pane{
  background:var(--panel2);
  border:2px solid;
  border-color:#808080 #fff #fff #808080;
  display:flex;flex-direction:column;
  overflow:hidden;flex:1;
}
.table-toolbar{
  background:#e0e0d0;
  padding:4px 8px;
  display:flex;align-items:center;gap:6px;
  border-bottom:1px solid var(--line2);
  flex-shrink:0;
  flex-wrap:wrap;
}
.table-toolbar input,.table-toolbar select{
  height:22px;padding:1px 4px;font-size:11px;
  border:1px inset #808080;background:#fff;border-radius:0;
}
.table-toolbar .search{min-width:150px}
.table-wrap{overflow:auto;flex:1}

/* ── Popup xem nhanh "Chuyển tiền"/"Gửi hàng" ở mục Khách hàng — xem giải thích ở
   showCustHoverTooltip() trong app.js (dùng position:fixed, gắn ra ngoài <body> để không bị bảng
   cuộn cắt mất). ── */
.cust-hover-trigger{cursor:default;border-bottom:1px dotted #999}
.cust-hover-popup{
  display:none;position:fixed;z-index:9999;
  background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 16px rgba(0,0,0,.22);
  padding:8px 10px;min-width:200px;max-width:300px;
  font-size:11px;line-height:1.5;color:#222;text-align:left;
}
.cht-row{padding:4px 0;border-bottom:1px solid #eee}
.cht-row:last-child{border-bottom:none;padding-bottom:0}
.cht-sub{color:#777;font-size:10px}

table{width:100%;border-collapse:collapse;background:#fff;min-width:0}
th{
  position:sticky;top:0;
  background:#4a7a3f;color:#fff;
  font-size:11px;font-weight:700;text-transform:none;
  padding:4px 6px;border-right:1px solid #316a30;
  letter-spacing:0;z-index:1;text-align:left;white-space:nowrap;
}
td{
  padding:3px 6px;border-bottom:1px solid #e0e0e0;
  font-size:12px;vertical-align:middle;text-align:left;
  white-space:nowrap;
}
tbody tr:nth-child(even) td{background:#f0f7f0}
tbody tr:hover td{background:#d0e8d0;cursor:pointer}
tbody tr.selected td{background:#316a72!important;color:#fff}
td.num{text-align:right;font-variant-numeric:tabular-nums}

/* ===== BADGES ===== */
.badge{display:inline-block;padding:1px 6px;font-size:11px;font-weight:700;border:1px solid}
.badge.ok{background:#ccffcc;color:#004400;border-color:#009900}
.badge.low{background:#ffffcc;color:#664400;border-color:#cc8800}
.badge.out{background:#ffcccc;color:#880000;border-color:#cc0000}

/* ===== ACTION BUTTONS IN TABLE ===== */
.action-btn{
  border:1px solid;border-color:#fff #808080 #808080 #fff;
  background:#e8e8e8;padding:1px 6px;font-size:11px;
  border-radius:0;cursor:pointer;
}
.action-btn:active{border-color:#808080 #fff #fff #808080}
.action-btn.danger{background:#ffcccc;color:#880000}

/* ===== PRODUCT THUMB ===== */
.product-thumb{width:36px;height:36px;object-fit:cover;border:1px solid var(--line2);background:#f0f0f0;display:block}
.image-empty{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px dashed var(--line2);color:#aaa;font-size:10px;background:#f8f8f8}

/* ===== FORM (purchase/sales/supplier) ===== */
.form-section{padding:6px;display:flex;flex-direction:column;gap:0;overflow-y:auto;flex:1}
.form-row{display:flex;align-items:center;border-bottom:1px solid #ddd;min-height:26px}
.form-lbl{width:120px;flex-shrink:0;background:#e8f0e8;color:#225522;font-weight:700;font-size:11px;padding:2px 6px;border-right:1px solid #ccc;display:flex;align-items:center}
.form-lbl.req::before{content:"*";color:red;margin-right:2px}
.form-ctrl{flex:1;padding:2px 4px;display:flex;align-items:center;gap:4px;position:relative}

/* Khung gợi ý sản phẩm tự xây (thay cho datalist mặc định) — hỗ trợ bỏ dấu + tìm cả ghi chú */
.product-suggest-box{
  display:none;position:absolute;left:0;right:0;top:100%;z-index:950;
  background:#fff;border:1px solid #808080;box-shadow:2px 2px 6px rgba(0,0,0,.3);
  max-height:220px;overflow-y:auto;font-size:11px;
  -webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;
}
.product-suggest-box.open{display:block}
.product-suggest-item{padding:4px 8px;cursor:pointer;border-bottom:1px solid #eee;display:flex;justify-content:space-between;gap:8px;align-items:center}
.product-suggest-item:hover{background:#e8f7ee}
.product-suggest-item .psi-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.product-suggest-item .psi-name b{color:#1b7a3e}
.product-suggest-item .psi-note{color:#888;font-size:10px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.product-suggest-item .psi-price{color:#c62828;font-weight:700;white-space:nowrap}
.product-suggest-empty{padding:6px 8px;color:#999;font-style:italic}
/* Panel "🔍 Rà soát thiếu dữ liệu" (Danh mục hàng hóa) — dạng "chip" gọn thay vì bảng 12 cột × 2
   hàng trước đây: bảng cũ dù đúng chức năng nhưng chiếm QUÁ NHIỀU chiều cao (thead + 2 hàng + chú
   thích dài), khiến diện tích còn lại cho bảng hàng hóa bên dưới bị bóp nhỏ hẳn đi trên PC (không
   chỉ riêng mobile). Chip tận dụng chiều RỘNG màn hình (thường dư giả hơn chiều cao) — 12 trường tự
   xuống dòng gọn trong 1-3 dòng thay vì cả một bảng cao. Phần chú thích dài chuyển vào <details> thu
   gọn sẵn, chỉ bung ra khi bấm xem, tiết kiệm thêm khoảng trống. Giữ NGUYÊN các id checkbox cũ
   (prodAud...Has/No) nên không cần sửa gì ở phần JS lọc (applyProductAuditFilters). */
.aud-chip-row{display:flex;flex-wrap:wrap;gap:6px}
.aud-chip{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid #cfe0cf;border-radius:4px;background:#f7faf7;
  padding:2px 8px;font-size:11px;white-space:nowrap;
}
.aud-chip b{color:#225522;font-weight:700}
.aud-chip label{display:inline-flex;align-items:center;gap:2px;cursor:pointer;color:#444}
.aud-chip input[type="checkbox"]{width:13px;height:13px;margin:0}
.form-ctrl input,.form-ctrl select,.form-ctrl textarea{
  flex:1;border:1px inset #808080;padding:2px 4px;height:22px;
  background:#fff;border-radius:0;font-size:12px;outline:none;
}
.form-ctrl input:focus,.form-ctrl select:focus,.form-ctrl textarea:focus{background:#f0f8ff;border-color:#316a72}
.form-ctrl textarea{height:auto;resize:vertical}

/* ===== Ô "Ghi chú" hàng hoá — tự đổi màu ĐỎ NGHIÊNG ngay khi gõ phần trong dấu "..." =====
   HTML <textarea> gốc KHÔNG hỗ trợ tô màu 1 phần chữ (chỉ hiện 1 màu đồng nhất) — kỹ thuật ở đây là
   "lớp phủ" (hay dùng cho ô soạn code có tô màu cú pháp): 1 <div id="productNoteBackdrop"> nằm PHÍA
   SAU, dựng lại y hệt nội dung nhưng CÓ tô màu (qua formatNoteForDisplay() trong app.js); <textarea>
   thật nằm ĐÈ LÊN TRÊN nhưng chữ trong suốt (color:transparent) — người dùng vẫn gõ/xoá/bôi đen bình
   thường ở lớp trên (chỉ có con trỏ nhấp nháy còn thấy được, qua caret-color), còn MÀU CHỮ thật sự
   nhìn thấy là do lớp dưới hiện ra xuyên qua. 2 lớp dùng CHUNG 1 bộ font/cỡ chữ/khoảng đệm/viền để
   luôn khớp pixel-để-pixel — lệch bất kỳ thông số nào trong 2 lớp cũng làm chữ hiện sai vị trí.
   QUAN TRỌNG: đây CHỈ là hiệu ứng hiển thị — dữ liệu thật sự lưu xuống server vẫn 100% là chữ thường
   (nguyên văn có dấu ngoặc kép) y hệt như <textarea> thường, KHÔNG ảnh hưởng gì tới lưu trữ/tìm kiếm/
   in tem/hiển thị nơi khác — các chỗ đó đọc thẳng giá trị .value của textarea như trước giờ. */
.note-editor-wrap{position:relative;height:46px;width:100%;flex:1}
.form-ctrl .note-editor-backdrop,
.form-ctrl .note-editor-textarea{
  position:absolute!important;inset:0!important;margin:0!important;box-sizing:border-box!important;
  padding:2px 4px!important;font-size:12px;line-height:1.4;height:auto!important;
  font-family:"Be Vietnam Pro","Segoe UI","Malgun Gothic",Arial,sans-serif;
  white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;
  border:1px inset #808080;border-radius:0;
}
.form-ctrl .note-editor-backdrop{
  background:#fff;color:#222;overflow:hidden;pointer-events:none;z-index:1;
}
.form-ctrl .note-editor-textarea{
  z-index:2;background:transparent!important;color:transparent!important;caret-color:#222;
  resize:none!important;overflow:auto;outline:none;flex:none!important;
}
.note-editor-wrap:focus-within .note-editor-backdrop{background:#f0f8ff;border-color:#316a72}
.note-editor-wrap:focus-within .note-editor-textarea{border-color:#316a72}

/* Nút "📷 Quét" bằng camera cạnh các ô tìm/quét hàng hóa (Sản phẩm ở Nhập kho/Xuất-Bán, Tìm hàng hóa
   ở Danh mục) — CHỈ hiện trên MOBILE. Trên desktop nhân viên thường dùng máy quét mã vạch USB (tự gõ
   như bàn phím + Enter vào thẳng ô input) nên không cần thêm nút camera choán chỗ. Xem
   openBarcodeScanner()/closeBarcodeScanner() trong app.js — dùng thư viện html5-qrcode (CDN, xem
   index.html) hỗ trợ hầu hết mã vạch/QR thông dụng hiện nay. */
.barcode-scan-btn{display:none;flex-shrink:0;cursor:pointer}
.form-ctrl .barcode-scan-btn{
  height:22px;width:26px;padding:0;
  border:1px inset #808080;background:#fff;border-radius:0;
  font-size:12px;line-height:1;
  align-items:center;justify-content:center;
}
@media(max-width:820px){
  .barcode-scan-btn{display:inline-flex}
  .form-ctrl .barcode-scan-btn{height:32px;width:38px;font-size:15px}
}

/* ── Dialog quét mã vạch FULL MÀN HÌNH ────────────────────────────────────────────────────────
   Camera chiếm TRỌN màn hình (không còn hộp thoại nhỏ như trước) — dễ căn mã vạch hơn hẳn trên
   điện thoại, giống cảm giác các app quét mã vạch chuyên dụng. */
.bc-fullscreen-dialog{
  border:none;padding:0;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;
  background:#000;inset:0;
}
.bc-fullscreen-dialog::backdrop{background:#000}
.bc-viewport{position:absolute;inset:0;width:100%;height:100%;background:#000;overflow:hidden}
.bc-viewport video{width:100% !important;height:100% !important;object-fit:cover !important}
/* QUAN TRỌNG: KHÔNG giới hạn vùng quét (đã bỏ "qrbox" ở app.js — quét TOÀN BỘ khung hình), nên
   thư viện KHÔNG còn vẽ khung mờ/viền nào lên video nữa — trước đây CỐ TÌNH không tự vẽ thêm khung
   trang trí nào đè lên video, để tránh lặp lại 2 lỗi đã gặp:
     (1) Vạch trang trí tự chạy animation KHÔNG khớp vùng quét thật → người dùng đưa mã vạch theo
         vạch trang trí, sai vị trí quét thật, không bao giờ quét được dù camera rõ nét.
     (2) Đổi màu border của khung "qr-shaded-region" (kỹ thuật vẽ khung mờ của thư viện dùng
         border RẤT DÀY để tạo hiệu ứng che mờ xung quanh) → vô tình biến cả MẢNG LỚN thành màu đỏ
         đặc kín gần hết màn hình, che mất luôn hình ảnh camera thật, rất khó dùng.
   .bc-guide-box (thêm sau) KHÁC HẲN 2 lỗi trên: đây KHÔNG PHẢI vùng giới hạn quét giả (detector vẫn
   quét toàn khung hình, đặt mã vạch ngoài khung này vẫn đọc được bình thường) — mà là chỉ dấu THẬT,
   TRÙNG ĐÚNG vùng camera đang ưu tiên lấy nét/đo sáng (xem applyFocusRegion() ở app.js), giúp người
   dùng biết nên đưa mã vạch vào đâu để camera nét NHANH nhất. Cố tình vẽ MỎNG/TRONG SUỐT (chỉ viền +
   4 góc, không tô nền/không border dày) để không lặp lại lỗi (2), và không chạy animation lệch pha
   để không lặp lại lỗi (1). */
.bc-guide-box{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(78vw,520px); height:min(38vw,220px); max-height:34vh;
  border:2px solid rgba(255,255,255,.85); border-radius:14px;
  pointer-events:none; z-index:4;
}
.bc-guide-box::before,.bc-guide-box::after{
  content:""; position:absolute; width:22px; height:22px; border:3px solid #fff;
}
.bc-guide-box::before{ top:-3px; left:-3px; border-right:none; border-bottom:none; border-top-left-radius:10px; }
.bc-guide-box::after{ bottom:-3px; right:-3px; border-left:none; border-top:none; border-bottom-right-radius:10px; }
.bc-close-btn{
  position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:14px;z-index:5;
  width:38px;height:38px;border-radius:50%;border:none;background:rgba(0,0,0,.5);
  color:#fff;font-size:18px;cursor:pointer;
}
.bc-status{
  position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);z-index:5;
  text-align:center;color:#fff;font-size:13px;font-weight:600;
  text-shadow:0 1px 3px rgba(0,0,0,.7);padding:0 20px;
}

/* ── Chọn vùng sản phẩm bằng cách chạm nối điểm (Polygon Lasso) — full màn hình, tối ưu di động ── */
/* QUAN TRỌNG: dùng flexbox CỘT (không dùng position:absolute chồng lên nhau như .bc-fullscreen-dialog
   gốc) — để phần ảnh CHỈ chiếm đúng khoảng trống còn lại giữa thanh hướng dẫn (trên) và thanh nút
   thao tác (dưới), không bị 2 thanh đó ĐÈ CHỒNG lên ảnh (trước đây cả 3 phần cùng position:absolute
   inset:0 nên ảnh phóng to tràn ra sau lưng 2 thanh, mất chỗ để chạm điểm gần mép trên/dưới). */
#polyCropDialog[open]{display:flex;flex-direction:column}
.poly-crop-head{
  position:static;flex:0 0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 8px 12px;
  background:rgba(0,0,0,.75);color:#fff;font-size:12px;line-height:1.4;
  display:flex;align-items:center;gap:10px;
}
.poly-crop-head span{flex:1 1 auto}
.poly-crop-head .bc-close-btn{flex:0 0 auto;position:static!important}
.poly-crop-canvas-wrap{
  position:static;flex:1 1 auto;min-height:0;
  display:flex;align-items:center;justify-content:center;
  background:#1a1a1a;overflow:hidden;
}
#polyCropCanvas{touch-action:none;-webkit-user-select:none;user-select:none;max-width:100%;max-height:100%}
.poly-crop-toolbar{
  position:static;flex:0 0 auto;
  padding:8px 10px calc(env(safe-area-inset-bottom,0px) + 10px);
  background:rgba(0,0,0,.75);display:flex;gap:8px;justify-content:center;
}
.poly-crop-toolbar .pos-btn{font-size:13px;padding:8px 14px;font-weight:700}

.form-section-title{
  background:#4a7a3f;color:#fff;font-size:11px;font-weight:700;
  padding:3px 8px;margin-bottom:0;
}
.form-actions{padding:6px;display:flex;gap:4px;justify-content:flex-end;background:#e8e8e8;border-top:1px solid var(--line2)}

/* ===== KPI DASHBOARD ===== */
.kpi-grid{display:flex;gap:6px;padding:6px;flex-wrap:wrap;flex-shrink:0}
.kpi{
  background:#fff;
  border:2px solid;border-color:#808080 #fff #fff #808080;
  padding:6px 10px;min-width:130px;
}
.kpi span{display:block;color:#225522;font-size:11px;font-weight:700}
.kpi strong{display:block;font-size:18px;font-weight:700;color:#000;margin:2px 0}
.kpi em{font-style:normal;color:#888;font-size:10px}
.kpi.warn{background:#fff8e0;border-color:#cc8800 #ffe0a0 #ffe0a0 #cc8800}
.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:0 4px 4px;flex:1;overflow:hidden}
.dash-panel{
  background:#fff;
  border:2px solid;border-color:#808080 #fff #fff #808080;
  display:flex;flex-direction:column;overflow:hidden;
}
.dash-panel-head{
  background:#4a7a3f;color:#fff;
  font-size:12px;font-weight:700;
  padding:3px 8px;display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
}
.dash-body{overflow:auto;flex:1;padding:4px}
.bar-chart{display:flex;align-items:flex-end;gap:6px;min-height:200px;padding:8px 4px 0;border-bottom:1px solid #ddd}
.bar{flex:1;display:grid;align-items:end;gap:4px;text-align:center;color:#555;font-size:10px;min-width:30px}
.bar-fill{border-radius:2px 2px 0 0;background:linear-gradient(180deg,#4a7a3f,#88cc88);min-height:4px}
.mini-item{
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid #eee;padding:4px 2px;gap:8px;
}
.mini-item strong{font-size:12px}
.mini-item span{color:#888;font-size:11px}

/* ===== LABEL / PRINT ===== */
/* ===== TEM / IN TEM ===== */

/* Khung bao ngoài chứa NHIỀU trang .tem-sheet (mỗi trang 21 tem) — xem renderLabels() trong app.js.
   Trên MÀN HÌNH: xếp dọc, có khoảng cách giữa các trang cho dễ phân biệt lúc xem trước.
   Lúc IN: mỗi .tem-sheet tự ngắt sang trang A4 riêng (xem @media print bên dưới). */
.label-sheet-pages{display:flex;flex-direction:column;gap:16px}
.label-sheet-pages .tem-sheet{box-shadow:0 1px 4px rgba(0,0,0,.15)}
/* Thanh nhỏ trên đầu mỗi trang tem (chỉ hiện trên màn hình, ẩn khi in nhờ .no-print) — cho phép
   in RIÊNG từng trang thay vì luôn phải in cả hàng chờ. Xem printLabelPage() trong app.js. */
.tem-page-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 8px;background:#e8e4da;border:1px solid #bbb;border-radius:3px;font-size:11px;font-weight:700;color:#555}
.tem-page-bar .pos-btn.small{font-size:10.5px;padding:3px 8px}

/* Sheet: 3 cột × 7 hàng = 21 tem/trang A4 */
.tem-sheet{
  background:#fff;
  padding:6px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
  width:100%;
  box-sizing:border-box;
}

.tem{
  height:110px;
  border:1px dashed #aaa;
  padding:4px 5px 4px;
  display:flex;
  flex-direction:column;
  gap:0;
  overflow:hidden;
  box-sizing:border-box;
  background:#fff;
}
.tem-empty{background:#f5f5f5;border-style:dotted}

/* ── Dòng 1: Tên SP — căn giữa, 1 dòng, auto font ── */
.tem-name{
  font-weight:700;
  font-size:12px;
  line-height:1.25;
  white-space:nowrap;
  overflow:visible;        /* visible để JS đo scrollWidth đúng */
  text-align:center;
  flex-shrink:0;
  margin-bottom:3px;
  min-width:0;
  width:100%;
  box-sizing:border-box;
  transform-origin:center center;
  display:block;
}

/* ── Body: ảnh trái | dữ liệu phải ── */
.tem-body{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:row;
  gap:4px;
}

/* Ảnh trái: chiếm 40% chiều ngang, tràn kín chiều cao body */
.tem-img-col{
  width:40%;
  flex-shrink:0;
  overflow:hidden;
  display:flex;
  align-items:stretch;
  background:transparent; /* trong suốt khi không có ảnh */
}
.tem-product-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* Dữ liệu phải */
.tem-right{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:1px;
}
.tem-price{
  font-weight:700;
  font-size:17px;
  color:#000;
  line-height:1.15;
  flex-shrink:0;
  text-align:right;
}
.tem-meta-row{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  flex-shrink:0;
}
.tem-loc{font-size:9px;color:#444;font-weight:600;line-height:1.3}
.tem-id{font-size:9px;color:#444;font-weight:600;line-height:1.3}
.tem-bc-wrap{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

/* ── Footer: tên shop ── */
.tem-shop{
  background:#4a7a3f;
  color:#fff;
  text-align:center;
  font-size:8px;
  padding:1px 2px;
  flex-shrink:0;
  margin-top:2px;
}

/* ── Barcode SVG ── */
.barcode{height:18px;display:flex;gap:1px;align-items:stretch;margin:0 0 1px}
svg.barcode{width:100%;height:20px;display:block;fill:#111}
.barcode span{display:block;background:#111;min-width:1px}
.barcode-text{text-align:center;font-size:8px;letter-spacing:.04em;color:#111}

/* ===== MISC ===== */
.empty{color:#888;background:#f8f8f0;border:1px dashed #ccc;padding:12px;text-align:center;font-size:12px}
.hidden{display:none!important}
.report-list{display:grid;gap:0}
.report-row{display:flex;justify-content:space-between;padding:5px 8px;border-bottom:1px solid #eee}
.report-row strong{font-variant-numeric:tabular-nums;font-weight:700}
.backup-actions{display:grid;gap:8px;padding:8px}
.rcpt-tpl-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}

/* ===== Chế độ NÂNG CAO của "🖨️ Mẫu in hoá đơn" — 3 cột kiểu NICE POS (Danh sách thẻ / Soạn nội
   dung / Xem trước) — xem toggleReceiptDesignMode(), insertReceiptTag(), renderReceiptPreview()
   trong app.js. Toàn bộ chỉ là bản THIẾT KẾ (soạn text + xem trước bằng dữ liệu mẫu) — không đụng gì
   tới việc IN THẬT (nằm ở pos.html, đọc state.settings.receiptTemplate.customLayout khi bật). */
.rcpt-designer{display:grid;grid-template-columns:200px 1fr 220px;gap:10px;align-items:start}
.rcpt-designer-col{background:var(--panel);border:1px solid var(--line2);border-radius:8px;padding:8px;min-width:0}
.rcpt-designer-head{font-size:11px;font-weight:800;color:var(--primary-dark);margin-bottom:6px}
.rcpt-tag-list{display:flex;flex-direction:column;gap:3px;max-height:360px;overflow-y:auto}
/* Bảng kết quả "Phân tích phiếu nhập" — tô màu riêng theo CẶP cột để dễ phân biệt nhóm GIÁ NHẬP
   (Giá nhập cũ + Đơn giá mới) với nhóm GIÁ BÁN (Giá bán cũ + Giá bán mới), tránh nhìn nhầm 4 cột
   giá tiền liền nhau. Áp cho cả <th> (tiêu đề) lẫn <td> (từng dòng dữ liệu). */
/* Tiêu đề cột tô màu ĐẬM + chữ trắng (dễ đọc, nổi bật) để phân nhóm — Ô DỮ LIỆU từng dòng KHÔNG tô
   nền nữa (trước đây tô nền nhạt cho cả ô dữ liệu làm khó đọc số/chữ bên trong, nhất là khi đan xen
   màu vằn của bảng) — chỉ giữ 1 viền trái mảnh màu tương ứng để vẫn nhận ra được đây là cột nhóm nào
   mà không ảnh hưởng độ rõ của nội dung. */
th.invscan-col-nhap{background:#4a90d9;color:#fff}
th.invscan-col-ban{background:#e8973f;color:#fff}
td.invscan-col-nhap{border-left:3px solid #4a90d9}
td.invscan-col-ban{border-left:3px solid #e8973f}

.rcpt-tag-btn{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  text-align:left;border:1px solid var(--line2);background:#fff;border-radius:5px;
  padding:4px 7px;cursor:pointer;font-family:monospace;font-size:11px;font-weight:700;color:var(--primary-dark);
}
.rcpt-tag-btn:hover{background:#e6f2e3;border-color:var(--primary)}
.rcpt-tag-btn span{font-family:inherit;font-weight:400;font-size:9.5px;color:var(--muted)}
.rcpt-edit-textarea{
  width:100%;min-height:360px;resize:vertical;
  font-family:monospace;font-size:12.5px;line-height:1.5;
  border:1px solid var(--line2);border-radius:6px;padding:8px;box-sizing:border-box;
}
.rcpt-preview-col{display:flex;flex-direction:column}
.rcpt-preview-paper{
  background:#fff;border:1px solid var(--line2);border-radius:4px;
  padding:10px 8px;max-height:360px;overflow-y:auto;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}
.rcpt-preview-paper #rcptPreview{
  font-family:monospace;font-size:11px;line-height:1.5;color:#111;
  white-space:pre-wrap;word-break:break-word;
}
@media(max-width:820px){
  .rcpt-designer{grid-template-columns:1fr}
  .rcpt-tag-list{max-height:160px}
}

/* Khối "Sửa chữ nhãn có sẵn" + "Thẻ tự đặt riêng" — nằm dưới khung 3 cột, chỉ hiện ở chế độ nâng cao */
.rcpt-custom-block{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line2)}
.rcpt-label-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px 10px}
.rcpt-label-grid label{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--muted);font-weight:600}
.rcpt-label-grid input{padding:5px 7px;border:1px solid var(--line2);border-radius:5px;font-size:12px}
.rcpt-custom-tag-rows{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.rcpt-custom-tag-row{display:grid;grid-template-columns:auto 1fr 1fr auto;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line2);border-radius:6px;padding:6px 8px}
.rcpt-custom-tag-row .rcpt-tag-preview-key{font-family:monospace;font-weight:700;font-size:11px;color:var(--primary-dark);white-space:nowrap}
.rcpt-custom-tag-row input{padding:5px 7px;border:1px solid var(--line2);border-radius:5px;font-size:12px;min-width:0}
@media(max-width:820px){
  .rcpt-label-grid{grid-template-columns:1fr 1fr}
  .rcpt-custom-tag-row{grid-template-columns:1fr}
}
.chk-row{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text);cursor:pointer;padding:3px 0}
.chk-row input[type="checkbox"]{width:15px;height:15px;cursor:pointer;flex-shrink:0}
/* Danh sách "sổ ra" (accordion) ở Cài đặt — mỗi mục chỉ hiện tiêu đề, bấm vào mới xổ nội dung ra,
   tránh tình trạng TẤT CẢ mục hiện cùng lúc chồng chéo lên nhau như bố cục lưới 2 cột cũ. */
.acc-list{display:flex;flex-direction:column;gap:6px;max-width:760px;margin:0 auto;padding:4px}
/* Tiêu đề nhóm trong trang "Cài đặt" (VD "🖥️ Cài đặt hệ thống" / "🧾 Cài đặt POS") — chỉ để phân
   tách trực quan, không bấm được, khớp với cách nhóm 2 mục tương ứng trong dropdown "⚙️ Cài đặt ▾"
   trên thanh tab (xem index.html + openSettingsSection() trong app.js). */
.acc-group-title{
  font-size:12px;font-weight:800;color:var(--primary-dark);text-transform:uppercase;letter-spacing:.05em;
  padding:14px 4px 2px;
  border-bottom:2px solid var(--primary);
  margin-bottom:2px;
}
.acc-group-title:first-child{padding-top:4px}
.acc-item{background:var(--panel);border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.acc-header{
  width:100%;text-align:left;background:var(--panel2,#f7f8fa);border:none;cursor:pointer;
  padding:12px 14px;font-size:13.5px;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:8px;
}
.acc-header:hover{background:var(--line2)}
.acc-arrow{display:inline-block;font-size:10px;transition:transform .15s ease;color:var(--muted)}
.acc-item.open .acc-arrow{transform:rotate(90deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .25s ease;padding:0 14px}
.acc-item.open .acc-body{max-height:3000px;padding:12px 14px 16px}
.file-btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--primary);padding:4px 10px;
  font-weight:700;color:var(--primary);background:#e8f5e8;cursor:pointer;
}
.file-btn input{display:none}
.muted{color:#888;line-height:1.5;font-size:11px;padding:8px}
.warning-box{border:1px solid #cc8800;background:#fff8cc;color:#664400;padding:6px;font-weight:700;font-size:11px}

/* ===== DIALOG ===== */
dialog{
  border:2px solid;border-color:#fff #808080 #808080 #fff;
  border-radius:0;padding:0;
  box-shadow:4px 4px 8px rgba(0,0,0,.4);
  width:min(860px,calc(100vw - 20px));
}
dialog::backdrop{background:rgba(0,0,0,.35)}
.dialog-card{padding:0;background:#ece9d8}
.dialog-head{
  background:linear-gradient(180deg,#316a72,#1a4a52);
  color:#fff;font-size:13px;font-weight:700;
  padding:5px 10px;
  display:flex;justify-content:space-between;align-items:center;
}
.dialog-head h2{margin:0;font-size:13px;color:#fff}
.icon-btn{border:1px solid;border-color:#fff #808080 #808080 #fff;background:#e0e0e0;width:22px;height:22px;font-size:16px;line-height:1;padding:0}
.dialog-body{padding:8px;display:grid;grid-template-columns:1fr 200px;gap:8px}
.dialog-actions{display:flex;justify-content:flex-end;gap:6px;padding:6px 8px;border-top:1px solid var(--line2);background:#e0e0d4}
.dialog-form-grid{display:flex;flex-direction:column;gap:0}
.product-image-box{
  border:2px inset #808080;background:#e8e8e8;padding:0;
  display:flex;flex-direction:column;
}
.image-preview-wrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:120px;background:#c8c8c8}
.product-image-preview{max-width:100%;max-height:120px;object-fit:contain}
.img-upload-note{font-size:10px;color:#666;padding:4px;text-align:center;border-top:1px solid #ccc}
.form{display:flex;flex-direction:column;gap:0}
.form label{display:flex;align-items:center;border-bottom:1px solid #ddd;min-height:26px}
.form label > span, .form label > :first-child:not(input):not(select):not(textarea){
  min-width:110px;flex-shrink:0;
  background:#e8f0e8;color:#225522;font-weight:700;font-size:11px;
  padding:2px 6px;border-right:1px solid #ccc;align-self:stretch;
  display:flex;align-items:center;
}
.form label input,.form label select,.form label textarea{
  flex:1;border:none;border-bottom:none;padding:2px 4px;
  background:transparent;height:22px;font-size:12px;outline:none;
}
.form label input:focus,.form label select:focus{background:#f0f8ff}
.form .span-2{grid-column:auto}
.form textarea{height:auto;resize:vertical}
.qty-input{width:70px}

/* ===== STATUS BAR ===== */
.statusbar{
  background:#c0c0c0;
  border-top:1px solid #808080;
  padding:2px 8px;
  font-size:11px;color:#333;
  display:flex;align-items:center;gap:12px;
  flex-shrink:0;
}
.statusbar span{display:flex;align-items:center;gap:4px}

/* ===== SCROLLBARS ===== */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:#d4d0c8}
::-webkit-scrollbar-thumb{background:#808080;border:2px solid;border-color:#fff #808080 #808080 #fff}

/* ===== PRINT ===== */
/* ── ĐƠN HÀNG: badge trạng thái + tab lọc ── */
.order-status-badge{
  display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700;
  white-space:nowrap;
}
.order-status-badge.st-pending{background:#fff3cc;color:#8a5a00}
.order-status-badge.st-waiting{background:#d6e8ff;color:#0b4fa0}
.order-status-badge.st-delivered{background:#e0e0e0;color:#1a1a1a}
.order-status-badge.st-cancelled{background:#ffd6d6;color:#a10000}

/* Chấm màu bằng CSS thuần — tránh lỗi font không hiện được emoji tròn màu trên 1 số máy Windows */
.st-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle;flex-shrink:0}
.dot-pending{background:#c77700}
.dot-waiting{background:#1f7ae0}
.dot-delivered{background:#333}
.dot-cancelled{background:#d32f2f}

/* ── Huy hiệu đếm số đơn hàng chờ xác nhận trên tab ── */
.nav-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:16px;height:16px;padding:0 4px;margin-left:5px;
  background:#e02020;color:#fff;border-radius:9px;font-size:10px;font-weight:800;
  vertical-align:middle;line-height:1;
  animation:navBadgePulse 1.4s infinite;
}
@keyframes navBadgePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(224,32,32,.55)}
  50%{box-shadow:0 0 0 4px rgba(224,32,32,0)}
}

.order-status-tabs{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.order-status-tab{
  display:inline-flex;align-items:center;
  padding:7px 14px;border-radius:16px;font-size:12px;font-weight:700;cursor:pointer;
  white-space:nowrap;user-select:none;
  border:1.5px solid transparent;
  background:#eeece3;color:#444;
  transition:transform .1s,box-shadow .12s,filter .12s;
}
.order-status-tab:hover{filter:brightness(0.96);transform:translateY(-1px)}
.order-status-tab:active{transform:translateY(0)}

/* Màu riêng cho từng trạng thái — nhạt khi chưa chọn, đậm rực khi đang chọn */
.order-status-tab[data-status=""]{background:#e4e2d8;color:#333;border-color:#c9c6b8}
.order-status-tab[data-status=""].active{background:#3a3a3a;color:#fff;border-color:#222}

.order-status-tab[data-status="pending"]{background:#fff2cc;color:#8a5a00;border-color:#f0d080}
.order-status-tab[data-status="pending"].active{background:#e6a100;color:#fff;border-color:#a06e00}

.order-status-tab[data-status="waiting"]{background:#dbeaff;color:#0b4fa0;border-color:#a9cdf5}
.order-status-tab[data-status="waiting"].active{background:#1f7ae0;color:#fff;border-color:#0b4fa0}

.order-status-tab[data-status="delivered"]{background:#e6e6e6;color:#333;border-color:#c4c4c4}
.order-status-tab[data-status="delivered"].active{background:#333;color:#fff;border-color:#111}

.order-status-tab[data-status="cancelled"]{background:#ffdddd;color:#a10000;border-color:#f3aaaa}
.order-status-tab[data-status="cancelled"].active{background:#d32f2f;color:#fff;border-color:#8f0000}

.order-status-tab.active{box-shadow:0 2px 5px rgba(0,0,0,.25);border-width:1.5px}
.order-status-tab.active .st-dot{background:#fff!important;box-shadow:0 0 0 1px rgba(0,0,0,.15)}

@media print{
  @page{
    size:A4 portrait;
    margin:5mm;
  }
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body{background:#fff;overflow:visible;margin:0;padding:0}
  .tab-bar,.topbar,.statusbar,.no-print,.mobile-nav-toggle,.view:not(#labels):not(#orderPrint){display:none!important}
  dialog{display:none!important}
  .app-shell,.app{display:block!important;height:auto;overflow:visible}
  #labels{
    display:block!important;
    height:auto;
    overflow:visible;
    padding:0;margin:0;
  }
  #orderPrint{
    display:block!important;
    height:auto;
    overflow:visible;
    padding:0;margin:0;
  }
  .order-print-sheet{
    width:100%;
    padding:0;
    color:#000;
  }
  /* Sheet: 3 cột × 6 hàng trên A4 297mm - 10mm margin = 287mm cao
     Mỗi tem: (287mm - 5×2mm gap) / 6 = (287-10)/6 = 46.17mm → dùng 46mm
     Rộng: (210mm - 10mm margin - 2×2mm gap) / 3 = (198-4)/3 = 64.67mm → dùng 64mm */
  #labelSheet{
    display:block!important;
    margin:0;padding:0;
    width:100%;
  }
  .label-sheet-pages{display:block!important;gap:0!important} /* huỷ flex+gap của màn hình lúc in — mỗi trang tự ngắt bằng break-after:page ở dưới, không cần khoảng cách */
  /* Mỗi trang .tem-sheet (21 tem) tự ngắt sang 1 trang A4 RIÊNG — trước đây style này gắn thẳng vào
     #labelSheet (số ít, chỉ 1 trang cố định); giờ có thể có NHIỀU trang .tem-sheet nên đổi sang
     class, áp dụng đều cho mọi trang. break-after:page ngắt trang sau MỖI sheet, trừ sheet CUỐI
     CÙNG (:last-child) để không tạo ra 1 trang trắng thừa ở cuối. */
  .tem-sheet{
    display:grid!important;
    border:0!important;
    box-shadow:none!important;
    margin:0;padding:0;
    width:100%;
    grid-template-columns:repeat(3,1fr);
    gap:0; /* Liền kề nhau để dễ cắt */
    break-after:page;
    page-break-after:always; /* tương thích trình duyệt cũ hơn chưa hỗ trợ break-after */
  }
  .tem-sheet:last-child{
    break-after:auto;
    page-break-after:auto;
  }
  .tem{
    break-inside:avoid;
    height:39mm; /* 7 hàng */
    border:0.3mm solid #999!important; /* Đường kẻ mỏng làm đường cắt */
    overflow:hidden;
    padding:1.5mm 2mm 1mm 2mm;
    box-sizing:border-box;
  }
  .tem-empty{border:0.3mm dashed #ccc!important}
  .tem-img-col{background:transparent!important}
  .tem-name{
    font-size:8pt;
    margin-bottom:1mm;
    white-space:nowrap !important;
    overflow:visible !important;
    text-align:center;
    transform-origin:center center;
    display:block;
  }
  .tem-price{font-size:13pt}
  .tem-loc,.tem-id,.barcode-text{font-size:6.5pt}
  svg.barcode{fill:#000!important;height:12mm}
  .tem-shop{
    background:#4a7a3f!important;
    font-size:6pt;
    padding:0.5mm;
    margin-top:1mm;
  }
  .tem-product-img{object-fit:cover;width:100%;height:100%}
}

/* ===== DASHBOARD ===== */
.db-wrap{display:grid;grid-template-columns:190px 1fr 148px;gap:3px;padding:4px;flex:1;overflow:hidden;height:100%}
.db-left{display:flex;flex-direction:column;gap:2px;overflow:auto}
.db-kpi-head{background:#1a4080;color:#fff;font-size:10px;font-weight:700;padding:4px 8px;text-align:center;letter-spacing:.06em;flex-shrink:0}
.db-kpi{display:flex;align-items:center;gap:7px;padding:5px 7px;border:1px solid rgba(0,0,0,.1);flex-shrink:0}
.db-kpi.c-blue{background:#2196f3;border-left:3px solid #1565c0}
.db-kpi.c-green{background:#43a047;border-left:3px solid #1b5e20}
.db-kpi.c-orange{background:#fb8c00;border-left:3px solid #bf360c}
.db-kpi.c-purple{background:#8e24aa;border-left:3px solid #4a148c}
.db-kpi.c-teal{background:#00838f;border-left:3px solid #004d40}
.db-kpi.c-red{background:#e53935;border-left:3px solid #b71c1c}
.db-kpi.c-gray{background:#546e7a;border-left:3px solid #263238}
.db-kpi-ico{font-size:18px;flex-shrink:0;line-height:1}
.db-kpi-lbl{font-size:9px;font-weight:700;color:rgba(255,255,255,.9);letter-spacing:.02em}
.db-kpi-val{font-size:13px;font-weight:700;color:#fff;line-height:1.15}
.db-kpi-sub{font-size:9px;color:rgba(255,255,255,.8)}
.db-center{display:flex;flex-direction:column;gap:3px;overflow:auto;min-width:0}
.db-charts-row{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;flex-shrink:0}
.db-mid-row{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;flex-shrink:0}
.db-chart-card{background:#fff;border:2px solid;border-color:#808080 #fff #fff #808080;padding:5px;min-width:0}
.db-chart-title{font-size:10px;font-weight:700;color:#1a4080;text-align:center;border-bottom:1px solid #eee;padding-bottom:2px;margin-bottom:3px}
.db-rank-row{display:flex;align-items:center;gap:3px;padding:2px 0;border-bottom:1px solid #f0f0f0;font-size:10px}
.db-rank-num{width:13px;color:#888;flex-shrink:0;font-weight:700;font-size:9px}
.db-rank-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
.db-rank-bar-wrap{width:70px;background:#e8e8e8;height:7px;flex-shrink:0}
.db-rank-bar{height:7px;background:#2196f3}
.db-rank-bar.red{background:#e53935}
.db-rank-val{width:28px;text-align:right;font-weight:700;font-size:10px;flex-shrink:0}
.db-donut-legend{display:flex;flex-wrap:wrap;gap:2px 6px;margin-top:3px;font-size:9px}
.db-dl-item{display:flex;align-items:center;gap:2px}
.db-dl-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.db-recent-head{font-size:10px;font-weight:700;color:#1a4080;border-bottom:2px solid #2196f3;padding-bottom:2px;margin-bottom:4px}
.db-recent-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.db-import-lbl{color:#1a6090;font-size:10px;font-weight:700;margin-bottom:2px}
.db-export-lbl{color:#c62828;font-size:10px;font-weight:700;margin-bottom:2px}
.db-mini-table{width:100%;border-collapse:collapse;font-size:10px}
.db-mini-table th{padding:2px 4px;font-size:9px;font-weight:700;text-align:left;color:#fff}
.db-mini-table td{padding:2px 4px;border-bottom:1px solid #f0f0f0}
.db-mini-table tr:nth-child(even) td{background:#f8fbff}
.db-mini-imp th{background:#1a6090}
.db-mini-exp th{background:#c62828}
.db-right{display:flex;flex-direction:column;gap:3px;overflow:auto}
.db-alert-box{background:#fff;border:2px solid;border-color:#808080 #fff #fff #808080;padding:0;flex-shrink:0}
.db-box-head{background:#1a4080;color:#fff;font-size:10px;font-weight:700;padding:3px 8px;text-align:center;letter-spacing:.05em}
.db-alert-row{display:flex;align-items:center;gap:4px;padding:3px 6px;border-bottom:1px solid #f0f0f0;font-size:10px}
.db-alert-ico{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0}
.db-alert-ico.warn{background:#ff9800;color:#fff}
.db-alert-ico.danger{background:#e53935;color:#fff}
.db-alert-ico.info{background:#2196f3;color:#fff}
.db-alert-txt{flex:1;color:#333;line-height:1.2;font-size:10px}
.db-alert-num{font-weight:700;color:#333;background:#f0f0f0;padding:1px 5px;border-radius:2px;font-size:11px;flex-shrink:0}
.db-qstat{display:flex;justify-content:space-between;align-items:center;padding:3px 6px;border-bottom:1px solid #f0f0f0;font-size:10px}
.db-qstat span{color:#555}
.db-qstat strong{color:#1a4080;font-weight:700}
.db-util-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:4px}
.db-util-btn{background:#f5f5f5;border:1px solid #ccc;padding:6px 3px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:#333;width:100%}
.db-util-btn:hover{background:#e8f0ff;border-color:#2196f3}
.db-util-ico{font-size:16px}

/* ===== HSD BADGES & STATUS COLORS ===== */
.hsd-badge{display:inline-block;padding:2px 7px;font-size:10px;font-weight:700;border-radius:2px;white-space:nowrap}
.hsd-expired {background:#ffcccc;color:#880000;border:1px solid #cc0000}
.hsd-critical{background:#ffe0cc;color:#883300;border:1px solid #cc5500}
.hsd-warning {background:#fff8cc;color:#886600;border:1px solid #ccaa00}
.hsd-ok      {background:#ccffcc;color:#005500;border:1px solid #009900}
.hsd-none    {background:#e8e8e8;color:#555555;border:1px solid #aaaaaa}
td.hsd-expired {color:#880000;font-weight:700}
td.hsd-critical{color:#883300;font-weight:700}
td.hsd-warning {color:#886600;font-weight:700}
td.hsd-ok      {color:#005500}

/* ===== PHÍM CHẠM NHANH (POS) — lưới 8×5 ô cấu hình gán sản phẩm ===== */
.qs-cell{
  border:1.5px solid #b8bcc4;border-radius:6px;background:#fff;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:4px;min-height:64px;text-align:center;position:relative;
}
/* QUAN TRỌNG: span con (số ô/tên SP/giá) không được "chắn" sự kiện kéo-thả — nếu không, mỗi lần
   con trỏ chuột lướt qua ranh giới giữa các span con trong lúc kéo, dragover/dragleave bắn ra liên
   tục làm viền cam highlight NHẤP NHÁY (trông rất giật/bất ổn dù dữ liệu vẫn đúng). Cho toàn bộ
   span con "trong suốt" với sự kiện chuột — mọi sự kiện kéo-thả sẽ luôn tính trên đúng 1 phần tử
   .qs-cell duy nhất, không bao giờ bị ngắt quãng giữa chừng. */
.qs-cell *{pointer-events:none}
.qs-cell .qs-slotnum{position:absolute;top:2px;left:4px;font-size:9px;color:#aab;font-weight:700}
.qs-cell.qs-empty{background:#eceef1;border-style:dashed}
.qs-cell.qs-empty:hover{background:#e0e3e8}
.qs-cell.qs-filled{background:#eaf3ff;border-color:#8fb8e8}
.qs-cell.qs-filled .qs-pname{font-size:11px;font-weight:700;color:#1a1f2b;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qs-cell.qs-filled .qs-pprice{font-size:10.5px;font-weight:800;color:#c0392f}
.qs-cell.qs-broken{background:#fff0ee;border-color:#e0a0a0}
.qs-cell.qs-broken .qs-pname{font-size:10px;color:#a03030}
.qs-cell.qs-selected{outline:3px solid #e8973f;outline-offset:-2px}
.qs-cell.qs-filled{cursor:grab}
.qs-cell.qs-filled:active{cursor:grabbing}
.qs-cell.qs-dragover{background:#fff3e0!important;border-color:var(--pos-orange,#e8973f)!important;outline:2px dashed var(--pos-orange,#e8973f);outline-offset:-2px}
/* Ô 1-4 — tab danh mục, gõ tên TRỰC TIẾP trong ô (nền navy đậm + khung nhập trắng bo góc ở giữa,
   giống mẫu tham khảo) — không còn dùng prompt() nữa. QUAN TRỌNG: input/select bên trong phải được
   MỞ LẠI pointer-events (quy tắc ".qs-cell *{pointer-events:none}" ở trên vốn để dành cho các ô
   sản phẩm/kéo-thả, KHÔNG áp dụng được ở đây vì người dùng cần gõ chữ/chọn trang trực tiếp). */
.qs-cell.qs-tab-editable{
  background:var(--pos-navy,#22242e);border-color:var(--pos-navy2,#191b23);cursor:default;
  gap:5px;padding:6px 5px;
}
.qs-cell.qs-tab-editable .qs-slotnum{color:#7d84a0}
.qs-cell.qs-tab-editable .qs-tab-input{
  pointer-events:auto;width:100%;border:none;border-radius:6px;padding:5px 6px;
  font-size:11.5px;font-weight:700;text-align:center;color:#1a1f2b;background:#fff;outline:none;
}
.qs-cell.qs-tab-editable .qs-tab-input::placeholder{color:#a3a8b5;font-weight:500}
.qs-cell.qs-tab-editable .qs-tab-input:focus{box-shadow:0 0 0 2px var(--pos-orange,#e8973f)}
.qs-cell.qs-tab-editable.qs-selected{outline:3px solid var(--pos-orange,#e8973f);outline-offset:-2px}
/* Ô 5 — dành riêng cho mũi tên chuyển trang, không thể gán/kéo-thả gì vào đây */
.qs-cell.qs-reserved{background:#e9ebee;border-style:dashed;border-color:#c3c7ce;cursor:not-allowed;opacity:.8}
.qs-cell.qs-reserved .qs-reserved-label{font-size:15px;color:#8890a0;font-weight:700;letter-spacing:2px}
/* Ô sản phẩm khi CHƯA chọn tab nào ở trên — mờ hẳn, không bấm/kéo-thả được */
.qs-cell.qs-noselect{background:#eceef1;border-style:dashed;opacity:.35;cursor:not-allowed}
/* Cặp nút mũi tên dọc (▲▼) — dùng chung cho cả pager TẦNG 1 (trang tab) lẫn TẦNG 2 (trang con) */
.qs-pager{display:flex;flex-direction:column;gap:6px;flex:0 0 40px}
.qs-pager-btn{
  flex:1;border:1.5px solid #b8bcc4;border-radius:6px;background:#fff;
  font-size:16px;font-weight:800;color:#556;min-height:28px;
}
.qs-pager-btn:active:not(:disabled){background:#eceef1}
.qs-pager-btn:disabled{opacity:.3;cursor:not-allowed}
.mini-list-table tr[draggable="true"]{cursor:grab}
.mini-list-table tr.qs-row-dragging{opacity:.35}