/*-------------LBC International-----------------------------
Version        Owner      Description
-------------------------------------------------------------
VN26082026     quangdang  Extract inline <style> from app-inner.html mockup into standalone style.css (PWA split)
VN26082026     quangdang  Add .login-error style for Prism login validation message
VN27082026     quangdang  Add .qr-box.has-qr to suppress the fake striped pattern + "MOMO QR" label once a real QR image is injected (see app.js renderMomoQr())
VN09092026     quangdang  Add .offline-order-row/.offline-order-note styles for the "Đơn chờ đồng bộ" section under tab Báo cáo (offline order queue feature)
VN12102026     claude     Bổ sung style theo mockup app-inner-v2_5.html: công tắc chế độ Bán hàng/Đổi trả, giỏ chung HÀNG MUA/HÀNG TRẢ, ghi chú tại dòng, phí, giữ bill, popup VAT, X Out A4, nút icon 32px + nhãn, thanh Hoàn tác, bố cục điện thoại
-------------------------------------------------------------*/

  :root{
    --bg:#F6F4EF;
    --surface:#FFFFFF;
    --surface-alt:#EFEBE1;
    --surface-sunken:#EAE6D9;
    --border:#DEDACE;
    --border-strong:#C7C1AF;
    --text:#25231D;
    --text-secondary:#6E6A5C;
    --text-muted:#9C9686;
    --accent:#A6402F;
    --accent-dark:#7E2E20;
    --accent-soft:#F1E0D9;
    --success:#4B7052;
    --success-soft:#E3ECE0;
    --warning:#A5741F;
    --warning-soft:#F5E9CE;
    --danger:#A5342B;
    --danger-soft:#F5DEDA;
    --radius-sm:6px;
    --radius:10px;
    --radius-lg:18px;
    --shadow:0 1px 2px rgba(37,35,29,.06), 0 8px 24px rgba(37,35,29,.07);
    --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  }
  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    margin:0;
    font-family:var(--font-ui);
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
  }
  button, input, select{font-family:inherit;font-size:inherit;color:inherit;}
  button{cursor:pointer;}
  button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible{
    outline:2px solid var(--accent); outline-offset:2px;
  }
  .hidden{display:none !important;}
  .eyebrow{
    font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
    color:var(--text-muted);
  }
  .mono{font-family:var(--font-mono);}

  /* ---------- Login screen ---------- */
  #screen-login{
    min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:24px;
  }
  .login-card{
    width:100%; max-width:380px; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden;
  }
  .login-logo-banner{
    background:#0A0A0A; padding:30px 28px; display:flex; align-items:center; justify-content:center;
    border-bottom:4px solid; border-image:linear-gradient(90deg,#FF4C2C,#F26322,#FF8417,#FCB119,#FFDA52) 1;
  }
  .login-logo-banner img{height:44px; width:auto; display:block;}
  .login-card-body{padding:28px 28px 32px;}
  .login-footer{
    margin-top:22px; text-align:center; font-size:11.5px; color:var(--text-muted);
  }
  .login-footer a{
    background:linear-gradient(90deg,#FF4C2C,#F26322,#FF8417,#FCB119,#FFDA52);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    font-weight:700; text-decoration:none;
  }
  .brandmark{display:flex; align-items:center; gap:10px; margin-bottom:26px;}
  .brandmark .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none;}
  .brandmark-icon{height:20px; width:auto; flex:none; display:block;}
  /*VN11092026 - quangdang - nowrap+ellipsis thay vì để chữ tự xuống dòng khi hết chỗ ngang (nút "Bật
  thông báo" hết wrap 3 tầng nên giờ chiếm rộng hơn, đẩy hẹp phần brand bên trái) — xem .topbar-left
  .brandmark bên dưới cho phép co lại (bỏ flex:none) để ellipsis thật sự phát huy tác dụng.*/
  .brandmark .name{font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  /*END VN11092026*/
  .brandmark .name span{color:var(--accent);}
  .login-card h1{font-size:19px; font-weight:600; margin:0 0 4px;}
  .login-card p.sub{font-size:13px; color:var(--text-secondary); margin:0 0 24px;}
  .field{margin-bottom:16px;}
  .field label{display:block; font-size:12px; font-weight:600; color:var(--text-secondary); margin-bottom:6px;}
  .field input, .field select{
    width:100%; padding:11px 12px; border:1px solid var(--border-strong); border-radius:var(--radius-sm);
    background:var(--surface); font-size:14px;
  }
  .input-vnd-wrap{position:relative;}
  .input-vnd-wrap input{padding-right:34px; font-family:var(--font-mono); text-align:right;}
  .input-vnd-suffix{
    position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:13px; pointer-events:none;
  }
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border:1px solid transparent; border-radius:var(--radius-sm); padding:11px 16px;
    font-size:14px; font-weight:600; transition:filter .12s ease;
  }
  .btn:hover{filter:brightness(0.96);}
  .btn-primary{background:var(--accent); color:#fff;}
  .btn-primary:disabled{background:var(--border-strong); color:var(--surface); cursor:not-allowed;}
  .btn-secondary{background:var(--surface); color:var(--text); border-color:var(--border-strong);}
  .btn-danger{background:var(--danger); color:#fff;} /* VN07092026 - quangdang - nút "Xoá" trong confirm-remove-modal */
  .btn-ghost{background:transparent; color:var(--text-secondary); border-color:transparent;}
  .btn-block{width:100%;}
  .btn-sm{padding:7px 12px; font-size:13px;}
  .login-submit{margin-top:6px;}
  .login-error{
    background:var(--danger-soft); color:var(--danger); border-radius:var(--radius-sm);
    padding:9px 12px; font-size:12.5px; line-height:1.4; margin-bottom:14px;
  }
  .login-hint{margin-top:18px; font-size:12px; color:var(--text-muted); text-align:center;}
  .store-auto-note{font-size:11.5px; color:var(--text-muted); margin:-10px 0 16px; line-height:1.4;}

  /* ---------- App shell ---------- */
  #app-shell{
    display:grid; min-height:100vh;
    grid-template-columns:72px minmax(0,1fr);
    grid-template-rows:58px 1fr;
    grid-template-areas:"rail topbar" "rail content";
  }
  .topbar{
    grid-area:topbar; display:flex; align-items:center; justify-content:space-between;
    padding:0 20px; background:var(--surface); border-bottom:1px solid var(--border);
    position:sticky; top:0; z-index:20;
  }
  /*VN11092026 - quangdang - Đổi từ hàng ngang sang xếp dọc (tên cửa hàng/NV nằm DƯỚI "VXB Anywhere
  Checkout") theo yêu cầu người dùng — trên màn hẹp (POS ~480px), xếp ngang trước đây làm topbar-store
  bị bóp quá hẹp, hiện cắt chữ dạng "M..." (ellipsis) mất hết thông tin.*/
  .topbar-left{display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; min-width:0; flex:1 1 auto; overflow:hidden;}
  .topbar-left .brandmark{margin:0; max-width:100%; min-width:0;}
  .topbar-left .brandmark .name{min-width:0;}
  /*VN11092026 (2) - quangdang - Thụt lề 30px (= 20px icon logo, hình vuông thật + 10px gap của
  .brandmark) để tên cửa hàng/NV thẳng hàng với chữ "VXB Anywhere Checkout" thay vì thẳng hàng với
  icon logo — theo yêu cầu người dùng.*/
  .topbar-store{font-size:12px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; margin-left:30px;}
  /*END VN11092026 (2)*/
  /*END VN11092026*/
  .topbar-store b{color:var(--text); font-weight:600;}
  .topbar-right{display:flex; align-items:center; gap:10px;}
  .net-pill{
    display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
    font-size:12px; font-weight:600; border:1px solid transparent; background:none;
  }
  .net-pill.online{background:var(--success-soft); color:var(--success);}
  .net-pill.offline{background:var(--danger-soft); color:var(--danger);}
  .net-dot{width:7px;height:7px;border-radius:50%;background:currentColor;}
  .icon-btn{
    display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
    border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface); color:var(--text-secondary);
  }
  .icon-btn:hover{background:var(--surface-alt);}
  /*VN11092026 - quangdang - Tô đỏ nút thông báo khi đang TẮT (🔕, người dùng tự tắt) hoặc bị chặn ở
  cấp trình duyệt — theo yêu cầu người dùng "icon chuông bị gạch đỏ", xem vxbSetPushButton() trong app.js.*/
  .icon-btn-danger{color:var(--danger); border-color:var(--danger-soft); background:var(--danger-soft);}
  .icon-btn-danger:hover{background:var(--danger-soft);}
  /*END VN11092026*/

  /*VN15092026 - quangdang - Vòng xoay báo hiệu "đang chờ BE" dùng chung toàn app (showApiSpinner()/
  hideApiSpinner() trong app.js, hook trong apiFetch()) — CHỈ báo hiệu, không phải overlay/modal, không
  chặn click/thao tác (pointer-events mặc định vẫn cho qua vì đây không phải lớp phủ toàn màn hình).*/
  .api-spinner{
    display:inline-block; width:18px; height:18px; flex:none;
    border:2.5px solid var(--border); border-top-color:var(--text-secondary);
    border-radius:50%; animation:vxb-spin .7s linear infinite;
  }
  @keyframes vxb-spin{ to{ transform:rotate(360deg); } }
  /*END VN15092026*/

  @media (max-width:380px){
    .topbar{padding:0 12px; gap:8px;}
    .topbar-left{gap:8px;}
    .brandmark{gap:6px;}
    .brandmark .name{font-size:11.5px; letter-spacing:.02em;}
    .topbar-right{gap:6px;}
    .net-pill{padding:6px 8px;}
    .net-label{display:none;}
    .icon-btn{width:30px; height:30px;}
  }

  .rail{
    grid-area:rail; background:var(--surface-alt); border-right:1px solid var(--border);
    display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:6px;
  }
  .rail-btn{
    width:52px; height:52px; border-radius:var(--radius); border:1px solid transparent; background:transparent;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    color:var(--text-secondary); font-size:10.5px; font-weight:600;
  }
  .rail-btn svg{width:20px;height:20px;}
  .rail-btn.active{background:var(--surface); border-color:var(--border); color:var(--accent); box-shadow:var(--shadow);}

  .content{grid-area:content; overflow-y:auto; padding:22px 22px 50px; position:relative;} /*VN09092026 - quangdang - +28px cuối để chừa chỗ cho .app-footer cố định*/
  /*VN09092026 - quangdang - Footer "Powered by vantixb" cố định đáy màn hình, hiện trên mọi màn (Bán hàng/
  Báo cáo/Lịch sử/Hoá đơn) — tái dùng đúng style gradient-text của .login-footer.*/
  .app-footer{
    position:fixed; left:0; right:0; bottom:0; height:28px; z-index:15; pointer-events:none;
    display:flex; align-items:center; justify-content:center;
    font-size:11px; color:var(--text-muted); background:transparent;
  }
  /*VN09092026 - quangdang - nền trong suốt để lộ UI phía sau (theo yêu cầu người dùng) — tắt
  pointer-events ở nền để không chặn thao tác bên dưới, bật lại riêng ở link để vẫn bấm được.*/
  .app-footer a{
    pointer-events:auto;
    background:linear-gradient(90deg,#FF4C2C,#F26322,#FF8417,#FCB119,#FFDA52);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    font-weight:700; text-decoration:none; margin-left:4px;
  }
  .screen{display:none;}
  .screen.active{display:block;}

  /* ---------- Checkout screen ---------- */
  .checkout-grid{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:20px; align-items:start;}
  .panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px;}
  .panel + .panel{margin-top:16px;}
  .panel-title{font-size:13px; font-weight:700; margin:0 0 12px;}
  /*VN13092026 - quangdang - Clearfix: #offline-orders-panel nhét nút "Đồng bộ ngay" (style="float:right")
  vào trong .panel-title — thiếu clearfix khiến nút (khi cao hơn dòng chữ tiêu đề) tràn xuống đè vào
  card ĐẦU TIÊN của #offline-orders-list ngay bên dưới, ép dòng text card đó hẹp lại/xuống dòng (chỉ
  card đầu bị, các card sau đã ở dưới hết chiều cao cái float nên không sao) — đúng bug người dùng phát
  hiện qua ảnh chụp thật. Chỉ 1 nơi dùng .panel-title kèm float nên thêm ở đây an toàn, không ảnh hưởng
  .panel-title khác (Khuyến mãi/Giỏ hàng/Báo cáo doanh số/Kênh thanh toán/Lịch sử...).*/
  .panel-title::after{content:''; display:table; clear:both;}

  .search-hero{padding:16px 18px;}
  .search-row-main{display:flex; gap:10px; min-width:0;}
  /*VN11092026 - quangdang - Ban đầu tăng gấp đôi (50px->100px) theo yêu cầu, nhưng sau khi mobile
  hiện đúng (fix flex-basis ở @media max-width:560px bên dưới), người dùng thấy quá to so với nút
  "Quét mã vạch" bên dưới — chốt lại bằng đúng chiều cao .scan-btn-lg (50px) để 2 nút đều nhau.*/
  .input-wrap-lg{
    flex:1; display:flex; align-items:center; gap:10px; border:1px solid var(--border-strong);
    border-radius:var(--radius); padding:0 14px; background:var(--surface); height:50px; min-width:0;
  }
  /*END VN11092026*/
  .input-wrap-lg svg{flex:none; color:var(--text-muted);}
  .input-wrap-lg input{flex:1; height:100%; border:none; padding:0; background:transparent; font-size:15px; min-width:0;}
  .input-wrap-lg input:focus{outline:none;}
  .scan-btn-lg{height:50px; padding:0 20px; gap:8px; flex:none; white-space:nowrap;}

  .mini-row{display:flex; align-items:flex-start; gap:16px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border);}
  .mini-field{flex:1; display:flex; align-items:center; gap:8px; min-width:0;}
  .mini-field svg{flex:none; color:var(--text-muted); margin-top:1px;}
  .mini-field-body{flex:1; min-width:0;}
  .mini-field input{width:100%; border:none; background:transparent; font-size:13px; padding:4px 0;}
  .mini-field input:focus{outline:none;}
  .mini-scan-btn{
    flex:none; width:26px; height:26px; border-radius:var(--radius-sm); border:1px solid var(--border);
    background:var(--surface-alt); color:var(--text-secondary); display:flex; align-items:center; justify-content:center;
  }
  .mini-scan-btn:hover{background:var(--border); color:var(--text);}
  .mini-scan-btn svg{width:14px; height:14px; margin:0;}
  .mini-result{display:block; font-size:11.5px; margin-top:1px;}
  .mini-result.success{color:var(--success);}
  .mini-result.error{color:var(--danger);}
  .mini-clear{background:none; border:none; color:var(--text-muted); font-size:15px; flex:none; line-height:1; padding:2px;}
  .mini-divider{width:1px; align-self:stretch; background:var(--border);}
  /*VN09092026 - quangdang - Danh sách coupon đã áp dụng (nhiều coupon/bill), mỗi dòng có nút "×" riêng.*/
  .coupon-list{display:flex; flex-direction:column; gap:4px; margin-top:6px;}
  .coupon-chip{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    background:var(--surface-alt); border-radius:var(--radius-sm); padding:3px 8px; font-size:12px;
  }
  .coupon-chip .mono{font-family:var(--font-mono);}
  .coupon-chip .mini-clear{padding:0 2px;}
  @media (max-width:560px){
    .mini-row{flex-direction:column; gap:12px;}
    .mini-divider{display:none;}
    .search-row-main{flex-direction:column;}
    .scan-btn-lg{width:100%;}
    /*VN11092026 - quangdang - BUG GỐC THẬT SỰ của "ô search không to ra" (xác nhận qua remote DevTools
    thật trên máy POS, không phải cache): .input-wrap-lg dùng "flex:1 1 0%" — khi .search-row-main đổi
    sang flex-direction:column ở đây (màn hẹp <=560px), trục chính của flex đổi thành chiều CAO, nên
    flex-basis:0% thay thế hoàn toàn cho "height:100px" khai báo ở rule gốc (dòng ~203) khi tính kích
    thước — height bị vô hiệu hoàn toàn, chỉ còn co theo nội dung (icon+chữ) ra ~18px bất kể height khai
    báo là 50px hay 100px. Desktop site (viewport rộng >560px) không kích hoạt block này -> row layout
    -> flex-basis chỉ ảnh hưởng chiều rộng, height áp dụng bình thường -> đúng là lý do "bật desktop site
    thì to ra". Fix: bỏ flex-basis:0% (dùng flex:none thay flex:1) khi ở layout column, để height khai
    báo ở rule gốc (hiện 50px, xem dòng ~203) áp dụng đúng — full width tự nhiên có sẵn vì .search-row-main
    đã column + input-wrap-lg không có width giới hạn nào khác.*/
    .input-wrap-lg{flex:none;}
    /*END VN11092026*/
  }

  .offline-banner{
    display:flex; align-items:flex-start; gap:10px; background:var(--danger-soft); color:var(--danger);
    border-radius:var(--radius); padding:12px 14px; font-size:13px; margin-bottom:16px; line-height:1.5;
  }
  .offline-banner svg{flex:none; margin-top:1px;}
  .offline-banner b{display:block; margin-bottom:2px;}

  .search-wrap{position:relative;}
  .results-dropdown{
    display:none; position:absolute; left:0; right:0; top:calc(100% + 6px);
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow); z-index:15; max-height:340px; overflow-y:auto;
  }
  .results-dropdown.show{display:block;}
  .result-row{
    display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--border);
    background:none; border-left:none; border-right:none; border-top:none; width:100%; text-align:left;
  }
  .result-row:last-of-type{border-bottom:none;}
  .result-row:hover{background:var(--surface-alt);}
  .result-avatar{
    width:30px; height:30px; border-radius:var(--radius-sm); background:var(--surface-sunken); color:var(--text-muted);
    display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex:none;
  }
  .result-name{flex:1; font-size:12.5px; font-weight:600; min-width:0;}
  .result-cat{font-size:10.5px; color:var(--text-muted); font-weight:400; margin-top:1px;}
  .stock-ok{color:var(--text-muted);}
  .stock-low{color:var(--warning); font-weight:600;}
  .stock-out{color:var(--danger); font-weight:600;}
  /*VN10092026 - quangdang - Bỏ hiệu ứng làm mờ + cursor not-allowed cho hàng hết tồn (.out-of-stock) — theo yêu cầu, sản phẩm hết tồn vẫn add được bình thường nên không còn hiển thị như bị khoá. Label "Hết hàng" (.stock-out) vẫn giữ để tham khảo tồn kho.*/
  /*END VN10092026*/
  .result-price{font-size:12px; font-weight:600; color:var(--accent-dark); flex:none; white-space:nowrap;}
  .results-footer{
    padding:9px 14px; font-size:11.5px; font-style:italic; color:var(--text-muted); background:var(--surface-alt);
    border-radius:0 0 var(--radius) var(--radius);
  }
  .no-results{padding:16px 14px; text-align:center; color:var(--text-muted); font-size:12.5px;}

  .promo-list{display:flex; flex-direction:column;}
  .promo-row{display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--border);}
  .promo-row:last-child{border-bottom:none; padding-bottom:0;}
  .promo-row:first-child{padding-top:0;}
  .promo-icon{
    width:34px; height:34px; border-radius:var(--radius-sm); background:var(--accent-soft); color:var(--accent-dark);
    display:flex; align-items:center; justify-content:center; flex:none;
  }
  .promo-icon svg{width:16px; height:16px;}
  .promo-title{font-size:13px; font-weight:600;}
  .promo-sub{font-size:11.5px; color:var(--text-muted); margin-top:2px;}
  .promo-tag{
    flex:none; font-size:10px; font-weight:700; padding:3px 8px; border-radius:999px; align-self:center;
  }
  .promo-tag.auto{background:var(--success-soft); color:var(--success);}
  .promo-tag.code{background:var(--surface-sunken); color:var(--text-secondary);}

  /* Cart panel */
  .cart-panel{position:sticky; top:0;}
  .cart-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
  .cart-count{font-size:12px; color:var(--text-secondary);}
  .cart-empty{padding:30px 0; text-align:center; color:var(--text-muted); font-size:13px;}
  .cart-list{display:flex; flex-direction:column; gap:10px; max-height:280px; overflow-y:auto; margin-bottom:14px;}
  .cart-item{display:flex; align-items:center; gap:10px;}
  .cart-item-name{flex:1; font-size:12.5px; font-weight:600; line-height:1.35;}
  .cart-item-price{font-size:11.5px; color:var(--text-muted);}
  /* VN07092026 - quangdang - hiển thị chiết khấu từng dòng (giá gốc gạch ngang + tag %/dòng "Chiết khấu") khi item có discount, xem renderCart() trong app.js */
  .cart-item-price-row{display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin-top:2px;}
  .cart-item-price-orig{font-size:11px; color:var(--text-muted); text-decoration:line-through;}
  .cart-item-discount-tag{font-size:10px; font-weight:700; padding:1px 6px; border-radius:999px; background:var(--success-soft); color:var(--success);}
  .cart-item-discount-sub{font-size:11px; color:var(--success); margin-top:2px;}
  .qty-stepper{display:flex; align-items:center; gap:6px; border:1px solid var(--border); border-radius:999px; padding:2px;}
  .qty-stepper button{width:22px;height:22px;border-radius:50%;border:none;background:transparent;font-weight:700;display:flex;align-items:center;justify-content:center;}
  .qty-stepper button:hover{background:var(--surface-alt);}
  .qty-val{font-size:12px; font-weight:600; width:16px; text-align:center;}
  .cart-item-total{font-size:12.5px; font-weight:700; width:76px; text-align:right;}
  .rm-btn{background:none;border:none;color:var(--text-muted); flex:none;}
  .rm-btn:hover{color:var(--danger);}

  .promo-banner{
    display:none; align-items:flex-start; gap:8px; background:var(--warning-soft); color:var(--warning);
    border-radius:var(--radius); padding:10px 12px; font-size:12.5px; line-height:1.5; margin-bottom:14px;
  }
  .promo-banner.show{display:flex;}
  .promo-banner svg{flex:none; margin-top:1px;}
  .promo-banner b{display:block;}
  .promo-cache-note{font-size:11px; opacity:.85;}

  .totals-row{display:flex; justify-content:space-between; font-size:13px; color:var(--text-secondary); margin-bottom:6px;}
  .totals-row.discount{color:var(--success);}
  .totals-breakdown{font-size:11px; color:var(--text-muted); margin:-2px 0 8px;} /* VN07092026 - quangdang - dòng tách "Ưu đãi sản phẩm"/"Khuyến mãi tự động" dưới "Chiết khấu tổng bill" */
  .totals-row.grand{font-size:16px; font-weight:700; color:var(--text); margin-top:10px; padding-top:10px; border-top:1px dashed var(--border-strong);}
  .checkout-btn{margin-top:14px;}

  /* ---------- Mobile cart sheet ---------- */
  .cart-sheet-trigger{display:none;}
  @media (max-width:900px){
    .checkout-grid{grid-template-columns:minmax(0,1fr);}
    .cart-panel{
      display:none; position:fixed; left:0; right:0; bottom:0; top:12vh; z-index:40;
      border-radius:20px 20px 0 0; box-shadow:0 -8px 30px rgba(0,0,0,.18);
      transform:translateY(100%); transition:transform .22s ease; overflow-y:auto;
    }
    .cart-panel.sheet-open{display:block; transform:translateY(0);}
    /*VN12092026 - quangdang - bottom đổi từ 74px -> 92px theo yêu cầu người dùng: 74px khiến thanh
    này đè lên phần lớn .app-footer (bottom:60px, height:28px -> mép trên footer ở 88px), chỉ chừa
    lộ ra 1 mẩu chữ "Powered by vantixb". 92px đặt thanh này NGAY TRÊN mép footer (88px) + 4px đệm.*/
    .cart-sheet-trigger{
      display:flex; position:fixed; left:16px; right:16px; bottom:92px; z-index:30;
      align-items:center; justify-content:space-between; background:var(--accent); color:#fff;
      border-radius:999px; padding:13px 18px; box-shadow:var(--shadow); font-size:13px; font-weight:700;
    }
    .cart-sheet-close{display:flex !important; margin-bottom:8px;}
  }
  .cart-sheet-close{display:none; align-self:flex-end; background:none; border:none; color:var(--text-muted); font-size:20px; line-height:1;}

  /* ---------- Bottom mobile tab bar ---------- */
  .tabbar-mobile{display:none;}
  @media (max-width:900px){
    #app-shell{grid-template-columns:minmax(0,1fr); grid-template-areas:"topbar" "content";}
    .rail{display:none;}
    .tabbar-mobile{
      display:flex; position:fixed; bottom:0; left:0; right:0; height:60px; background:var(--surface);
      border-top:1px solid var(--border); z-index:25;
    }
    .tabbar-mobile button{
      flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
      background:none; border:none; color:var(--text-muted); font-size:10.5px; font-weight:600;
    }
    .tabbar-mobile button.active{color:var(--accent);}
    .tabbar-mobile svg{width:19px;height:19px;}
    .content{padding-bottom:112px;} /*VN09092026 - quangdang - 84px cho tabbar-mobile + 28px cho .app-footer*/
    .app-footer{bottom:60px;} /*VN09092026 - quangdang - đặt NGAY TRÊN tabbar-mobile (cũng fixed đáy màn hình), tránh đè lên nhau*/
  }

  /* ---------- Payment modal ---------- */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(37,35,29,.42); display:flex; align-items:center; justify-content:center;
    z-index:60; padding:16px;
  }
  .modal-card{
    width:100%; max-width:420px; max-height:90vh; overflow-y:auto; background:var(--surface); border-radius:var(--radius-lg);
    box-shadow:var(--shadow); padding:22px;
  }
  .modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
  .modal-head h2{font-size:16px; margin:0;}
  .modal-close{background:none;border:none;color:var(--text-muted);font-size:20px;}

  /* ---------- Camera scanner ---------- */
  .scanner-overlay{
    position:fixed; inset:0; background:rgba(20,18,15,.55); z-index:90;
    display:flex; align-items:center; justify-content:center; padding:16px;
  }
  .scanner-card{
    width:100%; max-width:360px; background:#141210; border-radius:var(--radius-lg);
    box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;
  }
  .scanner-top{
    flex:none; display:flex; align-items:center; justify-content:space-between;
    padding:12px 14px; color:#fff; font-size:13.5px; font-weight:600;
  }
  .scanner-close{background:rgba(255,255,255,.12); border:none; color:#fff; width:28px; height:28px; border-radius:50%; font-size:16px; line-height:1; flex:none;}
  .scanner-video-wrap{position:relative; width:100%; height:230px; overflow:hidden; background:#000;}
  .scanner-video-wrap video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .scanner-frame{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:78%; max-width:230px; aspect-ratio:1.5/1; pointer-events:none;
  }
  .scanner-frame .corner{position:absolute; width:20px; height:20px; border:3px solid var(--accent); opacity:.95;}
  .scanner-frame .tl{top:0; left:0; border-right:none; border-bottom:none; border-radius:6px 0 0 0;}
  .scanner-frame .tr{top:0; right:0; border-left:none; border-bottom:none; border-radius:0 6px 0 0;}
  .scanner-frame .bl{bottom:0; left:0; border-right:none; border-top:none; border-radius:0 0 0 6px;}
  .scanner-frame .br{bottom:0; right:0; border-left:none; border-top:none; border-radius:0 0 6px 0;}
  .scanner-laser{
    position:absolute; left:4%; right:4%; top:0; height:2px; background:var(--accent);
    box-shadow:0 0 8px 1px var(--accent); animation:laserMove 1.8s ease-in-out infinite;
  }
  @keyframes laserMove{
    0%,100%{ top:6%; opacity:.9; }
    50%{ top:92%; opacity:.9; }
  }
  .scanner-hint{flex:none; text-align:center; color:#D8D5CB; font-size:11.5px; padding:12px 20px 16px;}
  .scanner-message{
    position:absolute; left:12px; right:12px; bottom:12px; background:rgba(20,20,18,.94); color:#fff;
    border-radius:var(--radius); padding:12px 14px; font-size:12px; text-align:center; line-height:1.5;
  }
  .scanner-message button{margin-top:10px;}
  .pay-total{background:var(--surface-alt); border-radius:var(--radius); padding:14px; text-align:center; margin-bottom:14px;}
  .pay-total .lbl{font-size:11px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.06em;}
  .pay-total .amt{font-size:24px; font-weight:700; font-family:var(--font-mono); margin-top:2px;}
  .pay-total .amt.zero{color:var(--success);}
  .pay-total-sub{font-size:11px; color:var(--text-secondary); margin-top:4px;}
  .paid-lines{margin-bottom:14px; display:flex; flex-direction:column; gap:6px;}
  .paid-line{display:flex; align-items:center; gap:9px; background:var(--success-soft); color:var(--success); border-radius:var(--radius-sm); padding:7px 10px; font-size:12px;}
  .paid-line .pl-icon{flex:none; display:flex;}
  .paid-line .pl-icon svg{width:15px; height:15px;}
  .paid-line .pl-info{flex:1; display:flex; justify-content:space-between; align-items:center; gap:8px; min-width:0;}
  .paid-line .pl-name{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .paid-line .pl-amt{font-family:var(--font-mono); flex:none;}
  .paid-line button{background:none; border:none; color:inherit; opacity:.6; font-size:14px; line-height:1; flex:none;}
  .paid-line button:hover{opacity:1;}
  /*VN09092026 - quangdang - Danh sách "Đơn chờ đồng bộ" dưới tab Báo cáo, xem
  renderOfflineOrdersScreen() trong app.js. Riêng khỏi .paid-line (vốn mang màu success cố định,
  không hợp cho dòng đang pending/failed).*/
  .offline-order-row{display:flex; align-items:flex-start; gap:9px; flex-wrap:wrap; border-radius:var(--radius-sm); padding:9px 10px; font-size:12px; margin-bottom:6px;}
  .offline-order-row.pending{background:var(--warning-soft); color:var(--warning);}
  .offline-order-row.error{background:var(--danger-soft); color:var(--danger);}
  .offline-order-info{flex:1; min-width:180px;}
  .offline-order-status{margin-top:2px;}
  .offline-order-note{margin-top:4px; font-size:11px; opacity:.85;}
  .offline-order-note.error{color:var(--danger);}
  .qr-amount-note{text-align:center; font-size:12px; color:var(--text-secondary); margin-bottom:10px;}
  .card-amount-note{text-align:center; font-size:12px; color:var(--text-secondary); margin-bottom:10px;}
  .card-amount-note b{font-family:var(--font-mono); color:var(--text);}
  .qr-amount-note b{font-family:var(--font-mono); color:var(--text);}
  .vr-note{font-size:11px; margin-top:6px; opacity:.85; font-weight:400;}
  .pay-complete-state{text-align:center; padding:26px 0 10px;}
  .pay-complete-icon{
    width:52px; height:52px; border-radius:50%; background:var(--success-soft); color:var(--success); font-size:24px;
    display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-weight:700;
  }
  .pay-complete-text{font-size:13.5px; font-weight:600; color:var(--text);}
  .pay-tabs{display:flex; gap:6px; margin-bottom:16px; background:var(--surface-alt); border-radius:var(--radius); padding:4px;}
  .pay-tab{flex:1; padding:9px 2px; border:none; background:none; border-radius:var(--radius-sm); font-size:11.5px; font-weight:600; color:var(--text-secondary);}
  .pay-tab.active{background:var(--surface); color:var(--text); box-shadow:var(--shadow);}
  .pay-tab:disabled{color:var(--text-muted); opacity:.55; cursor:not-allowed;}
  .pay-panel{display:none;}
  .pay-panel.active{display:block;}
  .pay-disabled-note{font-size:12px; color:var(--danger); background:var(--danger-soft); padding:9px 11px; border-radius:var(--radius-sm); margin-bottom:12px;}
  .change-row{display:flex; justify-content:space-between; margin-top:10px; font-size:13px;}
  .change-row b{font-family:var(--font-mono);}
  .qr-box{
    width:180px; height:180px; margin:0 auto 14px; border-radius:var(--radius);
    background:
      repeating-linear-gradient(45deg, var(--text) 0 3px, transparent 3px 7px),
      repeating-linear-gradient(-45deg, var(--text) 0 3px, transparent 3px 7px);
    background-size:100% 100%, 100% 100%;
    background-blend-mode:multiply; opacity:.85;
    position:relative;
  }
  .qr-box::before{content:"MOMO QR";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    background:var(--surface); margin:auto; width:64px; height:24px; font-size:10px; font-weight:700; letter-spacing:.05em; color:var(--accent-dark); border-radius:4px;}
  /*VN27082026 - quangdang - real QR image injected (app.js renderMomoQr()) — drop the fake striped pattern + "MOMO QR" label so they don't overlay/obscure the scannable code*/
  .qr-box.has-qr{background:none;}
  .qr-box.has-qr::before{content:none;}
  .waiting-row{display:flex; align-items:center; justify-content:center; gap:8px; font-size:12.5px; color:var(--text-secondary); margin-bottom:8px;}
  @keyframes spin{to{transform:rotate(360deg);}}
  /*VN17092026 (4) - quangdang - Theo yêu cầu người dùng: overlay to phủ toàn màn hình (giống loading
  của Prism gửi kèm ảnh mẫu — vòng tròn xoay to giữa màn hình, nền tối, KHÔNG có nút Cancel), thay thế
  HẲN mọi spinner nhỏ vừa thêm (email/login/cash/Payoo/print/RawBT/coupon/MUJI Passport/Urbox/Gift Card)
  — chỉ còn 1 điểm hiển thị loading duy nhất cho mọi hành động chờ mạng trong app.*/
  .loading-overlay{
    position:fixed; inset:0; background:rgba(20,18,15,.72); z-index:200;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  }
  .loading-spinner-lg{width:64px; height:64px; border:5px solid rgba(255,255,255,.25); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite;}
  .loading-overlay-text{color:#fff; font-size:14px; text-align:center; padding:0 24px; max-width:320px;}
  /*END VN17092026 (4)*/
  .demo-note{font-size:11px; color:var(--text-muted); text-align:center; margin-top:10px;}
  .voucher-input-row{display:flex; gap:8px; align-items:stretch;}
  .voucher-input-row input{flex:1;}
  .voucher-check-btn{
    flex:none; width:42px; border-radius:var(--radius-sm); border:1px solid var(--accent); background:var(--accent);
    color:#fff; display:flex; align-items:center; justify-content:center;
  }
  .voucher-check-btn:hover{background:var(--accent-dark); border-color:var(--accent-dark);}
  .voucher-check-btn:disabled{background:var(--border-strong); border-color:var(--border-strong); cursor:not-allowed;}
  .voucher-check-btn svg{width:18px; height:18px;}
  /*VN15092026 - quangdang - Nút quét camera cho mã Urbox/Gift Card (mở scanner sẵn có) — đặt cạnh nút
  kiểm tra, style trung tính (không nổi bật bằng màu accent như nút kiểm tra) để không gây nhầm lẫn 2
  nút có cùng độ ưu tiên.*/
  .voucher-scan-btn{
    flex:none; width:42px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface);
    color:var(--text-secondary); display:flex; align-items:center; justify-content:center;
  }
  .voucher-scan-btn:hover{background:var(--surface-alt);}
  /*VN16092026 (5) - quangdang - Icon đổi từ emoji 📷 (theo font-size) sang SVG ic('scan') (điền qua
  app.js) — bỏ font-size cũ (không còn tác dụng), thêm size cho svg khớp .voucher-check-btn cạnh bên.*/
  .voucher-scan-btn svg{width:18px; height:18px;}
  /*END VN16092026 (5)*/
  /*END VN15092026*/
  .voucher-hint{font-size:11px; color:var(--text-muted); margin-top:6px; display:flex; align-items:center; gap:5px;}
  .voucher-hint svg{width:12px; height:12px; flex:none;}
  .voucher-result{margin-top:12px; padding:12px; border-radius:var(--radius); font-size:12.5px; display:flex; align-items:flex-start; gap:10px;}
  .voucher-result svg{flex:none; margin-top:1px;}
  .voucher-result .vr-body{flex:1;}
  .voucher-result.ok{background:var(--success-soft); color:var(--success);}
  .voucher-result.err{background:var(--danger-soft); color:var(--danger);}
  .voucher-result .vr-value{font-size:16px; font-weight:700; margin-top:2px;}

  /* ---------- Receipt screen ---------- */
  /*VN11092026 - quangdang - Yêu cầu tiếp: hoá đơn phải NGANG HÀNG (cùng mức, cạnh) với nút back, NHƯNG
  vẫn phải THẲNG HÀNG (cùng độ rộng/2 mép trái-phải) với các khối bên dưới (.vat-gate, ô email,
  .receipt-actions — tất cả đều max-width:340px + margin:auto, tự canh giữa .content). Bản trước dùng
  flex row (nút back + hoá đơn chung 1 hàng, hoá đơn flex:1) làm hoá đơn bị hẹp lại + lệch phải so với
  các khối bên dưới (đúng như ảnh chụp) vì phải chia chỗ với nút back trong cùng 1 hàng.
  Fix: đưa nút back ra khỏi luồng layout (position:absolute, đặt ở góc trên-trái .receipt-top) để nó
  KHÔNG chiếm chỗ ngang — .receipt-wrap nhờ vậy lấy lại full-width y hệt .vat-gate (đều canh giữa
  .content qua margin:auto trên .receipt-ticket), 2 mép trái/phải luôn thẳng hàng với nhau, còn nút
  back vẫn nằm ở mức ngang với mép trên hoá đơn (đè lên khoảng trống bên trái hoá đơn nếu có, hoặc
  ngay phía trên bên trái .content).*/
  .receipt-top{position:relative; padding-bottom:20px;}
  .receipt-head{position:absolute; top:4px; left:0;} /*VN09092026 - quangdang - chứa nút back quay lại màn hình đơn hàng*/
  .receipt-wrap{display:flex; justify-content:center;}
  /*END VN11092026*/
  .receipt-ticket{
    position:relative; width:100%; max-width:340px; background:var(--surface); padding:26px 22px 30px;
    box-shadow:var(--shadow);
  }
  .receipt-ticket::after{
    content:""; position:absolute; left:0; right:0; bottom:-13px; height:14px;
    background:
      linear-gradient(135deg, var(--bg) 7px, transparent 0) 0 0,
      linear-gradient(-135deg, var(--bg) 7px, transparent 0) 0 0;
    background-size:14px 14px; background-repeat:repeat-x;
  }
  .r-brand{text-align:center; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:2px;}
  .r-store{text-align:center; font-size:11.5px; color:var(--text-secondary); margin-bottom:14px;}
  .r-meta{font-size:11.5px; color:var(--text-secondary); display:flex; justify-content:space-between; margin-bottom:2px;}
  .r-method-line{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-secondary); margin-top:3px;}
  .r-method-line .rml-icon{flex:none; display:flex;}
  .r-method-line .rml-icon svg{width:12px; height:12px;}
  .r-method-line .rml-name{flex:1;}
  .rml-code{font-family:var(--font-mono); color:var(--text-muted); font-size:10.5px;}
  .r-method-line b{font-family:var(--font-mono); color:var(--text); font-weight:600;}
  .r-divider{border:none; border-top:1px dashed var(--border-strong); margin:14px 0;}
  .r-line{display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:7px; gap:10px;}
  .r-line .r-name{flex:1;}
  .r-line .r-qty{color:var(--text-muted); width:36px; text-align:center;}
  .r-total{display:flex; justify-content:space-between; font-size:16px; font-weight:700; margin-top:6px;}
  .r-badge{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px; margin-top:12px;}
  .r-badge.paid{background:var(--success-soft); color:var(--success);}
  .r-badge.pending{background:var(--warning-soft); color:var(--warning);}
  .receipt-actions{display:flex; gap:10px; max-width:340px; margin:16px auto 0;}
  .receipt-actions .btn{flex:1;}
  .receipt-actions .btn:disabled{opacity:.45; cursor:not-allowed; filter:none;}
  .vat-gate{max-width:340px; margin:16px auto 0; background:var(--surface-alt); border-radius:var(--radius); padding:14px;}
  .vat-gate-label{font-size:13px; font-weight:600; margin-bottom:10px;}
  .vat-gate-label .req{color:var(--danger);}
  .vat-gate-options{display:flex; gap:8px;}
  .vat-option{
    flex:1; padding:10px; border-radius:var(--radius-sm); border:1.5px solid var(--border-strong);
    background:var(--surface); font-size:13px; font-weight:600; color:var(--text);
  }
  .vat-option.selected{border-color:var(--accent); background:var(--accent); color:#fff;}
  .vat-gate-hint{font-size:11px; color:var(--text-muted); margin-top:8px;}
  .vat-gate-hint.ok{color:var(--success);}
  .printer-config{
    max-width:340px; margin:0 auto; padding:8px 12px;
    background:var(--surface-alt); border-radius:var(--radius); font-size:11.5px;
  }
  .printer-config + .printer-config{margin-top:8px;}
  .printer-config-row{display:flex; align-items:center; gap:8px;}
  .printer-config-label{color:var(--text-secondary); white-space:nowrap; flex:none;}
  .printer-config input{
    flex:1; min-width:0; border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:5px 8px;
    font-size:11.5px; font-family:var(--font-mono); background:var(--surface);
  }
  .printer-status{display:block; font-size:10.5px; margin-top:5px; min-height:13px;}
  .printer-status.ok{color:var(--success);}
  .printer-status.err{color:var(--danger);}

  /* ---------- Reporting screen ---------- */
  .report-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:12px;}
  .filter-bar{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px;}
  .filter-group{display:flex; background:var(--surface-alt); border-radius:var(--radius); padding:4px; gap:2px;}
  .filter-chip{padding:7px 14px; border:none; background:none; border-radius:var(--radius-sm); font-size:12.5px; font-weight:600; color:var(--text-secondary); white-space:nowrap;}
  .filter-chip.active{background:var(--surface); color:var(--text); box-shadow:var(--shadow);}
  .custom-range-row{display:flex; align-items:center; gap:8px; margin-bottom:18px; background:var(--surface-alt); padding:10px 12px; border-radius:var(--radius); flex-wrap:wrap;}
  .custom-range-row input[type=date]{padding:7px 9px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); font-size:12.5px; background:var(--surface); font-family:inherit; color:var(--text);}
  .custom-range-row span{color:var(--text-muted); font-size:12px;}

  .hist-summary{font-size:12.5px; color:var(--text-secondary); margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--border);}
  .hist-list{display:flex; flex-direction:column;}
  .hist-extra-filters{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px;}
  .hist-search-wrap{flex:1 1 220px; min-width:0;}
  .hist-search-wrap input{
    width:100%; padding:9px 12px; border:1px solid var(--border-strong); border-radius:var(--radius-sm);
    background:var(--surface); font-size:13px;
  }
  #hist-method-filter{
    flex:1 1 200px; min-width:0; padding:9px 12px; border:1px solid var(--border-strong); border-radius:var(--radius-sm);
    background:var(--surface); font-size:13px; color:var(--text);
  }
  .hist-row{display:flex; align-items:center; gap:12px; padding:12px 6px; border-bottom:1px solid var(--border); cursor:pointer; border-radius:var(--radius-sm);}
  .hist-row:last-child{border-bottom:none;}
  .hist-row:hover{background:var(--surface-alt);}
  .hist-id{font-family:var(--font-mono); font-weight:700; font-size:12px; color:var(--text-muted); width:52px; flex:none;}
  .hist-meta{flex:1; min-width:0;}
  .hist-meta .hm-top{font-size:13px; font-weight:600; color:var(--text);}
  .hist-meta .hm-sub{font-size:11.5px; color:var(--text-secondary); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .hm-pay{font-size:11.5px; color:var(--text-secondary); margin-top:3px; line-height:1.6;}
  .pay-summary-item{display:inline-block;}
  .pay-summary-sep{color:var(--text-muted); margin:0 2px;}
  .voucher-toggle{
    background:none; border:none; padding:0; font:inherit; font-size:11.5px; color:var(--accent-dark);
    font-weight:600; text-decoration:underline; text-underline-offset:2px; cursor:pointer;
  }
  .voucher-toggle:hover{color:var(--accent);}
  .voucher-breakdown{
    margin:6px 0 2px; padding:8px 10px; background:var(--surface-alt); border-radius:var(--radius-sm);
    display:flex; flex-direction:column; gap:4px; max-width:260px;
  }
  .voucher-breakdown-row{display:flex; justify-content:space-between; font-size:11.5px; gap:12px;}
  .voucher-breakdown-row span:first-child{font-family:var(--font-mono); color:var(--text);}
  .voucher-breakdown-row span:last-child{font-weight:600; color:var(--text);}
  .hist-badge{flex:none; margin:0 !important;}
  .hist-amt{font-family:var(--font-mono); font-weight:700; font-size:13px; text-align:right; flex:none; width:100px;}
  @media (max-width:640px){
    .hist-badge{display:none;}
    .hist-amt{width:auto;}
  }
  .kpi-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:18px;}
  .kpi-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px;}
  .kpi-card .lbl{font-size:12px; color:var(--text-secondary); margin-bottom:6px;}
  .kpi-card .val{font-size:20px; font-weight:700; font-family:var(--font-mono);}
  .kpi-card .delta{font-size:11.5px; color:var(--success); margin-top:4px;}
  .chart-panel{padding-bottom:6px;}
  .bars{display:flex; align-items:flex-end; gap:10px; height:160px; padding:0 6px 0;}
  .bar-col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:8px; height:100%;}
  .bar{width:100%; max-width:34px; background:var(--accent-soft); border-radius:6px 6px 3px 3px; position:relative;}
  .bar.today{background:var(--accent);}
  .bar-label{font-size:10.5px; color:var(--text-muted);}
  .split-row{display:flex; justify-content:space-between; align-items:center; padding:10px 0; font-size:13px; border-bottom:1px solid var(--border);}
  .split-row:last-child{border-bottom:none;}
  .split-name{display:flex; align-items:center; gap:8px;}
  .split-dot{width:8px;height:8px;border-radius:50%;}

  /* ---------- Toast ---------- */
  .toast{
    position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(12px); z-index:80;
    background:var(--text); color:#fff; padding:11px 18px; border-radius:999px; font-size:13px; font-weight:600;
    box-shadow:var(--shadow); opacity:0; transition:opacity .18s ease, transform .18s ease; pointer-events:none;
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
  @media (max-width:900px){
    .toast{bottom:130px;} /*giữ nguyên: canh trên tabbar-mobile + app-footer ở màn hình chính (~112px, xem .content{padding-bottom:112px})*/
  }
  /*VN10092026 - quangdang - Toast che mất nút hành động khi hiện trong 1 modal đang mở (VD nút
  "Thêm thanh toán tiền mặt" trong #payment-modal) — modal-card canh giữa màn hình (.modal-overlay
  align-items:center) nên ngắn hơn hẳn full-height, bottom:130px phía trên rơi ngay lên nút. Hạ
  toast xuống sát đáy màn hình thật (không còn tabbar-mobile/app-footer nào cần tránh vì modal-overlay
  đã che hết) khi showToast() phát hiện có modal đang mở — xem class .toast-low được gắn/gỡ ở đó.*/
  .toast.toast-low{bottom:20px;}
  @media (max-width:900px){
    .toast.toast-low{bottom:calc(20px + env(safe-area-inset-bottom, 0px));}
  }
  /*END VN10092026*/

  @media (max-width:600px){
    .kpi-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
    .kpi-card:last-child{grid-column:1 / -1;}
  }

  /* ---------- Mẫu in hoá đơn (khổ giấy in nhiệt 80mm) ---------- */
  .print-only{display:none;}
  /* VN07092026 - quangdang - Chuyển toàn bộ style hiển thị/layout của #print-area ra NGOÀI
  @media print (trước đây nằm trong, chỉ áp dụng lúc in) — để sendEReceipt() dùng html2canvas chụp
  đúng y hệt bản in khi tạo PDF gửi email, không cần giả lập @media print riêng. @media print bên
  dưới giờ CHỈ còn phần "ẩn hết trang, chỉ hiện #print-area, đặt vị trí tuyệt đối" đúng nghĩa khi in. */
  /*VN11092026 - quangdang - LỊCH SỬ (rút gọn): có lúc đổi hẳn khổ này 80mm->58mm vì đọc thông số máy
  POS (ZCS Z92S-TC) ghi "built-in 58mm thermal printer", rồi vật lộn rất nhiều vòng (ép html/body/
  #print-area theo mm tuyệt đối, rồi theo % tương đối, rồi co nhỏ theo 48mm...) để chữa hiện tượng in
  ra bị lệch trái + dư khoảng trắng lớn bên phải, tưởng là bug Android/print-service. CUỐI CÙNG dùng 1
  trang in "thước đo" có vạch mm thật (xem printRulerTest() trong app.js) mới lộ ra: đầu in KHÔNG hề bị
  giới hạn hẹp — cả cây thước 0-58mm in đủ, không cắt — mà GIẤY ĐANG LẮP TRONG MÁY LÀ CUỘN 80mm (đã xác
  nhận đo thật), không phải 58mm như thông số máy in tích hợp ghi. Tức là toàn bộ hiện tượng lệch suốt
  from đầu chỉ vì thiết kế 58mm trên khổ giấy 80mm thật — KHÔNG PHẢI bug CSS/Android/print-service nào
  cả. Quay lại đúng khổ 80mm bên dưới (khớp khổ giấy ĐANG DÙNG THẬT), bỏ hết các hack ép width theo 58mm/
  48mm không còn cần thiết. Nếu sau này đổi sang cuộn giấy 58mm thật thì đổi lại theo lịch sử ở git.*/
  #print-area{
    width:80mm; margin:0 auto;
    font-family:Arial, Helvetica, sans-serif; /* VN07092026 - quangdang - đổi từ monospace (kiểu in nhiệt cũ) sang sans-serif khớp mẫu test_receipt.pdf */
    font-size:9mm; color:#000; padding:6mm 4mm; background:#fff; /*VN11092026 - quangdang - đổi theo quy tắc mới, xem ghi chú ở khối .pr-* bên dưới*/
  }
  /*END VN11092026*/
  /* VN07092026 - quangdang - đổi theo mẫu test_receipt.pdf, xem ghi chú ở #print-area trong index.html */
  /*VN11092026 - quangdang - Người dùng chốt quy tắc cỡ chữ ĐƠN GIẢN, thay hết các nấc tăng/giảm riêng lẻ
  trước đó: TOÀN BỘ chữ = 9mm, RIÊNG chữ in đậm (font-weight >=600: tên cửa hàng, Tổng tiền, tiêu đề mục
  "Sản phẩm"/"Thanh toán", tiêu đề cột, "Đã thanh toán"...) = 11mm. Tên sản phẩm và hàng SL/Đơn giá/Thành
  tiền = 9mm (không đậm) theo đúng yêu cầu. Logo "MUJI"/"無印良品" và barcode GIỮ NGUYÊN như hiện tại,
  không đổi theo quy tắc 9/11mm này.*/
  #print-area .pr-logo{text-align:center; margin-bottom:2px;}
  #print-area .pr-logo-word{font-weight:800; font-size:24mm; letter-spacing:.03em;}
  #print-area .pr-logo-kanji{font-weight:700; font-size:16mm; margin-top:-1mm;}
  #print-area .pr-store{text-align:center; font-size:11mm; font-weight:700; margin-bottom:3mm;}
  /*VN12092026 - quangdang - Đổi .pr-meta từ flex/space-between (label trái, value sát mép phải, chiếm
  hết bề ngang) sang block bình thường — khớp mẫu bill thật: <b>Nhãn:</b> value viết liền trên 1 dòng,
  canh trái, KHÔNG kéy value ra sát mép phải. HTML tương ứng đổi sang <b>Nhãn:</b> <span>...</span>,
  xem index.html.*/
  #print-area .pr-meta{font-size:9mm; margin-bottom:2.5mm; line-height:1.3;}
  /*VN12092026 - quangdang - .pr-line/.pr-total đổi justify-content:space-between (label-trái/value-mép-
  phải, chiếm hết 72mm) -> flex-end (nhãn+giá trị dồn cụm bên phải, cách nhau １ khoảng gap) — khớp mẫu
  bill thật, phần tổng cộng/tổng tiền không dàn hết chiều ngang mà lùi về nửa phải.*/
  #print-area .pr-line{display:flex; justify-content:flex-end; gap:3mm; margin-bottom:3mm; font-size:9mm;}
  #print-area .pr-total{display:flex; justify-content:flex-end; gap:3mm; font-weight:700; font-size:11mm; margin:3mm 0;}
  #print-area .pr-section-label{font-weight:700; font-size:11mm; letter-spacing:.03em; margin:4mm 0 2mm;} /* VN07092026 - quangdang - bỏ underline dưới chân "Sản phẩm"/"Thanh toán" theo yêu cầu, vẫn giữ <hr> phía dưới */
  #print-area .pr-thanks{text-align:center; margin-top:3mm; font-weight:600; font-size:11mm;}
  #print-area hr{border:none; height:1.4mm; background:#000; margin:1.5mm 0 3mm; -webkit-print-color-adjust:exact; print-color-adjust:exact;} /*VN12092026 - quangdang - Sau khi đổi border->background (khối đặc), gạch ngang BIẾN MẤT hẳn lúc in — nguyên nhân: trình duyệt/hệ điều hành mặc định KHÔNG in màu nền (background) để tiết kiệm mực, chỉ in border/text. Thêm print-color-adjust:exact (+ tiền tố webkit) để ép in đúng màu nền đã khai báo.*/

  /*VN12092026 - quangdang - Người dùng chốt CỨNG: LUÔN 4 cột Mã SP/SL/Đơn giá/Thành tiền chung 1 hàng,
  cỡ chữ 9mm (khớp quy tắc chung), KHÔNG được tự ý giảm nữa dù có thể vỡ dòng ở mã vạch dài/số tiền lớn
  — chấp nhận đánh đổi đó, không phải lỗi. Tỉ lệ cột vẫn ưu tiên Mã SP/Thành tiền (2 cột hay dài nhất).*/
  #print-area .pr-table-head, #print-area .pr-item-row{
    display:grid; grid-template-columns:1.6fr .5fr 1.1fr 1.3fr; gap:1.5mm;
  }
  #print-area .pr-table-head{font-weight:400; margin-bottom:1mm; font-size:9mm;} /*VN12092026 - quangdang - bỏ đậm, mẫu thật tiêu đề cột không in đậm*/
  #print-area .pr-item-row{font-size:9mm;}
  #print-area .pr-table-head span:not(:first-child), #print-area .pr-item-row span:not(:first-child){text-align:right;}
  #print-area .pr-item-name{font-size:9mm; margin:3mm 0 1mm;} /*VN11092026 - quangdang - bỏ font-weight:600, mẫu gốc in tên sản phẩm không đậm*/

  #print-area .pr-table-head-2{display:flex; justify-content:space-between; font-weight:700; font-size:11mm; margin-bottom:2.5mm;}
  #print-area .pr-method-row{display:flex; justify-content:space-between; font-size:9mm; margin-bottom:2mm;}
  #print-area .pr-method-sub{font-size:9mm; margin:0 0 2.5mm;}

  #print-area .pr-barcode-wrap{text-align:center; margin:5mm 0;} /*VN11092026 - quangdang - giữ nguyên kích thước barcode hiện tại (height 96/module width 3, xem app.js), không đổi theo quy tắc 9/11mm*/
  #print-area .pr-barcode-wrap svg{max-width:100%; height:auto;}

  #print-area .pr-vat-note{font-size:9mm; text-align:center; margin-top:3mm; line-height:1.35;}
  #print-area .pr-star-line{text-align:center; font-size:9mm; margin:3mm 0;}
  #print-area .pr-footer-note{font-size:9mm; text-align:center; line-height:1.35;}

  @media print{
    /*VN11092026 - quangdang - Ảnh in thật (LocalPrinter, "Paper size: 58mm Roll" đã chọn đúng) vẫn
    cho chữ nhỏ + lệch hẳn về bên trái, còn khoảng trắng lớn bên phải — đo bằng ảnh chụp thật (thẳng,
    không nghiêng): nội dung chỉ chiếm ~71% bề ngang trang, luôn lệch trái, gap phải luôn lớn hơn gap
    trái. Tỉ lệ 71% ứng với 58mm / 0.71 ≈ 81mm — TRÙNG với khổ 80mm. Cuối cùng in thử 1 trang "thước
    đo" mm thật (printRulerTest() trong app.js) mới lộ ra sự thật: giấy đang lắp trong máy LÀ CUỘN
    80mm thật (đã đo xác nhận), không phải 58mm — toàn bộ hiện tượng chỉ vì thiết kế nhầm khổ, không
    phải bug Android/print-service nào.
    Theo yêu cầu người dùng: thay vì ép cứng 1 khổ giấy cụ thể (58mm hay 80mm) trong code — khổ giấy
    vật lý có thể đổi theo máy/theo lúc (như đã đổi 58mm->80mm ở đây) — đổi html/body/#print-area LÚC
    IN sang width:100% (tương đối), để nội dung LUÔN lấp đầy đúng khổ giấy mà NGƯỜI DÙNG tự chọn ngay
    trong hộp thoại in (Paper size: 58mm Roll / 80mm Roll / ...) mỗi lần in, không cần sửa code/deploy
    lại khi đổi cuộn giấy. #print-area vẫn giữ width:80mm ở rule gốc (ngoài @media print) vì rule đó
    còn dùng cho sendEReceipt() (html2canvas chụp #print-area lúc KHÔNG in, cần 1 khổ cố định để tạo
    PDF gửi email — không có "khổ giấy người dùng chọn" ở luồng này). Bỏ luôn @page size cố định, chỉ
    giữ margin:0, để không tranh chấp với lựa chọn khổ giấy thật của người dùng trong hộp thoại in.*/
    html, body{ width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; }
    #print-area{ width:100% !important; margin:0 !important; }
    /*END VN11092026*/
    /*VN11092026 - quangdang - Bug thật gặp trên máy in Android (app "LocalPrinter", khổ 80mm Roll):
    mẫu in chỉ chiếm 1 góc nhỏ trên 1 trang rất to. Nguyên nhân: cách ẩn phần còn lại của trang trước
    đây dùng visibility:hidden — chỉ ẩn về HIỂN THỊ, KHÔNG thu nhỏ layout, nên toàn bộ nội dung màn
    hình đang active (VD #screen-receipt, có thể khá cao) vẫn chiếm đủ chỗ trong tài liệu dù vô hình.
    Trình in Android này tính khổ trang theo kích thước THẬT của tài liệu (bỏ qua @page size:80mm),
    nên ra 1 trang to như nguyên màn hình, còn #print-area (đặt position:absolute) chỉ nằm lọt thỏm ở
    góc trên-trái theo đúng kích thước 80mm thật của nó. Fix: đổi sang display:none cho MỌI phần tử
    khác #print-area — display:none loại hẳn khỏi layout (không chiếm chỗ), khiến kích thước tài liệu
    lúc in chỉ còn đúng bằng #print-area (80mm x chiều cao thật của hoá đơn), không phụ thuộc trình in
    có tôn trọng @page hay không. Không dùng position:absolute nữa vì không còn gì chiếm chỗ để cần
    "kéo" #print-area ra khỏi vị trí tự nhiên.*/
    body > *:not(#print-area){ display:none !important; }
    #print-area{ display:block !important; }
    @page{ margin:0; } /*VN11092026 - quangdang - bỏ size cố định (trước 58mm rồi 80mm) — để hộp thoại in / lựa chọn "Paper size" của người dùng tự quyết khổ giấy thật, #print-area width:100% ở trên sẽ tự lấp đầy đúng khổ đó*/
  }

/*-------------------------------------------------------------
VN25092026     claude     Bổ sung style cho: ghi chú đơn/dòng, Hold bill, màn Đổi trả, form VAT (thanh toán +
                          lịch sử), thao tác in lại/đổi trả/VAT ở chi tiết đơn, xem trước & in X Out Report.
                          Dùng lại toàn bộ token màu/bo góc/đổ bóng hiện có (:root), không thêm màu thương hiệu mới.
-------------------------------------------------------------*/
  .req{color:var(--danger);}
  .field textarea{
    width:100%; padding:10px 12px; border:1px solid var(--border-strong); border-radius:var(--radius-sm);
    background:var(--surface); font-size:14px; font-family:inherit; color:inherit; resize:vertical; line-height:1.45;
  }
  .field input:disabled, .field textarea:disabled{background:var(--surface-alt); color:var(--text-muted);}
  .field-hint{font-size:11px; color:var(--text-muted); margin-top:5px;}
  .field-error{font-size:11.5px; color:var(--danger); margin-top:6px; line-height:1.4;}
  .input-error{border-color:var(--danger) !important; box-shadow:0 0 0 2px var(--danger-soft);}
  .form-error{background:var(--danger-soft); color:var(--danger); border-radius:var(--radius-sm); padding:9px 12px; font-size:12.5px; line-height:1.5; margin:4px 0 12px;}
  .form-error ul{margin:4px 0 0; padding-left:18px;}
  .link-btn{background:none; border:none; padding:0; font:inherit; font-size:12px; font-weight:600; color:var(--accent-dark); text-decoration:underline; text-underline-offset:2px; cursor:pointer;}
  .link-btn.danger{color:var(--danger);}
  .mini-spin{display:inline-block; width:13px; height:13px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .7s linear infinite; flex:none;}
  .modal-card.wide{max-width:560px;}
  .modal-card.xl{max-width:980px;}
  .modal-overlay.lvl2{z-index:65;}
  .modal-overlay.lvl3{z-index:70;}
  .modal-sub{font-size:12.5px; color:var(--text-secondary); margin:-10px 0 14px;}
  .modal-foot{display:flex; gap:10px; margin-top:16px;}
  .modal-foot .btn{flex:1;}
  .tag{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:999px; white-space:nowrap;}
  .tag.ok{background:var(--success-soft); color:var(--success);}
  .tag.warn{background:var(--warning-soft); color:var(--warning);}
  .tag.err{background:var(--danger-soft); color:var(--danger);}
  .tag.neutral{background:var(--surface-sunken); color:var(--text-secondary);}
  .tag.accent{background:var(--accent-soft); color:var(--accent-dark);}
  .state-box{text-align:center; padding:28px 16px; color:var(--text-secondary); font-size:13px;}
  .state-box .sb-ico{width:42px; height:42px; border-radius:50%; background:var(--surface-alt); color:var(--text-muted); display:flex; align-items:center; justify-content:center; margin:0 auto 10px;}
  .state-box .sb-ico svg{width:20px; height:20px;}
  .state-box.err .sb-ico{background:var(--danger-soft); color:var(--danger);}
  .state-box.ok .sb-ico{background:var(--success-soft); color:var(--success);}
  .state-box .sb-title{font-weight:700; color:var(--text); margin-bottom:4px;}
  .state-box .sb-sub{font-size:12px; color:var(--text-muted); max-width:380px; margin:0 auto; line-height:1.5;}
  .state-box .btn{margin-top:12px;}
  .skel{height:12px; border-radius:6px; margin:10px 0; background:linear-gradient(90deg,var(--surface-alt),var(--surface-sunken),var(--surface-alt)); background-size:200% 100%; animation:vxb-skel 1.2s ease-in-out infinite;}
  @keyframes vxb-skel{0%{background-position:100% 0}100%{background-position:-100% 0}}
  .info-box{display:flex; gap:9px; align-items:flex-start; background:var(--surface-alt); border-radius:var(--radius); padding:10px 12px; font-size:12.5px; line-height:1.5; color:var(--text-secondary); margin-bottom:14px;}
  .info-box svg{flex:none; margin-top:2px;}
  .info-box.warn{background:var(--warning-soft); color:#6f4d12;}
  .info-box.err{background:var(--danger-soft); color:var(--danger);}
  .info-box.ok{background:var(--success-soft); color:var(--success);}
  .info-box b{color:inherit;}
  .info-box .ib-title{display:block; margin-bottom:2px;}

  /* ---------- Giỏ hàng: công cụ ghi chú / hold ---------- */
  .cart-tools{display:flex; gap:5px; flex-wrap:wrap; margin-bottom:12px;}

  .chip-btn{
    display:inline-flex; align-items:center; gap:4px; padding:5px 8px; border:1px solid var(--border-strong);
    border-radius:999px; background:var(--surface); font-size:11.5px; white-space:nowrap; font-weight:600; color:var(--text-secondary);
  }
  .chip-btn:hover{background:var(--surface-alt); color:var(--text);}
  .chip-btn svg{width:14px; height:14px;}
  .chip-btn:disabled{opacity:.45; cursor:not-allowed; background:var(--surface);}
  .chip-btn .count{background:var(--accent); color:#fff; border-radius:999px; padding:0 6px; font-size:10.5px; line-height:16px; min-width:16px; text-align:center;}
  .order-note-box{display:flex; gap:8px; align-items:flex-start; background:var(--warning-soft); color:#6f4d12; border-radius:var(--radius-sm); padding:8px 10px; font-size:12px; line-height:1.45; margin-bottom:12px;}
  .order-note-box svg{flex:none; width:14px; height:14px; margin-top:1px;}
  .order-note-box .on-text{flex:1; min-width:0; word-break:break-word;}
  .order-note-box .on-text b{display:block; font-size:11px; letter-spacing:.02em;}
  .order-note-box .on-acts{display:flex; gap:10px; flex:none;}
  .line-note{display:flex; align-items:flex-start; gap:6px; margin-top:5px; font-size:11.5px; color:var(--text-secondary); background:var(--surface-alt); border-radius:var(--radius-sm); padding:4px 8px; line-height:1.4;}
  .line-note svg{width:12px; height:12px; flex:none; margin-top:2px;}
  .line-note .ln-text{flex:1; min-width:0; word-break:break-word;}
  .line-note .ln-acts{display:flex; gap:8px; flex:none;}
  .line-note .link-btn{font-size:11px;}
  .line-note-add{background:none; border:none; padding:0; margin-top:4px; text-align:left; font-size:11.5px; font-weight:600; color:var(--accent-dark);}
  .line-note-add:hover{text-decoration:underline;}
  .note-chips{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px;}
  .note-chip{padding:5px 10px; border-radius:999px; border:1px dashed var(--border-strong); background:var(--surface); font-size:11.5px; color:var(--text-secondary);}
  .note-chip:hover{border-style:solid; color:var(--text);}
  .char-count{font-size:11px; color:var(--text-muted); text-align:right; margin-top:4px;}

  /* ---------- Bill đang giữ ---------- */
  .held-toolbar{display:flex; gap:10px; align-items:center; margin-bottom:12px;}
  .held-toolbar .input-wrap-lg{height:42px;}
  .held-summary{font-size:12px; color:var(--text-secondary); margin-bottom:8px;}
  .held-list{max-height:52vh; overflow-y:auto;}
  .held-row{display:flex; gap:12px; align-items:center; border:1px solid var(--border); border-radius:var(--radius); padding:12px; margin-bottom:8px; background:var(--surface);}
  .held-row:hover{border-color:var(--border-strong);}
  .held-main{flex:1; min-width:0;}
  .held-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .held-code{font-weight:700; font-size:13px;}
  .held-label{font-size:12px; font-weight:600; color:var(--accent-dark); background:var(--accent-soft); padding:2px 8px; border-radius:999px;}
  .held-sub{display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--text-secondary); margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .held-sub svg{width:12px; height:12px; flex:none;}
  .held-side{display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:none;}
  .held-amt{font-weight:700; font-size:14px;}
  .held-btns{display:flex; gap:6px;}
  @media (max-width:480px){
    .held-row{flex-direction:column; align-items:stretch;}
    .held-side{flex-direction:row; justify-content:space-between; align-items:center;}
  }

  /* ---------- Thanh toán: xuất VAT ---------- */
  .vat-pay{border:1px solid var(--border); border-radius:var(--radius); padding:12px; margin-bottom:14px;}
  .vat-pay-head{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; font-weight:600;}
  .seg{display:flex; background:var(--surface-alt); border-radius:var(--radius-sm); padding:3px; gap:2px;}
  .seg button{border:none; background:none; padding:6px 14px; border-radius:5px; font-size:12.5px; font-weight:600; color:var(--text-secondary);}
  .seg button.active{background:var(--surface); color:var(--text); box-shadow:var(--shadow);}
  .seg button.active.yes{background:var(--accent); color:#fff;}
  .vat-pay-hint{font-size:11px; color:var(--text-muted); margin-top:6px;}
  .vat-pay-form{margin-top:12px; padding-top:12px; border-top:1px dashed var(--border-strong);}
  .vat-summary{display:flex; gap:9px; align-items:flex-start; margin-top:10px; font-size:12px; background:var(--success-soft); color:var(--success); padding:9px 11px; border-radius:var(--radius-sm); line-height:1.45;}
  .vat-summary svg{flex:none; width:15px; height:15px; margin-top:1px;}
  .vat-summary .vs-body{flex:1; min-width:0; word-break:break-word;}
  .vat-summary .vs-body b{color:var(--text);}
  .vat-summary .vs-note{color:var(--warning); font-weight:600;}
  #pay-tabs-wrap.locked{opacity:.4; pointer-events:none; filter:grayscale(.4);}
  .mst-row{display:flex; gap:8px;}
  .mst-row input{flex:1; min-width:0; font-family:var(--font-mono);}
  .mst-row .btn{flex:none; padding:0 14px;}
  .mst-row .btn svg{width:15px; height:15px;}
  .lookup-status{display:flex; gap:8px; align-items:flex-start; font-size:12px; line-height:1.45; margin-top:8px; padding:8px 10px; border-radius:var(--radius-sm);}
  .lookup-status svg{flex:none; width:14px; height:14px; margin-top:1px;}
  .lookup-status.loading{background:var(--surface-alt); color:var(--text-secondary);}
  .lookup-status.ok{background:var(--success-soft); color:var(--success);}
  .lookup-status.err{background:var(--danger-soft); color:var(--danger);}
  .lookup-status.warn{background:var(--warning-soft); color:#6f4d12;}
  .vat-order-sum{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; background:var(--surface-alt); border-radius:var(--radius); padding:10px 12px; font-size:12.5px; margin-bottom:14px;}
  .vat-order-sum b{font-family:var(--font-mono);}
  .mgr-check{display:flex; gap:8px; align-items:flex-start; font-size:12.5px; margin:-4px 0 14px; line-height:1.45;}
  .mgr-check input{margin-top:2px;}
  .vat-result{text-align:center; padding:8px 0 4px;}
  .vat-result .pay-complete-icon{margin-bottom:10px;}
  .vat-result h3{margin:0 0 4px; font-size:15px;}
  .vat-result-grid{text-align:left; background:var(--surface-alt); border-radius:var(--radius); padding:12px 14px; margin-top:14px; font-size:12.5px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 14px;}
  .vat-result-grid span:nth-child(odd){color:var(--text-secondary);}
  .vat-result-grid span:nth-child(even){font-weight:600; word-break:break-word;}
  .receipt-vat-status{max-width:340px; margin:10px auto 10px; border:1px solid var(--border); background:var(--surface); border-radius:var(--radius); padding:12px 14px; font-size:12px; line-height:1.5;}
  .receipt-vat-status .rvs-head{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px; font-weight:700; font-size:12.5px;}
  .receipt-vat-status .rvs-line{color:var(--text-secondary); word-break:break-word;}
  .receipt-vat-status .rvs-acts{display:flex; gap:12px; margin-top:8px;}

  /* ---------- Lịch sử: thao tác trên chi tiết đơn ---------- */
  .hist-status-row{display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:14px;}
  .hist-actions{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px;}
  .hist-actions .btn{padding:10px 8px; font-size:12.5px; gap:6px;}
  .hist-actions .btn svg{width:15px; height:15px; flex:none;}
  .hist-actions .btn:disabled{opacity:.45; cursor:not-allowed; filter:none;}
  .hist-actions-note{font-size:11.5px; color:var(--text-muted); text-align:center; margin-top:8px;}
  @media (max-width:420px){ .hist-actions{grid-template-columns:minmax(0,1fr);} }
  .r-line-sub{font-size:11px; color:var(--text-muted); margin:-4px 0 7px;}
  .r-line-sub.ret{color:var(--warning); font-weight:600;}
  .r-section{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin:4px 0 8px;}
  .hm-tags{display:inline-flex; gap:4px; margin-left:6px; vertical-align:1px;}
  .hist-amt.neg{color:var(--danger);}

  /* ---------- Đổi trả ---------- */
  .rt-grid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; align-items:start;}
  @media (max-width:900px){ .rt-grid{grid-template-columns:minmax(0,1fr);} }
  .rt-summary{position:sticky; top:0;}
  .rt-left, #rt-inv-section, #rt-noinv-section, #rt-inv-result{display:flex; flex-direction:column; gap:16px; min-width:0;}
  #rt-inv-section.hidden, #rt-noinv-section.hidden{display:none;}
  #rt-inv-result:empty{display:none;}
  .rt-left .panel + .panel{margin-top:0;}
  .rt-search-row{display:flex; gap:10px; min-width:0;}
  .rt-search-row .input-wrap-lg{height:46px;}
  .rt-search-row .btn{height:46px; flex:none;}
  @media (max-width:560px){ .rt-search-row{flex-direction:column;} .rt-search-row .input-wrap-lg{flex:none;} }
  .rt-recent{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:12px; font-size:11.5px; color:var(--text-muted);}
  .rt-recent button{font-family:var(--font-mono); font-size:11.5px; padding:4px 9px; border-radius:999px; border:1px solid var(--border); background:var(--surface-alt); color:var(--text);}
  .rt-recent button:hover{border-color:var(--border-strong);}
  .rt-inv-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px;}
  .rt-inv-no{font-size:20px; font-weight:700;}
  .rt-inv-meta{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px 16px; font-size:12.5px;}
  .rt-inv-meta .k{font-size:11px; color:var(--text-muted);}
  .rt-inv-meta .v{font-weight:600; margin-top:1px; word-break:break-word;}
  .rt-prev{margin-top:12px; padding-top:12px; border-top:1px dashed var(--border-strong); font-size:12px; color:var(--text-secondary);}
  .rt-prev div + div{margin-top:3px;}
  .rt-lines-head{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px;}
  .rt-lines-head .panel-title{margin:0;}
  .rt-lines-tools{display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
  .rt-select{padding:7px 8px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); font-size:12.5px; background:var(--surface); color:var(--text); max-width:210px; min-width:0;}
  .rt-select:disabled{background:var(--surface-alt); color:var(--text-muted);}
  .rt-line{display:flex; gap:12px; padding:12px 4px; border-bottom:1px solid var(--border); align-items:flex-start; flex-wrap:wrap;}
  .rt-line:last-child{border-bottom:none;}
  .rt-line.selected{background:linear-gradient(90deg,var(--accent-soft),transparent 60%); border-radius:var(--radius-sm);}
  .rt-line.disabled .rt-main{opacity:.55;}
  .rt-check{padding-top:2px; flex:none;}
  .rt-check input{width:17px; height:17px; accent-color:var(--accent);}
  .rt-main{flex:1 1 200px; min-width:0;}
  .rt-name{font-size:13px; font-weight:600; line-height:1.35;}
  .rt-sub{font-size:11.5px; color:var(--text-muted); margin-top:2px;}
  .rt-sub s{margin-left:4px;}
  .qty-pills{display:flex; gap:5px; flex-wrap:wrap; margin-top:6px;}
  .qty-pills span{font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:999px; background:var(--surface-alt); color:var(--text-secondary);}
  .qty-pills .pill-avail{background:var(--success-soft); color:var(--success);}
  .qty-pills .pill-none{background:var(--danger-soft); color:var(--danger);}
  .rt-ctrl{display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end;}
  .num-stepper{display:inline-flex; align-items:center; border:1px solid var(--border-strong); border-radius:var(--radius-sm); overflow:hidden; background:var(--surface); flex:none;}
  .num-stepper button{width:30px; height:32px; border:none; background:var(--surface-alt); font-weight:700; font-size:15px; color:var(--text);}
  .num-stepper button:disabled{color:var(--text-muted); cursor:not-allowed; opacity:.6;}
  .num-stepper input{width:42px; height:32px; border:none; text-align:center; font-family:var(--font-mono); font-size:13px; font-weight:600; background:var(--surface);}
  .num-stepper input:disabled{color:var(--text-muted);}
  .rt-line-amt{min-width:92px; text-align:right; font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--danger);}
  .rt-line-amt.plus{color:var(--text);}
  .rt-line-msg{flex-basis:100%; display:flex; gap:6px; align-items:flex-start; font-size:11.5px; line-height:1.4; padding-left:29px;}
  .rt-line-msg svg{width:13px; height:13px; flex:none; margin-top:1px;}
  .rt-line-msg.err{color:var(--danger);}
  .rt-line-msg.info{color:var(--text-muted);}
  .rt-rm{background:none; border:none; color:var(--text-muted); font-size:18px; line-height:1; padding:4px;}
  .rt-rm:hover{color:var(--danger);}
  .rt-form-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px;}
  @media (max-width:560px){ .rt-form-grid{grid-template-columns:minmax(0,1fr);} }
  .approve-row{display:flex; gap:8px;}
  .approve-row input{flex:1; min-width:0;}
  .approve-row .btn{flex:none;}
  .sum-row{display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--text-secondary); margin-bottom:7px;}
  .sum-row .mono{color:var(--text); font-weight:600;}
  .sum-row .neg{color:var(--danger);}
  .sum-big{border-radius:var(--radius); padding:12px 14px; margin:12px 0 14px; background:var(--surface-alt); text-align:center;}
  .sum-big .lbl{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-secondary);}
  .sum-big .amt{font-size:24px; font-weight:700; margin-top:2px;}
  .sum-big.refund{background:var(--danger-soft);} .sum-big.refund .amt, .sum-big.refund .lbl{color:var(--danger);}
  .sum-big.collect{background:var(--accent-soft);} .sum-big.collect .amt, .sum-big.collect .lbl{color:var(--accent-dark);}
  .sum-big.zero{background:var(--success-soft);} .sum-big.zero .amt, .sum-big.zero .lbl{color:var(--success);}
  .sum-big .sub{font-size:11px; margin-top:3px; color:var(--text-secondary);}
  .rt-cond{display:flex; gap:8px; align-items:flex-start; font-size:12.5px; line-height:1.45; margin:4px 0 12px; padding:10px; border-radius:var(--radius-sm); background:var(--surface-alt);}
  .rt-cond input{margin-top:2px; accent-color:var(--accent); width:16px; height:16px; flex:none;}
  .check-list{list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:5px;}
  .check-list li{display:flex; gap:7px; align-items:flex-start; font-size:12px; color:var(--text-muted); line-height:1.4;}
  .check-list li .ck{width:15px; height:15px; border-radius:50%; border:1.5px solid var(--border-strong); flex:none; margin-top:1px; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800;}
  .check-list li.ok{color:var(--text);}
  .check-list li.ok .ck{background:var(--success); border-color:var(--success); color:#fff;}
  .rt-summary .btn-block + .btn-block{margin-top:8px;}
  .rt-done{max-width:560px; margin:0 auto; text-align:center;}
  .rt-done h2{font-size:18px; margin:0 0 4px;}
  .rt-done .sub{font-size:12.5px; color:var(--text-secondary); margin-bottom:18px;}
  .rt-done .receipt-ticket{text-align:left;}
  .rt-done .receipt-actions{max-width:420px;}

  /* ---------- X Out Report (xem trước + bản in, dùng chung class .xr-*) ---------- */
  .xr-toolbar{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px;}
  .xr-toolbar .xr-period{font-size:12.5px; color:var(--text-secondary);}
  .xr-toolbar .xr-period b{color:var(--text);}
  .xr-toolbar .btns{display:flex; gap:8px;}
  .xr-toolbar .btn svg{width:15px; height:15px;}
  .xr-backdrop{background:var(--surface-sunken); border-radius:var(--radius); padding:18px; overflow:auto; max-height:68vh;}
  .xr-page{background:#fff; color:#000; width:794px; margin:0 auto; padding:34px 40px 40px; box-shadow:0 2px 10px rgba(0,0,0,.12);
    font-family:Arial, Helvetica, sans-serif; font-size:11px; line-height:1.55;}
  .xr-page *{box-sizing:border-box;}
  .xr-top{display:grid; grid-template-columns:1fr auto auto auto 1fr; gap:0 38px; align-items:center; font-size:11px; margin-bottom:6px;}
  .xr-top .xr-pg{text-align:right;}
  .xr-kv{display:grid; grid-template-columns:1fr 1fr; width:62%; margin:0 auto 14px; row-gap:3px;}
  .xr-kv .k{text-align:right; font-weight:700; padding-right:34px;}
  .xr-kv .v{text-align:center; padding-right:60px;}
  .xr-kv .gap{grid-column:1 / -1; height:12px;}
  .xr-sec{font-size:13px; font-weight:700; border-bottom:1.5px solid #000; padding-bottom:1px; margin:10px 0 4px; break-after:avoid;}
  .xr-sec.half{width:40%;}
  .xr-sec.plain{border-bottom:none;}
  .xr-table{width:100%; border-collapse:collapse; break-inside:avoid;}
  .xr-table th{font-weight:700; text-align:center; padding:1px 0;}
  .xr-table td{padding:1px 0;}
  .xr-table td.num, .xr-table th.num{text-align:right; padding-right:24px;}
  .xr-table td.lbl{font-weight:700;}
  .xr-table .c1{width:28%;} .xr-table .c2{width:24%;} .xr-table .c3{width:24%;} .xr-table .c4{width:24%;}
  .xr-table.nv td.lbl{text-align:right; padding-right:0; width:9%;}
  .xr-row{display:flex; justify-content:space-between; padding:1px 24px 1px 0; break-inside:avoid;}
  .xr-row.b{font-weight:700;}
  .xr-row.ind{padding-left:4px;}
  .xr-tender{break-inside:avoid;}
  .xr-tender .tn{font-weight:700; padding-left:30px;}
  .xr-tender .xr-row{padding-left:0;}
  .xr-tender .xr-row span:first-child{width:180px; text-align:right;}
  .xr-foot{margin-top:18px; font-size:9.5px; color:#555; text-align:right;}
  @media (max-width:860px){ .xr-backdrop{padding:10px;} }
  #report-print-area{display:none;}

  @media print{
    /* In báo cáo X Out: body.print-report chỉ hiện #report-print-area (A4), ẩn mẫu hoá đơn 80mm */
    body.print-report > *:not(#report-print-area){display:none !important;}
    body.print-report #print-area{display:none !important;}
    body.print-report #report-print-area{display:block !important; page:xreport;}
    html:has(body.print-report), body.print-report{background:#fff !important;}
    body.print-report #report-print-area .xr-page{width:auto; margin:0; padding:0; box-shadow:none; zoom:1 !important;}
    body.print-report #report-print-area .xr-pg{visibility:hidden;}
    #print-area .pr-doc-title{font-size:11mm; font-weight:700; text-align:center; margin:1mm 0 3mm;}
  }
  @page xreport{ size:A4 portrait; margin:14mm 12mm 14mm;
    @top-right{ content:counter(page) " of " counter(pages); font-family:Arial, Helvetica, sans-serif; font-size:8.5pt; }
  }
  #print-area .pr-doc-title{font-size:11mm; font-weight:700; text-align:center; margin:1mm 0 3mm;}
  #print-area .pr-reprint{text-align:center; font-size:9mm; margin:0 0 3mm;}
  #print-area .pr-item-note{font-size:9mm; font-style:italic; margin:0 0 2mm;}
  #print-area .pr-subhead{font-weight:700; font-size:9mm; margin:3mm 0 1mm;}
  #print-area .pr-note-block{font-size:9mm; margin:2mm 0 3mm; line-height:1.3;}

/*-------------------------------------------------------------
VN25092026 (2)  claude  Nút icon 44px + nhãn, Hoàn tác, ghi chú nhập tại chỗ, giỏ hàng 2 tầng cho cảm ứng,
                        gộp Bán hàng / Đổi trả (công tắc chế độ, dải trạng thái, giỏ đổi trả TRẢ/MỚI).
-------------------------------------------------------------*/
  .icon-act{
    width:44px; height:44px; flex:none; display:inline-flex; align-items:center; justify-content:center;
    border:none; border-radius:var(--radius); background:transparent; color:var(--text-secondary);
    -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; touch-action:manipulation;
  }
  .icon-act svg{width:19px; height:19px;}
  .icon-act:hover{background:var(--surface-alt); color:var(--text);}
  .icon-act:active{background:var(--surface-sunken);}
  .icon-act.danger:hover, .icon-act.danger:active{background:var(--danger-soft); color:var(--danger);}
  .vxb-tip{
    position:fixed; z-index:300; pointer-events:none; opacity:0; transform:translateY(4px); transition:opacity .12s ease, transform .12s ease;
    background:var(--text); color:#fff; font-size:12px; font-weight:600; padding:6px 10px; border-radius:var(--radius-sm); white-space:nowrap; box-shadow:var(--shadow);
  }
  .vxb-tip.show{opacity:1; transform:translateY(0);}
  .undo-toast{
    position:fixed; left:50%; bottom:72px; z-index:85; transform:translateX(-50%) translateY(12px); opacity:0; pointer-events:none;
    display:flex; align-items:center; gap:6px; max-width:calc(100vw - 32px); background:var(--text); color:#fff; border-radius:var(--radius);
    padding:6px 6px 6px 16px; font-size:13px; font-weight:600; box-shadow:var(--shadow); transition:opacity .18s ease, transform .18s ease;
  }
  .undo-toast.show{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto;}
  .undo-toast #undo-toast-msg{flex:1; min-width:0;}
  .undo-toast #undo-toast-btn{min-height:40px; padding:0 14px; border:none; border-radius:var(--radius-sm); background:rgba(255,255,255,.14); color:#FFD9A8; font-weight:700; white-space:nowrap;}
  .undo-toast .ut-close{width:40px; height:40px; border:none; background:none; color:rgba(255,255,255,.7); font-size:18px;}
  @media (max-width:900px){ .undo-toast{bottom:150px;} }

  /* Giỏ hàng: dòng 2 tầng */
  .cart-list{gap:0;}
  .cart-item{
    display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"main total" "ctrl ctrl";
    gap:4px 10px; padding:10px 8px; border-radius:var(--radius); border:1.5px solid transparent; border-bottom-color:var(--border);
  }
  .cart-item .ci-main{grid-area:main; min-width:0;}
  .cart-item .cart-item-total{grid-area:total; width:auto; font-size:13px; align-self:start; padding-top:1px;}
  .cart-item .ci-ctrl{grid-area:ctrl; display:flex; align-items:center; justify-content:space-between; gap:8px;}
  .cart-item > .line-note, .cart-item > .note-editor{grid-column:1 / -1;}
  .cart-item.editing{border-color:var(--accent); background:linear-gradient(180deg,var(--accent-soft),var(--surface) 70%); box-shadow:0 0 0 3px rgba(166,64,47,.10);}
  .ci-acts{display:flex; gap:2px;}
  .qty-stepper{padding:3px;}
  .qty-stepper button{width:36px; height:36px; font-size:16px;}
  .qty-val{width:26px; font-size:13px;}
  .line-note{align-items:center; padding:2px 2px 2px 10px; margin-top:2px;}
  .line-note .ln-text{cursor:pointer; padding:6px 0;}
  .line-note .icon-act{width:40px; height:40px;}
  .line-note.draft, .order-note-box.draft{border:1.5px dashed var(--warning); background:var(--warning-soft); color:#6f4d12; cursor:pointer;}
  .order-note-box{align-items:center; padding:4px 4px 4px 10px;}
  .order-note-box .on-text{cursor:pointer; padding:5px 0;}
  .order-note-box .on-acts{gap:0;}
  .chip-btn{min-height:40px; padding:6px 11px;}
  .chip-btn.active{border-color:var(--accent); color:var(--accent-dark); background:var(--accent-soft);}
  #order-note-area:empty{display:none;}
  #order-note-area{margin-bottom:12px;}
  #order-note-area .order-note-box{margin-bottom:0;}

  /* Ô nhập ghi chú tại chỗ */
  .note-editor{border:1.5px solid var(--accent); border-radius:var(--radius); background:var(--surface); padding:10px; margin-top:6px;}
  #order-note-area .note-editor{margin-top:0; box-shadow:0 0 0 3px rgba(166,64,47,.10);}
  .ne-head{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-secondary); margin-bottom:8px; line-height:1.35;}
  .ne-head svg{flex:none; width:15px; height:15px; color:var(--accent);}
  .ne-head b{color:var(--text);}
  .note-editor .note-chips{margin-bottom:8px;}
  .note-editor .note-chip{min-height:36px; padding:6px 12px;}
  .ne-input{width:100%; min-height:64px; resize:vertical; border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:10px 12px; font:inherit; font-size:15px; line-height:1.45; background:var(--surface); color:var(--text);}
  .ne-input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
  .ne-foot{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; flex-wrap:wrap;}
  .ne-count{font-size:11px; color:var(--text-muted); flex:1 1 140px;}
  .ne-btns{display:flex; align-items:center; gap:6px; margin-left:auto;}
  .ne-btns .btn{min-height:44px; padding:0 16px;}

  /* Công tắc chế độ Bán hàng / Đổi trả */
  .mode-switch{display:flex; gap:6px; padding:5px; margin-bottom:16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);}
  .mode-switch button{
    flex:1; min-height:52px; display:flex; align-items:center; justify-content:center; gap:9px; border:none; border-radius:13px;
    background:transparent; color:var(--text-secondary); font-size:15px; font-weight:700; letter-spacing:.01em;
  }
  .mode-switch button svg{width:20px; height:20px;}
  .mode-switch button:hover{background:var(--surface-alt);}
  #mode-sale.active{background:var(--accent); color:#fff; box-shadow:var(--shadow);}
  #mode-return.active{background:var(--warning); color:#fff; box-shadow:var(--shadow);}
  .mode-count{min-width:22px; height:22px; padding:0 7px; border-radius:999px; background:var(--surface-sunken); color:var(--text); font-size:12px; line-height:22px; text-align:center;}
  .mode-switch button.active .mode-count{background:rgba(255,255,255,.25); color:#fff;}
  .mode-pill{display:inline-flex; align-items:center; gap:5px; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.04em; background:var(--warning); color:#fff;}
  .mode-pill svg{width:14px; height:14px;}
  .rt-strip{display:none;}
  body.mode-return .rt-strip{display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; margin-bottom:12px; font-size:12.5px;}
  body.mode-return .search-hero{border:2px solid var(--warning); background:linear-gradient(180deg,var(--warning-soft),var(--surface) 55%);}
  body.mode-return .scan-btn-lg{background:var(--warning);}
  body.mode-return .input-wrap-lg.search-wrap{border-color:var(--warning);}
  .rs-badge{display:inline-flex; align-items:center; gap:5px; font-weight:800; letter-spacing:.05em; color:var(--warning);}
  .rs-badge svg{width:15px; height:15px;}
  .rs-src{font-weight:600; color:var(--text);}
  .rs-target{display:inline-flex; align-items:center; gap:6px; margin-left:auto; color:var(--text-secondary); font-weight:600;}
  .rs-target button{min-height:40px; padding:0 14px; border-radius:999px; border:1.5px solid var(--border-strong); background:var(--surface); font-size:12.5px; font-weight:700; color:var(--text-secondary);}
  .rs-target button.active{border-color:var(--danger); background:var(--danger-soft); color:var(--danger);}
  .rs-target button.active.new{border-color:var(--success); background:var(--success-soft); color:var(--success);}
  @media (max-width:560px){ .rs-target{margin-left:0; width:100%;} .rs-target button{flex:1;} }
  .search-hero.scan-error{animation:vxb-shake .35s ease; border-color:var(--danger) !important;}
  @keyframes vxb-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
  .result-row.disabled{opacity:.5;}

  /* Cột trái chế độ Đổi trả */
  #rt-left-main{display:flex; flex-direction:column; gap:16px;}
  #rt-left-main .panel + .panel, #rt-left .panel + .panel{margin-top:0;}
  #rt-left{display:flex; flex-direction:column; gap:16px;}
  #rt-left.hidden{display:none;}
  .rt-start{text-align:center; padding:26px 18px;}
  .rt-start-ico{width:52px; height:52px; border-radius:50%; background:var(--warning-soft); color:var(--warning); display:flex; align-items:center; justify-content:center; margin:0 auto 12px;}
  .rt-start-ico svg{width:24px; height:24px;}
  .rt-start .sb-title{font-weight:700; font-size:14px;}
  .rt-start .sb-sub{font-size:12.5px; color:var(--text-muted); margin:4px auto 0; max-width:420px; line-height:1.5;}
  .rt-start .rt-recent{justify-content:center;}
  .rt-start .rt-recent button{min-height:40px; padding:0 14px;}
  .rt-start > .btn{margin-top:16px; min-height:44px;}
  .rt-inv-head-r{display:flex; align-items:center; gap:4px;}
  .policy-chips{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12px; margin:-2px 0 12px;}
  .policy-chips .k{color:var(--text-secondary); font-weight:600; margin-right:2px;}
  .scan-hint{display:flex; gap:8px; align-items:center; font-size:12.5px; color:var(--text-secondary); background:var(--surface-alt); border-radius:var(--radius-sm); padding:10px 12px;}
  .scan-hint svg{flex:none;}
  .sb-btns{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:12px;}
  .sb-btns .btn{margin-top:0;}
  .rt-lines-tools .btn{min-height:40px;}
  .num-stepper button{width:40px; height:40px;}
  .num-stepper input{height:40px; width:46px;}
  .rt-select{min-height:40px;}
  .rt-line.flash, .rtc-line.flash{animation:vxb-flash 1.1s ease;}
  @keyframes vxb-flash{0%{box-shadow:0 0 0 3px var(--warning); background:var(--warning-soft);}100%{box-shadow:0 0 0 0 transparent;}}

  /* Giỏ đổi trả: nhóm TRẢ / MỚI */
  .rt-cart .cart-header{gap:8px;}
  .rtc-sec{display:flex; justify-content:space-between; align-items:center; font-size:11px; font-weight:800; letter-spacing:.06em; padding:7px 10px; border-radius:var(--radius-sm); margin:4px 0 6px;}
  .rtc-sec b{font-size:12px; letter-spacing:0;}
  .rtc-sec.ret{background:var(--danger-soft); color:var(--danger);}
  .rtc-sec.new{background:var(--success-soft); color:var(--success); margin-top:12px;}
  .rtc-list{display:flex; flex-direction:column;}
  .rtc-empty{font-size:12px; color:var(--text-muted); padding:6px 4px 8px; line-height:1.45;}
  .rtc-line{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"main amt" "ctrl ctrl"; gap:4px 10px; padding:9px 8px 9px 11px; border-bottom:1px solid var(--border); border-left:3px solid var(--danger); border-radius:4px;}
  .rtc-line.new{border-left-color:var(--success);}
  .rtc-main{grid-area:main; min-width:0;}
  .rtc-name{font-size:12.5px; font-weight:600; line-height:1.35; margin-top:3px;}
  .rtc-sub{font-size:11px; color:var(--text-muted); margin-top:1px;}
  .rtc-reason{font-size:11px; color:var(--text-secondary); margin-top:2px;}
  .rtc-reason.missing{color:var(--danger); font-weight:600;}
  .rtc-select{margin-top:6px; width:100%; max-width:none;}
  .rtc-amt{grid-area:amt; font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--danger); align-self:start;}
  .rtc-amt.plus{color:var(--success);}
  .rtc-ctrl{grid-area:ctrl; display:flex; justify-content:space-between; align-items:center;}
  .line-tag{display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.06em; padding:2px 6px; border-radius:4px; vertical-align:1px;}
  .line-tag.ret{background:var(--danger); color:#fff;}
  .line-tag.new{background:var(--success); color:#fff;}
  .rtc-cta{min-height:52px; font-size:15px;}
  .rt-cart .sum-big{margin:14px 0 12px;}
  .pay-total.refund{background:var(--danger-soft);}
  .pay-total.refund .lbl, .pay-total.refund .amt{color:var(--danger);}
  .quick-cash{display:flex; flex-wrap:wrap; gap:6px; margin:-4px 0 10px;}
  .quick-cash button{min-height:40px; padding:0 12px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--surface); font-family:var(--font-mono); font-size:12.5px; font-weight:600;}
  .rt-pay-wait{display:flex; gap:12px; align-items:center; padding:16px; border-radius:var(--radius); background:var(--surface-alt); font-size:13px;}
  .rt-pay-wait .sub{font-size:11.5px; color:var(--text-muted); margin-top:2px;}
  #rt-pay-modal .btn-block{min-height:48px;}
  #rt-done{margin-top:4px;}

  #rt-left{margin-top:16px;}
  #promo-panel{margin-top:16px;}
  .cart-panel .cart-list{max-height:min(56vh, 520px);}
  .cart-tools{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px;}
  .cart-tools .chip-btn{justify-content:center; padding:6px 6px; min-width:0;}
  .cart-tools .chip-btn span:not(.count){overflow:hidden; text-overflow:ellipsis;}
  .mode-pill{white-space:nowrap;}
  @media (max-width:480px){ .mode-pill{padding:5px 8px; font-size:11px;} .mode-pill span{display:none;} .mode-pill svg{width:16px; height:16px;} }
  #held-btn svg{display:none;}
  body.mode-return .cart-sheet-trigger{background:var(--warning);}

/*-------------------------------------------------------------
VN25092026 (3)  claude  Ghi chú 1 kiểu "chạm để viết, rời đi là lưu" · icon ✓ ✕ 🗑 · phí trên bill · thanh toán đổi trả 5 hình thức
-------------------------------------------------------------*/
  .cart-tools{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cart-item{grid-template-areas:"main total" "note note" "ctrl ctrl";}
  .cart-item > .ln-caption, .cart-item > .note-editor{grid-area:note; grid-column:1 / -1;}
  .ln-caption{
    display:flex; align-items:center; gap:6px; width:100%; min-height:32px; padding:4px 8px; margin:2px 0 0;
    border:none; border-radius:var(--radius-sm); background:var(--surface-alt); color:var(--text-secondary);
    font-size:12px; text-align:left; cursor:pointer;
  }
  .ln-caption svg{flex:none; width:14px; height:14px; color:var(--accent);}
  .ln-caption span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .ln-caption:hover{background:var(--surface-sunken); color:var(--text);}
  .ln-caption.order{min-height:40px; margin:0; background:var(--warning-soft); color:#6f4d12;}
  .ln-caption.order b{font-weight:700;}
  .ln-caption.order.empty{background:transparent; border:1.5px dashed var(--border-strong); color:var(--text-muted);}
  .ln-caption.order.empty svg{color:var(--text-muted);}
  .icon-act.has-note{color:var(--accent); position:relative;}
  .icon-act.has-note::after{content:''; position:absolute; top:9px; right:9px; width:7px; height:7px; border-radius:50%; background:var(--accent); border:1.5px solid var(--surface);}
  .icon-act.on{background:var(--accent-soft); color:var(--accent-dark);}
  .icon-act.primary{background:var(--accent); color:#fff;}
  .icon-act.primary:hover{background:var(--accent-dark); color:#fff;}
  .icon-act.sm{width:36px; height:36px;}
  .icon-act.sm svg{width:16px; height:16px;}
  .note-editor{padding:6px; margin-top:2px; box-shadow:0 0 0 3px rgba(166,64,47,.10);}
  #order-note-area .note-editor{box-shadow:0 0 0 3px rgba(166,64,47,.10);}
  .ne-row{display:flex; align-items:center; gap:4px;}
  .ne-ico{flex:none; width:28px; display:flex; justify-content:center; color:var(--accent);}
  .ne-ico svg{width:16px; height:16px;}
  .ne-input{flex:1; min-width:0; min-height:44px; max-height:92px; resize:none; overflow-y:auto; padding:11px 10px; font-size:15px; line-height:1.4; border-radius:var(--radius-sm);}
  .ne-acts{display:flex; gap:2px; flex:none;}
  .ne-chips{display:flex; gap:6px; overflow-x:auto; padding:6px 2px 2px 32px; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
  .ne-chips::-webkit-scrollbar{display:none;}
  .ne-chips .note-chip{flex:none; min-height:34px; white-space:nowrap;}
  .ne-count{font-size:11px; color:var(--text-muted); text-align:right; padding:4px 4px 0;}
  .ne-count.hidden, .ne-chips.hidden{display:none;}
  /* Phí trên bill */
  .fee-area{margin:2px 0 4px;}
  .fee-row{align-items:center; color:var(--text);}
  .fee-row .fee-amt{display:flex; align-items:center; gap:0; font-weight:600;}
  .fee-row .fee-amt .icon-act:first-child{margin-left:6px;}
  .fee-add{display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 12px 0 8px; margin:0 0 4px -8px; border:none; background:none; border-radius:var(--radius-sm); color:var(--accent-dark); font-size:13px; font-weight:700;}
  .fee-add svg{width:16px; height:16px;}
  .fee-add:hover{background:var(--accent-soft);}
  .fee-editor{border:1.5px solid var(--accent); border-radius:var(--radius); padding:8px; margin:4px 0 8px; box-shadow:0 0 0 3px rgba(166,64,47,.10); background:var(--surface);}
  .fee-types{display:flex; gap:6px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none;}
  .fee-types .note-chip{flex:none; min-height:36px; white-space:nowrap;}
  .note-chip.active{border-style:solid; border-color:var(--accent); background:var(--accent); color:#fff;}
  .fee-input{flex:1; min-width:0;}
  .fee-input input{width:100%; min-height:44px; padding:10px 34px 10px 12px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); font-size:15px;}
  .fee-editor .field-error{margin:6px 2px 0;}
  /* Thanh toán đổi trả */
  .paid-line.refund{background:var(--danger-soft); color:var(--danger);}
  .paid-line .icon-act{width:36px; height:36px; color:inherit; opacity:.75;}
  .paid-line .icon-act svg{width:15px; height:15px;}
  .pay-tab.blocked{color:var(--text-muted); opacity:.6;}
  #rt-pay-modal .pay-disabled-note{margin-bottom:0;}
  .fee-input input::placeholder{font-family:var(--font-ui); font-size:14px;}
  .note-editor{padding:8px;}
  .note-editor .ne-input{display:block; width:100%;}
  .ne-bar{display:flex; align-items:center; gap:6px; margin-top:6px;}
  .ne-bar .ne-chips{flex:1; min-width:0; padding:0;}
  .ne-bar .ne-chips.hidden{display:block; visibility:hidden;}
  .ne-bar .ne-acts{margin-left:auto;}
  .ne-count{padding-top:2px;}

/*-------------------------------------------------------------
VN25092026 (4)  claude  Giỏ dùng chung Bán hàng / Đổi trả · thu nhỏ icon thao tác
  Icon hiển thị 32px (svg 16px) nhưng vùng chạm vẫn 40px nhờ ::before tràn 4px mỗi phía (khoảng cách giữa icon 6px
  nên vùng chạm không chồng lên nhau). Nút SL 30px, công tắc chế độ 44px, chip 30–36px.
-------------------------------------------------------------*/
  .icon-act{width:32px; height:32px; border-radius:8px; position:relative;}
  .icon-act::before{content:''; position:absolute; inset:-4px;}
  .icon-act svg{width:16px; height:16px;}
  .icon-act.sm{width:28px; height:28px;}
  .icon-act.sm::before{inset:-4px;}
  .icon-act.sm svg{width:14px; height:14px;}
  .icon-act.has-note::after{top:4px; right:4px; width:6px; height:6px; border-width:1px;}
  .ci-acts, .ne-acts{gap:6px;}
  .qty-stepper{padding:2px;}
  .qty-stepper button{width:30px; height:30px; font-size:15px;}
  .qty-val{width:24px;}
  .line-note .icon-act{width:32px; height:32px;}
  .paid-line .icon-act{width:30px; height:30px;}
  .paid-line .icon-act svg{width:14px; height:14px;}
  .mode-switch{padding:4px; margin-bottom:14px;}
  .mode-switch button{min-height:44px; font-size:14px; gap:8px; border-radius:11px;}
  .mode-switch button svg{width:18px; height:18px;}
  .mode-count{min-width:20px; height:20px; line-height:20px; font-size:11.5px; padding:0 6px;}
  .mode-count.ret{background:var(--warning-soft); color:#6f4d12;}
  .chip-btn{min-height:36px; padding:5px 10px;}
  .note-editor .note-chip, .ne-chips .note-chip, .fee-types .note-chip{min-height:30px; padding:4px 10px;}
  .ne-input{min-height:38px; padding:8px 10px; font-size:14px;}
  .fee-input input{min-height:38px; padding:8px 30px 8px 10px; font-size:14px;}
  .fee-add{min-height:34px; font-size:12.5px;}
  .fee-add svg{width:14px; height:14px;}
  .fee-row .fee-amt{gap:6px;}
  .fee-row .fee-amt .icon-act:first-child{margin-left:8px;}
  .ln-caption.order{min-height:36px;}
  .num-stepper button{width:32px; height:34px;}
  .num-stepper input{height:34px; width:42px;}
  .rt-select{min-height:34px;}
  .undo-toast #undo-toast-btn{min-height:36px;}
  .undo-toast .ut-close{width:36px; height:36px;}

  /* Giỏ dùng chung: nhóm HÀNG MUA / HÀNG TRẢ */
  #cart-sec-sale{margin:0 0 4px;}
  #cart-sec-sale .sec-hint{font-size:11px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--text-secondary);}
  #cart-sec-sale .sec-hint b{font-size:11px;}
  #rt-cart-sec:empty{display:none;}
  #rt-cart-sec{margin:6px 0 10px;}
  #rt-cart-sec .rtc-sec > span{display:flex; align-items:center; gap:6px;}
  #rt-cart-sec .rtc-sec .tag{font-size:10px; letter-spacing:0; padding:1px 6px;}
  #rt-cart-sec .rtc-sec .icon-act{color:var(--danger); margin:-4px -4px -4px 2px;}
  .cart-item.ret-item{grid-template-areas:"main total" "reason reason" "note note" "ctrl ctrl"; border-left:3px solid var(--danger); border-radius:6px; padding-left:9px; background:linear-gradient(90deg, rgba(180,50,40,.035), transparent 60%);}
  .cart-item.ret-item.editing{background:linear-gradient(180deg,var(--accent-soft),var(--surface) 70%);}
  .cart-item.ret-item .line-tag{margin-right:2px;}
  .cart-item .ret-amt{color:var(--danger);}
  .ri-reason{grid-area:reason; width:100%; max-width:none; font-size:12.5px;}
  .ri-reason.missing{color:var(--text-muted); border-style:dashed;}
  .ri-reason.input-error{border-color:var(--danger); border-style:solid;}
  .cart-item.flash{animation:vxb-flash 1.1s ease;}
  .totals-row.ret-total{color:var(--danger); font-weight:600;}
  .totals-row.grand.refund, .totals-row.grand.refund span{color:var(--danger);}
  .totals-row.grand.zero, .totals-row.grand.zero span{color:var(--success);}
  .checkout-btn.refund{background:var(--danger); border-color:var(--danger);}
  #rt-cart-foot:empty{display:none;}
  #rt-cart-foot{margin-top:10px;}
  #rt-cart-foot .rt-cond{margin-bottom:8px;}
  #rt-cart-foot .check-list{margin-bottom:4px;}
  #rt-cart-foot .form-error{margin:8px 0 0;}

/*-------------------------------------------------------------
VN25092026 (5)  claude  Bán hàng / Đổi trả dùng chung popup Thanh toán và màn Hoá đơn
-------------------------------------------------------------*/
  #payment-modal.ctx-refund .pay-total{background:var(--danger-soft);}
  #payment-modal.ctx-refund .pay-total .lbl, #payment-modal.ctx-refund .pay-total .amt{color:var(--danger);}
  #payment-modal .pay-tab.blocked{color:var(--text-muted); opacity:.6;}
  .r-doctype{text-align:center; font-size:11px; font-weight:800; letter-spacing:.05em; color:var(--warning); background:var(--warning-soft); border-radius:6px; padding:5px 8px; margin:6px 0 2px;}
  .r-line.ret span:last-child{color:var(--danger);}
  .r-ret-row span:last-child{color:var(--danger);}
  #screen-receipt.ctx-return .r-badge.paid{background:var(--warning-soft); color:#6f4d12;}

/*-------------------------------------------------------------
VN25092026 (6)  claude  1 phiếu đổi trả từ nhiều hoá đơn · bố cục điện thoại (thanh giỏ không che nội dung, footer cuối trang)
-------------------------------------------------------------*/
  .src-bar{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0 0 12px;}
  .src-bar .k{font-size:12px; font-weight:700; color:var(--text-secondary); margin-right:2px;}
  .src-chip{display:inline-flex; align-items:center; gap:5px; min-height:34px; padding:4px 10px; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface); font-size:12.5px; font-weight:700; color:var(--text);}
  .src-chip svg{width:14px; height:14px; color:var(--text-muted);}
  .src-chip b{min-width:18px; height:18px; line-height:18px; padding:0 5px; border-radius:999px; background:var(--warning); color:#fff; font-size:11px; text-align:center;}
  .src-chip.active{border-color:var(--warning); background:var(--warning-soft); color:#6f4d12;}
  .src-chip.active svg{color:var(--warning);}
  .src-chip.add{border-style:dashed; color:var(--text-secondary); font-weight:600;}
  .rtc-src{display:flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--text-secondary); margin:8px 2px 2px;}
  .rtc-src svg{width:13px; height:13px;}
  .r-src{font-size:10.5px; color:var(--text-muted); font-weight:400;}
  .r-line-sub.vat-adj{display:flex; gap:5px; align-items:flex-start; color:var(--success); margin-top:6px;}
  .r-line-sub.vat-adj svg{width:12px; height:12px; flex:none; margin-top:1px;}
  /* Footer "Powered by vantixb" nằm cuối nội dung (không cố định đè lên menu / nút) */
  .content > .app-footer{position:static; height:auto; padding:18px 0 4px; margin-top:8px; z-index:auto;}
  .content{padding-bottom:22px;}
  @media (max-width:900px){
    .app-footer{bottom:auto;}
    /* thanh giỏ ngay trên menu dưới; nội dung chừa đủ chỗ để cuộn hết, không bị thanh giỏ / menu che */
    .cart-sheet-trigger{bottom:calc(68px + env(safe-area-inset-bottom, 0px));}
    .content{padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px));}
    body:has(#screen-checkout.active) .content{padding-bottom:calc(132px + env(safe-area-inset-bottom, 0px));}
    .toast{bottom:136px;}
  }