/* Tạp Hóa Số — Unified UI v3. Applies to admin + sale; preserves printable invoice HTML. */
:root{--bg:#f2f4f7;--card:#fff;--text:#172033;--muted:#748091;--line:#e9ecf1;--primary:#0b6df2;--nav:#fff;--green:#0b9c54;--orange:#f4b23f;--red:#dc3545}
html{overflow-x:clip}body.app-shell{background:var(--bg);color:var(--text);font-family:Arial,"Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif;font-size:15px;line-height:1.5;overflow-x:clip}
.app-shell .top{background:#fff;color:#1e293b;border-bottom:1px solid #eef0f5;box-shadow:none;z-index:30}
.app-shell .top .wrap{max-width:1260px}.app-shell .brand{font-size:19px;color:#1c293c;text-decoration:none;font-weight:800;letter-spacing:-.5px}.app-shell .brand span{color:#0d6cf4}
.app-shell .links{gap:4px}.app-shell .links a,.app-shell .logout{color:#4b586b;background:transparent;border-radius:10px;display:inline-flex;min-height:39px;align-items:center;padding:9px 10px;font-size:13px;font-weight:700;white-space:nowrap}
.app-shell .links a.nav-current{color:#066be9;background:#eaf3ff}.app-shell .links a:hover,.app-shell .logout:hover{background:#f1f5f9;color:#0b6df2}
.app-shell .app-main{max-width:1180px;padding:21px 18px 38px}.app-shell .app-main>h2,.app-shell .page-title h2,.app-shell .app-main>.actions>h2{margin:1px 0 7px;color:#142032;font-size:27px;line-height:1.22;letter-spacing:-.65px;font-weight:800}
.app-shell .page-subtitle{font-size:13px;line-height:1.5;color:#738194;margin:0 0 16px}.app-shell .page-title{margin-bottom:8px}
.app-shell .card{background:#fff;border:1px solid #edf0f4;border-radius:17px;box-shadow:0 2px 10px #1b27400a;padding:18px;margin-bottom:15px}
.app-shell .card h3{margin:0 0 12px;font-size:18px;font-weight:800;color:#1b2b41}.app-shell h4{color:#20344d}
.app-shell .btn{background:#0b6df2;border-radius:12px;min-height:42px;padding:10px 16px;font-size:14px;font-weight:750;box-shadow:none;letter-spacing:0}.app-shell .btn:hover{filter:brightness(.96)}.app-shell .btn.gray{background:#eef2f7;color:#38485e}.app-shell .btn.green{background:#0e9e57;color:#fff}.app-shell .btn.red{background:#d83848;color:#fff}.app-shell .btn.orange{background:#fff0c1;color:#8b4a05}.app-shell .btn.sm{min-height:37px;padding:8px 12px;font-size:13px}
.app-shell .input,.app-shell select,.app-shell textarea{border:1px solid #dbe1e8;border-radius:12px;min-width:0;min-height:46px;background:#fff;color:#182438}.app-shell input:focus,.app-shell select:focus,.app-shell textarea:focus{outline:2px solid #bfdbfe;outline-offset:0;border-color:#4a9cf5}
.app-shell label{font-weight:700;color:#455267;font-size:13px}.app-shell .grid>*{min-width:0}
.app-shell .card.grid.date-filter-row,.app-shell form.card.grid{align-items:end}.app-shell .date-filter-row{gap:12px}.app-shell .date-filter-row .btn{white-space:nowrap}
.app-shell .summary{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:13px 0 19px}.app-shell .summary>.card{margin:0;min-height:103px;display:flex;justify-content:center;flex-direction:column;gap:6px;color:#677586;font-size:13px;font-weight:650}
.app-shell .summary>.card strong{display:block;color:#16283d;font-weight:800;font-size:22px;letter-spacing:-.3px;line-height:1.25;overflow-wrap:anywhere}.app-shell .dashboard-metrics>.card.metric-blue{border-top:3px solid #408dfb}.app-shell .dashboard-metrics>.card.metric-green{border-top:3px solid #2fb179}.app-shell .dashboard-metrics>.card.metric-gold{border-top:3px solid #edb845}.app-shell .dashboard-metrics>.card.metric-rose{border-top:3px solid #f0808b}
.app-shell .app-quick-links{display:flex;gap:10px;flex-wrap:wrap}.app-shell .app-quick-links a{background:#fff;border:1px solid #e8ebf1;color:#1764d8;text-decoration:none;padding:14px;border-radius:13px;font-weight:750}
.app-shell .table th{background:#f7f9fc;color:#718099;font-size:12px;text-transform:none;white-space:nowrap}.app-shell .table td{color:#283a52}.app-shell .table td strong{color:#16263a}.app-shell .table tr:last-child td{border-bottom-color:transparent}
.app-shell .app-list-card{padding:15px}.app-shell .app-list-card>.table-wrap{margin-top:10px}
.app-shell .badge{border-radius:999px;padding:6px 9px;font-size:11px;line-height:1.15;white-space:normal}
.app-shell .section-hint{color:#7b8697;font-size:13px;margin:-7px 0 13px}
.app-shell .alert{border-radius:12px}.app-shell .ok{background:#e9f9ef;color:#116338}.app-shell .err{background:#fff0ef;color:#a02630}
.app-shell .app-bottom-nav,.app-shell .app-fab,.app-shell .app-more-panel{display:none}
.app-shell .app-more-panel[hidden]{display:none!important}
.app-shell .order-detail-head{background:#f7faff;border:1px solid #e3ebf5}
.app-shell .item-row{border-left:4px solid #a4c7fd!important}.app-shell .price-note{overflow-wrap:anywhere}
.app-shell .app-list-card .table-wrap{max-width:100%}
.app-shell input[type="checkbox"]{width:17px;height:17px;accent-color:#0b6df2;vertical-align:middle;flex:0 0 auto}
.app-shell textarea[name="html_content"]{min-height:440px;font-family:Consolas,"Courier New",monospace;font-size:13px!important;line-height:1.5;white-space:pre;overflow:auto}
@media (max-width:1010px) and (min-width:761px){.app-shell .links a,.app-shell .logout{font-size:12px;padding:8px 6px}.app-shell .brand{font-size:16px}}
@media(max-width:760px){
 body.app-shell{background:#f1f3f6;font-size:14px;padding-bottom:calc(80px + env(safe-area-inset-bottom));}
 .app-shell .top{display:none!important}
 .app-shell .app-main{padding:19px 12px 30px;width:100%;max-width:100%;margin:0;min-width:0}
 .app-shell .app-main>h2,.app-shell .page-title h2,.app-shell .app-main>.actions>h2{font-size:26px;letter-spacing:-.7px;margin:0 0 5px}
 .app-shell .page-subtitle{font-size:12px;margin:0 0 15px;color:#7d8795}
 .app-shell .card{border-radius:17px;border-color:#e9edf2;padding:15px;margin-bottom:12px;box-shadow:0 1px 5px #1a2c4508}
 .app-shell .summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0 15px}
 .app-shell .summary>.card{padding:13px;min-height:89px;font-size:12px}.app-shell .summary>.card strong{font-size:18px;line-height:1.26}
 .app-shell .grid-2,.app-shell .grid-3{grid-template-columns:1fr}.app-shell .date-filter-row{grid-template-columns:1fr!important}
 .app-shell .date-filter-row .btn,.app-shell .date-filter-row a.btn{width:100%;justify-content:center}.app-shell .date-filter-row>div:last-child{min-width:0;display:flex;gap:8px;flex-wrap:wrap}.app-shell .date-filter-row>div:last-child .btn{flex:1 1 110px}
 .app-shell .page-title,.app-shell .app-main>.actions{align-items:center;gap:9px}.app-shell .page-title .btn{width:auto}.app-shell .app-main>.actions>.btn{width:auto;flex:none}
 .app-shell .btn{min-height:44px;max-width:100%}.app-shell .btn.sm{min-height:38px}.app-shell .actions{gap:8px}
 .app-shell .table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
 .app-shell .app-list-card{padding:12px;overflow:visible}
 .app-shell .mobile-stack{display:block!important;border-collapse:separate;border-spacing:0;background:transparent!important;width:100%}
 .app-shell .mobile-stack>tbody,.app-shell .mobile-stack>tbody>tr,.app-shell .mobile-stack>tr{width:100%}
 .app-shell .mobile-stack>tbody>tr,.app-shell .mobile-stack>tr{display:block;background:#fff;border:1px solid #edf0f5;border-radius:15px;margin:0 0 10px;box-shadow:0 1px 4px #0000000a;overflow:hidden}
 .app-shell .mobile-stack>tbody>tr:first-child,.app-shell .mobile-stack>tr:first-child{display:none!important}
 .app-shell .mobile-stack>tbody>tr.row-details,.app-shell .mobile-stack>tr.row-details{display:none!important}
 .app-shell .mobile-stack>tbody>tr.row-details.open,.app-shell .mobile-stack>tr.row-details.open{display:block!important;border-radius:0 0 15px 15px;border-top:0;margin-top:-13px;padding-top:11px;background:#f8faff}
 .app-shell .mobile-stack>tbody>tr.row-expanded,.app-shell .mobile-stack>tr.row-expanded{border-radius:15px 15px 0 0;border-color:#bdd6ff}
 .app-shell .mobile-stack td{display:flex;align-items:flex-start;justify-content:space-between;gap:13px;min-width:0;padding:11px 12px;border-bottom:1px solid #edf0f5;min-height:39px;font-size:13px;text-align:right;overflow-wrap:anywhere}
 .app-shell .mobile-stack td:before{content:attr(data-label);font-size:12px;font-weight:750;color:#798698;text-align:left;flex:0 0 95px;min-width:0;max-width:37%;line-height:1.45}
 .app-shell .mobile-stack td[data-label=""]:before{display:none}.app-shell .mobile-stack td[data-label=""]{display:block;text-align:left}.app-shell .mobile-stack td[data-label="Chọn"]{align-items:center}
 .app-shell .mobile-stack td[data-label="Mã"],.app-shell .mobile-stack td[data-label="Khách"],.app-shell .mobile-stack td[data-label="Tên"],.app-shell .mobile-stack td[data-label="Tuyến"],.app-shell .mobile-stack td[data-label="Sale"],.app-shell .mobile-stack td[data-label="Đơn"]{background:#fbfcff}
 .app-shell .mobile-stack td strong{font-size:14px;font-weight:800;overflow-wrap:anywhere}
 .app-shell .mobile-stack .actions{display:flex;justify-content:flex-end;flex-wrap:wrap;text-align:center}.app-shell .mobile-stack .actions .btn{width:auto;max-width:100%}
 .app-shell .mobile-stack .actions form{width:auto;flex:1 1 100px}.app-shell .mobile-stack .actions form .btn{width:100%}
 .app-shell .row-details>td{display:block!important;max-width:100%!important;border:none!important;padding:13px!important}
 .app-shell .row-details .table-wrap{overflow-x:auto;max-width:100%}
 .app-shell .row-details .table:not(.admin-price-table){min-width:480px;font-size:12px}
 .app-shell .row-details .table:not(.admin-price-table) th,.app-shell .row-details .table:not(.admin-price-table) td{display:table-cell!important;min-width:auto!important;text-align:left!important;width:auto!important;padding:8px!important}
 .app-shell .row-details .table:not(.admin-price-table) td:before{display:none!important}
 .app-shell .admin-price-table{display:block!important;width:100%!important;min-width:0!important}
 .app-shell .admin-price-table tbody{display:block;width:100%}
 .app-shell .admin-price-table tr{display:block;width:100%;background:#fff!important;border:1px solid #e7ebf2;border-radius:14px;padding:12px;margin-bottom:10px;overflow:hidden}
 .app-shell .admin-price-table tr:first-child{display:none!important}
 .app-shell .admin-price-table td{display:block!important;width:100%!important;max-width:100%!important;text-align:left!important;padding:9px 0!important;border:0!important;border-bottom:1px solid #ecf0f6!important;overflow-wrap:anywhere}
 .app-shell .admin-price-table td:last-child{border:0!important}
 .app-shell .admin-price-table td:before{content:attr(data-label);display:block;color:#8390a1;max-width:none;font-size:12px;margin:0 0 5px;flex:none}
 .app-shell .admin-price-table td .input{width:100%!important;max-width:100%;min-width:0!important}
 .app-shell .row-details .actions .btn{width:100%}.app-shell .order-detail-head{margin:0 0 12px}
 .app-shell .app-quick-links{display:grid;grid-template-columns:1fr;gap:8px}.app-shell .app-quick-links a{padding:14px}
 .app-shell .app-bottom-nav{display:flex;align-items:stretch;position:fixed;inset:auto 0 0;z-index:90;background:#fff;border-top:1px solid #e4e9f0;box-shadow:0 -3px 15px #1524360d;padding:5px max(3px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(3px,env(safe-area-inset-left));width:100%}
 .app-shell .app-bottom-nav a,.app-shell .app-bottom-nav button{appearance:none;background:none;border:0;padding:5px 0 3px;color:#677484;text-decoration:none;display:flex;flex:1 1 0;min-width:0;min-height:58px;align-items:center;justify-content:center;flex-direction:column;gap:4px;font-size:10px;line-height:1.1;font-weight:650;cursor:pointer;white-space:nowrap}
 .app-shell .app-bottom-nav svg{width:24px;height:24px;flex-shrink:0}.app-shell .app-bottom-nav .is-current{color:#086bee;font-weight:800}
 .app-shell .app-more-panel:not([hidden]){display:flex;flex-direction:column;gap:2px;position:fixed;bottom:calc(79px + env(safe-area-inset-bottom));right:12px;z-index:100;width:min(310px,calc(100vw - 24px));max-height:min(540px,calc(100vh - 115px));overflow:auto;background:#fff;border:1px solid #e1e6ef;border-radius:18px;padding:12px;box-shadow:0 15px 45px #1d2c4640}
 .app-shell .app-more-heading{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 10px;color:#1b2c42}.app-shell .app-more-heading button{background:#edf2f7;color:#344558;border:none;border-radius:50%;width:30px;height:30px;cursor:pointer}
 .app-shell .app-more-panel a,.app-shell .app-more-panel form button{display:block;color:#27384e;border:0;background:transparent;text-align:left;padding:12px;border-radius:11px;width:100%;text-decoration:none;font-size:14px;font-weight:700;cursor:pointer}
 .app-shell .app-more-panel a:hover,.app-shell .app-more-panel button:hover{background:#f2f7fd}
 .app-shell .app-fab{display:grid;place-items:center;position:fixed;bottom:calc(92px + env(safe-area-inset-bottom));right:18px;width:58px;height:58px;background:#0b6df2;color:#fff;border-radius:50%;box-shadow:0 7px 21px #1467cc50;z-index:55;text-decoration:none}
 .app-shell .app-fab svg{width:29px;height:29px}
 .app-shell .item-row{margin:0 0 11px!important;border:1px solid #e4ecf7!important;border-left:4px solid #81b8ff!important;padding:13px!important;background:#fff!important;border-radius:14px}
 .app-shell .price-note{padding:9px 2px;font-size:12px!important;line-height:1.7}
 .app-shell input[type="date"],.app-shell input[type="datetime-local"]{width:100%!important;min-width:0!important;max-width:100%!important;min-height:46px!important;-webkit-appearance:none;appearance:none;padding:8px 10px}
 .app-shell textarea[name="html_content"]{min-height:420px}
}
@media(max-width:380px){.app-shell .app-main{padding-left:9px;padding-right:9px}.app-shell .app-bottom-nav a,.app-shell .app-bottom-nav button{font-size:9px}.app-shell .app-bottom-nav svg{width:22px;height:22px}.app-shell .summary>.card strong{font-size:16px}.app-shell .mobile-stack td:before{flex-basis:80px}.app-shell .card{padding:12px}}
@media print{
 body.app-shell{background:#fff!important;padding-bottom:0!important;overflow:visible!important}
 .app-shell .top,.app-shell .app-bottom-nav,.app-shell .app-fab,.app-shell .app-more-panel,.app-shell .app-quick-links{display:none!important}
 .app-shell .app-main{width:100%;max-width:100%;padding:0!important}
 .app-shell .card{box-shadow:none!important;border:0!important}
 .app-shell .mobile-stack{display:table!important}
 .app-shell .mobile-stack tr{display:table-row!important}
 .app-shell .mobile-stack td{display:table-cell!important}
 .app-shell .mobile-stack td:before{display:none!important}
 .app-shell .row-details:not(.open){display:none!important}
}

/* Consistent quick search on every list URL. Search affects the loaded page only. */
.app-shell .app-local-filter{background:#fff;border:1px solid #e8ecf2;border-radius:15px;display:flex;align-items:center;gap:9px;position:relative;margin:0 0 13px;padding:7px 12px;min-height:52px;box-shadow:0 1px 6px #1b294008;flex-wrap:wrap}
.app-shell .app-local-filter svg{width:21px;height:21px;flex:0 0 auto;color:#808da0}
.app-shell .app-local-filter input{flex:1 1 145px;min-width:0;min-height:36px;width:100%;border:0!important;background:transparent!important;color:#25344a;padding:6px 0;font-size:14px!important;outline:0!important}
.app-shell .app-local-filter button{border:0;background:#eef4fd;border-radius:9px;padding:7px 10px;color:#306dc1;font-size:12px;font-weight:750;cursor:pointer}
.app-shell .app-local-filter small{flex:1 0 100%;font-size:11px;color:#748296;min-height:0}
.app-shell .app-local-filter small:empty{display:none}
.app-shell .is-filter-hidden{display:none!important}
@media(max-width:760px){.app-shell .app-local-filter{margin-bottom:12px;min-height:50px}.app-shell .app-local-filter input{font-size:16px!important}}
@media(min-width:761px){
 .app-shell .app-more-panel:not([hidden]){display:flex;flex-direction:column;position:fixed;right:24px;top:76px;z-index:100;width:265px;padding:12px;background:#fff;border:1px solid #e1e7ef;border-radius:17px;box-shadow:0 15px 38px #1e2e4840}
 .app-shell .app-more-heading{display:flex;align-items:center;justify-content:space-between;padding:4px 7px 8px}
 .app-shell .app-more-heading button{width:30px;height:30px;border:0;border-radius:50%;background:#eef2f7;cursor:pointer}
 .app-shell .app-more-panel a,.app-shell .app-more-panel form button{display:block;text-align:left;width:100%;padding:11px;color:#27384e;background:transparent;border:0;text-decoration:none;border-radius:9px;font-weight:700;cursor:pointer}
 .app-shell .app-more-panel a:hover,.app-shell .app-more-panel button:hover{background:#edf4ff}
}