:root{
  --bg:#f4f6fa; --panel:#fff; --ink:#1d2433; --muted:#6b7585;
  --line:#e6e9f0; --brand:#1f8f6f; --brand-d:#157057; --accent:#2d6cdf;
  --warn:#e08600; --danger:#d34a4a; --ok:#1f8f6f;
  --kham:#2d6cdf; --petshop:#1f8f6f; --spa:#9b59b6;
  --radius:10px; --shadow:0 1px 3px rgba(20,30,50,.08),0 4px 16px rgba(20,30,50,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;background:var(--bg);color:var(--ink);font-size:14px}
.hidden{display:none!important}
button{cursor:pointer;font-family:inherit}
a{color:var(--accent);text-decoration:none}

/* ---- Login ---- */
.login-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1f8f6f,#157057)}
.login-box{background:#fff;padding:38px 34px;border-radius:16px;width:340px;box-shadow:0 20px 60px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:12px}
.login-logo{font-size:30px;font-weight:800;text-align:center;color:var(--brand)}
.login-logo-img{display:block;width:150px;height:auto;margin:0 auto 4px}
.login-sub{text-align:center;color:var(--muted);font-size:13px;margin-bottom:8px}
.login-box input{padding:11px 13px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.login-box button{padding:11px;background:var(--brand);color:#fff;border:none;border-radius:8px;font-weight:600;font-size:15px}
.login-box button:hover{background:var(--brand-d)}
.login-err{color:var(--danger);font-size:13px;text-align:center;min-height:16px}
.login-hint{text-align:center;color:var(--muted);font-size:12px}

/* ---- Layout ---- */
.app{display:flex;min-height:100vh}
.sidebar{width:230px;background:var(--brand);color:#eafaf4;display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0}
.brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:800;color:#fff;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.18)}
.brand-logo{width:40px;height:40px;flex:none;border-radius:50%;object-fit:contain;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.15)}
#nav{flex:1;overflow-y:auto;padding:10px 0}
.nav-item{display:flex;align-items:center;gap:11px;padding:11px 22px;color:#eafaf4;cursor:pointer;font-size:14px;border-left:3px solid transparent}
.nav-item:hover{background:rgba(255,255,255,.14)}
.nav-item.active{background:rgba(255,255,255,.22);border-left-color:#fff;color:#fff;font-weight:600}
.nav-ico{width:20px;text-align:center}
.sidebar-foot{padding:14px 22px;border-top:1px solid rgba(255,255,255,.18);font-size:13px}
#userBox{margin-bottom:8px;line-height:1.4}
#userBox b{color:#fff}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.4);color:#eafaf4;padding:7px 12px;border-radius:7px;width:100%}
.btn-ghost:hover{background:rgba(255,255,255,.16)}

.main{flex:1;margin-left:230px;display:flex;flex-direction:column;height:100vh;overflow:hidden}
/* Chế độ kiosk: màn bán hàng riêng, ẩn sidebar cho gọn */
body.kiosk .sidebar{display:none}
body.kiosk .main{margin-left:0}
/* Kiosk có nhiều chiều cao hơn (không sidebar) → giỏ hàng hiển thị nhiều dòng hơn */
body.kiosk .pos2{min-height:calc(100vh - 96px)}
body.kiosk .pos-cartarea{min-height:52vh}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 26px;background:var(--panel);border-bottom:1px solid var(--line);flex:none;z-index:10}
.topbar h1{font-size:20px}
.topbar-right{display:flex;align-items:center;gap:14px}
.top-actions{display:flex;gap:10px}
/* Header nằm ngang: tiêu đề | 3 bảng thông báo (giữa) | chuông. Nội dung dưới cuộn nội bộ. */
.topbar{gap:16px;padding:8px 22px;align-items:center}
.topbar-left{display:flex;flex-direction:column;align-items:flex-start;gap:6px;flex:none}
#pageTitle{flex:none;white-space:nowrap}
.view{flex:1;min-height:0;overflow:auto}

/* ---- 3 bảng thông báo NẰM TRONG header (giữa) — chỉ hiện ở trang POS ---- */
.noti-bar{flex:1;min-width:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
body.noti-hidden .noti-bar{display:none}
body:not(.route-pos) #notiBar,body:not(.route-pos) #notiWrap{display:none}
.nb-panel{background:#fff;border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;min-width:0;height:92px;overflow:hidden}
.nb-head{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 10px;background:#fafbfd;border-bottom:1px solid var(--line)}
.nb-title{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.nb-title:hover{color:var(--brand)}
.nb-right{display:inline-flex;align-items:center;gap:6px;flex:none}
.nb-list{flex:1;overflow-y:auto;padding:1px 0}
.nb-list .noti-empty{padding:10px;text-align:center;color:var(--muted);font-size:12px}
/* item 2 dòng: việc + chủ nuôi (tên·SĐT), nút ngày nổi bật */
.noti-item2{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 10px;border-top:1px solid #f2f4f8}
.noti-item2:first-child{border-top:none}
.ni-main{min-width:0;flex:1}
.ni-pet{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ni-owner{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.ni-owner a{color:var(--accent);font-weight:600}
.ni-date{flex:none;font-size:11.5px;font-weight:800;padding:3px 8px;border-radius:20px;white-space:nowrap}
.ni-date.d-tiem{background:#e7eefc;color:var(--kham)}
.ni-date.d-tk{background:#fdf0db;color:var(--warn)}
.ni-date.d-spa{background:#f3e8f8;color:var(--spa)}
.nb-panel{height:112px}
.noti-bell.off{opacity:.5}

/* ---- Chuông thông báo (header) ---- */
.noti-wrap{position:relative}
.noti-bell{position:relative;width:40px;height:40px;border:1px solid var(--line);background:#fff;border-radius:10px;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center}
.noti-bell:hover{border-color:var(--brand);background:#f5fbf9}
.noti-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;background:var(--danger);color:#fff;border-radius:20px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.noti-drop{position:absolute;top:calc(100% + 8px);right:0;width:340px;max-height:70vh;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 40px rgba(20,30,50,.18);z-index:60}
.noti-sec{border-bottom:1px solid var(--line)}
.noti-sec:last-child{border-bottom:none}
.noti-sec-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px;font-weight:700;font-size:13px;background:#fafbfd;cursor:pointer}
.noti-sec-head:hover{background:#f3f6fb}
.noti-cnt{min-width:20px;height:20px;padding:0 6px;border-radius:20px;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.noti-cnt.c-tiem{background:#e7eefc;color:var(--kham)}
.noti-cnt.c-tk{background:#fdf0db;color:var(--warn)}
.noti-cnt.c-spa{background:#f3e8f8;color:var(--spa)}
.noti-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 14px;border-top:1px solid #f0f2f6;font-size:13px}
.noti-item .ni-t{color:var(--muted);font-size:11.5px;white-space:nowrap}
.noti-empty{padding:20px 14px;text-align:center;color:var(--muted);font-size:13px}
.noti-none{padding:26px 14px;text-align:center;color:var(--muted);font-size:13.5px}
.noti-sec-head{gap:8px}
.ns-title{flex:1;min-width:0;cursor:pointer}
.ns-title:hover{color:var(--brand)}
.ns-right{display:inline-flex;align-items:center;gap:8px;flex:none}
.noti-add{width:24px;height:24px;border:1px solid var(--brand);color:var(--brand);background:#fff;border-radius:7px;font-size:15px;line-height:1;font-weight:700;display:flex;align-items:center;justify-content:center}
.noti-add:hover{background:var(--brand);color:#fff}
.noti-drop{width:360px}
.view{padding:24px 26px}

/* ---- Buttons ---- */
.btn{padding:9px 16px;border:none;border-radius:8px;background:var(--brand);color:#fff;font-weight:600;font-size:13px}
.btn:hover{background:var(--brand-d)}
.btn.sec{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.sec:hover{background:#f0f2f7}
.btn.sm{padding:5px 10px;font-size:12px}
.btn.danger{background:var(--danger)}

/* ---- Cards / KPI ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-bottom:22px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card .lbl{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.card .val{font-size:25px;font-weight:800;margin-top:6px}
.card .sub{color:var(--muted);font-size:12px;margin-top:3px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:20px}
.panel h2{font-size:16px;margin-bottom:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1100px){.grid3{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.grid3{grid-template-columns:1fr}}

/* ---- Table ---- */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.3px;background:#fafbfd}
tr:hover td{background:#fafbfd}
.num{text-align:right;font-variant-numeric:tabular-nums}
.tools{display:flex;gap:10px;margin-bottom:14px;align-items:center;flex-wrap:wrap}
.search{padding:9px 13px;border:1px solid var(--line);border-radius:8px;min-width:230px;font-size:14px}

/* ---- Badges ---- */
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600}
.b-kham{background:#e7eefc;color:var(--kham)}
.b-petshop{background:#e3f4ee;color:var(--petshop)}
.b-spa{background:#f3e8f8;color:var(--spa)}
.b-warn{background:#fdf0db;color:var(--warn)}
.b-ok{background:#e3f4ee;color:var(--ok)}
.b-danger{background:#fbe6e6;color:var(--danger)}
.b-muted{background:#eef1f5;color:var(--muted)}

/* ---- Form / modal ---- */
.modal-overlay{position:fixed;inset:0;background:rgba(15,25,40,.45);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal{background:#fff;border-radius:14px;width:560px;max-width:100%;max-height:90vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal.wide{width:820px}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-bottom:1px solid var(--line);font-weight:700;font-size:16px}
.modal-x{background:none;border:none;font-size:24px;color:var(--muted);line-height:1}
.modal-body{padding:20px 22px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:5px;font-weight:600}
.field input,.field select,.field textarea{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit}
/* Ô chọn NGÀY nổi bật (form Tiêm/Khám/Spa) */
.date-hl{border:1.5px solid var(--brand)!important;background:#f0faf6;font-weight:700;font-size:15px;color:var(--brand-d)}
.date-hl:focus{outline:none;box-shadow:0 0 0 3px rgba(31,143,111,.15)}
.field textarea{min-height:64px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* Tiêm phòng: khối nhóm + chip vaccine + hàng lịch nhắc */
.tp-block{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:14px;background:#fafbfd}
.tp-block-head{font-weight:700;font-size:13.5px;margin-bottom:10px}
.tp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tp-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--brand);background:#eefaf5;color:var(--ink);border-radius:20px;font-size:12.5px;font-weight:600}
.tp-chip button{border:none;background:none;color:var(--danger);font-size:13px;padding:0 2px;cursor:pointer}
.tp-rem-row{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin-bottom:8px}
.tp-rem-row input[type=date],.tp-rem-row select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13.5px;font-family:inherit}
/* Danh sách vaccine tích chọn (inline, không dropdown — tránh bị ẩn trong modal) */
.tp-vac-list{border:1px solid var(--line);border-radius:8px;max-height:200px;overflow:auto;background:#fff}
.tp-vac-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer;font-size:13.5px}
.tp-vac-item:last-child{border-bottom:none}
.tp-vac-item:hover{background:#f5fbf9}
.tp-vac-item input{width:16px;height:16px;flex:none}
.tp-vac-name{flex:1;font-weight:600}
.tp-vac-gia{color:var(--brand);font-weight:700;font-variant-numeric:tabular-nums}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}

/* ---- POS ---- */
.pos{display:grid;grid-template-columns:1.3fr 1fr;gap:20px}
@media(max-width:1000px){.pos{grid-template-columns:1fr}}
.pos-cart{position:sticky;top:80px;align-self:start}
.cart-line{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line);gap:8px}
.cart-line .qty{width:54px;padding:4px;text-align:center;border:1px solid var(--line);border-radius:6px}
.pick-list{max-height:420px;overflow:auto}
.pick{display:flex;justify-content:space-between;padding:10px 12px;border:1px solid var(--line);border-radius:8px;margin-bottom:8px;cursor:pointer}
.pick:hover{border-color:var(--brand);background:#f5fbf9}
.total-line{display:flex;justify-content:space-between;font-size:15px;margin:6px 0}
.total-line.big{font-size:20px;font-weight:800;color:var(--brand)}

/* ---- POS v2 (giao diện bán hàng hợp nhất) ---- */
.pos2{display:grid;grid-template-columns:1fr 380px;gap:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-height:calc(100vh - 118px)}
@media(max-width:1000px){.pos2{grid-template-columns:1fr}}
.pos-main{display:flex;flex-direction:column;min-width:0}
.pos-searchbar{display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.pos-search-wrap{position:relative;flex:1}
.pos-search-wrap .ps-ico,.cust-search-wrap .ps-ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:13px;opacity:.55;pointer-events:none}
.pos-search-wrap input{width:100%;padding:11px 12px 11px 34px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.pos-search-wrap input:focus,.cust-search-wrap input:focus{outline:none;border-color:var(--brand)}
.pos-branch{display:flex;align-items:center;gap:6px;white-space:nowrap}
.pos-drop{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);max-height:340px;overflow:auto;z-index:30}
.pos-drop.khdrop{z-index:31}
.drop-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--line)}
.drop-item:last-child{border-bottom:none}
.drop-item:hover{background:#f5fbf9}
.drop-name{font-weight:600;font-size:13.5px}
.drop-sub{color:var(--muted);font-size:12px;margin-top:2px}
.drop-empty{padding:12px;color:var(--muted);font-size:13px;text-align:center}
.tagchip{display:inline-block;padding:1px 7px;border-radius:20px;font-size:10.5px;font-weight:700}
.tagchip.t-kho{background:#e7f4ef;color:var(--brand)}
.tagchip.t-dv{background:#eaf1fd;color:var(--kham)}

/* Thanh chọn đơn tạm (nhiều đơn song song) */
.pos-drafts{display:flex;gap:6px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);background:#fafbfc;overflow-x:auto;flex-wrap:wrap}
.pos-draft-tab{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);background:#fff;border-radius:8px;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.pos-draft-tab:hover{border-color:var(--brand);color:var(--brand)}
.pos-draft-tab.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.pos-draft-tab .pd-cnt{min-width:18px;height:18px;padding:0 5px;border-radius:20px;background:rgba(0,0,0,.12);font-size:11px;display:inline-flex;align-items:center;justify-content:center}
.pos-draft-tab.active .pd-cnt{background:rgba(255,255,255,.28)}
.pos-draft-tab .pd-x{font-size:12px;opacity:.7;padding:0 2px;border-radius:4px}
.pos-draft-tab .pd-x:hover{opacity:1;background:rgba(0,0,0,.12)}
.pos-draft-add{padding:6px 12px;border:1px dashed var(--line);background:#fff;border-radius:8px;font-size:13px;font-weight:600;color:var(--brand);white-space:nowrap}
.pos-draft-add:hover{border-color:var(--brand);background:#f5fbf9}
.ci-price{width:100px;padding:4px 6px;border:1px solid var(--line);border-radius:6px;text-align:right;font-size:13px;font-variant-numeric:tabular-nums}
.ci-price:hover{border-color:var(--warn);background:#fffbe9}
.ci-price:focus{outline:none;border-color:var(--brand);background:#f5fbf9}

.pos-cartarea{flex:1 1 auto;overflow:auto;padding:0;min-height:46vh}
.pos-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;height:100%;min-height:320px;color:var(--muted)}
.pos-empty-ico{font-size:56px;opacity:.35}
.pos-empty-txt{font-size:15px}
.pos-cart-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.pos-cart-tbl th{text-align:left;padding:10px 12px;background:#fafbfc;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted);font-weight:600;position:sticky;top:0}
.pos-cart-tbl td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.pos-cart-tbl th.c,.pos-cart-tbl td.c{text-align:center}
.pos-cart-tbl th.r,.pos-cart-tbl td.r{text-align:right}
.ci-name{font-weight:600}
.ci-pet{margin-top:4px;font-size:11.5px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:3px 6px;max-width:220px}
.qstep{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.qstep button{width:26px;height:28px;border:none;background:#f4f6fa;font-size:16px;line-height:1;color:var(--ink)}
.qstep button:hover{background:#e7f4ef;color:var(--brand)}
.qstep .qty{width:42px;height:28px;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-size:13px}
.ci-rm{border:none;background:none;color:var(--danger);font-size:14px;padding:4px}

.pos-quick{border-top:1px solid var(--line);background:#fafbfc}
.qtabs{display:flex;gap:8px;padding:8px 12px 0}
.qtab{padding:7px 14px;border:1px solid var(--line);border-bottom:none;border-radius:8px 8px 0 0;background:#eef1f5;font-size:13px;font-weight:600;color:var(--muted)}
.qtab.active{background:#fff;color:var(--brand);border-color:var(--line)}
#qbody{padding:12px;max-height:230px;overflow:auto}
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:1300px){.qgrid{grid-template-columns:repeat(2,1fr)}}
.qbtn{padding:14px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:13px;font-weight:600;color:var(--ink);text-align:center;line-height:1.35}
.qbtn:hover{border-color:var(--brand);background:#f5fbf9;color:var(--brand)}
.pos-catlist .drop-item{border:1px solid var(--line);border-radius:8px;margin-bottom:8px}

.cn-locked{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:#f4f6fa;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
.pos-side{display:flex;flex-direction:column;background:var(--panel);border-left:1px solid var(--line)}
.pos-cust{padding:14px 16px;border-bottom:1px solid var(--line)}
.cust-search-wrap{position:relative;display:flex;align-items:center;gap:8px}
.cust-search-wrap input{flex:1;padding:10px 12px 10px 34px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.cust-add{width:38px;height:38px;flex:none;border:1px solid var(--brand);color:#fff;background:var(--brand);border-radius:8px;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center}
.cust-add:hover{background:var(--brand-d)}
.cust-picked{display:flex;align-items:center;gap:12px}
.cust-av{width:40px;height:40px;flex:none;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:17px}
.cust-info{flex:1;min-width:0}
.cust-name{font-weight:700;font-size:15px}
.cust-phone{color:var(--muted);font-size:12.5px;margin-top:2px}
.cust-x{border:none;background:none;color:var(--muted);font-size:15px;padding:6px}
.cust-x:hover{color:var(--danger)}
/* POS toàn năng: thanh ngữ cảnh thú cưng + hành động */
.pos-ctx{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.pos-ctx-pets{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.pos-pet-chip{padding:5px 10px;border:1px solid var(--line);background:#fff;border-radius:20px;font-size:12.5px;font-weight:600;color:var(--muted)}
.pos-pet-chip:hover{border-color:var(--brand);color:var(--brand)}
.pos-pet-chip.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.pos-pet-add{padding:5px 10px;border:1px dashed var(--line);background:#fff;border-radius:20px;font-size:12.5px;font-weight:600;color:var(--brand)}
.pos-pet-add:hover{border-color:var(--brand);background:#f5fbf9}
.pos-ctx-acts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pos-act{padding:9px 4px;border:1px solid var(--line);background:#fff;border-radius:9px;font-size:12px;font-weight:600;color:var(--ink);line-height:1.2}
.pos-act:hover:not(:disabled){border-color:var(--brand);background:#f5fbf9;color:var(--brand)}
.pos-act:disabled{opacity:.45;cursor:not-allowed}

.pos-depo{margin-top:10px}
/* Khối tạm thu trực quan */
.depo-box{width:100%;border:1px solid #f0d9a8;background:#fff8ec;border-radius:10px;padding:10px 12px}
.depo-box-empty{display:flex;align-items:center;justify-content:space-between;gap:10px}
.depo-box-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.depo-info{min-width:0}
.depo-lbl{font-size:12px;color:var(--warn);font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.depo-amt{font-size:20px;font-weight:800;color:#b06a00;line-height:1.15;margin-top:2px}
.depo-toggle{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;cursor:pointer;margin-top:10px;background:#fff;border:1px solid #f0d9a8;border-radius:8px;padding:9px 10px}
.depo-toggle input{width:17px;height:17px;flex:none}
.depo-toggle.on{background:#e3f4ee;border-color:var(--brand);color:var(--brand-d)}
/* Tạm thu GỌN — toàn bộ trên 1 hàng, không che nội dung dưới */
.depo-compact{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 12px}
.depo-compact .depo-lbl{font-size:12px}
.depo-compact .depo-amt{font-size:16px;font-weight:800;color:#b06a00}
.depo-toggle.sm{margin-top:0;padding:5px 9px;font-size:12px;gap:6px}
.depo-toggle.sm input{width:15px;height:15px}
.depo-addbtn{padding:5px 10px;margin-left:auto}
.vt-table tr.vt-khoi td{background:#eef2f7;border-top:2px solid var(--line);font-size:13px}

.pos-sum{padding:16px;flex:1}
.sum-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;font-size:14px;border-bottom:1px solid #f0f2f6}
.sum-row.strong{font-weight:700}
.sum-row .hl{color:var(--brand);font-size:20px;font-weight:800}
.sum-row .big{font-size:18px;font-weight:700}
.sum-inp{width:130px;text-align:right;border:none;border-bottom:1px solid var(--line);padding:4px 2px;font-size:15px}
.sum-inp:focus{outline:none;border-bottom-color:var(--brand)}
.sum-inp.big{font-size:18px;font-weight:700}
.sum-sel{margin-top:4px;border:none;color:var(--accent);font-size:12px;padding:0}
.pos-note{display:flex;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--muted)}
.pos-note input{flex:1;border:none;font-size:13px;padding:4px 0}
.pos-note input:focus{outline:none}
.pos-pay{display:grid;grid-template-columns:1fr 1.3fr;gap:10px;padding:14px 16px}
.pos-pay .btn{padding:16px;font-size:15px;font-weight:700}

/* Danh sách đơn hàng (modal) */
.ol-filter{display:flex;gap:10px;align-items:flex-end;margin-bottom:12px;flex-wrap:wrap}
.ol-filter .field{margin:0}
.ol-filter .grow{flex:1;min-width:160px}
.pos-order-tbl{width:100%;border-collapse:collapse;font-size:13px}
.pos-order-tbl th{text-align:left;padding:8px 10px;border-bottom:2px solid var(--line);font-size:12px;color:var(--muted)}
.pos-order-tbl td{padding:8px 10px;border-bottom:1px solid var(--line)}
.pos-order-tbl th.r,.pos-order-tbl td.r{text-align:right}
.pos-order-tbl th.c,.pos-order-tbl td.c{text-align:center}
.pos-order-tbl .due{color:var(--danger);font-weight:600}
.pos-order-tbl .nowrap{white-space:nowrap}
.nowrap{white-space:nowrap}
.ol-tot{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);font-size:13px}
.ol-tot .due{color:var(--danger)}

/* Danh sách đơn hàng (tab inline dưới POS) */
#qbody.qbody-wide{max-height:58vh}
.ol-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.ol-bar input[type=date]{padding:7px 9px;border:1px solid var(--line);border-radius:7px;font-size:13px}
.ol-bar .ol-q{flex:1;min-width:200px;padding:8px 11px;border:1px solid var(--line);border-radius:7px;font-size:13px}
.ol-bar .ol-q:focus{outline:none;border-color:var(--brand)}
.ol-selinfo{color:var(--brand);font-size:12.5px;font-weight:600}
.ol-tbl th{position:sticky;top:0;background:#fafbfc;z-index:1}
.ol-tbl .ol-exp{width:24px;height:24px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--muted);font-size:12px;line-height:1}
.ol-tbl .ol-exp.open,.ol-tbl .ol-exp:hover{border-color:var(--brand);color:var(--brand);background:#f5fbf9}
.ol-row.voided td{color:var(--muted);text-decoration:line-through}
.ol-row.voided td .badge{text-decoration:none}
.ol-detail-row>td{background:#fafbfc;padding:0}
.ol-detail-box{padding:12px 16px}
.ol-lines{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:10px}
.ol-lines th{text-align:left;padding:5px 8px;color:var(--muted);font-size:11.5px;border-bottom:1px solid var(--line)}
.ol-lines td{padding:5px 8px;border-bottom:1px solid #eef0f4}
.ol-lines th.r,.ol-lines td.r{text-align:right}
.ol-lines th.c,.ol-lines td.c{text-align:center}
.ol-detail-foot{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.ol-detail-sum{font-size:12.5px}
.ol-detail-sum .due{color:var(--danger);font-weight:600}
.ol-detail-acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ol-thu{margin-left:6px;padding:2px 9px;font-size:11.5px}

/* Tổng quan: giới hạn chiều cao ô danh sách, cuộn sau ~10 dòng */
.dash-scroll{max-height:360px;overflow:auto;margin:-2px -4px 0;padding:2px 4px 0}
.dash-scroll::-webkit-scrollbar{width:8px}
.dash-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}

/* Tab trạng thái khách hàng nằm bên phải thanh công cụ */
.kh-status-tabs .tab{padding:6px 14px;font-size:12.5px}

/* Thông báo (noti) hiển thị giữa màn hình dạng ô nổi, dễ thấy */
.toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:#11261f;color:#fff;padding:18px 28px;border-radius:14px;z-index:400;
  box-shadow:0 16px 48px rgba(0,0,0,.4);font-size:15.5px;font-weight:600;line-height:1.4;
  text-align:center;max-width:82vw;min-width:220px;
  border:1px solid rgba(255,255,255,.12);animation:toastPop .16s ease-out}
@keyframes toastPop{from{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* Hộp thoại xác nhận / nhập liệu — thay confirm()/prompt() của trình duyệt, hiển thị giữa màn hình */
.dlg-overlay{position:fixed;inset:0;background:rgba(15,25,40,.5);display:flex;align-items:center;justify-content:center;z-index:500;padding:20px}
.dlg-box{background:var(--panel);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.35);padding:24px;max-width:440px;width:100%;animation:toastPop .16s ease-out}
.dlg-msg{font-size:15px;line-height:1.5;color:var(--ink);white-space:pre-line}
.dlg-input{width:100%;margin-top:14px;padding:11px 12px;border:1px solid var(--line);border-radius:8px;font-size:15px}
.dlg-input:focus{outline:none;border-color:var(--brand)}
.dlg-acts{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.dlg-acts .btn{padding:10px 20px}
.empty{text-align:center;color:var(--muted);padding:40px}
.mini{color:var(--muted);font-size:12px}
.chart-wrap{position:relative;height:280px}
.tabbar{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.tab{padding:8px 16px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:13px;font-weight:600}
.tab.active{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ---- Lưới thẻ 4 cột dùng chung (Khách hàng, Thú cưng, Khám, Tiêm, Spa) ---- */
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1200px){.cgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.cgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cgrid{grid-template-columns:1fr}}
.ccard{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--line);
  border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);cursor:pointer;
  display:flex;flex-direction:column;gap:8px;transition:transform .12s,box-shadow .12s,border-color .12s}
.ccard:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(20,30,50,.12)}
/* mỗi cột 1 màu accent (viền trái + tô nền nhạt) */
.ccard.col-0{border-left-color:var(--brand);background:linear-gradient(180deg,#f3faf7,#fff 30%)}
.ccard.col-1{border-left-color:var(--kham);background:linear-gradient(180deg,#f2f6fe,#fff 30%)}
.ccard.col-2{border-left-color:var(--spa);background:linear-gradient(180deg,#f9f3fc,#fff 30%)}
.ccard.col-3{border-left-color:var(--warn);background:linear-gradient(180deg,#fdf7ec,#fff 30%)}
.ccard.col-0:hover{border-color:var(--brand)}
.ccard.col-1:hover{border-color:var(--kham)}
.ccard.col-2:hover{border-color:var(--spa)}
.ccard.col-3:hover{border-color:var(--warn)}
.cc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.cc-title{font-weight:700;font-size:15px;line-height:1.25}
.cc-meta{color:var(--muted);font-size:12px}
.cc-body{display:flex;flex-wrap:wrap;gap:5px;font-size:12px;color:var(--ink)}
.cc-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:2px;
  border-top:1px dashed var(--line);padding-top:8px;font-size:12px}
.cc-acts{display:flex;gap:6px;flex-shrink:0}
.kh-pet{background:#eef4f1;color:var(--ink);font-size:11px;padding:2px 8px;border-radius:20px;white-space:nowrap}
.kh-pet.more{background:#e6e9f0;color:var(--muted)}
.kh-debt{font-weight:600;color:var(--muted)}
.kh-debt.due{color:var(--danger)}
/* nút back trong modal */
.modal-back{background:none;border:1px solid var(--line);border-radius:7px;font-size:16px;line-height:1;
  padding:3px 10px;color:var(--ink);margin-right:10px}
.modal-back:hover{background:#f0f2f7}
.modal-head{gap:4px}
/* Hồ sơ khách: khối thú cưng có tab con + nhắc lịch */
.kh-pet-tabs{display:flex;gap:5px;flex-wrap:wrap;margin:8px 0}
.kh-pet-tabs .tab{padding:5px 11px;font-size:12px}
.reminder{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#fff8ec;
  border:1px solid #f3e4c4;border-radius:8px;padding:7px 10px;margin-bottom:6px}
.hist-line{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px dashed var(--line);gap:8px;cursor:pointer}
.hist-line:hover{background:#fafbfd}
/* Kho: bảng sửa nhanh + checkbox */
td.editable{cursor:text;border-bottom:1px dashed transparent}
td.editable:hover{background:#fffbe9;border-bottom:1px dashed var(--warn)}
td.editable input{width:100%;border:1px solid var(--brand);border-radius:5px;padding:4px 6px;font-size:13px}
.cellsel{border:1px solid var(--line);border-radius:6px;padding:4px 6px;font-size:12px;background:#fff;max-width:150px}
.cellsel:hover{border-color:var(--brand)}
.bulk-bar{display:flex;align-items:center;gap:10px;background:#eef4f1;border:1px solid var(--line);
  border-radius:8px;padding:8px 12px;margin-bottom:12px;flex-wrap:wrap}
.subtabbar{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:10px}
.ccard.card-dim{opacity:.5;filter:grayscale(.4)}
.ccard.card-dim:hover{opacity:.8;transform:none}
.cc-note{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:12px;color:var(--muted);width:100%;word-break:break-word}

/* ---- Hồ sơ khách (hub) ---- */
.kh-hub-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.kh-hub-meta{font-size:13px;margin-top:4px}
.kh-hub-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.kh-kpi{background:#fafbfd;border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.kh-kpi b{font-size:18px}
.kh-kpi.due b{color:var(--danger)}
.kh-sec-head{display:flex;justify-content:space-between;align-items:center;margin:6px 0 10px}
.kh-sec-head h2{font-size:15px}
.kh-pet-row{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px}
.kh-pet-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.kh-pet-stats{margin:6px 0 10px}
.kh-pet-acts{display:flex;gap:8px;flex-wrap:wrap}

/* ================= POS REDESIGN (v19) — trực quan & dễ chạm ================= */
kbd{display:inline-block;font-family:inherit;font-size:10.5px;font-weight:700;line-height:1;color:var(--muted);
  background:#eef1f5;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:2px 5px;white-space:nowrap}
.pos2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:14px;box-shadow:0 2px 10px rgba(20,30,50,.06),0 12px 32px rgba(20,30,50,.06);
  height:100%;max-height:100%;overflow:hidden}
/* Gọn trong 1 màn hình: cột trái & phải cuộn nội bộ; Tổng + Thanh toán luôn thấy */
.pos-main{min-height:0}
.pos-side{min-height:0;overflow:hidden}
.pos-cust{flex:none}
.pos-sum{flex:1 1 auto;min-height:0;overflow-y:auto}
.pos-note,.pos-pay{flex:none}
/* Ô tìm kiếm to, nổi bật */
.pos-searchbar{padding:14px 18px;gap:14px;background:linear-gradient(180deg,#fbfdff,#fff)}
.pos-search-wrap input{padding:14px 46px 14px 40px;font-size:15.5px;border-radius:11px;border:1.5px solid var(--line);background:#fff}
.pos-search-wrap .ps-ico{left:14px;font-size:15px;opacity:.6}
.pos-search-wrap .ps-key{position:absolute;right:12px;top:50%;transform:translateY(-50%)}
.pos-branch select{padding:11px 12px;border-radius:10px;font-size:14px}
/* Giỏ hàng — dòng cao, dễ đọc */
.pos-cartarea{background:#fff}
.pos-cart-tbl th{padding:11px 16px;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;background:#f6f8fb}
.pos-cart-tbl td{padding:13px 16px}
.pos-cart-tbl tbody tr:hover td,.pos-cart-tbl tbody tr:hover{background:#f9fbfd}
.ci-name{font-size:14.5px;font-weight:700}
.pos-empty-ico{font-size:64px}
.pos-empty-txt{font-size:16px;font-weight:600;color:var(--ink)}
.pos-empty .btn{padding:12px 22px;font-size:15px}
/* Lưới sản phẩm bấm-nhanh */
.pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:12px}
.pgrid-card{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;padding:12px;
  border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;min-height:96px;transition:transform .1s,box-shadow .1s,border-color .1s}
.pgrid-card:hover{transform:translateY(-2px);border-color:var(--brand);box-shadow:0 6px 16px rgba(31,143,111,.14)}
.pgrid-card:active{transform:translateY(0)}
.pgrid-card.k-dv{background:linear-gradient(180deg,#f6f9ff,#fff 40%)}
.pgc-tag{font-size:10px}
.pgc-name{flex:1;font-size:13.5px;font-weight:700;line-height:1.3;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pgc-gia{font-size:15px;font-weight:800;color:var(--brand)}
/* Tabs thao tác */
.qtabs{padding:10px 14px 0;gap:8px}
.qtab{padding:9px 16px;font-size:13px;border-radius:10px 10px 0 0}
.qbtn{padding:16px 10px;font-size:13.5px;border-radius:11px}
/* ---------- Panel phải: khách + tổng + thanh toán ---------- */
.pos-side{border-left:1.5px solid var(--line);background:#fafbfd}
.pos-cust{padding:16px 18px;background:#fff}
/* Khối khách hàng NỔI BẬT nhưng GỌN — tên · SĐT · mã trên 1 hàng, avatar nhỏ */
.cust-card{border:1.5px solid var(--brand);border-radius:12px;background:linear-gradient(180deg,#f2fbf7,#fff 60%);
  padding:10px 12px;box-shadow:0 3px 12px rgba(31,143,111,.1)}
.cust-change{border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:20px;
  padding:4px 11px;font-size:12px;font-weight:600;flex:none;align-self:flex-start}
.cust-change:hover{border-color:var(--danger);color:var(--danger)}
.cust-card .cust-picked{gap:10px;align-items:center}
.cust-av.sm{width:38px;height:38px;font-size:16px;box-shadow:0 2px 8px rgba(31,143,111,.25)}
.cust-identity{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 8px;line-height:1.3}
.cust-identity .cust-name{font-size:15.5px;font-weight:800}
.cust-identity .cust-meta{font-size:12.5px;color:var(--muted)}
.cust-card .pos-ctx{margin-top:10px;padding-top:10px}
.cust-card-empty{border-style:dashed;text-align:center;background:#fafbfd}
.cust-empty-ico{font-size:34px;opacity:.45}
.cust-empty-txt{font-weight:700;font-size:15px;margin:2px 0 12px;color:var(--ink)}
.cust-card-empty .cust-search-wrap{text-align:left}
/* Khu vực tiền — LƯỚI 2 CỘT, hiển thị đủ không cần kéo */
.pos-sum{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start;padding:14px 16px}
.sum-cell{display:flex;flex-direction:column;gap:3px;min-width:0;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 11px}
.sum-cell.span2{grid-column:1 / -1}
.sc-lbl{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-val{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.sum-cell .sum-inp{width:100%;text-align:right;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:16px;font-weight:700}
.sum-cell .sum-inp:focus{outline:none;border-color:var(--brand)}
.sc-inline{display:flex;gap:6px}
.sc-inline .sum-sel{flex:none;border:1px solid var(--line);border-radius:8px;padding:4px 6px;font-size:12px;background:#fff}
.sc-inline .sum-inp{flex:1;min-width:0}
/* KHÁCH PHẢI TRẢ / CÒN THU / HOÀN LẠI — cell nổi bật */
.pos-sum .sum-cell.strong{background:linear-gradient(135deg,#eafaf4,#f3fbf8);border-color:#cdefe1;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px}
.pos-sum .sum-cell.strong .sc-lbl{font-weight:800;font-size:12.5px;letter-spacing:.3px;color:var(--brand-d);white-space:normal}
.pos-sum .sum-cell.strong .sc-val{color:var(--brand-d)}
.pos-sum .sum-cell.strong .sc-val.hl{font-size:23px;font-weight:900}
#posConThuRow.sum-cell.strong{background:linear-gradient(135deg,#fff5e9,#fffaf3);border-color:#f3ddb8}
#posConThuRow .sc-lbl,#posConThuRow .sc-val{color:#b06a00}
#posHoanRow.sum-cell.strong{background:linear-gradient(135deg,#fdf0f0,#fff7f7);border-color:#f2caca}
#posHoanRow .sc-val{font-size:19px;font-weight:800}
.pos-note{padding:12px 18px}
/* Nút thanh toán lớn, hiện số tiền */
.pos-pay{grid-template-columns:1fr 1.6fr;gap:12px;padding:16px 18px 18px}
.pos-pay .btn{border-radius:12px}
#posTamTinh{padding:14px 10px;font-size:13.5px}
#posPay{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:14px;min-height:66px;
  box-shadow:0 6px 18px rgba(31,143,111,.32)}
#posPay:hover{box-shadow:0 8px 22px rgba(31,143,111,.4)}
#posPay .pay-lbl{font-size:12.5px;font-weight:700;letter-spacing:.4px;opacity:.95;display:flex;align-items:center;gap:6px}
#posPay .pay-lbl kbd{color:#fff;background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.35)}
#posPay .pay-amt{font-size:22px;font-weight:900;line-height:1}
/* Màn kiosk: giỏ cao hơn, panel rộng hơn chút */
@media(max-width:1000px){.pos2{grid-template-columns:1fr}.pos-pay{grid-template-columns:1fr 1fr}}

/* ===== POS panel phải GỌN — tất cả vừa trong 1 màn, không kéo (v26) ===== */
.pos-cust{padding:10px 14px}
.cust-card{padding:8px 10px}
.cust-av.sm{width:34px;height:34px;font-size:15px}
.cust-identity .cust-name{font-size:14.5px}
.cust-card .pos-ctx{margin-top:8px;padding-top:8px}
.pos-act{padding:7px 4px;font-size:11.5px}
.pos-pet-chip,.pos-pet-add{padding:4px 9px;font-size:12px}
.pos-sum{padding:8px 14px;gap:6px}
.sum-cell{padding:5px 9px;gap:1px}
.sc-lbl{font-size:10.5px}
.sc-val{font-size:14.5px}
.sum-cell .sum-inp{padding:5px 8px;font-size:14px}
.pos-sum .sum-cell.strong{padding:7px 12px}
.pos-sum .sum-cell.strong .sc-lbl{font-size:11.5px}
.pos-sum .sum-cell.strong .sc-val.hl{font-size:19px}
#posHoanRow .sc-val{font-size:15px}
.pos-note{padding:7px 14px}
.pos-pay{padding:10px 14px 12px;gap:10px}
#posPay{min-height:52px;padding:9px}
#posPay .pay-amt{font-size:18px}
#posPay .pay-lbl{font-size:11.5px}
#posTamTinh{padding:10px 8px;font-size:12.5px}