:root{
  --navy:#102a56; --navy-2:#1a4688; --navy-soft:#eef4ff; --bg:#f3f6fb; --card:#ffffff; --line:#e6ebf2;
  --text:#172033; --muted:#667085; --shadow:0 16px 40px rgba(15,23,42,.07); --radius:24px; --radius-sm:16px;
  --green:#0f8b56; --green-bg:#e9f8f0; --amber:#a65f00; --amber-bg:#fff3e5; --red:#c23d2b; --red-bg:#fff0ee; --purple:#6f4ef6; --purple-bg:#f0ebff;
}
*{box-sizing:border-box} html,body{margin:0;min-height:100%;font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;background:linear-gradient(180deg,#f9fbff 0,#f3f6fb 160px,#f3f6fb 100%);color:var(--text)}
button,input,select,textarea{font:inherit} button{cursor:pointer} img{max-width:100%;display:block}
.app-shell{min-height:100vh;display:flex}
.sidebar{position:fixed;inset:0 auto 0 0;width:270px;background:rgba(255,255,255,.92);backdrop-filter:blur(18px);border-right:1px solid var(--line);padding:24px 16px;display:flex;flex-direction:column;z-index:20}
.brand{display:flex;align-items:center;gap:14px;padding:0 10px 18px}.brand-mark{width:44px;height:44px;border-radius:14px;background:linear-gradient(145deg,var(--navy),var(--navy-2));color:#fff;display:grid;place-items:center;font-size:22px;font-weight:900;box-shadow:0 12px 28px rgba(16,42,86,.24)}.brand strong,.brand span{display:block}.brand strong{font-size:18px}.brand span{font-size:12px;color:var(--muted);margin-top:3px}
.nav-list{display:grid;gap:6px}.nav-btn{background:transparent;border:0;border-radius:14px;padding:13px 14px;display:flex;align-items:center;gap:12px;font-weight:700;color:#46536b;text-align:left}.nav-btn:hover{background:#f5f8fd}.nav-btn.active{background:linear-gradient(180deg,#eff5ff,#edf3ff);color:var(--navy);box-shadow:inset 0 0 0 1px rgba(34,71,140,.08)}.nav-ico{width:24px;text-align:center;font-size:18px}
.sidebar-foot{margin-top:auto;display:grid;gap:12px}.sync-pill{padding:12px;border:1px solid var(--line);background:#f7f9fc;border-radius:14px;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}.dot{width:8px;height:8px;border-radius:99px;background:#22a06b}
.main{margin-left:270px;flex:1;min-width:0;min-height:100vh}.topbar{position:sticky;top:0;z-index:10;height:94px;padding:18px 28px;display:flex;align-items:center;justify-content:space-between;background:rgba(243,246,251,.72);backdrop-filter:blur(16px);border-bottom:1px solid rgba(230,235,242,.8)}.eyebrow{text-transform:uppercase;font-size:11px;letter-spacing:.14em;color:#8b98ad;font-weight:900}.eyebrow.blue{color:var(--navy-2)}.topbar h1{margin:4px 0 0;font-size:30px;letter-spacing:-.03em}.top-actions{display:flex;gap:10px;align-items:center}.content{width:100%;min-width:0;padding:28px 28px 42px;max-width:1480px}
.card{background:var(--card);border:1px solid rgba(230,235,242,.9);border-radius:var(--radius);box-shadow:var(--shadow)}
.primary-btn,.secondary-btn,.ghost-btn,.danger-btn,.icon-btn,.icon-pill,.link-btn,.more-btn{border-radius:14px;border:1px solid transparent;padding:12px 16px;font-weight:750}.primary-btn{background:linear-gradient(180deg,#16386f,#102a56);color:#fff}.primary-btn:hover{opacity:.96}.secondary-btn{background:#fff;border-color:#d5deea;color:var(--navy)}.ghost-btn{background:#f7f9fc;border-color:var(--line);color:#344054}.danger-btn{background:var(--red-bg);color:var(--red)}.icon-btn{background:#fff;border-color:var(--line);min-width:46px;font-size:19px}.icon-pill{background:#f6f8fb;border-color:var(--line);padding:10px 14px;color:#475467}.icon-pill.active{background:var(--navy-soft);color:var(--navy);border-color:#d4def1}.link-btn{padding:0;min-width:44px;min-height:44px;display:inline-grid;place-items:center;border:0;background:none;color:var(--navy);font-weight:800}.mini-link{margin-top:10px;border:0;background:none;padding:0;width:44px;min-width:44px;min-height:44px;display:inline-grid;place-items:center;color:var(--navy);font-weight:800}
.hero-card{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;padding:26px 26px 24px;background:radial-gradient(circle at top right,#ebf3ff 0,#ffffff 45%,#ffffff 100%)}.hero-card h2{margin:8px 0 10px;font-size:34px;line-height:1.08;letter-spacing:-.04em;max-width:620px}.hero-card p{margin:0;color:var(--muted);font-size:15px;line-height:1.6;max-width:620px}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.hero-side{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.metric-card{border:1px solid var(--line);border-radius:20px;padding:16px 16px 14px;background:#fff}.metric-card.blue{background:linear-gradient(180deg,#f7faff,#fff)}.metric-card.green{background:linear-gradient(180deg,#f4fff8,#fff)}.metric-card.amber{background:linear-gradient(180deg,#fff9f0,#fff)}.metric-card.purple{background:linear-gradient(180deg,#f7f3ff,#fff)}.metric-label{font-size:12px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.06em}.metric-value{font-size:34px;font-weight:900;letter-spacing:-.04em;margin:8px 0 4px}.metric-note{font-size:13px;color:var(--muted)}
.grid{display:grid;gap:18px}.board-two{grid-template-columns:1.04fr .96fr;margin-top:18px}.section-card{padding:22px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.section-head h2{margin:0;font-size:20px;letter-spacing:-.02em}.section-head p{margin:4px 0 0;color:var(--muted);font-size:14px}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.quick-tile{border:1px solid var(--line);background:#fff;border-radius:18px;padding:18px 14px;text-align:left;display:grid;gap:10px;min-height:118px;transition:.18s ease}.quick-tile:hover{transform:translateY(-1px);border-color:#d5def1;background:#fbfcff}.qt-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#eef4ff;color:var(--navy);font-size:20px}.quick-tile strong{font-size:15px}.quick-tile small{color:var(--muted);font-size:12px;line-height:1.45}
.feed-row{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line)}.feed-row:first-child{border-top:0}.feed-icon{width:38px;height:38px;border-radius:14px;display:grid;place-items:center;background:#f3f6fb;font-weight:800}.feed-title{font-weight:750;font-size:14px}.feed-meta{margin-top:3px;color:var(--muted);font-size:12px;line-height:1.45}
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.product-grid.compact{grid-template-columns:repeat(4,minmax(0,1fr))}
.product-card{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:.16s ease}.product-card:hover{transform:translateY(-2px)}.pc-cover{height:174px;background:#f4f7fb;display:flex;align-items:center;justify-content:center;padding:14px}.product-photo{width:100%;height:100%;border-radius:20px;overflow:hidden;background:#edf2f8;display:flex;align-items:center;justify-content:center;color:var(--navy);font-weight:900}.product-photo.placeholder{font-size:28px}.product-photo.small{width:54px;height:54px;border-radius:16px;flex:0 0 auto}.product-photo.tiny{width:48px;height:48px;border-radius:14px;flex:0 0 auto}.product-photo img{width:100%;height:100%;object-fit:cover}
.pc-body{padding:16px 16px 18px}.pc-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.pc-head h3{margin:0;font-size:17px;line-height:1.25}.pc-head p{margin:6px 0 0;color:var(--muted);font-size:12px;line-height:1.5}.pc-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.pc-metrics div{padding:11px 12px;border-radius:16px;background:#f8fafc}.pc-metrics strong{display:block;font-size:20px;letter-spacing:-.03em}.pc-metrics span{display:block;color:var(--muted);font-size:11px;margin-top:4px}.badge{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;font-size:11px;font-weight:850;white-space:nowrap}.badge.ok{background:var(--green-bg);color:var(--green)}.badge.warn{background:var(--amber-bg);color:var(--amber)}.badge.danger{background:var(--red-bg);color:var(--red)}.badge.info{background:#eff5ff;color:var(--navy)}
.toolbar-panel{padding:22px}.toolbar-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.toolbar-row.top h2{margin:0;font-size:24px;letter-spacing:-.03em}.toolbar-row.top p{margin:6px 0 0;color:var(--muted)}.toolbar-actions{display:flex;gap:10px;flex-wrap:wrap}.toolbar-row.bottom{margin-top:16px}.search{position:relative;min-width:220px}.search.large{flex:1}.search:before{content:"⌕";position:absolute;left:14px;top:10px;font-size:20px;color:#98a2b3}.search input{width:100%;padding:14px 14px 14px 40px;border-radius:14px;border:1px solid #d7dee8;background:#fff;outline:none}.search input:focus{border-color:#94abd2;box-shadow:0 0 0 4px #eef4ff}.select{padding:13px 14px;border:1px solid #d7dee8;border-radius:14px;background:#fff;min-width:180px}
.table-shell{overflow:hidden;margin-top:18px}.p-head,.p-row{display:grid;grid-template-columns:minmax(240px,1.6fr) 130px 130px 140px 84px;gap:14px;align-items:center;padding:14px 18px}.p-head{background:#f7f9fc;font-size:12px;font-weight:850;color:#667085;text-transform:uppercase;letter-spacing:.06em}.p-row{border-top:1px solid var(--line);cursor:pointer}.p-item{display:flex;align-items:center;gap:12px;min-width:0}.p-item strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.p-item span{display:block;margin-top:5px;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qty{font-size:20px;font-weight:850;letter-spacing:-.03em}.more-btn{background:#f7f9fc;border-color:var(--line);padding:10px 12px;color:#344054}
.transfer-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0;border-top:1px solid var(--line)}.transfer-card:first-child{border-top:0}.transfer-main{display:flex;align-items:center;gap:12px}.transfer-main p{margin:6px 0 0;color:var(--muted);font-size:13px}.transfer-side{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.kv{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--line)}.kv:first-child{border-top:0}.muted{color:var(--muted)}.settings-grid{grid-template-columns:1fr 1fr}.settings-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.callout{padding:14px 16px;border-radius:16px;background:#f7f9fc;color:#495770;line-height:1.55;font-size:14px}.empty{padding:38px 20px;text-align:center;color:var(--muted)}.empty strong{display:block;color:var(--text);font-size:18px;margin-bottom:6px}
.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.45);display:grid;place-items:center;padding:18px;z-index:100}.modal{width:min(740px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:28px;box-shadow:0 32px 90px rgba(2,12,27,.28)}.modal-head{padding:20px 22px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.modal-head h3{margin:0;font-size:22px;letter-spacing:-.03em}.modal-head p{margin:6px 0 0;color:var(--muted)}.close-btn{border:0;background:#f6f8fb;width:40px;height:40px;border-radius:14px;font-size:22px}.modal-body{padding:22px}.modal-foot{padding:18px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}
.modal.full-screen-sheet{width:min(920px,100%);max-height:94vh}.profile-logo-field{gap:8px}.profile-logo-row{display:flex;align-items:center;gap:10px}.profile-logo-row>div:last-child{display:grid;gap:6px}.profile-logo-row small{font-size:12px;color:var(--q-muted)}.profile-logo-preview{width:64px;height:64px;display:grid;place-items:center;overflow:hidden;border:1px dashed #cfd9e6;border-radius:14px;background:#f7f9fc;color:var(--q-muted)}.profile-logo-preview img{width:100%;height:100%;object-fit:cover}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:grid;gap:8px}.field.full-span{grid-column:1/-1}.field label{font-size:13px;font-weight:800;color:#344054}.field input:not([type="checkbox"]):not([type="radio"]),.field select,.field textarea{width:100%;padding:13px 14px;border:1px solid #d7dee8;border-radius:14px;background:#fff;outline:none}.field input[type="checkbox"],.field input[type="radio"]{width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important;padding:0!important;margin:0!important;accent-color:var(--primary,#0284c7);cursor:pointer;flex-shrink:0}.field input:focus,.field select:focus,.field textarea:focus{border-color:#94abd2;box-shadow:0 0 0 4px #eef4ff}.helper{margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.5}.upload-inline{position:relative;overflow:hidden}.image-picker{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center}.image-preview{width:150px;height:150px;border-radius:22px;background:#f4f7fb;border:1px dashed #cfd9e6;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--muted);font-size:13px}.image-preview img{width:100%;height:100%;object-fit:cover}
.product-detail{display:grid;grid-template-columns:220px 1fr;gap:18px}.detail-cover{height:220px;background:#f4f7fb;border-radius:22px;padding:14px}.detail-meta{display:grid;gap:14px}.detail-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.detail-stats div{padding:14px;border-radius:18px;background:#f8fafc}.detail-stats strong{display:block;font-size:22px}.detail-stats span{display:block;color:var(--muted);font-size:12px;margin-top:4px}.detail-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.section-divider{height:1px;background:var(--line);margin:18px 0}
.scan-box{position:relative;min-height:280px;border-radius:22px;overflow:hidden;background:#0f172a;color:#fff;display:grid;place-items:center}.scan-frame{position:absolute;inset:26px;border:2px solid rgba(255,255,255,.8);border-radius:22px}.scan-line{position:absolute;left:30px;right:30px;top:50%;height:2px;background:#5eead4;box-shadow:0 0 12px #5eead4;animation:scan 2.2s linear infinite}.install-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.install-card{padding:16px;border:1px solid var(--line);border-radius:18px;background:#fbfcff}.install-card h4{margin:0 0 10px}
.toast-root{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(74px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:6px;z-index:1200;pointer-events:none;width:max-content;max-width:calc(100% - 32px)}.toast{padding:5px 14px;max-width:320px;border-radius:9999px;background:rgba(15,23,42,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);color:#f1f5f9;font-size:11.5px;font-weight:600;line-height:1.25;text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.25);pointer-events:auto;cursor:pointer;animation:toast-in .18s cubic-bezier(.16,1,.3,1) forwards;transition:opacity .18s ease,transform .18s ease}.toast.ok{background:rgba(16,120,75,.92);border-color:rgba(52,211,153,.35);color:#fff}.toast.error{background:rgba(185,28,28,.92);border-color:rgba(248,113,113,.35);color:#fff}.toast.fade-out{opacity:0;transform:translateY(6px) scale(.96)}@keyframes toast-in{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@media (min-width: 921px){.toast-root{bottom:24px;right:24px;left:auto;transform:none;align-items:flex-end}}
.mobile-nav{display:none}
.ui-icon{width:20px;height:20px;display:block;flex:0 0 auto}.nav-ico .ui-icon{width:21px;height:21px}.mobile-nav .ui-icon{width:18px;height:18px}
.nav-ico{display:inline-flex;align-items:center;justify-content:center}.qt-ico .ui-icon{width:22px;height:22px}.quick-tile .qt-ico{color:var(--navy)}
.image-preview{position:relative;display:flex;flex-wrap:wrap;align-content:center;gap:10px;padding:12px;transition:.18s ease}.image-preview>span{display:grid;justify-items:center;gap:6px;text-align:center;color:var(--muted);width:100%}.image-preview>span .ui-icon{width:30px;height:30px;color:var(--navy-2)}.image-preview>span b{color:var(--text);font-size:13px}.image-preview>span small{font-size:12px}.image-preview.dragging{border-color:var(--navy-2);background:#eef4ff;transform:scale(1.01)}.image-preview.has-image{align-content:flex-start;justify-content:flex-start}.image-thumb{position:relative;width:64px;height:64px;border-radius:14px;overflow:hidden;background:#edf2f8}.image-thumb img{width:100%;height:100%;object-fit:cover}.image-thumb button{position:absolute;top:3px;right:3px;width:23px;min-height:23px;height:23px;padding:0;border:0;border-radius:50%;background:rgba(15,23,42,.75);color:#fff;line-height:1}.image-status{margin-top:8px;color:var(--green);font-size:12px;font-weight:700}.upload-inline{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
.line-list{display:grid;gap:8px;margin-top:10px}.line-item{display:grid;grid-template-columns:minmax(0,1fr) auto 32px;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#f8fafc}.line-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.line-item strong{font-size:15px}.line-item button{width:32px;min-height:32px;height:32px;padding:0;border:0;border-radius:9px;background:#fff0ee;color:var(--red);font-size:18px}.empty-line{padding:12px;border:1px dashed #cbd6e5;border-radius:12px;color:var(--muted);font-size:13px;text-align:center}
.qr-open{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}.qr-card{display:grid;justify-items:center;gap:10px;text-align:center}.qr-canvas{width:min(300px,100%);min-height:280px;display:grid;place-items:center;padding:16px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 12px 30px rgba(15,23,42,.08)}.qr-canvas svg{width:100%;height:auto;display:block}.qr-card>strong{font-size:16px}.qr-card>span{font-size:13px;color:var(--muted)}.qr-actions{display:flex;gap:10px;margin-top:6px}

@keyframes scan{0%{transform:translateY(-70px)}50%{transform:translateY(70px)}100%{transform:translateY(-70px)}}
@media (max-width: 1240px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.product-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-card{grid-template-columns:1fr}.board-two,.settings-grid{grid-template-columns:1fr}.quick-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 920px){.sidebar{display:none}.main{margin-left:0}.topbar{padding:16px 18px;height:88px}.content{padding:20px 16px 88px}.mobile-nav{display:grid;position:fixed;left:10px;right:10px;bottom:10px;grid-template-columns:repeat(5,1fr);gap:8px;padding:10px;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);z-index:18}.mobile-nav button{border:0;background:transparent;padding:8px 4px;border-radius:14px;display:grid;gap:5px;justify-items:center;font-size:11px;color:#536176}.mobile-nav button.active{background:#eef4ff;color:var(--navy);font-weight:800}.hero-side{grid-template-columns:1fr 1fr}.product-detail{grid-template-columns:1fr}.detail-stats,.detail-actions{grid-template-columns:repeat(2,1fr)}.p-head{display:none}.p-row{grid-template-columns:1fr auto;grid-template-areas:"item action" "stocks stocks" "state state";gap:10px;padding:16px}.p-item{grid-area:item}.p-row .qty:nth-of-type(1),.p-row .qty:nth-of-type(2){font-size:17px}.p-row>.qty:nth-child(2)::before{content:'Tồn thực · ';font-size:12px;color:var(--muted);font-weight:500}.p-row>.qty:nth-child(3)::before{content:'Có thể bán · ';font-size:12px;color:var(--muted);font-weight:500}.p-row>div:nth-child(2){grid-area:stocks}.p-row>div:nth-child(3){grid-area:stocks;margin-left:120px}.p-row>div:nth-child(4){grid-area:state}.p-row>.more-btn{grid-area:action;justify-self:end}.form-grid,.install-grid,.image-picker{grid-template-columns:1fr}}
@media (max-width: 640px){.topbar h1{font-size:24px}.top-actions .primary-btn{display:none}.hero-card h2{font-size:28px}.hero-side{grid-template-columns:1fr}.quick-grid,.product-grid,.product-grid.compact{grid-template-columns:1fr}.toolbar-actions{width:100%}.toolbar-actions .primary-btn,.toolbar-actions .secondary-btn{flex:1}.toolbar-row.bottom{flex-direction:column;align-items:stretch}.select{width:100%}.pc-metrics,.detail-stats,.detail-actions{grid-template-columns:1fr 1fr}.section-card{padding:18px}}

@media (max-width: 640px){.mobile-nav{grid-template-columns:repeat(6,1fr)}.mobile-nav button{font-size:10px;padding-left:2px;padding-right:2px}}

.sale-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:18px;align-items:start}.sale-catalog,.sale-cart{padding:22px}.sale-search input{width:100%;padding:14px;border:1px solid #d7dee8;border-radius:14px}.sale-items{display:grid;gap:8px;margin-top:16px}.sale-item{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px;border:1px solid var(--line);background:#fff;border-radius:16px;text-align:left;min-height:68px}.sale-item:hover{border-color:#b8c9e4;background:#f8fbff}.sale-item span{min-width:0}.sale-item strong,.sale-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sale-item small{color:var(--muted);margin-top:4px;font-size:12px}.sale-item b{color:var(--navy);font-size:13px;white-space:nowrap}.sale-cart{position:sticky;top:112px}.sale-cart-lines{display:grid;gap:10px;max-height:390px;overflow:auto}.sale-line{padding:12px;border:1px solid var(--line);border-radius:16px;background:#fbfcff}.sale-line-head{display:flex;justify-content:space-between;gap:10px}.line-remove{border:0;background:#fff0ee;color:var(--red);width:32px;height:32px;border-radius:10px;font-size:18px}.sale-line-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.sale-line-controls label,.sale-fields label{display:grid;gap:5px;font-size:12px;color:var(--muted);font-weight:750}.sale-line-controls input,.sale-fields input,.sale-fields select{width:100%;padding:9px;border:1px solid #d7dee8;border-radius:10px;background:#fff}.sale-line-total{text-align:right;margin-top:10px;font-weight:850;color:var(--navy)}.sale-fields{display:grid;gap:10px;margin-top:16px}.sale-total{display:flex;justify-content:space-between;align-items:center;margin:18px 0;font-size:15px}.sale-total strong{font-size:26px;color:var(--navy)}.sale-pay{width:100%;min-height:52px}.sale-receipt{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;margin-bottom:18px;background:linear-gradient(120deg,#effaf5,#fff)}.sale-receipt h2{margin:5px 0;font-size:22px}.sale-receipt p{margin:0;color:var(--muted)}.sale-receipt>strong{font-size:24px;color:#116149}
@media (max-width:920px){.sale-layout{grid-template-columns:1fr}.sale-cart{position:static;box-shadow:var(--shadow)}.sale-cart-lines{max-height:260px}}
@media (max-width:640px){.sale-catalog,.sale-cart{padding:16px}.sale-receipt{align-items:flex-start;gap:10px}.sale-receipt>strong{font-size:18px}.sale-item{grid-template-columns:44px minmax(0,1fr)}.sale-item b{grid-column:2}.sale-line-controls{grid-template-columns:repeat(3,1fr);gap:6px}}

/* SALE-01 mobile behavior: safe-area aware, keyboard-friendly, and touch-first. */
.app-shell{min-height:100vh;min-height:100dvh}.main{min-height:100vh;min-height:100dvh}.quantity-control{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:4px}.quantity-control button{min-width:44px;min-height:44px;border:1px solid #d7dee8;border-radius:10px;background:#f7f9fc;color:var(--navy);font-size:20px;font-weight:850}.quantity-control input{text-align:center;min-width:0}.scan-status{margin-top:10px;padding:10px 12px;border-radius:12px;background:#f4f8ff;color:#52647c;font-size:12px;line-height:1.45}.sale-total,.sale-pay{position:sticky;z-index:2}.sale-total{bottom:calc(58px + env(safe-area-inset-bottom));background:#fff;padding-top:10px}.sale-pay{bottom:env(safe-area-inset-bottom);padding-bottom:calc(12px + env(safe-area-inset-bottom))}
@media (max-width:920px){.mobile-nav{bottom:calc(10px + env(safe-area-inset-bottom));padding-bottom:calc(10px + env(safe-area-inset-bottom))}.mobile-nav button:nth-child(6){display:none}}
@media (max-width:640px){.mobile-nav{grid-template-columns:repeat(5,1fr)}.mobile-nav button:nth-child(6){display:none}.sale-search input,.sale-fields input,.sale-fields select,.sale-line-controls input,.sale-line-controls button{font-size:16px}.sale-total strong{font-size:22px}.sale-cart{padding-bottom:calc(16px + env(safe-area-inset-bottom))}}

/* QBiz Kho refinement: clear hierarchy, dependable touch targets, and real product imagery. */
:where(button, input, select, textarea){min-height:44px}
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{outline:3px solid rgba(72,124,220,.28);outline-offset:2px}
.product-photo img{width:100%;height:100%;object-fit:cover}
.pc-cover>.product-photo{box-shadow:inset 0 0 0 1px rgba(16,42,86,.06)}
.product-card:focus-within,.product-card:focus-visible{outline:3px solid rgba(72,124,220,.28);outline-offset:2px}
.toolbar-panel{position:relative}
.toolbar-panel:after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:linear-gradient(90deg,var(--navy),#4c8dff 58%,#6ed6b0)}
.hero-card{overflow:hidden;position:relative}
.hero-card:after{content:"";position:absolute;right:-80px;top:-100px;width:260px;height:260px;border:1px solid rgba(43,102,190,.14);border-radius:50%;box-shadow:0 0 0 24px rgba(43,102,190,.035),0 0 0 48px rgba(43,102,190,.025);pointer-events:none}
.metric-card{min-height:132px;display:flex;flex-direction:column;justify-content:center}
.quick-tile{min-height:128px}
.quick-tile:focus-visible{outline:3px solid rgba(72,124,220,.28);outline-offset:2px}
.empty{border:1px dashed #cbd6e5;border-radius:18px;background:#fbfcfe}
.modal-backdrop{padding:12px}
.modal-foot .primary-btn,.modal-foot .secondary-btn{min-width:104px}

@media (max-width: 920px){
  .topbar{height:auto;min-height:78px}
  .top-actions{gap:6px}
  .top-actions .icon-btn{min-width:44px}
  .p-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"item action" "onhand available" "state state";align-items:center}
  .p-row>.qty:nth-child(2){grid-area:onhand}
  .p-row>.qty:nth-child(3){grid-area:available;margin-left:0}
  .p-row>div:nth-child(4){grid-area:state}
  .p-row>.more-btn{grid-area:action}
}
@media (max-width: 640px){
  .content{padding-left:12px;padding-right:12px}
  .topbar{padding-left:14px;padding-right:14px}
  .hero-card,.toolbar-panel{padding:18px}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:8px}
  .hero-actions button,.toolbar-actions button{width:100%}
  .toolbar-actions{display:grid;grid-template-columns:1fr 1fr}
  .toolbar-actions .primary-btn{grid-column:1/-1}
  .toolbar-actions .secondary-btn{flex:auto}
  .toolbar-panel:after{left:18px;right:18px}
  .pc-cover{height:196px}
  .pc-head h3{font-size:16px}
  .pc-metrics{gap:7px}
  .pc-metrics div{padding:10px 8px}
  .pc-metrics strong{font-size:18px}
  .modal{border-radius:22px;max-height:94vh;display:flex;flex-direction:column;overflow:hidden}
  .modal-head{flex-shrink:0;padding-left:16px;padding-right:16px}
  .modal-body{flex:1 1 auto;overflow-y:auto;overflow-x:hidden !important;max-width:100%;box-sizing:border-box;-webkit-overflow-scrolling:touch;padding-left:16px;padding-right:16px;padding-bottom:20px}
  .modal-foot{flex-shrink:0;position:relative;bottom:auto;background:#fff;border-top:1px solid var(--line,#e6ebf2);box-shadow:0 -4px 14px rgba(15,23,42,.06);padding-left:16px;padding-right:16px;z-index:10}
  .modal-backdrop:has(.full-screen-sheet){padding:0}
  .modal.full-screen-sheet{width:100%;height:100dvh;max-height:100dvh;border-radius:0;display:flex;flex-direction:column;overflow:hidden}
  .modal.full-screen-sheet .modal-head{flex-shrink:0;padding:12px 16px;border-bottom:1px solid var(--line);background:#fbfdff}
  .modal.full-screen-sheet .modal-head h3{font-size:18px}
  .modal.full-screen-sheet .modal-head p{font-size:12px;margin-top:2px}
  .modal.full-screen-sheet .modal-body{flex:1 1 auto;overflow-y:auto;overflow-x:hidden !important;max-width:100%;box-sizing:border-box;padding:12px 14px 28px;-webkit-overflow-scrolling:touch}
  .modal.full-screen-sheet .modal-foot{flex-shrink:0;position:relative;bottom:auto;z-index:10;border-top:1px solid var(--border-color,#e2e8f0);background:#fff;box-shadow:0 -4px 16px rgba(15,23,42,.08);padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px))}
  .image-preview{min-height:160px;width:100%;height:auto}
}

/* Hide floating AI trigger FAB whenever modal is open to prevent overlapping action buttons */
body:has(.modal-backdrop) #qbizAiTrigger,
body:has(.modal-backdrop) .qbiz-ai-trigger,
#modalRoot:has(.modal-backdrop) ~ #qbizAiTrigger,
#modalRoot:has(.modal-backdrop) ~ #qbizAiRoot #qbizAiTrigger {
  display: none !important;
  pointer-events: none !important;
}


/* Visual polish pass: clearer surfaces, modern system typography, and a real scan control. */
:root{--bg:#eef2f7;--card:#ffffff;--line:#dce3ec;--text:#13233d;--muted:#64748b;--shadow:0 14px 34px rgba(24,42,72,.08)}
html,body{font-family:"Segoe UI Variable","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;font-synthesis:none;letter-spacing:-.008em}
body{background:linear-gradient(180deg,#f8fafc 0,#eef2f7 220px,#eef2f7 100%)}
.topbar{background:rgba(238,242,247,.9);border-bottom-color:#d8e0ea}.topbar h1{font-weight:750;letter-spacing:-.045em}.eyebrow{letter-spacing:.16em;font-weight:700}
.card{border-color:#dce3ec;box-shadow:var(--shadow)}
.hero-card{background:linear-gradient(135deg,#fff 0%,#f7fbff 62%,#edf5ff 100%);border-color:#d6e2f0}
.board-two>.card:first-child{background:#f8fbff}.board-two>.card:last-child{background:#fffdf8}
.section-card{background:#fff}.section-card:nth-child(odd){background:#fbfdff}
.metric-card{border-width:1px 1px 1px 4px;box-shadow:0 8px 20px rgba(24,42,72,.04)}.metric-card.blue{border-left-color:#4b7bec;background:#f4f8ff}.metric-card.green{border-left-color:#16a77a;background:#f1fbf7}.metric-card.amber{border-left-color:#e3a12c;background:#fff9ee}.metric-card.purple{border-left-color:#8266e8;background:#f8f5ff}
.quick-tile{border-color:#d8e2ed;box-shadow:0 6px 16px rgba(24,42,72,.035)}.quick-tile:nth-child(1) .qt-ico{background:#e8f2ff;color:#2864c7}.quick-tile:nth-child(2) .qt-ico{background:#fff0ed;color:#cc5544}.quick-tile:nth-child(3) .qt-ico{background:#eef9f5;color:#16845f}.quick-tile:nth-child(4) .qt-ico{background:#fff7e4;color:#a86c09}
.pc-metrics div{background:#f3f6fa;border:1px solid #e7edf3}.toolbar-panel{background:#fff}.table-shell{border-color:#d8e1eb}.p-head{background:#edf3f8;color:#51627a}
.scan-trigger{display:inline-flex;align-items:center;justify-content:center;gap:8px}.scan-trigger .ui-icon{width:20px;height:20px}.icon-btn.scan-trigger{padding:10px}
.scan-box{min-height:330px;background:radial-gradient(circle at 50% 35%,#1f3f72 0,#0b1730 70%);border:1px solid #284b7f}.scan-placeholder-icon{width:58px;height:58px;display:grid;place-items:center;margin:0 auto 14px;border:1px solid rgba(255,255,255,.45);border-radius:18px;background:rgba(255,255,255,.1)}.scan-placeholder-icon .ui-icon{width:32px;height:32px}.scan-frame{inset:44px;border:0}.scan-corners{position:absolute;inset:44px;background:linear-gradient(#fff,#fff) left top/32px 3px no-repeat,linear-gradient(#fff,#fff) left top/3px 32px no-repeat,linear-gradient(#fff,#fff) right top/32px 3px no-repeat,linear-gradient(#fff,#fff) right top/3px 32px no-repeat,linear-gradient(#fff,#fff) left bottom/32px 3px no-repeat,linear-gradient(#fff,#fff) left bottom/3px 32px no-repeat,linear-gradient(#fff,#fff) right bottom/32px 3px no-repeat,linear-gradient(#fff,#fff) right bottom/3px 32px no-repeat;pointer-events:none}.scan-line{left:60px;right:60px;background:#69e0b4;box-shadow:0 0 16px #69e0b4}
.modal-head{background:#fbfdff}.modal-body{background:#fff}.modal-foot{background:#fbfdff}
@media (max-width:640px){.metric-card{min-height:126px}.section-card{border-radius:22px}.quick-tile{min-height:116px}.scan-box{min-height:300px}.scan-frame,.scan-corners{inset:34px}.scan-line{left:48px;right:48px}.scan-trigger{min-height:46px}}
.pc-info{display:grid;gap:4px;margin:14px 0;color:#18365f;font-weight:700}.pc-info small{color:#64748b;font-weight:500;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.product-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}.product-facts>div{padding:12px 14px;border:1px solid #dce5f0;border-radius:14px;background:#f7faff}.product-facts span{display:block;color:#718096;font-size:12px;margin-bottom:4px}.product-facts strong{display:block;color:#17345c;font-size:14px;line-height:1.35}.product-description{margin:0 0 16px;color:#52647c;line-height:1.55}.detail-meta{min-width:0}

/* UX CLEANUP MOBILE V2: compact work surfaces without changing behavior. */
.eyebrow{letter-spacing:.08em;font-size:11px}.topbar h1{font-size:28px}.content{padding-top:16px}.card{border-radius:18px}.section-card,.toolbar-panel{padding:16px}.section-head{margin-bottom:12px}.section-head h2{font-size:18px}.section-head p{margin-top:3px;font-size:13px}.hero-card{padding:18px}.compact-hero h2{font-size:24px;margin:0 0 12px}.compact-hero .hero-actions{gap:8px}.metric-card{min-height:96px;padding:14px}.metric-card .metric-value{font-size:27px}.quick-tile{min-height:88px;padding:14px}.quick-tile small{font-size:12px}.product-card{border-radius:18px}.pc-cover{height:148px}.pc-body{padding:14px}.toolbar-row{gap:12px}.toolbar-row.top h2{font-size:20px}.toolbar-actions{gap:7px}.icon-pill{min-height:44px;padding:8px 12px}.table-shell{border-radius:16px}.p-row{min-height:68px;padding:12px 14px}.transfer-card{padding:12px 0}.empty{padding:24px 16px}.empty strong{font-size:16px}.more-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.more-actions button{width:100%}
.warehouse-actions{display:flex;flex-wrap:wrap;gap:8px}.warehouse-actions button{min-width:82px}
.order-list{display:grid;gap:0}.order-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line)}.order-row:first-child{border-top:0}.order-row>div:first-child{min-width:0;display:grid;gap:4px}.order-row span{color:var(--muted);font-size:13px}.order-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.order-picker{display:grid;gap:8px;max-height:320px;overflow:auto}.order-option{display:grid;grid-template-columns:auto minmax(0,1fr) 64px;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fbfcfe}.order-option span{display:grid;gap:3px;min-width:0}.order-option small{color:var(--muted);font-size:12px}.order-option input[type=number]{min-height:40px;padding:8px;border:1px solid var(--line);border-radius:9px}@media (max-width:640px){.order-row{align-items:flex-start;flex-direction:column}.order-row-actions{justify-content:flex-start}.order-row-actions button{min-height:44px}.order-option{grid-template-columns:auto minmax(0,1fr) 58px}}
@media (max-width:640px){.topbar{padding-top:12px;padding-bottom:12px}.topbar h1{font-size:24px}.content{padding:12px 12px calc(82px + env(safe-area-inset-bottom))}.hero-card{padding:16px}.compact-hero .hero-actions{display:grid;grid-template-columns:1fr 1fr}.compact-hero .hero-actions .primary-btn{grid-column:1/-1}.hero-side{gap:8px}.metric-card{min-height:88px;padding:12px}.metric-card .metric-label{font-size:11px}.metric-card .metric-value{font-size:24px}.metric-card .metric-note{font-size:12px}.quick-grid{gap:8px}.quick-tile{min-height:78px;padding:11px}.quick-tile .qt-ico{width:34px;height:34px}.pc-cover{height:126px}.toolbar-panel{padding:14px}.toolbar-row.top{align-items:stretch}.toolbar-actions{display:grid;grid-template-columns:1fr 1fr}.toolbar-actions .primary-btn{grid-column:1/-1}.toolbar-row.bottom{gap:8px}.sale-catalog,.sale-cart{padding:14px}.more-actions{grid-template-columns:1fr}.section-card{padding:14px}}

/* UX-02 compact pass: keep high-frequency work visible without changing behavior. */
.content{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
.hero-card{padding:20px}.hero-card h2{margin-bottom:10px}.hero-side{gap:10px}
.metric-card{min-height:88px;padding:12px}.metric-card .metric-note{line-height:1.3}
.quick-tile{min-height:92px;padding:12px}.quick-tile strong{font-size:14px}
.sale-catalog,.sale-cart{padding:18px}.sale-catalog .section-head p{display:none}.sale-items{margin-top:10px;gap:6px}.sale-item{min-height:60px;padding:8px 10px;border-radius:12px}.sale-item .product-photo{width:42px;height:42px}.sale-cart .section-head p{font-size:12px}
.sale-line{padding:10px;border-radius:12px}.sale-cart-lines{gap:7px}.sale-fields{gap:8px;margin-top:12px}.sale-total{margin:12px 0}.sale-total strong{font-size:24px}
.toolbar-panel{padding:16px}.toolbar-row.top{margin-bottom:10px}.toolbar-row.top h2{margin:0;font-size:19px}
.order-row{padding:11px 0}.order-row-actions{gap:6px}.order-row-actions button{min-height:40px}.order-list{padding:0 16px}
.transfer-card{min-height:60px}.empty{padding:18px 14px}
@media (max-width:640px){
  .content{padding-top:10px;padding-left:10px;padding-right:10px}
  .topbar{padding:10px 12px}.topbar h1{font-size:23px}
  .hero-card{padding:14px}.compact-hero h2{font-size:22px}.hero-side{grid-template-columns:1fr 1fr;gap:7px}.metric-card{min-height:78px;padding:10px}.metric-card .metric-value{font-size:22px}.metric-card .metric-note{font-size:11px}
  .quick-grid{grid-template-columns:1fr 1fr}.quick-tile{min-height:74px;padding:9px}.quick-tile small{display:none}
  .sale-layout{gap:10px}.sale-catalog,.sale-cart{padding:12px}.sale-items{margin-top:8px}.sale-item{grid-template-columns:40px minmax(0,1fr);gap:8px}.sale-item b{grid-column:2;font-size:12px}.sale-cart{padding-bottom:calc(12px + env(safe-area-inset-bottom))}.sale-pay{min-height:48px}
  .toolbar-panel,.section-card{padding:12px}.order-list{padding:0 12px}.order-row{padding:10px 0}.order-row-actions{width:100%}.order-row-actions button{flex:1}.more-actions{gap:8px}
}

/* UX-03-R2: compact IA, POS-first interactions, and one consistent icon language. */
.topbar{height:72px;padding:12px 24px}.topbar>div:first-child{display:flex;align-items:center;gap:12px}.topbar .eyebrow{display:none}.topbar h1{margin:0;font-size:24px}.top-actions{gap:8px}.header-shortcut,.header-bell{min-height:44px}.header-shortcut{display:inline-flex;align-items:center;gap:7px;border:1px solid #d9e4f1;background:#fff;color:#245a9f;border-radius:10px;padding:0 12px;font-weight:700}.header-shortcut .ui-icon{width:18px;height:18px}.header-bell{position:relative}.header-bell b{position:absolute;top:3px;right:3px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:#d84c43;color:#fff;font-size:10px;line-height:16px}
.hero-card{grid-template-columns:1fr;padding:16px;gap:12px;background:#fff}.hero-actions{margin-top:0;display:flex;gap:8px}.hero-actions button{min-height:44px}.hero-side{gap:8px}.metric-card{position:relative;text-align:left;border:1px solid #e1e9f3;border-left:3px solid #c6d8ed;padding:12px;min-height:78px}.metric-card .metric-note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metric-card>.ui-icon{position:absolute;right:10px;bottom:10px;width:16px;height:16px;color:#8ba3bf}.metric-card[ data-page]{cursor:pointer}
.alert-product-list{display:grid;gap:6px}.alert-product-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto auto;align-items:center;gap:10px;width:100%;min-height:72px;padding:8px 10px;border:1px solid #e3eaf2;border-radius:12px;background:#fff;text-align:left;color:var(--text)}.alert-product-row:hover{border-color:#a8c6e7;background:#f8fbff}.alert-product-row>span{min-width:0}.alert-product-row strong,.alert-product-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.alert-product-row small{margin-top:3px;color:var(--muted);font-size:12px}.alert-product-row>b{color:#205aa4;font-size:13px;white-space:nowrap}.alert-stock{font-size:12px;color:#63758b;white-space:nowrap}.alert-product-row .product-photo{width:56px;height:56px}
.notification-list{display:grid;border-top:1px solid var(--q-line)}.notification-row{display:flex;align-items:center;gap:12px;min-height:62px;padding:10px 0;border:0;border-bottom:1px solid var(--q-line);border-radius:0;background:#fff;text-align:left;color:var(--text)}.notification-ico{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#eef4ff;color:#2f6fb8;flex:0 0 auto}.notification-ico .ui-icon{width:20px;height:20px}.notification-row>span{display:grid;gap:2px;min-width:0;flex:1}.notification-row b{font-size:14px;font-weight:700;color:#22406a}.notification-row small{font-size:12px;color:var(--q-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.notification-row>strong{color:#1f56a6;font-size:15px;white-space:nowrap}.notification-row>.ui-icon{width:18px;color:#8aa0b9;flex:0 0 auto}.notification-empty{padding:30px 16px}
.catalog-hint{margin:4px 0 0;color:#72839a;font-size:13px}.catalog-more{width:100%;min-height:44px;margin-top:8px;border:1px dashed #b6cbe4;border-radius:10px;background:#f8fbff;color:#245a9f;font-weight:700}.sale-mobile-bar{display:none}.sale-catalog .section-head h2{font-size:20px}.sale-items{min-height:0}.sale-cart{top:88px}.sale-cart.empty-cart .sale-fields,.sale-cart.empty-cart .sale-total,.sale-cart.empty-cart .sale-pay{display:none}.sale-cart.empty-cart .sale-cart-lines{max-height:none}.sale-cart.empty-cart{min-height:160px}.payment-field{display:grid;gap:5px;color:var(--muted);font-size:12px;font-weight:750}.payment-options{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.payment-option{min-height:44px;padding:8px 6px;border:1px solid #d7e1ed;border-radius:10px;background:#fff;color:#315274;font-weight:700}.payment-option.active{border-color:#3478d5;background:#edf4ff;color:#1f56a6;box-shadow:0 0 0 2px rgba(52,120,213,.1)}
.toolbar-actions .primary-btn[aria-label]{min-width:44px;padding:0;font-size:22px}.more-btn{min-width:44px;min-height:44px;padding:0;display:grid;place-items:center}.more-btn .ui-icon{width:18px}.table-shell .p-row{cursor:pointer}.p-row .badge{font-size:11px}
.quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:920px){.topbar{height:64px;padding:10px 14px}.topbar h1{font-size:22px}.content{padding-top:10px}.header-shortcut span{display:none}.header-shortcut{width:44px;padding:0;justify-content:center}.sale-layout{padding-bottom:calc(76px + env(safe-area-inset-bottom))}.sale-cart{display:block}.sale-mobile-bar{position:fixed;display:flex;align-items:center;gap:8px;left:10px;right:10px;bottom:calc(74px + env(safe-area-inset-bottom));z-index:17;padding:8px;border:1px solid #d6e3f1;border-radius:14px;background:rgba(255,255,255,.96);box-shadow:0 8px 24px rgba(20,54,99,.14)}.sale-mobile-summary{flex:1;min-height:52px;border:0;background:transparent;text-align:left;color:#214a82;font-weight:800}.sale-mobile-bar .primary-btn{min-height:52px;min-width:126px}.alert-product-row{grid-template-columns:52px minmax(0,1fr) auto}.alert-product-row .product-photo{width:52px;height:52px}.alert-product-row>b{grid-column:2;text-align:left}.alert-stock{grid-column:3;grid-row:1 / span 2}.quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.hero-actions{display:grid;grid-template-columns:1fr 1fr}.hero-actions .primary-btn{grid-column:1/-1}.hero-side{grid-template-columns:1fr 1fr}.metric-card{min-height:74px}.alert-product-row{grid-template-columns:52px minmax(0,1fr);gap:8px}.alert-product-row>b{grid-column:2}.alert-product-row .badge{grid-column:2;justify-self:start}.alert-stock{grid-column:2;grid-row:auto}.sale-cart{position:static}.sale-mobile-bar{display:flex}.top-actions .scan-trigger{display:none}}

/* UX-03 visual system: bright, calm work surfaces with a single QBiz blue accent. */
:root{
  --bg:#f4f7fb;--card:#ffffff;--line:#e4eaf2;--text:#172b4d;--muted:#66758b;
  --navy:#1f56a6;--navy-2:#3478d5;--navy-soft:#edf4ff;--radius:16px;
  --shadow:0 8px 24px rgba(24,52,91,.06);
}
html,body{font-family:"Segoe UI Variable","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg);font-synthesis:none}
body{background:#f4f7fb}
.sidebar{background:#fbfdff;border-right:1px solid #e6edf5;box-shadow:4px 0 18px rgba(30,62,102,.03)}
.brand-mark{background:#1f56a6;box-shadow:0 5px 12px rgba(31,86,166,.18)}
.topbar{background:rgba(244,247,251,.94);border-bottom:1px solid #e3eaf3}
.topbar h1{font-size:28px;font-weight:760;letter-spacing:-.035em}
.eyebrow{color:#7990ad;letter-spacing:.12em}
.card{border:1px solid #e2e9f2;border-radius:16px;box-shadow:var(--shadow)}
.hero-card{background:#fff;border-color:#dce7f4;box-shadow:0 10px 28px rgba(29,73,126,.07)}
.metric-card{border-radius:14px;min-height:86px;background:#fff!important;border-left:3px solid #c9d9ee;box-shadow:none}
.metric-card.blue{border-left-color:#3478d5}.metric-card.green{border-left-color:#2aa980}.metric-card.amber{border-left-color:#df9b31}.metric-card.purple{border-left-color:#8870d7}
.metric-card .metric-value{font-size:28px;color:#142d54;margin:5px 0 3px}
.quick-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.quick-tile{min-height:86px;padding:13px 14px;border:1px solid #e0e8f2;border-radius:14px;background:#fff;box-shadow:none;transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.quick-tile:hover{border-color:#a9c5e8;box-shadow:0 5px 14px rgba(31,86,166,.08);transform:translateY(-1px)}
.quick-tile .qt-ico{width:36px;height:36px;border-radius:11px}.quick-tile strong{font-size:14px;color:#243b60}.quick-tile small{color:#74849a}
.primary-btn{background:#1f56a6;border-color:#1f56a6;box-shadow:0 4px 10px rgba(31,86,166,.14)}
.secondary-btn{border-color:#d6e1ee;background:#fff;color:#204f93}.ghost-btn{background:#f5f8fc;border-color:#e0e7f0;color:#405570}
.primary-btn:hover,.secondary-btn:hover,.ghost-btn:hover{transform:translateY(-1px)}
.toolbar-panel{background:#fff;border-color:#e0e8f2}.toolbar-panel:after{background:#3478d5;height:2px}
.p-head{background:#f5f8fc;color:#63748a;border-bottom:1px solid #e6edf4}
.p-row{border-bottom-color:#e8eef5;background:#fff}.p-row:hover{background:#f8fbff}
.product-card{border:1px solid #e1e8f1;border-radius:16px;background:#fff;box-shadow:none;overflow:hidden}.product-card:hover{border-color:#b9d0ed;box-shadow:0 7px 18px rgba(31,86,166,.08)}
.pc-cover{height:142px;background:#f2f6fb}.pc-body{padding:14px}.pc-head h3{font-size:16px;color:#19375e}.pc-info{margin:10px 0}.pc-info>span{color:#1f56a6;font-size:15px}.pc-metrics div{background:#f7f9fc;border-color:#e9eef4}
.sale-layout{gap:14px}.sale-catalog,.sale-cart{padding:16px;border-radius:16px}.sale-catalog{background:#fff}.sale-cart{background:#fbfdff;border-color:#d6e3f1;box-shadow:0 10px 26px rgba(25,67,116,.08)}
.sale-search input{border:2px solid #d5e3f4;border-radius:12px;background:#fafdff;padding:12px 14px}.sale-search input:focus{border-color:#3478d5;box-shadow:0 0 0 3px rgba(52,120,213,.12)}
.sale-item{border-color:#e2e9f2;border-radius:12px;min-height:62px;background:#fff}.sale-item:hover{background:#f5f9ff;border-color:#9fc2e9}.sale-item strong{color:#203d65}.sale-item b{color:#1f56a6}
.sale-line{border-color:#dfe8f2;background:#fff;border-radius:12px}.sale-line-total{color:#1f56a6}.sale-total{border-top:1px solid #e2e9f2;padding-top:12px}.sale-total strong{color:#153e78;font-size:24px}.sale-pay{box-shadow:0 7px 16px rgba(31,86,166,.18)}
.order-list{background:#fff}.order-row{border-top-color:#e6edf4}.order-row:hover{background:#fbfdff}.order-row-actions .link-btn{color:#61748d}
.warehouse-actions{gap:8px}.warehouse-actions button{border-radius:12px}.transfer-card{border-bottom-color:#e5ebf2}.feed-row{border-bottom-color:#e8eef4}
.more-actions{gap:10px}.more-actions button{border-radius:14px;min-height:56px}
.empty{border-color:#d7e3ef;background:#fbfdff;color:#708096}.badge{border-radius:999px}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(52,120,213,.24);outline-offset:2px}
@media (max-width:920px){.quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.sale-cart{box-shadow:0 7px 20px rgba(25,67,116,.07)}}
@media (max-width:640px){
  .topbar h1{font-size:23px}.hero-card{box-shadow:0 6px 18px rgba(29,73,126,.06)}
  .quick-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.quick-tile{min-height:82px;padding:10px 7px}.quick-tile strong{font-size:12px}.quick-tile small{display:none}.quick-tile .qt-ico{width:32px;height:32px}
  .pc-cover{height:120px}.product-card{border-radius:14px}.sale-item{min-height:60px}.sale-total strong{font-size:23px}
  .warehouse-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.warehouse-actions .link-btn{grid-column:1/-1;justify-self:start}
}
/* UX-04 V2: compact customer, sales summary and transaction surfaces */
.sales-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.sales-summary{padding:16px 18px;display:flex;flex-direction:column;gap:4px}.sales-summary strong{font-size:22px;color:#102a56}.sales-summary small{color:#697386}.customer-chip{width:100%;min-height:44px;display:flex;align-items:center;gap:8px;padding:8px 12px;margin:12px 0;border:1px solid #dfe5ef;border-radius:10px;background:#f8fbff;color:#102a56;text-align:left}.customer-chip .ui-icon:last-child{margin-left:auto}.customer-picker{display:grid;gap:12px}.customer-search{min-height:44px}.customer-results{display:grid;gap:6px;max-height:42vh;overflow:auto}.customer-row,.transaction-row{min-height:52px;width:100%;display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #e6ebf2;border-radius:10px;background:#fff;text-align:left;color:#172033}.customer-row span,.transaction-row span{display:grid;gap:2px;min-width:0;flex:1 1 auto;overflow:hidden}.customer-row strong,.transaction-row strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.customer-row small,.transaction-row small{color:#778196;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.transaction-row b{white-space:nowrap!important;flex-shrink:0!important;margin-left:auto!important;text-align:right!important;font-variant-numeric:tabular-nums!important}.customer-row .ui-icon,.transaction-row .ui-icon{margin-left:auto;flex-shrink:0!important}.discount-control{display:flex;gap:6px;align-items:center}.discount-control input{min-width:0;flex:1;height:44px;min-height:44px;padding:0 12px;border:1.5px solid #dce4ee;border-radius:10px;font-size:16px;font-weight:600}.discount-mode{min-width:44px;min-height:44px;height:44px;padding:0 14px;border:1.5px solid #cbd5e1;background:#fff;border-radius:10px;font-size:15px;font-weight:700;color:#475569;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s ease}.discount-mode:hover{border-color:#3b82f6;color:#1e40af}.discount-mode.active{background:#eaf2ff;border-color:#2563eb;color:#1e40af;font-weight:800;box-shadow:0 0 0 1px #2563eb}.discount-box-head{display:flex;align-items:center;justify-content:space-between}.discount-val-hint{font-size:13px;color:#d97706;font-weight:700}.order-options-open{margin-top:14px;border-top:1px solid var(--q-line);padding-top:4px}.checkout-discount-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:10px 12px;margin:12px 0 16px}.checkout-discount-card .discount-box{margin:0}.cash-change{display:block;margin-top:4px}.cash-change.ok{color:#16855a}.cash-change.warn{color:#b26a00}.product-more{margin:14px auto}.transaction-detail{display:grid;gap:16px}.transaction-total{font-size:28px;font-weight:800;color:#102a56}.detail-list{display:grid;gap:8px}.detail-list>div{display:flex;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1px solid #edf0f5}.transaction-actions{display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:700px){.sales-summary-grid{gap:8px;margin:12px 0}.sales-summary{padding:12px}.sales-summary strong{font-size:18px}.transaction-actions>*{flex:1}.product-more{width:100%}}
@media(min-width:1000px){.sales-summary-grid{max-width:720px}}

/* UX-04R2 — mobile POS journey rebuilt from the approved reference */
:root{--q-blue:#1485ee;--q-blue-dark:#0868c6;--q-surface:#fff;--q-bg:#f4f7fb;--q-soft:#eef6ff;--q-ink:#172033;--q-muted:#6f7b8d;--q-line:#e6ebf2}
.pos-browser{max-width:980px;margin:0 auto;padding-bottom:92px}.pos-search-row{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:8px}.pos-search-row input{height:48px;padding:0 14px;border:1px solid #dce4ee;border-radius:12px;background:#fff;font-size:16px}.pos-search-row button{min-width:48px;min-height:48px;display:grid;place-items:center;border:1px solid #dce4ee;border-radius:12px;background:#fff;color:var(--q-blue)}.pos-chips,.order-filters{display:flex;gap:7px;overflow:auto;padding:2px 0 10px;scrollbar-width:none}.pos-chips button,.order-filters button,.warehouse-tabs button{min-height:40px;padding:0 15px;border:0;border-radius:999px;background:#edf1f6;color:#5f6c7e;font-weight:700;white-space:nowrap}.pos-chips button.active,.order-filters button.active,.warehouse-tabs button.active{background:var(--q-blue);color:#fff}.pos-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.pos-product{position:relative;min-width:0;border:1px solid var(--q-line);border-radius:14px;background:#fff;overflow:hidden}.pos-product-main{width:100%;display:grid;gap:3px;padding:8px 8px 12px;border:0;background:#fff;text-align:left}.pos-product-image{width:100%;aspect-ratio:1.35/1;border-radius:9px;background:#f2f5f9;display:grid;place-items:center;overflow:hidden;color:#496079;font-weight:800}.pos-product-image img{width:100%;height:100%;object-fit:cover}.pos-product strong{min-height:34px;margin-top:4px;font-size:14px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.pos-product small{font-size:11px;color:var(--q-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pos-product b,.row-price{color:var(--q-blue-dark);font-size:14px}.pos-product em{font-style:normal;font-size:11px;color:#64748b}.pos-add{position:absolute;right:7px;bottom:7px;width:34px;height:34px;border:0;border-radius:10px;background:var(--q-blue);color:#fff;font-size:22px;font-weight:700}.pos-cart-bar{max-width:620px;margin:auto}.pos-cart-bar .sale-mobile-summary{display:flex;justify-content:space-between;align-items:center;gap:8px}.pos-cart-bar .sale-mobile-summary strong{color:var(--q-blue-dark)}
.pos-flow{max-width:680px;margin:0 auto;padding:16px 16px calc(20px + env(safe-area-inset-bottom));border-radius:18px}.flow-head{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;margin-bottom:14px}.flow-head h2{text-align:center;margin:0;font-size:20px}.flow-back{width:44px;height:44px;border:0;background:transparent;font-size:34px;color:#334155}.cart-list{display:grid;gap:8px}.cart-row{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;padding:10px 0;border-bottom:1px solid var(--q-line)}.cart-row .pos-product-image{width:72px;height:72px;aspect-ratio:auto}.cart-row-main{min-width:0}.cart-row-title,.cart-row-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}.cart-row-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cart-row-title button{width:44px;height:44px;border:0;background:transparent;color:#e34b4b;font-size:22px}.cart-row-main>small{display:block;color:var(--q-muted);margin:2px 0 7px}.cart-row-bottom .quantity-control{grid-template-columns:44px 44px 44px}.cart-row-bottom .quantity-control button{min-width:44px;min-height:44px}.cart-row-bottom input{font-size:16px}.cart-row-bottom>b{color:var(--q-blue-dark)}.line-discount{display:flex;align-items:center;gap:8px;margin-top:8px;color:var(--q-muted);font-size:12px}.line-discount input{width:100px;min-height:44px;padding:6px 8px;border:1px solid var(--q-line);border-radius:8px}.cart-note,.discount-box{display:grid;gap:6px;margin-top:14px;font-weight:600}.cart-note input,.discount-box input,.delivery-fields input,.cash-panel input{min-height:46px;padding:10px 12px;border:1px solid #dce4ee;border-radius:10px;font-size:16px}.cart-totals{display:grid;gap:9px;margin-top:16px}.cart-totals>div{display:flex;justify-content:space-between}.cart-totals .grand{padding-top:12px;border-top:1px solid var(--q-line);font-size:18px}.cart-totals .grand b{color:var(--q-blue-dark);font-size:22px}.flow-primary{width:100%;min-height:52px;margin-top:16px}
.checkout-total{text-align:center;padding:12px 0 18px;border-bottom:1px solid var(--q-line)}.checkout-total span{display:block;color:var(--q-muted)}.checkout-total strong{display:block;margin-top:5px;color:var(--q-blue);font-size:31px}.choice-section{margin-top:18px}.choice-section h3{margin:0 0 8px;font-size:15px}.choice-row{width:100%;min-height:48px;display:flex;align-items:center;gap:12px;border:0;border-bottom:1px solid var(--q-line);background:#fff;text-align:left;font-size:15px}.choice-row i{width:20px;height:20px;border:2px solid #aeb8c6;border-radius:50%}.choice-row.active i{border:6px solid var(--q-blue)}.cash-panel,.delivery-fields{display:grid;gap:9px;margin-top:12px;padding:12px;border-radius:12px;background:#f7f9fc}.cash-panel label{display:grid;gap:5px}.cash-panel>div{display:flex;justify-content:space-between}.cash-suggest{min-height:42px;border:1px solid #cfe1f7;border-radius:9px;background:#fff;color:var(--q-blue-dark);font-weight:700}.segment{display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:11px;background:#edf1f6}.segment button{min-height:42px;border:0;border-radius:8px;background:transparent;font-weight:700;color:#637083}.segment button.active{background:#fff;color:var(--q-blue-dark);box-shadow:0 2px 7px rgba(31,65,100,.1)}.cod-disabled{display:flex;align-items:center;gap:8px;color:#8a5b17;font-size:13px}.invoice-box{display:flex;justify-content:space-between;margin-top:16px;padding:13px;border-radius:11px;background:#f7f9fc}.invoice-box b{color:#8792a2}.pos-success{max-width:560px;margin:20px auto;text-align:center;padding:28px 18px}.success-mark{width:82px;height:82px;margin:auto;display:grid;place-items:center;border-radius:50%;background:#20bf6b;color:#fff;font-size:46px}.pos-success h2{color:#1d9c59}.pos-success>p,.pos-success>small{display:block;color:var(--q-muted)}.pos-success>strong{display:block;margin:12px 0 4px;color:var(--q-blue);font-size:32px}.success-summary{display:grid;gap:8px;margin:18px 0;padding:12px;border-radius:12px;background:#f7f9fc;text-align:left}.success-summary>div{display:flex;justify-content:space-between;gap:16px}.success-summary span{color:var(--q-muted)}.success-summary b{text-align:right}.success-actions{display:grid;gap:9px;margin-top:18px}.success-actions button{min-height:52px;justify-content:center}.customer-chip span{display:grid;gap:1px}.customer-chip span small{font-size:11px;color:var(--q-muted)}
.orders-screen{max-width:900px;margin:0 auto}.orders-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;margin-bottom:10px}.orders-search{position:relative}.orders-search input{width:100%;min-height:46px;padding:10px 42px 10px 13px;border:1px solid #dce4ee;border-radius:11px;font-size:16px}.orders-search .ui-icon{position:absolute;right:13px;top:13px;color:#718096}.orders-range{display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;margin:0 0 10px;color:var(--q-muted);font-size:12px;font-weight:700}.orders-range select{min-height:44px;max-width:220px;padding:0 30px 0 11px;border:1px solid #dce4ee;border-radius:10px;background:#fff;color:var(--q-ink);font:inherit;font-size:14px}.modern-order-list{border-top:1px solid var(--q-line)}.modern-order-row{padding:14px 4px;border-bottom:1px solid var(--q-line);cursor:pointer}.order-primary,.order-secondary,.order-tags{display:flex;align-items:center;justify-content:space-between;gap:10px}.order-primary b{color:#132842}.order-secondary{margin-top:4px;color:var(--q-muted);font-size:13px}.order-tags{justify-content:flex-start;margin-top:9px}.order-tags small{margin-left:auto;color:#8792a2}.order-customer,.order-facts>div,.order-totals>div{display:flex;align-items:center;justify-content:space-between;gap:12px}.order-customer{padding:10px 12px;border-radius:11px;background:#f7f9fc;margin-bottom:10px}.order-detail .detail-list span{display:grid;gap:2px}.order-detail .detail-list small{color:var(--q-muted)}.order-totals{display:grid;gap:6px;margin:10px 0}.order-totals .grand{padding-top:8px;border-top:1px solid var(--q-line);font-size:17px}.order-totals .grand b{color:var(--q-blue-dark)}.order-facts{display:grid;gap:8px;padding:10px 12px;border-radius:11px;background:#f7f9fc}.order-note{padding:8px 12px;border-left:3px solid var(--q-blue);background:#f8fbff;margin:8px 0}.order-detail-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:12px;margin-bottom:8px}.order-detail-actions button{width:100%;margin:0;padding:8px 5px;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:40px;box-sizing:border-box;line-height:1.2;border-radius:10px}.order-detail-actions button.order-action-full{grid-column:1/-1}.document-list{display:grid}.document-list>div,.document-einvoice{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border:0;border-bottom:1px solid var(--q-line);background:#fff;text-align:left}.document-list span{display:flex;align-items:center;gap:10px}.document-list b{display:grid;gap:3px}.document-list small{font-weight:500;color:var(--q-muted)}.document-list button{min-width:44px;min-height:44px;border:1px solid #dce4ee;border-radius:9px;background:#fff;color:var(--q-blue-dark)}.document-einvoice{width:100%}.document-einvoice>span+svg{margin-left:auto}
.warehouse-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px;padding-bottom:9px;border-bottom:1px solid var(--q-line)}.warehouse-tabs button{border-radius:9px}.warehouse-search>input{width:100%;min-height:46px;padding:10px 12px;margin-bottom:8px;border:1px solid #dce4ee;border-radius:11px;font-size:16px}.warehouse-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px}.warehouse-tools select{min-height:44px;padding:8px 10px;border:1px solid #dce4ee;border-radius:10px;background:#fff;font-size:14px}.warehouse-stock-list{display:grid}.stock-row{width:100%;display:grid;grid-template-columns:52px minmax(0,1fr) 70px 78px auto;align-items:center;gap:10px;padding:10px 2px;border:0;border-bottom:1px solid var(--q-line);background:#fff;text-align:left}.stock-row>span{min-width:0}.stock-row>span strong,.stock-row>span small,.stock-row>div small{display:block}.stock-row>span strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stock-row small{color:var(--q-muted);font-size:11px}.stock-row>div{text-align:right}.stock-row>div b{font-size:17px}.stock-row em{padding:5px 7px;border-radius:8px;background:#fff1e5;color:#a45b00;font-style:normal;font-size:11px}.warehouse-operation-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.warehouse-operation-grid button{min-height:116px;display:grid;place-items:center;align-content:center;gap:10px;border:0;border-radius:15px;background:#eff7ff;color:#126bbd}.warehouse-operation-grid button:nth-child(2){background:#fff3e8;color:#d36c14}.warehouse-operation-grid button:nth-child(3){background:#eaf8ff;color:#1683b6}.warehouse-operation-grid button:nth-child(4){background:#f1edff;color:#6c55c5}.warehouse-operation-grid .ui-icon{width:28px;height:28px}.warehouse-history{display:grid}.count-compare{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.count-compare>div{padding:12px;border-radius:11px;background:#f7f9fc}.count-compare span,.count-compare strong{display:block}.count-compare span{font-size:12px;color:var(--q-muted)}.count-compare strong{margin-top:5px;font-size:22px}.product-source{margin-top:18px;padding-top:16px;border-top:1px solid var(--q-line)}.product-source h3{margin:0 0 10px;font-size:16px}.source-links{display:grid;margin-top:10px}.source-links a{min-height:44px;display:flex;align-items:center;justify-content:space-between;color:var(--q-blue-dark);border-bottom:1px solid var(--q-line)}
.more-screen{display:grid;gap:14px;max-width:760px}.more-group{padding:16px;border-radius:16px;background:#fff;border:1px solid var(--q-line)}.more-group h2{font-size:16px;margin:0 0 10px}.more-actions button{display:flex;align-items:center;gap:8px;text-align:left}.device-list{display:grid}.device-list>div{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--q-line)}.device-list span{display:flex;align-items:center;gap:8px}.device-list b{font-size:12px;color:#667085}.row-price{display:block;margin-top:3px}
.directory-screen{width:100%;min-width:0;max-width:820px;margin:0 auto}.directory-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;min-width:0}.directory-toolbar>*{min-width:0}.directory-toolbar input{width:100%;min-height:46px;padding:10px 12px;border:1px solid #dce4ee;border-radius:11px;font-size:16px}.directory-filters{max-width:100%;display:flex;gap:7px;overflow:auto;padding:10px 0;scrollbar-width:none}.directory-filters button{min-height:44px;padding:0 14px;border:0;border-radius:999px;background:#edf1f6;color:#5f6c7e;font-weight:700;white-space:nowrap}.directory-filters button.active{background:var(--q-blue);color:#fff}.directory-list{display:grid;border-top:1px solid var(--q-line)}.directory-row{width:100%;min-height:70px;display:grid;grid-template-columns:44px minmax(0,1fr) auto 24px;align-items:center;gap:10px;padding:10px 2px;border:0;border-bottom:1px solid var(--q-line);background:#fff;text-align:left}.directory-row>span:nth-child(2){display:grid;gap:3px;min-width:0}.directory-row small{color:var(--q-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.directory-row em{padding:5px 7px;border-radius:8px;background:#eef4ff;color:var(--q-blue-dark);font-style:normal;font-size:11px}.directory-avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#eaf2ff;color:var(--q-blue-dark);font-weight:800}.contact-detail{display:grid;gap:14px}.contact-hero{display:flex;align-items:center;gap:12px}.contact-hero h3,.contact-hero p{margin:0}.contact-hero p{color:var(--q-muted)}
.customer-type-tabs{display:flex;gap:6px;overflow:auto;scrollbar-width:none}.customer-type-tabs button{min-height:44px;padding:0 12px;border:0;border-radius:999px;background:#edf1f6;color:#5f6c7e;font-weight:700;white-space:nowrap}.customer-type-tabs button.active{background:var(--q-blue);color:#fff}.customer-discount-hint{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-3px 0 10px;padding:6px 10px;border-radius:8px;background:#f8fafc;color:#334155;font-size:12px;font-weight:600;border:1px solid #e2e8f0}.customer-discount-hint .discount-apply-btn{border:0;background:#2563eb;color:#fff;border-radius:6px;padding:4px 10px;font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s ease}.customer-discount-hint .discount-apply-btn:hover{background:#1d4ed8}
@media(max-width:920px){.pos-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pos-browser{padding-bottom:100px}.pos-flow{margin-top:0}.orders-screen,.pos-browser{max-width:none}.warehouse-operation-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){body{background:var(--q-bg)}.content{padding:10px 10px calc(86px + env(safe-area-inset-bottom))}.card{box-shadow:0 3px 12px rgba(20,48,80,.05)}.topbar{background:#fff;border-bottom:1px solid var(--q-line)}.topbar h1{font-size:21px}.mobile-nav{left:0;right:0;bottom:0;border-radius:16px 16px 0 0;border-width:1px 0 0;padding:7px 6px calc(7px + env(safe-area-inset-bottom));box-shadow:0 -4px 18px rgba(25,55,90,.1)}.mobile-nav button{min-height:52px;padding:5px 2px}.customer-chip{margin:9px 0}.pos-chips{padding-bottom:8px}.pos-chips button,.order-filters button,.warehouse-tabs button{min-height:44px}.pos-grid{gap:7px}.pos-product{border-radius:11px}.pos-product-main{padding:6px 6px 10px}.pos-product strong{font-size:12px;min-height:30px}.pos-product b{font-size:12px}.pos-product em,.pos-product small{font-size:10px}.pos-add{width:44px;height:44px;right:0;bottom:0;border-radius:0;background:transparent;color:transparent;font-size:0}.pos-add::after{content:'+';width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:var(--q-blue);color:#fff;font-size:22px;line-height:1}.sale-mobile-bar{left:8px;right:8px;bottom:calc(67px + env(safe-area-inset-bottom));padding:6px;border-radius:13px}.sale-mobile-bar .primary-btn{min-width:118px}.pos-flow{border-radius:14px;padding:10px 12px calc(16px + env(safe-area-inset-bottom))}.orders-toolbar{grid-template-columns:1fr}.orders-toolbar>.primary-btn{width:100%}.stock-row{grid-template-columns:48px minmax(0,1fr) 58px 64px}.stock-row em{grid-column:2/-1;justify-self:start}.warehouse-operation-grid button{min-height:104px}.count-compare{grid-template-columns:1fr 1fr}.count-compare>div:last-child{grid-column:1/-1}.quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.quick-tile{min-height:84px}.alert-product-row{padding:8px 0}.alert-product-row .product-photo{width:44px;height:44px}.alert-product-row{grid-template-columns:44px minmax(0,1fr)}.toolbar-row.bottom{display:grid;grid-template-columns:1fr 1fr}.toolbar-row.bottom .search{grid-column:1/-1}.toolbar-row.bottom select:last-child{grid-column:1/-1}.p-row{padding:10px}.p-item .product-photo{width:50px;height:50px}}
/* STRICT PRINT ISOLATION & THERMAL RECEIPT STYLES */
#qbizPrintRoot {
  display: none !important;
}

@media print {
  @page {
    margin: 0 !important;
    size: auto;
  }
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    box-sizing: border-box !important;
  }
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    color: #000000 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, monospace !important;
    font-size: 12px;
    line-height: 1.35;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  body > *:not(#qbizPrintRoot) {
    display: none !important;
  }
  #app, #modalRoot, #toastRoot, #aiSheet, #qbizAiTrigger, .public-entry-overlay, .modal-backdrop, .sidebar, .topbar, .mobile-nav, .content, .main {
    display: none !important;
  }
  #qbizPrintRoot {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    color: #000000 !important;
    visibility: visible !important;
    overflow: visible !important;
  }
  #qbizPrintRoot * {
    visibility: visible !important;
  }
}

.qbiz-print-voucher {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 10px 12px;
  background: #ffffff;
  color: #000000;
  font-family: "Courier New", Courier, monospace, -apple-system, sans-serif;
  line-height: 1.35;
}
.qbiz-print-voucher.paper-RECEIPT_80,
.qbiz-print-voucher.paper-k80 {
  width: 76mm;
  max-width: 100%;
  font-size: 12px;
  padding: 8px 10px;
}
.qbiz-print-voucher.paper-RECEIPT_58,
.qbiz-print-voucher.paper-k58 {
  width: 54mm;
  max-width: 100%;
  padding: 6px 5px;
  font-size: 10.5px;
}
.qbiz-print-voucher.paper-A4,
.qbiz-print-voucher.paper-A5 {
  width: 100%;
  max-width: 720px;
  padding: 24px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
}
.pv-header {
  text-align: center;
  margin-bottom: 8px;
}
.pv-logo {
  max-width: 48px;
  max-height: 48px;
  margin: 0 auto 4px;
  display: block;
  object-fit: contain;
}
.pv-shop-name {
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.25;
  margin-bottom: 2px;
}
.paper-RECEIPT_58 .pv-shop-name {
  font-size: 13px;
}
.pv-shop-slogan {
  font-size: 10.5px;
  font-style: italic;
  color: #333333;
  margin-bottom: 3px;
}
.pv-shop-info {
  font-size: 11px;
  line-height: 1.3;
  color: #222222;
}
.paper-RECEIPT_58 .pv-shop-info {
  font-size: 9.5px;
}
.pv-wifi-box {
  margin: 5px auto 2px;
  padding: 3px 8px;
  border: 1px dotted #555555;
  border-radius: 4px;
  font-size: 10px;
  display: inline-block;
  line-height: 1.3;
  background: #fafafa;
}
.paper-RECEIPT_58 .pv-wifi-box {
  font-size: 9px;
  padding: 2px 5px;
}
.pv-divider {
  border: 0;
  border-top: 1px dashed #000000;
  margin: 7px 0;
  height: 0;
}
.pv-divider-double {
  border: 0;
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
  height: 3px;
  margin: 7px 0;
}
.pv-title {
  text-align: center;
  font-size: 14.5px;
  font-weight: 800;
  text-transform: uppercase;
  margin: 6px 0 2px;
  letter-spacing: 0.5px;
}
.paper-RECEIPT_58 .pv-title {
  font-size: 12.5px;
}
.pv-subtitle {
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  color: #444444;
  margin-bottom: 6px;
}
.pv-meta-grid {
  font-size: 11px;
  line-height: 1.35;
  margin: 5px 0;
}
.paper-RECEIPT_58 .pv-meta-grid {
  font-size: 9.5px;
}
.pv-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}
.pv-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: inherit;
  margin: 6px 0;
}
.pv-items-table th {
  border-bottom: 1px solid #000000;
  padding: 4px 0;
  font-weight: 700;
  text-align: left;
}
.pv-items-table th.pv-col-qty {
  text-align: center;
  width: 14%;
}
.pv-items-table th.pv-col-price,
.pv-items-table th.pv-col-total {
  text-align: right;
  width: 26%;
}
.pv-items-table td {
  padding: 4px 0;
  vertical-align: top;
  border-bottom: 1px dotted #cccccc;
}
.pv-item-name {
  font-weight: 700;
  line-height: 1.25;
}
.pv-item-desc {
  font-size: 0.88em;
  color: #444444;
  margin-top: 1px;
}
.pv-col-qty {
  text-align: center;
}
.pv-col-price,
.pv-col-total {
  text-align: right;
  white-space: nowrap;
}
.pv-totals {
  margin: 6px 0;
  font-size: 11.5px;
}
.paper-RECEIPT_58 .pv-totals {
  font-size: 10px;
}
.pv-total-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}
.pv-grand-total {
  border-top: 1px dashed #000000;
  border-bottom: 1px dashed #000000;
  padding: 6px 0;
  margin: 5px 0;
  font-size: 14.5px;
  font-weight: 800;
}
.paper-RECEIPT_58 .pv-grand-total {
  font-size: 12.5px;
}
.pv-footer {
  text-align: center;
  margin-top: 8px;
  font-size: 10.5px;
  color: #333333;
  line-height: 1.35;
}
.paper-RECEIPT_58 .pv-footer {
  font-size: 9px;
}
.pv-thanks {
  font-weight: 700;
  font-size: 11.5px;
  margin: 6px 0 3px;
}
.paper-RECEIPT_58 .pv-thanks {
  font-size: 10px;
}
.pv-policy {
  font-style: italic;
  font-size: 0.9em;
  margin: 3px 0;
}
.pv-qr-box {
  margin: 8px auto 4px;
  text-align: center;
}
.pv-qr-img {
  max-width: 96px;
  max-height: 96px;
  display: block;
  margin: 4px auto;
}
.pv-qr-label {
  font-size: 9.5px;
  color: #555555;
  margin-top: 2px;
}
.pv-branding {
  font-size: 9px;
  color: #666666;
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


@media(max-width:640px){.toolbar-panel{max-width:100%;overflow:hidden}.toolbar-row.bottom>*{min-width:0;width:100%}}
.pos-cart-bar{display:flex;position:fixed;left:max(300px,calc(50% - 310px));right:max(20px,calc(50% - 610px));bottom:18px;z-index:17;align-items:center;gap:8px;max-width:620px;padding:8px;border:1px solid #d6e3f1;border-radius:14px;background:rgba(255,255,255,.97);box-shadow:0 8px 24px rgba(20,54,99,.14)}
@media(max-width:920px){.pos-cart-bar{left:8px;right:8px;bottom:calc(67px + env(safe-area-inset-bottom));max-width:none}}

/* UX-04R2 final visual QA: sales-first dashboard hierarchy */
.dashboard-sales-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:0;overflow:hidden;border:0;background:#147fe0;color:#fff;box-shadow:0 10px 24px rgba(13,104,195,.18)}
.dashboard-today,.dashboard-month{min-width:0;padding:18px 20px;display:grid;gap:3px;align-content:center;background:transparent}
.dashboard-sales-hero button{border:0;color:inherit;text-align:left;font:inherit;cursor:pointer}
.dashboard-month{border-left:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07)}
.dashboard-sales-hero span{font-size:12px;font-weight:750;text-transform:uppercase;letter-spacing:.08em;opacity:.86}
.dashboard-sales-hero strong{font-size:26px;line-height:1.2;letter-spacing:-.025em}
.dashboard-sales-hero small{font-size:13px;color:rgba(255,255,255,.86);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dashboard-sales-subcards{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.2);border-top:1px solid rgba(255,255,255,.2)}.dashboard-sales-subcard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px;padding:11px 20px;background:rgba(7,52,114,.15)}.dashboard-sales-subcard+ .dashboard-sales-subcard{border-left:1px solid rgba(255,255,255,.2)}.dashboard-sales-subcard span{display:flex;align-items:center;gap:5px;font-size:11px}.dashboard-sales-subcard .ui-icon{width:15px;height:15px}.dashboard-sales-subcard b{grid-column:1/-1;font-size:15px}.dashboard-sales-subcard small{font-size:11px}.activity-row{width:100%;border:0;background:#fff;text-align:left;cursor:pointer}.activity-row>.ui-icon{width:18px;height:18px;color:#718096}
.dashboard-quick-card{margin-top:12px}
.dashboard-quick-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.dashboard-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}
.dashboard-metrics .metric-card{min-height:78px;padding:12px 14px}
.dashboard-metrics .metric-value{font-size:24px}
@media(max-width:920px){.dashboard-quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.dashboard-sales-hero{grid-template-columns:1fr 1fr;border-radius:13px}.dashboard-today,.dashboard-month{padding:13px 12px}.dashboard-sales-hero strong{font-size:19px}.dashboard-sales-hero small{font-size:10px}.dashboard-sales-subcard{padding:9px 12px}.dashboard-sales-subcard b{font-size:13px}.dashboard-sales-subcard small{font-size:10px}.dashboard-quick-card{padding:12px}.dashboard-quick-card .section-head{margin-bottom:8px}.dashboard-quick-grid{gap:6px}.dashboard-quick-grid .quick-tile{min-width:0;min-height:76px}.dashboard-metrics{gap:7px;margin:9px 0}.dashboard-metrics .metric-card{min-width:0;min-height:74px;padding:10px 11px}.dashboard-metrics .metric-value{font-size:22px}.board-two{gap:9px}.board-two .section-card{padding:12px}body[data-sale-step="cart"] .topbar,body[data-sale-step="checkout"] .topbar,body[data-sale-step="success"] .topbar{display:none}body[data-sale-step="cart"] .content,body[data-sale-step="checkout"] .content,body[data-sale-step="success"] .content{padding-top:8px}.pos-flow{border:0;box-shadow:none}.flow-head{margin-bottom:6px}.pos-success{margin-top:0}}
@media(max-width:640px){body[data-sale-step="cart"] .pos-flow,body[data-sale-step="checkout"] .pos-flow{padding-bottom:140px}body[data-sale-step="cart"] .flow-primary,body[data-sale-step="checkout"] .flow-primary{position:fixed;left:12px;right:12px;bottom:calc(74px + env(safe-area-inset-bottom));z-index:17;width:auto;margin:0;box-shadow:0 8px 24px rgba(16,42,86,.22)}}

/* Dashboard top delta: match the provided operational hierarchy without inventing financial data. */
.dashboard-sales-hero{grid-template-columns:1fr 1fr;border-radius:22px;background:linear-gradient(135deg,#1676dd 0%,#0d5fc3 100%);box-shadow:0 12px 28px rgba(13,92,186,.2)}
.dashboard-today,.dashboard-month{padding:25px 22px 29px;gap:6px}.dashboard-sales-hero span{font-size:15px;font-weight:650;text-transform:none;letter-spacing:0}.dashboard-sales-hero strong{font-size:34px;line-height:1.06;letter-spacing:-.045em;white-space:nowrap}
.dashboard-sales-subcards{gap:12px;padding:0 18px 18px;background:transparent;border:0}.dashboard-sales-subcard{display:grid;grid-template-columns:44px minmax(0,1fr) 28px;grid-template-rows:auto auto;align-items:center;gap:1px 10px;padding:13px 12px;border-radius:17px;background:rgba(255,255,255,.96);color:#102d5d;box-shadow:0 5px 14px rgba(2,51,122,.12)}.dashboard-sales-subcard+ .dashboard-sales-subcard{border-left:0}.dashboard-sales-subcard i{grid-row:1/-1;width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:#eaf3ff;color:#1472d3}.dashboard-sales-subcard span{font-size:12px;font-weight:700;opacity:1}.dashboard-sales-subcard .ui-icon{width:20px;height:20px}.dashboard-sales-subcard b{grid-column:2;font-size:18px;line-height:1.12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-sales-subcard em{grid-column:3;grid-row:1/-1;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#edf5ff;color:#1674d5}.dashboard-sales-subcard em .ui-icon{width:17px;height:17px}
.dashboard-sales-hero .dashboard-sales-subcard,.dashboard-sales-hero .dashboard-sales-subcard span,.dashboard-sales-hero .dashboard-sales-subcard b{color:#102d5d!important;opacity:1}.dashboard-sales-hero .dashboard-sales-subcard b{font-weight:800}.dashboard-sales-hero .dashboard-sales-subcard em{color:#1674d5!important}
.dashboard-quick-grid{grid-template-columns:1.25fr repeat(2,1fr);grid-template-rows:repeat(2,minmax(88px,1fr))}.dashboard-quick-grid .quick-tile:first-child{grid-row:1/-1;min-height:186px;padding:20px 17px;align-content:start}.dashboard-quick-grid .quick-tile:first-child .qt-ico{width:46px;height:46px;border-radius:15px}.dashboard-quick-grid .quick-tile:first-child strong{font-size:19px;margin-top:7px}.dashboard-quick-grid .quick-tile:first-child small{font-size:13px;line-height:1.4}.dashboard-quick-grid .quick-tile:not(:first-child){min-height:0;padding:14px 12px}.dashboard-quick-grid .quick-tile:not(:first-child) .qt-ico{width:34px;height:34px}
@media(max-width:640px){.dashboard-sales-hero{border-radius:18px}.dashboard-today,.dashboard-month{padding:20px 14px 23px}.dashboard-sales-hero span{font-size:13px}.dashboard-sales-hero strong{font-size:25px}.dashboard-sales-subcards{gap:9px;padding:0 12px 12px}.dashboard-sales-subcard{grid-template-columns:34px minmax(0,1fr) 22px;padding:9px 8px;border-radius:13px;gap:1px 7px}.dashboard-sales-subcard:not(:has(em)){grid-template-columns:34px minmax(0,1fr);padding-right:6px}.dashboard-sales-subcard:not(:has(em)) b{grid-column:2/-1;font-size:clamp(11px,2.9vw,13px)!important;letter-spacing:-0.3px;white-space:nowrap;overflow:visible;text-overflow:clip}.dashboard-sales-subcard i{width:33px;height:33px;border-radius:10px}.dashboard-sales-subcard i .ui-icon{width:17px;height:17px}.dashboard-sales-subcard span{font-size:10px}.dashboard-sales-subcard b{font-size:13px}.dashboard-sales-subcard em{width:21px;height:21px}.dashboard-sales-subcard em .ui-icon{width:14px;height:14px}.dashboard-quick-grid{gap:8px;grid-template-columns:1.18fr 1fr 1fr;grid-template-rows:repeat(2,82px)}.dashboard-quick-grid .quick-tile:first-child{min-height:172px;padding:14px 12px}.dashboard-quick-grid .quick-tile:first-child .qt-ico{width:40px;height:40px}.dashboard-quick-grid .quick-tile:first-child strong{font-size:16px;margin-top:3px}.dashboard-quick-grid .quick-tile:first-child small{font-size:11px}.dashboard-quick-grid .quick-tile:not(:first-child){padding:10px 8px}.dashboard-quick-grid .quick-tile:not(:first-child) strong{font-size:12px}}

/* Reference action rhythm: the sales tile leads; return/exchange remains visibly present but safely inactive. */
.dashboard-quick-grid{grid-template-rows:repeat(3,minmax(88px,1fr))}.dashboard-quick-grid .quick-tile:first-child{grid-column:1;grid-row:1/span 2}.dashboard-quick-grid .quick-tile:nth-child(4){grid-column:1;grid-row:3}.dashboard-quick-grid .quick-tile:nth-child(5){grid-column:2;grid-row:3}.dashboard-quick-grid .quick-tile:nth-child(6){grid-column:3;grid-row:3}.dashboard-return-tile .qt-ico{background:#f2f5fb!important;color:#526883!important}
@media(max-width:640px){.dashboard-quick-grid{grid-template-rows:repeat(3,82px)}.dashboard-quick-grid .quick-tile:first-child{min-height:172px}.dashboard-return-tile{padding:10px 8px!important}.dashboard-return-tile .qt-ico{width:32px!important;height:32px!important}.dashboard-quick-grid .quick-tile:first-child .qt-ico{width:48px;height:48px}.dashboard-quick-grid .quick-tile:first-child strong{font-size:18px;margin-top:7px}}

/* Delta completion: compact goods controls and real mobile work flows. */
.goods-row{grid-template-areas:none!important;display:flex!important;align-items:center!important;position:relative!important;padding:0!important;min-height:68px!important;background:#fff!important;border-bottom:1px solid var(--q-line)!important;overflow:hidden!important;touch-action:pan-y!important}.goods-row .swipe-actions{position:absolute!important;top:0!important;bottom:0!important;right:0!important;width:128px!important;display:flex!important;align-items:stretch!important;z-index:1!important;visibility:hidden!important;pointer-events:none!important}.goods-row.is-swiping .swipe-actions,.goods-row.reveal .swipe-actions{visibility:visible!important;pointer-events:auto!important}.goods-row .p-item{grid-area:auto!important;flex:1 1 auto!important;min-width:0!important;display:flex!important;align-items:center!important;gap:10px!important;min-height:68px!important;padding:8px 6px 8px 12px!important;background:#fff!important;position:relative!important;z-index:2!important;will-change:transform!important;transform:translate3d(0,0,0)!important;-webkit-transform:translate3d(0,0,0)!important;backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important;transition:transform .22s cubic-bezier(0.16,1,0.3,1),background .15s ease!important}.goods-row .p-item>div:last-child{min-width:0!important}.goods-row .row-exception{display:none!important}.goods-row .more-btn{grid-area:auto!important;flex:0 0 38px!important;width:38px!important;min-height:68px!important;display:grid!important;place-items:center!important;border:0!important;background:#fff!important;color:var(--q-muted)!important;position:relative!important;z-index:2!important;cursor:pointer!important;will-change:transform,opacity!important;transform:translate3d(0,0,0)!important;-webkit-transform:translate3d(0,0,0)!important;backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important;transition:transform .22s cubic-bezier(0.16,1,0.3,1),opacity .18s ease,background .15s ease!important}.goods-row.reveal>.more-btn{opacity:0!important;pointer-events:none!important}.goods-row .row-state{display:inline-flex;margin-top:4px;font-size:11px;font-weight:800}.goods-row .row-state.warn{color:#986600}.goods-row .row-state.danger{color:#ba3838}.goods-row.selected .p-item,.goods-row.selected .more-btn{background:#f0f7ff!important}.goods-row .row-select{flex:0 0 28px!important;width:28px!important;height:28px!important;margin:0 2px 0 0!important;padding:0!important;border:0!important;background:transparent!important;display:grid!important;place-items:center!important;cursor:pointer!important}.goods-row .row-select span{width:20px;height:20px;display:grid;place-items:center;border:2px solid #94a3b8;border-radius:6px;background:#fff;color:#fff;font-size:12px;font-weight:800;transition:all 0.12s ease}.goods-row.selected .row-select span{border-color:var(--q-blue,#0284c7);background:var(--q-blue,#0284c7)}.swipe-actions button{width:64px;min-width:64px;border:0;color:#fff;font-size:13.5px;font-weight:750;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation}.swipe-actions button:first-child,.swipe-actions button.swipe-edit{background:#177bdd!important}.swipe-actions button:last-child,.swipe-actions button.swipe-delete{background:#dc2626!important}.swipe-actions button:active{filter:brightness(0.92)}.goods-row.reveal>.p-item,.goods-row.reveal>.more-btn{transform:translate3d(-128px,0,0)!important;-webkit-transform:translate3d(-128px,0,0)!important}
.goods-toolbar{padding:14px;margin-bottom:12px}.goods-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.goods-title h2{margin:0;font-size:20px}.goods-title p{margin:3px 0 0;font-size:13px;color:var(--q-muted)}.goods-title>div:last-child{display:flex;gap:8px}.compact{min-width:44px;min-height:44px;padding:0 12px}.goods-segments{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:12px;padding:4px;border-radius:12px;background:#edf1f6}.goods-segments button{min-height:42px;border:0;border-radius:9px;background:transparent;color:#607086;font-weight:750}.goods-segments button.active{background:#fff;color:var(--q-blue-dark);box-shadow:0 2px 7px rgba(31,65,100,.1)}.goods-search{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:8px;margin-top:10px}.goods-search input{min-width:0;min-height:48px;padding:10px 13px;border:1px solid #dce4ee;border-radius:11px;font-size:16px}.goods-search button{min-width:48px;min-height:48px;border:1px solid #dce4ee;border-radius:11px;background:#fff;color:var(--q-blue);display:grid;place-items:center}.goods-tools{display:grid!important;grid-template-columns:42px minmax(0,1.1fr) 58px minmax(0,1.35fr) 36px!important;gap:4px!important;align-items:center!important;margin-top:8px!important}.goods-tools>*{min-width:0;min-height:38px;height:38px;padding:0 6px;border:1px solid #dce4ee;border-radius:9px;background:#fff;color:#526176;font:inherit;font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}.goods-tools .btn-tool-select.active{background:var(--q-blue,#0284c7);color:#fff;border-color:var(--q-blue,#0284c7)}.goods-tools .btn-tool-display{display:grid;place-items:center;padding:0;color:var(--q-blue-dark,#0868c6)}.goods-tools .btn-tool-display .ui-icon{width:18px;height:18px}.selection-bar{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:8px;padding:4px 8px;border-radius:9px;background:#eef6ff;border:1px solid #bfdbfe;color:var(--q-blue-dark);min-height:36px;box-sizing:border-box}.selection-bar .sel-btn-compact{min-height:28px;height:28px;padding:0 8px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;color:var(--q-blue-dark,#0868c6);font-size:11.5px;font-weight:700;white-space:nowrap}.selection-bar .sel-status-badge{font-size:11.5px;color:#1e3a8a;white-space:nowrap;display:inline-flex;align-items:center;gap:3px}.selection-bar .sel-btn-action{min-height:28px;height:28px;padding:0 10px;border:0;border-radius:6px;background:var(--q-blue,#0284c7);color:#fff;font-size:12px;font-weight:750;white-space:nowrap}.selection-bar .sel-btn-action:disabled{opacity:.45;background:#94a3b8}.goods-list{overflow:hidden}.row-price{font-size:13px}.product-grid.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}.product-grid.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}.display-settings{display:grid;gap:12px}.display-settings h4{margin:0;font-size:15px}.display-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.display-options label,.check-list label{display:flex;align-items:center;gap:8px;min-height:42px;padding:8px 10px;border:1px solid var(--q-line);border-radius:10px;font-size:14px}.check-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.display-device-section{margin-top:14px;padding-top:12px;border-top:1px dashed var(--q-line)}.display-device-section h4{margin:0 0 8px;font-size:14px;font-weight:750;color:#1e293b}.device-display-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.device-card{padding:10px 8px;border:1.5px solid #e2e8f0;border-radius:12px;background:#f8fafc;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;transition:all 0.15s ease}.device-card.active{border-color:var(--q-blue,#0284c7);background:#eff6ff}.dev-card-icon{width:34px;height:34px;border-radius:9px;background:#ffffff;border:1px solid #cbd5e1;display:grid;place-items:center;color:var(--q-blue-dark,#0868c6)}.device-card.active .dev-card-icon{background:var(--q-blue,#0284c7);color:#ffffff;border-color:var(--q-blue,#0284c7)}.dev-card-info strong{display:block;font-size:13px;color:#0f172a}.dev-card-info small{display:block;font-size:10px;color:#64748b;line-height:1.3;margin-top:2px}@media(max-width:640px){.device-display-cards{grid-template-columns:1fr}}.action-sheet-list,.warehouse-manage-list{display:grid}.action-sheet-list button,.warehouse-manage-list>div{min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:10px;border:0;border-bottom:1px solid var(--q-line);background:#fff;text-align:left;font-size:15px}.action-sheet-list button .ui-icon{margin-left:auto}.warehouse-manage-list>div>span{display:grid;gap:2px}.warehouse-manage-list small{color:var(--q-muted);font-size:12px}.warehouse-manage-list button{min-width:44px;min-height:44px;border:1px solid var(--q-line);border-radius:9px;background:#fff;color:var(--q-blue-dark);font-weight:750}.stock-flow{display:grid;gap:12px}.stock-search{display:grid;grid-template-columns:minmax(0,1fr) 36px;align-items:center;border:1px solid #dce4ee;border-radius:11px;background:#fff}.stock-search input{min-width:0;min-height:46px;padding:10px 12px;border:0;background:transparent;font-size:16px}.stock-search .ui-icon{color:var(--q-blue)}.stock-product-results{display:grid;max-height:216px;overflow:auto}.stock-product-results button{display:grid;gap:2px;min-height:52px;padding:8px 10px;border:0;border-bottom:1px solid var(--q-line);background:#fff;text-align:left}.stock-product-results small,.line-item small{color:var(--q-muted);font-size:12px}.selected-stock-product{display:flex;align-items:center;gap:10px;min-height:54px;padding:8px 10px;border-radius:11px;background:#f6f9fc}.selected-stock-product>span{display:grid;gap:3px}.stock-entry-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stock-entry-row label{display:grid;gap:6px;font-weight:700;font-size:13px}.stock-entry-row input{min-height:44px;padding:8px 10px;border:1px solid #dce4ee;border-radius:9px;font-size:16px}.stock-entry-row .quantity-control{grid-template-columns:44px 1fr 44px}.stock-entry-row .quantity-control button{min-width:44px;min-height:44px}.line-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--q-line)}.line-item span{display:grid;gap:3px}.line-item button{min-width:44px;min-height:44px;border:0;background:transparent;color:#d64040;font-size:22px}.count-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.count-summary span{padding:8px;border-radius:9px;background:#f7f9fc;text-align:center;font-size:12px}.count-summary b{display:block;margin-top:4px;font-size:17px}.line-discount-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;margin-top:6px;padding:0;border:0;background:transparent;color:var(--q-blue-dark);font-weight:700;text-align:left}.line-discount-editor{display:flex;gap:6px;align-items:center;margin-top:6px}.line-discount-editor .discount-mode{min-width:38px;min-height:38px;height:38px;padding:0 10px;font-size:14px;border-radius:8px}.line-discount-editor input{flex:1;min-width:0;height:38px;min-height:38px;padding:0 10px;border:1px solid #dce4ee;border-radius:8px;font-size:15px}.field-limit{color:#8a5b17;font-size:12px;line-height:1.35}
.goods-row{min-height:64px}.goods-row .qty{display:none}.warehouse-operation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.warehouse-operation-grid button:nth-child(5){background:#eef4ff;color:#315f96}.alert-product-row.compact{grid-template-columns:44px minmax(0,1fr) 24px;min-height:60px}.alert-product-row.compact .ui-icon{color:#718096}.alert-product-row.compact>b,.alert-product-row.compact .alert-stock{display:none}
@media(max-width:640px){.goods-toolbar{padding:12px}.goods-title h2{font-size:18px}.goods-tools{grid-template-columns:42px minmax(0,1.1fr) 58px minmax(0,1.35fr) 36px!important}.goods-tools>*{font-size:11.5px;padding:0 4px}.goods-tools select{padding-right:2px}.goods-row{min-height:64px;padding:0}.goods-row .p-item{gap:9px}.goods-row .p-item strong{font-size:14px}.goods-row .p-item span{margin-top:2px}.goods-row .row-price{margin-top:1px}.goods-row .row-exception{display:none}.goods-row.reveal>.p-item,.goods-row.reveal>.more-btn{transform:translate3d(-128px,0,0)!important;-webkit-transform:translate3d(-128px,0,0)!important}.swipe-actions button{min-width:64px}.check-list{grid-template-columns:1fr}.display-options{grid-template-columns:1fr}.product-grid.grid3{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.product-grid.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}.stock-entry-row{grid-template-columns:1fr}.count-summary{font-size:11px}.pos-grid.list{grid-template-columns:1fr}.pos-grid.list .pos-product{display:grid;grid-template-columns:84px minmax(0,1fr)}.pos-grid.list .pos-product-main{grid-template-columns:72px minmax(0,1fr);column-gap:8px;align-items:center}.pos-grid.list .pos-product-image{grid-row:1 / span 4;width:72px;height:64px}.pos-grid.list .pos-product strong{min-height:auto}.pos-grid.list .pos-add{top:0;bottom:0;height:auto}.line-discount-trigger{font-size:13px}}
@media(max-width:920px){.header-shortcut{width:auto!important;padding:0 10px!important}.header-shortcut span{display:inline!important;font-size:13px;white-space:nowrap}.display-settings{gap:8px}.display-settings h4{font-size:14px}.display-settings .display-options{grid-template-columns:1fr 1fr;gap:6px}.display-settings .display-options label,.display-settings .check-list label{min-height:36px;padding:6px 8px;font-size:13px}.display-settings .check-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.display-settings .density-row{display:grid;grid-template-columns:80px minmax(0,1fr);align-items:center;gap:8px}.display-settings .density-row .segment{padding:2px}.display-settings .density-row .segment label{min-height:34px;padding:5px 8px;font-size:13px}.display-settings .pos-view-row{display:grid;grid-template-columns:80px minmax(0,1fr);align-items:center;gap:8px}.display-settings .pos-view-row .display-options{grid-template-columns:repeat(3,minmax(0,1fr))}.display-settings .pos-view-row label{padding:6px;font-size:12px}}
.category-picker{display:grid;gap:6px}.category-picker label{display:flex;align-items:center;gap:9px;min-height:44px;padding:8px 10px;border:1px solid var(--q-line);border-radius:10px;font-size:14px}
@media(max-width:640px){.goods-tools{grid-template-columns:42px minmax(0,1.1fr) 58px minmax(0,1.35fr) 36px!important}.goods-tools>*{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.goods-tools button{padding:0 4px}}
@media(min-width:921px){.goods-tools{grid-template-columns:74px 170px 84px 190px 42px!important;justify-content:start}.selection-bar{max-width:540px}}
.compact-edit-form{display:grid;gap:14px}.edit-primary-grid{gap:10px}.edit-primary-grid .field input,.edit-primary-grid .field select{min-height:44px}.compact-image-field{display:grid;gap:7px;padding-top:2px}.compact-image-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.compact-image-head label{font-size:13px;font-weight:800;color:#344054}.compact-image-head small{font-size:11px;color:var(--q-muted)}.compact-image-preview{display:flex;gap:8px;min-height:70px;overflow:auto;padding:4px 0}.compact-image-empty{width:72px;height:72px;border:1px dashed #cfd9e6;border-radius:12px;background:#f7f9fc;display:grid;place-items:center;color:var(--q-muted);font-size:11px;flex:0 0 auto}.compact-image-empty .ui-icon{width:20px;height:20px}.compact-image-thumb{position:relative;width:72px;height:72px;border-radius:12px;overflow:hidden;background:#edf2f8;flex:0 0 auto;cursor:grab}.compact-image-thumb img{width:100%;height:100%;object-fit:cover}.compact-image-thumb button{position:absolute;top:3px;right:3px;width:22px;height:22px;min-height:22px;padding:0;border:0;border-radius:50%;background:rgba(15,23,42,.78);color:#fff;line-height:1}.compact-upload{justify-self:start;min-height:36px;padding:0 12px;font-size:13px}.edit-more{border-top:1px solid var(--q-line);padding-top:10px}.edit-more summary{cursor:pointer;color:var(--q-blue-dark);font-size:13px;font-weight:800;min-height:36px;display:flex;align-items:center}.category-manager{display:grid;gap:10px}.category-manager-top{display:flex;justify-content:space-between;gap:8px}.category-manager-top button{min-height:40px}.category-tree{display:grid;gap:5px;max-height:45vh;overflow:auto}.category-tree-row{display:flex;align-items:center;gap:6px;padding-left:calc(var(--depth) * 18px)}.category-tree-select{display:flex;align-items:center;gap:8px;min-height:44px;min-width:0;flex:1;padding:7px 9px;border:1px solid var(--q-line);border-radius:10px;background:#fff;text-align:left;color:var(--text)}.category-tree-select.active{border-color:var(--q-blue);background:#eef6ff;color:var(--q-blue-dark);font-weight:800}.category-tree-select img,.category-dot{width:28px;height:28px;border-radius:8px;object-fit:cover;flex:0 0 auto}.category-dot{background:#e8eef7}.category-child-btn{min-width:52px;min-height:40px;padding:0 6px;border:1px solid var(--q-line);border-radius:9px;background:#fff;color:var(--q-blue-dark);font-size:12px;font-weight:750}.category-manager-help{margin:0;color:var(--q-muted);font-size:12px}.category-image-field{display:grid;gap:7px}.category-image-field>label{font-size:13px;font-weight:800;color:#344054}.category-image-field>label span{font-weight:500;color:var(--q-muted)}.category-image-row{display:flex;align-items:center;gap:10px}.category-image-preview{position:relative;width:64px;height:64px;border:1px dashed #cfd9e6;border-radius:12px;background:#f7f9fc;display:grid;place-items:center;overflow:hidden;color:var(--q-muted)}.category-image-preview img{width:100%;height:100%;object-fit:cover}.category-image-preview button{position:absolute;right:3px;top:3px;width:21px;height:21px;min-height:21px;padding:0;border:0;border-radius:50%;background:rgba(15,23,42,.78);color:#fff;line-height:1}.category-image-preview .ui-icon{width:22px;height:22px}.pos-grid.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}.pos-grid.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}.pos-grid.list{grid-template-columns:1fr}
@media(max-width:920px){.pos-grid.grid2{grid-template-columns:repeat(2,minmax(0,1fr))!important}.pos-grid.grid3{grid-template-columns:repeat(3,minmax(0,1fr))!important}.pos-grid.list{grid-template-columns:1fr!important}}
.settings-center,.print-center{display:grid;gap:12px;max-width:900px}.settings-section{padding:14px}.settings-list,.print-template-list,.print-job-list{display:grid}.settings-list>button,.print-template-list>button,.print-job-list>div{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px;padding:10px 0;border:0;border-bottom:1px solid var(--q-line);background:#fff;text-align:left;color:inherit}.settings-list>button>span,.print-template-list>button>span,.print-job-list>div>span{display:grid;gap:3px;min-width:0}.settings-list b,.print-template-list b,.print-job-list b{font-size:14px}.settings-list small,.print-template-list small,.print-job-list small{font-size:12px;color:var(--q-muted)}.settings-list .ui-icon{float:left;margin-right:8px}.print-tabs{max-width:360px}.print-editor{display:grid;gap:12px}.print-editor h3{margin:2px 0 0;font-size:15px}.print-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.print-fields label{display:flex;align-items:center;gap:7px;min-height:36px;font-size:13px}.print-preview{display:grid;gap:5px;max-width:360px;margin:auto;padding:var(--mt) var(--mr) var(--mb) var(--ml);border:1px dashed #b9c8da;background:#fff;color:#192b43;font-size:var(--print-font);line-height:var(--print-leading)}.print-preview header,.print-preview footer{display:grid;gap:2px;text-align:center}.print-preview header small,.print-preview footer{color:#53667f}.print-preview-items{display:grid;gap:5px;padding:7px 0;border-top:1px dashed #ccd7e5;border-bottom:1px dashed #ccd7e5}.print-preview-items>div,.print-preview-line{display:flex;justify-content:space-between;gap:10px}.print-preview-items small{display:block;color:#65758a}.print-preview-line.strong{font-size:1.1em}.print-job-list em{font-size:11px;font-style:normal;font-weight:800;color:#476681}.paper-RECEIPT_58{max-width:240px}.paper-RECEIPT_80{max-width:320px}.paper-LABEL_50x30{max-width:250px;min-height:120px}.paper-A4,.paper-A5{max-width:420px;min-height:260px}@media(max-width:640px){.settings-section{padding:12px}.print-fields{grid-template-columns:1fr}.print-preview{max-width:100%}}
.report-center{display:grid;gap:12px;max-width:1000px}.report-filter .segment{max-width:520px}.report-custom-range{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.report-custom-range label{display:grid;gap:4px;flex:1 1 140px;font-size:12px;font-weight:750;color:var(--q-muted)}.report-custom-range input{min-height:42px;padding:7px 9px;border:1px solid var(--q-line);border-radius:9px;background:#fff;font:inherit;font-size:16px;color:var(--text)}.report-custom-range button{align-self:end;min-height:42px}.report-tabs{display:flex;gap:7px;overflow:auto;padding-bottom:2px}.report-tabs button{min-height:40px;padding:0 12px;border:1px solid var(--q-line);border-radius:10px;background:#fff;color:#51627a;font-weight:750;white-space:nowrap}.report-tabs button.active{border-color:#b6d3f5;background:#edf6ff;color:var(--q-blue-dark)}.report-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.report-metrics>div{display:grid;gap:4px;min-height:78px;padding:12px;border:1px solid var(--q-line);border-radius:12px;background:#fff}.report-metrics span{font-size:12px;color:var(--q-muted)}.report-metrics b{font-size:17px;color:var(--q-blue-dark)}@media(max-width:640px){.report-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.report-metrics>div{min-height:70px;padding:10px}.report-metrics b{font-size:15px}.report-custom-range{display:grid;grid-template-columns:1fr 1fr}.report-custom-range button{grid-column:1/-1}}

/* Feature-completion surfaces: compact, honest capability states; dashboard is intentionally untouched. */
.feature-center{display:grid;gap:12px;width:100%;max-width:1000px;min-width:0}.feature-panel{padding:14px;min-width:0}.surface-status{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:850;font-style:normal;white-space:nowrap}.surface-status.working{background:#e7f8f0;color:#13775b}.surface-status.prepared{background:#eef4ff;color:#245996}.surface-status.blocked{background:#fff1eb;color:#a7441d}.surface-callout{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border:1px solid #dfe8f2;border-radius:11px;background:#f7faff}.surface-callout p{margin:0;color:var(--q-muted);font-size:12px;line-height:1.45}.surface-callout b{font-size:13px}.feature-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.feature-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px}.feature-toolbar .segment{max-width:360px}.hub-list{display:grid}.hub-list>button{display:grid;grid-template-columns:minmax(0,1fr) auto 20px;align-items:center;gap:8px;width:100%;min-height:62px;padding:9px 0;border:0;border-bottom:1px solid var(--q-line);background:transparent;text-align:left;color:inherit}.hub-list>button:last-child{border-bottom:0}.hub-list>button>span:first-child{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:8px;align-items:center;min-width:0}.hub-list>button .ui-icon{grid-row:1/3;width:21px}.hub-list b,.hub-list small{grid-column:2;min-width:0}.hub-list b{font-size:14px}.hub-list small{font-size:12px;color:var(--q-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.feature-hub{max-width:820px}.option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.report-field,.option-grid label,.report-warehouse{display:grid;gap:5px;font-size:12px;font-weight:750;color:var(--q-muted);min-width:0}.report-field select,.option-grid select,.report-warehouse select{min-height:44px;padding:8px 10px;border:1px solid var(--q-line);border-radius:10px;background:#fff;color:var(--text);font:inherit;font-size:15px;font-weight:600;width:100%}.report-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:end}.report-filter .segment{flex:1 1 520px}.report-warehouse{min-width:0}.report-custom-range{grid-column:1/-1}.step-strip{display:flex;gap:7px;overflow:auto;padding:2px 0;scrollbar-width:none}.step-strip button{display:flex;align-items:center;gap:6px;min-height:40px;padding:5px 10px;border:1px solid var(--q-line);border-radius:10px;background:#fff;color:#68778b;white-space:nowrap}.step-strip i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#edf1f6;font-size:11px;font-style:normal;font-weight:800}.step-strip button.active{border-color:#9dc7f4;color:var(--q-blue-dark);background:#edf6ff}.step-strip button.done i{background:#def5ea;color:#14765c}.upload-drop{display:grid;place-items:center;gap:5px;min-height:120px;margin-top:12px;padding:16px;border:1px dashed #afc2d8;border-radius:12px;background:#f9fbfd;text-align:center;cursor:pointer}.upload-drop input{max-width:100%;font-size:16px}.upload-drop small{color:var(--q-muted)}.mapping-preview{display:grid;margin-top:12px;border:1px solid var(--q-line);border-radius:12px;overflow:hidden}.mapping-preview h3{margin:0;padding:10px 12px;background:#f5f8fb;font-size:14px}.mapping-preview>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px;padding:9px 12px;border-top:1px solid var(--q-line);font-size:12px}.mapping-preview small{color:var(--q-muted)}.compact-source-list{display:grid}.compact-source-list>button,.notification-center-list>button{display:grid;grid-template-columns:minmax(0,1fr) auto 20px;align-items:center;gap:10px;min-height:60px;width:100%;padding:8px 0;border:0;border-bottom:1px solid var(--q-line);background:#fff;text-align:left;color:inherit}.compact-source-list span,.notification-center-list span{display:grid;gap:3px;min-width:0}.compact-source-list small,.notification-center-list small{color:var(--q-muted)}.three-stage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}.three-stage>div{display:grid;gap:4px;min-height:100px;padding:10px;border:1px solid var(--q-line);border-radius:11px}.three-stage i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#eaf3ff;color:var(--q-blue-dark);font-style:normal;font-weight:800}.three-stage small{color:var(--q-muted)}.notification-center-list{padding-top:4px}.notification-center-list>button{grid-template-columns:10px minmax(0,1fr) 20px}.notification-center-list>button.read{opacity:.58}.severity{width:8px;height:8px;border-radius:50%;background:#4e8fd5}.severity.warning{background:#f59e0b}.severity.critical{background:#e25555}.connector-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.connector-grid article{display:grid;gap:8px;align-content:start;min-height:150px;padding:12px;border:1px solid var(--q-line);border-radius:12px;background:#fff}.connector-grid article>div{display:flex;justify-content:space-between;gap:8px}.connector-grid p{margin:0;color:var(--q-muted);font-size:12px;line-height:1.45}.connector-grid button{margin-top:auto}.permission-matrix{display:grid;border:1px solid var(--q-line);border-radius:12px;overflow:hidden;margin-bottom:12px}.permission-matrix>div{display:grid;grid-template-columns:minmax(130px,1fr) 110px 90px;align-items:center;min-height:42px;padding:6px 10px;border-bottom:1px solid var(--q-line);font-size:12px}.permission-matrix>div:first-child{background:#f5f8fb}.permission-matrix b:not(:first-child){text-align:center}.context-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}.context-grid button{display:grid;place-items:center;gap:5px;min-height:105px;padding:10px;border:1px solid var(--q-line);border-radius:12px;background:#fff;color:inherit}.context-grid small{color:var(--q-muted);font-size:11px}.capability-list{display:grid;margin-top:10px}.capability-list>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--q-line);font-size:12px}.capability-list b{color:var(--q-muted)}.product-advanced{margin-top:14px;padding-top:4px;border-top:1px solid var(--q-line)}.product-advanced summary,.contact-detail summary{min-height:44px;display:flex;align-items:center;font-weight:800;cursor:pointer}.settings-list>button{position:relative}.settings-list>button>.surface-status{margin-left:auto}.report-prepared .empty{min-height:150px}.contact-hero .primary-btn{margin-left:auto}.feature-panel details{margin-top:10px}
.feature-panel .transaction-row{display:flex!important;align-items:center!important;gap:8px!important}
.feature-panel .transaction-row span{flex:1 1 auto!important;min-width:0!important;overflow:hidden!important}
.feature-panel .transaction-row span strong,.feature-panel .transaction-row span small{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:block!important}
.feature-panel .transaction-row b{white-space:nowrap!important;flex-shrink:0!important;margin-left:auto!important;text-align:right!important;font-variant-numeric:tabular-nums!important;line-height:1.2!important}
.feature-panel .transaction-row .ui-icon{flex-shrink:0!important;margin-left:2px!important}
@media(max-width:640px){.feature-panel{padding:12px}.option-grid,.connector-grid{grid-template-columns:1fr}.feature-actions{position:sticky;bottom:calc(70px + env(safe-area-inset-bottom));padding:8px 0;background:#fff}.mapping-preview>div{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.mapping-preview small{grid-column:1/-1}.three-stage{grid-template-columns:1fr}.three-stage>div{min-height:76px;grid-template-columns:30px minmax(0,1fr);align-items:center}.three-stage small{grid-column:2}.permission-matrix{overflow:auto}.permission-matrix>div{min-width:360px}.context-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.context-grid button{min-height:96px;padding:7px}.context-grid small{display:none}.feature-toolbar{align-items:stretch;flex-direction:column}.feature-toolbar .segment{max-width:none}.feature-toolbar>.secondary-btn{align-self:flex-end}.report-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.report-warehouse{min-width:0}.report-custom-range{display:grid;grid-template-columns:1fr 1fr;gap:8px;grid-column:1/-1}.report-custom-range button{grid-column:1/-1}.hub-list>button{min-height:58px}.surface-callout{display:grid}.contact-hero{align-items:flex-start}.contact-hero .primary-btn{margin-left:auto}.settings-list>button{padding-right:2px}}
.hub-list>button>span:first-child{grid-column:1;grid-row:1}.hub-list>button>.ui-icon{grid-column:3;grid-row:1;width:20px}.feature-center .primary-btn:disabled{opacity:.42;cursor:not-allowed;filter:grayscale(.35)}

/* POS transaction delta: preserve the current visual language while reducing travel. */
.mobile-nav button{font-size:13px}.mobile-nav .ui-icon{width:23px;height:23px}.mobile-nav button.active span{font-weight:850}.settings-muted{opacity:.7}
.pos-inline-qty{position:absolute;right:5px;bottom:5px;display:grid;grid-template-columns:30px 24px 30px;align-items:center;border:1px solid #cfe0f4;border-radius:10px;background:#fff;overflow:hidden}.pos-inline-qty button{height:32px;border:0;background:#edf5ff;color:var(--q-blue-dark);font-size:18px}.pos-inline-qty span{text-align:center;font-size:12px;font-weight:800}
.order-options,.checkout-more{margin-top:12px;border-top:1px solid var(--q-line)}.order-options summary,.checkout-more summary{min-height:44px;display:flex;align-items:center;color:var(--q-blue-dark);font-weight:800;cursor:pointer}.settings-section .settings-list .settings-muted small{color:#8792a2}
.checkout-screen>.choice-section:has([data-payment-choice]){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.checkout-screen>.choice-section:has([data-payment-choice]) h3{grid-column:1/-1}.checkout-screen>.choice-section:has([data-payment-choice]) .choice-row{justify-content:center;min-height:42px;padding:0 6px;border:1px solid var(--q-line);border-radius:10px}.checkout-screen>.choice-section:has([data-payment-choice]) .choice-row i{display:none}.checkout-screen>.choice-section:has([data-payment-choice]) .choice-row.active{border-color:var(--q-blue);background:#eaf3ff;color:var(--q-blue-dark);font-weight:800}.cart-row-title>span{display:grid;min-width:0}.cart-row-title>span small{color:var(--q-muted);font-size:11px}
@media(max-width:920px){body[data-sale-step="cart"] .mobile-nav,body[data-sale-step="checkout"] .mobile-nav,body[data-sale-step="success"] .mobile-nav{display:none!important}body[data-sale-step="cart"] .content,body[data-sale-step="checkout"] .content,body[data-sale-step="success"] .content{padding-bottom:86px}body[data-sale-step="cart"] .flow-primary,body[data-sale-step="checkout"] .flow-primary{bottom:calc(12px + env(safe-area-inset-bottom))}}
@media(max-width:640px){.mobile-nav button{font-size:13px}.mobile-nav button span{white-space:nowrap}.mobile-nav .ui-icon{width:23px;height:23px}.pos-search-row input,.pos-search-row button{height:44px;min-height:44px}.pos-chips button{min-height:38px;padding:0 13px}.pos-browser{padding-bottom:118px}.pos-grid.list{gap:7px}.pos-grid.list .pos-product{display:block;min-height:88px}.pos-grid.list .pos-product-main{min-height:88px;display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:10px;align-content:center;padding:8px 52px 8px 8px}.pos-grid.list .pos-product-image{grid-column:1;grid-row:1/4;width:72px;height:72px}.pos-grid.list .pos-product strong{grid-column:2;grid-row:1;min-height:0;font-size:14px}.pos-grid.list .pos-product small{grid-column:2;grid-row:2;font-size:11px}.pos-grid.list .pos-product b{grid-column:2;grid-row:3;font-size:14px}.pos-grid.list .pos-add{top:22px;right:8px;bottom:auto;width:44px;height:44px}.pos-grid.list .pos-inline-qty{right:6px;bottom:26px;grid-template-columns:28px 22px 28px}.cart-row{grid-template-columns:64px minmax(0,1fr);padding:8px 0}.cart-row .pos-product-image{width:64px;height:64px}.cart-row-title .cart-remove-btn{width:36px;height:36px}.cart-row-bottom .quantity-control{grid-template-columns:28px 32px 28px;width:88px;min-width:88px}.line-discount-trigger{min-height:26px}.more-group{padding:12px}.more-group h2{margin-bottom:4px}.hub-list>button{min-height:52px;padding:6px 0}}
@media(max-width:640px){.feature-actions{position:static;padding:8px 0 0}}
.print-preview{width:var(--content-width,100%);max-width:100%}
.print-preview header img{width:var(--logo-size,24px);height:var(--logo-size,24px);object-fit:contain;margin:0 auto 3px}
.paper-CUSTOM{width:min(var(--print-width,50mm),100%);min-height:var(--print-height,30mm)}
.print-custom-size[hidden]{display:none}
.settings-unavailable{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px;padding:10px 0;color:#51627a}.settings-unavailable>span{display:grid;gap:3px;min-width:0}.settings-unavailable .ui-icon{float:left;margin-right:8px}.settings-unavailable b{font-size:14px;color:var(--text)}.settings-unavailable small{font-size:12px;color:var(--q-muted)}.settings-unavailable em{flex:0 0 auto;padding:5px 8px;border-radius:8px;background:#f2f5f9;color:#69798d;font-size:11px;font-style:normal;font-weight:750}

/* Dashboard "Thao tác nhanh": khung Bán hàng lớn gồm 2 phần (Bán hàng + Trả/Đổi); chỉ tiêu đề, không mũi tên. */
.dashboard-quick-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(88px,1fr));gap:10px}
.dashboard-quick-grid .quick-tile{grid-column:auto;grid-row:auto;padding:12px 10px;align-content:center;min-height:88px}
.dashboard-quick-grid .quick-tile small{display:none}
.dashboard-quick-grid .quick-tile.quick-hero{grid-column:1;grid-row:1/span 2;min-height:0;padding:0;display:flex;flex-direction:column;gap:0;overflow:hidden;background:linear-gradient(180deg,#eaf3ff,#fbfdff);border-color:#bdd7f5}
.dashboard-quick-grid .quick-hero-main,.dashboard-quick-grid .quick-hero-sub{border:0;background:transparent;display:grid;justify-items:center;align-content:center;gap:6px;padding:8px 4px;cursor:pointer;font:inherit;color:inherit}
.dashboard-quick-grid .quick-hero-main{flex:1;border-bottom:1px solid #d5e3f5;padding:12px 6px;gap:8px}
.dashboard-quick-grid .quick-tile.quick-hero .quick-hero-main strong{font-size:15px !important;font-weight:850;color:#0f3568;white-space:normal;word-break:keep-all;text-align:center;line-height:1.2;display:inline-block !important;max-width:100%;overflow:visible;text-overflow:clip;padding:0 2px;letter-spacing:0.2px}
.dashboard-quick-grid .quick-hero-main .qt-ico{width:56px;height:56px;border-radius:17px;background:#dbeafe;color:#1d4ed8;box-shadow:0 4px 12px rgba(29,78,216,0.15)}
.dashboard-quick-grid .quick-hero-main .qt-ico .ui-icon{width:32px;height:32px;stroke-width:2.2}
.dashboard-quick-grid .quick-hero-sub{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:3px;padding:6px 8px;min-height:36px;line-height:1}
.dashboard-quick-grid .quick-tile.quick-hero .quick-hero-sub strong{font-size:12px;font-weight:700;color:#3d5b86;white-space:nowrap;line-height:1;margin:0 !important;padding:0 !important;display:inline-flex;align-items:center}
.dashboard-quick-grid .quick-hero-sub .qt-ico{width:20px;height:20px;border-radius:7px}
.dashboard-quick-grid .quick-hero-sub .qt-ico .ui-icon{width:12px;height:12px}
.dashboard-quick-grid .quick-hero-arrow{display:inline-flex;align-items:center;justify-content:center;color:#6482a6;font-style:normal;line-height:1;margin:0 !important;padding:0 !important}
.dashboard-quick-grid .quick-hero-arrow .ui-icon{width:13px;height:13px;stroke-width:2.2;display:block}
.dashboard-quick-grid .quick-tile:nth-child(2){grid-column:2;grid-row:1}
.dashboard-quick-grid .quick-tile:nth-child(3){grid-column:3;grid-row:1}
.dashboard-quick-grid .quick-tile:nth-child(4){grid-column:2;grid-row:2}
.dashboard-quick-grid .quick-tile:nth-child(5){grid-column:3;grid-row:2}
@media(min-width:921px){
  .dashboard-quick-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:minmax(96px,auto)}
  .dashboard-quick-grid .quick-tile.quick-hero{grid-column:1/span 2;grid-row:1;flex-direction:row;min-height:96px}
  .dashboard-quick-grid .quick-hero-main{flex:1;border-bottom:0;border-right:1px solid #d5e3f5;padding:8px 10px;gap:6px}
  .dashboard-quick-grid .quick-hero-sub{flex:0 0 40%;border:0}
  .dashboard-quick-grid .quick-hero-main .qt-ico{width:48px;height:48px;border-radius:14px}
  .dashboard-quick-grid .quick-hero-main .qt-ico .ui-icon{width:28px;height:28px}
  .dashboard-quick-grid .quick-tile.quick-hero .quick-hero-main strong{font-size:16px !important}
  .dashboard-quick-grid .quick-tile:nth-child(2){grid-column:3;grid-row:1}
  .dashboard-quick-grid .quick-tile:nth-child(3){grid-column:4;grid-row:1}
  .dashboard-quick-grid .quick-tile:nth-child(4){grid-column:5;grid-row:1}
  .dashboard-quick-grid .quick-tile:nth-child(5){grid-column:6;grid-row:1}

  /* POS Dedicated Layout on Desktop PC */
  html:has(body[data-app-page="sales"]),
  body[data-app-page="sales"] {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
  }
  body[data-app-page="sales"] #app {
    height: 100vh !important;
    max-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  body[data-app-page="sales"] .sidebar{display:none!important}
  body[data-app-page="sales"] .main{flex:1 1 auto!important;min-height:0!important;margin-left:0!important;width:100%!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
  body[data-app-page="sales"] .topbar{flex-shrink:0!important;padding:10px 24px!important;height:64px!important;min-height:64px!important}
  body[data-app-page="sales"] .content{flex:1 1 auto!important;min-height:0!important;height:100%!important;max-height:100%!important;padding:12px 20px!important;max-width:100%!important;width:100%!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;box-sizing:border-box!important}
  body[data-app-page="sales"] .pos-browser{flex:1 1 auto!important;min-height:0!important;height:100%!important;max-height:100%!important;width:100%!important;max-width:100%!important;margin:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;padding-bottom:0!important;box-sizing:border-box!important}
  .pos-split-layout{flex:1 1 auto!important;min-height:0!important;height:100%!important;max-height:100%!important;width:100%!important;max-width:100%!important;display:grid!important;grid-template-columns:minmax(0,1fr) 480px!important;gap:16px!important;align-items:stretch!important;overflow:hidden!important;box-sizing:border-box!important}
  .pos-catalog-col{height:100%!important;min-height:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;min-width:0!important;box-sizing:border-box!important}
  body[data-app-page="sales"] .pos-search-row{flex-shrink:0!important;margin-bottom:10px!important;width:100%!important;box-sizing:border-box!important}
  body[data-app-page="sales"] .pos-chips{flex-shrink:0!important;margin-bottom:8px!important}
  body[data-app-page="sales"] .pos-grid{flex:1 1 auto!important;height:100%!important;overflow-y:auto!important;min-height:0!important;padding-right:6px!important;padding-bottom:20px!important;box-sizing:border-box!important;align-content:start!important;grid-auto-rows:max-content!important}
  .pos-order-col{height:100%!important;max-height:100%!important;display:flex!important;flex-direction:column!important;background:#fff!important;border:1px solid #dce4ee!important;border-radius:18px!important;padding:16px!important;box-shadow:0 4px 20px rgba(15,23,42,.05)!important;overflow:hidden!important;position:static!important;top:auto!important;box-sizing:border-box!important}
  .pos-order-head{flex-shrink:0!important;margin-bottom:8px!important;padding-bottom:4px!important;border-bottom:1px solid #f1f5f9!important}
  .pos-order-lines-box{flex:1 1 auto!important;overflow-y:auto!important;min-height:80px!important;max-height:none!important;margin:8px 0!important;padding-right:4px!important;box-sizing:border-box!important}
  .pos-desktop-cart-list{display:grid;gap:8px}
  .pos-desktop-cart-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;background:#f8fafc;border:1px solid #edf2f7}
  .pdc-main strong{display:block;font-size:13px;color:#0f172a;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pdc-main small{display:block;font-size:11.5px;color:#64748b;margin-top:2px}
  .pdc-controls{display:flex;align-items:center;gap:8px}
  .pdc-controls .quantity-control.compact{display:grid;grid-template-columns:26px 36px 26px;gap:2px}
  .pdc-controls .quantity-control.compact button{min-width:26px;min-height:26px;height:26px;border-radius:6px;font-size:14px;border:1px solid #cbd5e1;background:#fff}
  .pdc-controls .quantity-control.compact input{height:26px;font-size:12px;font-weight:700;padding:0;text-align:center;border:1px solid #cbd5e1;border-radius:6px}
  .pdc-total{font-size:13px;color:var(--q-blue-dark,#0868c6);font-weight:800;white-space:nowrap;min-width:68px;text-align:right}
  .pdc-del{border:0;background:transparent;color:#94a3b8;cursor:pointer;padding:4px;border-radius:6px;display:grid;place-items:center}
  .pdc-del:hover{color:#ef4444;background:#fee2e2}
  .pdc-del .ui-icon{width:16px;height:16px}
  .pos-desktop-empty-cart{text-align:center;padding:32px 16px;color:#94a3b8}
  .pos-desktop-empty-cart .pde-ico{display:grid;place-items:center;margin-bottom:8px;color:#cbd5e1}
  .pos-desktop-empty-cart .pde-ico .ui-icon{width:36px;height:36px}
  .pos-desktop-empty-cart p{margin:0;font-size:14px;font-weight:700;color:#64748b}
  .pos-desktop-empty-cart small{font-size:11.5px;color:#94a3b8}
  .pos-order-summary{flex-shrink:0!important;margin-top:auto!important;padding:10px 0!important;border-top:1px dashed #cbd5e1!important;border-bottom:1px dashed #cbd5e1!important;display:grid;gap:6px}
  .pos-summary-line{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:#64748b}
  .pos-summary-line b{color:#0f172a}
  .pos-summary-total{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;color:#0f172a;margin-top:4px}
  .pos-summary-total strong{font-size:18px;color:var(--q-blue-dark,#0868c6);font-weight:900}
  .pos-order-actions{flex-shrink:0!important;margin-top:12px!important}
  .pos-dt-pay-btn{width:100%!important;min-height:48px!important;font-size:15px!important;font-weight:800!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;border-radius:12px!important;background:linear-gradient(180deg,#16386f,#102a56)!important;color:#fff!important}
  .pos-dt-pay-btn:disabled{opacity:.45!important;cursor:not-allowed!important}
  .sale-mobile-bar{display:none!important}

  /* Fixed Product Card on Desktop PC: Balance, No Overlap, Crisp & Clean */
  .pos-product{position:relative!important;display:flex!important;flex-direction:column!important;border-radius:14px!important;border:1px solid #dce4ee!important;background:#fff!important;overflow:hidden!important}
  .pos-product .pos-product-main{flex:1!important;display:flex!important;flex-direction:column!important;padding:8px 8px 10px 8px!important;position:relative!important;text-align:left!important}
  .pos-product .pos-product-image{width:100%!important;aspect-ratio:1.35/1!important;border-radius:10px!important;margin-bottom:6px!important}
  .pos-product .pos-prod-title{font-size:13.5px!important;font-weight:700!important;line-height:1.3!important;margin-bottom:2px!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;min-height:35px!important}
  .pos-product .pos-prod-sku{font-size:11px!important;color:var(--q-muted,#64748b)!important;margin-bottom:4px!important}
  .pos-product .pos-prod-price-row{position:static!important;margin-top:auto!important;padding-right:90px!important}
  .pos-product .pos-prod-price{font-size:14px!important;font-weight:800!important;color:var(--q-blue-dark,#0868c6)!important;white-space:nowrap!important}
  .pos-product .pos-add{position:absolute!important;right:8px!important;bottom:8px!important;width:32px!important;height:32px!important;min-height:32px!important;border-radius:8px!important;background:var(--q-blue,#0284c7)!important;color:#fff!important;font-size:20px!important;font-weight:700!important;display:grid!important;place-items:center!important;border:0!important;cursor:pointer!important}
  .pos-product .pos-inline-qty{position:absolute!important;right:8px!important;bottom:8px!important;width:86px!important;height:30px!important;min-height:30px!important;border:1px solid #bfdbfe!important;border-radius:8px!important;background:#f0f7ff!important;display:grid!important;grid-template-columns:26px 1fr 26px!important;align-items:center!important;overflow:hidden!important;box-sizing:border-box!important}
  .pos-product .pos-inline-qty button{height:100%!important;min-height:28px!important;border:0!important;background:#e0eeff!important;color:var(--q-blue-dark,#0868c6)!important;font-size:15px!important;font-weight:800!important;display:grid!important;place-items:center!important;cursor:pointer!important;padding:0!important}
  .pos-product .pos-inline-qty button:hover{background:#cfe0f4!important}
  .pos-product .pos-inline-qty input,.pos-product .pos-inline-qty-input{width:100%!important;height:100%!important;text-align:center!important;font-size:12px!important;font-weight:800!important;color:#0f172a!important;border:0!important;background:transparent!important;padding:0!important;margin:0!important}

  /* Warehouse Balanced on Desktop PC */
  .warehouse-operation-grid{grid-template-columns:repeat(5,1fr)!important}
  .warehouse-tools{grid-template-columns:repeat(3,1fr)!important}
}
@media(max-width:920px){
  .pos-order-col{display:none!important}
  .pos-split-layout{display:block!important}
}

/* VAT control (Thanh toán): chọn mức có sẵn hoặc tùy chỉnh %. */
.vat-box{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding:13px;border-radius:11px;background:#f7f9fc}
.vat-box>span{color:var(--q-muted);font-weight:600}
.vat-control{display:flex;align-items:center;gap:8px}
.vat-control select,.vat-control input{min-height:40px;padding:6px 9px;border:1px solid var(--q-line);border-radius:9px;background:#fff;font:inherit;font-size:14px}
.vat-control input{width:84px}
.vat-control b{color:var(--q-blue-dark);white-space:nowrap}

/* Product Detail: gọn hơn + Thẻ kho/Lịch sử tồn từ ledger thật. */
.product-description{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.source-more{margin-top:10px}
.source-more summary{cursor:pointer;color:var(--q-blue-dark);font-size:13px;font-weight:750;min-height:36px;display:flex;align-items:center}
.source-more .product-facts{margin-top:8px}
.ledger-list{display:grid;border-top:1px solid var(--q-line)}
.ledger-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--q-line)}
.ledger-main{min-width:0;display:grid;gap:2px}
.ledger-main strong{font-size:14px;color:#22406a}
.ledger-main small{font-size:12px;color:var(--q-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ledger-qty{font-weight:800;font-size:14px;white-space:nowrap}
.ledger-qty.in{color:#0f7a4d}
.ledger-qty.out{color:#c2410c}
.ledger-after{font-size:11px;color:var(--q-muted);white-space:nowrap;text-align:right}
.ledger-after b{display:block;font-size:14px;color:#22406a}

/* Giao dịch & phiếu: list gọn mobile-first + search + tổng + trạng thái thu. */
.tx-search{margin:2px 0 10px}
.tx-summary{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:12px;background:#f5f8fc;margin-bottom:8px}
.tx-summary span{color:var(--q-muted);font-size:12px;font-weight:600}
.tx-summary strong{color:var(--q-blue-dark);font-size:16px}
.tx-list{display:grid}
.tx-list .transaction-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto 18px;align-items:center;gap:10px}
.tx-list .transaction-row>span:first-child{min-width:0;display:grid;gap:2px}
.tx-list .transaction-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx-list .transaction-row small{color:var(--q-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx-meta{display:grid;gap:2px;justify-items:end;min-width:0}
.tx-meta small{font-size:11px;color:var(--q-muted);white-space:nowrap}
.tx-badge{font-style:normal;font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;white-space:nowrap}
.tx-badge.ok{background:#e7f7ef;color:#0f7a4d}
.tx-badge.warn{background:#fff4e5;color:#a45b00}
.tx-list .transaction-row b{color:var(--q-blue-dark);white-space:nowrap;font-size:13px}
@media(max-width:640px){
  .tx-list .transaction-row{grid-template-columns:minmax(0,1fr) auto 16px}
  .tx-list .transaction-row .tx-meta{grid-column:2;grid-row:1}
  .tx-list .transaction-row b{grid-column:2;grid-row:2;justify-self:end}
  .tx-list .transaction-row>.ui-icon{grid-column:3;grid-row:1 / span 2}
}
@media(max-width:640px){
  .detail-cover{height:150px;border-radius:16px}
  .detail-stats{gap:8px}
  .detail-stats div{padding:11px;border-radius:14px}
  .detail-stats strong{font-size:19px}
  .product-facts{gap:7px;margin:12px 0}
  .product-facts>div{padding:9px 11px}
  .section-divider{margin:14px 0}
  .product-description{margin:0 0 12px}
}

.print-job-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.print-job-actions .secondary-btn{min-height:40px;padding:8px 12px}
@media(max-width:480px){.print-job-list>div{align-items:flex-start}.print-job-actions{flex-direction:column;align-items:flex-end}}

/* Focused IA/product-detail delta. Dashboard and established component tokens stay untouched. */
.settings-connect{padding:4px 14px}.settings-connect-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:62px;padding:8px 0;border:0;background:transparent;color:inherit;text-align:left}.settings-connect-row>span{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:8px;align-items:center;min-width:0}.settings-connect-row>span>.ui-icon{grid-row:1/3}.settings-connect-row b,.settings-connect-row small{grid-column:2}.settings-connect-row small{color:var(--q-muted)}
.goods-title-compact>p{margin:0!important}.goods-title-compact>p strong{color:var(--q-blue-dark);font-size:16px}.goods-toolbar{display:grid;gap:8px}.goods-toolbar .goods-segments,.goods-toolbar .goods-search,.goods-toolbar .goods-tools{margin-top:0}
.product-title-status{width:max-content;margin-top:6px!important;padding:4px 8px!important}.product-detail-compact{grid-template-columns:140px minmax(0,1fr);align-items:start;gap:14px}.product-detail-compact .detail-cover{height:132px;padding:8px;border-radius:16px}.product-detail-compact .detail-meta{gap:10px}.product-money{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.product-money.single{grid-template-columns:minmax(0,180px)}.product-money>div{min-width:0;padding:9px 10px;border:1px solid var(--q-line);border-radius:12px;background:#f7faff}.product-money span{display:block;color:var(--q-muted);font-size:11px;line-height:1.25}.product-money strong{display:block;margin-top:4px;color:var(--q-blue-dark);font-size:13px;line-height:1.25;overflow-wrap:anywhere}.product-detail-compact .detail-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.product-detail-compact .detail-stats div{min-width:0;padding:9px 8px;border-radius:12px}.product-detail-compact .detail-stats strong{font-size:17px}.product-detail-compact .detail-stats span{font-size:10px}.product-detail-compact+.detail-actions{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:10px}.product-detail-compact+.detail-actions .quick-tile{min-height:72px;padding:8px}.detail-warehouse{margin-top:14px}.detail-warehouse h3{margin:0 0 8px;font-size:15px}.product-info-more,.product-source{margin-top:12px;padding-top:6px;border-top:1px solid var(--q-line)}.product-info-more summary,.product-source summary{min-height:44px;display:flex;align-items:center;color:var(--q-blue-dark);font-size:14px;font-weight:800;cursor:pointer}.product-info-more .product-facts,.product-source .product-facts{margin-top:6px}
@media(max-width:640px){.settings-connect{padding:4px 12px}.goods-toolbar{padding:10px}.goods-title-compact>p{font-size:12px}.goods-segments button{min-height:38px}.goods-search input,.goods-search button{min-height:44px}.goods-search{grid-template-columns:minmax(0,1fr) 44px}.goods-tools>*{min-height:40px}.product-grid.grid2{gap:10px}.product-grid.grid2 .product-card{min-width:0;border-radius:14px;display:flex;flex-direction:column;overflow:hidden}.product-grid.grid2 .pc-cover{height:128px;padding:6px;background:#f8fafc}.product-grid.grid2 .pc-body{padding:10px;flex:1;display:flex;flex-direction:column}.product-grid.grid2 .pc-head{display:grid;gap:4px}.product-grid.grid2 .pc-head>div{min-width:0}.product-grid.grid2 .pc-head h3{font-size:13.5px;font-weight:750;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px;margin:0;color:var(--text)}.product-grid.grid2 .pc-head p{margin:2px 0 0;font-size:11px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--q-muted)}.product-grid.grid2 .pc-category{display:none}.product-grid.grid2 .badge{justify-self:start;padding:3px 8px;font-size:10px;font-weight:700;border-radius:6px;margin-top:2px}.product-grid.grid2 .pc-info{margin:8px 0 0;min-width:0;margin-top:auto}.product-grid.grid2 .pc-info>span{display:block;font-size:14px;font-weight:800;color:var(--q-blue-dark);line-height:1.25;overflow-wrap:anywhere}.product-grid.grid2 .pc-info small,.product-grid.grid2 .pc-metrics{display:none}.product-grid.grid3{gap:6px}.product-grid.grid3 .product-card{min-width:0;border-radius:12px}.product-grid.grid3 .pc-cover{height:96px;padding:4px}.product-grid.grid3 .pc-body{padding:8px}.product-grid.grid3 .pc-head{display:grid;gap:5px}.product-grid.grid3 .pc-head>div{min-width:0}.product-grid.grid3 .pc-head h3{font-size:13px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.product-grid.grid3 .pc-head p{margin:3px 0 0;font-size:10px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.product-grid.grid3 .pc-category{display:none}.product-grid.grid3 .badge{justify-self:start;padding:4px 6px;font-size:9px}.product-grid.grid3 .pc-info{margin:7px 0 0;min-width:0}.product-grid.grid3 .pc-info>span{display:block;font-size:11px;line-height:1.3;overflow-wrap:anywhere}.product-grid.grid3 .pc-info small,.product-grid.grid3 .pc-metrics{display:none}.product-detail-compact{grid-template-columns:96px minmax(0,1fr);gap:10px}.product-detail-compact .detail-cover{height:96px;padding:5px;border-radius:13px}.product-money{gap:5px}.product-money>div{padding:7px 6px}.product-money span{font-size:9px}.product-money strong{font-size:11px}.product-detail-compact .detail-stats{gap:5px}.product-detail-compact .detail-stats div{padding:7px 5px}.product-detail-compact .detail-stats strong{font-size:14px}.product-detail-compact .detail-stats span{font-size:9px}.product-detail-compact+.detail-actions .quick-tile{min-height:62px}.product-detail-compact+.detail-actions .qt-ico{width:28px;height:28px}.product-detail-compact+.detail-actions strong{font-size:11px}}

.shift-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:4px 0 14px}
.shift-summary>div{display:grid;gap:4px;padding:10px 11px;border-bottom:1px solid var(--q-line);min-width:0}
.shift-summary span,.shift-open-row span,.shift-reconcile span{font-size:11px;color:var(--q-muted)}
.shift-summary b{font-size:14px;white-space:nowrap}
.shift-reconcile{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,260px);gap:8px;align-items:end;padding:11px 0;border-top:1px solid var(--q-line);border-bottom:1px solid var(--q-line);margin-bottom:12px}
.shift-reconcile>div{display:grid;gap:3px}
.shift-reconcile>div strong{font-size:20px;color:var(--q-blue-dark)}
.shift-reconcile label,.shift-open-row label{display:grid;gap:5px;font-size:12px;font-weight:750;color:var(--q-muted)}
.shift-reconcile input,.shift-open-row input{min-height:44px;padding:9px 11px;border:1px solid var(--q-line);border-radius:10px;background:#fff;color:var(--text);font:inherit;font-size:16px}
.shift-open-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,260px);gap:12px;align-items:end;margin:4px 0 12px}
.shift-open-row>div{display:grid;gap:4px;min-height:44px;align-content:center}
.shift-open-row strong{font-size:14px}
.shift-history{margin-top:12px}
.shift-history-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--q-line)}
.shift-history-row:last-child{border-bottom:0}
.shift-history-row span{display:grid;gap:3px;min-width:0}
.shift-history-row small{color:var(--q-muted);font-size:11px}
.shift-history-row>strong{font-size:13px;white-space:nowrap}
@media(max-width:640px){.shift-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 8px}.shift-summary>div{padding:9px 0}.shift-reconcile,.shift-open-row{grid-template-columns:1fr}.shift-reconcile>div strong{font-size:18px}}

/* ==== ADDITIVE (round feature addition): màn Tiện ích nâng cao ==== */
.mod-actions{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.mod-actions .primary-btn,.mod-actions .secondary-btn{width:auto;flex:1 1 auto}
.mod-block{margin-top:14px}
.mod-label{display:block;font-size:12px;font-weight:650;color:var(--q-muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
.mod-list{display:flex;flex-direction:column;border-top:1px solid var(--q-line)}
.mod-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--q-line);text-align:left;background:none;width:100%;font:inherit;color:inherit}
.mod-row>div{min-width:0}
.mod-row strong{display:block;font-size:14px;font-weight:650;color:var(--q-ink)}
.mod-row small{display:block;font-size:12px;color:var(--q-muted);margin-top:2px;overflow-wrap:anywhere}
.mod-right{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.mod-right b{font-size:13px;white-space:nowrap}
.mod-right .secondary-btn{padding:4px 8px;font-size:12px;width:auto}
.mod-click{cursor:pointer}
.mod-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;margin:0 0 12px}
.mod-summary>div{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px dashed var(--q-line)}
.mod-summary span{font-size:12px;color:var(--q-muted)}
.mod-summary b{font-size:15px;color:var(--q-ink)}
.mod-summary .grand b{color:var(--q-blue)}
.mod-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}
.mod-grid label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--q-muted)}
.mod-grid input,.mod-grid select{width:100%}
.mod-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.mod-chips button{padding:4px 10px;border:1px solid var(--q-line);border-radius:999px;background:none;font-size:12px;color:inherit;cursor:pointer;width:auto}
.mod-check-list{display:flex;flex-direction:column;max-height:320px;overflow:auto;border:1px solid var(--q-line);border-radius:10px}
.mod-check{display:flex;align-items:center;gap:8px;padding:8px;border-bottom:1px solid var(--q-line);font-size:13px}
.mod-check:last-child{border-bottom:0}
.mod-check>span{flex:1 1 auto;min-width:0}
.mod-check small{display:block;color:var(--q-muted);font-size:11px}
@media(max-width:640px){
  .mod-summary{grid-template-columns:1fr;gap:0;}
  .mod-summary>div{flex-direction:row !important;justify-content:space-between !important;align-items:baseline !important;padding:7px 0 !important;}
  .mod-summary span{font-size:12px;white-space:nowrap;word-break:keep-all;}
  .mod-summary b{font-size:14.5px;white-space:nowrap;}
  .mod-row{align-items:center;padding:8px 0;}
  .mod-right{flex-direction:column;align-items:flex-end;white-space:nowrap;}
}
.pv-barcode-box svg.barcode{max-width:100%;height:auto;display:block;margin:0 auto;}
.doc-preview-tabs::-webkit-scrollbar{display:none;}
.mod-report-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--q-line);text-align:left;background:none;width:100%}
.mod-report-info{min-width:0;flex:1}
.mod-report-info strong{display:block;font-size:13.5px;font-weight:700;color:var(--q-ink,#0f172a)}
.mod-report-info small{display:block;font-size:12px;color:var(--q-muted,#64748b);margin-top:2px}
.mod-report-btns{display:flex;align-items:center;gap:6px;flex-shrink:0}
.mod-report-btns button{white-space:nowrap !important;word-break:keep-all !important;display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:5px 9px}
@media(max-width:640px){
  .mod-report-card{flex-direction:column !important;align-items:stretch !important;gap:10px !important;padding:12px 10px !important;background:#f8fafc !important;border-radius:9px !important;border:1px solid #e2e8f0 !important;margin-bottom:10px !important}
  .mod-report-btns{display:flex !important;gap:6px !important;width:100% !important}
  .mod-report-btns button{flex:1 !important;text-align:center !important;justify-content:center !important;font-size:11.5px !important;padding:6px 4px !important}
  .tax-official-books .mod-row{flex-direction:column !important;align-items:stretch !important;gap:8px !important;padding:10px !important}
  .tax-official-books .mod-right{display:flex !important;gap:6px !important;width:100% !important}
  .tax-official-books .mod-right button{flex:1 !important;justify-content:center !important;white-space:nowrap !important;word-break:keep-all !important;text-align:center !important;font-size:11px !important;padding:6px 4px !important}
}

/* ==== ADDITIVE: chọn hàng loạt trên lưới + sắp xếp/lọc (round necessary-gap) ==== */
.product-card{position:relative}
.product-card.selected{border-color:var(--q-blue);box-shadow:0 0 0 2px rgba(72,124,220,.22)}
.variant-product-group{border-bottom:1px solid var(--q-line)}
.variant-product-group:last-child{border-bottom:0}
.variant-parent-toggle{width:100%;min-height:64px;padding:9px 12px;border:0;background:#fff;color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left}
.variant-parent-toggle:hover{background:#f8fbff}
.variant-parent-main{display:flex;align-items:center;gap:10px;min-width:0}
.variant-parent-main>span:last-child{display:grid;gap:2px;min-width:0}
.variant-parent-main strong,.variant-parent-main small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.variant-parent-main small{color:var(--muted);font-size:11px}
.variant-parent-main b{color:var(--q-blue-dark);font-size:12px}
.variant-parent-action{display:flex;align-items:center;gap:3px;flex:0 0 auto;color:var(--q-blue);font-size:11px;font-weight:750}
.variant-parent-action .ui-icon{width:16px;height:16px}
.variant-children{margin:0 8px 8px;border:1px solid #dce8f5;border-radius:12px;overflow:hidden;background:#f8fbff}
.variant-children .goods-row{background:#fff}
.variant-children .goods-row:last-child{border-bottom:0}
.variant-product-grid-group{grid-column:1/-1;border:1px solid var(--q-line);border-radius:14px;overflow:hidden;background:#fff}
.variant-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px;margin:0;border:0;border-radius:0}
.card-select{position:absolute;top:8px;left:8px;z-index:3;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.95);border:1px solid var(--q-line);display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;color:var(--q-blue);cursor:pointer;padding:0}
.card-select span{font-weight:700}
.compact-image-actions{display:flex;gap:8px;flex-wrap:wrap}
.compact-image-actions .compact-upload{margin:0}
.form-grid[hidden],.full-span[hidden],#productFields[hidden],#serviceFields[hidden]{display:none}

/* ==== ADDITIVE: form Thêm sản phẩm gọn (chip danh mục, biến thể, hàng đôi) ==== */
.goods-segments{border-radius:10px;margin-top:10px}
.goods-segments button{border-radius:8px}
.goods-toolbar .goods-search{margin-top:8px}
.goods-warehouse-btn{display:flex;align-items:center;justify-content:center;position:relative;width:100%;min-height:44px;margin-top:10px;padding:0 16px;background:#0f5fd8;color:#fff;border:0;border-radius:9px;font-size:15px;font-weight:750;cursor:pointer;box-shadow:0 2px 6px rgba(15,95,216,.22);transition:transform .15s ease,background .15s ease}
.goods-warehouse-btn:hover{background:#0d54c0}
.goods-warehouse-btn:active{transform:scale(.985)}
.goods-warehouse-btn .goods-wh-left{display:inline-flex;align-items:center;gap:8px}
.goods-warehouse-btn .goods-wh-left .ui-icon{width:20px;height:20px}
.goods-warehouse-btn .goods-wh-arrow{position:absolute;right:14px;display:flex;align-items:center}
.goods-warehouse-btn .goods-wh-arrow .ui-icon{width:18px;height:18px}
/* Kho chuyển lên góc phải hàng trên (thay cho Nhập Excel & Thêm hàng hóa cũ) */
.goods-wh-top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  min-height: 38px;
  padding: 0 14px;
  background: #0f5fd8;
  color: #ffffff;
  border: 0;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 95, 216, 0.22);
  transition: transform 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.goods-wh-top-btn:hover {
  background: #0d54c0;
}
.goods-wh-top-btn:active {
  transform: scale(0.98);
}
.goods-wh-top-btn .ui-icon {
  width: 17px;
  height: 17px;
}
.goods-wh-top-btn .goods-wh-top-arrow {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
}
.goods-wh-top-btn .goods-wh-top-arrow .ui-icon {
  width: 15px;
  height: 15px;
  opacity: 0.9;
}

/* Hàng thao tác chính: Bên trái Thêm hàng hóa to, Bên phải Nhập dữ liệu */
.goods-action-bar {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  box-sizing: border-box;
}
.goods-btn-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  min-height: 44px;
  background: #0f5fd8 !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 9px !important;
  font-size: 14.5px !important;
  font-weight: 750 !important;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 95, 216, 0.25);
  transition: transform 0.15s ease, background 0.15s ease;
  white-space: nowrap;
  padding: 0 10px !important;
}
.goods-btn-add:hover {
  background: #0d54c0 !important;
}
.goods-btn-add:active {
  transform: scale(0.985);
}
.goods-btn-add .ui-icon {
  width: 18px;
  height: 18px;
}
.goods-btn-import {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  min-height: 44px;
  background: #f8fafc !important;
  color: #0f172a !important;
  border: 1.5px solid #dce3ec !important;
  border-radius: 9px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
  white-space: nowrap;
  padding: 0 10px !important;
}
.goods-btn-import:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}
.goods-btn-import:active {
  transform: scale(0.985);
}
.goods-btn-import .ui-icon {
  width: 17px;
  height: 17px;
  color: #0f5fd8;
}

/* Modal phương thức nhập */
.import-methods-grid {
  display: grid;
  gap: 10px;
  margin: 6px 0 10px;
}
.import-method-card {
  display: grid;
  grid-template-columns: 42px 1fr 20px;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
  box-sizing: border-box;
}
.import-method-card:hover {
  border-color: #0f5fd8;
  background: #f8fafc;
}
.import-method-card:active {
  transform: scale(0.985);
}
.import-method-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}
.import-method-icon .ui-icon {
  width: 22px;
  height: 22px;
}
.import-method-icon.ok {
  background: #ecfdf5;
  color: #059669;
}
.import-method-icon.info {
  background: #eff6ff;
  color: #2563eb;
}
.import-method-icon.warm {
  background: #fff7ed;
  color: #ea580c;
}
.import-method-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.import-method-info strong {
  font-size: 14px;
  font-weight: 750;
  color: #0f172a;
}
.import-method-info span {
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.3;
}
.import-method-card > .ui-icon:last-child {
  color: #94a3b8;
  width: 18px;
  height: 18px;
}
/* ==== ADDITIVE: form Thêm sản phẩm siêu tinh gọn (fit 1 màn hình mobile, chống tràn ngang, chip thấp có màu) ==== */
.np-form {
  padding-bottom: 6px !important;
  display: grid;
  grid-template-columns: 100%;
  gap: 7px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}
.np-form > * {
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.np-img-section {
  display: grid;
  gap: 3px;
}
.np-img-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.np-img-head label {
  font-size: 11.5px;
  font-weight: 700;
  color: #344054;
}
.np-img-head small {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 400;
}
.np-imgrow {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.np-imgrow .compact-image-preview {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0;
  min-height: 52px;
  max-height: 56px;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}
.np-imgrow .compact-image-empty,
.np-imgrow .compact-image-add-slot {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border: 1.5px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #64748b;
  cursor: pointer;
  flex: 0 0 auto;
}
.np-imgrow .compact-image-empty:hover,
.np-imgrow .compact-image-add-slot:hover {
  border-color: #0f5fd8;
  color: #0f5fd8;
  background: #eff6ff;
}
.np-imgrow .compact-image-empty .ui-icon,
.np-imgrow .compact-image-add-slot .ui-icon {
  width: 18px;
  height: 18px;
}
.np-imgrow .compact-image-empty span,
.np-imgrow .compact-image-add-slot span {
  font-size: 9px;
  font-weight: 600;
}
.np-imgrow .compact-image-thumb {
  position: relative;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 8px;
  overflow: hidden;
  background: #edf2f8;
  flex: 0 0 auto;
  cursor: grab;
  border: 1px solid #e2e8f0;
}
.np-imgrow .compact-image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.np-imgrow .compact-image-thumb button {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(15,23,42,0.85);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.compact-image-actions.np-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 0 0 auto;
}
.compact-image-actions.np-col .compact-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  min-height: 24px;
  padding: 0 8px;
  font-size: 11.5px;
  font-weight: 650;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #1e293b;
  cursor: pointer;
  white-space: nowrap;
}
.compact-image-actions.np-col .compact-upload:hover {
  background: #f1f5f9;
}
.compact-image-actions.np-col .compact-upload .ui-icon {
  width: 13px;
  height: 13px;
}
.np-name-box {
  min-width: 0;
}
.np-name-box input,
.np-form .field input:not([type="checkbox"]):not([type="radio"]),
.np-form .field select {
  height: 38px;
  min-height: 38px;
  padding: 6px 10px !important;
  font-size: 13.5px;
  border-radius: 8px;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}
.np-form .field {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.np-form .field label,
.np-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  margin-bottom: 2px;
  line-height: 1.2;
}
.np-row2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.np-row2 .field {
  min-width: 0;
  max-width: 100%;
}
.np-row2 .field input,
.np-row2 .field select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.np-lite {
  font-weight: 400;
  color: var(--q-muted);
  font-size: 10.5px;
}
.np-money {
  color: #1b4f8f;
}

/* Category chips: thấp, nhỏ, có màu nhẹ (cam nhạt pastel) */
.np-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 5px;
  max-height: 54px;
  overflow: hidden;
  align-items: center;
}
.np-chips.expanded {
  max-height: none;
}
.np-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 24px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid #ffd8b2;
  background: #fff8f0;
  color: #b45309;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  user-select: none;
  box-sizing: border-box;
}
.np-chip:hover {
  background: #ffedd5;
  border-color: #fb923c;
}
.np-chip.active {
  border-color: #ea580c;
  background: #ea580c;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(234, 88, 12, 0.25);
}
.np-more {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  color: #ea580c;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 0;
  text-align: center;
  cursor: pointer;
}
.np-chips:empty {
  display: none;
}

/* Biến thể: gọn gàng, ẩn ô nhập cho đến khi bấm Thêm */
.np-variant-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
}
.np-variant-toggle-btn {
  border: 0;
  background: transparent;
  color: #2563eb;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.np-variant-toggle-btn:hover {
  text-decoration: underline;
}
.np-variant-drawer {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px;
  margin-top: 5px;
}
.np-variant-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}
.np-variant-inputs input {
  height: 34px !important;
  min-height: 34px !important;
  font-size: 12px !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  border: 1px solid #cbd5e1 !important;
  background: #fff !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.np-variant-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 6px;
}
.np-variant-actions button {
  min-height: 28px !important;
  height: 28px !important;
  padding: 2px 10px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
}

/* Cài đặt thêm (SKU, Barcode, Tồn tối thiểu) */
.np-more-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  margin-top: 6px;
  width: 100%;
  box-sizing: border-box;
}
.np-more-fields .field {
  min-width: 0;
}
.np-more-fields .field input {
  height: 34px !important;
  min-height: 34px !important;
  font-size: 12.5px !important;
  padding: 4px 8px !important;
}
@media(max-width:640px){.np-chips{max-height:54px}}
.goods-tools button.active{border-color:var(--q-blue);color:var(--q-blue);background:rgba(72,124,220,.08)}
.goods-stats{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.15}
.goods-stat-main{font-size:19px;font-weight:750;color:var(--q-ink);white-space:nowrap}
.goods-stat-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:4px}
.goods-stat-sub{font-size:11px;font-weight:500;color:var(--q-muted);white-space:nowrap}
.goods-stat-sub.warn{color:#b45309}
.goods-title-compact{flex-wrap:wrap;row-gap:6px;align-items:flex-start}
.goods-title-compact .goods-stats{flex:1 1 auto}
.goods-title-compact>div:last-child{display:flex;gap:6px;flex:0 0 auto;margin-left:auto;align-items:flex-start}
.goods-title-compact .secondary-btn.compact,.goods-title-compact .primary-btn.compact{white-space:nowrap;width:auto;padding:7px 10px;font-size:12.5px}
.mod-chips button.active{border-color:var(--q-blue);color:var(--q-blue);background:rgba(72,124,220,.1);font-weight:600}

/* DASHBOARD PRACTICAL UX REFINEMENT (EXECUTIVE & ACTION-FIRST) */
/* 1. Alerts & Operational Status */
.dash-alerts-card{margin-top:12px;padding:12px 14px;border-radius:18px}
.dash-alerts-card.is-clean{padding:10px 14px;background:#f8fdfa;border-color:#d1fae5}
.dash-clean-strip{margin-top:12px;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:#f8fdfa;border:1px solid #d1fae5;font-size:12.5px;color:#065f46}
.dash-clean-strip .badge.ok{width:20px;height:20px;min-height:20px;padding:0;display:grid;place-items:center;border-radius:50%;font-size:11px;font-weight:850;flex-shrink:0}
.dash-clean-strip .dcs-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}

.dash-alerts-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.dah-title{display:flex;align-items:center;gap:8px}
.dah-title h2{font-size:15px;margin:0;font-weight:800;color:var(--text)}
.dah-badge{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#ef4444;color:#fff;font-size:11px;font-weight:850;display:inline-grid;place-items:center}
.dah-hint{font-size:11.5px;color:var(--muted)}
.dash-alerts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:7px}
.dash-alert-tile{display:flex;align-items:center;gap:10px;min-height:46px;padding:8px 12px;border-radius:12px;border:1px solid #e2e8f0;background:#fff;text-align:left;cursor:pointer;transition:all .15s ease}
.dash-alert-tile:hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px)}
.dash-alert-tile .dat-ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex-shrink:0}
.dash-alert-tile .dat-ico .ui-icon{width:16px;height:16px}
.dash-alert-tile.warn .dat-ico{background:#fff3e5;color:#a65f00}
.dash-alert-tile.danger .dat-ico{background:#fff0ee;color:#c23d2b}
.dash-alert-tile.info .dat-ico{background:#eff5ff;color:#1a4688}
.dash-alert-tile.amber .dat-ico{background:#fff8df;color:#8a5b17}
.dash-alert-tile .dat-label{flex:1;font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-alert-tile .dat-arr{color:#94a3b8;flex-shrink:0}
.dash-alert-tile .dat-arr .ui-icon{width:14px;height:14px}

/* 2. Shift Card */
.dash-shift-card{margin:10px 0;padding:10px 14px;border-radius:16px;border:1px solid #e2e8f0;background:#ffffff}
.dsc-content{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dsc-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-width:0}
.dsc-reg-badge{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--text);font-weight:700;white-space:nowrap}
.dsc-reg-badge i{color:var(--navy);display:inline-flex}
.dsc-reg-badge i .ui-icon{width:15px;height:15px}
.dsc-sep{color:#cbd5e1;font-size:12px}
.dsc-dev{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:12px;font-weight:500}
.dsc-dev i .ui-icon{width:13px;height:13px}
.dsc-state{display:flex;align-items:center;gap:6px}
.dsc-state-text{display:flex;align-items:baseline;gap:5px;font-size:12.5px}
.dsc-state-text strong{color:var(--text);font-weight:750}
.dsc-state-text small{color:var(--muted);font-size:11px}
.dcb-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.dcb-dot.ok{background:#10b981;box-shadow:0 0 0 2px rgba(16,185,129,.2)}
.dcb-dot.warn{background:#f59e0b;box-shadow:0 0 0 2px rgba(245,158,11,.2)}
.dsc-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.dash-shift-switch{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:4px 10px 4px 5px;border-radius:22px;border:1px solid #d1d5db;background:#f8fafc;cursor:pointer;transition:all .15s ease}
.dash-shift-switch:hover{background:#f1f5f9;border-color:#94a3b8}
.dsw-track{width:32px;height:18px;border-radius:9px;background:#cbd5e1;position:relative;display:flex;align-items:center;padding:2px;transition:background .2s ease}
.dsw-thumb{width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transform:translateX(0);transition:transform .2s ease}
.dsw-label{font-size:12px;font-weight:750;color:#475569}
.dash-shift-switch.is-active{background:#ecfdf5;border-color:#a7f3d0}
.dash-shift-switch.is-active .dsw-track{background:#10b981}
.dash-shift-switch.is-active .dsw-thumb{transform:translateX(14px)}
.dash-shift-switch.is-active .dsw-label{color:#065f46}
.dsc-link-btn{display:inline-flex;align-items:center;gap:3px;min-height:44px;padding:0 8px;border:0;background:transparent;color:var(--navy);font-size:12.5px;font-weight:750;cursor:pointer}
.dsc-link-btn .ui-icon{width:13px;height:13px}

/* 3. Stock & Activity (board-two) */
.board-two{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}
@media(max-width:1240px){
  .board-two{grid-template-columns:minmax(0,1fr)!important}
  .board-two>*{min-width:0!important;max-width:100%!important}
}
.dash-stock-blocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0}
@media(min-width:640px){
  .dash-stock-blocks{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.dsb-block{display:flex;flex-direction:column;justify-content:space-between;gap:3px;min-height:74px;padding:10px 12px;border-radius:14px;border:1px solid #e2e8f0;background:#f8fafc;position:relative;overflow:hidden;cursor:pointer;transition:all .14s ease;text-align:left;min-width:0}
.dsb-block:hover{transform:translateY(-1px);border-color:#cbd5e1;box-shadow:0 4px 12px rgba(0,0,0,.04)}
.dsb-label{font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dsb-num{font-size:23px;font-weight:850;line-height:1.1;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.dsb-num.text-green{color:#059669}
.dsb-num.text-amber{color:#d97706}
.dsb-num.text-purple{color:#7c3aed}
.dsb-icon{position:absolute;right:8px;top:8px;color:rgba(100,116,139,.14);pointer-events:none}
.dsb-icon .ui-icon{width:22px;height:22px}
.dsb-block.dsb-available{background:linear-gradient(180deg,#f0fdf4,#ffffff);border-color:#bbf7d0}
.dsb-block.dsb-available .dsb-icon{color:rgba(16,185,129,.22)}
.dsb-block.dsb-low.has-alert{background:linear-gradient(180deg,#fff7ed,#ffffff);border-color:#fed7aa}
.dsb-block.dsb-low.has-alert .dsb-icon{color:rgba(245,158,11,.28)}
.dsb-block.dsb-transfers.has-transit{background:linear-gradient(180deg,#faf5ff,#ffffff);border-color:#e9d5ff}
.dsb-block.dsb-transfers.has-transit .dsb-icon{color:rgba(147,51,234,.25)}

.dash-empty-clean{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:24px 12px;text-align:center;color:var(--muted);font-size:12.5px}
.dash-empty-clean .ui-icon{width:24px;height:24px;opacity:.45}
.dash-activity-list{display:grid;grid-template-columns:minmax(0,1fr);width:100%;min-width:0}
.dash-activity-list .activity-row{display:grid;grid-template-columns:32px minmax(0,1fr) 16px;align-items:center;gap:10px;min-height:48px;padding:8px 0;border-bottom:1px solid #f1f5f9;background:#fff;border-radius:0;width:100%;min-width:0;max-width:100%;box-sizing:border-box}
.dash-activity-list .activity-row:last-child{border-bottom:0}
.dash-activity-list .feed-icon{width:32px;height:32px;border-radius:9px;background:#edf2f9;color:var(--navy);display:grid;place-items:center;flex-shrink:0}
.dash-activity-list .feed-icon .ui-icon{width:16px;height:16px}
.dash-activity-list .feed-content{min-width:0;max-width:100%;overflow:hidden}
.dash-activity-list .feed-title{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dash-activity-list .feed-meta{font-size:11.5px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dash-activity-list .activity-row>.ui-icon{width:15px;height:15px;color:#94a3b8}

/* Demo Header Banner overflow protection */
.demo-preview-banner,.demo-compact-header{min-width:0;max-width:100%;overflow:hidden}
.demo-preview-banner>div:first-child{min-width:0;width:100%}
.demo-preview-banner>div:first-child>div:first-child{flex:1;min-width:0}
.demo-preview-banner>div:first-child>div:first-child strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 4. Analytics Card (Phân tích nhanh) */
.dash-analytics-card{margin-top:14px;padding:18px}
.dash-analytics-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.dash-analytics-head h2{margin:0;font-size:19px;letter-spacing:-.02em;color:var(--text)}
.dash-analytics-head p{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.dash-analytics-toggles{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dash-toggle-group{display:inline-flex;gap:2px;background:#edf1f7;padding:2px;border-radius:10px}
.dash-toggle-group button{min-height:30px;padding:2px 10px;border:0;border-radius:8px;background:transparent;font-size:11.5px;font-weight:750;color:#5a687c;cursor:pointer;transition:all .12s ease}
.dash-toggle-group button.active{background:#fff;color:var(--navy);box-shadow:0 1px 4px rgba(0,0,0,.08)}

.dash-chart-box{padding:14px;border-radius:16px;background:linear-gradient(180deg,#f9fbfe 0%,#ffffff 100%);border:1px solid #e0ecfb;margin-bottom:14px}
.dash-chart-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-bottom:12px;border-bottom:1px solid #e8f0fa;margin-bottom:12px}
.dck-item{display:flex;flex-direction:column;gap:2px}
.dck-item span{font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dck-item strong{font-size:16px;font-weight:850;color:var(--navy);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:640px){
  .dck-item strong{font-size:13.5px}
}

.dash-chart-stage{position:relative;height:120px;display:flex;flex-direction:column;justify-content:flex-end}
.dash-bars-wrap{display:flex;align-items:flex-end;gap:6px;height:100px;padding:0 2px;position:relative;z-index:2}
.dash-chart-stage.is-30d .dash-bars-wrap{gap:2px}
.dash-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;min-width:0;position:relative}
.dash-bar-val{font-size:9.5px;font-weight:750;color:var(--navy);line-height:1;margin-bottom:4px;white-space:nowrap}
.dash-bar-track{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;background:rgba(241,245,249,.6);border-radius:4px 4px 0 0;padding-top:2px}
.dash-bar-fill{width:min(24px,80%);min-height:2px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#1877f2 0%,#0d5fc3 100%);transition:height .22s ease}
.dash-bar-fill.is-zero{background:#cbd5e1;min-height:2px;opacity:.5}
.dash-bar-col.is-today .dash-bar-fill{background:linear-gradient(180deg,#2563eb 0%,#1d4ed8 100%);box-shadow:0 0 0 1px #93c5fd}
.dash-bar-label{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:10px;color:var(--muted);margin-top:6px;white-space:nowrap;line-height:1}
.dash-bar-label small{font-size:9px;color:#94a3b8;text-transform:uppercase}
.dash-bar-label b{font-weight:700}
.dash-bar-label.is-today b{color:var(--navy);font-weight:850}
.dash-chart-stage.is-30d .dash-bar-fill{width:100%;border-radius:2px 2px 0 0}
.dash-chart-stage.is-30d .dash-bar-label{font-size:9px}

.dash-tax-profit-strip{margin-top:12px;padding-top:10px;border-top:1px dashed #dbeafe;display:flex;flex-direction:column;gap:7px}
.dtp-hero-row{display:flex;justify-content:space-between;align-items:flex-end;background:#f8fafc;border:1px solid #e2e8f0;border-left:3.5px solid #16a34a;border-radius:8px;padding:7px 10px}
.dtp-hero-left{display:flex;flex-direction:column;gap:2px;min-width:0}
.dtp-tag{font-size:10px;font-weight:700;color:#15803d;letter-spacing:0.3px;text-transform:uppercase;white-space:nowrap !important;word-break:keep-all !important}
.dtp-amount{font-size:17.5px;font-weight:850;color:#15803d;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap !important}
.dtp-hero-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.dtp-badge-rate{font-size:10px;font-weight:700;background:#dcfce7;color:#166534;padding:1px 6px;border-radius:4px;white-space:nowrap !important;word-break:keep-all !important}
.dtp-sub-gross{font-size:10.5px;color:#64748b;white-space:nowrap !important}
.dtp-sub-gross b{color:#0f172a;font-weight:700}
.dtp-cols-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;background:#ffffff;border:1px solid #e2e8f0;border-radius:8px;padding:6px 8px}
.dtp-col{display:flex;flex-direction:column;gap:2px;min-width:0}
.dtp-col span{font-size:10px;font-weight:600;color:#64748b;white-space:nowrap !important;overflow:hidden;text-overflow:ellipsis}
.dtp-col b{font-size:12px;font-weight:750;color:#0f172a;font-variant-numeric:tabular-nums;white-space:nowrap !important;overflow:hidden;text-overflow:ellipsis}
.dtp-legal-row{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:0 2px;font-size:10.5px}
.dtp-legal-text{color:#64748b;white-space:nowrap !important;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.dtp-legal-text b{color:#334155}
.dtp-link-btn{background:none;border:none;padding:0;margin:0;font-size:11px;font-weight:700;color:var(--q-blue,#0f56d9);cursor:pointer;white-space:nowrap !important;word-break:keep-all !important;flex-shrink:0;text-decoration:none;display:inline-flex;align-items:center}
.dtp-link-btn:hover{text-decoration:underline}

.tax-official-accordion summary::-webkit-details-marker,
.tax-formula-accordion summary::-webkit-details-marker{display:none}
.tax-official-accordion summary,
.tax-formula-accordion summary{list-style:none}
.tax-official-accordion[open] summary,
.tax-formula-accordion[open] summary{border-bottom:1px solid #e2e8f0;background:#ffffff}
.tax-official-accordion summary .tax-accordion-arrow,
.tax-formula-accordion summary .tax-accordion-arrow{transition:transform .2s ease}
.tax-official-accordion[open] summary .tax-accordion-arrow,
.tax-formula-accordion[open] summary .tax-accordion-arrow{transform:rotate(180deg)}

.dash-subtabs{display:flex;gap:6px;border-bottom:1px solid #e2e8f0;padding-bottom:8px;margin-bottom:10px}
.dash-subtabs button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:4px 12px;border:0;border-radius:10px;background:transparent;color:#475569;font-size:13px;font-weight:700;cursor:pointer;transition:all .12s ease}
.dash-subtabs button:hover{background:#f1f5f9;color:var(--text)}
.dash-subtabs button.active{background:#eef4ff;color:var(--navy)}
.dash-subtabs button .ui-icon{width:15px;height:15px}
.tab-count{font-style:normal;font-size:10.5px;font-weight:800;padding:2px 6px;border-radius:999px;background:#e2e8f0;color:#334155}
.tab-count.danger{background:#fee2e2;color:#b91c1c}
.dash-subtabs button.active .tab-count{background:#dbeafe;color:#1e40af}
.dash-subtabs button.active .tab-count.danger{background:#fee2e2;color:#b91c1c}

.dash-tab-body{display:grid;gap:6px}
.dash-mini-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto 18px;align-items:center;gap:10px;min-height:48px;padding:8px 12px;border-radius:12px;background:#fff;border:1px solid #eef2f6;cursor:pointer;transition:all .14s ease;text-align:left;width:100%}
.dash-mini-row:hover{background:#f8fbff;border-color:#cfe2fa;transform:translateY(-1px)}
.dmr-rank{width:24px;height:24px;border-radius:6px;background:#f1f5f9;color:#334155;font-size:11px;font-weight:850;display:grid;place-items:center}
.dash-mini-row:first-child .dmr-rank{background:#dbeafe;color:var(--navy)}
.dmr-icon-badge{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex-shrink:0}
.dmr-icon-badge.danger{background:#fef2f2;color:#dc2626}
.dmr-icon-badge.muted{background:#f1f5f9;color:#64748b}
.dmr-icon-badge .ui-icon{width:15px;height:15px}
.dmr-info{min-width:0;display:flex;flex-direction:column;gap:1px}
.dmr-name{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dmr-sub{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dmr-badge{padding:4px 8px;border-radius:8px;font-size:11.5px;font-weight:750;white-space:nowrap}
.dmr-badge.ok{background:#ecfdf5;color:#047857}
.dmr-badge.danger{background:#fff1f2;color:#be123c}
.dmr-badge.muted{background:#f8fafc;color:#475569;border:1px solid #e2e8f0}
.dmr-arr{color:#94a3b8;display:grid;place-items:center}
.dmr-arr .ui-icon{width:14px;height:14px}
.dash-empty-tab{display:flex;align-items:center;justify-content:center;gap:8px;padding:22px 14px;text-align:center;font-size:12.5px;color:var(--muted);background:#f8fafc;border-radius:12px;border:1px dashed #e2e8f0}
.dash-empty-tab .ui-icon{width:18px;height:18px;opacity:.6}

@media(max-width:640px){
  .dash-analytics-head{flex-direction:column;align-items:flex-start;gap:8px}
  .dash-analytics-toggles{width:100%;justify-content:space-between}
  .dash-toggle-group button{min-height:32px;padding:2px 8px;font-size:11px}
  .dash-mini-row{grid-template-columns:26px minmax(0,1fr) auto 14px;gap:8px;padding:7px 10px}
  .dmr-name{font-size:12.5px}
  .dmr-sub{font-size:11px}
  .dmr-badge{font-size:11px;padding:3px 6px}
  .dash-subtabs button{min-height:44px;font-size:12px;padding:4px 8px}
}

/* ===== QBIZ CONTEXTUAL AI OPERATING LAYER ===== */
.qbiz-ai-root {
  position: relative;
  z-index: 990;
}

.qbiz-ai-trigger {
  position: fixed;
  right: 14px;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  z-index: 990;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 44px;
  height: 48px;
  min-width: 44px;
  padding: 4px 2px;
  border-radius: 14px;
  background: rgba(15, 39, 78, 0.62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  cursor: grab;
  transition: transform 0.15s ease, background 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.qbiz-ai-trigger.is-dragging {
  cursor: grabbing;
  opacity: 0.95;
  transform: scale(1.08);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.38);
}

@media (min-width: 900px) {
  .qbiz-ai-trigger {
    right: 24px;
    bottom: 24px;
    width: 48px;
    height: 52px;
    border-radius: 16px;
    gap: 3px;
  }
}

.qbiz-ai-trigger:hover {
  transform: translateY(-2px);
  background: rgba(30, 64, 175, 0.72);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 6px 20px rgba(15, 42, 90, 0.32);
}

.qbiz-ai-trigger:active {
  transform: scale(0.95);
}

.ai-sparkle-icon {
  display: grid;
  place-items: center;
  color: #38bdf8;
  line-height: 1;
}

.ai-sparkle-icon svg {
  width: 20px;
  height: 20px;
}

.ai-trigger-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
}

.ai-trigger-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid #ffffff;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.7);
}

/* AI Sheet Modal */
.qbiz-ai-sheet {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.ai-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.22);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.ai-sheet-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 76dvh;
  max-height: 82dvh;
  background: #ffffff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1001;
  animation: aiSheetSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@keyframes aiSheetSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@media (min-width: 900px) {
  .ai-sheet-panel {
    left: auto;
    right: 28px;
    bottom: 28px;
    width: 440px;
    height: 640px;
    max-height: calc(100vh - 56px);
    border-radius: 16px;
    border: 1px solid #cbd5e1;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.25);
    animation: aiSheetFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    padding-bottom: 0;
  }
}

@keyframes aiSheetFadeIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header */
.ai-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  z-index: 10;
  flex-shrink: 0;
  gap: 8px;
  min-width: 0;
}

.ai-head-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 0%;
  overflow: hidden;
}

.ai-head-info > div {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.ai-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #102a56, #2563eb);
  color: #ffffff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.ai-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.ai-title-row strong {
  font-size: 13.5px;
  color: #0f172a;
  white-space: nowrap;
  flex-shrink: 0;
}

.ai-route-badge {
  font-size: 10px;
  font-weight: 700;
  color: #1e40af;
  background: #dbeafe;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
  flex-shrink: 1;
}

.ai-provider-badge {
  display: block;
  font-size: 10.5px;
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.ai-head-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.ai-btn-sm {
  min-height: 32px;
  min-width: 32px;
  padding: 0 6px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.ai-dev-btn {
  background: #0f172a;
  color: #38bdf8;
  border-color: #1e293b;
}

.ai-voice-mute-btn {
  font-size: 15px;
  line-height: 1;
  transition: all 0.2s ease;
  min-width: 34px;
  min-height: 34px;
  border-radius: 8px;
}

.ai-voice-mute-btn.is-muted {
  background: #fee2e2;
  border-color: #f87171;
  color: #b91c1c;
  opacity: 1;
}

.ai-voice-mute-btn.is-speaking {
  background: #eff6ff;
  border-color: #60a5fa;
  animation: ai-tts-pulse 1s infinite alternate;
}

@keyframes ai-tts-pulse {
  from { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
  to { transform: scale(1.06); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0); }
}

/* Floating Banner when Speech Synthesis is Active */
.ai-speaking-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  background: #eff6ff;
  border-top: 1px solid #bfdbfe;
  border-bottom: 1px solid #bfdbfe;
  color: #1e40af;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  animation: ai-tts-pulse 1.2s infinite alternate;
}
@keyframes aiSpin {
  to { transform: rotate(360deg); }
}

.ai-loading-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin: 6px 0;
  background: rgba(241, 245, 249, 0.9);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-size: 13px;
  color: #475569;
  width: fit-content;
}

.ai-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #cbd5e1;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: aiSpin 0.7s linear infinite;
}

.ai-speaking-banner-btn {
  background: #fee2e2;
  border: 1px solid #f87171;
  color: #b91c1c;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ai-speaking-banner-btn:hover {
  background: #fca5a5;
}

.ai-msg-speak-btn {
  background: transparent;
  border: none;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
  margin-left: 6px;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}
.ai-msg-speak-btn:hover {
  opacity: 1;
}

.ai-close-btn {
  min-width: 34px;
  min-height: 34px;
  border-radius: 6px;
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.ai-close-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* Provider Drawer */
.ai-provider-drawer {
  background: #f1f5f9;
  border-bottom: 1px solid #cbd5e1;
  padding: 12px 16px;
  font-size: 12.5px;
  flex-shrink: 0;
}

.ai-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.ai-drawer-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-drawer-body label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 600;
  color: #334155;
}

.ai-drawer-body input, .ai-drawer-body select {
  height: 36px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  padding: 0 10px;
  font-size: 12.5px;
  background: #ffffff;
}

.ai-btn-save {
  margin-top: 4px;
  min-height: 38px;
  font-size: 12.5px;
}

.ai-link-btn {
  background: none;
  border: none;
  color: #2563eb;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

/* DEV Inspector */
.ai-dev-inspector {
  background: #0f172a;
  color: #f8fafc;
  padding: 10px 14px;
  border-bottom: 1px solid #1e293b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  flex-shrink: 0;
  max-height: 160px;
  overflow-y: auto;
}

.ai-inspector-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  color: #94a3b8;
  font-weight: 700;
}

.ai-dev-tag {
  background: #b91c1c;
  color: #ffffff;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 9.5px;
}

.ai-dev-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
}

.ai-dev-grid div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-dev-grid span {
  color: #94a3b8;
}

.ai-dev-grid b {
  color: #38bdf8;
}

.ai-dev-full {
  grid-column: 1 / -1;
}

/* Message List */
.ai-messages-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #ffffff;
  scroll-behavior: smooth;
}

.ai-msg {
  display: flex;
  flex-direction: column;
  max-width: 90%;
}

.ai-msg.user {
  align-self: flex-end;
  align-items: flex-end;
}

.ai-msg.assistant {
  align-self: flex-start;
  align-items: flex-start;
  max-width: 95%;
}

/* Thẻ đề xuất Proposal Card & Review Card luôn mở rộng 100% không gian bề ngang */
.ai-msg.assistant.has-proposal,
.ai-msg.assistant:has(.ai-proposal-card),
.ai-msg:has(.ai-proposal-card) {
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
}

.ai-bubble {
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.4;
  word-break: break-word;
}

.user-bubble {
  background: #1e40af;
  color: #ffffff;
  border-bottom-right-radius: 4px;
}

.assistant-bubble {
  background: #f8fafc;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  border-bottom-left-radius: 4px;
  width: 100%;
  box-sizing: border-box;
}

.assistant-bubble.has-proposal-only,
.assistant-bubble.has-proposal,
.assistant-bubble:has(.ai-proposal-card) {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

.assistant-bubble.has-proposal .ai-bubble-content,
.assistant-bubble:has(.ai-proposal-card) .ai-bubble-content {
  background: #f8fafc;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 6px;
  display: inline-block;
  font-size: 13px;
  line-height: 1.4;
}

.assistant-bubble.has-proposal-only .ai-proposal-card,
.assistant-bubble.has-proposal .ai-proposal-card,
.assistant-bubble:has(.ai-proposal-card) .ai-proposal-card {
  margin-top: 0;
}

.ai-msg-time {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 3px;
  padding: 0 4px;
}

.ai-bullet {
  margin-left: 14px;
  margin-bottom: 2px;
  line-height: 1.35;
}

.ai-sub-bullet {
  margin-left: 24px;
  margin-bottom: 2px;
  line-height: 1.35;
  color: #334155;
  font-size: 12.5px;
  list-style-type: circle;
}

.ai-num-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 2px;
  margin-bottom: 2px;
  line-height: 1.35;
}

.ai-num-badge {
  font-weight: 600;
  color: #334155;
  flex-shrink: 0;
  min-width: 16px;
}

.ai-num-text {
  flex: 1;
  min-width: 0;
}

.ai-list {
  margin: 4px 0;
  padding-left: 0;
}

.ai-divider {
  margin: 6px 0 !important;
  border: none !important;
  border-top: 1px dashed #cbd5e1 !important;
}

.ai-p-gap {
  display: block;
  height: 6px;
}

/* Candidate Clarification Box */
.ai-candidates-box {
  margin-top: 10px;
  border-top: 1px dashed #cbd5e1;
  padding-top: 8px;
}

.ai-candidates-label {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  margin-bottom: 6px;
}

.ai-candidates-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-candidate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  min-height: 44px;
  transition: all 0.15s ease;
}

.ai-candidate-row:hover {
  border-color: #2563eb;
  background: #eff6ff;
}

.ai-cand-info strong {
  display: block;
  font-size: 12.5px;
  color: #0f172a;
}

.ai-cand-info small {
  display: block;
  font-size: 11px;
  color: #64748b;
}

.ai-cand-stock {
  font-size: 11.5px;
  color: #059669;
  font-weight: 700;
  white-space: nowrap;
}

/* Structured Proposal Card - High-end Enterprise Palette */
.ai-proposal-card {
  width: 100%;
  box-sizing: border-box;
  margin: 4px 0 2px 0;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03);
}

.ai-proposal-card.is-confirmed {
  border-color: #10b981;
  background: #f0fdf4;
}

.ai-proposal-card.is-cancelled {
  border-color: #cbd5e1;
  opacity: 0.7;
}

.ai-proposal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 8px;
}

.ai-prop-tag {
  font-size: 10.5px;
  font-weight: 750;
  padding: 2.5px 7px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ai-prop-tag.brand, .ai-prop-tag.default {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.ai-prop-tag.info {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.ai-prop-tag.warn {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

.ai-prop-tag.danger {
  background: #fff0ee;
  color: #c23d2b;
  border: 1px solid #fecdd3;
}

.ai-prop-title {
  font-size: 13.5px;
  font-weight: 750;
  color: #0f172a;
}

.ai-prop-summary {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  margin: 3px 0 8px 0;
  line-height: 1.4;
}

/* Command Echo Bar at top of Proposal Card - Subtle & Refined Quote */
.ai-prop-cmd-bar {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 2.7em;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-left: 2.5px solid #2575fc;
  border-radius: 4px;
  padding: 3px 8px;
  margin-bottom: 7px;
  font-size: 11px;
  font-style: italic;
  color: #475569;
  line-height: 1.35;
  word-break: break-word;
}

.ai-prop-cmd-text {
  font-weight: 500;
  color: #334155;
}

/* Header V2: Clean, Visual with Radiant Sapphire Total */
.ai-prop-header-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 8px;
}

.ai-prop-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-prop-title-v2 {
  font-size: 13.5px;
  font-weight: 750;
  color: #0f172a;
}

.ai-prop-total-big {
  font-size: 15.5px;
  font-weight: 850;
  color: #0f56d9;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}

/* Visual Item Rows - Cohesive Minimalist Layout */
.ai-prop-items-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 7px;
}

.ai-prop-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 5px;
  padding: 4px 8px;
  gap: 8px;
}

.ai-prop-item-left {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.ai-prop-item-name {
  font-size: 11.5px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.25;
}

.ai-prop-item-badges {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.ai-pill-svc {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
  line-height: 1.25;
}

.ai-pill-warranty {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  line-height: 1.25;
}

.ai-prop-item-right {
  display: flex;
  align-items: baseline;
  gap: 3px;
  flex-shrink: 0;
  text-align: right;
}

.ai-prop-item-qty {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 500;
}

.ai-prop-item-price {
  font-size: 11.5px;
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

/* Footer Metadata Strip - Sleek Enterprise Micro-chips */
.ai-prop-footer-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3.5px 7px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 4px;
  font-size: 10.5px;
  color: #334155;
  margin-bottom: 7px;
}

.ai-prop-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.ai-meta-k {
  color: #64748b;
  font-weight: 500;
}

.ai-prop-meta-chip b {
  color: #0f172a;
  font-weight: 600;
}

.ai-prop-footer-sep {
  color: #cbd5e1;
  font-weight: 600;
  font-size: 9.5px;
  margin: 0 1px;
}

.ai-prop-params {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.ai-param-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  line-height: 1.4;
}

.ai-param-row span {
  color: #64748b;
  font-size: 12.5px;
  font-weight: 500;
  flex-shrink: 0;
}

.ai-param-row b {
  color: #0f172a;
  font-weight: 650;
  text-align: right;
  word-break: break-word;
}

.ai-prop-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  width: 100%;
}

.ai-btn-confirm {
  flex: 1;
  min-height: 40px;
  font-size: 14px;
  font-weight: 750;
  border-radius: 8px;
  border: 1px solid #0d4dc7;
  background: linear-gradient(180deg, #2575fc, #1059e2);
  color: #ffffff;
  box-shadow: 0 2px 7px rgba(16, 89, 226, 0.28);
  letter-spacing: 0.2px;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-btn-confirm:hover {
  background: linear-gradient(180deg, #3580fd, #1461ea);
  box-shadow: 0 3px 9px rgba(16, 89, 226, 0.35);
}

.ai-btn-cancel {
  min-height: 40px;
  font-size: 13.5px;
  font-weight: 600;
  padding: 0 18px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-btn-cancel:hover {
  background: #f8fafc;
  color: #1e293b;
  border-color: #94a3b8;
}

.ai-prop-success-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 2px;
}

.ai-prop-status-ok {
  font-size: 13.5px;
  font-weight: 750;
  color: #047857;
  padding: 2px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ai-btn-success-nav {
  width: 100%;
  min-height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  color: #15803d;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.15);
  transition: all 0.15s ease;
  padding: 0 14px;
}

.ai-btn-success-nav:hover {
  background: #dcfce7;
  border-color: #4ade80;
  color: #166534;
}

.ai-nav-arrow {
  font-size: 15px;
  font-weight: 800;
  transition: transform 0.15s ease;
}

.ai-btn-success-nav:hover .ai-nav-arrow {
  transform: translateX(3px);
}

.ai-prop-status-cancel {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  padding: 6px 0;
}

/* Contextual Chips Bar */
.ai-chips-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 14px;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ai-chips-bar::-webkit-scrollbar {
  display: none;
}

.ai-chip {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  cursor: pointer;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  transition: all 0.15s ease;
  user-select: none;
  flex-shrink: 0;
}

.ai-chip:hover {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1e40af;
}

.ai-chip:active {
  transform: scale(0.96);
}

/* Input Form */
.ai-input-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
}

.ai-text-input {
  flex: 1 1 0%;
  min-width: 0;
  height: 44px;
  border-radius: 22px;
  border: 1.5px solid #cbd5e1;
  padding: 0 14px;
  font-size: 14px;
  color: #0f172a;
  outline: none;
  transition: border-color 0.15s ease;
}

@media (max-width: 380px) {
  .ai-input-form {
    padding: 8px 10px;
    gap: 6px;
  }
}

.ai-text-input:focus {
  border-color: #1e40af;
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}

.ai-send-btn {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: #1e40af;
  color: #ffffff;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.ai-send-btn:hover {
  background: #1d4ed8;
}

.ai-send-btn:active {
  transform: scale(0.95);
}

.ai-mic-btn {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: #f8fafc;
  color: #475569;
  border: 1.5px solid #cbd5e1;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.ai-mic-btn:hover {
  background: #e2e8f0;
  color: #1e293b;
  border-color: #94a3b8;
}

.ai-mic-btn:active {
  transform: scale(0.95);
}

.ai-mic-btn.is-listening {
  background: #fee2e2;
  color: #ef4444;
  border-color: #f87171;
  animation: aiMicPulse 1.2s infinite ease-in-out;
}

.ai-mic-btn.is-processing {
  background: #e0e7ff;
  color: #4338ca;
  border-color: #818cf8;
  animation: aiMicSpin 1s infinite linear;
}

.ai-mic-btn.ai-mic-unsupported {
  opacity: 0.5;
  cursor: not-allowed;
}

@keyframes aiMicPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

@keyframes aiMicSpin {
  0% { opacity: 0.7; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

/* ========================================================
   BATCH 3 MULTIMODAL (ATTACHMENTS, VOICE, REVIEW CARDS)
   ======================================================== */
.ai-attach-wrap {
  position: relative;
  flex-shrink: 0;
}

.ai-attach-btn {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: #f8fafc;
  color: #475569;
  border: 1.5px solid #cbd5e1;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.ai-attach-btn:hover {
  background: #e2e8f0;
  color: #1e293b;
  border-color: #94a3b8;
}

.ai-attach-btn:active {
  transform: scale(0.95);
}

.ai-attach-menu {
  position: absolute;
  bottom: 52px;
  left: 0;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
  display: flex;
  flex-direction: column;
  padding: 6px;
  min-width: 140px;
  z-index: 1002;
  animation: aiSheetFadeIn 0.15s ease-out;
}

.ai-attach-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease;
}

.ai-attach-menu-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.ai-attach-item-icon {
  font-size: 15px;
}

/* Attachment Tray */
.ai-attachment-tray {
  display: flex;
  gap: 6px;
  padding: 6px 14px;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: none;
}

.ai-attachment-tray::-webkit-scrollbar {
  display: none;
}

.ai-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  font-size: 12px;
  color: #1e293b;
  white-space: nowrap;
}

.ai-chip-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

.ai-chip-size {
  font-size: 10.5px;
  color: #64748b;
}

.ai-chip-remove {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  line-height: 1;
}

.ai-chip-remove:hover {
  color: #ef4444;
}

/* Voice Status Bar */
.ai-voice-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.ai-voice-status.state-listening {
  background: #fef2f2;
  color: #b91c1c;
}

.ai-voice-status.state-processing {
  background: #eef2ff;
  color: #4338ca;
}

.ai-voice-status.state-recognized {
  background: #ecfdf5;
  color: #047857;
}

.ai-voice-status.state-error {
  background: #fffbeb;
  color: #b45309;
}

.ai-voice-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  margin-right: 6px;
  animation: aiMicPulse 1s infinite ease-in-out;
}

.ai-voice-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-voice-cancel-btn,
.ai-voice-clear-btn {
  background: transparent;
  border: none;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  color: inherit;
  opacity: 0.85;
}

.ai-voice-cancel-btn:hover,
.ai-voice-clear-btn:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.05);
}

/* Document Review Card */
.ai-review-card {
  margin-top: 10px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px;
}

.ai-review-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 6px;
  margin-bottom: 8px;
  font-size: 12.5px;
}

.ai-review-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  margin-bottom: 8px;
}

.ai-review-table th,
.ai-review-table td {
  padding: 6px 4px;
  text-align: left;
  border-bottom: 1px solid #f1f5f9;
}

.ai-review-table th {
  color: #64748b;
  font-weight: 700;
}

.ai-conf-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
}

.ai-conf-high {
  background: #ecfdf5;
  color: #047857;
}

.ai-conf-low {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.ai-warning-box {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 11px;
  color: #92400e;
  margin-bottom: 8px;
}

.ai-warning-box ul {
  margin: 4px 0 0 16px;
  padding: 0;
}

/* Import Assistant Card */
.ai-import-card {
  margin-top: 10px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px;
}

.ai-mapping-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  margin: 6px 0;
}

.ai-mapping-table td {
  padding: 4px 6px;
  border-bottom: 1px solid #f1f5f9;
}

/* User Message Attachment Thumbnail */
.user-attachment-thumb {
  margin-bottom: 6px;
  max-width: 180px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.user-attachment-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.user-attachment-file {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  font-size: 11.5px;
  margin-bottom: 6px;
}

/* ========================================================
 * BATCH 2B: OPERATIONAL AI CARD STYLES
 * ======================================================== */

.ai-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ai-badge-warn {
  font-size: 11px;
  font-weight: 800;
  background: #fef3c7;
  color: #b45309;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ai-badge-info {
  font-size: 11px;
  font-weight: 800;
  background: #e0e7ff;
  color: #4338ca;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ai-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  min-height: 34px;
}

.ai-action-btn.primary {
  background: #1e40af;
  color: #ffffff;
}

.ai-action-btn.primary:hover {
  background: #1d4ed8;
}

.ai-action-btn.secondary {
  background: #f1f5f9;
  color: #334155;
  border-color: #cbd5e1;
}

.ai-action-btn.secondary:hover {
  background: #e2e8f0;
}

/* Attention Card */
.ai-attention-card {
  margin-top: 10px;
  background: #ffffff;
  border: 1.5px solid #f59e0b;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.1);
}

.ai-attention-row {
  background: #fdfdfd;
  border: 1px solid #f1f5f9;
  border-left: 4px solid #94a3b8;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}

.ai-attention-row.urgency-critical {
  border-left-color: #ef4444;
  background: #fff5f5;
}

.ai-attention-row.urgency-high {
  border-left-color: #f97316;
  background: #fffaf0;
}

.ai-att-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.ai-urgency-badge {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
}

.ai-urgency-badge.CRITICAL {
  background: #fee2e2;
  color: #dc2626;
}

.ai-urgency-badge.HIGH {
  background: #ffedd5;
  color: #ea580c;
}

.ai-urgency-badge.MEDIUM {
  background: #fef9c3;
  color: #a16207;
}

.ai-urgency-badge.LOW {
  background: #f1f5f9;
  color: #64748b;
}

.ai-att-detail {
  font-size: 12px;
  color: #475569;
  margin: 4px 0 8px 0;
  line-height: 1.4;
}

.ai-att-actions {
  display: flex;
  gap: 6px;
}

/* Replenishment Card */
.ai-replenish-card {
  margin-top: 10px;
  background: #ffffff;
  border: 1.5px solid #6366f1;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

.ai-replenish-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
  gap: 10px;
}

.ai-replenish-row:last-child {
  border-bottom: none;
}

.ai-rep-info {
  flex: 1;
  min-width: 0;
}

.ai-rep-info strong {
  display: block;
  font-size: 12.5px;
  color: #0f172a;
  line-height: 1.35;
  word-break: break-word;
}

.ai-rep-info small {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

.ai-lowdata-tag {
  font-size: 10px;
  color: #b45309;
  background: #fef3c7;
  padding: 1px 6px;
  border-radius: 4px;
  margin-top: 4px;
  display: inline-block;
}

/* Health Card */
.ai-health-card {
  margin-top: 10px;
  background: #ffffff;
  border: 1.5px solid #0284c7;
  border-radius: 12px;
  padding: 12px;
}

.ai-health-row {
  background: #f8fafc;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  border-left: 3.5px solid #0284c7;
}

.ai-health-row.sev-critical {
  border-left-color: #ef4444;
  background: #fef2f2;
}

.ai-health-row.sev-high {
  border-left-color: #f97316;
  background: #fff7ed;
}

.ai-health-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.ai-health-desc {
  font-size: 11.5px;
  color: #475569;
  margin: 3px 0;
}

.ai-health-act {
  display: block;
  font-size: 11px;
  color: #2563eb;
  font-weight: 600;
}

/* 4-Step Diagnosis Card (WHAT HAPPENED, WHY, EVIDENCE, NEXT ACTION) */
.ai-diagnosis-card {
  margin-top: 10px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-diag-step {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
}

.ai-diag-label {
  font-size: 10.5px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.ai-diag-val {
  font-size: 12.5px;
  color: #0f172a;
  line-height: 1.4;
}

/* Business Mode Selector (Phase 2A) */
.business-mode-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0 16px 0;
}

.mode-current-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--bg-surface, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  padding: 10px 14px;
}

.mode-badge-label {
  font-size: 13px;
  color: var(--text-muted, #64748b);
  margin-right: 6px;
}

.mode-badge-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary, #0284c7);
}

.mode-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #64748b);
  margin-top: 4px;
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.mode-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: var(--bg-card, #ffffff);
  border: 1.5px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
}

.mode-card:hover {
  border-color: var(--primary-light, #93c5fd);
}

.mode-card.active {
  border-color: var(--primary, #0284c7);
  background: var(--primary-subtle, #f0f9ff);
  box-shadow: 0 0 0 1px var(--primary, #0284c7);
}

.mode-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mode-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--primary, #0284c7);
}

.mode-card-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-color, #0f172a);
  flex: 1;
}

.mode-pill-current {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  background: var(--primary, #0284c7);
  color: #ffffff;
  border-radius: 999px;
  white-space: nowrap;
}

.mode-card-desc {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  line-height: 1.35;
}

.mode-preview-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-surface, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  padding: 14px;
}

.mode-caps-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mode-cap-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
}

.mode-cap-item.enabled {
  background: #ecfdf5;
  color: #065f46;
  border-color: #a7f3d0;
}

.mode-cap-item.disabled {
  background: #f1f5f9;
  color: #94a3b8;
  border-color: #e2e8f0;
}

.cap-indicator {
  font-weight: 700;
}

.mode-recommended-section {
  border-top: 1px solid var(--border-color, #e2e8f0);
  padding-top: 10px;
}

.mode-recommended-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-color, #0f172a);
}

.mode-recommended-list {
  margin: 6px 0 0 18px;
  padding: 0;
  font-size: 12px;
  color: var(--text-muted, #64748b);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mode-ui-placeholder-card {
  background: var(--bg-card, #ffffff);
  border: 1px dashed var(--border-color, #cbd5e1);
  border-radius: var(--radius-md, 8px);
  padding: 12px 14px;
}

.mode-ui-placeholder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mode-ui-placeholder-head strong {
  font-size: 13px;
  color: var(--text-color, #0f172a);
}

.mode-ui-placeholder-head p {
  margin: 2px 0 0 0;
  font-size: 11.5px;
  color: var(--text-muted, #64748b);
}

.mode-badge-soon {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  white-space: nowrap;
}

.mode-priorities-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color, #e2e8f0);
}

.mode-priority-list {
  margin: 8px 0 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mode-priority-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-color, #0f172a);
}

.priority-bullet {
  color: var(--primary, #2563eb);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}

@media (max-width: 640px) {
  .business-mode-container {
    gap: 10px;
    padding: 2px 0 20px 0;
  }
  .mode-current-banner {
    padding: 8px 12px;
    border-radius: 8px;
    gap: 6px;
  }
  .mode-badge-label {
    font-size: 12px;
  }
  .mode-badge-name {
    font-size: 13px;
  }
  #btnRestoreCurrent {
    font-size: 11.5px;
    padding: 3px 8px;
  }
  .mode-section-title {
    font-size: 12px;
    margin-top: 2px;
  }
  .mode-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .mode-card {
    padding: 8px 10px;
    gap: 4px;
    border-radius: 8px;
  }
  .mode-card-header {
    gap: 6px;
  }
  .mode-card-icon {
    width: 20px;
    height: 20px;
  }
  .mode-card-name {
    font-size: 13px;
  }
  .mode-card-desc {
    font-size: 11px;
    line-height: 1.3;
  }
  .mode-pill-current {
    font-size: 9px;
    padding: 1px 5px;
  }
  .mode-preview-section {
    padding: 10px 12px;
    gap: 8px;
    border-radius: 8px;
  }
  .mode-cap-item {
    padding: 3px 8px;
    font-size: 11px;
  }
  .mode-priority-list {
    margin: 4px 0 0;
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
  }
  .mode-recommended-section {
    padding-top: 8px;
  }
  .mode-ui-placeholder-card {
    display: none;
  }
}

/* ==========================================================================
   Settings Center & Settings List - Ultra-Compact Mobile First
   ========================================================================== */
.settings-center {
  display: grid;
  gap: 12px;
  max-width: 900px;
}
.settings-section {
  padding: 12px 16px;
  border-radius: 16px;
}
.settings-section .section-head {
  margin-bottom: 6px;
  padding-bottom: 4px;
}
.settings-section .section-head h2 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text, #13233d);
  margin: 0 0 2px 0;
}
.settings-section .section-head p {
  font-size: 12px;
  color: var(--q-muted, #64748b);
  margin: 0;
}
.settings-list {
  display: grid;
}
.settings-list > button,
.settings-connect-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 50px !important;
  padding: 8px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: transparent !important;
  text-align: left !important;
  color: inherit !important;
  width: 100% !important;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.settings-list > button:last-child,
.settings-connect-row:last-child {
  border-bottom: 0 !important;
}
.settings-list > button:active,
.settings-connect-row:active {
  background: rgba(241, 245, 249, 0.6) !important;
  border-radius: 8px;
}
.settings-list > button > span,
.settings-connect-row > span {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 12px !important;
  row-gap: 2px !important;
  align-items: center !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
.settings-list > button > span > .ui-icon,
.settings-connect-row > span > .ui-icon {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 32px !important;
  height: 32px !important;
  padding: 6px !important;
  border-radius: 9px !important;
  background: #f1f5f9 !important;
  color: #334155 !important;
  box-sizing: border-box !important;
  justify-self: center !important;
  align-self: center !important;
  float: none !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
.settings-list > button > span > b,
.settings-connect-row > span > b {
  grid-column: 2 !important;
  grid-row: 1 !important;
  font-size: 13.5px !important;
  font-weight: 650 !important;
  color: var(--text, #13233d) !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.settings-list > button > span > small,
.settings-connect-row > span > small {
  grid-column: 2 !important;
  grid-row: 2 !important;
  font-size: 11.5px !important;
  color: var(--q-muted, #64748b) !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.settings-list > button > .ui-icon:last-child,
.settings-connect-row > .ui-icon:last-child {
  width: 16px !important;
  height: 16px !important;
  color: #94a3b8 !important;
  flex-shrink: 0 !important;
  margin-left: 6px !important;
}

/* Colored Icon Squircles for Settings Rows */
.settings-list > button[data-action="business-profile"] > span > .ui-icon {
  background: #eff6ff !important;
  color: #2563eb !important;
}
.settings-list > button[data-action="business-mode-selector"] > span > .ui-icon {
  background: #faf5ff !important;
  color: #9333ea !important;
}
.settings-list > button[data-action="sale-preferences"] > span > .ui-icon {
  background: #ecfdf5 !important;
  color: #059669 !important;
}
.settings-list > button[data-action="warehouse-management"] > span > .ui-icon {
  background: #fffbeb !important;
  color: #d97706 !important;
}
.settings-list > button[data-action="tax-preferences"] > span > .ui-icon {
  background: #f0fdfa !important;
  color: #0d9488 !important;
}
.settings-list > button[data-action="ui-profile-selector"] > span > .ui-icon {
  background: #eef2ff !important;
  color: #4f46e5 !important;
}
.settings-list > button[data-page="prints"] > span > .ui-icon {
  background: #f0f9ff !important;
  color: #0284c7 !important;
}
.settings-list > button[data-action="data-settings"] > span > .ui-icon {
  background: #fefce8 !important;
  color: #ca8a04 !important;
}
.settings-list > button[data-page="permissions"] > span > .ui-icon {
  background: #f5f3ff !important;
  color: #7c3aed !important;
}
.settings-list > button[data-page="advanced"] > span > .ui-icon {
  background: #fff1f2 !important;
  color: #e11d48 !important;
}
.settings-connect-row > span > .ui-icon,
.settings-list > button[data-action="connections-settings"] > span > .ui-icon {
  background: #fff7ed !important;
  color: #ea580c !important;
}

@media (max-width: 640px) {
  .settings-center {
    gap: 8px !important;
    padding-bottom: 28px !important;
  }
  .settings-section {
    padding: 8px 12px 6px !important;
    border-radius: 14px !important;
    margin-bottom: 0 !important;
  }
  .settings-section .section-head {
    margin-bottom: 2px !important;
    padding-bottom: 2px !important;
    border-bottom: 1px solid #f8fafc !important;
  }
  .settings-section .section-head h2 {
    font-size: 11.5px !important;
    font-weight: 750 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #64748b !important;
    margin: 2px 0 !important;
  }
  .settings-section .section-head p {
    display: none !important; /* Hide redundant descriptive text on mobile */
  }
  .settings-list > button,
  .settings-connect-row {
    min-height: 46px !important;
    padding: 6.5px 0 !important;
  }
  .settings-list > button > span,
  .settings-connect-row > span {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    column-gap: 10px !important;
  }
  .settings-list > button > span > .ui-icon,
  .settings-connect-row > span > .ui-icon {
    width: 28px !important;
    height: 28px !important;
    padding: 5px !important;
    border-radius: 7.5px !important;
  }
  .settings-list > button > span > b,
  .settings-connect-row > span > b {
    font-size: 13.5px !important;
  }
  .settings-list > button > span > small,
  .settings-connect-row > span > small {
    font-size: 11px !important;
  }
  .settings-section.settings-connect {
    padding: 6px 12px !important;
  }
  .settings-section .surface-callout {
    padding: 7px 10px !important;
    margin-top: 4px !important;
  }
  .settings-section .secondary-btn {
    min-height: 36px !important;
    margin-top: 6px !important;
    width: 100% !important;
    font-size: 12.5px !important;
  }
}

/* ==========================================================================
   UI Profile / Kiểu Giao Diện (Phase 3A)
   ========================================================================== */

/* Settings Modal: UI Profile */
.ui-profile-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0 16px 0;
}

.ui-profile-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.ui-profile-auto-hint {
  font-size: 12.5px;
  color: #0369a1;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: var(--radius-sm, 6px);
  padding: 5px 10px;
  width: 100%;
}

.ui-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.ui-profile-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: var(--bg-card, #ffffff);
  border: 1.5px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
}

.ui-profile-card:hover {
  border-color: var(--primary-light, #93c5fd);
}

.ui-profile-card.active {
  border-color: var(--primary, #0284c7);
  background: #f0f9ff;
  box-shadow: 0 0 0 1px var(--primary, #0284c7);
}

.ui-profile-preview-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.ui-preview-box {
  background: var(--bg-card, #ffffff);
  border: 1.5px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-md, 10px);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ui-preview-subhead {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #64748b);
}

.ui-preview-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.preview-quick-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 10px 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  min-height: 60px;
}

.preview-quick-tile strong {
  font-size: 12px;
  color: #0f172a;
}

.preview-quick-tile small {
  font-size: 10px;
  color: #64748b;
}

.preview-quick-tile .qt-ico {
  display: grid;
  place-items: center;
  color: #0284c7;
}

.preview-quick-tile.preview-hero {
  border-color: #93c5fd;
  background: #f0f7ff;
}

.ui-preview-product-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.preview-product-photo {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #e2e8f0;
  display: grid;
  place-items: center;
  color: #64748b;
  flex-shrink: 0;
}

.preview-product-photo.size-large {
  width: 56px;
  height: 56px;
}

.preview-product-photo.size-small {
  width: 34px;
  height: 34px;
}

.preview-product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.preview-product-info strong {
  font-size: 13px;
  color: #0f172a;
}

.preview-product-info p {
  font-size: 11px;
  color: #64748b;
  margin: 0;
}

.preview-product-info b {
  font-size: 12px;
  color: #0284c7;
}

.preview-badge {
  font-size: 11px;
  color: #166534;
  background: #dcfce7;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 600;
}

.preview-fast-add {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  background: #0284c7;
  border: 0;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
}

/* Presentation Area A: Dashboard Quick Actions */
.dashboard-quick-grid.ui-profile-compact {
  gap: 6px;
}
.dashboard-quick-grid.ui-profile-compact .quick-tile {
  padding: 8px 6px;
  min-height: 64px;
}
.dashboard-quick-grid.ui-profile-compact .quick-tile strong {
  font-size: 13px;
}

.dashboard-quick-grid.ui-profile-fast .quick-tile {
  border-width: 1.5px;
  border-color: #93c5fd;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.08);
}
.dashboard-quick-grid.ui-profile-fast .quick-hero-main {
  background: #f0f7ff;
}
.dashboard-quick-grid.ui-profile-fast .quick-tile strong {
  font-weight: 800;
}

.dashboard-quick-grid.ui-profile-visual {
  gap: 10px;
}
.dashboard-quick-grid.ui-profile-visual .quick-tile .qt-ico {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

/* Presentation Area B: Catalog (Hàng hóa / Dịch vụ) */
.goods-list.ui-profile-compact .goods-row {
  padding: 6px 10px;
  min-height: 44px;
}
.product-grid.ui-profile-compact {
  gap: 8px;
}
.product-grid.ui-profile-compact .product-card {
  padding: 8px;
  gap: 6px;
}
.product-grid.ui-profile-compact .pc-cover {
  height: 90px;
}
.product-grid.ui-profile-compact .pc-body h3 {
  font-size: 13px;
}

.product-grid.ui-profile-visual .product-card {
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  border-color: #cbd5e1;
}
.product-grid.ui-profile-visual .pc-cover {
  height: 150px;
}
.product-grid.ui-profile-visual .pc-body h3 {
  font-size: 15px;
  font-weight: 700;
}

.product-grid.ui-profile-fast .product-card {
  border-color: #93c5fd;
}
.product-grid.ui-profile-fast .product-card:active {
  transform: scale(0.98);
}

/* Presentation Area C: POS (Bán hàng) */
.pos-grid.ui-profile-compact {
  gap: 6px;
}
.pos-grid.ui-profile-compact .pos-product {
  padding: 6px;
}
.pos-grid.ui-profile-compact .pos-product-image {
  height: 38px;
}
.pos-grid.ui-profile-compact .pos-product strong {
  font-size: 12px;
}

.pos-grid.ui-profile-visual .pos-product-image {
  height: 64px;
  border-radius: 10px;
}
.pos-grid.ui-profile-visual .pos-product {
  padding: 10px;
  border-radius: 12px;
}
.pos-grid.ui-profile-visual .pos-product strong {
  font-size: 14px;
  font-weight: 700;
}

.pos-grid.ui-profile-fast .pos-add {
  min-width: 36px;
  min-height: 36px;
  font-size: 18px;
  font-weight: 800;
  background: var(--primary, #0284c7);
  color: #ffffff;
  border-radius: 8px;
}
.pos-grid.ui-profile-fast .pos-inline-qty button {
  min-width: 32px;
  min-height: 32px;
  font-weight: 800;
}

/* ==============================================================================
   QBIZ KHO PRODUCTION V1 — GATE 1 AUTH & SHOP STYLES
   ============================================================================== */
.user-badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(31, 86, 166, 0.08);
  border: 1px solid rgba(31, 86, 166, 0.2);
  color: #1f56a6;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all .16s ease;
}
.user-badge-btn:hover {
  background: rgba(31, 86, 166, 0.16);
}
.user-badge-btn.icon-only {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.user-badge-btn.icon-only .ui-icon {
  width: 19px;
  height: 19px;
}
.topbar h1, #pageTitle {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
@media (max-width: 920px) {
  .user-badge-btn span {
    display: none !important;
  }
  .user-badge-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 50% !important;
  }
}
.local-data-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f0f7ff;
  border: 1px solid #c7dffc;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.local-data-banner .banner-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.local-data-banner .banner-body strong {
  font-size: 13px;
  color: #1a427a;
}
.local-data-banner .banner-body span {
  font-size: 12px;
  color: #557199;
}
.local-data-banner .banner-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.auth-tabs {
  display: flex;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 16px;
}
.auth-tab {
  flex: 1;
  padding: 10px;
  text-align: center;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
}
.auth-tab.active {
  color: #1f56a6;
  border-bottom-color: #1f56a6;
}
.capability-table-wrap {
  overflow-x: auto;
  margin-top: 14px;
}
.capability-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.capability-table th, .capability-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #eef2f6;
  text-align: center;
}
.capability-table th:first-child, .capability-table td:first-child {
  text-align: left;
}
.capability-table th {
  background: #f8fafc;
  font-weight: 700;
  color: #334155;
}
.capability-table tr:hover td {
  background: #f8fbff;
}
.cap-yes {
  color: #16a34a;
  font-weight: 700;
}
.cap-no {
  color: #94a3b8;
}

/* ==============================================================================
   ENTRY CTA BAR: Tạo shop / Đăng nhập (Hàng 1) + Xem shop demo (Hàng 2)
   ============================================================================== */
.entry-cta-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.entry-cta-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 8px;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 10px;
  min-height: 46px;
  text-align: center;
  cursor: pointer;
  transition: all 0.16s ease;
  line-height: 1.25;
}
.entry-cta-btn.demo-cta-btn {
  grid-column: 1 / -1;
  background: #f0f9ff;
  border: 1.5px dashed #0284c7;
  color: #0284c7;
}
.entry-cta-btn .ui-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-block;
}
.entry-cta-btn span {
  display: inline-block;
  white-space: nowrap;
}
#quickLoginBtn {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100%;
  min-height: 46px !important;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
}
#quickLoginBtn .ui-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-block;
}
#quickLoginBtn span {
  display: inline-block;
  white-space: nowrap;
}
.demo-preview-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
@media (max-width: 480px) {
  .entry-cta-bar {
    gap: 8px;
  }
  .entry-cta-btn {
    padding: 9px 6px;
    font-size: clamp(12px, 3.2vw, 13px);
    gap: 6px;
  }
  .entry-cta-btn span {
    white-space: nowrap !important;
  }
}

/* Compact Demo Top Header */
.demo-compact-header {
  margin-bottom: 10px;
  padding: 6px 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.demo-compact-header button {
  min-height: unset !important;
}
.demo-selector-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
}
.demo-selector-card {
  min-height: 38px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px;
  padding: 5px 8px !important;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  width: 100%;
  box-sizing: border-box;
}
.demo-selector-card:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

/* ==============================================================================
   PUBLIC ENTRY OVERLAY: Full-screen access layer over app shell
   ============================================================================== */
.public-entry-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: rgba(15, 23, 42, 0.68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}

.public-entry-card {
  background: #ffffff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 18px;
  max-width: 520px;
  width: 100%;
  padding: 24px 20px;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.15);
  margin: auto;
  animation: entryCardFadeIn 0.22s ease-out;
}

@keyframes entryCardFadeIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.dashboard-under-overlay {
  filter: blur(4px) brightness(0.92);
  opacity: 0.28;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 480px) {
  .public-entry-overlay {
    padding: 10px;
    align-items: flex-start;
  }
  .public-entry-card {
    padding: 18px 14px;
    border-radius: 16px;
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .ai-sheet-head {
    padding: 8px 10px;
    gap: 6px;
  }
  .ai-avatar {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }
  .ai-avatar svg {
    width: 15px;
    height: 15px;
  }
  .ai-title-row strong {
    font-size: 13px;
  }
  .ai-route-badge {
    max-width: 96px;
    font-size: 9.5px;
  }
  .ai-provider-badge {
    font-size: 10px;
    max-width: 150px;
  }
  .ai-head-actions {
    gap: 4px;
    flex-shrink: 0;
  }
  .ai-btn-sm {
    min-height: 30px;
    min-width: 30px;
    padding: 0 4px;
    font-size: 11px;
  }
  .ai-dev-btn {
    display: none !important;
  }
  .ai-close-btn {
    min-width: 30px;
    min-height: 30px;
  }
}

/* ==============================================================================
   POS PRODUCT HIERARCHY, CATEGORY CHIPS & BOTTOM NAV POLISH (USER SPEC)
   1. Category filter chips: bo ít lại (border-radius: 8px), cân đối khoảng cách trên dưới
   2. Product card vertical hierarchy: Tiêu đề -> Mã -> Tồn -> Giá
   3. Navigation: Bán hàng nổi hơn (hero), Kho (warehouse), Thêm (menu), màu xanh thương hiệu
   ============================================================================== */

/* 1. Category chips: bo ít lại & cân đối trên dưới cho mọi shop */
.pos-chips {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding: 4px 0 6px !important;
  margin: 6px 0 12px !important;
  scrollbar-width: none !important;
}
.pos-chips::-webkit-scrollbar {
  display: none;
}
.pos-chips button {
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 14px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important; /* Bo ít lại thay vì bo tròn capsule 999px */
  background: #edf1f6 !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: normal !important;
  white-space: nowrap !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  cursor: pointer !important;
}
.pos-chips button:hover {
  background: #e2e8f0 !important;
}
.pos-chips button.active {
  background: var(--q-blue, #1485ee) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(20, 133, 238, 0.28) !important;
}

/* 2. Sắp xếp lại thẻ sản phẩm: Dòng 1 Tiêu đề -> Dòng 2 Mã -> Dòng 3 Tồn -> Dòng 4 Giá */
.pos-product {
  position: relative !important;
  min-width: 0 !important;
  border: 1px solid var(--q-line, #e2e8f0) !important;
  border-radius: 12px !important;
  background: #fff !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.pos-product:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
}
.pos-product-main {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 8px 8px 10px !important;
  border: 0 !important;
  background: #fff !important;
  text-align: left !important;
  flex: 1 !important;
  cursor: pointer !important;
}
.pos-product-image {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1.35/1 !important;
  border-radius: 8px !important;
  background: #f1f5f9 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  color: #496079 !important;
  font-weight: 800 !important;
  margin-bottom: 6px !important;
}
.pos-product-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* Treo tồn lên đỉnh ảnh kiểu thẻ (Floating Stock Badge) — nhỏ gọn, khung trắng chữ đen, chấm màu chỉ thị */
.pos-stock-badge {
  position: absolute !important;
  top: 5px !important;
  left: 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3.5px !important;
  padding: 1.5px 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  white-space: nowrap !important;
}

/* Biểu tượng chấm tròn chỉ thị trạng thái tồn */
.stock-dot {
  display: inline-block !important;
  width: 6.5px !important;
  height: 6.5px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.stock-dot.green {
  background: #16a34a !important;
  box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.25) !important;
}
.stock-dot.yellow {
  background: #eab308 !important;
  box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.25) !important;
}

/* Trừ khi hết hàng thì mới đỏ mới ghi chữ hết hàng */
.pos-stock-badge.out-of-stock {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
  padding: 1.5px 6px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(239, 68, 68, 0.3) !important;
}

/* Dịch vụ */
.pos-stock-badge.service {
  background: #ffffff !important;
  color: #6b21a8 !important;
  border-color: rgba(107, 33, 168, 0.2) !important;
  padding: 1.5px 6px !important;
  font-size: 10px !important;
}
/* Dòng 1: Tiêu đề */
.pos-prod-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 13.5px !important;
  line-height: 1.25 !important;
  color: #172033 !important;
  font-weight: 750 !important;
  min-height: 34px !important;
  margin: 0 0 2px !important;
}
/* Dòng 2: Mã */
.pos-prod-sku {
  font-size: 11px !important;
  color: #64748b !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-bottom: 2px !important;
  line-height: 1.25 !important;
}
/* Dòng 3: Giá — khi chưa chọn (mặc định): có padding-right 38px để nhường chỗ cho nút + góc dưới phải */
.pos-prod-price-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding-right: 38px !important;
  min-height: 24px !important;
  width: 100% !important;
}
.pos-prod-price {
  color: var(--q-blue-dark, #0868c6) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}
@media (max-width: 420px) {
  .pos-prod-price {
    font-size: 13px !important;
    letter-spacing: -0.02em !important;
  }
}

/* Nút + mặc định từ trước đến nay: TUYỆT ĐỐI GIỮ NGUYÊN VỊ TRÍ GÓC DƯỚI BÊN PHẢI */
.pos-add {
  position: absolute !important;
  right: 5px !important;
  bottom: 5px !important;
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: var(--q-blue, #1485ee) !important;
  color: #ffffff !important;
  font-size: 25px !important;
  font-weight: 700 !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  line-height: 1 !important;
  box-shadow: 0 2px 6px rgba(20, 133, 238, 0.3) !important;
  transition: transform 0.12s ease !important;
}
.pos-add:hover {
  background: var(--q-blue-dark, #0868c6) !important;
  transform: scale(1.08) !important;
}
.pos-add::after {
  content: none !important;
}

/* KHI ĐƯỢC CHỌN (has-qty): Nút số lượng nhảy xuống ở dưới đáy và BẰNG 2 MÉP SẢN PHẨM */
.pos-product.has-qty .pos-product-main {
  padding-bottom: 4px !important;
}
.pos-product.has-qty .pos-prod-price-row {
  padding-right: 0 !important;
  margin-bottom: 2px !important;
  min-height: 20px !important;
}
.pos-inline-qty {
  position: static !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  height: 28px !important;
  min-height: 28px !important;
  display: grid !important;
  grid-template-columns: 32px 1fr 32px !important;
  align-items: center !important;
  border: 0 !important;
  border-top: 1px solid #bfdbfe !important;
  border-radius: 0 0 11px 11px !important;
  background: #f0f7ff !important;
  overflow: hidden !important;
}
.pos-inline-qty button {
  height: 100% !important;
  min-height: 28px !important;
  border: 0 !important;
  background: #e0eeff !important;
  color: var(--q-blue-dark, #0868c6) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  padding: 0 !important;
}
.pos-inline-qty button:hover {
  background: #cfe0f4 !important;
}
.pos-inline-qty button:active {
  background: #b9d8fc !important;
}
.pos-inline-qty span,
.pos-inline-qty input,
.pos-inline-qty-input {
  text-align: center !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 28px !important;
  padding: 0 2px !important;
}
.pos-inline-qty input,
.pos-inline-qty-input {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  min-width: 0 !important;
  border: 0 !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: normal !important;
  box-sizing: border-box !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
  outline: none !important;
  cursor: text !important;
  border-radius: 0 !important;
}
.pos-inline-qty input::-webkit-outer-spin-button,
.pos-inline-qty input::-webkit-inner-spin-button,
.pos-inline-qty-input::-webkit-outer-spin-button,
.pos-inline-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
.pos-inline-qty input:focus,
.pos-inline-qty-input:focus {
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1.5px #0284c7 !important;
  color: #0284c7 !important;
}

/* Chế độ Lưới 3 ô (Grid 3 cols) */
.pos-grid.grid3 {
  gap: 6px !important;
}
.pos-grid.grid3 .pos-product {
  border-radius: 10px !important;
}
.pos-grid.grid3 .pos-product-main {
  padding: 6px 6px 8px !important;
}
.pos-grid.grid3 .pos-product-image {
  margin-bottom: 4px !important;
  border-radius: 6px !important;
}
.pos-grid.grid3 .pos-prod-title {
  font-size: 12px !important;
  min-height: 28px !important;
  line-height: 1.25 !important;
  margin: 0 0 2px !important;
}
.pos-grid.grid3 .pos-prod-sku {
  font-size: 10px !important;
  margin-bottom: 1px !important;
}
.pos-grid.grid3 .pos-prod-price-row {
  min-height: 20px !important;
  padding-right: 36px !important;
}
.pos-grid.grid3 .pos-prod-price {
  font-size: 12.5px !important;
}
.pos-grid.grid3 .pos-add {
  right: 4px !important;
  bottom: 4px !important;
  width: 34px !important;
  height: 34px !important;
  font-size: 24px !important;
}
.pos-grid.grid3 .pos-product.has-qty .pos-product-main {
  padding: 6px 6px 3px !important;
}
.pos-grid.grid3 .pos-product.has-qty .pos-prod-price-row {
  padding-right: 0 !important;
  margin-bottom: 2px !important;
}
.pos-grid.grid3 .pos-product.has-qty .pos-inline-qty {
  height: 26px !important;
  min-height: 26px !important;
  grid-template-columns: 28px 1fr 28px !important;
  border-radius: 0 0 9px 9px !important;
}
.pos-grid.grid3 .pos-product.has-qty .pos-inline-qty button {
  min-height: 26px !important;
  font-size: 15px !important;
}
.pos-grid.grid3 .pos-product.has-qty .pos-inline-qty span {
  font-size: 12px !important;
  line-height: 26px !important;
}
.pos-grid.grid3 .pos-product.has-qty .pos-inline-qty input {
  font-size: 12px !important;
  line-height: normal !important;
  height: 26px !important;
  min-height: 0 !important;
}

/* Chế độ Lưới 2 ô (Grid 2 cols) */
.pos-grid.grid2 {
  gap: 9px !important;
}
.pos-grid.grid2 .pos-product {
  border-radius: 12px !important;
}
.pos-grid.grid2 .pos-product-main {
  padding: 8px 8px 10px !important;
}
.pos-grid.grid2 .pos-product-image {
  margin-bottom: 6px !important;
  border-radius: 8px !important;
}
.pos-grid.grid2 .pos-prod-title {
  font-size: 13.5px !important;
  min-height: 34px !important;
  line-height: 1.25 !important;
}
.pos-grid.grid2 .pos-prod-sku {
  font-size: 11px !important;
}
.pos-grid.grid2 .pos-prod-price-row {
  min-height: 24px !important;
  padding-right: 38px !important;
}
.pos-grid.grid2 .pos-prod-price {
  font-size: 14px !important;
}
.pos-grid.grid2 .pos-add {
  right: 6px !important;
  bottom: 6px !important;
  width: 34px !important;
  height: 34px !important;
  font-size: 25px !important;
}
.pos-grid.grid2 .pos-product.has-qty .pos-product-main {
  padding: 8px 8px 4px !important;
}
.pos-grid.grid2 .pos-product.has-qty .pos-prod-price-row {
  padding-right: 0 !important;
  margin-bottom: 3px !important;
}
.pos-grid.grid2 .pos-product.has-qty .pos-inline-qty {
  height: 30px !important;
  min-height: 30px !important;
  grid-template-columns: 36px 1fr 36px !important;
  border-radius: 0 0 11px 11px !important;
}
.pos-grid.grid2 .pos-product.has-qty .pos-inline-qty button {
  min-height: 30px !important;
  font-size: 17px !important;
}
.pos-grid.grid2 .pos-product.has-qty .pos-inline-qty span {
  font-size: 13px !important;
  line-height: 30px !important;
}
.pos-grid.grid2 .pos-product.has-qty .pos-inline-qty input {
  font-size: 13px !important;
  line-height: normal !important;
  height: 30px !important;
  min-height: 0 !important;
}

/* List view mode: Tiêu đề -> Mã -> Giá bên trái, Cụm nút bên phải */
.pos-grid.list {
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}
.pos-grid.list .pos-product {
  position: relative !important;
  display: block !important;
  min-height: 90px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.pos-grid.list .pos-product-main {
  min-height: 82px !important;
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  column-gap: 12px !important;
  row-gap: 2px !important;
  align-content: center !important;
  padding: 6px 98px 6px 6px !important;
}
.pos-grid.list .pos-product-image {
  grid-column: 1 !important;
  grid-row: 1 / span 3 !important;
  width: 76px !important;
  height: 76px !important;
  margin-bottom: 0 !important;
}
.pos-grid.list .pos-stock-badge {
  top: 3px !important;
  left: 3px !important;
  padding: 1.5px 5px !important;
  font-size: 9.5px !important;
  border-radius: 4px !important;
}
.pos-grid.list .pos-prod-title {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-height: 0 !important;
  margin-bottom: 0 !important;
  font-size: 14px !important;
}
.pos-grid.list .pos-prod-sku {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin-bottom: 0 !important;
  font-size: 11px !important;
}
.pos-grid.list .pos-prod-price-row {
  grid-column: 2 !important;
  grid-row: 3 !important;
  padding-right: 0 !important;
  min-height: 0 !important;
  margin-top: 2px !important;
}
.pos-grid.list .pos-prod-price {
  font-size: 14px !important;
}
.pos-grid.list .pos-add {
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  right: 10px !important;
  width: 36px !important;
  height: 36px !important;
  font-size: 22px !important;
  border-radius: 8px !important;
}
.pos-grid.list .pos-inline-qty {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  right: 10px !important;
  width: 86px !important;
  max-width: 86px !important;
  height: 30px !important;
  min-height: 30px !important;
  border: 1px solid #cfe0f4 !important;
  border-radius: 8px !important;
  grid-template-columns: 28px 28px 28px !important;
  margin: 0 !important;
}
.pos-grid.list .pos-inline-qty button {
  height: 30px !important;
  min-height: 30px !important;
  font-size: 16px !important;
}

/* 3. Navigation Bar: Bán hàng nổi hơn, màu xanh đồng bộ như chữ Kho */
.mobile-nav button {
  color: #64748b !important;
  transition: all 0.15s ease !important;
}
.mobile-nav button .ui-icon {
  color: #64748b !important;
  transition: color 0.15s ease !important;
}
.mobile-nav button.active {
  background: #eef6ff !important;
  color: var(--q-blue-dark, #0868c6) !important;
}
.mobile-nav button.active .ui-icon {
  color: var(--q-blue-dark, #0868c6) !important;
}
.mobile-nav button.active span {
  color: var(--q-blue-dark, #0868c6) !important;
  font-weight: 800 !important;
}
/* Nút Bán hàng nổi bật cân đối & các tab cân chỉnh đồng bộ (Mobile & Desktop) */
.mobile-nav {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  z-index: 100 !important;
  grid-template-columns: 1fr 1fr 1.35fr 0.95fr 0.9fr !important;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom)) !important;
  gap: 4px !important;
  overflow: visible !important;
}
.mobile-nav button {
  min-height: 52px !important;
  padding: 5px 1px 7px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  border-radius: 12px !important;
}
.mobile-nav button .ui-icon {
  width: 22px !important;
  height: 22px !important;
}
.mobile-nav button span {
  font-size: 11px !important;
  line-height: 13px !important;
  white-space: nowrap !important;
}
.mobile-nav button.nav-sales-hero {
  position: relative !important;
  background: transparent !important;
  padding: 5px 1px 7px !important;
  overflow: visible !important;
}
.mobile-nav button.nav-sales-hero .nav-hero-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #1485ee 0%, #0868c6 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(8, 104, 198, 0.42), 0 0 0 3px #ffffff !important;
  margin-top: -12px !important;
  margin-bottom: 1px !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease !important;
}
.mobile-nav button.nav-sales-hero .nav-hero-icon .ui-icon {
  width: 22px !important;
  height: 22px !important;
  color: #ffffff !important;
  stroke-width: 2.2 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.mobile-nav button.nav-sales-hero:hover .nav-hero-icon,
.mobile-nav button.nav-sales-hero.active .nav-hero-icon {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.52), 0 0 0 3.5px #ffffff !important;
  transform: translateY(-2px) scale(1.04) !important;
}
.mobile-nav button.nav-sales-hero:active .nav-hero-icon {
  transform: translateY(0) scale(0.96) !important;
}
.mobile-nav button.nav-sales-hero span {
  font-size: 11px !important;
  color: var(--q-blue-dark, #0868c6) !important;
  font-weight: 800 !important;
  line-height: 13px !important;
}
.mobile-nav button.nav-sales-hero.active span {
  color: var(--q-blue-dark, #0868c6) !important;
  font-weight: 900 !important;
}

/* Desktop Nav Button Polish */
.nav-btn {
  color: #475569 !important;
}
.nav-btn.active {
  background: #edf5ff !important;
  color: var(--q-blue-dark, #0868c6) !important;
}
.nav-btn.active .nav-ico,
.nav-btn.active .ui-icon {
  color: var(--q-blue-dark, #0868c6) !important;
}
.nav-btn.nav-sales-hero {
  color: var(--q-blue-dark, #0868c6) !important;
  font-weight: 800 !important;
}
.nav-btn.nav-sales-hero .nav-ico {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #1485ee, #0868c6) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(8, 104, 198, 0.3) !important;
}
.nav-btn.nav-sales-hero .nav-ico .ui-icon {
  width: 18px !important;
  height: 18px !important;
  color: #ffffff !important;
}

/* ==========================================================================
   OFFICIAL WAREHOUSE VOUCHERS (MẪU 01-VT & 02-VT) — TT 200/133 & TT 88
   ========================================================================== */
.voucher-modal-wrap {
  max-width: 860px;
  margin: 0 auto;
}
.voucher-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--bg-subtle, #f8fafc);
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  border: 1px solid var(--border-color, #e2e8f0);
}
.voucher-toolbar .voucher-standard-select {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.voucher-toolbar .voucher-standard-select select {
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  font-size: 13px;
  font-weight: 600;
}
.voucher-toolbar .voucher-actions {
  display: flex;
  gap: 8px;
}

.voucher-sheet {
  background: #ffffff;
  color: #0f172a;
  padding: 32px 36px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  font-family: 'Times New Roman', Times, serif, system-ui;
  line-height: 1.4;
  margin: 0 auto;
}
.voucher-sheet.paper-A4 {
  max-width: 780px;
  font-size: 14px;
}
.voucher-sheet.paper-A5 {
  max-width: 580px;
  padding: 20px 24px;
  font-size: 12.5px;
}

.voucher-top-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  margin-bottom: 18px;
  align-items: start;
}
.voucher-company-info strong {
  display: block;
  font-size: 1.1em;
  text-transform: uppercase;
  color: #000;
}
.voucher-company-info span {
  display: block;
  color: #334155;
  font-size: 0.92em;
}
.voucher-form-code {
  text-align: right;
  font-size: 0.88em;
  color: #334155;
  border-left: 2px solid #cbd5e1;
  padding-left: 12px;
}
.voucher-form-code b {
  display: block;
  font-size: 1.05em;
  color: #000;
}

.voucher-heading {
  text-align: center;
  margin: 14px 0 16px;
}
.voucher-heading h1 {
  margin: 0;
  font-size: 1.7em;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #000;
}
.voucher-heading .voucher-date {
  font-style: italic;
  font-size: 0.95em;
  margin-top: 4px;
  color: #475569;
}
.voucher-heading .voucher-no {
  font-weight: 700;
  font-size: 1.05em;
  margin-top: 2px;
  color: #0f172a;
}

.voucher-meta-info {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.98em;
}
.voucher-meta-info .v-row {
  display: flex;
  gap: 8px;
}
.voucher-meta-info .v-label {
  white-space: nowrap;
  color: #334155;
}
.voucher-meta-info .v-val {
  flex: 1;
  border-bottom: 1px dotted #cbd5e1;
  color: #000;
}

.voucher-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: inherit;
}
.voucher-table th,
.voucher-table td {
  border: 1px solid #000;
  padding: 6px 8px;
  vertical-align: middle;
}
.voucher-table th {
  background: #f8fafc;
  font-weight: 700;
  text-align: center;
}
.voucher-table .text-center { text-align: center; }
.voucher-table .text-right { text-align: right; }
.voucher-table .text-left { text-align: left; }
.voucher-table .row-total td {
  font-weight: 700;
}

.voucher-amount-words {
  margin: 10px 0 16px;
  font-size: 0.98em;
}
.voucher-amount-words b {
  font-style: italic;
  font-weight: 700;
}

.voucher-signatures-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  text-align: center;
  margin-top: 24px;
  page-break-inside: avoid;
}
.voucher-signatures-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.voucher-signatures-grid .sig-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 155px;
  text-align: center;
}
.voucher-signatures-grid .sig-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.voucher-signatures-grid .sig-date {
  font-style: italic;
  font-size: 0.86em;
  color: #334155;
  margin-bottom: 2px;
  white-space: nowrap;
}
.voucher-signatures-grid .sig-col strong {
  display: block;
  font-size: 0.95em;
  text-transform: uppercase;
  color: #0f172a;
  letter-spacing: 0.2px;
}
.voucher-signatures-grid .sig-col small {
  display: block;
  font-style: italic;
  color: #64748b;
  font-size: 0.83em;
  margin-top: 2px;
  line-height: 1.3;
}
.voucher-signatures-grid .sig-space {
  flex: 1;
  min-height: 50px;
}
.voucher-signatures-grid .stamp-guide {
  width: 66px;
  height: 66px;
  border: 1.5px dashed #94a3b8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px auto;
  color: #64748b;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-align: center;
  line-height: 1.25;
  padding: 4px;
  background: rgba(248, 250, 252, 0.7);
  flex-shrink: 0;
}
.voucher-signatures-grid .sig-name {
  font-weight: 700;
  color: #0f172a;
  font-size: 0.95em;
  padding-top: 4px;
  white-space: nowrap;
}

/* Scroll wrap for wide accounting tables on mobile */
.voucher-table-scroll-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 12px 0;
}
.voucher-table-scroll-wrap .voucher-table {
  min-width: 640px;
}
.voucher-scroll-hint {
  display: none;
  font-size: 11.5px;
  color: #64748b;
  text-align: center;
  margin: -6px 0 12px;
  font-style: italic;
}

/* Green Excel button */
.btn-excel {
  background: #107c41;
  color: #ffffff !important;
  border: 1px solid #0e6b37;
  border-radius: 8px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.btn-excel:hover {
  background: #0b5e31;
}
.btn-excel.compact {
  padding: 6px 12px;
  font-size: 13px;
  min-height: 36px;
}

@media (max-width: 640px) {
  .voucher-top-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
  }
  .voucher-company-info {
    width: 100% !important;
    text-align: left !important;
  }
  .voucher-company-info strong {
    font-size: 1.05em !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: normal !important;
    display: block !important;
  }
  .voucher-form-code {
    text-align: left !important;
    border-left: none !important;
    border-top: 1px dashed #cbd5e1 !important;
    padding-left: 0 !important;
    padding-top: 6px !important;
    width: 100% !important;
  }
  .voucher-heading h1 {
    font-size: 1.25em !important;
    line-height: 1.3 !important;
  }
  .voucher-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }
  .voucher-actions {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
    justify-content: stretch !important;
  }
  .voucher-actions button {
    flex: 1 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    font-size: 11px !important;
    padding: 6px 4px !important;
    justify-content: center !important;
  }
  .voucher-sheet {
    padding: 16px 12px !important;
  }
  .voucher-scroll-hint {
    display: block;
  }
  .voucher-signatures-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px 14px !important;
  }
  .voucher-signatures-grid .sig-col {
    min-height: 135px;
  }
  .voucher-signatures-grid .sig-date {
    white-space: normal;
  }
  .voucher-signatures-grid .sig-name {
    white-space: normal;
    word-break: break-word;
  }
}

/* Print styles for warehouse vouchers & accounting sheets */
@media print {
  #qbizPrintRoot .voucher-sheet {
    box-shadow: none !important;
    border: none !important;
    padding: 10mm 12mm 12mm 12mm !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 210mm !important;
    box-sizing: border-box !important;
    background: #fff !important;
  }
  .voucher-table-scroll-wrap {
    overflow: visible !important;
    margin: 8px 0 !important;
  }
  .voucher-table-scroll-wrap .voucher-table {
    min-width: 0 !important;
    width: 100% !important;
  }
  .voucher-scroll-hint {
    display: none !important;
  }
  .voucher-signatures-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
    margin-top: 20px !important;
  }
  .voucher-signatures-grid .sig-col {
    min-height: 140px !important;
  }
  .voucher-signatures-grid .stamp-guide {
    border: 1.5px dashed #475569 !important;
    color: #334155 !important;
    background: transparent !important;
  }
  .voucher-signatures-grid .sig-name {
    white-space: nowrap !important;
  }
}

/* Shipping, Website Gateway & Drive Restore styles */
.carrier-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.carrier-card:hover {
  border-color: var(--primary, #0284c7);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.carrier-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.carrier-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.carrier-brand b {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-color, #0f172a);
}
.carrier-logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 13px;
  color: #fff;
}
.carrier-logo-ghtk { background: #008744; }
.carrier-logo-ghn { background: #e06000; }
.carrier-logo-vtp { background: #ee0033; }
.carrier-logo-qbiz { background: linear-gradient(135deg, #0284c7, #2563eb); }
.carrier-logo-shopee { background: #ee4d2d; }
.carrier-logo-tiktok { background: #000; }

.carrier-desc {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  line-height: 1.45;
  margin: 0;
}
.carrier-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
}
.carrier-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.shipment-table-wrap {
  overflow-x: auto;
  margin-top: 12px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
}
.shipment-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}
.shipment-table th, .shipment-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.shipment-table th {
  background: var(--bg-subtle, #f8fafc);
  font-weight: 600;
  color: var(--text-muted, #64748b);
}

.drive-restore-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  max-height: 360px;
  overflow-y: auto;
}
.drive-backup-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  gap: 12px;
}
.drive-backup-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.drive-backup-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-color, #0f172a);
}
.drive-backup-meta {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.drive-checksum-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: monospace;
  font-size: 11px;
  background: #f0fdf4;
  color: #166534;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid #bbf7d0;
}

/* ===================================================================
   QBIZ MICRO-EFFECTS: AMBIENT VITALITY & POLISH (LOCAL TEST PHASE)
   Subtle, elegant animations to make POS & Dashboard feel alive
   without changing layout or modifying existing component sizes.
   =================================================================== */

/* 1. HIỆU ỨNG PHÁT SÁNG CHỖ BÁN HÀNG (DASHBOARD & POS) */
/* Nút Bán hàng chính trên Dashboard: Vệt sáng lướt sang trọng định kỳ */
.quick-tile.quick-hero .quick-hero-main {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.quick-tile.quick-hero .quick-hero-main::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -70%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(25deg);
  animation: qbiz-shimmer-sweep 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}

/* Hiệu ứng nháy (Pulse/Breathe) rõ rệt, sống động cho chữ Bán hàng */
.dashboard-quick-grid .quick-tile.quick-hero .quick-hero-main strong {
  animation: qbiz-ban-hang-pulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes qbiz-ban-hang-pulse {
  0%, 100% {
    color: #0f3568;
    text-shadow: none;
    transform: scale(1);
  }
  50% {
    color: #0284c7;
    text-shadow: 0 0 10px rgba(2, 132, 199, 0.5);
    transform: scale(1.06);
  }
}

/* Hiệu ứng nhịp thở đồng bộ cho logo giỏ hàng */
.dashboard-quick-grid .quick-hero-main .qt-ico {
  animation: qbiz-cart-ico-pulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes qbiz-cart-ico-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.15);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.4);
  }
}

/* Thanh giỏ hàng POS đáy màn hình: Hào quang sáng êm dịu khi có hàng */
.pos-cart-bar {
  animation: qbiz-cart-glow 3.5s ease-in-out infinite alternate;
}
@keyframes qbiz-cart-glow {
  0% {
    box-shadow: 0 8px 24px rgba(20, 54, 99, 0.14), 0 0 0 1px rgba(37, 99, 235, 0.15);
  }
  100% {
    box-shadow: 0 10px 28px rgba(20, 54, 99, 0.18), 0 0 16px rgba(37, 99, 235, 0.32);
  }
}

/* Nút Tiếp tục / Thanh toán trên thanh giỏ hàng: Vệt sáng lướt nhẹ */
.pos-cart-bar .primary-btn,
.flow-primary {
  position: relative;
  overflow: hidden;
}
.pos-cart-bar .primary-btn::after,
.flow-primary:not(:disabled)::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -70%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(25deg);
  animation: qbiz-shimmer-sweep 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes qbiz-shimmer-sweep {
  0%, 75% {
    left: -70%;
  }
  100% {
    left: 150%;
  }
}

/* Thẻ sản phẩm đang có số lượng trong giỏ: Viền hào quang xanh êm ái */
.pos-product.has-qty {
  box-shadow: 0 0 0 1.5px #3b82f6, 0 4px 14px rgba(37, 99, 235, 0.16) !important;
  transition: box-shadow 0.25s ease, transform 0.15s ease;
}

.qbiz-ai-trigger {
  animation: qbiz-ai-bubble-pulse 3.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  transition: bottom 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s ease, background 0.2s ease;
}
body:has(.pos-cart-bar) .qbiz-ai-trigger {
  bottom: calc(130px + env(safe-area-inset-bottom, 0px)) !important;
}
@keyframes qbiz-ai-bubble-pulse {
  0% {
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.22), 0 0 0 0 rgba(56, 189, 248, 0.45);
  }
  50% {
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.28), 0 0 0 7px rgba(56, 189, 248, 0);
  }
  100% {
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.22), 0 0 0 0 rgba(56, 189, 248, 0);
  }
}
.qbiz-ai-trigger .ai-sparkle-icon {
  animation: qbiz-sparkle-twinkle 4s ease-in-out infinite;
}
@keyframes qbiz-sparkle-twinkle {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 2px rgba(56, 189, 248, 0.4));
  }
  50% {
    transform: scale(1.12) rotate(8deg);
    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.85));
  }
}

/* 3. HIỆU ỨNG FLASH XÚC GIÁC (TACTILE MICRO-FLASH KHI BẤM NÚT) */
.pos-add:active,
.pos-inline-qty button:active,
.quick-tile:active {
  transform: scale(0.92) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.25) !important;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

/* 4. CHẤM TRẠNG THÁI SỐNG (LIVE BREATHING STATUS DOT) */
.sync-pill .dot,
.live-status-dot {
  animation: qbiz-live-dot 2.4s infinite;
}
@keyframes qbiz-live-dot {
  0%, 100% {
    transform: scale(1);
    opacity: 0.85;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
  }
  50% {
    transform: scale(1.18);
    opacity: 1;
    box-shadow: 0 0 0 5px rgba(16, 185, 129, 0);
  }
}

/* 5. KHỐI DOANH THU XANH: VỆT SÁNG LƯỚT MẶT KÍNH & TĂNG TRƯỞNG LỢI NHUẬN */
.dashboard-sales-hero {
  position: relative !important;
  overflow: hidden !important;
}
.dashboard-today,
.dashboard-month,
.dashboard-sales-subcards {
  position: relative;
  z-index: 1;
}
.dashboard-sales-hero::after {
  content: '';
  position: absolute;
  z-index: 2;
  top: -60%;
  left: -80%;
  width: 45%;
  height: 220%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(25deg);
  animation: qbiz-hero-glass-sweep 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}
@keyframes qbiz-hero-glass-sweep {
  0%, 68% {
    left: -80%;
  }
  100% {
    left: 160%;
  }
}

/* Icon mũi tên Lợi nhuận nhích nhẹ lên theo nhịp tăng trưởng */
.dashboard-sales-subcard:nth-child(2) i .ui-icon,
.dashboard-sales-subcard[data-report-open] i .ui-icon {
  animation: qbiz-profit-trend 3.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
@keyframes qbiz-profit-trend {
  0%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-2.5px) scale(1.08);
  }
  48% {
    transform: translateY(0);
  }
}

.dashboard-sales-subcard:active {
  transform: scale(0.96);
  transition: transform 0.08s ease;
}

/* 6. THANH HEADER: CHUÔNG THÔNG BÁO LẮC ĐỊNH KỲ & BADGE THỞ HÀO QUANG */
.header-bell:has(b) .ui-icon,
.header-bell.has-alerts .ui-icon {
  transform-origin: top center;
  animation: qbiz-bell-swing 5.5s ease-in-out infinite;
}
@keyframes qbiz-bell-swing {
  0%, 65%, 100% {
    transform: rotate(0deg);
  }
  70% {
    transform: rotate(12deg);
  }
  75% {
    transform: rotate(-10deg);
  }
  80% {
    transform: rotate(7deg);
  }
  85% {
    transform: rotate(-4deg);
  }
  90% {
    transform: rotate(0deg);
  }
}

/* Chấm số đỏ thông báo thở hào quang */
.header-bell b {
  animation: qbiz-badge-pulse 2.8s infinite;
}
@keyframes qbiz-badge-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(216, 76, 67, 0.65);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 4px rgba(216, 76, 67, 0);
  }
}

/* Phản hồi xúc giác vi mô cho các nút trên Header */
.header-shortcut,
.user-badge-btn,
.header-bell {
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.header-shortcut:active,
.user-badge-btn:active,
.header-bell:active {
  transform: scale(0.92) !important;
}

/* Hỗ trợ chế độ tiết kiệm chuyển động */
@media (prefers-reduced-motion: reduce) {
  .quick-tile.quick-hero .quick-hero-main::after,
  .dashboard-sales-hero::after,
  .dashboard-sales-subcard:nth-child(2) i .ui-icon,
  .dashboard-sales-subcard[data-report-open] i .ui-icon,
  .header-bell:has(b) .ui-icon,
  .header-bell b,
  .pos-cart-bar,
  .pos-cart-bar .primary-btn::after,
  .flow-primary::after,
  .qbiz-ai-trigger,
  .qbiz-ai-trigger .ai-sparkle-icon,
  .sync-pill .dot {
    animation: none !important;
  }
}

/* ============================================================
   PAYMENT SUCCESS POPUP, CHIME CONTROLS & QUICK CASH PILLS
   ============================================================ */

/* Nút Volume / Cài đặt âm thanh trong Flow Header */
.flow-pref-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  border-radius: 10px;
  transition: all .15s ease;
}
.flow-pref-btn:hover {
  background: #f1f5f9;
  color: var(--q-blue);
}
.flow-pref-btn .ui-icon {
  width: 20px;
  height: 20px;
}

/* Quick Cash Pills (Mệnh giá gợi ý VNĐ - Dạng slide trượt ngang 1 dòng gọn gàng, không xuống dòng) */
.cash-quick-pills {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 6px;
  margin: 4px 0 6px !important;
  padding: 2px 2px 5px !important;
}
.cash-quick-pills::-webkit-scrollbar {
  display: none !important;
}
.cash-pill {
  flex: 0 0 auto !important;
  min-height: 36px !important;
  padding: 6px 12px !important;
  border-radius: 9px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #1e293b;
  font-weight: 700;
  font-size: 14px !important;
  cursor: pointer;
  transition: all .12s ease;
  white-space: nowrap !important;
  user-select: none;
}
.cash-pill:hover,
.cash-pill:focus-visible {
  border-color: var(--q-blue);
  background: #eff6ff;
  color: var(--q-blue-dark);
}
.cash-pill.active {
  background: var(--q-blue) !important;
  border-color: var(--q-blue) !important;
  color: #ffffff !important;
}
.cash-pill-exact {
  background: #f0fdf4;
  border-color: #86efac;
  color: #166534;
}
.cash-pill-exact:hover {
  background: #dcfce7;
  border-color: #4ade80;
  color: #14532d;
}

/* Payment Success Floating Popup */
.payment-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: popupFadeIn .2s ease-out;
}
.payment-popup-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border-radius: 20px;
  padding: 24px 20px 20px;
  box-shadow: 0 20px 45px -8px rgba(15, 23, 42, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.06);
  text-align: center;
  animation: popupScaleUp .25s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 90vh;
  overflow-y: auto;
}
.popup-close-x {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  background: #f1f5f9;
  color: #64748b;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
}
.popup-close-x:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.popup-success-icon-wrap {
  width: 68px;
  height: 68px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 8px #f0fdf4;
}
.popup-success-icon {
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
}
.popup-title {
  font-size: 19px;
  font-weight: 800;
  color: #15803d;
  margin: 0 0 4px;
}
.popup-code-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}
.popup-amount {
  font-size: 32px;
  font-weight: 800;
  color: var(--q-blue, #136dec);
  letter-spacing: -0.5px;
  margin-bottom: 12px;
}
.popup-summary-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  text-align: left;
  font-size: 13.5px;
  display: grid;
  gap: 6px;
}
.popup-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.popup-summary-row span {
  color: var(--q-muted, #64748b);
  font-size: 13px;
}
.popup-summary-row b {
  color: #1e293b;
  text-align: right;
}
.popup-summary-row.highlight-change {
  border-top: 1px dashed #cbd5e1;
  padding-top: 6px;
  margin-top: 2px;
}
.popup-qr-preview {
  margin: 10px auto;
  padding: 10px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  max-width: 220px;
}
.popup-qr-preview img {
  display: block;
  margin: 0 auto 4px;
}
.popup-qr-preview small {
  color: #64748b;
  font-size: 11px;
}
.popup-countdown-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 14px;
  border: 1px solid #bfdbfe;
}
.countdown-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2563eb;
  animation: pulseDot 1s infinite alternate;
}
.popup-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.popup-actions button {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13.5px;
}
.popup-primary-btn {
  grid-column: 1 / -1;
  min-height: 48px !important;
  font-size: 15px !important;
  font-weight: 700;
}

@keyframes popupFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes popupScaleUp {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes pulseDot {
  from { opacity: 0.35; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1.2); }
}

@media (max-width: 480px) {
  .payment-popup-card {
    padding: 20px 16px 16px;
    border-radius: 16px;
  }
  .popup-amount {
    font-size: 28px;
  }
  .popup-success-icon-wrap {
    width: 60px;
    height: 60px;
  }
  .popup-success-icon {
    font-size: 32px;
  }
}

/* ============================================================
   COMPACT CHECKOUT EXPERIENCE (Tối ưu gọn gàng màn hình thanh toán, hạn chế cuộn trang)
   ============================================================ */
.pos-flow.checkout-screen {
  padding-top: 12px;
}

@media (max-width: 640px) {
  body[data-sale-step="checkout"] .content {
    padding-top: 4px !important;
    padding-bottom: 74px !important;
  }
  body[data-sale-step="checkout"] .pos-flow {
    padding-top: 6px !important;
    padding-bottom: 100px !important; /* Đủ chỗ cho 2 trường bảo hành & hẹn trả không bị che */
  }
  .checkout-screen .flow-head {
    margin-bottom: 6px !important;
  }
  .checkout-screen .flow-head h2 {
    font-size: 19px !important;
    font-weight: 800 !important;
  }
  .checkout-screen .customer-chip {
    margin: 4px 0 6px !important;
    min-height: 40px !important;
    padding: 6px 12px !important;
  }
  .checkout-screen .customer-chip span {
    font-size: 14px !important;
    font-weight: 700 !important;
  }
  .checkout-screen .customer-chip span small {
    font-size: 11.5px !important;
  }
  .checkout-screen .checkout-total {
    padding: 6px 0 10px !important;
  }
  .checkout-screen .checkout-total span {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--q-muted);
  }
  .checkout-screen .checkout-total strong {
    font-size: 29px !important;
    margin-top: 2px !important;
    line-height: 1.15 !important;
  }
  .checkout-screen .checkout-discount-card {
    margin: 6px 0 8px !important;
    padding: 8px 12px !important;
    border-radius: 11px !important;
  }
  .checkout-screen .checkout-discount-card .discount-box-head {
    font-size: 13.5px !important;
    font-weight: 700 !important;
  }
  .checkout-screen .discount-control input {
    height: 38px !important;
    min-height: 38px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 0 10px !important;
  }
  .checkout-screen .discount-mode {
    height: 38px !important;
    min-height: 38px !important;
    min-width: 38px !important;
    padding: 0 10px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }
  .checkout-screen > .choice-section:has([data-payment-choice]) {
    margin-top: 8px !important;
    gap: 6px !important;
  }
  .checkout-screen > .choice-section h3 {
    margin: 0 0 5px !important;
    font-size: 13.5px !important;
    font-weight: 750 !important;
  }
  .checkout-screen > .choice-section:has([data-payment-choice]) .choice-row {
    min-height: 40px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 9px !important;
    padding: 0 6px !important;
  }
  .checkout-screen .cash-panel {
    margin-top: 6px !important;
    padding: 10px 12px !important;
    gap: 6px !important;
    border-radius: 11px !important;
  }
  .checkout-screen .cash-panel label {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    gap: 3px !important;
  }
  .checkout-screen .cash-panel input {
    height: 40px !important;
    min-height: 40px !important;
    padding: 6px 12px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
  }
  .checkout-screen .cash-panel > div {
    font-size: 13.5px !important;
  }
  .checkout-screen .cash-panel #cashChange {
    font-size: 16.5px !important;
    font-weight: 800 !important;
  }
  .checkout-screen .choice-section:not(:has([data-payment-choice])) {
    margin-top: 8px !important;
  }
  .checkout-screen .segment {
    padding: 2px !important;
    border-radius: 9px !important;
  }
  .checkout-screen .segment button {
    min-height: 36px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    border-radius: 7px !important;
  }
  .checkout-screen .checkout-more {
    margin-top: 8px !important;
  }
  .checkout-screen .checkout-more summary {
    min-height: 36px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
  }
  .checkout-screen .flow-primary {
    min-height: 48px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
  }
}

/* ============================================================
   COMPACT CART STEP & ITEM UX (Giỏ hàng 2 dòng gọn gàng, không dàn trải)
   ============================================================ */
.cart-list {
  display: grid;
  gap: 6px;
}
.cart-row {
  display: grid !important;
  grid-template-columns: 50px minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid var(--q-line, #e2e8f0);
  align-items: center;
}
.cart-row .pos-product-image {
  width: 50px !important;
  height: 50px !important;
  aspect-ratio: 1/1 !important;
  border-radius: 8px;
  overflow: hidden;
  align-self: center;
}
.cart-row .pos-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-row-main {
  min-width: 0;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.cart-row-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  margin-bottom: 0 !important;
  min-width: 0 !important;
}
.checkout-screen {
  padding-bottom: 96px !important;
}
.cart-item-name,
.cart-row-title strong {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.25 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  word-break: break-word !important;
  white-space: normal !important;
}
.cart-row-subline {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  min-width: 0 !important;
  margin: 1px 0 2px !important;
}
.cart-row-subline::-webkit-scrollbar {
  display: none !important;
}
.cart-sku-badge {
  display: inline-block !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  line-height: 1.2 !important;
}
.cart-remove-btn,
.cart-row-title .cart-remove-btn {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border: 0 !important;
  background: transparent !important;
  color: #94a3b8 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  transition: all .12s ease;
  margin-left: auto;
  flex-shrink: 0 !important;
}
.cart-remove-btn:hover,
.cart-row-title .cart-remove-btn:hover {
  background: #fee2e2 !important;
  color: #ef4444 !important;
}
.cart-row-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-width: 0;
}
.cart-controls-group {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}
.cart-row-bottom .quantity-control {
  display: grid !important;
  grid-template-columns: 28px 32px 28px !important;
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  flex-shrink: 0 !important;
  gap: 0 !important;
  align-items: center !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  overflow: hidden !important;
  height: 30px !important;
  box-sizing: border-box !important;
}
.cart-row-bottom .quantity-control button {
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  border: 0 !important;
  background: #f1f5f9 !important;
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.cart-row-bottom .quantity-control button:active {
  background: #e2e8f0 !important;
}
.cart-row-bottom .quantity-control input {
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  border: 0 !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  padding: 0 !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  background: transparent !important;
  flex-shrink: 0 !important;
  -moz-appearance: textfield;
}
.cart-row-bottom .quantity-control input::-webkit-outer-spin-button,
.cart-row-bottom .quantity-control input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.line-discount-trigger {
  min-height: 24px !important;
  height: 24px !important;
  padding: 0 4px !important;
  margin-left: 4px !important;
  border-radius: 4px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--q-blue, #0284c7) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  transition: all .12s ease;
}
.line-discount-trigger:hover {
  background: #f1f5f9 !important;
  color: #0369a1 !important;
}
.cart-price-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  line-height: 1.18;
}
.cart-price-orig-line {
  display: flex;
  align-items: center;
  gap: 3px;
  justify-content: flex-end;
}
.cart-orig-total {
  font-size: 11.5px !important;
  color: #94a3b8 !important;
  text-decoration: line-through;
  white-space: nowrap;
}
.cart-calc-hint,
.cart-unit-calc {
  font-size: 10.5px !important;
  color: #64748b !important;
  white-space: nowrap;
}
.cart-price-final-line {
  display: flex;
  align-items: baseline;
  gap: 4px;
  justify-content: flex-end;
}
.cart-con-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #e11d48 !important;
  letter-spacing: 0.2px;
}
.cart-price-group.has-discount .cart-line-total {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: var(--q-blue-dark, #0284c7) !important;
}
.cart-unit-price {
  font-size: 11px !important;
  color: #64748b !important;
  white-space: nowrap;
}
.cart-line-total {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--q-blue-dark, #0284c7) !important;
  white-space: nowrap;
}
.line-discount-editor {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
}
.line-discount-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.discount-mode-group {
  display: flex;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
  flex-shrink: 0;
}
.line-discount-editor .discount-mode {
  height: 32px !important;
  min-height: 32px !important;
  min-width: 32px !important;
  font-size: 13px !important;
  border-radius: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  background: #f1f5f9;
  color: #475569;
}
.line-discount-editor .discount-mode.active {
  background: var(--q-blue, #2563eb) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}
.line-discount-editor input {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  flex: 1;
  background: #ffffff;
}
.line-discount-hint-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 3px 6px !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}
.disc-words-badge {
  color: #64748b !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.1px !important;
}
.order-discount-hint-row {
  margin-top: 3px !important;
  font-size: 11px !important;
}

@media (max-width: 640px) {
  body[data-sale-step="cart"] .pos-flow {
    padding-top: 6px !important;
    padding-bottom: 84px !important; /* Bỏ 140px khoảng trống thừa ở đáy giỏ hàng */
  }
  body[data-sale-step="cart"] .flow-head {
    margin-bottom: 6px !important;
  }
  body[data-sale-step="cart"] .customer-chip {
    margin: 4px 0 8px !important;
    min-height: 40px !important;
    padding: 6px 12px !important;
  }
  body[data-sale-step="cart"] .order-options-open {
    margin-top: 8px !important;
    padding-top: 6px !important;
  }
  body[data-sale-step="cart"] .discount-box {
    margin-top: 6px !important;
  }
  body[data-sale-step="cart"] .discount-control input {
    height: 38px !important;
    min-height: 38px !important;
    font-size: 15px !important;
  }
  body[data-sale-step="cart"] .discount-mode {
    height: 38px !important;
    min-height: 38px !important;
    min-width: 38px !important;
    font-size: 15px !important;
  }
  body[data-sale-step="cart"] .cart-totals {
    margin-top: 8px !important;
    gap: 5px !important;
    font-size: 13.5px !important;
  }
  body[data-sale-step="cart"] .cart-totals .grand {
    padding-top: 8px !important;
    font-size: 16px !important;
  }
  body[data-sale-step="cart"] .cart-totals .grand b {
    font-size: 20px !important;
    color: var(--q-blue-dark, #0284c7) !important;
  }
}

/* QR / Bank Transfer Payment Panel in Checkout */
.qr-payment-panel {
  margin: 12px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qr-payment-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  background: #ffffff;
  border: 1px solid var(--q-border, #e2e8f0);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.qr-code-img-wrap {
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 4px;
}
.qr-code-img-wrap.qr-zoomable {
  cursor: pointer;
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.qr-code-img-wrap.qr-zoomable:hover {
  border-color: #0284c7;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.18);
  transform: translateY(-1px);
}
.qr-code-img-wrap.qr-zoomable::after {
  content: '🔍 Bấm phóng to';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.78);
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.9;
  letter-spacing: 0.2px;
}

.vietqr-scan-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.qr-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #94a3b8;
  font-size: 11px;
  text-align: center;
}

.qr-details-group {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.qr-detail-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.qr-detail-line span {
  color: #64748b;
  font-size: 12px;
  white-space: nowrap;
}

.qr-detail-line strong {
  color: #0f172a;
  font-weight: 600;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.copyable-account {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--q-blue, #0284c7) !important;
  font-family: monospace, monospace;
  font-size: 13.5px;
  padding: 1px 4px;
  border-radius: 4px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  transition: all 0.15s ease;
}

.copyable-account:hover {
  background: #e0f2fe;
}

.copy-icon-btn {
  display: inline-flex;
  opacity: 0.7;
}

.qr-highlight-line {
  margin-top: 2px;
  padding-top: 4px;
  border-top: 1px dashed #e2e8f0;
}

.qr-highlight-amt {
  color: #0284c7 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.qr-code-tag {
  background: #f1f5f9;
  color: #334155;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-family: monospace, monospace;
}

.qr-waiting-status {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 10px 14px;
  transition: all 0.25s ease;
}

.qr-pulse-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #0284c7;
  position: relative;
  flex-shrink: 0;
}

.qr-pulse-dot::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  border: 2px solid #0284c7;
  opacity: 0.75;
  animation: qrPulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes qrPulse {
  0% { transform: scale(0.8); opacity: 0.9; }
  50% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

.qr-waiting-status.verified {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.qr-verified-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #16a34a;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.qr-status-desc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.35;
}

.qr-status-desc strong {
  font-size: 13px;
  color: #1e3a8a;
}

.qr-status-desc small {
  font-size: 11.5px;
  color: #64748b;
}

.qr-check-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}

.qr-check-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.qr-check-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.qr-spin {
  display: inline-block;
  animation: qrSpinAnim 1s linear infinite;
}

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

.qr-verify-pay-btn {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25) !important;
}

/* Mobile responsive adjustments */
@media (max-width: 600px) {
  .qr-payment-card {
    flex-direction: column;
    text-align: center;
    padding: 12px;
    gap: 12px;
  }
  .qr-code-img-wrap {
    width: 160px;
    height: 160px;
    margin: 0 auto;
  }
  .qr-details-group {
    width: 100%;
  }
  .qr-detail-line {
    font-size: 12.5px;
  }
}

/* QR Verification Mode selection cards in Sales Preferences */
.qr-mode-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 12px !important;
  border-radius: 10px !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.15s ease-in-out;
}
.qr-mode-card input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin: 2px 0 0 0 !important;
  flex-shrink: 0 !important;
  accent-color: var(--q-blue, #2563eb);
}
.qr-mode-card:hover {
  border-color: #94a3b8 !important;
  background: #f8fafc !important;
}
.qr-mode-card.active {
  border-color: var(--q-blue, #2563eb) !important;
  background: #eff6ff !important;
  box-shadow: 0 0 0 1px var(--q-blue, #2563eb);
}

/* Brand Logo Upgrade & Header/Modal Install System */
.brand-mark {
  background: transparent !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.12) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sidebar-install-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-weight: 700 !important;
  color: #1f56a6 !important;
  background: #edf4ff !important;
  border: 1px solid #cce0ff !important;
  border-radius: 12px !important;
  transition: all 0.15s ease !important;
}
.sidebar-install-btn:hover {
  background: #dbeafe !important;
  border-color: #93c5fd !important;
}

/* Header Install Button (Subtle & Polished) */
.header-install-btn {
  background: #ffffff !important;
  color: #1f56a6 !important;
  border: 1px solid #cfe0f5 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border-radius: 10px !important;
  transition: all 0.15s ease !important;
}
.header-install-btn:hover {
  background: #f0f7ff !important;
  border-color: #93c5fd !important;
  color: #1d4ed8 !important;
}
@media (max-width: 768px) {
  .header-install-btn span {
    display: none !important;
  }
  .header-install-btn {
    padding: 0 10px !important;
    min-width: 36px !important;
  }
}

/* Smart Install Top Banner ("Treo sát lên mép trên", to rõ, bám đuổi theo khi cuộn) */
body:has(#firstVisitInstallBanner) .topbar {
  top: 50px !important;
}

.install-subtle-tip {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 15 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  padding: 0 28px !important;
  margin: 0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  box-sizing: border-box !important;
  animation: fadeInTopBanner 0.25s ease !important;
  transition: all 0.2s ease !important;
}
@keyframes fadeInTopBanner {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.install-subtle-tip .tip-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}
.install-subtle-tip .tip-logo-badge {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
  display: grid;
  place-items: center;
}
.install-subtle-tip .tip-logo-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.install-subtle-tip .tip-text-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}
.install-subtle-tip .tip-title {
  font-size: 14.5px;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.install-subtle-tip .tip-sep {
  color: #cbd5e1;
  font-size: 13px;
}
.install-subtle-tip .tip-desc {
  font-size: 13px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.install-subtle-tip .tip-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
/* Khung xanh navy sáng hiện đại cho nút Cài ngay (Đồng bộ nhận diện thương hiệu) */
.install-subtle-tip .tip-action-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%) !important;
  color: #ffffff !important;
  border: 1px solid #1d4ed8 !important;
  border-radius: 999px !important;
  padding: 0 16px !important;
  height: 32px !important;
  min-height: 0 !important;
  max-height: 32px !important;
  box-sizing: border-box !important;
  line-height: 30px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28) !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}
.install-subtle-tip .tip-action-pill:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
  border-color: #1e3a8a !important;
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.38) !important;
  transform: translateY(-1px);
}
.install-subtle-tip .tip-dismiss-btn {
  width: 28px !important;
  height: 28px !important;
  min-height: 0 !important;
  max-height: 28px !important;
  box-sizing: border-box !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all 0.15s ease !important;
}
.install-subtle-tip .tip-dismiss-btn:hover {
  background: #f1f5f9 !important;
  color: #475569 !important;
}

/* Mobile responsive ("Treo sát lên mép trên", to rõ, bám đuổi theo) */
@media (max-width: 920px) {
  body:has(#firstVisitInstallBanner) .topbar {
    top: 48px !important;
  }
  .install-subtle-tip {
    top: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 14px !important;
  }
  .install-subtle-tip .tip-sep,
  .install-subtle-tip .tip-desc {
    display: none !important;
  }
  .install-subtle-tip .tip-title {
    font-size: 13.5px !important;
    font-weight: 800 !important;
  }
  .install-subtle-tip .tip-logo-badge {
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;
  }
  .install-subtle-tip .tip-action-pill {
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    height: 30px !important;
    min-height: 0 !important;
    max-height: 30px !important;
    line-height: 28px !important;
  }
  .install-subtle-tip .tip-dismiss-btn {
    width: 26px !important;
    height: 26px !important;
    min-height: 0 !important;
    max-height: 26px !important;
  }
}





/* Discreet Public Entry Install Pill */
.entry-install-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.entry-install-link:hover {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  border-color: #bae6fd !important;
}
.entry-install-ico {
  display: grid;
  place-items: center;
  color: #0284c7;
}
.entry-install-ico .ui-icon {
  width: 13px;
  height: 13px;
}

/* Install Modal Detailed Content */
.install-modal-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0;
}
.install-hero-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #123264 0%, #1b498c 100%);
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px rgba(16, 42, 86, 0.22);
  color: #ffffff;
}
.install-logo-glow {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 15px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), 0 0 16px rgba(255, 255, 255, 0.25);
}
.install-modal-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}
.install-hero-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.install-hero-info h4 {
  font-size: 18px;
  font-weight: 800;
  margin: 0;
  color: #ffffff;
  letter-spacing: -0.02em;
}
.install-hero-tagline {
  font-size: 13px;
  color: #e0f2fe;
  margin: 0 0 6px 0;
  font-weight: 550;
}
.install-feature-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip-item {
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(4px);
}
.install-callout-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: #475569;
  background: #f8fafc;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}
.install-direct-action-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #ecfdf5;
  border: 1.5px solid #a7f3d0;
  padding: 14px 16px;
  border-radius: 14px;
}
.install-direct-action-card .card-desc {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.install-direct-action-card strong {
  font-size: 14px;
  color: #065f46;
}
.install-direct-action-card span {
  font-size: 12.5px;
  color: #047857;
}
.install-big-btn {
  background: #059669 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 750 !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3) !important;
}
.install-big-btn:hover {
  background: #047857 !important;
}

.install-device-guides {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.install-device-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 16px;
  transition: all 0.15s ease;
}
.install-device-card.active-os {
  border-color: #3b82f6;
  background: #f8fbff;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.08);
}
.os-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.os-tag {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.03em;
}
.android-tag { background: #dcfce7; color: #15803d; }
.ios-tag { background: #ede9fe; color: #6d28d9; }
.pc-tag { background: #e0f2fe; color: #0369a1; }
.os-header strong {
  font-size: 14px;
  color: #1e293b;
}
.os-steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
}
.os-steps b {
  color: #0f172a;
}
.ios-share-glyph {
  display: inline-block;
  font-weight: 800;
  font-size: 14px;
  color: #2563eb;
  background: #eff6ff;
  padding: 0 4px;
  border-radius: 4px;
  border: 1px solid #bfdbfe;
}

/* Platform Admin Ultra-Compact & Mobile-First Responsive */
.auth-user-bar-compact {
  min-height: 32px;
}
.auth-user-bar-compact button {
  min-height: unset !important;
  height: 26px !important;
  padding: 2px 7px !important;
  line-height: 1 !important;
}
.local-data-banner-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 6px;
  padding: 4px 10px;
  margin-bottom: 8px;
  min-height: 28px;
}
.platform-admin-screen {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 4px;
}
.platform-admin-screen button {
  min-height: unset !important;
}
.platform-user-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.platform-user-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.platform-user-card button {
  min-height: unset !important;
  height: 26px !important;
  line-height: 1 !important;
}
@media (max-width: 768px) {
  .platform-user-cards { display: flex !important; }
  .platform-user-table-wrap { display: none !important; }
}
@media (min-width: 769px) {
  .platform-user-cards { display: none !important; }
  .platform-user-table-wrap { display: block !important; }
}

/* Platform Admin Standalone Isolation */
body[data-page="platform-admin"] .topbar {
  display: none !important;
}
body[data-page="platform-admin"] #mobileNav {
  display: none !important;
}
body[data-page="platform-admin"] .content {
  padding: 6px 8px calc(24px + env(safe-area-inset-bottom)) !important;
  max-width: 1400px;
  margin: 0 auto;
}

/* Account & Store Modal (Refined Apple/Stripe-like Sheet) */
.account-sheet {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.account-profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.account-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(15,23,42,0.15);
}
.account-store-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.account-menu-group {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.account-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background 0.15s ease;
  min-height: unset !important;
}
.account-menu-item:last-child {
  border-bottom: none;
}
.account-menu-item:hover,
.account-menu-item:active {
  background: #f8fafc;
}
.account-menu-item .item-icon {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.account-menu-item .item-icon.navy {
  background: #0f172a;
  color: #ffffff;
}
.account-menu-item .item-icon.slate {
  background: #f1f5f9;
  color: #334155;
}
.account-menu-item .item-content {
  flex: 1;
  min-width: 0;
}
.account-menu-item .item-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
}
.account-menu-item .item-sub {
  font-size: 11px;
  color: #64748b;
  margin-top: 1px;
}
.account-menu-item .item-arrow {
  color: #94a3b8;
  flex-shrink: 0;
}

/* Dedicated Admin Navigation Tabs: Deep Navy & Slate */
.admin-nav-tabs {
  display: flex !important;
  gap: 4px !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
  padding: 3px !important;
  background: #f1f5f9 !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}
.admin-nav-tabs button {
  padding: 5px 12px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #475569 !important;
  transition: all 0.15s ease !important;
}
.admin-nav-tabs button:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}
.admin-nav-tabs button.active {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25) !important;
}

/* ==========================================================================
   MOBILE ULTRA-COMPACT HEADER & AUTO-HIDE ON SCROLL DOWN (CHỈ ĐẾN VẠCH ĐỎ)
   ========================================================================== */
@media (max-width: 920px) {
  .topbar {
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease !important;
  }
  .install-subtle-tip {
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  /* Tự động trượt ẩn toàn bộ thanh đỉnh khi vuốt xuống trên Mobile */
  body.topbar-hidden .topbar {
    transform: translateY(-160%) !important;
  }
  body.topbar-hidden .install-subtle-tip {
    transform: translateY(-160%) !important;
  }
}

@media (max-width: 640px) {
  /* Thu gọn chiều cao thanh header đến đúng vạch đỏ (tiết kiệm ~32px diện tích) */
  .topbar {
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 10px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  }

  .topbar h1,
  #pageTitle {
    font-size: 19px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    color: #0f172a !important;
    letter-spacing: -0.02em !important;
  }

  .top-actions {
    gap: 6px !important;
  }

  /* Nút Đơn hàng siêu gọn */
  .header-shortcut {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 8px !important;
    font-size: 11.5px !important;
    font-weight: 650 !important;
    border-radius: 7px !important;
    gap: 4px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  }
  .header-shortcut .ui-icon {
    width: 15px !important;
    height: 15px !important;
  }

  /* Chuông thông báo siêu gọn */
  .header-bell {
    min-height: 32px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 7px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  }
  .header-bell .ui-icon {
    width: 17px !important;
    height: 17px !important;
  }
  .header-bell b {
    top: 1px !important;
    right: 1px !important;
    min-width: 14px !important;
    height: 14px !important;
    font-size: 9px !important;
    line-height: 14px !important;
  }

  /* Huy hiệu người dùng / shop siêu gọn */
  .user-badge-btn {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 7px !important;
    font-size: 11.5px !important;
    font-weight: 650 !important;
    border-radius: 7px !important;
    gap: 4px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  }
  .user-badge-btn .ui-icon {
    width: 16px !important;
    height: 16px !important;
  }

  /* Thu gọn Install banner bám đỉnh */
  body:has(#firstVisitInstallBanner) .topbar {
    top: 40px !important;
  }
  .install-subtle-tip {
    top: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 10px !important;
  }
  .install-subtle-tip .tip-title {
    font-size: 12.5px !important;
  }
  .install-subtle-tip .tip-action-pill {
    height: 26px !important;
    max-height: 26px !important;
    line-height: 24px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
  }
  .install-subtle-tip .tip-dismiss-btn {
    width: 24px !important;
    height: 24px !important;
  }

  /* Tối ưu mép đỉnh nội dung: Đưa thẻ xanh và các khối thao tác lên sát vạch đỏ */
  .auth-user-bar-compact {
    display: none !important;
  }
  .content {
    padding-top: 6px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .dashboard-sales-hero {
    margin-top: 0 !important;
  }
}

/* --- Phân hệ Cấu hình Thuế & Báo cáo Lợi nhuận sau thuế (Append-Only) --- */
.tax-settings-sheet {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tax-settings-sheet .radio-card {
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.tax-settings-sheet .radio-card:hover {
  border-color: #0284c7;
}
.tax-profit-panel {
  border-top: 2px solid #0f172a;
}
.tax-profit-panel .section-head h2 {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}
.pos-chips .pos-chip-btn {
  transition: all 0.15s ease;
  white-space: nowrap;
}
.pos-chips .pos-chip-btn:hover {
  border-color: #0f172a;
}
/* Channel Chip and Checkout Header Row */
.checkout-header-row {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 6px;
  margin: 4px 0 8px;
}
.checkout-header-row .customer-chip {
  margin: 0 !important;
  width: 100% !important;
  text-align: left;
  overflow: hidden;
  box-sizing: border-box;
}

/* Customer Chip — Tinh tế tone Xanh lam (Soft Sky Blue) */
.customer-chip {
  min-height: 42px !important;
  height: auto !important;
  padding: 6px 11px !important;
  margin: 0 0 4px !important;
  border-radius: 11px !important;
  background: #f0f7ff !important;
  border: 1.5px solid #bfdbfe !important;
  color: #1e3a8a !important;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.05) !important;
  transition: all 0.15s ease !important;
}
.customer-chip:hover,
.customer-chip:active {
  background: #e0f2fe !important;
  border-color: #60a5fa !important;
}
.customer-chip > .ui-icon:first-child {
  color: #2563eb !important;
  width: 17px !important;
  height: 17px !important;
  flex-shrink: 0 !important;
}
.customer-chip small {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #2563eb !important;
  display: block !important;
  line-height: 1.2 !important;
  letter-spacing: 0.15px !important;
}
.customer-chip b,
.customer-chip .customer-chip-name {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #0f295e !important;
  line-height: 1.3 !important;
}
.customer-chip > .ui-icon:last-child {
  color: #60a5fa !important;
  flex-shrink: 0 !important;
}

/* Channel Chip — Sắc thái riêng biệt (Soft Lavender / Indigo) chống lẫn */
.checkout-header-row .channel-chip,
.customer-chip.channel-chip {
  background: #f5f3ff !important;
  border: 1.5px solid #ddd6fe !important;
  color: #3730a3 !important;
  box-shadow: 0 1px 3px rgba(124, 58, 237, 0.05) !important;
}
.checkout-header-row .channel-chip:hover,
.customer-chip.channel-chip:hover,
.checkout-header-row .channel-chip:active,
.customer-chip.channel-chip:active {
  background: #ede9fe !important;
  border-color: #a78bfa !important;
}
.checkout-header-row .channel-chip > .ui-icon:first-child,
.customer-chip.channel-chip > .ui-icon:first-child {
  color: #7c3aed !important;
  width: 17px !important;
  height: 17px !important;
  flex-shrink: 0 !important;
}
.checkout-header-row .channel-chip small,
.customer-chip.channel-chip small {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #7c3aed !important;
  display: block !important;
  line-height: 1.2 !important;
  letter-spacing: 0.15px !important;
}
.checkout-header-row .channel-chip b,
.customer-chip.channel-chip b {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #2e1065 !important;
  line-height: 1.3 !important;
}
.checkout-header-row .channel-chip > .ui-icon:last-child,
.customer-chip.channel-chip > .ui-icon:last-child {
  color: #a78bfa !important;
  flex-shrink: 0 !important;
}

.channel-option-row:hover {
  border-color: #0f172a !important;
  background: #f8fafc !important;
}

.order-options-open {
  border-radius: 10px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  padding: 8px 12px !important;
}

/* Streamlined Tax & Profit Statement */
.tax-profit-panel {
  border-top: 2px solid #0f172a;
}
.tax-profit-panel .section-head h2 {
  font-size: 15px;
  font-weight: 750;
  color: #0f172a;
}
.tax-hero-card {
  transition: transform 0.15s ease;
}
.tax-breakdown-row,
.tax-statement-row {
  transition: background-color 0.15s ease;
}
.tax-breakdown-row:hover,
.tax-statement-row:hover {
  background-color: #f8fafc !important;
}
.tax-step-card {
  transition: border-color 0.15s ease;
}
.tax-step-card:hover {
  border-color: #cbd5e1 !important;
}
.tax-legal-details summary::-webkit-details-marker {
  display: none;
}
.tax-legal-details summary {
  list-style: none;
}
.tax-legal-details[open] summary .tax-toggle-arrow {
  color: #0f56d9;
  transform: rotate(180deg);
  display: inline-block;
}
.tax-profit-panel .tax-setup-btn {
  min-height: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 9px !important;
  gap: 4px !important;
  line-height: 1 !important;
}
@media (max-width: 640px) {
  .checkout-header-row {
    grid-template-columns: 1.1fr 1fr;
    gap: 6px;
    margin: 4px 0 6px;
  }
  .tax-profit-panel {
    margin-top: 12px;
  }
  .tax-hero-card {
    padding: 9px 10px !important;
  }
  .tax-breakdown-row,
  .tax-statement-row {
    padding: 7px 10px !important;
  }
  .tax-step-card {
    padding: 8px 9px !important;
  }
}

/* Compact Transaction Modal Action Grid */
.tx-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 6px 0 10px;
}
.tx-action-grid .tx-act-btn {
  min-height: 40px;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  transition: all 0.15s ease;
  line-height: 1.2;
}
.tx-action-grid .tx-act-btn:active {
  transform: scale(0.98);
}
.tx-action-grid .btn-print-blue {
  background: #1485ee !important;
  color: #fff !important;
  border: 1.5px solid #0868c6 !important;
  box-shadow: 0 2px 6px rgba(20, 133, 238, 0.25) !important;
}
.tx-action-grid .btn-print-blue:hover {
  background: #0868c6 !important;
}
.tx-action-grid .btn-invoice-blue {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1.5px solid #93c5fd !important;
}
.tx-action-grid .btn-invoice-blue:hover {
  background: #dbeafe !important;
  border-color: #60a5fa !important;
}
@media (max-width: 480px) {
  .tx-action-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .tx-action-grid .tx-act-btn {
    padding: 7px 6px !important;
    font-size: 11.5px !important;
  }
}

/* ==========================================================================
   MOBILE-FIRST ULTRA-COMPACT STICKY GOODS SEARCH BAR (LUÔN LUÔN Ở TRÊN ĐẦU)
   ========================================================================== */
.goods-search-sticky {
  position: sticky;
  top: 64px;
  z-index: 15;
  background: rgba(244, 247, 251, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 6px 0 8px;
  margin-bottom: 8px;
}
.goods-search-sticky .goods-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
  align-items: center;
  margin-top: 0 !important;
}
.goods-search-sticky .goods-search:has(button[data-action="scan"][hidden]) {
  grid-template-columns: 1fr;
}
.goods-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  width: 100%;
}
.goods-search-input-wrap .search-input-icon {
  position: absolute;
  left: 11px;
  display: flex;
  align-items: center;
  pointer-events: none;
  color: #8c9ba5;
  z-index: 2;
}
.goods-search-input-wrap .search-input-icon .ui-icon {
  width: 16px;
  height: 16px;
}
.goods-search-input-wrap input {
  width: 100%;
  min-width: 0;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 32px 0 34px !important;
  border: 1px solid #dce4ee !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  font-size: 14.5px !important;
  color: var(--text) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.goods-search-input-wrap input:focus {
  border-color: var(--q-blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(20, 133, 238, 0.12) !important;
}
.goods-search-input-wrap .search-clear-btn {
  position: absolute;
  right: 7px;
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #e2e8f0;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.goods-search-input-wrap .search-clear-btn:hover {
  background: #cbd5e1;
  color: #334155;
}
.goods-search-input-wrap .search-clear-btn .ui-icon {
  width: 13px;
  height: 13px;
}
.goods-search-sticky .goods-search button[data-action="scan"] {
  width: 42px !important;
  height: 40px !important;
  min-width: 42px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 1px solid #dce4ee !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: var(--q-blue) !important;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.15s ease;
}
.goods-search-sticky .goods-search button[data-action="scan"]:active {
  transform: scale(0.96);
}
.goods-search-sticky .goods-search button[data-action="scan"] .ui-icon {
  width: 20px;
  height: 20px;
}

@media (max-width: 920px) {
  .goods-search-sticky {
    top: 0 !important;
    margin: 0 -10px 8px !important;
    padding: 6px 10px 7px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.85) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  }
}

/* =========================================================================
   STREAMLINED GOODS TOOLS: SORT, COMPACT DISPLAY, FILTER & BATCH ACTIONS
   ========================================================================= */

/* 1. Sort & Filter Tool Buttons & Modals */
.btn-tool-filter {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3.5px !important;
  padding: 0 4px !important;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #dce4ee;
  border-radius: 9px;
  color: #526176;
  font-weight: 700;
  font-size: 11.5px;
  transition: all 0.15s ease;
  min-height: 38px;
  box-sizing: border-box;
}
.btn-tool-filter .btn-tool-filter-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #64748b;
}
.btn-tool-filter .btn-tool-filter-icon .ui-icon {
  width: 13px;
  height: 13px;
}
.btn-tool-filter.active {
  border-color: var(--q-blue, #0284c7) !important;
  color: var(--q-blue, #0284c7) !important;
  background: rgba(2, 132, 199, 0.08) !important;
}
.btn-tool-filter.active .btn-tool-filter-icon {
  color: var(--q-blue, #0284c7);
}

.btn-tool-sort {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3.5px !important;
  padding: 0 5px !important;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #dce4ee;
  border-radius: 9px;
  color: #526176;
  font-weight: 700;
  font-size: 11.5px;
  transition: all 0.15s ease;
  min-height: 38px;
  box-sizing: border-box;
}
.btn-tool-sort .btn-tool-sort-icon,
.btn-tool-sort .sort-tool-arrow {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #64748b;
}
.btn-tool-sort .btn-tool-sort-icon .ui-icon,
.btn-tool-sort .sort-tool-arrow .ui-icon {
  width: 14px;
  height: 14px;
}
.btn-tool-sort .btn-tool-sort-label,
.btn-tool-sort .sort-tool-text {
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn-tool-sort.active {
  border-color: var(--q-blue, #0284c7) !important;
  color: var(--q-blue, #0284c7) !important;
  background: rgba(2, 132, 199, 0.08) !important;
}
.btn-tool-sort.active .btn-tool-sort-icon,
.btn-tool-sort.active .sort-tool-arrow {
  color: var(--q-blue, #0284c7);
}

.sort-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}
.sort-option-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 6px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
  white-space: nowrap;
}
.sort-option-btn:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}
.sort-option-btn.active {
  border-color: var(--q-blue, #0284c7);
  background: #eff6ff;
  box-shadow: 0 0 0 1px var(--q-blue, #0284c7);
}
.sort-opt-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.sort-option-btn.active .sort-opt-icon {
  background: var(--q-blue, #0284c7);
  color: #ffffff;
}
.sort-opt-icon .ui-icon {
  width: 14px;
  height: 14px;
}
.sort-opt-title {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 650;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sort-option-btn.active .sort-opt-title {
  color: var(--q-blue, #0284c7);
  font-weight: 700;
}
.sort-opt-check {
  color: var(--q-blue, #0284c7);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-left: auto;
}
.sort-opt-check .ui-icon {
  width: 15px;
  height: 15px;
}

/* 2. Compact Display Settings Modal */
.compact-display-modal {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.compact-display-modal h4 {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 750;
  color: #1e293b;
}
.device-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.device-section-head h4 {
  margin: 0;
}
.device-section-hint {
  font-size: 10.5px;
  color: #64748b;
}
.compact-options {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 5px !important;
}
.compact-options label.view-opt-label {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  min-height: 35px !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  background: #fff;
  border: 1px solid #cbd5e1;
  transition: all 0.15s ease;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
.view-opt-ic {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: #64748b;
  flex-shrink: 0;
}
.view-opt-ic .ui-icon {
  width: 14px;
  height: 14px;
}
.view-opt-txt {
  font-size: 11.5px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
}
.compact-options label input,
.compact-check-list label input {
  margin-right: 2px;
}
.compact-options label.is-checked,
.compact-check-list label.is-checked {
  border-color: var(--q-blue, #0284c7) !important;
  background: #eff6ff !important;
  color: var(--q-blue-dark, #0868c6) !important;
}
.compact-options label.is-checked .view-opt-ic {
  color: var(--q-blue, #0284c7);
}
.compact-options label.is-checked .view-opt-txt {
  color: var(--q-blue-dark, #0868c6);
  font-weight: 700;
}

.compact-check-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 5px !important;
}
.compact-check-list label {
  min-height: 32px !important;
  padding: 3px 5px !important;
  border-radius: 7px !important;
  font-size: 11.5px !important;
  justify-content: center !important;
  cursor: pointer !important;
  border: 1px solid #cbd5e1;
  background: #fff;
  white-space: nowrap !important;
}

.display-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.compact-segment {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 3px !important;
  padding: 2px !important;
  background: #edf1f6 !important;
  border-radius: 8px !important;
}
.compact-segment label {
  min-height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.compact-pos-options {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px !important;
}
.compact-pos-options label {
  min-height: 32px !important;
  padding: 2px 5px !important;
  font-size: 11px !important;
  border-radius: 7px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  border: 1px solid #cbd5e1;
  background: #fff;
}
.compact-pos-options label.is-checked {
  border-color: var(--q-blue, #0284c7) !important;
  background: #eff6ff !important;
  color: var(--q-blue-dark, #0868c6) !important;
  font-weight: 700 !important;
}
.compact-pos-options label .view-opt-ic {
  width: 14px;
  height: 14px;
}
.compact-pos-options label .view-opt-ic .ui-icon {
  width: 13px;
  height: 13px;
}

/* Device Preview Section at Bottom of Display Settings */
.device-preview-section {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
}
.device-preview-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-bottom: 7px;
}
.dev-tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.dev-tab-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}
.dev-tab-btn.active {
  border-color: var(--q-blue, #0284c7);
  background: #eff6ff;
  color: var(--q-blue-dark, #0868c6);
  box-shadow: 0 0 0 1px var(--q-blue, #0284c7);
}
.dev-tab-btn .dev-tab-icon {
  display: grid;
  place-items: center;
}
.dev-tab-btn .dev-tab-icon .ui-icon {
  width: 14px;
  height: 14px;
}
.device-preview-canvas {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  padding: 8px;
  overflow: hidden;
  transition: all 0.2s ease;
}
.preview-canvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #eef2f6;
  font-size: 10px;
  color: #64748b;
  font-weight: 650;
  white-space: nowrap;
}
.preview-canvas-header .dev-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 700;
  font-size: 9.5px;
  color: #1e293b;
  flex-shrink: 0;
}
.preview-canvas-header .dev-badge .ui-icon {
  width: 11px;
  height: 11px;
}
.preview-canvas-header span:last-child {
  font-size: 9.5px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mock rows / cards inside preview */
.preview-mock-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.preview-mock-item {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  padding: 4px 7px;
  font-size: 11px;
}
.preview-mock-img {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: #e2e8f0;
  display: grid;
  place-items: center;
  color: #94a3b8;
  flex-shrink: 0;
}
.preview-mock-img .ui-icon {
  width: 12px;
  height: 12px;
}
.preview-mock-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.preview-mock-title {
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
}
.preview-mock-sku {
  font-size: 9px;
  color: #64748b;
  background: #f1f5f9;
  padding: 1px 4px;
  border-radius: 4px;
  margin-left: 4px;
  font-weight: 650;
}
.preview-mock-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 10.5px;
}
.preview-mock-price {
  font-weight: 800;
  color: var(--q-blue-dark, #0868c6);
}
.preview-mock-stock {
  color: #15803d;
  font-weight: 650;
  background: #f0fdf4;
  padding: 1px 4px;
  border-radius: 4px;
}

/* Mock Grid */
.preview-mock-grid {
  display: grid;
  gap: 5px;
}
.preview-mock-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.preview-mock-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.preview-mock-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.preview-mock-card-img {
  width: 100%;
  height: 36px;
  background: #f1f5f9;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: #94a3b8;
}
.preview-mock-card-img .ui-icon {
  width: 14px;
  height: 14px;
}
.preview-mock-card-title {
  font-size: 10px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.preview-mock-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9.5px;
}

/* Mock Desktop Table */
.preview-mock-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}
.preview-mock-table th {
  background: #f1f5f9;
  padding: 3px 6px;
  text-align: left;
  font-weight: 750;
  color: #475569;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}
.preview-mock-table td {
  padding: 3px 6px;
  border-bottom: 1px solid #f1f5f9;
  white-space: nowrap;
  color: #1e293b;
}

/* 3. Compact Filter Modal */
.compact-filter-modal {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.compact-filter-modal .mod-block {
  margin-bottom: 2px;
}
.compact-filter-modal .mod-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #64748b;
  margin-bottom: 6px;
}
.compact-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
}
.filter-chip-btn {
  padding: 6px 12px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  min-height: 32px !important;
}
.filter-chip-btn:hover {
  border-color: #94a3b8 !important;
  background: #f8fafc !important;
}
.filter-chip-btn.active {
  border-color: var(--q-blue, #0284c7) !important;
  background: #eff6ff !important;
  color: var(--q-blue-dark, #0868c6) !important;
  font-weight: 750 !important;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.15) !important;
}

/* 4. Batch Action Sheet & Sub-modals */
.batch-action-sheet {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 0 22px;
}
.batch-group-title {
  font-size: 10.5px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 8px 0 4px;
}
.batch-group-title.danger {
  color: #dc2626;
}
.batch-action-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.batch-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 7px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
}
.batch-action-btn:hover {
  border-color: var(--q-blue, #0284c7);
  background: #f8fafc;
}
.batch-action-btn .ui-icon:last-child {
  margin-left: auto;
  color: #94a3b8;
  width: 16px;
  height: 16px;
}
.batch-act-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid transparent;
}
.batch-act-icon .ui-icon {
  width: 19px;
  height: 19px;
}
.batch-act-icon.gold { background: #fef3c7; border-color: #fde68a; color: #b45309; }
.batch-act-icon.purple { background: #f3e8ff; border-color: #e9d5ff; color: #7e22ce; }
.batch-act-icon.teal { background: #ccfbf1; border-color: #99f6e4; color: #0f766e; }
.batch-act-icon.green, .batch-act-icon.ok { background: #dcfce7; border-color: #bbf7d0; color: #15803d; }
.batch-act-icon.blue, .batch-act-icon.primary { background: #e0f2fe; border-color: #bae6fd; color: #0369a1; }
.batch-act-icon.excel { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.batch-act-icon.slate { background: #f1f5f9; border-color: #e2e8f0; color: #334155; }
.batch-act-icon.danger { background: #fee2e2; border-color: #fecaca; color: #b91c1c; }

.batch-action-btn.is-danger {
  border-color: #fecaca;
}
.batch-action-btn.is-danger:hover {
  border-color: #dc2626;
  background: #fef2f2;
}
.batch-act-info {
  flex: 1;
  min-width: 0;
}
.batch-act-info strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}
.batch-action-btn.is-danger .batch-act-info strong {
  color: #dc2626;
}
.batch-act-info small {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-top: 1px;
}

.batch-price-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.batch-price-preview {
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 12px;
}
.batch-price-preview .price-compare-row {
  margin-top: 4px;
  font-size: 13px;
}

/* 5. AI Guidance & Note Single-Line Compact Styles */
.ai-hint-line {
  font-size: 11.5px;
  color: #475569;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 3px 8px;
  margin-top: 5px;
  line-height: 1.35;
  display: block;
  white-space: normal;
}
.ai-note-line {
  font-size: 11px;
  color: #64748b;
  line-height: 1.25;
  display: block;
  margin-top: 2px;
}

/* ==========================================================================
   MOBILE-FIRST RETURN & EXCHANGE FLOW & MODAL REFINEMENTS
   ========================================================================== */
.return-flow-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 24px;
}

.return-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 4px;
}

.return-tabs button {
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  font-weight: 700;
  font-size: 14px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: all .15s ease;
}

.return-tabs button.active {
  background: #fff;
  color: var(--q-blue, #1068bf);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

.return-notice {
  padding: 10px 12px;
  border-radius: 10px;
  background: #f0fdf4;
  color: #166534;
  font-size: 12.5px;
  line-height: 1.45;
  border: 1px solid #bbf7d0;
}

.return-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.return-item-card {
  border: 1px solid var(--q-line, #e2e8f0);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.return-item-card.active-selected {
  border-color: #93c5fd;
  background: #f8faff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.06);
}

.return-item-card.disabled {
  opacity: 0.55;
  background: #f8fafc;
}

.return-item-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.return-checkbox-label {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding-top: 2px;
}

.return-checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 20px;
  accent-color: var(--q-blue, #1068bf);
  cursor: pointer;
}

.return-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}

.return-item-title {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.35;
  word-break: break-word;
}

.return-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #64748b;
}

.return-item-meta .sku-tag {
  background: #f1f5f9;
  color: #475569;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.return-item-meta .text-green {
  color: #16a34a;
}

.return-item-meta .text-muted {
  color: #94a3b8;
}

.return-item-controls {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.return-ctrl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.return-ctrl-row .ctrl-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  flex-shrink: 0;
}

.return-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  background: #fff;
  overflow: hidden;
}

.return-stepper .stepper-btn {
  width: 38px;
  height: 38px;
  min-height: 38px;
  border: 0;
  background: #f8fafc;
  color: #1e293b;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .12s ease;
}

.return-stepper .stepper-btn:hover {
  background: #edf2f7;
}

.return-stepper .stepper-btn:active {
  background: #e2e8f0;
}

.return-stepper input[type="number"] {
  width: 48px;
  height: 38px;
  min-height: 38px;
  border: 0;
  border-left: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  border-radius: 0;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  padding: 0;
  background: #fff;
  -moz-appearance: textfield;
}

.return-stepper input[type="number"]::-webkit-outer-spin-button,
.return-stepper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.return-condition-select {
  flex: 1;
  max-width: 170px;
  min-height: 38px;
  height: 38px;
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  outline: none;
}

/* Exchange comparison grid */
.exchange-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.exchange-compare > div {
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.exchange-compare > div.diff-box {
  grid-column: 1 / -1;
  background: #eff6ff;
  border-color: #bfdbfe;
}

.exchange-compare span {
  font-size: 12px;
  color: #64748b;
  display: block;
}

.exchange-compare strong {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  display: block;
  margin-top: 3px;
}

.exchange-compare .diff-box strong {
  font-size: 17px;
  color: #1d4ed8;
}

.stock-product-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  max-height: 180px;
  overflow-y: auto;
}

.stock-product-results button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  text-align: left;
  min-height: 42px;
  cursor: pointer;
}

.stock-product-results button:hover {
  background: #f1f5f9;
}

/* Chi tiết sản phẩm đang thao tác trong phiếu kho */
.selected-stock-product.has-product {
  background: #f0f7ff !important;
  border: 1.5px solid #bfdbfe !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
}
.selected-stock-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.selected-stock-info strong {
  font-size: 14px;
  font-weight: 750;
  color: #0f172a;
  line-height: 1.3;
}
.selected-stock-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #475569;
}
.stock-badge-sku {
  display: inline-block;
  padding: 1px 6px;
  background: #e2e8f0;
  color: #334155;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
}
.stock-badge-onhand {
  font-size: 12px;
  color: #0f5fd8;
}
.stock-badge-onhand b {
  font-weight: 750;
}
.stock-add-more-wrap {
  display: grid;
  gap: 6px;
  width: 100%;
  margin: 2px 0;
}
.stock-toggle-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 38px;
  padding: 6px 12px;
  border-radius: 9px;
  border: 1.5px dashed #cbd5e1;
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: all 0.15s ease;
}
.stock-toggle-search-btn:hover {
  background: #f1f5f9;
  border-color: #0f5fd8;
  color: #0f5fd8;
}
.stock-toggle-search-btn .ui-icon {
  width: 16px;
  height: 16px;
}

/* Compact source list Online badge */
.compact-source-list .compact-source-code-row,
.compact-source-code-row {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  width: fit-content;
}

.compact-source-list .return-online-badge,
.return-online-badge {
  display: inline-flex !important;
  align-items: center;
  width: fit-content !important;
  max-width: fit-content;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5.5px;
  background: #e0f2fe;
  color: #0369a1;
  border-radius: 4px;
  line-height: 1.35;
  white-space: nowrap;
}

/* ==========================================================================
   QUICK SERVICE / REPAIR IN POS (Dịch vụ & Sửa chữa nhanh)
   ========================================================================== */
.pos-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px auto;
  gap: 8px;
}
.pos-search-row button.pos-quick-service-btn,
.pos-quick-service-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-height: 48px !important;
  height: 48px !important;
  padding: 0 12px !important;
  border: 1.5px solid #059669 !important;
  border-radius: 12px !important;
  background: #10b981 !important;
  background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25) !important;
  transition: all 0.15s ease !important;
}
.pos-search-row button.pos-quick-service-btn span,
.pos-quick-service-btn span {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 13px !important;
}
.pos-search-row button.pos-quick-service-btn .ui-icon,
.pos-quick-service-btn .ui-icon,
.pos-quick-service-btn svg {
  width: 17px !important;
  height: 17px !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
}
.pos-search-row button.pos-quick-service-btn:hover,
.pos-quick-service-btn:hover {
  background: #059669 !important;
  background: linear-gradient(180deg, #059669 0%, #047857 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.35) !important;
}
.pos-search-row button.pos-quick-service-btn:active,
.pos-quick-service-btn:active {
  transform: translateY(0) !important;
}

@media (max-width: 640px) {
  .pos-search-row {
    grid-template-columns: minmax(0, 1fr) 44px auto !important;
    gap: 6px !important;
  }
  .pos-search-row button.pos-quick-service-btn,
  .pos-quick-service-btn {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    border-radius: 11px !important;
    gap: 4px !important;
  }
}

/* Quick Service Modal Styling - Ultra Compact & Soft Tone */
.modal.quick-service-modal,
.modal:has(.quick-service-modal-body) {
  max-width: 440px !important;
  max-height: 96vh !important;
  margin: auto !important;
}
.modal.quick-service-modal .modal-head,
.modal:has(.quick-service-modal-body) .modal-head {
  padding: 10px 14px !important;
  gap: 8px !important;
  align-items: center !important;
}
.modal.quick-service-modal .modal-head h3,
.modal:has(.quick-service-modal-body) .modal-head h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}
.modal.quick-service-modal .modal-head p,
.modal:has(.quick-service-modal-body) .modal-head p {
  font-size: 11px !important;
  color: #64748b !important;
  margin-top: 2px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.modal.quick-service-modal .close-btn,
.modal:has(.quick-service-modal-body) .close-btn {
  width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  font-size: 18px !important;
  border-radius: 8px !important;
}
.modal.quick-service-modal .modal-body,
.modal:has(.quick-service-modal-body) .modal-body {
  padding: 8px 14px 10px !important;
}
.modal.quick-service-modal .modal-foot,
.modal:has(.quick-service-modal-body) .modal-foot {
  padding: 8px 14px !important;
  gap: 8px !important;
}
.modal.quick-service-modal .modal-foot button,
.modal:has(.quick-service-modal-body) .modal-foot button {
  min-height: 38px !important;
  height: 38px !important;
  font-size: 13.5px !important;
  border-radius: 9px !important;
}
.qs-chip-btn {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1.3;
  transition: all 0.12s ease;
  white-space: nowrap;
}
.qs-chip-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
}
.qs-chip-btn.active {
  background: #eff6ff;
  border-color: #60a5fa;
  color: #1d4ed8;
  font-weight: 600;
}
.qs-price-pill-btn {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
  padding: 2.5px 8px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.3;
  transition: all 0.12s ease;
}
.qs-price-pill-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0284c7;
}
.qs-price-pill-btn.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
}
.qs-warranty-btn {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 2px;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: all 0.12s ease;
}
.qs-warranty-btn.active {
  background: #10b981;
  border-color: #059669;
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(16, 185, 129, 0.25);
}

/* Cart service badges */
.cart-service-info-pill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
}
.cart-badge-service {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: #e0f2fe;
  color: #0369a1;
}
.cart-badge-warranty {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: #dcfce7;
  color: #15803d;
}
.cart-badge-imei {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #475569;
  font-family: monospace;
}
.cart-badge-note {
  font-size: 10.5px;
  color: #64748b;
  font-style: italic;
  display: block;
}

/* Sleek Cart & Checkout Header + DV Button */
.flow-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}
.flow-head h2 {
  flex: 1;
  text-align: left !important;
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}
.flow-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.flow-dv-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--q-blue, #1485ee);
  color: #ffffff;
  border: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  transition: all 0.15s ease;
}
.flow-dv-btn:hover {
  background: var(--q-blue-dark, #0868c6);
}
.flow-dv-btn svg, .flow-dv-btn .ui-icon {
  width: 13px;
  height: 13px;
}

/* Inline Cart Warranty Tag & Button */
.cart-badge-warranty-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 1px 6px !important;
  border-radius: 5px !important;
  background: #f1f5f9 !important;
  color: #0369a1 !important;
  border: 1px solid #cbd5e1 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.cart-badge-warranty-tag:hover {
  background: #e0f2fe !important;
  border-color: #7dd3fc !important;
  color: #0284c7 !important;
}
.cart-badge-add-warranty {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  padding: 1px 6px !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: #64748b !important;
  border: 1px dashed #cbd5e1 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.cart-badge-add-warranty:hover {
  background: #f8fafc !important;
  color: #0284c7 !important;
  border-color: #0284c7 !important;
}

/* Sleek Checkout Rows for Policy & Appointment */
.sleek-checkout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  margin-top: 8px;
  border-radius: 10px;
  background: #f7f9fc;
  border: 1px solid var(--q-line);
}
.sleek-checkout-row > span {
  font-size: 13px;
  font-weight: 600;
  color: var(--q-muted);
  white-space: nowrap;
}
.sleek-checkout-row select {
  min-height: 36px;
  padding: 4px 8px;
  border: 1px solid var(--q-line);
  border-radius: 8px;
  background: #ffffff;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  max-width: 210px;
}
.sleek-checkout-row.custom-field {
  margin-top: 4px;
  padding: 6px 10px;
}
.sleek-checkout-row.custom-field input {
  width: 100%;
  height: 32px;
  border: 1px solid var(--q-line);
  border-radius: 6px;
  padding: 0 8px;
  font-size: 12px;
}
.sleek-segmented-warranty {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-top: 4px;
}
.sleek-segmented-warranty button {
  padding: 6px 2px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  border-radius: 6px;
  color: #334155;
  cursor: pointer;
}
.sleek-segmented-warranty button.active {
  background: var(--q-blue, #1485ee);
  border-color: var(--q-blue, #1485ee);
  color: #ffffff;
  font-weight: 700;
}

/* ==== PRODUCT EDIT V3: IMAGE-FIRST ULTRA-COMPACT & MULTI-IMAGE POPUP ==== */
.pe-compact-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pe-hero-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.pe-photo-frame-wrap {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  cursor: pointer;
}

.pe-photo-frame {
  width: 88px;
  height: 88px;
  border-radius: 12px;
  border: 1.5px solid #cbd5e1;
  background: #f8fafc;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pe-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pe-photo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  gap: 4px;
}
.pe-photo-empty .ui-icon {
  width: 24px;
  height: 24px;
}
.pe-photo-empty span {
  font-size: 10px;
  font-weight: 600;
}

.pe-photo-count-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(15, 23, 42, 0.85);
  color: #ffffff;
  font-size: 10px;
  font-weight: 750;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  line-height: 1.2;
}

.pe-photo-action-bar {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  background: rgba(15, 23, 42, 0.78);
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 700;
  text-align: center;
  padding: 3px 0;
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.pe-photo-action-bar .ui-icon {
  width: 11px;
  height: 11px;
}

.pe-mini-plus-wrap {
  display: flex;
  align-items: center;
}

.pe-plus-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px dashed #93c5fd;
  background: #eff6ff;
  color: #1485ee;
  font-size: 15px;
  font-weight: 800;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.pe-name-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}
.pe-name-block label {
  font-size: 11px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 2px;
}
.pe-name-block textarea {
  width: 100%;
  height: 66px;
  padding: 7px 9px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  resize: none;
  outline: none;
  line-height: 1.35;
  font-family: inherit;
}
.pe-name-block textarea:focus {
  border-color: #1485ee;
}

.pe-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pe-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.pe-field label {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
}
.pe-field input, .pe-field select {
  width: 100%;
  height: 38px;
  padding: 0 9px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  background: #ffffff;
  outline: none;
  font-family: inherit;
}
.pe-field input:focus, .pe-field select:focus {
  border-color: #1485ee;
}

.pe-price-sell input {
  color: #0284c7;
  font-weight: 800;
  font-size: 14px;
  background: #f0f9ff;
  border-color: #bae6fd;
}

.pe-warranty-bar {
  display: grid;
  grid-template-columns: 124px 1fr;
  gap: 8px;
  align-items: end;
  background: #f8fafc;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid #e2e8f0;
}
.pe-warranty-bar label {
  font-size: 10.5px;
  font-weight: 750;
  color: #0369a1;
  display: block;
  margin-bottom: 2px;
}
.pe-warranty-bar select, .pe-warranty-bar input {
  height: 34px;
  padding: 0 8px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  font-size: 12px;
  background: #ffffff;
  width: 100%;
}

.pe-more-box {
  border-top: 1px dashed #e2e8f0;
  padding-top: 6px;
  margin-top: 2px;
}
.pe-more-box summary {
  font-size: 11.5px;
  font-weight: 750;
  color: #1485ee;
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
}
.pe-more-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
}

/* POPUP ALBUM NHIỀU ẢNH (BOTTOM SHEET) */
.pe-gallery-overlay {
  position: fixed;
  inset: 0;
  z-index: 1250;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(3px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  animation: peFadeIn .18s ease-out;
}
@keyframes peFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.pe-gallery-sheet {
  background: #ffffff;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.25);
  animation: peSlideUp .22s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
@keyframes peSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.pe-gallery-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
}
.pe-gallery-sheet-head h4 {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}
.pe-gallery-sheet-head p {
  font-size: 11px;
  color: #64748b;
  margin: 2px 0 0;
}
.pe-gallery-count {
  font-size: 12px;
  font-weight: 750;
  color: #1485ee;
  background: #eff6ff;
  padding: 3px 8px;
  border-radius: 6px;
}

.pe-gallery-sheet-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}

.pe-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.pe-gallery-item {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  cursor: pointer;
}
.pe-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pe-gallery-item.cover-item {
  border-color: #1485ee;
  border-width: 2px;
}

.pe-gallery-cover-tag {
  position: absolute;
  top: 4px;
  left: 4px;
  background: #1485ee;
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
}

.pe-gallery-del-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.75);
  color: #ffffff;
  border: 0;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  display: grid;
  place-items: center;
  line-height: 1;
  padding: 0;
}

.pe-gallery-add-slot {
  aspect-ratio: 1/1;
  border-radius: 12px;
  border: 2px dashed #93c5fd;
  background: #eff6ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  color: #1485ee;
}
.pe-gallery-add-slot strong {
  font-size: 22px;
  line-height: 1;
}
.pe-gallery-add-slot span {
  font-size: 10.5px;
  font-weight: 700;
}

.pe-gallery-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pe-gallery-btn-cam {
  height: 40px;
  border-radius: 10px;
  border: 1px solid #1485ee;
  background: #f0f7ff;
  color: #1485ee;
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}
.pe-gallery-btn-file {
  height: 40px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.pe-gallery-sheet-foot {
  padding: 10px 16px;
  border-top: 1px solid #f1f5f9;
  background: #ffffff;
}
.pe-gallery-btn-done {
  width: 100%;
  height: 42px;
  border-radius: 10px;
  border: 0;
  background: #1485ee;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

/* ==========================================================================
   QBIZ NOTIFICATION CENTER & POPUP MODAL (PROFESSIONAL MOBILE-FIRST)
   ========================================================================== */
.noti-modal-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.noti-modal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 2px;
}
.noti-status-pill {
  display: flex;
  align-items: center;
  gap: 6px;
}
.noti-pill-unread {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fef2f2;
  color: #dc2626;
  font-size: 12px;
  font-weight: 750;
  border: 1px solid #fee2e2;
}
.noti-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
  animation: notiPulseAnim 2s infinite;
}
@keyframes notiPulseAnim {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
  70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.noti-pill-all-read {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #059669;
  font-size: 12px;
  font-weight: 750;
  border: 1px solid #d1fae5;
}
.noti-pill-all-read .ui-icon {
  width: 13px;
  height: 13px;
}
.noti-btn-mark-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  min-height: 32px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: all 0.15s ease;
}
.noti-btn-mark-all:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}
.noti-btn-mark-all .ui-icon {
  width: 14px;
  height: 14px;
  color: #2563eb;
}

/* Tabs phân loại filter */
.noti-filter-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0 4px 0;
  -webkit-overflow-scrolling: touch;
}
.noti-filter-strip::-webkit-scrollbar {
  display: none;
}
.noti-tab-btn {
  white-space: nowrap;
  padding: 5px 12px;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.noti-tab-btn.active {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1d4ed8;
  font-weight: 750;
}

/* Luồng thông báo (Stream) */
.noti-items-stream {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 2px;
}

/* Từng thẻ thông báo */
.noti-card-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  cursor: pointer;
  position: relative;
  transition: all 0.16s ease;
  text-align: left;
}
.noti-card-item:hover {
  border-color: #93c5fd;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}
.noti-card-item.is-unread {
  background: #ffffff;
  border-color: #bfdbfe;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.06);
}
.noti-card-item.is-read {
  background: #f8fafc;
  border-color: #e2e8f0;
  opacity: 0.82;
}

/* Khối Icon */
.noti-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.noti-icon-box .ui-icon {
  width: 20px;
  height: 20px;
}
.noti-ico-order {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #dbeafe;
}
.noti-ico-danger {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fee2e2;
}
.noti-ico-warning {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fef3c7;
}
.noti-ico-purple {
  background: #f5f3ff;
  color: #7c3aed;
  border: 1px solid #ede9fe;
}
.noti-ico-success {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #d1fae5;
}

/* Thân card */
.noti-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.noti-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.noti-tag {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 1px 6px;
  border-radius: 4px;
}
.noti-tag-order {
  background: #dbeafe;
  color: #1e40af;
}
.noti-tag-danger {
  background: #fee2e2;
  color: #991b1b;
}
.noti-tag-warning {
  background: #fef3c7;
  color: #92400e;
}
.noti-tag-purple {
  background: #ede9fe;
  color: #5b21b6;
}
.noti-tag-success {
  background: #d1fae5;
  color: #065f46;
}
.noti-time {
  font-size: 11px;
  color: #64748b;
  margin-left: auto;
}
.noti-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2563eb;
  flex-shrink: 0;
}
.noti-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
}
.noti-desc {
  font-size: 12px;
  color: #334155;
  line-height: 1.4;
  margin-top: 1px;
}
.noti-subdesc {
  font-size: 11px;
  color: #64748b;
  line-height: 1.35;
  margin-top: 2px;
}
.noti-card-arrow {
  display: flex;
  align-items: center;
  color: #94a3b8;
  flex-shrink: 0;
  align-self: center;
  padding-left: 2px;
}
.noti-card-arrow .ui-icon {
  width: 16px;
  height: 16px;
}

/* Empty State */
.noti-empty-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  text-align: center;
  gap: 8px;
}
.noti-empty-ico {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}
.noti-empty-ico .ui-icon {
  width: 22px;
  height: 22px;
}
.noti-empty-box strong {
  font-size: 13.5px;
  color: #334155;
}
.noti-empty-box p {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  max-width: 260px;
  line-height: 1.45;
}

/* ==========================================================================
   STAGE 2: POS HOOKS STYLES (Units, Wholesale Price Lists, Loyalty Points)
   Ultra-compact, mobile-first 390x844 optimized
   ========================================================================== */

/* Đơn vị quy đổi trên dòng giỏ hàng POS - Ultra Compact */
.cart-unit-selector {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
}
.unit-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border: 1px solid #cbd5e1 !important;
  background: #f8fafc !important;
  color: #475569 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
.unit-pill:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}
.unit-pill.active {
  background: var(--q-blue, #0284c7) !important;
  border-color: var(--q-blue, #0284c7) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.25) !important;
}

/* Badge chiết khấu bảng giá sỉ trên dòng giỏ hàng */
.cart-badge-pricelist {
  display: inline-flex !important;
  align-items: center !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  background: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  vertical-align: middle !important;
}

/* Single-row Zero-Waste Customer Perks & Loyalty Bar (Neutral Clean Theme - NO YELLOW) */
.checkout-loyalty-panel,
.checkout-cust-perks-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 5px 10px !important;
  margin: 3px 0 6px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  min-height: 38px !important;
  box-sizing: border-box !important;
}
.loyalty-perks-left {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 2px !important;
  min-width: 0 !important;
  flex: 1 !important;
}
.perk-badge-agent {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #0369a1 !important;
  background: #e0f2fe !important;
  padding: 2px 7px !important;
  border-radius: 5px !important;
  white-space: nowrap !important;
  line-height: 1.3 !important;
}
.perk-dot {
  color: #94a3b8 !important;
  font-weight: bold !important;
}
.perk-points-text {
  font-size: 11.5px !important;
  color: #334155 !important;
  white-space: nowrap !important;
}
.perk-points-text b {
  font-weight: 800 !important;
  color: #0f172a !important;
}
.loyalty-toggle-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #1d4ed8 !important;
  cursor: pointer !important;
  background: #eff6ff !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  border: 1px solid #bfdbfe !important;
  flex-shrink: 0 !important;
  user-select: none !important;
}
.loyalty-toggle-label input[type="checkbox"] {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  accent-color: #2563eb !important;
  cursor: pointer !important;
}

/* Cart customer chip perks styling */
.customer-chip-content {
  min-width: 0 !important;
  display: grid !important;
  gap: 1px !important;
  text-align: left !important;
}
.cust-chip-tags {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  margin-top: 1px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.chip-tag-agent {
  font-weight: 700 !important;
  color: #0369a1 !important;
  background: #e0f2fe !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  font-size: 10.5px !important;
}
.chip-tag-sep {
  color: #94a3b8 !important;
}
.chip-tag-points {
  color: #475569 !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}

/* ==========================================================================
   HYPER-COMPACT MOBILE POS LAYOUT (Viewport 390x844 Zero-Waste Optimization)
   ========================================================================== */

/* Cart Row Hyper-Compact: Zero wasted space */
.cart-row.no-img {
  display: block !important;
  padding: 4px 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
.cart-row.has-img {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 4px 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
.cart-row .pos-product-image {
  width: 36px !important;
  height: 36px !important;
  border-radius: 6px !important;
}
.cart-row-main {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.cart-row-title {
  margin-bottom: 1px !important;
}
.cart-item-name {
  font-size: 13px !important;
  line-height: 1.25 !important;
}
.cart-row-subline {
  margin: 0 0 2px !important;
  gap: 3px !important;
}
.cart-row-bottom {
  margin-top: 1px !important;
}
.cart-row-bottom .quantity-control {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  height: 24px !important;
  grid-template-columns: 22px 28px 22px !important;
}
.cart-row-bottom .quantity-control button {
  height: 22px !important;
  min-height: 22px !important;
  width: 22px !important;
  min-width: 22px !important;
  font-size: 13px !important;
}
.cart-row-bottom .quantity-control input {
  height: 22px !important;
  font-size: 12px !important;
}
.line-discount-trigger {
  min-height: 22px !important;
  height: 22px !important;
  font-size: 10.5px !important;
}
.cart-line-total {
  font-size: 13.5px !important;
}

/* Customer Chip Mini */
.customer-chip {
  min-height: 38px !important;
  height: auto !important;
  padding: 4px 10px !important;
  margin: 0 0 4px !important;
  border-radius: 8px !important;
}
.customer-chip small {
  font-size: 10px !important;
}
.customer-chip b,
.customer-chip span {
  font-size: 12.5px !important;
}

/* Order Discount Collapsible */
.order-discount-collapse {
  margin: 6px 0 !important;
  border: 1px dashed #cbd5e1 !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  overflow: hidden !important;
}
.order-discount-summary {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 8px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
}
.order-discount-summary .discount-val-hint {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #d97706 !important;
}
.order-discount-collapse .discount-box {
  margin-top: 0 !important;
  padding: 6px 8px !important;
}
.order-discount-collapse .discount-control input {
  min-height: 32px !important;
  height: 32px !important;
  font-size: 14px !important;
  padding: 4px 8px !important;
}
.order-discount-collapse .discount-control button {
  min-height: 32px !important;
  height: 32px !important;
  width: 32px !important;
  min-width: 32px !important;
  font-size: 13px !important;
}

/* Cart Totals Compact */
.cart-totals {
  margin-top: 6px !important;
  gap: 3px !important;
  padding-top: 6px !important;
  border-top: 1px dashed #e2e8f0 !important;
}
.cart-totals > div {
  font-size: 12.5px !important;
}
.cart-totals .grand {
  padding-top: 4px !important;
  font-size: 14px !important;
}
.cart-totals .grand b {
  font-size: 17px !important;
}
.flow-primary {
  min-height: 44px !important;
  height: 44px !important;
  margin-top: 8px !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  border-radius: 10px !important;
}

/* Checkout Screen Hyper-Compact */
.checkout-screen {
  padding: 10px 12px 70px !important;
}
.checkout-total {
  padding: 4px 0 !important;
  margin: 2px 0 6px !important;
}
.checkout-total span {
  font-size: 12px !important;
}
.checkout-total strong {
  font-size: 20px !important;
  line-height: 1.1 !important;
}
.checkout-more {
  margin: 6px 0 !important;
  border: 1px dashed #cbd5e1 !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  overflow: hidden !important;
}
.checkout-more summary {
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--q-blue, #0284c7) !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
}
.choice-section:has([data-payment-choice]) {
  gap: 5px !important;
  margin-top: 6px !important;
}
.choice-section:has([data-payment-choice]) h3 {
  font-size: 12.5px !important;
  margin-bottom: 4px !important;
}
.choice-section:has([data-payment-choice]) .choice-row {
  min-height: 34px !important;
  height: 34px !important;
  font-size: 12.5px !important;
  border-radius: 8px !important;
  padding: 0 4px !important;
}
.cash-panel {
  margin-top: 6px !important;
  gap: 4px !important;
}
.cash-panel input {
  min-height: 36px !important;
  height: 36px !important;
  font-size: 15px !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
}
.cash-quick-pills {
  gap: 4px !important;
  margin: 4px 0 !important;
}
.cash-quick-pills .cash-pill {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 6px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
}
/* --- Stage 4 Mobile Optimized Checkout & Extras (Zero-waste & Standout Total) --- */
.checkout-billing-card, .checkout-summary-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  margin: 3px 0 6px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.billing-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 13px !important;
  color: #475569 !important;
  padding: 1px 0 !important;
}
.billing-row span {
  font-weight: 500 !important;
}
.billing-row b {
  font-weight: 750 !important;
  color: #0f172a !important;
}

/* Direct Outside Order Discount Row */
.billing-discount-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 0 !important;
  border-top: 1px dashed #e2e8f0 !important;
  border-bottom: 1px dashed #e2e8f0 !important;
  margin: 2px 0 !important;
}
.discount-row-label {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1.5px !important;
  white-space: nowrap !important;
}
.discount-row-label .discount-title {
  font-weight: 750 !important;
  font-size: 13px !important;
  color: #0f172a !important;
  line-height: 1.2 !important;
}
.discount-sub-amount {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  line-height: 1.2 !important;
}
.discount-row-input-group {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.discount-row-input-group input {
  width: 112px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 7px !important;
  text-align: right !important;
  color: #1e293b !important;
  background: #ffffff !important;
  outline: none !important;
  transition: all 0.15s ease !important;
}
.discount-row-input-group input:focus {
  border-color: #64748b !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.15) !important;
}
.discount-row-input-group .discount-mode {
  height: 32px !important;
  min-height: 32px !important;
  min-width: 29px !important;
  width: 29px !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 7px !important;
  background: #f8fafc !important;
  color: #64748b !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
}
.discount-row-input-group .discount-mode.active {
  background: #f1f5f9 !important;
  border-color: #64748b !important;
  color: #0f172a !important;
  font-weight: 700 !important;
}


/* Grand Total Streamlined - Hien dai, can giua, khong khung chong khung, gia to noi bat */
.billing-grand-total {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding-top: 8px !important;
  margin-top: 6px !important;
  border-top: 1px dashed #cbd5e1 !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
.billing-grand-total .grand-total-label-row {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 2px !important;
  text-align: center !important;
}
.billing-grand-total span {
  font-size: 13.5px !important;
  font-weight: 750 !important;
  color: #64748b !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  text-align: center !important;
}
.billing-grand-total strong {
  font-size: 33px !important;
  font-weight: 950 !important;
  color: #0284c7 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  text-align: center !important;
  text-shadow: none !important;
}

/* Payment Methods Segmented (1 dong duy nhat, cam gay 2 dong) */
.choice-section.payment-methods-section {
  display: grid !important;
  grid-template-columns: 1fr 1.25fr 0.75fr 1fr !important;
  gap: 4px !important;
  margin: 5px 0 !important;
}
.choice-section.payment-methods-section h3 {
  grid-column: 1 / -1 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  color: #475569 !important;
  margin: 0 0 2px !important;
}
.choice-section.payment-methods-section .choice-row.payment-tab-btn {
  height: 38px !important;
  min-height: 38px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  padding: 0 2px !important;
  transition: all 0.15s ease !important;
}
.choice-section.payment-methods-section .choice-row.payment-tab-btn span {
  white-space: nowrap !important;
  word-break: keep-all !important;
  display: inline-block !important;
}
.choice-section.payment-methods-section .choice-row.payment-tab-btn.active {
  background: #f0f9ff !important;
  border-color: #0284c7 !important;
  color: #0369a1 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 0 1px #0284c7 !important;
}
.choice-section.payment-methods-section .choice-row.payment-tab-btn[data-payment-choice="cash"].active {
  background: #ecfdf5 !important;
  border-color: #059669 !important;
  color: #065f46 !important;
  box-shadow: 0 0 0 1px #059669 !important;
}
.choice-section.payment-methods-section .choice-row.payment-tab-btn[data-payment-choice="transfer"].active {
  background: #eff6ff !important;
  border-color: #2563eb !important;
  color: #1e40af !important;
  box-shadow: 0 0 0 1px #2563eb !important;
}
.choice-section.payment-methods-section .choice-row.payment-tab-btn[data-payment-choice="qr"].active {
  background: #f5f3ff !important;
  border-color: #7c3aed !important;
  color: #5b21b6 !important;
  box-shadow: 0 0 0 1px #7c3aed !important;
}
.choice-section.payment-methods-section .choice-row.payment-tab-btn[data-payment-choice="debt"].active {
  background: #fffbeb !important;
  border-color: #d97706 !important;
  color: #92400e !important;
  box-shadow: 0 0 0 1px #d97706 !important;
}
.choice-section.payment-methods-section .choice-row.payment-tab-btn i {
  display: none !important;
}

/* Debt Panel - Tinh gon 1 dong, khong lang phi dien tich */
.debt-panel {
  margin: 4px 0 5px !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  font-size: 12px !important;
}
.debt-info-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
}
.debt-tag {
  color: #92400e !important;
  font-weight: 600 !important;
}
.debt-limit {
  color: #b45309 !important;
  font-size: 11px !important;
}
.debt-warn-row {
  color: #b45309 !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

/* Service Technical Note in Cart */
.cart-row-note {
  font-size: 11px !important;
  color: #475569 !important;
  background: #f1f5f9 !important;
  padding: 2px 7px !important;
  border-radius: 5px !important;
  margin: 2px 0 !important;
  display: inline-block !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Cash Panel Compact */
.cash-panel {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 11px !important;
  padding: 8px 10px !important;
  margin: 6px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.cash-received-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
.cash-received-row label {
  font-size: 13px !important;
  font-weight: 750 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  margin: 0 !important;
}
.cash-received-row input {
  flex: 1 !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 10px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-align: right !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
}
.cash-quick-pills {
  display: flex !important;
  gap: 5px !important;
  overflow-x: auto !important;
  padding: 2px 0 !important;
  scrollbar-width: none !important;
}
.cash-pill {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 8px !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #334155 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.cash-pill.active,
.cash-pill-exact.active {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}
.cash-change-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  padding-top: 4px !important;
  border-top: 1px dashed #e2e8f0 !important;
}
.cash-change-row strong {
  font-size: 17px !important;
  font-weight: 900 !important;
  color: #16a34a !important;
}
.cash-change-row.cash-shortage-row strong {
  color: #ef4444 !important;
}
.cash-change-row.cash-shortage-row span {
  color: #dc2626 !important;
}
.btn-shortage-warn {
  background: #ea580c !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.25) !important;
}

/* Extras Trigger Button (Replaces Accordion with Modal) */
.checkout-extras-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 40px !important;
  padding: 6px 12px !important;
  margin: 5px 0 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #334155 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}
.checkout-extras-btn:hover {
  border-color: #94a3b8 !important;
  background: #f8fafc !important;
}
.extras-btn-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  min-width: 0 !important;
  flex: 1 !important;
}
.extras-btn-title {
  font-size: 12.5px !important;
  font-weight: 750 !important;
  color: #0f172a !important;
}
.extras-btn-sub {
  font-size: 11px !important;
  color: #64748b !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.extras-btn-sub.has-active-tag {
  color: #0284c7 !important;
  font-weight: 700 !important;
}
.extras-btn-caret {
  font-size: 16px !important;
  color: #94a3b8 !important;
  font-weight: 750 !important;
  margin-left: 8px !important;
}

/* Modal VAT Pills & Collapsible Sub-section */
.modal-vat-pill {
  border: 1.5px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #334155 !important;
  cursor: pointer !important;
  font-weight: 800 !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
}
.modal-vat-pill:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}
.modal-vat-pill.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 1px 4px rgba(2, 132, 199, 0.35) !important;
}
.extras-sub-accordion summary {
  list-style: none !important;
}
.extras-sub-accordion summary::-webkit-details-marker,
.extras-sub-accordion summary::marker {
  display: none !important;
  content: "" !important;
}
.extras-accordion-title {
  font-weight: 750 !important;
  font-size: 13px !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.extras-accordion-badge {
  font-size: 11.5px !important;
  color: #0284c7 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* RESPONSIVE HELPERS & MOBILE ULTRA-COMPACT */
@media (max-width: 639px) {
  .only-desktop { display: none !important; }
  .only-mobile { display: block !important; }
  .only-mobile-flex { display: flex !important; }
}
@media (min-width: 640px) {
  .only-mobile { display: none !important; }
  .only-mobile-flex { display: none !important; }
  .only-desktop { display: block !important; }
}

/* GOODS TOOLBAR SINGLE-LINE ULTRA-COMPACT */
.goods-title-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}
.goods-title-compact .secondary-btn.compact,
.goods-title-compact .primary-btn.compact {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 8px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  border-radius: 8px !important;
}
.goods-title-compact .secondary-btn.compact svg,
.goods-title-compact .primary-btn.compact svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  display: inline-block !important;
}

/* ACTION BUTTONS ROW-FLEX ALIGNMENT (PREVENT ICON/TEXT WRAPPING) */
.primary-btn, .secondary-btn, .ghost-btn, .danger-btn {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  line-height: 1.2 !important;
}
.primary-btn svg, .secondary-btn svg, .ghost-btn svg, .danger-btn svg,
.primary-btn .ui-icon, .secondary-btn .ui-icon, .ghost-btn .ui-icon, .danger-btn .ui-icon {
  display: inline-block !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

/* ORDERS TOOLBAR ACTIONS & WEB ORDER FULFILLMENT (MOBILE-FIRST ULTRA-COMPACT) */
.orders-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.orders-toolbar-actions button {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  font-weight: 600 !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
}
@media (max-width: 640px) {
  .orders-toolbar-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .orders-toolbar-actions button {
    width: 100% !important;
    min-height: 40px !important;
    padding: 0 4px !important;
    font-size: 12px !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
}
.warehouse-fulfillment-banner {
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Mobile Typography & Anti-Orphan Text Hardening */
@media (max-width: 640px) {
  .modal-head h3 {
    font-size: 16.5px !important;
    line-height: 1.25 !important;
    text-wrap: balance !important;
  }
  .modal-head p {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }
  .section-head h2 {
    font-size: 17px !important;
    line-height: 1.25 !important;
    text-wrap: balance !important;
  }
  .warehouse-fulfillment-banner strong {
    white-space: nowrap !important;
  }
}

/* Customer Detail & Inventory Report Mobile UX Hardening */
.contact-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  width: 100%;
}
.contact-actions-grid.three-col {
  grid-template-columns: repeat(3, 1fr);
}
.contact-actions-grid button,
.contact-actions-grid .primary-btn,
.contact-actions-grid .secondary-btn {
  margin-left: 0 !important;
  width: 100% !important;
  min-height: 36px !important;
  padding: 6px 4px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  justify-content: center !important;
  white-space: nowrap !important;
}
@media (max-width: 640px) {
  .report-center {
    padding-bottom: 88px !important;
  }
}

/* ==== DOCUMENTS CENTER (TRUNG TÂM CHỨNG TỪ - ULTRA COMPACT & MOBILE FIRST) ==== */
.doc-rule-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  padding: 6px 10px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #475569;
}
.doc-rule-box[open] {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.doc-rule-box summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-weight: 600;
  color: #334155;
  font-size: 12px;
  line-height: 1.2;
}
.doc-rule-box summary::-webkit-details-marker {
  display: none;
}
.doc-rule-title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.doc-rule-title .ui-icon {
  width: 14px;
  height: 14px;
  color: #2563eb;
}
.doc-rule-badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 5px;
  background: #e2e8f0;
  color: #475569;
  font-weight: 600;
}
.doc-rule-body {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #cbd5e1;
  font-size: 11.5px;
  line-height: 1.45;
  color: #475569;
}
.doc-rule-body div {
  margin: 2px 0;
}

/* Horizontal scrollable chips bar */
.doc-chips-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  white-space: nowrap;
  padding: 4px 0 8px;
  margin: 0 0 4px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.doc-chips-bar::-webkit-scrollbar {
  display: none;
}
.doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: 1px solid var(--q-line);
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.doc-chip:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.doc-chip.active {
  border-color: var(--q-blue);
  background: rgba(72, 124, 220, 0.12);
  color: var(--q-blue);
  font-weight: 700;
}
.doc-chip-count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 5px;
  border-radius: 999px;
  font-weight: 600;
}
.doc-chip.active .doc-chip-count {
  background: rgba(72, 124, 220, 0.2);
  color: var(--q-blue);
  font-weight: 700;
}

/* Range & Metric Bar */
.doc-control-bar {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.doc-select-box {
  position: relative;
  display: flex;
  align-items: center;
}
.doc-select-box select {
  width: 100%;
  height: 38px;
  padding: 0 22px 0 10px;
  border: 1px solid var(--q-line);
  border-radius: 9px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: var(--q-ink);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.doc-select-arrow {
  position: absolute;
  right: 8px;
  pointer-events: none;
  font-size: 10px;
  color: var(--q-muted);
}
.doc-metric-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  height: 38px;
  padding: 0 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
}
.doc-metric-label {
  font-size: 10.5px;
  color: var(--q-muted);
  white-space: nowrap;
  line-height: 1.1;
}
.doc-metric-value {
  font-size: 14.5px;
  font-weight: 750;
  color: #1e3a8a;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
}
.doc-metric-unit {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
}

/* Search */
.doc-search {
  margin-bottom: 8px !important;
}

/* Document List */
.doc-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--q-line);
  padding-bottom: 72px;
}
.doc-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 2px;
  border: none;
  border-bottom: 1px solid var(--q-line);
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.doc-card-row:active {
  background: #f8fafc;
}
.doc-row-left {
  flex: 1 1 auto;
  min-width: 0;
}
.doc-row-code {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--q-ink);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-row-sub {
  font-size: 11.5px;
  color: var(--q-muted);
  margin-top: 2px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-row-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.doc-row-values {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 75px;
}
.doc-row-amount {
  font-size: 13.5px;
  font-weight: 750;
  color: var(--q-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
}
.doc-row-status {
  display: flex;
  align-items: center;
}
.doc-row-status .surface-status {
  padding: 1px 7px;
  font-size: 10.5px;
  border-radius: 6px;
  font-weight: 650;
}
.doc-row-chevron {
  display: flex;
  align-items: center;
  color: #94a3b8;
  width: 14px;
  flex-shrink: 0;
}
.doc-row-chevron svg {
  width: 14px;
  height: 14px;
}

/* ==== PRINT CENTER (IN & THIẾT BỊ) TABS POLISH ==== */
.print-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px !important;
  margin-bottom: 12px !important;
  width: 100% !important;
}
.print-tabs button {
  min-height: 40px !important;
  padding: 0 4px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  justify-content: center !important;
  text-align: center !important;
}

/* ==== ACTION SHEET LIST (DỮ LIỆU & NGOẠI TUYẾN) POLISH ==== */
.action-sheet-list button {
  padding: 12px 6px !important;
}
.action-sheet-list button span {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  text-align: left !important;
  flex: 1 1 auto !important;
}
.action-sheet-list button b {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--q-ink, #0f172a) !important;
  line-height: 1.3 !important;
}
.action-sheet-list button small {
  font-size: 11.5px !important;
  color: var(--q-muted, #64748b) !important;
  line-height: 1.3 !important;
}
.action-sheet-list button .ui-icon {
  flex-shrink: 0 !important;
  margin-left: 8px !important;
  color: #94a3b8 !important;
}

/* ==== MOBILE SAFE AREA & SCROLL PADDING ==== */
@media (max-width: 640px) {
  .print-center,
  .feature-panel,
  .feature-hub,
  .more-screen,
  .channels-center {
    padding-bottom: 76px !important;
  }
  .install-top-banner {
    display: none !important;
  }
  /* Thẻ ca: 1 hàng — trái (quầy·thiết bị nhỏ trên, trạng thái dưới), phải (Mở ca + Sổ ca); không còn hàng trống. */
  .dsc-content {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .dsc-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    flex: 1;
    min-width: 0;
  }
  .dsc-reg-badge {
    max-width: 100%;
    overflow: hidden;
    font-size: 11.5px;
  }
  .dsc-reg-badge > b,
  .dsc-dev > span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dsc-right {
    flex-shrink: 0;
    gap: 2px;
  }
  .dash-shift-switch,
  .dsc-link-btn {
    white-space: nowrap;
  }
  /* Link đầu thẻ ("Xem kho", "Xem tất cả"): 1 dòng, mũi tên cùng hàng. */
  .section-head .link-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 6px 4px;
  }
  .section-head .link-btn .ui-icon {
    width: 14px;
    height: 14px;
  }
  /* Nút Trợ lý trên điện thoại: tròn, chỉ icon — bớt che link/nút ở mép phải khi cuộn. */
  .qbiz-ai-trigger {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    border-radius: 50%;
    gap: 0;
  }
  .qbiz-ai-trigger .ai-trigger-label {
    display: none;
  }
  /* Banner cài app bị ẩn trên điện thoại → header không được đẩy xuống 40px (đè thẻ doanh thu). */
  body:has(#firstVisitInstallBanner) .topbar {
    top: 0 !important;
  }
}

@media (max-width: 920px) {
  .toast-root {
    top: calc(14px + env(safe-area-inset-top)) !important;
    bottom: auto !important;
  }
}




/* Header Hàng hóa/Dịch vụ: nút Thêm là chính (rộng nhất), Nhập là phụ, chip chuyển loại + Kho cùng cỡ, thu gọn khoảng hở. */
.goods-toolbar{padding:8px 10px!important}
.goods-title.goods-title-compact{margin:0 0 6px!important;min-height:0!important;gap:6px!important;align-items:center!important;flex-wrap:nowrap!important}
.goods-title-compact .goods-stats{display:flex!important;align-items:baseline!important;gap:6px!important;margin:0!important;min-width:0}
.goods-title-compact .goods-stat-main{font-size:17px!important;line-height:1.15!important;white-space:nowrap}
.goods-title-compact .goods-stat-meta{display:inline!important}
.goods-title-actions{gap:5px!important}
.goods-mini-chip{display:inline-flex!important;align-items:center;gap:4px;height:26px;padding:0 9px;background:#f1f5f9;color:#334155;border:1px solid #d5dde8;border-radius:7px;font-size:11.5px;font-weight:700;white-space:nowrap;cursor:pointer}
.goods-mini-chip .ui-icon{width:13px;height:13px}
.goods-mini-chip:active{transform:scale(.97)}
.goods-action-bar{display:flex!important;align-items:center!important;flex-wrap:nowrap!important;gap:8px!important;margin:0!important;width:100%!important}
.goods-btn-add{flex:1 1 0%!important;min-width:0!important;width:100%!important;height:38px!important;min-height:38px!important;padding:0 12px!important;border-radius:11px!important;font-size:13.5px!important;font-weight:700!important;gap:6px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;box-shadow:none!important;white-space:nowrap!important}
.goods-btn-import{flex:0 0 auto!important;width:auto!important;height:38px!important;min-height:38px!important;padding:0 12px!important;border-radius:11px!important;font-size:12.5px!important;font-weight:600!important;gap:6px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;background:#f8fafc!important;color:#334155!important;border:1px solid #d5dde8!important;box-shadow:none!important;white-space:nowrap!important}
.goods-btn-add .ui-icon,.goods-btn-import .ui-icon{width:16px!important;height:16px!important}
.goods-toolbar .goods-tools{margin-top:6px!important}
@media(max-width:640px){.goods-search-sticky{margin-left:-8px!important;margin-right:-8px!important;padding-left:8px!important;padding-right:8px!important}}
.goods-title-compact .goods-mini-chip{height:26px!important;min-height:26px!important;max-height:26px!important;padding:0 9px!important;width:auto!important;min-width:0!important;line-height:1!important}
.goods-title-compact .goods-stats{flex-direction:row!important;flex-wrap:nowrap!important;align-items:baseline!important}
.goods-title-compact .goods-stats>*{display:inline!important;margin:0!important}
.goods-title-compact .goods-stat-sub{font-size:11.5px!important}

/* POS: nút + DV nhỏ gọn, nhẹ (v44) */
.pos-search-row { grid-template-columns: minmax(0, 1fr) 44px auto !important; gap: 6px !important; }
.pos-search-row button.pos-quick-service-btn {
  min-height: 44px !important; height: 44px !important; padding: 0 9px !important; gap: 3px !important;
  border: 1px solid #a7f3d0 !important; border-radius: 10px !important;
  background: #ecfdf5 !important; box-shadow: none !important; transform: none !important;
}
.pos-search-row button.pos-quick-service-btn span { color: #047857 !important; font-size: 12px !important; font-weight: 700 !important; }
.pos-search-row button.pos-quick-service-btn .ui-icon,
.pos-search-row button.pos-quick-service-btn svg { width: 14px !important; height: 14px !important; stroke: #047857 !important; color: #047857 !important; }

/* Chi tiết sản phẩm / dịch vụ: vẫn hiện nút Trợ lý AI, nằm trên thanh Đóng/Sửa để không che nút (v45) */
body:has(.modal-backdrop .product-detail) #qbizAiTrigger,
body:has(.modal-backdrop .product-detail) .qbiz-ai-trigger,
#modalRoot:not(:empty):has(.product-detail) ~ #qbizAiTrigger {
  display: flex !important;
  pointer-events: auto !important;
  bottom: calc(118px + env(safe-area-inset-bottom, 0px)) !important;
  right: 22px !important;
  z-index: 995 !important;
}

/* ==========================================================================
   POS VARIANT PILLS & DIRECT SALE INDICATORS (Mobile-First Ultra-Compact)
   ========================================================================== */
.pos-prod-variant-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 2px !important;
  margin: 1px 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.pos-variant-pill {
  display: inline-block !important;
  padding: 1.5px 5px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  background: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}
.pos-variant-pill.out {
  background: #fee2e2 !important;
  color: #dc2626 !important;
  border-color: #fecaca !important;
}
.pos-product.is-out-of-stock {
  opacity: 0.72 !important;
}
.pos-product.is-out-of-stock .pos-product-image {
  filter: grayscale(0.25) !important;
}
.cart-variant-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 4px !important;
  border-radius: 3px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  background: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
}
.sku-copyable {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  cursor: pointer !important;
  padding: 0 4px !important;
  border-radius: 4px !important;
  transition: background 0.15s ease !important;
}
.sku-copyable:hover {
  background: #e0f2fe !important;
  color: #0369a1 !important;
}
.sku-copy-btn {
  display: inline-flex !important;
  align-items: center !important;
  opacity: 0.75 !important;
}
.sku-copy-btn svg {
  width: 12px !important;
  height: 12px !important;
}


/* Blind Shift Close & Denomination Table (Mobile-First 390x844) */
.blind-shift-container .denom-row:hover {
  background: rgba(0, 0, 0, 0.02);
}
.blind-shift-container .denom-input:focus {
  border-color: #1a73e8 !important;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2) !important;
  outline: none !important;
}

/* ==========================================================================
   HÀNG HÓA (#products): Đảo [Sản phẩm | Dịch vụ] lên trên [+ Thêm hàng hóa | Nhập]
   KHO HÀNG (#transfers): Khung 7 ô duy nhất (Nhập, Xuất, Chuyển, Kiểm, Quản lý, Tồn kho, Lịch sử)
   ========================================================================== */
.goods-toolbar .goods-segments {
  margin-top: 2px !important;
  margin-bottom: 6px !important;
}
.goods-toolbar .goods-action-bar {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.warehouse-actions.warehouse-operation-grid button:nth-child(6) {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border-color: #a7f3d0 !important;
}
.warehouse-actions.warehouse-operation-grid button:nth-child(7) {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border-color: #fde68a !important;
}
.warehouse-actions.warehouse-operation-grid button.is-active {
  box-shadow: 0 0 0 2px #0f766e, 0 4px 10px rgba(15, 118, 110, 0.16) !important;
  transform: translateY(-1px);
}
@media (min-width: 921px) {
  .warehouse-actions.warehouse-operation-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ==========================================================================
   BIẾN THỂ / SIZE / QUY CÁCH LIÊN HOÀN (POS #sales · Hàng hóa #products · Kho #transfers)
   Chuẩn Mobile-First Ultra-Compact 390x844
   ========================================================================== */
.pos-variant-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3.5px !important;
  margin: 2px 0 4px !important;
  width: 100% !important;
}
.pos-variant-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 2px 6px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  border-radius: 6px !important;
  background: #f8fafc !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.12s ease !important;
  white-space: nowrap !important;
}
.pos-variant-pill-btn:hover {
  border-color: #0284c7 !important;
  color: #0284c7 !important;
}
.pos-variant-pill-btn.active {
  background: #fffbeb !important;
  color: #b45309 !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25) !important;
}
.pos-variant-pill-btn.in-cart {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border-color: #60a5fa !important;
}
.pos-variant-pill-btn.active.in-cart {
  background: #dbeafe !important;
  color: #1e40af !important;
  border-color: #2563eb !important;
}
.pos-variant-pill-btn.out {
  opacity: 0.48 !important;
  text-decoration: line-through !important;
}
.pos-variant-pill-btn .pill-qty {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  background: #2563eb !important;
  border-radius: 4px !important;
  padding: 0 3.5px !important;
  margin-left: 1px !important;
  line-height: 1.3 !important;
}

.prod-variant-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3.5px !important;
  margin-top: 2.5px !important;
  margin-bottom: 2px !important;
}
.prod-v-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 0.5px 5px !important;
  font-size: 9.5px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  height: 18.5px !important;
  box-sizing: border-box !important;
  border-radius: 4px !important;
  background: #fbfbfc !important;
  color: #78350f !important;
  border: 1px solid rgba(217, 119, 6, 0.2) !important;
  white-space: nowrap !important;
}
.prod-v-chip b {
  font-weight: 700 !important;
  color: #b45309 !important;
  font-size: 9.5px !important;
}
.prod-v-chip.out {
  background: #fef8f8 !important;
  color: #991b1b !important;
  border-color: rgba(220, 38, 38, 0.2) !important;
}

/* ===== Desktop: gộp toolbar hàng hóa gọn như web (tìm kiếm + bộ lọc cùng 1 hàng) ===== */
.goods-head{display:contents}
@media(min-width:921px){
  .goods-head{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;column-gap:10px;row-gap:10px;align-items:center;background:#fff;border:1px solid #e3e9f1;border-radius:14px;padding:12px 14px;margin-bottom:12px}
  .goods-head>.goods-toolbar{display:contents}
  .goods-head .goods-title{grid-column:1;grid-row:1;margin:0!important}
  .goods-head .goods-segments{grid-column:2;grid-row:1;margin:0!important;min-width:220px}
  .goods-head .goods-action-bar{grid-column:4;grid-row:1;display:flex!important;gap:8px!important;margin:0!important}
  .goods-head .goods-btn-add{width:auto!important;height:38px!important;min-height:38px!important;padding:0 16px!important;font-size:13.5px!important}
  .goods-head .goods-btn-import{width:auto!important;height:38px!important;min-height:38px!important;padding:0 14px!important}
  .goods-head .goods-search-sticky{grid-column:1 / span 3;grid-row:2;position:static;margin:0!important;padding:0!important;background:none!important;backdrop-filter:none;border:0!important;box-shadow:none!important}
  .goods-head .goods-tools{grid-column:4;grid-row:2;display:flex!important;gap:8px;margin:0!important;justify-content:flex-start;grid-template-columns:none!important}
  .goods-head .goods-tools>button{width:auto!important;min-width:0;height:40px;padding:0 14px!important;white-space:nowrap}
  .goods-head .selection-bar{grid-column:1 / -1;grid-row:3;max-width:none}
}
.toast.toast-long{white-space:normal;text-overflow:clip;border-radius:12px;max-width:min(360px,calc(100vw - 32px));padding:7px 14px;line-height:1.35;text-align:left}
/* Tab Sản phẩm/Dịch vụ: full ngang, đứng đầu toolbar, cùng kiểu AdminTabSwitch của web */
.goods-toolbar .goods-segments{display:grid!important;grid-template-columns:1fr 1fr!important;gap:4px!important;width:100%!important;margin:0 0 2px!important;padding:4px!important;background:#fff!important;border:1px solid #d5dde8!important;border-radius:12px!important}
.goods-toolbar .goods-segments button{min-height:40px!important;border-radius:8px!important;background:transparent!important;color:#64748b!important;font-size:14px!important;font-weight:500!important;box-shadow:none!important}
.goods-toolbar .goods-segments button.active{background:#eef2f7!important;color:#0f172a!important;font-weight:700!important}

/* ==========================================================================
   KHO HÀNG (#transfers):
   1. Lưới 6 ô gọn gàng (bỏ ô Lịch sử lẻ hàng thứ 7): 3x2 trên mobile, 6x1 trên desktop
   2. Thẻ Đang chuyển (.transfer-card): Xếp tầng dọc trên mobile, tên 1 dòng + 2 nút ngang cân đối
   3. Lịch sử kho ở cuối (.wh-history-section): 5 mới nhất -> Mở rộng 20 -> Toàn bộ + Lọc Ngày/Giờ
   ========================================================================== */
@media (max-width: 920px) {
  .warehouse-actions.warehouse-operation-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 921px) {
  .warehouse-actions.warehouse-operation-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

.transfer-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 10px 0 !important;
  border-top: 1px solid var(--line) !important;
}
.transfer-card:first-of-type {
  border-top: 0 !important;
  padding-top: 4px !important;
}
.transfer-top {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}
.transfer-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.transfer-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
}
.transfer-title {
  font-weight: 700 !important;
  font-size: 13.5px !important;
  line-height: 1.3 !important;
  color: var(--ink) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
.transfer-badge {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
}
.transfer-meta {
  font-size: 12px !important;
  color: var(--muted) !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.transfer-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  width: 100% !important;
}
.transfer-actions button {
  width: 100% !important;
  min-height: 34px !important;
  padding: 5px 10px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
}
.transfer-actions .transfer-cancel-btn,
.transfer-actions .transfer-btn-cancel {
  color: #b91c1c !important;
  border-color: #fecaca !important;
  background: #fff5f5 !important;
}

.wh-history-section {
  margin-top: 8px !important;
  margin-bottom: 72px !important;
  padding: 10px 12px !important;
}
.wh-history-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 6px !important;
}
.wh-history-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}
.wh-history-head h3 {
  font-size: 14px !important;
  font-weight: 800 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
.wh-history-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 1.5px 7px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}
.wh-history-sub {
  font-size: 11.5px !important;
  color: var(--muted) !important;
}
.wh-history-filter-toggle,
.wh-filter-toggle {
  padding: 5px 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  min-height: 32px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.wh-history-filter-toggle.active,
.wh-filter-toggle.active {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border-color: #93c5fd !important;
}
.wh-history-filter-panel {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 8px !important;
  margin-bottom: 8px !important;
  display: none !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.wh-history-filter-panel.is-open {
  display: flex !important;
}
.wh-filter-search-row {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
}
.wh-filter-search-row input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 10px !important;
  font-size: 12.5px !important;
  border-radius: 8px !important;
  border: 1px solid #cbd5e1 !important;
  background: #fff !important;
}
.wh-filter-clear-btn,
#btnWhHistoryClear {
  height: 34px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  border-radius: 8px !important;
}
.wh-filter-datetime-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}
.wh-filter-field,
.wh-filter-datetime-grid label {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}
.wh-filter-field span,
.wh-filter-datetime-grid label span {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #475569 !important;
}
.wh-filter-field input,
.wh-filter-datetime-grid label input {
  width: 100% !important;
  height: 32px !important;
  padding: 0 6px !important;
  font-size: 12px !important;
  border-radius: 7px !important;
  border: 1px solid #cbd5e1 !important;
  background: #fff !important;
}
.wh-history-section .warehouse-history .feed-row {
  padding: 7px 0 !important;
  gap: 8px !important;
  align-items: center !important;
}
.wh-history-section .warehouse-history .feed-content {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
.wh-history-section .warehouse-history .feed-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.wh-history-section .warehouse-history .feed-meta {
  font-size: 11.5px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.wh-history-foot {
  margin-top: 8px !important;
  padding-top: 6px !important;
  border-top: 1px dashed #e2e8f0 !important;
}
.wh-history-foot > button {
  width: 100% !important;
}
.wh-history-foot-dual {
  display: grid !important;
  grid-template-columns: 1.45fr 1fr !important;
  gap: 6px !important;
}
.wh-history-expand-btn,
.wh-expand-btn,
.wh-collapse-btn {
  width: 100% !important;
  min-height: 34px !important;
  padding: 5px 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
}
@media (max-width: 640px) {
  .warehouse-search .warehouse-tools {
    display: grid !important;
    grid-template-columns: 1fr 1.38fr 0.88fr !important;
    gap: 5px !important;
    width: 100% !important;
  }
  .warehouse-search .warehouse-tools select {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 4px !important;
    font-size: 11.5px !important;
    height: 34px !important;
  }
}

/* ===== ANTI-EXPLOSION & ULTRA-COMPACT STOCK ROW & VARIANT CHIPS ===== */
.stock-row {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 68px 74px auto !important;
  align-items: center !important;
  row-gap: 3px !important;
  column-gap: 8px !important;
  padding: 8px 4px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--q-line) !important;
  background: #fff !important;
  text-align: left !important;
  cursor: pointer !important;
}
.stock-row-main,
.stock-row > span {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  overflow: hidden !important;
}
.stock-row-name,
.stock-row-main strong,
.stock-row > span strong {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--q-ink) !important;
  line-height: 1.25 !important;
}
.stock-row-sku,
.stock-row-main small,
.stock-row > span small {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  color: var(--q-muted) !important;
}
.stock-stat,
.stock-row > div:not(.stock-row-main):not(.product-photo):not(.stock-row-variants) {
  text-align: right !important;
}
.stock-stat b,
.stock-row > div:not(.stock-row-main):not(.product-photo):not(.stock-row-variants) b {
  display: block !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--q-ink) !important;
  line-height: 1.15 !important;
}
.stock-stat small,
.stock-row > div:not(.stock-row-main):not(.product-photo):not(.stock-row-variants) small {
  display: block !important;
  font-size: 10.5px !important;
  color: var(--q-muted) !important;
  margin-top: 1px !important;
}
.stock-badge,
.stock-row em {
  padding: 3px 6px !important;
  border-radius: 6px !important;
  background: #fff1e5 !important;
  color: #a45b00 !important;
  font-style: normal !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}
.stock-row-variants {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 2px 0 1px 0 !important;
  margin-top: 1px !important;
  display: block !important;
}
.stock-row-variants::-webkit-scrollbar {
  display: none !important;
}
.stock-row-variants .prod-variant-chips {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 3.5px !important;
  width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
}
.stock-row-variants .prod-v-chip {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  font-size: 9.5px !important;
  padding: 0.5px 5px !important;
  height: 18.5px !important;
  box-sizing: border-box !important;
  border-radius: 4px !important;
  background: #fbfbfc !important;
  color: #78350f !important;
  border: 1px solid rgba(217, 119, 6, 0.2) !important;
}
.stock-row-variants .prod-v-chip b {
  font-weight: 700 !important;
  color: #b45309 !important;
  font-size: 9.5px !important;
}
.goods-row .prod-variant-chips,
.product-card .prod-variant-chips {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  max-width: 100% !important;
  gap: 3.5px !important;
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}
.goods-row .prod-variant-chips::-webkit-scrollbar,
.product-card .prod-variant-chips::-webkit-scrollbar {
  display: none !important;
}
.goods-row .prod-v-chip,
.product-card .prod-v-chip {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  font-size: 9.5px !important;
  padding: 0.5px 5px !important;
  height: 18.5px !important;
  box-sizing: border-box !important;
  border-radius: 4px !important;
  background: #fbfbfc !important;
  color: #78350f !important;
  border: 1px solid rgba(217, 119, 6, 0.2) !important;
}
.goods-row .prod-v-chip b,
.product-card .prod-v-chip b {
  font-weight: 700 !important;
  color: #b45309 !important;
  font-size: 9.5px !important;
}
@media (max-width: 640px) {
  .stock-row {
    grid-template-columns: 42px minmax(0, 1fr) 50px 56px !important;
    padding: 7px 2px !important;
    gap: 5px !important;
    row-gap: 3px !important;
  }
  .stock-row .product-photo.tiny {
    width: 42px !important;
    height: 42px !important;
    border-radius: 8px !important;
  }
  .stock-row .stock-badge,
  .stock-row em {
    grid-column: 2 / -1 !important;
    justify-self: start !important;
    margin-top: 1px !important;
  }
}


/* ==========================================================================
   v63: TỐI ƯU HIỂN THỊ & BỐ CỤC PC / TABLET / MOBILE
   - Nút Sửa trực tiếp trên hàng sản phẩm PC/Tablet (.goods-row-edit-btn)
   - Nút Sửa trên Modal chi tiết sản phẩm (.btn-mini-edit & lưới 5 ô .detail-actions)
   - Giỏ hàng Desktop: hiển thị rõ tên và thẻ biến thể không bị cắt cụt (.pdc-name, .pdc-variant-row)
   - Neo vị trí nút Trợ lý AI trên Desktop POS không che giỏ hàng
   ========================================================================== */

/* 1. Nút Sửa nhỏ cạnh tiêu đề Modal chi tiết sản phẩm */
.btn-mini-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  margin-left: 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  cursor: pointer;
  vertical-align: middle;
  transition: all 0.15s ease;
}
.btn-mini-edit:hover {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1d4ed8;
}
.btn-mini-edit .ui-icon {
  width: 13px;
  height: 13px;
}

/* 2. Nút Sửa trực tiếp trên bảng Hàng hóa PC & Tablet */
.goods-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  flex-shrink: 0;
}
.goods-row-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 32px;
  padding: 0 11px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.goods-row-edit-btn:hover {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1d4ed8;
  transform: translateY(-1px);
}
.goods-row-edit-btn:active {
  transform: translateY(0);
}
.goods-row-edit-btn .ui-icon {
  width: 14px;
  height: 14px;
}
@media (max-width: 640px) {
  .goods-row-edit-btn {
    height: 28px;
    padding: 0 7px;
    font-size: 11.5px;
    border-radius: 7px;
  }
}

/* 3. Modal chi tiết sản phẩm: Lưới 5 ô hành động nhanh cân đối */
.product-detail + .detail-actions {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 12px 0 !important;
}
@media (max-width: 480px) {
  .product-detail + .detail-actions {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  .product-detail + .detail-actions .quick-tile {
    padding: 8px 2px !important;
  }
  .product-detail + .detail-actions .quick-tile strong {
    font-size: 11px !important;
  }
}

/* 4. Giỏ hàng POS trên Desktop: Bố cục 3 tầng chuyên nghiệp, rộng rãi, chống co ép */
.pos-order-lines-box {
  max-height: calc(100vh - 350px) !important;
}
.pos-desktop-cart-list {
  display: grid !important;
  gap: 8px !important;
}
.pos-desktop-cart-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}
.pos-desktop-cart-row:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

/* Hàng 1: Tiêu đề sản phẩm trọn vẹn bề ngang + Nút xóa gọn ở góc phải */
.pdc-top-line {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
}
.pdc-top-line .pdc-name {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  white-space: normal !important;
}
.pdc-top-line .pdc-del {
  flex: 0 0 26px !important;
  width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  border: 0 !important;
  background: transparent !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  padding: 0 !important;
  border-radius: 6px !important;
  display: grid !important;
  place-items: center !important;
  transition: all 0.15s ease !important;
  margin-top: -2px !important;
}
.pdc-top-line .pdc-del:hover {
  color: #ef4444 !important;
  background: #fee2e2 !important;
}
.pdc-top-line .pdc-del .ui-icon {
  width: 15px !important;
  height: 15px !important;
}

/* Hàng 2: Thẻ biến thể (Size/Màu) và Mã SKU/Đơn giá */
.pdc-meta-line {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  width: 100% !important;
}
.pdc-meta-line .cart-variant-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: #fffbeb !important;
  color: #b45309 !important;
  padding: 2px 7px !important;
  border-radius: 5px !important;
  border: 1px solid #fde68a !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}
.pdc-meta-line .pdc-meta {
  font-size: 11.5px !important;
  color: #64748b !important;
}

/* Hàng 3: Cụm điều chỉnh số lượng bên trái, Thành tiền bên phải */
.pdc-bottom-line {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 6px !important;
  border-top: 1px dashed #e2e8f0 !important;
  width: 100% !important;
}
.pdc-bottom-line .quantity-control.compact {
  display: grid !important;
  grid-template-columns: 28px 40px 28px !important;
  gap: 3px !important;
  align-items: center !important;
  height: 28px !important;
  min-height: 28px !important;
}
.pdc-bottom-line .quantity-control.compact button {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #334155 !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  transition: all 0.12s ease !important;
}
.pdc-bottom-line .quantity-control.compact button:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}
.pdc-bottom-line .quantity-control.compact input {
  width: 40px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  color: #0f172a !important;
  line-height: 26px !important;
}
.pdc-bottom-line .pdc-total {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: var(--q-blue-dark, #0868c6) !important;
  white-space: nowrap !important;
  letter-spacing: -0.2px !important;
}

/* 5. Bảo vệ Trợ lý AI trên Desktop POS không che khuất giỏ hàng */
@media (min-width: 921px) {
  body:has(.pos-order-col) #qbizAiTrigger {
    right: calc(480px + 36px) !important;
    bottom: 20px !important;
  }
}

/* ==========================================================================
   KHÓA CỨNG: BẢO TOÀN TUYỆT ĐỐI GIAO DIỆN MOBILE ĐÃ FIX
   CẤM MỌI HÌNH THỨC SỬA ĐỔI HOẶC BỔ SUNG NÚT TRÊN MOBILE
   ========================================================================== */
@media (max-width: 768px) {
  .goods-row-edit-btn {
    display: none !important;
  }
  .btn-mini-edit {
    display: none !important;
  }
  .detail-actions .quick-tile[data-kind="edit"] {
    display: none !important;
  }
  .product-detail + .detail-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ==========================================================================
   LƯỚI BÁN HÀNG POS & CHẾ ĐỘ DANH SÁCH TRÊN PC (DESKTOP min-width 1024px)
   - Khung thanh toán mở rộng 430px
   - Lưới sản phẩm 4 cột thoáng đãng, mỗi thẻ rộng ~226px
   - Hỗ trợ Chế độ Danh sách (List view) ảnh nhỏ chuyên nghiệp
   - BẢO TOÀN TUYỆT ĐỐI GIAO DIỆN MOBILE ĐÃ FIX
   ========================================================================== */

/* Nút chuyển đổi kiểu hiển thị Lưới ↔ Danh sách trên PC: Nằm chung 1 hàng với thanh tìm kiếm */
@media (min-width: 921px) {
  .pos-search-row {
    grid-template-columns: minmax(0, 1fr) 44px auto auto !important;
    gap: 8px !important;
    align-items: center !important;
  }
}
.pos-view-mode-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  background: #f1f5f9 !important;
  padding: 3px !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  margin: 0 !important;
  height: 44px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}
.pos-view-mode-toggle .pvm-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: 36px !important;
  padding: 0 11px !important;
  border-radius: 7px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.pos-view-mode-toggle .pvm-btn:hover {
  color: #0f172a !important;
}
.pos-view-mode-toggle .pvm-btn.active {
  background: #ffffff !important;
  color: var(--q-blue-dark, #0868c6) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}
.pos-view-mode-toggle .pvm-btn .ui-icon {
  width: 14px !important;
  height: 14px !important;
}
@media (max-width: 920px) {
  .pos-view-mode-toggle {
    display: none !important;
  }
}

/* --- 1. CHẾ ĐỘ LƯỚI (GRID VIEW) TRÊN PC --- */
@media (min-width: 1024px) {
  /* Lưới 4 cột trên PC tiêu chuẩn (1024px - 1599px) - Thẻ sản phẩm rộng rãi ~226px */
  .pos-grid:not(.list),
  .pos-grid.grid3:not(.list),
  .pos-grid.grid2:not(.list) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .pos-grid:not(.list) .pos-product {
    min-height: 0 !important;
    border-radius: 14px !important;
    border: 1px solid #dce4ee !important;
    background: #ffffff !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
  }
  .pos-grid:not(.list) .pos-product:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important;
    border-color: #cbd5e1 !important;
  }
  .pos-grid:not(.list) .pos-product .pos-product-main {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 8px 8px 10px 8px !important;
    position: relative !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  /* Ảnh sản phẩm: Cao 130px, rõ nét, không bị dẹt */
  .pos-grid:not(.list) .pos-product .pos-product-image {
    width: 100% !important;
    height: 130px !important;
    max-height: 130px !important;
    aspect-ratio: auto !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
    overflow: hidden !important;
    position: relative !important;
    background: #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .pos-grid:not(.list) .pos-product .pos-product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .pos-grid:not(.list) .pos-prod-details {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  .pos-grid:not(.list) .pos-product .pos-prod-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.32 !important;
    margin-bottom: 3px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 34px !important;
    height: 34px !important;
    color: #0f172a !important;
  }

  .pos-grid:not(.list) .pos-product .pos-prod-variant-row {
    margin-bottom: 3px !important;
    min-height: 20px !important;
    display: flex !important;
    align-items: center !important;
  }
  .pos-grid:not(.list) .pos-product .pos-prod-variant-row .pos-variant-pill {
    font-size: 11px !important;
    padding: 1.5px 6px !important;
    border-radius: 5px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }

  .pos-grid:not(.list) .pos-product .pos-prod-sku {
    font-size: 10.5px !important;
    color: #64748b !important;
    margin-bottom: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .pos-grid:not(.list) .pos-product .pos-prod-price-row {
    display: flex !important;
    align-items: baseline !important;
    margin-top: auto !important;
    padding-right: 36px !important;
    min-height: 26px !important;
  }
  .pos-grid:not(.list) .pos-product.has-qty .pos-prod-price-row {
    padding-right: 88px !important;
  }
  .pos-grid:not(.list) .pos-product .pos-prod-price {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: var(--q-blue-dark, #0868c6) !important;
    white-space: nowrap !important;
    letter-spacing: -0.2px !important;
  }

  .pos-grid:not(.list) .pos-product .pos-add {
    position: absolute !important;
    right: 8px !important;
    bottom: 8px !important;
    width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    border-radius: 8px !important;
    background: var(--q-blue, #0284c7) !important;
    color: #ffffff !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
  }
  .pos-grid:not(.list) .pos-product .pos-add:hover {
    background: #0369a1 !important;
    transform: scale(1.05) !important;
  }

  .pos-grid:not(.list) .pos-product .pos-inline-qty {
    position: absolute !important;
    right: 8px !important;
    bottom: 8px !important;
    width: 82px !important;
    height: 28px !important;
    min-height: 28px !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 8px !important;
    background: #f0f7ff !important;
    display: grid !important;
    grid-template-columns: 26px 1fr 26px !important;
    align-items: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .pos-grid:not(.list) .pos-product .pos-inline-qty button {
    height: 100% !important;
    min-height: 26px !important;
    border: 0 !important;
    background: #e0eeff !important;
    color: var(--q-blue-dark, #0868c6) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
    padding: 0 !important;
  }
  .pos-grid:not(.list) .pos-product .pos-inline-qty button:hover {
    background: #cfe0f4 !important;
  }
  .pos-grid:not(.list) .pos-product .pos-inline-qty input,
  .pos-grid:not(.list) .pos-product .pos-inline-qty-input {
    width: 100% !important;
    height: 100% !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* Màn hình siêu rộng (Full HD ≥ 1600px): Mở rộng 5 cột */
@media (min-width: 1600px) {
  .pos-grid:not(.list),
  .pos-grid.grid3:not(.list),
  .pos-grid.grid2:not(.list) {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  .pos-grid:not(.list) .pos-product .pos-product-image {
    height: 140px !important;
    max-height: 140px !important;
  }
}

/* --- 2. CHẾ ĐỘ DANH SÁCH (LIST VIEW ẢNH NHỎ) TRÊN DESKTOP PC --- */
/* --- 2. CHẾ ĐỘ DANH SÁCH (LIST VIEW ẢNH NHỎ) TRÊN DESKTOP PC --- */
@media (min-width: 921px) {
  .pos-grid.list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .pos-grid.list .pos-product {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 8px 14px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    min-height: 72px !important;
    transition: all 0.15s ease !important;
  }
  .pos-grid.list .pos-product:hover {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
  }
  .pos-grid.list .pos-product .pos-product-main {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) auto !important;
    grid-template-rows: auto !important;
    column-gap: 16px !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    padding: 0 140px 0 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
    cursor: pointer !important;
    min-height: 0 !important;
  }
  .pos-grid.list .pos-product .pos-product-image {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    position: relative !important;
    background: #f1f5f9 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .pos-grid.list .pos-product .pos-product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .pos-grid.list .pos-prod-details {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .pos-grid.list .pos-product .pos-prod-title {
    grid-column: auto !important;
    grid-row: auto !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
  }
  .pos-grid.list .pos-product .pos-prod-variant-row {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    min-height: 0 !important;
  }
  .pos-grid.list .pos-product .pos-prod-variant-row .pos-variant-pill {
    font-size: 11px !important;
    padding: 1.5px 6px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
  }
  .pos-grid.list .pos-product .pos-prod-sku {
    grid-column: auto !important;
    grid-row: auto !important;
    font-size: 11px !important;
    color: #64748b !important;
    margin: 0 !important;
    display: inline-block !important;
  }
  .pos-grid.list .pos-product .pos-prod-price-row {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    min-height: 0 !important;
    white-space: nowrap !important;
  }
  .pos-grid.list .pos-product .pos-prod-price {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--q-blue-dark, #0868c6) !important;
    white-space: nowrap !important;
  }
  .pos-grid.list .pos-product .pos-add {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    right: 14px !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 10px !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    display: grid !important;
    place-items: center !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
  }
  .pos-grid.list .pos-product .pos-add:hover {
    background: #0274b3 !important;
    transform: translateY(-50%) scale(1.05) !important;
  }
  .pos-grid.list .pos-product .pos-inline-qty {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    right: 14px !important;
    width: 110px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 10px !important;
    border: 1.5px solid #93c5fd !important;
    background: #eff6ff !important;
    display: grid !important;
    grid-template-columns: 32px 1fr 32px !important;
    align-items: center !important;
    overflow: hidden !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.1) !important;
  }
  .pos-grid.list .pos-product .pos-inline-qty button {
    height: 100% !important;
    min-height: 36px !important;
    border: 0 !important;
    background: #dbeafe !important;
    color: var(--q-blue-dark, #0868c6) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: background 0.15s ease !important;
  }
  .pos-grid.list .pos-product .pos-inline-qty button:hover {
    background: #bfdbfe !important;
    color: #1d4ed8 !important;
  }
  .pos-grid.list .pos-product .pos-inline-qty input,
  .pos-grid.list .pos-product .pos-inline-qty-input {
    width: 100% !important;
    height: 100% !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* ==========================================================================
   PC DESKTOP SPECIALIZED UX & REFINEMENTS (@media min-width: 921px)
   Chuyên biệt cho PC: Chuông báo & Topbar luôn dính đỉnh, Nút Back, Logo click
   ========================================================================== */
@media (min-width: 921px) {
  /* 1. Thanh đỉnh (Topbar) & Chuông thông báo LUÔN DÍNH CỐ ĐỊNH Ở ĐỈNH TRÊN PC */
  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
    transform: none !important;
    transition: none !important;
  }
  body.topbar-hidden .topbar {
    transform: none !important;
  }
  body.topbar-hidden .install-subtle-tip {
    transform: none !important;
  }

  /* 2. Logo QBiz Kho ở Sidebar PC: Bấm vào quay về Tổng quan (Dashboard) */
  .brand {
    cursor: pointer !important;
    user-select: none !important;
    border-radius: 14px !important;
    padding: 8px 10px 16px !important;
    transition: background 0.16s ease, transform 0.16s ease !important;
  }
  .brand:hover {
    background: #f1f5f9 !important;
  }
  .brand:active {
    transform: scale(0.98) !important;
  }

  /* 3. Nút Quay lại (Back button) trên Topbar Desktop cho các trang con */
  .topbar-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  .pc-back-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    color: #1e3a5f !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }
  .pc-back-btn:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
    transform: translateX(-2px) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  }
  .pc-back-btn:active {
    transform: translateX(-3px) scale(0.97) !important;
  }
  .pc-back-btn .ui-icon {
    width: 17px !important;
    height: 17px !important;
  }
  /* Trên trang Tổng quan (Dashboard): Nút Back tự động ẩn vì đã ở trang chủ */
  body[data-app-page="dashboard"] .pc-back-btn {
    display: none !important;
  }

  /* 4. Thanh cuộn (Custom Scrollbar) thanh lịch cho Desktop PC */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }

  /* 5. Phản hồi hover cho các nút trên Topbar PC */
  .header-bell:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
  }
  .header-shortcut:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
  }
  .user-badge-btn:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  }

  /* 6. Kho hàng trên PC: Thanh tìm kiếm & bộ lọc nằm trên 1 hàng ngang cân đối */
  .warehouse-search {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
  }
  .warehouse-search > input {
    margin-bottom: 0 !important;
    flex: 1 1 auto !important;
  }
  .warehouse-tools {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
    flex: 0 0 auto !important;
  }
  .warehouse-tools select {
    min-width: 140px !important;
    height: 46px !important;
  }
  /* Phân bổ hàng tồn kho PC: 5 cột hàng 1 (Ảnh | Tên & SKU | Tồn thực | Có thể bán | Badge) & Hàng 2 căn lề cùng Tên */
  .stock-row {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 90px 100px auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    transition: background 0.14s ease !important;
  }
  .stock-row:hover {
    background: #f8fafc !important;
  }
  .stock-row .product-photo.tiny {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 48px !important;
    height: 48px !important;
  }
  .stock-row-main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    text-align: left !important;
    align-items: flex-start !important;
  }
  .stock-row .stock-stat.on-hand {
    grid-column: 3 !important;
    grid-row: 1 !important;
    text-align: right !important;
  }
  .stock-row .stock-stat.available {
    grid-column: 4 !important;
    grid-row: 1 !important;
    text-align: right !important;
  }
  .stock-row .stock-badge,
  .stock-row em {
    grid-column: 5 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }
  .stock-row .stock-row-variants {
    grid-column: 2 / -1 !important;
    grid-row: 2 !important;
    margin-top: 2px !important;
    width: 100% !important;
  }

  /* 7. Hóa đơn trên PC: Chuẩn hóa lưới 5 cột trên 1 dòng duy nhất, chống rớt icon chevron */
  .tx-list .transaction-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 140px 130px auto 24px !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    border-bottom: 1px solid var(--q-line) !important;
    transition: background 0.14s ease !important;
  }
  .tx-list .transaction-row:hover {
    background: #f8fafc !important;
  }
  .tx-list .transaction-row > span:first-child {
    min-width: 0 !important;
  }
  .tx-list .transaction-row .tx-meta {
    grid-column: auto !important;
    grid-row: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
  .tx-list .transaction-row b {
    grid-column: auto !important;
    grid-row: auto !important;
    font-size: 14.5px !important;
    color: var(--q-blue-dark) !important;
    text-align: right !important;
    white-space: nowrap !important;
  }
  .tx-list .transaction-row .pc-tx-quick-print {
    grid-column: auto !important;
    grid-row: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    height: 32px !important;
    padding: 0 12px !important;
    border: 1px solid #93c5fd !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
  }
  .tx-list .transaction-row .pc-tx-quick-print:hover {
    background: #dbeafe !important;
    border-color: #3b82f6 !important;
    color: #1e40af !important;
    transform: translateY(-1px) !important;
  }
  .tx-list .transaction-row > .ui-icon {
    grid-column: auto !important;
    grid-row: auto !important;
    color: #94a3b8 !important;
    justify-self: center !important;
  }

  /* 8. Bộ lọc ngày trên hóa đơn PC */
  .tx-date-filters {
    display: flex !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
    overflow-x: auto !important;
  }
  .tx-date-filters button {
    height: 34px !important;
    padding: 0 14px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
  }
  .tx-date-filters button:hover {
    border-color: #93c5fd !important;
    color: #1d4ed8 !important;
  }
  .tx-date-filters button.active {
    background: #1485ee !important;
    border-color: #1485ee !important;
    color: #fff !important;
    font-weight: 700 !important;
  }

  /* 9. Báo cáo trên PC: Hàng danh mục tự wrap không bị tràn mép */
  .feature-panel .pos-chips,
  .feature-panel .order-filters {
    flex-wrap: wrap !important;
    overflow: visible !important;
  }

  /* 10. Mở rộng modal Chi tiết sản phẩm & Chi tiết hóa đơn trên PC cho rộng rãi, sang trọng */
  .modal-box {
    max-width: 680px !important;
  }

  /* 11. Chuẩn hóa lưới 6 ô cân đối trên 1 hàng duy nhất cho Modal sản phẩm PC (chống ô thứ 6 bị lẻ hàng) */
  .product-detail + .detail-actions {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 14px 0 !important;
  }
  .product-detail + .detail-actions .quick-tile {
    min-height: 80px !important;
    padding: 10px 4px !important;
  }

  /* 12. Sửa triệt để màn hình Thanh toán / Giỏ hàng / Hoàn tất trên PC (chống co hẹp 440px, chống nhảy chiều rộng & chống cắt cụt đáy khi mở QR) */
  html:has(body[data-app-page="sales"]:not([data-sale-step="browse"])),
  body[data-app-page="sales"]:not([data-sale-step="browse"]),
  body[data-app-page="sales"]:not([data-sale-step="browse"]) #app,
  body[data-app-page="sales"]:not([data-sale-step="browse"]) .main,
  body[data-app-page="sales"]:not([data-sale-step="browse"]) .content {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: auto !important;
  }
  body[data-app-page="sales"]:not([data-sale-step="browse"]) .content {
    padding: 12px 24px 28px !important;
    align-items: center !important;
  }
  .pos-flow,
  .pos-flow.checkout-screen {
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    padding: 14px 22px 16px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    gap: 8px !important;
  }
  .checkout-screen .flow-head {
    margin-bottom: 2px !important;
    padding-bottom: 4px !important;
  }
  .checkout-screen .billing-summary-panel {
    padding: 10px 16px !important;
    gap: 6px !important;
  }
  .checkout-screen .billing-grand-total {
    padding-top: 8px !important;
    margin-top: 2px !important;
  }
  .checkout-screen .billing-grand-total strong {
    font-size: 26px !important;
  }
  .checkout-screen .qr-payment-panel {
    margin: 4px 0 !important;
    padding: 10px 14px !important;
    gap: 6px !important;
  }
  .checkout-screen .qr-box {
    padding: 6px !important;
  }
  .checkout-screen .qr-box img {
    width: 160px !important;
    height: 160px !important;
  }
  .checkout-screen .cash-received-row input {
    max-width: 240px !important;
    height: 38px !important;
    min-height: 38px !important;
    font-size: 16.5px !important;
  }
  .checkout-screen .discount-row-input-group input {
    width: 140px !important;
    height: 34px !important;
    min-height: 34px !important;
    font-size: 14.5px !important;
  }
  .checkout-screen .discount-row-input-group .discount-mode {
    height: 34px !important;
    min-height: 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    font-size: 13px !important;
  }
  .checkout-screen .cash-pill {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    font-size: 12.5px !important;
  }
}

/* Chống kéo giãn khoảng trống các nút gợi ý tiền mặt (.cash-quick-pills) */
.cash-panel > .cash-quick-pills,
.cash-quick-pills {
  justify-content: flex-start !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

/* Khung tìm kiếm khách hàng (.customer-search) & Nhãn SĐT nổi bật dễ nhìn (.cust-phone-tag) */
.customer-search {
  width: 100% !important;
  min-height: 46px !important;
  height: 46px !important;
  padding: 0 14px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}
.customer-search:focus {
  background: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.14) !important;
}
.customer-row {
  padding: 10px 14px !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  transition: all 0.15s ease !important;
}
.customer-row:hover {
  border-color: #93c5fd !important;
  background: #f8fbff !important;
}
.customer-row strong {
  font-size: 14px !important;
  font-weight: 750 !important;
  color: #0f172a !important;
}
.customer-row .cust-row-sub {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 4px !important;
  line-height: 1.3 !important;
}
.customer-row .cust-row-sub > *,
.customer-row .cust-row-sub span,
.cust-phone-tag,
.cust-ck-tag,
.cust-dot-sep,
.cust-meta-code,
.cust-meta-empty {
  flex: 0 0 auto !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
}
.cust-phone-tag {
  color: #0369a1 !important;
  background: #e0f2fe !important;
  border: 1px solid #bae6fd !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  font-variant-numeric: tabular-nums !important;
}
.cust-ck-tag {
  color: #15803d !important;
  background: #dcfce7 !important;
  border: 1px solid #bbf7d0 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
}
.cust-meta-code {
  color: #475569 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}
.cust-meta-empty {
  color: #64748b !important;
  font-size: 12px !important;
}
.cust-dot-sep {
  color: #cbd5e1 !important;
  font-weight: 700 !important;
}

/* Sửa triệt để text-align căn trái cho tên sản phẩm & biến thể trong stock-row */
.stock-row-main,
.stock-row > span {
  text-align: left !important;
  align-items: flex-start !important;
}
.stock-row-name,
.stock-row-sku {
  text-align: left !important;
}

/* ==========================================================================
   STRICT MOBILE LOCK: KHÓA CỨNG TUYỆT ĐỐI GIAO DIỆN MOBILE & TABLET
   ========================================================================== */
@media (max-width: 920px) {
  .pc-back-btn,
  .pc-tx-quick-print {
    display: none !important;
  }
  /* Khóa cứng tuyệt đối: Ẩn nút In tem trên Mobile Modal để giữ nguyên vẹn 5 ô chuẩn của Mobile */
  .product-detail + .detail-actions .quick-tile[data-kind="barcode"] {
    display: none !important;
  }
  /* Khóa cứng tuyệt đối: Ẩn nút Đổi / Trả hàng trên Mobile Modal để giữ nguyên vẹn 4 nút 2x2 chuẩn của Mobile */
  .tx-action-grid .btn-return-orange {
    display: none !important;
  }
  .tx-action-grid .tx-act-btn[data-action="share-receipt"] {
    grid-column: auto !important;
  }
  /* Khóa cứng tuyệt đối: Ẩn dải lọc ngày trên Mobile để bảo toàn 100% chiều cao và khoảng trống Mobile */
  .tx-date-filters {
    display: none !important;
  }
}

@media (min-width: 921px) {
  .pos-browse-col > .pos-quick-tools-strip,
  .pos-mobile-quick-strip {
    display: none !important;
  }
}

.modal {
  max-width: min(560px, calc(100vw - 20px)) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}
.modal-body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.modal .stock-flow,
.modal .stock-flow .form-grid,
.modal .stock-flow .field,
.modal .stock-flow .stock-entry-row,
.modal .stock-flow .stock-entry-row > label,
.modal .stock-flow select,
.modal .stock-flow input,
.modal .line-item,
.modal .line-item > span,
.modal .stock-result,
.modal .stock-result > span {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.modal .line-item > span > strong,
.modal .stock-result > span > strong {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal .line-item .unit-pill {
  width: auto !important;
  min-width: max-content !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}
.modal .stock-flow .form-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}
@media (min-width: 640px) {
  .modal .stock-flow .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}