:root{--bg:#f7f8fb;--card:#fff;--ink:#111827;--muted:#64748b;--line:#e5e7eb;--primary:#1d4ed8;--primary2:#0f172a;--danger:#ef4444;--ok:#16a34a;--warn:#f59e0b;--radius:18px;--shadow:0 14px 40px rgba(15,23,42,.08)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink)}button,input,select,textarea{font:inherit}button{border:0;border-radius:12px;padding:12px 16px;cursor:pointer;font-weight:700}input,select,textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 12px;background:#fff}label{display:grid;gap:7px;font-size:13px;color:#334155}.hidden{display:none!important}.muted{color:var(--muted)}.login-shell{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 20% 0,#1d4ed8 0,#0f172a 35%,#020617 100%);padding:24px}.login-card{width:min(480px,100%);background:rgba(255,255,255,.96);border-radius:26px;padding:30px;box-shadow:0 30px 80px rgba(0,0,0,.4)}.brand-mark{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,#1d4ed8,#06b6d4);display:grid;place-items:center;color:#fff;font-weight:900;letter-spacing:-2px;font-size:24px}.brand-mark.small{width:42px;height:42px;border-radius:12px;font-size:16px;letter-spacing:-1px}.login-card h1{margin:16px 0 4px}.login-card p{color:#64748b;margin-top:0}.tabs{display:grid;grid-template-columns:1fr 1fr;background:#eef2ff;border-radius:14px;padding:5px;margin:18px 0}.tab{background:transparent;color:#475569}.tab.active{background:#fff;color:var(--primary);box-shadow:0 8px 18px rgba(29,78,216,.12)}.auth-form{display:grid;gap:12px}.inline{display:flex;align-items:center;gap:8px}.inline input{width:auto}.primary{background:var(--primary);color:#fff}.secondary{background:#e0e7ff;color:#1d4ed8}.danger{background:var(--danger);color:#fff}.ghost{background:transparent;border:1px solid var(--line);color:#334155}.big{font-size:17px;padding:15px 18px}.app-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.sidebar{background:#0f172a;color:#fff;padding:18px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh}.brand{display:flex;gap:12px;align-items:center}.brand span{display:block;font-size:12px;color:#94a3b8;margin-top:2px}.sidebar nav{display:grid;gap:7px}.nav{background:transparent;color:#cbd5e1;text-align:left;border-radius:12px}.nav.active,.nav:hover{background:#1e293b;color:#fff}.main{min-width:0}.topbar{height:76px;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:4}.topbar h2{margin:0;font-size:22px}.topbar span{font-size:12px;color:#64748b}.top-actions{display:flex;gap:12px;align-items:center}.pill{padding:8px 10px;border-radius:999px;background:#eef2ff;color:#1d4ed8!important;font-weight:700}.icon-btn{display:none;background:#eef2ff;color:#1d4ed8}.page{display:none;padding:22px}.page.active{display:block}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}.card h3{margin:0 0 14px}.grid{display:grid;gap:18px}.grid.two{grid-template-columns:1fr 1fr}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}.kpi span{display:block;color:#64748b;font-size:13px}.kpi b{font-size:26px}.flow{display:flex;gap:8px;flex-wrap:wrap}.flow span{background:#f1f5f9;border-radius:999px;padding:10px 12px;font-weight:700;color:#334155}.clean{margin:0;padding-left:18px;color:#334155;line-height:1.65}.pos-layout{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:18px}.row{display:flex;gap:12px;align-items:center}.between{justify-content:space-between}.wrap{flex-wrap:wrap}.stack{display:grid;gap:12px}.search{max-width:360px}.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.chip{padding:9px 12px;background:#f1f5f9;border-radius:999px;color:#334155}.chip.active{background:#1d4ed8;color:#fff}.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px;max-height:calc(100vh - 250px);overflow:auto;padding-right:4px}.product{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;text-align:left;box-shadow:0 8px 24px rgba(15,23,42,.05)}.product:hover{border-color:#1d4ed8}.product .emoji{font-size:28px}.product b{display:block;margin:8px 0 6px}.product span{color:#64748b;font-size:12px}.product .price{color:#1d4ed8;font-weight:900}.cart{position:sticky;top:98px;height:max-content}.cart-items{display:grid;gap:8px;max-height:280px;overflow:auto;margin:12px 0}.cart-items.empty{color:#94a3b8;text-align:center;border:1px dashed var(--line);border-radius:12px;padding:24px}.cart-line{display:grid;grid-template-columns:1fr auto;gap:6px;border-bottom:1px solid #f1f5f9;padding:8px 0}.cart-line b{font-size:14px}.qty{display:flex;gap:6px;align-items:center}.qty button{padding:4px 8px;background:#eef2ff;color:#1d4ed8}.totals{display:grid;grid-template-columns:1fr auto;gap:8px;border-top:1px solid var(--line);padding:14px 0;margin-top:12px}.totals b:last-child{font-size:24px;color:#1d4ed8}.table-wrap{width:100%;overflow:auto}table{width:100%;border-collapse:collapse}th,td{border-bottom:1px solid var(--line);padding:10px;text-align:left;font-size:13px}th{background:#f8fafc;color:#475569}.badge{padding:5px 8px;border-radius:999px;font-size:12px;font-weight:800;background:#e2e8f0;color:#334155}.badge.PAID,.badge.READY,.badge.SUCCESS{background:#dcfce7;color:#166534}.badge.PENDING_PAYMENT,.badge.NEW{background:#fef3c7;color:#92400e}.badge.CANCELLED{background:#fee2e2;color:#991b1b}.tickets{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}.ticket{border:1px solid var(--line);border-radius:16px;padding:14px;background:#fff}.ticket h4{margin:0 0 8px}.ticket-item{display:flex;justify-content:space-between;border-top:1px solid #f1f5f9;padding:8px 0}.table-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.table-card{border-radius:16px;border:1px solid var(--line);background:#fff;padding:16px}.table-card b{display:block;font-size:22px}.table-card.EMPTY{border-color:#bbf7d0}.table-card.OCCUPIED{border-color:#fbbf24}.table-card.CLEANING{border-color:#93c5fd}.result-box{background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:14px;min-height:80px;white-space:pre-wrap}.toast{position:fixed;right:18px;bottom:18px;background:#0f172a;color:#fff;border-radius:14px;padding:12px 16px;box-shadow:var(--shadow);opacity:0;transform:translateY(10px);transition:.25s;z-index:20}.toast.show{opacity:1;transform:translateY(0)}.receipt{font-family:monospace;width:280px;padding:12px;color:#000}.receipt h2{text-align:center;margin:0}.receipt p{text-align:center}.qr{font-size:54px;line-height:1}@media(max-width:1050px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-280px;z-index:10;transition:.2s;width:260px}.sidebar.open{left:0}.icon-btn{display:inline-block}.grid.two,.pos-layout{grid-template-columns:1fr}.cart{position:static}.kpis{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.page{padding:12px}.topbar{padding:0 12px}.top-actions{gap:6px}.kpis{grid-template-columns:1fr}.product-grid{grid-template-columns:repeat(2,1fr)}.search{max-width:100%}.row.between{align-items:flex-start;flex-direction:column}.login-card{padding:22px}}
@media print{body>*{display:none!important}.print-area{display:block!important}.receipt{display:block!important}}
.brand-logo{object-fit:contain;background:#fff;border-radius:12px;padding:4px;border:1px solid rgba(148,163,184,.35)}.brand-logo.login-logo{width:96px;height:96px;border-radius:22px;box-shadow:0 12px 40px rgba(15,23,42,.18)}.brand-logo.small{width:48px;height:48px}.chart-row{margin-bottom:18px}.chart-box{min-height:300px;display:grid;place-items:center}.pie-wrap{display:grid;grid-template-columns:240px 1fr;gap:18px;align-items:center;width:100%}.pie-wrap svg{width:240px;height:240px}.legend{display:grid;gap:8px;font-size:13px}.legend div{display:flex;gap:8px;align-items:center}.legend span{display:inline-block;width:12px;height:12px;border-radius:4px}.bar-list{display:grid;gap:12px;width:100%}.bar-row{display:grid;grid-template-columns:120px 1fr 70px;gap:10px;align-items:center;font-size:13px}.bar-row>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-row>div{height:18px;background:#eef2ff;border-radius:999px;overflow:hidden}.bar-row b{display:block;height:100%;background:linear-gradient(90deg,#0f3b7a,#168018);border-radius:999px}.bar-row em{font-style:normal;text-align:right;color:#475569}.table-zone{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}.table-cards.compact{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));max-height:260px;overflow:auto}.table-cards.compact .table-card{text-align:left;cursor:pointer}.report-grid{margin-top:14px}.report-card{border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px;overflow:auto}.report-card h4{margin:0 0 10px}.result-box:empty{display:none}.danger:not(.ghost){background:#ef4444;color:#fff;padding:8px 10px}.table-card{cursor:default}.table-card.RESERVED{border-color:#cbd5e1;background:#f8fafc}.table-card button{width:100%}@media(max-width:760px){.pie-wrap{grid-template-columns:1fr}.bar-row{grid-template-columns:90px 1fr 54px}.brand-logo.login-logo{width:80px;height:80px}}

/* QR payment test modal + printed bill QR */
.modal{position:fixed;inset:0;background:rgba(15,23,42,.62);display:grid;place-items:center;z-index:50;padding:18px}
.modal-card{background:#fff;border-radius:24px;box-shadow:0 30px 90px rgba(0,0,0,.35);width:min(460px,100%);padding:22px;position:relative}
.modal-close{position:absolute;right:12px;top:12px;background:#f1f5f9;color:#334155;border-radius:999px;width:38px;height:38px;padding:0;font-size:22px}
.qr-payment-card{text-align:center}
.qr-payment-head{display:flex;justify-content:center;align-items:center;gap:10px;margin-bottom:8px}
.qr-payment-head h3{margin:0}.qr-payment-card .muted{text-align:left;line-height:1.55}
.payment-qr-img{width:min(340px,92vw);max-height:420px;object-fit:contain;border:1px solid var(--line);border-radius:18px;background:#fff;padding:10px;margin:12px auto;display:block}
.qr-payment-info{display:grid;gap:4px;background:#f8fafc;border:1px solid var(--line);border-radius:16px;padding:14px;margin:12px 0}
.qr-payment-info span{color:#64748b;font-size:13px}.qr-payment-info b{font-size:28px;color:#1d4ed8}
.bill-qr{text-align:center;margin:10px 0}.bill-qr img{width:220px;max-width:100%;display:block;margin:8px auto}.bill-qr small{display:block}
@media(max-width:620px){.modal{padding:10px}.modal-card{padding:18px}.payment-qr-img{width:100%}}


.table-card{display:grid;gap:8px}.table-pick{background:transparent;color:inherit;text-align:left;padding:0;border-radius:0}.table-pick:hover{background:transparent}.clear-table-btn{padding:8px 10px;font-size:12px}.table-card.EMPTY .clear-table-btn{display:none}.table-card.compact-card{padding:12px}.table-card.compact-card b{font-size:18px}.table-card.compact-card .clear-table-btn{margin-top:4px}.operations-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:14px}.operation-card{border:1px solid var(--line);background:#fff;border-radius:16px;padding:14px}.operation-card h4{margin:0 0 8px;color:#0f172a}.operation-card p{margin:0 0 10px;color:#475569;line-height:1.45}.operation-card span{display:inline-block;padding:6px 9px;border-radius:999px;background:#eef2ff;color:#1d4ed8;font-weight:800;font-size:12px}.report-card table td[colspan]{text-align:center;padding:18px;color:#64748b}.primary:disabled,.secondary:disabled{opacity:.65;cursor:not-allowed}
.notification-card small{color:#64748b}.activity-note{color:#64748b;font-size:13px;line-height:1.5}

/* Language selector VI/EN */
.language-box{display:flex;align-items:center;justify-content:center;gap:10px;margin:4px 0 8px;color:#475569;font-size:13px;font-weight:700}
.lang-select{border:1px solid var(--line);border-radius:999px;background:#eef2ff;color:#1d4ed8;font-weight:800;padding:8px 12px;min-width:94px;outline:none}
.top-lang{height:40px;min-width:74px;background:#fff}
@media(max-width:620px){.language-box{flex-direction:column}.top-lang{max-width:72px}}



/* ================= LATec POS V3 UI Refresh - Pastel Gradient =================
   Design reference: TAX POS/P55 style. Chủ đạo: tím nhạt -> xanh mint mờ dần,
   card trắng, icon tròn, nút to, dễ thao tác ở quầy/P55.
============================================================================= */
:root{
  --bg:#f8f7ff;
  --bg2:#eefaff;
  --card:#ffffff;
  --ink:#172033;
  --muted:#6c7890;
  --line:#e8e6f6;
  --primary:#7367f0;
  --primary2:#54b6d6;
  --primary3:#8bd8bd;
  --soft:#f0edff;
  --soft2:#e8fbf7;
  --danger:#f06b80;
  --ok:#22b685;
  --warn:#f2a84a;
  --radius:24px;
  --shadow:0 18px 50px rgba(87,76,160,.13);
}
html{background:linear-gradient(135deg,#fbf9ff 0%,#f0edff 42%,#e8fbf7 100%);}
body{
  background:
    radial-gradient(circle at top left, rgba(212,203,255,.72), transparent 34%),
    radial-gradient(circle at bottom right, rgba(192,245,233,.72), transparent 32%),
    linear-gradient(135deg,#fbf9ff 0%,#f6f3ff 48%,#effdf9 100%);
  color:var(--ink);
}
button,input,select,textarea{outline:none}
button{transition:.18s ease;box-shadow:none}
button:active{transform:scale(.985)}
input,select,textarea{
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.94);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  min-height:44px;
}
input:focus,select:focus,textarea:focus{
  border-color:#a59bf7;
  box-shadow:0 0 0 4px rgba(115,103,240,.12);
}
.login-shell{
  background:
    radial-gradient(circle at 12% 10%, rgba(139,216,189,.55), transparent 28%),
    radial-gradient(circle at 88% 0%, rgba(115,103,240,.36), transparent 32%),
    linear-gradient(135deg,#fbf9ff 0%,#eeeaff 48%,#e9fbf7 100%);
}
.login-card{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.74);
  box-shadow:0 30px 90px rgba(62,51,132,.18);
  backdrop-filter: blur(18px);
  border-radius:34px;
}
.brand-logo.login-logo,.brand-logo.small{
  background:#fff;
  border-radius:24px;
  box-shadow:0 14px 38px rgba(92,80,178,.16);
}
.login-card h1{
  color:#172033;
  letter-spacing:-.04em;
}
.login-card p{color:#65708a}
.language-box{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:12px;
  align-items:center;
  margin:8px 0 10px;
}
.language-box span{font-weight:800;color:#24304a}
.tabs{
  background:linear-gradient(135deg,#f0edff,#eafaf7);
  border-radius:20px;
  padding:6px;
}
.tab{
  border-radius:16px;
  color:#48566f;
}
.tab.active{
  background:#fff;
  color:var(--primary);
  box-shadow:0 12px 26px rgba(115,103,240,.16);
}
.primary{
  background:linear-gradient(135deg,var(--primary),#57b9d8);
  color:#fff;
  border-radius:18px;
  box-shadow:0 14px 26px rgba(115,103,240,.22);
}
.primary:hover{filter:brightness(1.03)}
.secondary{
  background:linear-gradient(135deg,#f3f0ff,#e9fbf7);
  color:#5a50d8;
  border:1px solid #ded9ff;
  border-radius:18px;
}
.ghost{
  background:rgba(255,255,255,.72);
  border:1px solid var(--line);
  border-radius:18px;
  color:#44506a;
}
.danger{background:linear-gradient(135deg,#fff0f3,#ffe7e1);color:#c43d56;border:1px solid #ffd4dc}
.app-shell{
  background:
    radial-gradient(circle at 28% 4%, rgba(115,103,240,.16), transparent 24%),
    radial-gradient(circle at 85% 90%, rgba(139,216,189,.20), transparent 26%),
    linear-gradient(135deg,#fbf9ff,#f4f2ff 48%,#eefdf9);
}
.sidebar{
  background:linear-gradient(180deg,#ffffff 0%,#f6f2ff 48%,#edfbf7 100%);
  border-right:1px solid rgba(222,217,255,.75);
  color:#1f2940;
  box-shadow:18px 0 45px rgba(86,73,155,.08);
}
.brand strong{color:#172033;font-size:18px}
.brand span{color:#7a8498}
.sidebar nav{gap:9px}
.nav{
  color:#505c74;
  background:transparent;
  border-radius:18px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:10px;
}
.nav::before{
  width:34px;height:34px;border-radius:14px;
  display:inline-grid;place-items:center;
  background:rgba(255,255,255,.78);
  box-shadow:inset 0 0 0 1px rgba(222,217,255,.8);
  font-size:17px;
}
.nav[data-page="dashboard"]::before{content:"🏠"}
.nav[data-page="pos"]::before{content:"🛒"}
.nav[data-page="kitchen"]::before{content:"👨‍🍳"}
.nav[data-page="tables"]::before{content:"🪑"}
.nav[data-page="orders"]::before{content:"🧾"}
.nav[data-page="cash"]::before{content:"💵"}
.nav[data-page="kpi"]::before{content:"🏆"}
.nav[data-page="tax"]::before{content:"📄"}
.nav[data-page="products"]::before{content:"📦"}
.nav[data-page="materials"]::before{content:"🥕"}
.nav[data-page="reports"]::before{content:"📊"}
.nav[data-page="accounts"]::before{content:"👤"}
.nav[data-page="notifications"]::before{content:"🔔"}
.nav[data-page="latec-invoice"]::before{content:"🧾"}
.nav[data-page="hsm-latec"]::before{content:"🛡️"}
.nav.active,.nav:hover{
  background:linear-gradient(135deg,rgba(115,103,240,.16),rgba(139,216,189,.24));
  color:#282066;
}
.nav.active::before{
  background:linear-gradient(135deg,#7367f0,#68c6da);
  color:#fff;
  box-shadow:0 10px 22px rgba(115,103,240,.20);
}
.topbar{
  background:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(232,230,246,.9);
  backdrop-filter:blur(18px);
}
.topbar h2{letter-spacing:-.03em;color:#172033}
.pill{
  background:linear-gradient(135deg,#f0edff,#e7fbf7);
  color:#5a50d8!important;
  border:1px solid #ded9ff;
}
.page{padding:24px}
.card,.kpi,.product,.cart,.table-card,.modal-card{
  background:rgba(255,255,255,.84);
  border:1px solid rgba(255,255,255,.9);
  border-radius:24px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
}
.card h3{letter-spacing:-.025em;color:#172033}
.kpis{gap:18px}
.kpi{
  position:relative;
  overflow:hidden;
}
.kpi::after{
  content:"";
  position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:999px;
  background:linear-gradient(135deg,rgba(115,103,240,.12),rgba(139,216,189,.2));
}
.kpi span{color:#72809a}
.kpi b{color:#241f64;letter-spacing:-.04em}
.chart-box,.empty-state{
  background:linear-gradient(135deg,#faf9ff,#effcf8);
  border:1px dashed #dcd6ff;
  border-radius:22px;
}
.flow span{
  background:linear-gradient(135deg,#fff,#f0edff);
  color:#4a456b;
  border:1px solid #e9e5ff;
}
.pos-layout{gap:20px}
.chip{
  background:#fff;
  color:#5d6880;
  border:1px solid #e8e6f6;
  box-shadow:0 8px 18px rgba(87,76,160,.08);
}
.chip.active{
  background:linear-gradient(135deg,#7367f0,#59bfd8);
  color:#fff;
  border-color:transparent;
}
.product{
  text-align:left;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(250,249,255,.9));
  border:1px solid rgba(226,222,255,.9);
  padding:14px;
}
.product:hover{
  border-color:#bcb3ff;
  transform:translateY(-1px);
  box-shadow:0 18px 44px rgba(115,103,240,.16);
}
.product .emoji{
  width:44px;height:44px;border-radius:18px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#f0edff,#e6fbf7);
  font-size:24px;
  margin-bottom:10px;
}
.product b{color:#172033}
.product .price{color:#5a50d8}
.cart{
  border:1px solid #e3dfff;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(244,242,255,.86));
}
.cart-line{
  border-bottom:1px solid #eeebff;
  border-radius:16px;
  padding:10px;
}
.qty button{
  background:#fff;
  color:#5a50d8;
  border:1px solid #ded9ff;
  border-radius:12px;
}
.table-card{
  border:1px solid #e8e4ff;
  background:linear-gradient(180deg,#fff,#f8f6ff);
}
.table-card.occupied,.table-card.busy{
  background:linear-gradient(135deg,#fff7e9,#fff0f3);
  border-color:#ffd5c7;
}
.table-card.empty{
  background:linear-gradient(135deg,#fff,#edfbf7);
}
.badge,.status{
  border-radius:999px;
  background:#f0edff;
  color:#5a50d8;
  border:1px solid #ded9ff;
}
table{border-collapse:separate;border-spacing:0 8px}
th{color:#71809a;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
td{
  background:#fff;
  border-top:1px solid #eeebff;
  border-bottom:1px solid #eeebff;
}
td:first-child{border-left:1px solid #eeebff;border-radius:16px 0 0 16px}
td:last-child{border-right:1px solid #eeebff;border-radius:0 16px 16px 0}
.toast{
  background:#241f64;
  color:#fff;
  border-radius:18px;
  box-shadow:0 16px 44px rgba(36,31,100,.24);
}
.modal{
  background:rgba(30,24,66,.36);
  backdrop-filter:blur(10px);
}
.modal-content,.receipt,.qr-box{
  border-radius:28px;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 28px 80px rgba(58,48,128,.22);
}
.receipt{
  background:linear-gradient(180deg,#fff,#faf9ff);
}
@media(max-width:900px){
  .sidebar{background:linear-gradient(180deg,#fff,#f6f2ff)}
  .nav{padding:10px 12px}
  .pos-layout{grid-template-columns:1fr}
  .cart{position:static}
}


/* V3.1 Owner/Manager management UX */
.card.info{border:1px solid rgba(115,103,240,.18);background:linear-gradient(135deg,#f5f3ff,#ecfeff);color:#334155}
.table-wrap.compact table{font-size:13px}
button.mini,.mini{padding:7px 10px;border-radius:10px;font-size:12px;margin:2px}
.table-card.inactive{opacity:.55;filter:grayscale(.25)}
.hidden{display:none!important}


/* V3.2 product images */
.product{position:relative;overflow:hidden}
.product-thumb{
  width:100%;height:96px;border-radius:18px;display:grid;place-items:center;
  background:linear-gradient(135deg,#f0edff,#e6fbf7);
  color:#5a50d8;font-size:30px;margin-bottom:10px;overflow:hidden;border:1px solid #ece8ff;
}
.product-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.product-thumb.empty small{display:block;font-size:11px;color:#7c73db;margin-top:4px}
.product-thumb.small{width:56px;height:46px;border-radius:14px;margin:0;font-size:20px}
.product-thumb.small.empty small{display:none}
.product-thumb[data-change-image]{cursor:pointer;outline:2px dashed transparent;transition:.18s}
.product-thumb[data-change-image]:hover{outline-color:#a69cff;transform:scale(1.01)}
.product-thumb.broken{background:#fff2f2;color:#ef4444;font-size:12px}
.image-paste-zone{
  display:grid;grid-template-columns:112px 1fr;gap:14px;align-items:center;
  border:1px dashed #bcb3ff;border-radius:18px;padding:12px;background:linear-gradient(135deg,#fbfaff,#f0fffb);
}
.image-paste-zone:focus{outline:3px solid rgba(115,103,240,.18)}
.image-paste-zone b{display:block;color:#172033;margin-bottom:4px}
.image-paste-zone span{display:block;color:#64748b;font-size:13px;line-height:1.4}
.image-preview{
  width:112px;height:92px;border-radius:16px;background:#fff;border:1px solid #ece8ff;display:grid;place-items:center;overflow:hidden;font-size:30px;color:#7c73db;
}
.image-preview img{width:100%;height:100%;object-fit:cover;display:block}
.image-preview.empty{background:linear-gradient(135deg,#f0edff,#e6fbf7)}
.image-actions{margin-top:8px}
.image-actions input[type=file]{max-width:260px;background:#fff}



/* V3.6 Business report dashboard - inspired by management dashboard reference */
.business-report-shell{
  --report-blue:#267fb8;
  --report-blue-dark:#176a9f;
  --report-orange:#ff7f0e;
  --report-light:#dbe9f7;
  background:#f8fbfe;
  border:1px solid #d7e5f2;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 22px 60px rgba(39,91,130,.12);
}
.business-report-titlebar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 22px;
  color:#fff;
  background:linear-gradient(100deg,var(--report-blue-dark),var(--report-blue));
}
.business-report-titlebar h2{margin:2px 0 0;font-size:26px;letter-spacing:.03em;color:#fff}
.business-report-kicker{font-size:12px;font-weight:700;opacity:.82;text-transform:uppercase;letter-spacing:.12em}
.business-report-unit{font-size:13px;font-weight:800;white-space:nowrap}
.business-report-filters{
  display:grid;
  grid-template-columns:minmax(190px,1.25fr) minmax(150px,.8fr) minmax(180px,.9fr) auto auto;
  gap:12px;align-items:end;padding:16px 20px;background:#fff;border-bottom:1px solid #dbe8f3
}
.business-report-filters label{font-size:12px;font-weight:800;color:#356b92}
.business-report-filters select,.business-report-filters input{margin-top:6px}
.business-report-filters button{height:44px}
.business-report-shell .report-range{
  min-height:30px;padding:7px 20px;color:#356b92;font-weight:700;background:#f2f8fc;border-bottom:1px solid #dbe8f3
}
.business-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);background:#fff}
.business-kpi-card{
  position:relative;min-height:150px;padding:20px 18px;text-align:center;
  border-right:3px solid var(--report-blue);border-bottom:3px solid var(--report-blue);
  display:flex;flex-direction:column;align-items:center;justify-content:center
}
.business-kpi-card:last-child{border-right:0}
.business-kpi-card span{color:var(--report-blue-dark);font-size:15px;font-weight:900;letter-spacing:.02em}
.business-kpi-card strong{display:block;margin:12px 0 5px;color:var(--report-blue);font-size:42px;line-height:1;font-weight:900}
.business-kpi-card small{color:#607b8e;font-size:12px}
.business-chart-grid{display:grid;grid-template-columns:repeat(4,1fr);background:#fff}
.business-chart-card{
  min-width:0;min-height:300px;border-right:3px solid var(--report-blue);border-bottom:3px solid var(--report-blue);
  background:#fff
}
.business-chart-card:nth-child(4n){border-right:0}
.business-chart-card header{
  min-height:36px;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:7px 10px;background:linear-gradient(90deg,var(--report-blue-dark),var(--report-blue));
  color:#fff;font-size:13px;font-weight:900;letter-spacing:.02em
}
.business-chart-body{height:254px;padding:12px;overflow:hidden}
.chart-empty{height:100%;display:grid;place-items:center;color:#7a8fa2;text-align:center;font-size:13px}
.chart-svg{width:100%;height:100%;display:block;overflow:visible}
.chart-axis{stroke:#d6e3ed;stroke-width:1}
.chart-gridline{stroke:#e9f0f6;stroke-width:1}
.chart-label{fill:#435d70;font-size:10px;font-family:Arial,sans-serif}
.chart-value{fill:#153d59;font-size:10px;font-weight:800;font-family:Arial,sans-serif}
.chart-bar-primary{fill:#287fb8}
.chart-bar-secondary{fill:#a8c4e6}
.chart-line{fill:none;stroke:#287fb8;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.chart-point{fill:#fff;stroke:#287fb8;stroke-width:2}
.donut-wrap{height:100%;display:grid;grid-template-columns:130px 1fr;gap:12px;align-items:center}
.donut-chart{width:126px;height:126px;border-radius:50%;position:relative;margin:auto}
.donut-chart:after{content:"";position:absolute;inset:27px;border-radius:50%;background:#fff}
.donut-center{position:absolute;inset:0;display:grid;place-items:center;z-index:1;font-size:17px;font-weight:900;color:#226f9f}
.chart-legend{display:grid;gap:7px;align-content:center;max-height:210px;overflow:auto}
.chart-legend div{display:grid;grid-template-columns:10px 1fr auto;gap:7px;align-items:center;font-size:11px;color:#425b6d}
.chart-legend i{width:9px;height:9px;border-radius:2px}
.chart-legend b{color:#173c56}
.gauge-wrap{height:100%;display:grid;place-items:center}
.gauge{
  --pct:0deg;
  width:190px;height:95px;border-radius:190px 190px 0 0;overflow:hidden;position:relative;
  background:conic-gradient(from 270deg at 50% 100%,#287fb8 0deg 45deg,#ff7f0e 45deg 90deg,#a8c4e6 90deg 135deg,#36a335 135deg var(--pct),#e7eef4 var(--pct) 180deg)
}
.gauge:after{content:"";position:absolute;left:35px;right:35px;bottom:0;height:60px;border-radius:90px 90px 0 0;background:#fff}
.gauge-value{position:absolute;left:0;right:0;bottom:4px;z-index:2;text-align:center;font-size:31px;font-weight:900;color:#267fb8}
.gauge-caption{text-align:center;color:#567285;font-size:12px;margin-top:8px}
.inventory-summary{height:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:center}
.inventory-summary div{padding:16px 8px;border-radius:16px;background:#eef6fb;text-align:center}
.inventory-summary b{display:block;color:#267fb8;font-size:26px}
.inventory-summary span{color:#567285;font-size:11px}
.business-report-details{margin:16px;border:1px solid #d7e6f2;border-radius:16px;background:#fff;overflow:hidden}
.business-report-details>summary{cursor:pointer;padding:14px 16px;font-weight:900;color:#1d6e9e;background:#f2f8fc}
.business-report-details .report-group-grid{padding:14px}
@media(max-width:1300px){
  .business-report-filters{grid-template-columns:repeat(3,1fr)}
  .business-kpi-grid{grid-template-columns:repeat(2,1fr)}
  .business-kpi-card:nth-child(2){border-right:0}
  .business-chart-grid{grid-template-columns:repeat(2,1fr)}
  .business-chart-card:nth-child(2n){border-right:0}
}
@media(max-width:760px){
  .business-report-titlebar{align-items:flex-start;flex-direction:column}
  .business-report-titlebar h2{font-size:20px}
  .business-report-filters{grid-template-columns:1fr}
  .business-kpi-grid,.business-chart-grid{grid-template-columns:1fr}
  .business-kpi-card,.business-chart-card{border-right:0}
  .business-kpi-card strong{font-size:36px}
  .business-chart-card{min-height:285px}
}


/* LATec POS V3.7 - Tổng Quan đồng bộ giao diện Báo Cáo */
.overview-business-shell{
  margin-bottom:18px;
}
.overview-business-shell .business-report-titlebar{
  background:
    radial-gradient(circle at 88% 12%,rgba(255,255,255,.22),transparent 28%),
    linear-gradient(110deg,#176a9f 0%,#267fb8 52%,#55b8d6 100%);
}
.overview-business-shell .business-report-kicker{
  color:#dff5ff;
}
.overview-report-filters{
  position:sticky;
  top:0;
  z-index:4;
}
.overview-quick-actions{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  padding:16px;
  background:linear-gradient(135deg,#f4f9fd,#eef9f7);
}
.overview-action{
  min-height:86px;
  display:grid;
  grid-template-columns:42px 1fr;
  grid-template-rows:auto auto;
  column-gap:10px;
  align-items:center;
  text-align:left;
  padding:14px;
  border:1px solid #d4e5f1;
  border-radius:18px;
  background:#fff;
  color:#173c56;
  box-shadow:0 8px 24px rgba(39,91,130,.08);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.overview-action:hover{
  transform:translateY(-2px);
  border-color:#7fc0df;
  box-shadow:0 12px 28px rgba(39,91,130,.14);
}
.overview-action>span{
  grid-row:1/3;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg,#e4efff,#e6faf3);
  font-size:22px;
}
.overview-action b{
  align-self:end;
  font-size:14px;
}
.overview-action small{
  align-self:start;
  color:#668093;
  font-size:11px;
}
@media(max-width:1000px){
  .overview-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .overview-quick-actions{grid-template-columns:1fr}
  .overview-report-filters{position:static}
}


/* V3.8 - Nguyên vật liệu / công thức / sản xuất */
.material-hero{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:24px 26px;border-radius:28px;margin-bottom:18px;
  background:linear-gradient(115deg,rgba(109,94,252,.16),rgba(81,190,214,.2),rgba(203,245,227,.48));
  border:1px solid rgba(109,94,252,.14);box-shadow:0 18px 50px rgba(31,41,77,.08)
}
.material-hero h2{margin:5px 0 8px;font-size:clamp(22px,2.2vw,34px);letter-spacing:.01em}
.material-hero p{margin:0;color:var(--muted);max-width:820px;line-height:1.55}
.material-kicker{font-size:12px;font-weight:800;letter-spacing:.12em;color:#6457ef;text-transform:uppercase}
.material-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.material-kpi-grid article{
  min-height:118px;padding:18px 20px;border-radius:22px;background:rgba(255,255,255,.9);
  border:1px solid rgba(116,105,244,.15);box-shadow:0 12px 36px rgba(44,52,89,.07)
}
.material-kpi-grid article:nth-child(1){background:linear-gradient(145deg,#fff,#eef1ff)}
.material-kpi-grid article:nth-child(2){background:linear-gradient(145deg,#fff,#fff1ea)}
.material-kpi-grid article:nth-child(3){background:linear-gradient(145deg,#fff,#eafbf5)}
.material-kpi-grid article:nth-child(4){background:linear-gradient(145deg,#fff,#edf8ff)}
.material-kpi-grid span{display:block;color:#667085;font-size:12px;font-weight:800;letter-spacing:.06em}
.material-kpi-grid strong{display:block;font-size:32px;margin:8px 0 3px;color:#17213b}
.material-kpi-grid small{color:#7b849d}
.material-top-grid{align-items:start}
.material-alert-list{display:grid;gap:10px;margin:12px 0 18px;max-height:520px;overflow:auto}
.material-alert{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 14px;border-radius:16px;border:1px solid #ececfb;background:#fafaff}
.material-alert.critical{border-color:#ffb8bd;background:#fff3f4}
.material-alert.warning{border-color:#ffd9a4;background:#fff9ed}
.material-alert div{display:flex;flex-direction:column;gap:3px}
.material-alert div:last-child{text-align:right}
.material-alert span,.material-alert small{color:#76819b;font-size:12px}
.material-alert strong{color:#5547e8}
.status-pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800;white-space:nowrap}
.status-pill.success{background:#e7f8ef;color:#168454}
.status-pill.warning{background:#fff2d8;color:#9a6100}
.status-pill.danger{background:#ffe8ea;color:#c4313d}
.recipe-components{display:grid;gap:9px}
.recipe-component-row{display:grid;grid-template-columns:minmax(180px,2fr) 1fr .8fr .8fr auto;gap:8px;align-items:center;padding:9px;border-radius:15px;background:#f8f8ff;border:1px dashed #dcdcf8}
.recipe-component-row input,.recipe-component-row select{min-width:0}
.compact-search{max-width:320px}
.readonly-panel{opacity:.72}
.empty-state{padding:24px;text-align:center;color:#8991a7;border:1px dashed #dfe2ef;border-radius:16px}
.material-top-grid .result-box{margin-top:10px}
.recipe-grid{align-items:start}
#materials .table-wrap table td{vertical-align:middle}
#materials .card h3{margin-top:0}
#materials .grid.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:1100px){
  .material-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .recipe-component-row{grid-template-columns:1fr 1fr 1fr 1fr auto}
}
@media (max-width:760px){
  .material-hero{align-items:flex-start;flex-direction:column;padding:18px}
  .material-kpi-grid{grid-template-columns:1fr 1fr}
  #materials .grid.two,#materials .grid.three{grid-template-columns:1fr}
  .recipe-component-row{grid-template-columns:1fr 1fr}
  .recipe-component-row .recipe-material-select{grid-column:1/-1}
  .recipe-component-row .recipe-component-remove{justify-self:end}
}


/* LATec POS V3.8.3 - Material master data */
.compact-form{
  align-items:end;
}
.compact-form .inline{
  align-self:center;
  min-height:42px;
}
#materialCatalogPanel .table-wrap{
  margin-top:14px;
  max-height:260px;
  overflow:auto;
}
#matFactor[readonly]{
  background:linear-gradient(135deg,#f4f3ff,#eefbfa);
  color:#4f46a5;
  font-weight:700;
}
#matFactorHint{
  display:block;
  margin-top:5px;
}
@media (max-width: 900px){
  #materialCatalogPanel{
    grid-template-columns:1fr;
  }
  .compact-form{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   LATec POS V3.9 - Cash / Két tiền & Hoa hồng / KPI
   ========================================================= */
.module-hero{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  padding:24px 28px;
  margin-bottom:18px;
  border:1px solid rgba(103,88,239,.18);
  border-radius:26px;
  background:linear-gradient(125deg,rgba(111,91,255,.18),rgba(75,198,215,.16),rgba(255,255,255,.9));
  box-shadow:0 18px 38px rgba(70,61,150,.08);
}
.module-hero h2{
  margin:5px 0 7px;
  letter-spacing:.02em;
}
.module-hero p{
  margin:0;
  color:var(--muted);
  max-width:760px;
}
.cash-hero{
  background:linear-gradient(125deg,rgba(81,205,151,.18),rgba(83,156,255,.15),rgba(255,255,255,.92));
}
.kpi-hero{
  background:linear-gradient(125deg,rgba(255,198,79,.18),rgba(158,111,255,.16),rgba(255,255,255,.92));
}
.cash-filter-card{
  margin-bottom:18px;
}
.input-button-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
}
.filter-action{
  display:flex;
  align-items:end;
}
.filter-action button{
  width:100%;
  min-height:42px;
}
.cash-warning-banner{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  margin:0 0 18px;
  padding:16px 20px;
  border-radius:18px;
  color:#8a2d00;
  background:linear-gradient(135deg,#fff2d8,#ffe3df);
  border:1px solid #ffc4a8;
  box-shadow:0 12px 26px rgba(197,73,21,.09);
}
.cash-warning-banner.hidden{
  display:none;
}
.cash-kpi-grid .warning{
  background:linear-gradient(135deg,#fff0dc,#ffe0e0);
  border-color:#ffb5a8;
}
.cash-kpi-grid .warning strong{
  color:#d33b2f;
}
.kpi-score{
  display:inline-flex;
  min-width:58px;
  justify-content:center;
  padding:5px 9px;
  border-radius:999px;
  font-weight:800;
  background:#eeebff;
  color:#5141ce;
}
.kpi-score.good{
  color:#0c7a4f;
  background:#dcf8eb;
}
.kpi-score.warn{
  color:#a35a00;
  background:#fff1d5;
}
.kpi-score.bad{
  color:#b92727;
  background:#ffe1e1;
}
.cash-action-stack{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
@media(max-width:1000px){
  .module-hero{
    align-items:flex-start;
    flex-direction:column;
  }
}
@media(max-width:720px){
  .cash-warning-banner{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* Nghiệp vụ mở rộng: CRM, voucher, mua hàng, đặt bàn và đối soát */
.compact-grid{gap:10px 12px}
.compact-kpis{margin-bottom:18px;border:1px solid var(--line);border-radius:22px;overflow:hidden}
.voucher-entry{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:8px}
.voucher-entry button{white-space:nowrap}
.module-hero .hero-badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.module-hero .hero-badges span{padding:7px 11px;border:1px solid rgba(82,69,190,.17);border-radius:999px;background:rgba(255,255,255,.72);font-size:12px;font-weight:800;color:#5141ce;white-space:nowrap}
.table-wrap.compact{max-height:320px;overflow:auto}
@media(max-width:720px){
  .voucher-entry{grid-template-columns:1fr}
  .module-hero .hero-badges{justify-content:flex-start}
}


/* =========================================================
   LATec POS - Task UI, charts, compact scroll menu
   ========================================================= */

/* Trả font về kích thước chuẩn, tăng 1 cấp so với bản compact */
html{font-size:16px}
body,button,input,select,textarea,table,th,td,label,small,span,p,a{font-size:inherit}
label{font-size:14px}
.topbar h2{font-size:23px}
.card h3{font-size:20px}
h1{font-size:2rem}
h2{font-size:1.7rem}
h3{font-size:1.3rem}
h4{font-size:1.08rem}

/* Sidebar gọn hơn và luôn cuộn được */
.sidebar{
  height:100vh;
  max-height:100vh;
  overflow:hidden;
  padding:13px 12px 12px;
  gap:9px;
}
.sidebar .brand{
  flex:0 0 auto;
  padding:2px 5px 7px;
}
.sidebar nav{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:2px 4px 8px 1px;
  scrollbar-width:thin;
  scrollbar-color:#b9b3ef transparent;
}
.sidebar nav::-webkit-scrollbar{width:7px}
.sidebar nav::-webkit-scrollbar-thumb{
  background:linear-gradient(#beb7f4,#8bd8c8);
  border-radius:999px;
}
.sidebar nav::-webkit-scrollbar-track{background:transparent}
.sidebar #logoutBtn{
  flex:0 0 auto;
  padding:10px 12px;
}
.nav{
  min-height:44px;
  padding:6px 9px;
  gap:8px;
  border-radius:15px;
  line-height:1.18;
}
.nav::before{
  width:30px;
  height:30px;
  min-width:30px;
  border-radius:11px;
  font-size:15px;
}
.brand strong{font-size:17px}
.brand span{font-size:11px}

/* Task navigation */
.task-nav{
  position:sticky;
  top:76px;
  z-index:3;
  display:flex;
  gap:8px;
  align-items:center;
  overflow-x:auto;
  margin:0 0 18px;
  padding:9px;
  border:1px solid rgba(222,217,255,.92);
  border-radius:20px;
  background:rgba(255,255,255,.92);
  box-shadow:0 12px 28px rgba(73,61,142,.09);
  backdrop-filter:blur(16px);
  scrollbar-width:thin;
}
.task-tab{
  flex:0 0 auto;
  padding:10px 14px;
  border-radius:15px;
  color:#4d5871;
  background:#f8f7ff;
  border:1px solid #e7e3ff;
  box-shadow:none;
}
.task-tab:hover{
  background:#efedff;
  color:#4d43c7;
}
.task-tab.active{
  color:#fff;
  background:linear-gradient(135deg,#7367f0,#54bdd8);
  border-color:transparent;
  box-shadow:0 10px 22px rgba(92,80,210,.23);
}
.task-panel{display:none}
.task-panel.active{
  display:block;
  animation:taskFade .18s ease;
}
.task-panel > * + *{margin-top:18px}
@keyframes taskFade{
  from{opacity:.25;transform:translateY(4px)}
  to{opacity:1;transform:none}
}
.accounts-hero{
  background:linear-gradient(125deg,rgba(114,103,240,.16),rgba(104,198,218,.15),rgba(255,255,255,.92));
}
.notifications-hero{
  background:linear-gradient(125deg,rgba(255,196,72,.17),rgba(114,103,240,.14),rgba(255,255,255,.92));
}

/* Biểu đồ dạng thanh nhẹ, không phụ thuộc thư viện ngoài */
.task-chart-grid{margin-bottom:18px}
.task-chart-card{overflow:hidden}
.chart-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:linear-gradient(135deg,#f0edff,#e8fbf7);
  color:#5b50d9;
  border:1px solid #ded9ff;
  font-size:12px;
  font-weight:800;
}
.simple-bar-chart{
  display:grid;
  gap:11px;
  min-height:150px;
  padding-top:12px;
}
.chart-empty{
  min-height:140px;
  display:grid;
  place-items:center;
  color:#7a8498;
  border:1px dashed #ded9ff;
  border-radius:16px;
  background:linear-gradient(135deg,#fbfaff,#f1fcf9);
}
.simple-bar-row{
  display:grid;
  grid-template-columns:minmax(95px,155px) minmax(140px,1fr) auto;
  gap:10px;
  align-items:center;
}
.simple-bar-label{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#46516a;
  font-weight:700;
}
.simple-bar-track{
  height:14px;
  border-radius:999px;
  overflow:hidden;
  background:#eeecfb;
  box-shadow:inset 0 0 0 1px rgba(218,214,244,.7);
}
.simple-bar-fill{
  height:100%;
  min-width:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#7367f0,#55bdd7);
  transition:width .25s ease;
}
.simple-bar-fill.alt{
  background:linear-gradient(90deg,#49bf8d,#8bd8bd);
}
.simple-bar-value{
  min-width:84px;
  text-align:right;
  color:#25215f;
  font-weight:800;
}

/* Bảng nhiều dòng: chỉ hiển thị khoảng 10 dòng, cuộn để xem tiếp */
.table-wrap{
  overflow:auto;
  max-width:100%;
  scrollbar-width:thin;
  scrollbar-color:#b9b3ef #f6f5ff;
}
.table-wrap.rows-scroll-10{
  border-radius:18px;
  padding-right:3px;
}
.table-wrap::-webkit-scrollbar{width:8px;height:8px}
.table-wrap::-webkit-scrollbar-thumb{
  background:linear-gradient(#b9b3ef,#85d5c5);
  border-radius:999px;
}
.table-wrap thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:#f8f7ff;
  box-shadow:0 1px 0 #e8e4fa;
}
#notificationsList{
  max-height:560px;
  overflow:auto;
  padding-right:4px;
  scrollbar-width:thin;
}

/* Task forms and cards */
.task-panel .grid + .card,
.task-panel .card + .grid{margin-top:18px}
.task-panel .grid.two > .card,
.task-panel .grid.three > .card{height:100%}
.task-panel .card{
  scroll-margin-top:150px;
}

@media(max-width:1100px){
  .simple-bar-row{grid-template-columns:110px minmax(100px,1fr) auto}
  .task-nav{top:70px}
}
@media(max-width:900px){
  html{font-size:15px}
  .sidebar{
    overflow-y:auto;
    padding:12px;
  }
  .sidebar nav{
    overflow:visible;
    flex:0 0 auto;
  }
  .task-nav{
    position:sticky;
    top:68px;
    border-radius:16px;
  }
  .task-tab{padding:9px 12px}
  .simple-bar-row{
    grid-template-columns:90px minmax(80px,1fr) auto;
    font-size:13px;
  }
}
@media(max-width:640px){
  .task-chart-grid{grid-template-columns:1fr}
  .simple-bar-row{grid-template-columns:80px minmax(70px,1fr) auto}
  .simple-bar-value{min-width:62px}
}


/* ==========================================================================
   LATec POS - LEAD&AIM Platform compatibility layer
   Business layout and workflows are retained; presentation is normalized.
   ========================================================================== */
:root{
  --bg:#f4f6f8;
  --card:#ffffff;
  --ink:#182230;
  --muted:#5f6b7a;
  --line:#d9e0e8;
  --primary:#174f8a;
  --primary2:#112240;
  --primary3:#15803d;
  --soft:#eef3f8;
  --soft2:#edf7f0;
  --danger:#b42318;
  --ok:#15803d;
  --warn:#b54708;
  --radius:10px;
  --shadow:0 2px 8px rgba(17,34,64,.08);
}
html,body{background:#f4f6f8!important;color:var(--ink)!important}
body{font-family:"Segoe UI",Arial,sans-serif!important;font-size:14px;line-height:1.45}
*:focus-visible{outline:3px solid rgba(23,79,138,.28)!important;outline-offset:2px}
.skip-link{position:fixed;left:12px;top:-60px;z-index:100;background:#fff;color:#112240;padding:10px 14px;border:2px solid #174f8a;border-radius:6px}
.skip-link:focus{top:12px}
.network-banner{position:fixed;top:0;left:0;right:0;z-index:100;background:#fff4e5;color:#7a2e0e;border-bottom:1px solid #f2c188;padding:8px 16px;text-align:center;font-weight:700}
.login-shell{background:#eef3f8!important;padding:24px}
.login-card{background:#fff!important;border:1px solid #d9e0e8!important;border-radius:12px!important;box-shadow:0 8px 24px rgba(17,34,64,.12)!important;backdrop-filter:none!important;max-width:460px}
.login-card h1{color:#112240!important;letter-spacing:0!important;margin-bottom:2px}
.product-version{font-size:12px!important;color:#174f8a!important;font-weight:700;margin:0 0 8px!important}
.brand-logo,.brand-logo.login-logo,.brand-logo.small{border-radius:8px!important;box-shadow:none!important}
.tabs{background:#eef3f8!important;border-radius:8px!important}
.tab{border-radius:6px!important}.tab.active{background:#fff!important;color:#174f8a!important;box-shadow:0 1px 3px rgba(17,34,64,.12)!important}
button{border-radius:8px!important;min-height:40px;padding:9px 14px;transition:background-color .15s,border-color .15s,box-shadow .15s!important}
button:active{transform:none!important}
input,select,textarea{min-height:40px!important;border:1px solid #cbd5df!important;border-radius:8px!important;background:#fff!important;box-shadow:none!important;padding:8px 10px!important}
input:focus,select:focus,textarea:focus{border-color:#174f8a!important;box-shadow:0 0 0 3px rgba(23,79,138,.12)!important}
.primary{background:#174f8a!important;color:#fff!important}
.primary:hover{background:#123f70!important}
.secondary{background:#e8eef5!important;color:#174f8a!important;border:1px solid #cbd8e6!important}
.secondary:hover{background:#dce7f2!important}
.danger{background:#b42318!important;color:#fff!important}
.ghost{background:transparent!important;border:1px solid rgba(255,255,255,.32)!important;color:inherit!important}
.app-shell{grid-template-columns:248px minmax(0,1fr)!important}
.sidebar{background:#112240!important;color:#fff!important;padding:14px 12px!important;gap:12px!important;box-shadow:none!important}
.sidebar .brand{padding:4px 6px 12px;border-bottom:1px solid rgba(255,255,255,.13)}
.sidebar .brand strong{font-size:16px}.sidebar .brand span{color:#c2ccda!important}
.sidebar nav{gap:3px!important;overflow:auto}
.nav{min-height:42px!important;padding:9px 12px!important;color:#fff!important;border-radius:6px!important;font-weight:600!important}
.nav:hover{background:#1b325f!important;color:#fff!important}
.nav.active{background:#a6caec!important;color:#112240!important}
.nav::before,.nav::after{display:none!important}
.sidebar-footer{margin-top:auto;padding:10px 8px 4px;border-top:1px solid rgba(255,255,255,.13);display:grid;gap:2px;color:#fff}
.sidebar-footer span{font-weight:700}.sidebar-footer small{color:#b9c5d4;font-size:10px;line-height:1.3}
#logoutBtn{margin-top:0;color:#fff!important}
.main{background:#f4f6f8!important}
.topbar{height:64px!important;background:#fff!important;backdrop-filter:none!important;border-bottom:1px solid #d9e0e8!important;padding:0 20px!important;box-shadow:none!important}
.top-heading{display:grid;align-content:center}
.breadcrumb{font-size:11px;color:#687587;line-height:1.2}
.breadcrumb span{font-size:11px!important;color:#687587!important}
.topbar h2{font-size:19px!important;color:#112240;margin:1px 0!important}
.topbar #todayText{font-size:11px}
.connection-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid #b9d7c0;background:#edf7f0;color:#146c2e!important;border-radius:999px;padding:6px 9px;font-size:11px!important;font-weight:700}
.connection-pill.offline{border-color:#efc6a5;background:#fff4e5;color:#9a3b0f!important}
.pill{background:#eef3f8!important;color:#112240!important;border-radius:999px!important}
.page{padding:18px 20px!important}
.card,.kpi,.report-card,.ticket,.table-card,.operation-card,.business-kpi-card,.business-chart-card,.task-chart-card,.modal-card{
  background:#fff!important;border:1px solid #d9e0e8!important;border-radius:10px!important;box-shadow:var(--shadow)!important;backdrop-filter:none!important
}
.card{padding:16px!important}.card h3{color:#112240}
.kpis{gap:12px!important;margin-bottom:14px!important}.kpi{padding:14px!important}.kpi b{font-size:23px!important}
.grid{gap:14px!important}.grid.two{gap:14px!important}
.business-report-shell,.overview-business-shell,.business-report-titlebar,.business-chart-body,.task-nav,.task-panel,.qr-payment-info,.result-box{
  background:#fff!important;background-image:none!important;border-radius:10px!important;box-shadow:none!important
}
.business-report-shell{border:1px solid #d9e0e8!important}
.business-report-titlebar{background:#112240!important;color:#fff!important;border-radius:9px 9px 0 0!important}
.business-report-titlebar h2,.business-report-titlebar *{color:inherit!important}
.task-nav{border:1px solid #d9e0e8!important;padding:8px!important}
.task-tab{background:#eef3f8!important;color:#344054!important;border:1px solid #d9e0e8!important;border-radius:6px!important}
.task-tab.active{background:#a6caec!important;color:#112240!important;border-color:#8fb9df!important}
.product,.table-card,.ticket{border-radius:8px!important;box-shadow:none!important}
.product:hover{border-color:#174f8a!important;box-shadow:0 0 0 2px rgba(23,79,138,.08)!important}
.chip,.flow span,.badge,.operation-card span{border-radius:999px!important}
.chip.active{background:#174f8a!important}
.cart{top:82px!important}
table{border-collapse:separate!important;border-spacing:0!important;border:1px solid #d9e0e8!important;border-radius:8px;overflow:hidden}
th,td{padding:9px 10px!important;border-bottom:1px solid #e5e9ef!important;vertical-align:middle}
th{background:#eef3f8!important;color:#25364b!important;font-weight:700;position:sticky;top:0}
tbody tr:nth-child(even){background:#fafbfc}
tbody tr:hover{background:#f1f6fb}
td:last-child,th:last-child{text-align:left}
.table-wrap{border-radius:8px!important;scrollbar-color:#9cabbc #eef2f6!important}
.table-wrap::-webkit-scrollbar-thumb{background:#9cabbc!important;border-radius:8px!important}
.simple-bar-fill,.simple-bar-fill.alt,.bar-row b{background:#174f8a!important}
.simple-bar-track,.bar-row>div{background:#e8eef5!important}
.modal{background:rgba(17,34,64,.58)!important}
.modal-card{border-radius:10px!important}
.toast{background:#112240!important;border-radius:8px!important;box-shadow:0 5px 18px rgba(17,34,64,.25)!important}
.language-box{display:flex!important}.lang-select{background:#fff!important;color:#174f8a!important;border-radius:8px!important}
body *{background-image:none}
@media(max-width:1050px){
  .app-shell{grid-template-columns:1fr!important}
  .sidebar{width:248px!important;left:-260px!important}
  .sidebar.open{left:0!important}
}
@media(max-width:680px){
  .topbar{height:auto!important;min-height:64px;padding:8px 10px!important;gap:8px}
  .top-actions{gap:5px!important}.connection-pill{display:none}
  .page{padding:12px!important}
  button,input,select,textarea{min-height:44px!important}
  .business-report-titlebar{align-items:flex-start!important}
}

/* LATec POS V11 — LATec-Invoice, HSM-LATec, RBAC, P55 and LATec Licensing */
.invoice-hero{background:#fff!important;border-left:5px solid #174f8a!important}
.hsm-hero{background:#fff!important;border-left:5px solid #112240!important}
.manual-safety-banner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 16px;padding:14px 16px;
  background:#fff8e8;border:1px solid #efcf88;border-radius:8px;color:#5f4300
}
.manual-safety-banner>div{display:grid;gap:4px}.manual-safety-banner span{font-size:13px}
.phase-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 16px}
.phase-grid article{display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:3px;padding:14px;background:#fff;border:1px solid #d9e0e8;border-radius:8px}
.phase-grid article>span{grid-row:1/3;display:grid;place-items:center;width:36px;height:36px;border-radius:7px;background:#a6caec;color:#112240;font-weight:900}
.phase-grid b{color:#112240}.phase-grid small{color:#687587;line-height:1.35}
.locked-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px;background:#f5f7fa;border:1px solid #d9e0e8;border-radius:8px}
.locked-options label{color:#44546a}.config-summary{display:grid;gap:10px}.config-summary .config-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #e5e9ef}
.config-summary .config-row span{color:#687587}.config-summary .config-row b{text-align:right;color:#112240}
.security-note{margin-top:16px;padding:14px;background:#eef3f8;border-left:4px solid #174f8a;border-radius:6px}.security-note p{margin:6px 0 0;color:#44546a;line-height:1.5}
.role-heading{margin:0 0 14px}.role-heading h3{margin:0 0 4px;color:#112240}.role-heading p{margin:0}
.role-create-form{margin:0 0 14px}.role-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.role-card{display:flex;flex-direction:column;min-height:250px;padding:18px;background:#fff;border:1px solid #d9e0e8;border-radius:8px;box-shadow:0 2px 8px rgba(17,34,64,.05)}
.role-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.role-title{display:flex;gap:10px;align-items:flex-start}.role-icon{display:grid;place-items:center;width:40px;height:40px;min-width:40px;border-radius:8px;background:#a6caec;color:#112240}
.role-card h4{margin:0;color:#112240}.role-code{display:inline-flex;margin-top:4px;padding:3px 7px;border-radius:4px;background:#eef3f8;color:#44546a;font:700 11px ui-monospace,SFMono-Regular,Consolas,monospace}
.system-badge{display:inline-flex;padding:5px 8px;border-radius:4px;background:#e7f1fb;color:#174f8a;font-size:11px;font-weight:800;white-space:nowrap}
.role-card>p{min-height:42px;color:#687587;line-height:1.45}.role-permission-count{display:grid;place-items:center;gap:2px;margin:auto 0 14px;padding:13px;background:#eef3f8;border-radius:7px;color:#44546a}
.role-permission-count strong{font-size:26px;color:#112240}.role-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.role-actions button{min-height:40px;padding:8px}
.role-actions .danger:disabled{opacity:.45;cursor:not-allowed;background:#eef1f4!important;color:#8491a3;border-color:#d9e0e8}
.permission-modal-card{width:min(900px,96vw);max-height:90vh;display:flex;flex-direction:column;overflow:hidden}.permission-modal-head{display:flex;gap:12px;align-items:center;padding-right:44px}.permission-modal-head h3{margin:0}
.permission-matrix{display:grid;gap:12px;margin:16px 0;overflow:auto;padding-right:4px;min-height:120px}.permission-group{border:1px solid #d9e0e8;border-radius:8px;overflow:hidden;background:#fff;opacity:1}.permission-group h4{margin:0;padding:10px 12px;background:#eef3f8;color:#112240;line-height:1.35}.permission-group h4 small{float:right;color:#687587;font-weight:500}.permission-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#e5e9ef}.permission-option{display:flex;align-items:flex-start;gap:9px;padding:11px;background:#fff;min-height:54px;opacity:1}.permission-option input{width:auto;min-height:auto;margin-top:3px}.permission-option b{display:block;color:#112240;font:700 12px ui-monospace,SFMono-Regular,Consolas,monospace}.permission-option small{display:block;margin-top:2px;color:#687587;line-height:1.35}.permission-load-state{display:flex;align-items:center;justify-content:center;gap:10px;min-height:180px;padding:24px;border:1px dashed #b9c7d8;border-radius:10px;background:#f7f9fc;color:#334155}.permission-load-state.error{flex-direction:column;text-align:center;color:#9f1239}.permission-load-state.error span{color:#687587}.permission-spinner{width:22px;height:22px;border:3px solid #cdd9e7;border-top-color:#1769aa;border-radius:50%;animation:permission-spin .8s linear infinite}@keyframes permission-spin{to{transform:rotate(360deg)}}
.permission-modal-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid #d9e0e8}
@media(max-width:1000px){.phase-grid,.role-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.phase-grid,.role-card-grid,.permission-options,.locked-options{grid-template-columns:1fr}.manual-safety-banner,.permission-modal-actions{align-items:flex-start;flex-direction:column}.role-actions{grid-template-columns:1fr}.permission-modal-card{max-height:94vh}}


/* =========================================================
   LATec POS - Graphic dashboards & cash safety controls
   ========================================================= */
.graphic-dashboard-grid{
  display:grid;
  gap:18px;
  margin-bottom:18px;
}
.graphic-dashboard-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.graphic-dashboard-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.graphic-card{
  min-width:0;
  background:
    radial-gradient(circle at 100% 0,rgba(40,127,184,.08),transparent 38%),
    linear-gradient(180deg,#fff,#fbfdff);
  border:1px solid #dbe8f3;
}
.graphic-card h3{font-size:16px;color:#153d59}
.graphic-chart-body{
  height:235px;
  min-height:235px;
  display:grid;
  align-items:center;
  overflow:hidden;
}
.graphic-chart-body .chart-svg{height:220px}
.graphic-chart-body .donut-wrap{height:220px}
.compact-bars{
  min-height:205px;
  max-height:235px;
  overflow:auto;
  padding-right:4px;
}
.compact-bars .simple-bar-row{
  grid-template-columns:minmax(82px,125px) minmax(80px,1fr) auto;
  font-size:12px;
}
.compact-bars .simple-bar-track{height:12px}
.compact-bars .simple-bar-value{min-width:70px}
.notification-kpi-grid{
  margin-bottom:18px;
  border:1px solid #dbe8f3;
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.notification-kpi-card{min-height:126px}
.notification-kpi-card strong{font-size:34px}
.notification-kpi-card.warning-tone{
  background:linear-gradient(145deg,#fffaf0,#fff);
}
.notification-kpi-card.warning-tone strong{color:#d97706}
.notification-kpi-card.success-tone{
  background:linear-gradient(145deg,#effcf6,#fff);
}
.notification-kpi-card.success-tone strong{color:#159768}
.cash-kpi-grid .business-kpi-card{
  background:linear-gradient(145deg,#fff,#f7fbff);
}
.cash-kpi-grid .business-kpi-card:nth-child(2){
  background:linear-gradient(145deg,#f1fcf8,#fff);
}
.cash-kpi-grid .business-kpi-card:nth-child(3){
  background:linear-gradient(145deg,#eef7ff,#fff);
}
.cash-kpi-grid .business-kpi-card.warning{
  background:linear-gradient(145deg,#fff5e8,#fff);
}
.deposit-balance-hint{
  display:block;
  margin-top:-5px;
  padding:8px 10px;
  border-radius:10px;
  background:#eef8ff;
  color:#245f86;
  font-weight:700;
  line-height:1.35;
}
.deposit-balance-hint.invalid{
  background:#fff1f2;
  color:#b42318;
}
#cashDepositAmount:invalid{
  border-color:#dc2626;
  box-shadow:0 0 0 3px rgba(220,38,38,.10);
}
#cashDepositBtn:disabled{
  cursor:not-allowed;
  opacity:.55;
}
.notification-card{
  position:relative;
  overflow:hidden;
  border-left:5px solid #287fb8;
}
.notification-card:has(.badge.WARNING),
.notification-card:has(.badge.ERROR),
.notification-card:has(.badge.DANGER){border-left-color:#f59e0b}
.operations-grid .operation-card{
  background:
    linear-gradient(145deg,#fff,#f6f9fd);
  border:1px solid #dbe8f3;
}
@media(max-width:1350px){
  .graphic-dashboard-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .graphic-dashboard-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .graphic-dashboard-grid-3,
  .graphic-dashboard-grid-4{grid-template-columns:1fr}
  .graphic-chart-body{height:220px;min-height:220px}
  .notification-kpi-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .notification-kpi-grid{grid-template-columns:1fr}
}

/* LATec Platform V2 / shared tenant licensing */
.license-badge{
  display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;
  background:#eaf8f1;color:#117a51;border:1px solid #bde8d2;font-size:12px;font-weight:900;white-space:nowrap;
}
.license-badge.grace,.license-badge.not_yet_valid{background:#fff6df;color:#9a6100;border-color:#f2d79a}
.license-badge.expired,.license-badge.revoked,.license-badge.suspended{background:#fff0f1;color:#b42335;border-color:#f0c3c8}
.platform-hero{
  background:
    radial-gradient(circle at 90% 10%,rgba(62,201,141,.28),transparent 34%),
    linear-gradient(135deg,#102744 0%,#17436a 58%,#126348 100%);
  color:#fff;border:0;
}
.platform-hero .business-report-kicker,.platform-hero h2,.platform-hero p{color:#fff}
.platform-hero .secondary{background:#fff;color:#17436a;border-color:#fff}
.platform-kpi-grid{margin:18px 0;border:1px solid #dbe8f3;border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.platform-kpi-grid .business-kpi-card{background:linear-gradient(145deg,#fff,#f7fbff)}
.platform-kpi-grid .business-kpi-card:nth-child(3){background:linear-gradient(145deg,#eefbf5,#fff)}
.platform-kpi-grid .business-kpi-card.warning-tone{background:linear-gradient(145deg,#fff7e7,#fff)}
.platform-kpi-grid .warning-tone strong{color:#c56a00}
.platform-grid{align-items:start}
#platform-admin .grid.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#platform-admin .compact-grid{gap:10px}
#platform-admin .card h3{color:#153d59}
#platform-admin .table-wrap td{vertical-align:top}
.platform-actions{gap:4px;min-width:176px}
.platform-actions button{white-space:nowrap}
@media(max-width:1050px){
  .platform-kpi-grid{grid-template-columns:repeat(2,1fr)}
  #platform-admin .platform-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .license-badge{display:none}
  .platform-kpi-grid{grid-template-columns:1fr}
  #platform-admin .grid.two,#platform-admin .grid.three{grid-template-columns:1fr}
}