:root{--bg:#f4f7fb;--card:#fff;--text:#172033;--muted:#697386;--line:#e4e9f1;--primary:#1677ff;--dark:#10233f;--green:#10b981;--red:#ff3b5c;--purple:#6d5dfc;--shadow:0 8px 28px rgba(29,52,84,.08)}
*{box-sizing:border-box}html,body{margin:0;font-family:Segoe UI,Arial,sans-serif;color:var(--text);background:var(--bg)}a{text-decoration:none;color:#1677ff}.app{min-height:100vh}.sidebar{position:fixed;left:0;top:0;bottom:0;width:235px;background:linear-gradient(180deg,#0d2b4f,#0b1d33);color:#fff;padding:16px 12px;z-index:30}.brand{display:flex;gap:10px;align-items:center;padding:5px 6px 18px;border-bottom:1px solid rgba(255,255,255,.12)}.brand img{width:40px;height:40px;object-fit:contain;background:#fff;border-radius:8px;padding:3px}.brand strong{display:block;font-size:13px}.brand small{color:#9fb4cb}.sidebar nav{display:flex;flex-direction:column;padding-top:14px;gap:3px}.sidebar nav a{color:#d8e2ef;padding:10px 12px;border-radius:8px;font-size:14px}.sidebar nav a:hover,.sidebar nav a.active{background:#1677ff;color:#fff}.logout-link{color:#ff6680!important;margin-top:5px}.main{margin-left:235px}.topbar{height:78px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:12px 24px;position:sticky;top:0;z-index:20}.topbar h1{margin:0;font-size:21px}.topbar p{margin:3px 0 0;color:var(--muted);font-size:12px}.user-menu{display:flex;gap:9px;align-items:center}.avatar{width:36px;height:36px;background:#dbeafe;color:#1d4ed8;border-radius:50%;display:grid;place-items:center;font-weight:800}.user-menu strong,.user-menu small{display:block}.user-menu small{color:var(--muted);font-size:11px}.menu-btn{display:none}.content{padding:22px;max-width:1540px;margin:auto}.card{background:#fff;border:1px solid #edf1f6;border-radius:12px;padding:18px;box-shadow:var(--shadow);margin-bottom:18px}.card h2{margin:0 0 14px;font-size:17px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.stat-card{color:#fff;padding:18px;border-radius:10px;min-height:112px;box-shadow:var(--shadow)}.stat-card span,.stat-card small{display:block;opacity:.9}.stat-card strong{display:block;font-size:29px;margin:8px 0}.stat-green{background:linear-gradient(135deg,#10b981,#14b8a6)}.stat-blue{background:linear-gradient(135deg,#17a7e8,#1f82d9)}.stat-red{background:linear-gradient(135deg,#ff3b5c,#ff5f6d)}.stat-purple{background:linear-gradient(135deg,#6d5dfc,#7c3aed)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}.grid-sidebar{display:grid;grid-template-columns:340px 1fr;gap:18px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.section-head h2,.section-head p{margin:0}.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:7px;padding:9px 12px;font-weight:700;cursor:pointer;white-space:nowrap}.btn-primary{background:#1677ff;color:#fff}.btn-dark{background:#10233f;color:#fff}.btn-green{background:#10a669;color:#fff}.btn-light{background:#fff;color:#172033;border:1px solid #dce3ec}.btn-danger{background:#fee2e2;color:#b91c1c}.btn-warning{background:#fff3cd;color:#9a6700}.btn-sm{padding:5px 8px;font-size:12px}.btn-lg{padding:12px 16px;font-size:15px}.full{width:100%}
label{display:block;font-size:12px;font-weight:700;margin-bottom:5px}input,select,textarea{width:100%;border:1px solid #d7dee8;border-radius:7px;padding:9px 10px;background:#fff;color:var(--text)}input:focus,select:focus,textarea:focus{outline:none;border-color:#72a9ff;box-shadow:0 0 0 3px #e8f1ff}textarea{min-height:80px;resize:vertical}.form-grid{display:grid;gap:11px}.form-grid.cols-2{grid-template-columns:1fr 1fr}.span-2{grid-column:1/-1}.filter-grid{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:10px;align-items:end;margin-bottom:15px}.filter-grid.compact{grid-template-columns:1fr 1fr auto}.filter-action{display:flex;gap:7px}.search-inline{display:flex;gap:7px}.sep{border:0;border-top:1px solid var(--line);margin:18px 0}
.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{background:#f7f9fc;color:#56657a;font-size:11px;text-transform:uppercase}td{font-size:13px}td small{display:block;color:var(--muted);margin-top:3px;line-height:1.35}.right{text-align:right}.actions-cell{display:flex;gap:5px;justify-content:flex-end}.actions-cell form{margin:0}.row-warn{background:#fff8e8}.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:800}.badge-green{background:#d9fbe9;color:#08744a}.badge-yellow{background:#fff4c6;color:#8a5a00}.badge-blue{background:#dcecff;color:#1451a6}.badge-red{background:#ffe0e6;color:#a40f2b}.badge-gray{background:#e9edf2;color:#4b5563}.alert{padding:11px 13px;border-radius:8px;margin-bottom:14px;font-weight:600}.alert-success{background:#dcfce7;color:#166534}.alert-error{background:#fee2e2;color:#991b1b}
.chart{width:100%;height:250px}.chart-axis{stroke:#b8c2ce;stroke-width:1}.chart-grid{stroke:#edf1f5;stroke-width:1}.chart-line{stroke:#1677ff;stroke-width:3}.chart-dot{fill:#1677ff}.chart-label{font-size:11px;fill:#6b7280}
.pos-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px}.pos-products{min-width:0}.pos-search{display:flex;gap:8px;margin-bottom:12px}.product-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:235px;overflow:auto;margin-bottom:14px}.product-tile{border:1px solid #dce4ef;border-radius:8px;background:#fff;padding:10px;text-align:left;display:flex;flex-direction:column;gap:4px;cursor:pointer}.product-tile:hover{border-color:#1677ff;background:#f6faff}.product-tile small{color:var(--muted)}.product-tile b{color:#1677ff}.mini-input{min-width:90px}.pos-side input,.pos-side select,.pos-side textarea{margin-bottom:8px}.money-input{width:140px!important;text-align:right;padding:6px!important}.totals>div{display:flex;justify-content:space-between;align-items:center;padding:6px 0}.totals .grand{border-top:2px solid #172033;margin-top:5px;padding-top:10px;font-size:20px}.pay-methods{display:flex;gap:10px;margin:5px 0 10px}.pay-methods label{display:flex;align-items:center;gap:5px;font-weight:500}.pay-methods input{width:auto;margin:0}.change-row{display:flex;justify-content:space-between;padding:8px;background:#f7f9fc;border-radius:7px;margin-bottom:10px}.pos-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.print-toolbar{display:flex;justify-content:flex-end;gap:7px;margin-bottom:12px}.paper{background:#fff;margin:auto;box-shadow:var(--shadow)}.paper.a4{max-width:210mm;min-height:275mm;padding:13mm}.invoice-head{display:flex;justify-content:space-between;border-bottom:2px solid #172033;padding-bottom:12px}.company-block{display:flex;gap:10px}.invoice-logo{width:70px;height:70px;object-fit:contain}.company-block h2,.company-block p,.invoice-title h1,.invoice-title p{margin:0}.company-block p,.invoice-title p{font-size:12px;line-height:1.5}.invoice-title{text-align:right}.invoice-title h1{font-size:24px;margin-bottom:7px}.barcode svg{display:block;width:100%;height:72px}.barcode-a4{max-width:320px;margin:10px 0 10px auto}.customer-box{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#f8fafc;border:1px solid var(--line);padding:10px;border-radius:8px;margin-bottom:12px}.customer-box .full{grid-column:1/-1}.customer-box span{font-size:10px;color:var(--muted);display:block}.invoice-bottom{display:grid;grid-template-columns:1fr 330px;gap:25px;margin-top:18px}.payment-box{display:flex;gap:12px;align-items:center;font-size:12px}.qr-a4{width:140px}.print-totals{margin:0}.signatures{display:grid;grid-template-columns:1fr 1fr;text-align:center;margin-top:50px}.signatures small{display:block;color:var(--muted)}
.shipping-label{width:100mm;min-height:150mm;background:#fff;margin:auto;padding:5mm;border:1px solid #111;box-shadow:var(--shadow)}.ship-top{display:flex;justify-content:space-between;border-bottom:2px solid #000;padding-bottom:6px}.ship-brand{display:flex;gap:6px;align-items:center}.ship-brand img{width:34px;height:34px;object-fit:contain}.ship-brand small{display:block}.ship-code{text-align:right;font-size:11px}.shipping-barcode{margin:5px 0}.ship-grid{display:grid;grid-template-columns:1fr 1.35fr;border-left:1px solid #000;border-top:1px solid #000}.ship-box{padding:7px;border-right:1px solid #000;border-bottom:1px solid #000}.ship-box span,.ship-detail span{font-size:9px;font-weight:700}.ship-box h2,.ship-box h3,.ship-box p{margin:3px 0}.ship-box p{font-size:11px}.receiver h2{font-size:17px}.ship-detail{display:grid;grid-template-columns:2fr .5fr .8fr 1fr;border-left:1px solid #000}.ship-detail>div{padding:6px;border-right:1px solid #000;border-bottom:1px solid #000}.ship-detail strong{display:block;font-size:11px}.ship-detail .cod{font-size:14px}.ship-note{padding:7px;border:1px solid #000;border-top:0;font-size:11px}.ship-footer{display:flex;justify-content:space-between;font-size:8px;margin-top:5px}
.receipt-body{background:#eee}.receipt-actions{max-width:80mm;margin:12px auto;display:flex;justify-content:center;gap:7px}.receipt{background:#fff;margin:auto}.k80{width:80mm;padding:4mm;font-size:12px}.receipt-logo{display:block;width:50px;height:50px;object-fit:contain;margin:auto}.receipt h2,.receipt h3,.receipt p{text-align:center;margin:4px 0}.receipt-table td{padding:4px 0;border:0}.receipt-total{display:flex;justify-content:space-between;padding:3px 0}.receipt-total.grand{font-size:16px;border-top:1px dashed #000;padding-top:6px}.qr-k80{display:block;width:145px;margin:6px auto}.center{text-align:center}
.settings-logo{display:flex;gap:16px;align-items:center;margin-bottom:16px}.settings-logo img{width:85px;height:85px;object-fit:contain;border:1px solid var(--line);border-radius:10px;padding:6px}
.login-page{min-height:100vh;background:linear-gradient(rgba(10,25,45,.42),rgba(10,25,45,.72)),url('login-bg.svg') center/cover fixed;display:grid;place-items:center;padding:20px}.login-card{width:min(430px,100%);background:rgba(15,35,61,.86);backdrop-filter:blur(10px);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.28)}.login-logo{display:block;width:170px;height:60px;object-fit:contain;margin:0 auto 8px;background:#fff;border-radius:8px;padding:4px}.login-card h1,.login-card p{text-align:center;margin:7px 0}.login-card p{color:#bed0e3;margin-bottom:20px}.login-card label{margin-top:10px}.login-card small{display:block;color:#bed0e3;margin-top:14px;text-align:center}
@media(max-width:1150px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar-open .sidebar{transform:translateX(0)}.main{margin-left:0}.menu-btn{display:block}.topbar{padding:12px 16px}.grid-sidebar{grid-template-columns:1fr}.product-picker{grid-template-columns:repeat(3,1fr)}}
@media(max-width:850px){.stats-grid,.grid-2,.pos-layout{grid-template-columns:1fr}.pos-side{order:-1}.product-picker{grid-template-columns:repeat(2,1fr)}.filter-grid,.filter-grid.compact{grid-template-columns:1fr}.form-grid.cols-2{grid-template-columns:1fr}.span-2{grid-column:auto}.invoice-bottom{grid-template-columns:1fr}.invoice-head{flex-direction:column;gap:12px}.invoice-title{text-align:left}}
@media print{body{background:#fff!important}.no-print,.sidebar,.topbar{display:none!important}.main{margin:0!important}.content{padding:0!important;max-width:none!important}.paper,.shipping-label{box-shadow:none!important;border:0!important;margin:0!important}.paper.a4{padding:0!important;max-width:none!important;min-height:0!important}@page{size:A4;margin:10mm}}
@media print{body:has(.shipping-label) .content{padding:0!important}body:has(.shipping-label) .shipping-label{width:100mm!important;min-height:150mm!important;padding:5mm!important;border:0!important}@page{size:100mm 150mm;margin:0}}

.debt-big{font-size:24px;color:#dc2626}.debt-form{background:#f8fafc;border:1px solid var(--line);padding:12px;border-radius:8px}.row-selected{background:#eaf3ff!important}.ship-code small{display:block;margin-top:4px;font-size:9px}

.product-thumb{width:58px;height:58px;border-radius:8px;object-fit:cover;border:1px solid var(--line);background:#f7f9fc}.product-thumb.placeholder,.product-tile-image.placeholder,.quote-line-image.placeholder{display:grid;place-items:center;font-size:9px;color:#94a3b8;background:#f3f6fa}
.product-edit-image{display:block;width:120px;height:120px;object-fit:cover;border:1px solid var(--line);border-radius:10px;margin-bottom:8px}
.product-tile-image{width:100%;height:92px;object-fit:cover;border-radius:7px;background:#f5f7fa;margin-bottom:4px}
.quote-picker{max-height:330px}.quote-line-image{width:60px;height:60px;object-fit:cover;border-radius:7px;border:1px solid var(--line)}.quote-print-image{width:55px;height:55px;object-fit:contain}.quote-table td{vertical-align:middle}.quote-paper{min-height:270mm}.quote-customer{margin-top:14px}.quote-bottom{align-items:start}
@media print{.quote-print-image{width:48px;height:48px}.quote-paper{min-height:0!important}}


/* ===== V2.3: Báo giá tối ưu in A4 / A5 ===== */
.print-hint{max-width:210mm;margin:0 auto 10px;padding:9px 12px;border:1px solid #cfe0f7;background:#f4f8fe;border-radius:8px;color:#36506d;font-size:12px}
.quote-paper{width:100%;min-height:0!important;height:auto!important;padding:12mm;box-shadow:var(--shadow)}
.quote-paper.print-a4{max-width:210mm}
.quote-paper.print-a5{max-width:148mm;padding:8mm}
.quote-paper .invoice-head{align-items:flex-start;gap:18px;padding-bottom:9px}
.quote-paper .company-block{min-width:0;flex:1}
.quote-paper .invoice-logo{width:56px;height:56px;flex:0 0 56px}
.quote-paper .company-block h2{font-size:20px;line-height:1.15;margin-bottom:3px}
.quote-paper .company-block p{font-size:10.5px;line-height:1.35}
.quote-paper .invoice-title{flex:0 0 245px}
.quote-paper .invoice-title h1{font-size:21px;line-height:1.1;margin-bottom:5px}
.quote-paper .invoice-title p{font-size:10.5px;line-height:1.4}
.quote-paper .quote-customer{margin:9px 0 9px;padding:8px 10px;gap:5px 12px;background:#fbfcfe}
.quote-paper .quote-customer span{font-size:9px}
.quote-paper .quote-customer strong{font-size:11.5px;margin-top:1px}
.quote-paper .quote-table{table-layout:fixed;margin-top:0}
.quote-paper .quote-table th{padding:6px 5px;font-size:9px;line-height:1.2}
.quote-paper .quote-table td{padding:6px 5px;font-size:10.5px;line-height:1.25}
.quote-paper .quote-table th:nth-child(1){width:6%}
.quote-paper .quote-table th:nth-child(2){width:10%}
.quote-paper .quote-table th:nth-child(3){width:32%}
.quote-paper .quote-table th:nth-child(4){width:8%}
.quote-paper .quote-table th:nth-child(5){width:8%}
.quote-paper .quote-table th:nth-child(6){width:17%}
.quote-paper .quote-table th:nth-child(7){width:19%}
.quote-paper .quote-print-image{width:42px;height:42px;object-fit:contain;display:block;margin:auto}
.quote-paper .quote-bottom{grid-template-columns:minmax(0,1fr) 260px;gap:16px;margin-top:10px}
.quote-paper .quote-bottom p{font-size:10px;line-height:1.35;margin:0 0 5px}
.quote-paper .print-totals>div{padding:4px 0;font-size:10.5px}
.quote-paper .print-totals .grand{font-size:15px;padding-top:7px;margin-top:3px}
.quote-paper .signatures{margin-top:25px;font-size:10.5px}
.quote-paper .signatures small{font-size:9px;margin-top:2px}

.quote-paper.print-a5 .invoice-head{gap:10px;padding-bottom:6px}
.quote-paper.print-a5 .invoice-logo{width:42px;height:42px;flex-basis:42px}
.quote-paper.print-a5 .company-block h2{font-size:15px}
.quote-paper.print-a5 .company-block p{font-size:8px;line-height:1.25}
.quote-paper.print-a5 .invoice-title{flex-basis:175px}
.quote-paper.print-a5 .invoice-title h1{font-size:16px}
.quote-paper.print-a5 .invoice-title p{font-size:8.5px;line-height:1.3}
.quote-paper.print-a5 .quote-customer{margin:6px 0;padding:6px 7px;gap:4px 8px;border-radius:5px}
.quote-paper.print-a5 .quote-customer span{font-size:7.5px}
.quote-paper.print-a5 .quote-customer strong{font-size:9px}
.quote-paper.print-a5 .quote-table th{padding:4px 3px;font-size:7.2px}
.quote-paper.print-a5 .quote-table td{padding:4px 3px;font-size:8.2px}
.quote-paper.print-a5 .quote-print-image{width:30px;height:30px}
.quote-paper.print-a5 .quote-bottom{grid-template-columns:minmax(0,1fr) 190px;gap:10px;margin-top:7px}
.quote-paper.print-a5 .quote-bottom p{font-size:8px;line-height:1.28;margin-bottom:3px}
.quote-paper.print-a5 .print-totals>div{padding:2px 0;font-size:8px}
.quote-paper.print-a5 .print-totals .grand{font-size:11px;padding-top:4px}
.quote-paper.print-a5 .signatures{margin-top:16px;font-size:8.5px}
.quote-paper.print-a5 .signatures small{font-size:7px}

@media print{
  html,body{width:auto!important;height:auto!important;background:#fff!important}
  .alert,.print-hint{display:none!important}
  .quote-paper{box-shadow:none!important;border:0!important;margin:0 auto!important;min-height:0!important;height:auto!important;overflow:visible!important}
  .quote-paper .invoice-head,.quote-paper .quote-customer,.quote-paper .quote-bottom,.quote-paper .signatures{break-inside:avoid;page-break-inside:avoid}
  .quote-paper .quote-table thead{display:table-header-group}
  .quote-paper .quote-table tr{break-inside:avoid;page-break-inside:avoid}
  .quote-paper .quote-table tbody{break-inside:auto}
  .quote-paper.print-a4{width:194mm!important;max-width:194mm!important;padding:0!important}
  .quote-paper.print-a5{width:136mm!important;max-width:136mm!important;padding:0!important}
  body.quote-print-a4 .quote-paper{width:194mm!important;max-width:194mm!important}
  body.quote-print-a5 .quote-paper{width:136mm!important;max-width:136mm!important}
  body.quote-print-a5 .quote-paper .invoice-head{gap:8px;padding-bottom:5px}
  body.quote-print-a5 .quote-paper .invoice-logo{width:38px;height:38px;flex-basis:38px}
  body.quote-print-a5 .quote-paper .company-block h2{font-size:14px}
  body.quote-print-a5 .quote-paper .company-block p{font-size:7.5px}
  body.quote-print-a5 .quote-paper .invoice-title{flex-basis:166px}
  body.quote-print-a5 .quote-paper .invoice-title h1{font-size:15px}
  body.quote-print-a5 .quote-paper .invoice-title p{font-size:8px}
  body.quote-print-a5 .quote-paper .quote-customer{margin:5px 0;padding:5px 6px}
  body.quote-print-a5 .quote-paper .quote-table th{padding:3.5px 2.5px;font-size:6.8px}
  body.quote-print-a5 .quote-paper .quote-table td{padding:3.5px 2.5px;font-size:7.8px}
  body.quote-print-a5 .quote-paper .quote-print-image{width:28px;height:28px}
  body.quote-print-a5 .quote-paper .quote-bottom{grid-template-columns:minmax(0,1fr) 180px;gap:8px;margin-top:6px}
  body.quote-print-a5 .quote-paper .signatures{margin-top:13px}
}


/* ===== V2.4: compact invoice screen preview ===== */
.sale-screen-note{max-width:210mm;margin:0 auto 10px}
.paper.a4 .invoice-head{align-items:flex-start;gap:18px;padding-bottom:9px}
.paper.a4 .invoice-logo{width:58px;height:58px}
.paper.a4 .company-block h2{font-size:20px;line-height:1.15}
.paper.a4 .company-block p{font-size:10.5px;line-height:1.35}
.paper.a4 .invoice-title h1{font-size:21px}
.paper.a4 .invoice-title p{font-size:10.5px}
.paper.a4 .barcode-a4{max-width:290px;margin:7px 0 7px auto}
.paper.a4 .barcode-a4 svg{height:58px}
.paper.a4 .customer-box{gap:5px 14px;padding:8px 10px;margin-bottom:9px}
.paper.a4 .customer-box span{font-size:9px}
.paper.a4 .customer-box strong{font-size:11.5px}
.paper.a4 .invoice-table th{padding:7px 6px;font-size:9px}
.paper.a4 .invoice-table td{padding:7px 6px;font-size:10.5px}
.paper.a4 .invoice-bottom{grid-template-columns:minmax(0,1fr) 280px;gap:18px;margin-top:11px}
.paper.a4 .payment-box{font-size:10px}
.paper.a4 .print-totals>div{padding:4px 0;font-size:10.5px}
.paper.a4 .print-totals .grand{font-size:15px;padding-top:7px}
.paper.a4 .signatures{margin-top:26px;font-size:10.5px}


/* ===== V2.5 Backup ===== */
.backup-list{padding-left:20px;line-height:1.75}.backup-list code{background:#eef2f7;padding:2px 5px;border-radius:5px}
.backup-guide{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.backup-guide>div{background:#f8fafc;border:1px solid var(--line);border-radius:9px;padding:13px}.backup-guide strong,.backup-guide span{display:block}.backup-guide span{color:var(--muted);font-size:12px;margin-top:5px;line-height:1.4}
@media(max-width:900px){.backup-guide{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.backup-guide{grid-template-columns:1fr}}


/* ===== V2.6: chọn khách có sẵn khi tạo phiếu gửi ===== */
.receiver-customer-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.receiver-customer-row .btn{height:100%}
@media(max-width:650px){.receiver-customer-row{grid-template-columns:1fr}.receiver-customer-row .btn{width:100%}}


/* ===== V2.7: số dư có / khách trả dư ===== */
.balance-debt{color:#b42318}.balance-credit{color:#067647}.credit-big{font-size:22px;color:#067647}.balance-zero{font-size:18px;color:#475467}
.customer-credit-notice{background:#ecfdf3;border:1px solid #abefc6;color:#05603a;padding:11px 12px;border-radius:8px;margin:0 0 14px;font-size:13px;line-height:1.45}
.customer-credit-box{background:#ecfdf3;border:1px solid #abefc6;border-radius:8px;padding:9px 10px;margin:8px 0 4px;color:#05603a}
.customer-credit-box span,.customer-credit-box strong,.customer-credit-box small{display:block}.customer-credit-box span{font-size:11px}.customer-credit-box strong{font-size:18px;margin:2px 0}.customer-credit-box small{font-size:10px}


/* ===== V2.8: sản phẩm trong phiếu gửi ===== */
.shipping-product-picker{display:grid;grid-template-columns:minmax(0,1fr) 110px auto;gap:8px;align-items:center}
.shipping-selected-products{display:grid;gap:7px}
.shipping-selected-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--line);background:#f8fafc;border-radius:8px;padding:8px 10px}
.shipping-selected-row strong,.shipping-selected-row small{display:block}.shipping-selected-row small{color:var(--muted);margin-top:2px;font-size:11px}
.shipping-selected-actions{display:flex;align-items:center;gap:7px}.shipping-selected-actions input{width:85px}.shipping-selected-actions span{font-size:12px;color:var(--muted)}
.restore-card{border-color:#fecaca}.restore-warning{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;padding:11px 13px;border-radius:8px;margin-bottom:14px;line-height:1.45}.restore-warning strong,.restore-warning span{display:block}
.restore-form{display:grid;gap:14px}.restore-check{display:flex;align-items:flex-start;gap:9px;font-weight:500}.restore-check input{width:auto;margin-top:2px}
@media(max-width:720px){.shipping-product-picker{grid-template-columns:1fr}.shipping-selected-row{grid-template-columns:1fr}.shipping-selected-actions{justify-content:flex-start}}


/* ===== V2.8.1: chuyển Còn nợ xuống khu vực tổng tiền ===== */
.debt-row{border-top:1px dashed #d0d5dd;margin-top:4px;padding-top:7px!important;color:#b42318;font-weight:700}
.print-totals .debt-row strong{color:#b42318}


/* ===== V2.8.3: hiển thị nợ / số dư khách trên hóa đơn ===== */
.credit-row{border-top:1px dashed #d0d5dd;margin-top:4px;padding-top:7px!important;color:#067647;font-weight:700}
.credit-row strong{color:#067647}
.debt-zero{color:#667085!important}
.debt-zero strong{color:#667085!important}


/* ===== V2.8.4: larger invoice / quotation preview ===== */
.paper.a4 .company-block h2{font-size:23px}
.paper.a4 .company-block p{font-size:12px}
.paper.a4 .invoice-title h1{font-size:25px}
.paper.a4 .invoice-title p{font-size:12px}
.paper.a4 .customer-box span{font-size:10px}
.paper.a4 .customer-box strong{font-size:13px}
.paper.a4 .invoice-table th{font-size:10px;padding:9px 7px}
.paper.a4 .invoice-table td{font-size:12px;padding:9px 7px}
.paper.a4 .invoice-table td small{font-size:9px}
.paper.a4 .print-totals>div{font-size:12px;padding:5px 0}
.paper.a4 .print-totals .grand{font-size:17px}
.paper.a4 .signatures{font-size:12px}
.quote-paper .company-block h2{font-size:23px}
.quote-paper .company-block p{font-size:12px}
.quote-paper .invoice-title h1{font-size:25px}
.quote-paper .invoice-title p{font-size:12px}
.quote-paper .customer-box span{font-size:10px}
.quote-paper .customer-box strong{font-size:13px}
.quote-paper .quote-table th{font-size:10px}
.quote-paper .quote-table td{font-size:12px}
.quote-paper .quote-table td small{font-size:9px}


/* ===== V2.8.5: backup media integrity ===== */
.backup-media-error p{margin:7px 0}
.backup-media-error details{margin-top:8px}
.backup-media-error summary{cursor:pointer;font-weight:700}
.backup-media-error ul{max-height:220px;overflow:auto;background:#fff;padding:10px 10px 10px 28px;border-radius:7px}
.backup-media-error code{font-size:11px}


/* ===== V2.8.6: quote image collision fix + larger invoice preview ===== */
.quote-table{table-layout:fixed}
.quote-table th:nth-child(1),.quote-table td:nth-child(1){width:6%}
.quote-table th:nth-child(2),.quote-table td:nth-child(2){width:14%}
.quote-table th:nth-child(3),.quote-table td:nth-child(3){width:28%}
.quote-table th:nth-child(4),.quote-table td:nth-child(4){width:7%}
.quote-table th:nth-child(5),.quote-table td:nth-child(5){width:8%}
.quote-table th:nth-child(6),.quote-table td:nth-child(6){width:17%}
.quote-table th:nth-child(7),.quote-table td:nth-child(7){width:20%}
.quote-table td:nth-child(2){text-align:center;overflow:hidden;padding-left:8px!important;padding-right:8px!important}
.quote-table td:nth-child(3){padding-left:12px!important;word-break:break-word;overflow-wrap:anywhere}
.quote-print-image{display:block;max-width:100%;width:auto;height:auto;max-height:72px;margin:auto;object-fit:contain}

.paper.a4 .company-block h2{font-size:26px}
.paper.a4 .company-block p{font-size:13px}
.paper.a4 .invoice-title h1{font-size:29px}
.paper.a4 .invoice-title p{font-size:13px}
.paper.a4 .customer-box span{font-size:11px}
.paper.a4 .customer-box strong{font-size:15px}
.paper.a4 .invoice-table th{font-size:11px;padding:10px 7px}
.paper.a4 .invoice-table td{font-size:14px;padding:10px 7px}
.paper.a4 .invoice-table td small{font-size:10px}
.paper.a4 .print-totals>div{font-size:14px;padding:6px 0}
.paper.a4 .print-totals .grand{font-size:20px}


/* ===== V2.8.7: sửa / xóa phiếu gửi ===== */
.shipping-row-actions{min-width:190px;align-items:center;flex-wrap:wrap}
.shipping-row-actions form{display:inline-flex;margin:0}
.shipping-form-actions{display:flex;gap:8px;align-items:center;margin-top:4px}
@media(max-width:650px){.shipping-form-actions{flex-direction:column;align-items:stretch}.shipping-form-actions .btn{width:100%}}


/* ===== V2.8.8: restore backup cũ thiếu media ===== */
.restore-legacy-option{
  background:#fff8e6;
  border:1px solid #f5d78e;
  border-radius:8px;
  padding:10px 12px;
}
.restore-legacy-option strong{color:#8a5b00}


/* ===== V2.8.9: logo lớn và cân đối hơn ===== */
.invoice-head .company-block{
  align-items:center;
  gap:14px;
}
.invoice-head .invoice-logo{
  width:94px;
  height:72px;
  flex:0 0 94px;
  object-fit:contain;
  object-position:center;
}
.paper.a4 .invoice-logo{
  width:94px!important;
  height:72px!important;
  flex:0 0 94px!important;
}
.quote-paper .invoice-logo{
  width:90px!important;
  height:68px!important;
  flex:0 0 90px!important;
}
.quote-paper .company-block{
  align-items:center;
  gap:13px;
}
.quote-paper.print-a5 .invoice-logo{
  width:68px!important;
  height:52px!important;
  flex-basis:68px!important;
}
.ship-brand img{
  width:48px;
  height:42px;
  object-fit:contain;
}
@media(max-width:760px){
  .invoice-head .invoice-logo,
  .paper.a4 .invoice-logo{
    width:78px!important;
    height:60px!important;
    flex-basis:78px!important;
  }
}


/* =========================================================
   V2.9.0 MOBILE RESPONSIVE
   Chỉ áp dụng trên màn hình, không tác động CSS in.
   ========================================================= */
.sidebar-backdrop,.mobile-bottom-nav{display:none}

@media screen and (max-width:1150px){
  body.sidebar-open{overflow:hidden}
  .sidebar{
    width:min(86vw,310px);
    transform:translateX(-105%);
    transition:transform .22s ease;
    box-shadow:18px 0 45px rgba(2,15,35,.28);
    z-index:80;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .sidebar-open .sidebar{transform:translateX(0)}
  .sidebar-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(7,18,35,.48);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.2s;
    z-index:70;
  }
  .sidebar-open .sidebar-backdrop{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .main{margin-left:0}
  .menu-btn{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    padding:0;
    border:1px solid var(--line);
    background:#fff;
    border-radius:10px;
    color:var(--dark);
    font-size:21px;
    cursor:pointer;
    flex:0 0 auto;
  }
}

@media screen and (max-width:760px){
  html{-webkit-text-size-adjust:100%}
  body{padding-bottom:72px}
  .content{
    padding:12px;
    width:100%;
    overflow:hidden;
  }

  /* Top bar */
  .topbar{
    height:64px;
    padding:9px 12px;
    gap:10px;
    z-index:45;
  }
  .topbar>div:nth-child(2){
    min-width:0;
    flex:1;
  }
  .topbar h1{
    font-size:17px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .topbar p{font-size:10px;margin-top:2px}
  .user-menu{gap:0}
  .user-menu>div:last-child{display:none}
  .avatar{width:36px;height:36px;font-size:14px}

  /* Bottom navigation */
  .mobile-bottom-nav{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    position:fixed;
    left:0;right:0;bottom:0;
    height:64px;
    padding:5px max(5px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left));
    background:rgba(255,255,255,.98);
    border-top:1px solid #dde4ed;
    box-shadow:0 -8px 24px rgba(20,41,70,.10);
    z-index:60;
  }
  .mobile-bottom-nav a,.mobile-bottom-nav button{
    border:0;
    background:transparent;
    color:#607086;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1px;
    padding:2px;
    font-family:inherit;
    min-width:0;
  }
  .mobile-bottom-nav span{font-size:19px;line-height:22px}
  .mobile-bottom-nav small{font-size:9px;font-weight:700;white-space:nowrap}
  .mobile-bottom-nav a.active{color:var(--primary)}
  .mobile-bottom-nav button{cursor:pointer}

  /* Sidebar mobile */
  .sidebar{padding-bottom:88px}
  .sidebar .brand{position:sticky;top:0;background:#0d2b4f;z-index:2;padding-top:8px}
  .sidebar .brand img{width:48px;height:48px}
  .sidebar .brand strong{font-size:15px}
  .sidebar nav a{
    min-height:44px;
    display:flex;
    align-items:center;
    font-size:15px;
    padding:11px 13px;
  }

  /* Cards / page sections */
  .card{
    padding:13px;
    border-radius:11px;
    margin-bottom:12px;
    box-shadow:0 5px 18px rgba(29,52,84,.06);
  }
  .card h2{font-size:16px;margin-bottom:11px}
  .grid-2,.grid-sidebar,.pos-layout{grid-template-columns:1fr!important;gap:12px}
  .section-head{
    align-items:flex-start;
    flex-wrap:wrap;
    gap:9px;
    margin-bottom:11px;
  }
  .section-head>div{min-width:0}
  .section-head>.btn{width:auto}
  .stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px;
    margin-bottom:12px;
  }
  .stat-card{
    min-height:92px;
    padding:12px;
    border-radius:9px;
  }
  .stat-card span{font-size:11px}
  .stat-card strong{font-size:21px;margin:7px 0}
  .stat-card small{font-size:9.5px;line-height:1.3}

  /* Touch-friendly controls */
  label{font-size:12px}
  input,select,textarea{
    min-height:44px;
    padding:10px 11px;
    font-size:16px; /* tránh Safari tự zoom */
  }
  textarea{min-height:86px}
  .form-grid,.form-grid.cols-2{grid-template-columns:1fr!important;gap:10px}
  .span-2{grid-column:auto!important}
  .filter-grid,.filter-grid.compact{
    grid-template-columns:1fr!important;
    gap:8px;
  }
  .filter-action,.search-inline{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    width:100%;
  }
  .search-inline input{grid-column:1/-1}
  .btn{
    min-height:42px;
    padding:10px 12px;
    font-size:13px;
  }
  .btn-sm{min-height:36px;padding:7px 9px;font-size:11px}
  .btn-lg{min-height:46px;font-size:14px}
  .actions-cell{
    justify-content:flex-start;
    flex-wrap:wrap;
  }

  /* Tables -> readable mobile cards, automatically labeled by app.js */
  .table-wrap{
    overflow:visible;
    width:100%;
  }
  .mobile-card-table{
    display:block;
    width:100%;
  }
  .mobile-card-table thead{display:none}
  .mobile-card-table tbody{display:grid;gap:9px}
  .mobile-card-table tbody tr{
    display:block;
    background:#fff;
    border:1px solid #e0e6ef;
    border-radius:10px;
    padding:5px 10px;
    box-shadow:0 3px 12px rgba(26,45,73,.04);
    overflow:hidden;
  }
  .mobile-card-table tbody tr.row-warn{background:#fff9eb}
  .mobile-card-table tbody td{
    display:grid;
    grid-template-columns:108px minmax(0,1fr);
    align-items:start;
    gap:8px;
    width:100%!important;
    min-height:34px;
    padding:8px 0!important;
    border:0;
    border-bottom:1px solid #edf1f5;
    text-align:left!important;
    font-size:13px;
    overflow-wrap:anywhere;
  }
  .mobile-card-table tbody td:last-child{border-bottom:0}
  .mobile-card-table tbody td::before{
    content:attr(data-label);
    color:#6a778a;
    text-transform:uppercase;
    font-size:9.5px;
    font-weight:800;
    line-height:1.5;
  }
  .mobile-card-table tbody td.mobile-empty-cell{
    display:block;
    text-align:center!important;
    color:var(--muted);
    padding:14px 4px!important;
  }
  .mobile-card-table tbody td.mobile-empty-cell::before{display:none}
  .mobile-card-table tbody td.actions-cell{
    display:flex;
    justify-content:flex-end;
    gap:6px;
    padding-top:10px!important;
  }
  .mobile-card-table tbody td.actions-cell::before{display:none}
  .mobile-card-table tbody td.actions-cell .btn,
  .mobile-card-table tbody td.actions-cell form{flex:0 0 auto}
  .mobile-card-table .right{text-align:left!important}
  .shipping-row-actions{min-width:0!important}

  /* Product management thumbnails/cards */
  .product-thumb{width:72px;height:72px}
  .settings-logo{align-items:flex-start}
  .settings-logo img{width:72px;height:72px}

  /* POS */
  .pos-layout{display:flex!important;flex-direction:column}
  .pos-products{order:1}
  .pos-side{order:2!important}
  .pos-search{
    position:sticky;
    top:70px;
    z-index:10;
    padding:7px;
    margin:-4px -4px 10px;
    background:rgba(244,247,251,.96);
    backdrop-filter:blur(8px);
    border-radius:8px;
  }
  .product-picker{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px;
    max-height:none;
    overflow:visible;
  }
  .product-tile{
    min-width:0;
    padding:8px;
    min-height:150px;
  }
  .product-tile-image{
    height:96px;
    width:100%;
    object-fit:contain;
    background:#f6f8fb;
  }
  .product-tile strong{
    font-size:12px;
    line-height:1.25;
    word-break:break-word;
  }
  .product-tile small{font-size:10px}
  .product-tile b{font-size:11px}
  .pos-side{
    position:static;
  }
  .pos-buttons{grid-template-columns:1fr;gap:8px}
  .money-input{width:100%!important;text-align:right}
  .pay-methods{flex-wrap:wrap}
  #cart.mobile-card-table tbody td{
    grid-template-columns:86px minmax(0,1fr);
  }
  #cart .mini-input{min-width:0;width:100%}

  /* Shipping */
  .shipping-product-picker{
    grid-template-columns:1fr!important;
  }
  .shipping-selected-row{
    grid-template-columns:1fr!important;
  }
  .shipping-selected-actions{
    display:grid;
    grid-template-columns:1fr auto auto;
    width:100%;
  }
  .shipping-selected-actions input{width:100%}
  .receiver-customer-row{grid-template-columns:1fr!important}
  .shipping-form-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .shipping-form-actions .btn{width:100%}

  /* Backup/settings */
  .backup-guide{grid-template-columns:1fr!important}
  .restore-form .btn{width:100%}

  /* On-screen document previews: fit the phone.
     Dedicated print pages keep their own print CSS unchanged. */
  .print-toolbar{
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
  }
  .print-toolbar .btn{flex:0 0 auto}
  .paper,.paper.a4,.quote-paper{
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    padding:12px!important;
    box-shadow:none;
    border:1px solid #e1e6ee;
    overflow:hidden;
  }
  .invoice-head{
    flex-direction:column;
    gap:10px;
  }
  .invoice-title{text-align:left}
  .invoice-head .company-block{
    width:100%;
    align-items:center;
  }
  .invoice-head .invoice-logo,
  .paper.a4 .invoice-logo,
  .quote-paper .invoice-logo{
    width:76px!important;
    height:58px!important;
    flex-basis:76px!important;
  }
  .paper.a4 .company-block h2,.quote-paper .company-block h2{font-size:18px}
  .paper.a4 .company-block p,.quote-paper .company-block p{font-size:10px}
  .paper.a4 .invoice-title h1,.quote-paper .invoice-title h1{font-size:20px}
  .customer-box,.quote-customer{grid-template-columns:1fr!important}
  .customer-box .full,.quote-customer .full{grid-column:auto!important}
  .invoice-bottom,.quote-bottom{grid-template-columns:1fr!important;gap:12px}
  .signatures{margin-top:22px}
  .shipping-label{width:100%;min-height:0;padding:10px;box-shadow:none}
  .ship-grid{grid-template-columns:1fr}
  .ship-detail{grid-template-columns:1fr 1fr}
  .ship-top{gap:8px}
}

@media screen and (max-width:420px){
  .content{padding:9px}
  .stats-grid{grid-template-columns:1fr 1fr!important}
  .stat-card{padding:10px;min-height:86px}
  .stat-card strong{font-size:19px}
  .product-picker{grid-template-columns:1fr 1fr!important}
  .mobile-card-table tbody td{grid-template-columns:92px minmax(0,1fr)}
  .mobile-bottom-nav small{font-size:8.5px}
}


/* ===== V2.9.1: tách Nợ cũ / Nợ mới / Tổng nợ ===== */
.debt-breakdown-row{color:#475467}
.total-debt-row{
  border-top:1px dashed #d0d5dd;
  margin-top:4px;
  padding-top:8px!important;
  font-weight:800;
}
.total-debt-row.has-debt,
.total-debt-row.has-debt strong{color:#b42318}
.total-debt-row.debt-zero,
.total-debt-row.debt-zero strong{color:#667085}
.debt-k80{color:#b42318}
.credit-k80{color:#067647}


/* ===== V2.9.2: thu tiền cấn công nợ / hiển thị số dư ===== */
.customer-credit-box.is-debt{
  background:#fff4ed;
  border-color:#ffd6ae;
  color:#9c2a10;
}
.customer-credit-box.is-credit{
  background:#ecfdf3;
  border-color:#abefc6;
  color:#05603a;
}
.projected-balance-row{border-top:1px dashed #d0d5dd;padding-top:8px}
.projected-balance-row.projected-debt,
.projected-balance-row.projected-debt strong{color:#b42318}
.projected-balance-row.projected-credit,
.projected-balance-row.projected-credit strong{color:#067647}
.projected-balance-row.projected-zero,
.projected-balance-row.projected-zero strong{color:#667085}
.cash-received-row{font-weight:700;color:#101828}
.opening-credit-row{border-top:0!important;margin-top:0!important}
.final-credit-row{
  border-top:1px dashed #abefc6!important;
  margin-top:4px;
  padding-top:8px!important;
  font-size:1.04em;
}


/* ===== V3.0 Website bán hàng / Online Orders ===== */
.toggle-label{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:#f8fafc;font-weight:600}.toggle-label input{width:auto;margin:0}.online-customer{display:grid;grid-template-columns:1fr 1fr;gap:10px}.online-customer>div{background:#f8fafc;border:1px solid var(--line);padding:10px;border-radius:8px}.online-customer span,.online-customer strong,.online-customer small{display:block}.online-customer span{font-size:10px;color:var(--muted);text-transform:uppercase}.online-customer strong{margin-top:4px}.online-actions{display:grid;gap:8px}.online-totals{max-width:360px;margin:16px 0 0 auto}.online-totals>div{display:flex;justify-content:space-between;padding:6px 0}.online-totals .grand{font-size:20px;border-top:2px solid var(--text);padding-top:10px}.shop-status{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:800}.shop-status-new{background:#fff4c6;color:#8a5a00}.shop-status-confirmed{background:#dcecff;color:#1451a6}.shop-status-packing{background:#ede9fe;color:#5b21b6}.shop-status-shipping{background:#e0f2fe;color:#075985}.shop-status-done{background:#d9fbe9;color:#08744a}.shop-status-cancel{background:#ffe0e6;color:#a40f2b}@media(max-width:760px){.online-customer{grid-template-columns:1fr}.online-customer .span-2{grid-column:auto}.online-totals{max-width:none}}


/* ===== V3.2.2: mô tả sản phẩm trong quản trị ===== */
.product-short-description{
  min-height:82px!important;
}
.product-long-description{
  min-height:150px!important;
}


/* =========================================================
   V3.2.3 FACEBOOK PAGE -> MESSENGER
   ========================================================= */
.messenger-settings{
  scroll-margin-top:20px;
}
.messenger-status{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:5px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}
.messenger-status.ok{background:#ecfdf3;color:#067647;border:1px solid #abefc6}
.messenger-status.warn{background:#fffaeb;color:#b54708;border:1px solid #fedf89}
.messenger-status.off{background:#f2f4f7;color:#667085;border:1px solid #e4e7ec}

.messenger-policy-note{
  margin:0 0 15px;
  padding:11px 13px;
  border:1px solid #fedf89;
  border-radius:9px;
  background:#fffaeb;
  color:#7a4d00;
  font-size:12px;
  line-height:1.55;
}
.messenger-toggle{
  margin-bottom:16px!important;
  padding:12px 13px!important;
  border:1px solid #d7e6fb;
  border-radius:10px;
  background:#f6faff;
}
.messenger-toggle span,
.messenger-toggle b,
.messenger-toggle small{
  display:block;
}
.messenger-toggle small{
  margin-top:3px;
  color:var(--muted);
  font-weight:500;
}

.messenger-grid small{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:10px;
}
.mono-input{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;
  font-size:11px!important;
}

.messenger-pair-box{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);
  gap:15px;
  margin-top:17px;
  padding:16px;
  border:1px solid #d7e6fb;
  border-radius:12px;
  background:linear-gradient(135deg,#f8fbff,#f3f8ff);
}
.messenger-pair-box>div:first-child>span{
  color:#1570ef;
  font-size:9px;
  letter-spacing:1.2px;
  font-weight:900;
}
.messenger-pair-box h3{
  margin:5px 0 10px;
  font-size:16px;
}
.messenger-pair-box code{
  display:inline-block;
  padding:9px 13px;
  border-radius:9px;
  background:#172b4d;
  color:#fff;
  font-size:16px;
  font-weight:900;
  letter-spacing:.7px;
  user-select:all;
}
.messenger-pair-box p{
  margin:9px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.55;
}
.messenger-pair-state{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  padding:13px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
}
.messenger-pair-state b{color:#101828}
.messenger-pair-state span{color:var(--muted);font-size:11px;line-height:1.45}
.messenger-last-status{
  margin-top:12px;
  padding:10px 12px;
  border-radius:8px;
  background:#f8fafc;
  border:1px solid var(--line);
  color:#475467;
  font-size:11px;
  line-height:1.5;
}
.messenger-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:14px;
}
.messenger-test-form{
  display:flex;
  justify-content:flex-end;
  margin-top:-46px;
  margin-bottom:15px;
  margin-right:205px;
}

@media(max-width:800px){
  .messenger-pair-box{grid-template-columns:1fr}
  .messenger-test-form{
    margin:10px 0 15px;
    justify-content:stretch;
  }
  .messenger-test-form .btn{width:100%}
  .messenger-actions{justify-content:stretch}
  .messenger-actions .btn{width:100%}
}


/* =========================================================
   V3.2.4 DEBT QUICK AMOUNT
   ========================================================= */
.debt-amount-field{min-width:0}
.debt-quick-amounts{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:7px;
}
.debt-quick-btn{
  min-height:29px;
  padding:5px 9px;
  border:1px solid #cdd9e8;
  border-radius:8px;
  background:#fff;
  color:#285071;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
  transition:.15s ease;
}
.debt-quick-btn:hover:not(:disabled){
  border-color:#85b7ff;
  background:#f0f7ff;
  color:#1268d8;
}
.debt-quick-btn.debt-quick-total{
  border-color:#9ddbbd;
  background:#effaf4;
  color:#087847;
}
.debt-quick-btn.debt-quick-total:hover{
  border-color:#54bd8a;
  background:#e5f7ee;
  color:#05683d;
}
.debt-quick-btn:disabled{
  opacity:.48;
  cursor:not-allowed;
}
.debt-amount-hint{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:10px;
  line-height:1.4;
}
@media(max-width:700px){
  .debt-quick-amounts{display:grid;grid-template-columns:1fr}
  .debt-quick-btn{width:100%}
}


/* ===== V3.2.5: Phiếu thu công nợ ===== */
.debt-receipt-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
@media(max-width:700px){
  .debt-receipt-actions .btn{
    flex:1 1 100%;
    width:100%;
  }
}


/* ===== V3.2.6: lọc sản phẩm theo danh mục ở POS ===== */
.pos-filter-bar{
  display:grid;
  grid-template-columns:minmax(220px,320px) auto auto;
  gap:10px;
  align-items:end;
  margin:-2px 0 12px;
}
.pos-filter-group label{
  margin-bottom:6px;
}
.pos-filter-status{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:1px solid var(--line);
  background:#f8fbff;
  border-radius:10px;
  padding:8px 12px;
  min-width:140px;
}
.pos-filter-status strong{
  font-size:22px;
  line-height:1;
  color:#1677ff;
}
.pos-filter-status span{
  font-size:11px;
  color:var(--muted);
  margin-top:3px;
}
.pos-filter-actions{
  display:flex;
  align-items:end;
}
.pos-filter-actions .btn{
  min-height:40px;
}
.product-tile-category{
  display:inline-flex;
  align-self:flex-start;
  font-size:10px;
  font-weight:800;
  color:#1451a6;
  background:#eaf2ff;
  border:1px solid #cfe0ff;
  border-radius:999px;
  padding:3px 8px;
  margin-bottom:2px;
}
.product-empty-state{
  border:1px dashed #cdd7e3;
  background:#f8fafc;
  border-radius:10px;
  padding:18px 14px;
  text-align:center;
  margin:0 0 14px;
}
.product-empty-state strong,
.product-empty-state span{
  display:block;
}
.product-empty-state strong{
  font-size:15px;
  margin-bottom:4px;
}
.product-empty-state span{
  color:var(--muted);
  font-size:12px;
}
@media(max-width:850px){
  .pos-filter-bar{
    grid-template-columns:1fr;
    align-items:stretch;
  }
  .pos-filter-actions .btn{
    width:100%;
  }
}


/* ===== V3.2.7: sửa tồn kho khi chỉnh hóa đơn ===== */
.stock-edit-rule{
  background:#eef8ff;
  border:1px solid #bfdbfe;
  color:#17456f;
  line-height:1.5;
}


/* =========================================================
   V3.3.0 PRODUCT EXCEL IMPORT / EXPORT
   ========================================================= */
.product-list-head>div:first-child{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.product-list-head h2{
  margin:0!important;
}
.product-excel-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.excel-import-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:18px;
  align-items:start;
}
.excel-import-main{
  min-width:0;
}
.excel-import-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:5px 0 18px;
}
.excel-import-steps>div{
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px;
  background:#f7faff;
  border:1px solid #dce9fb;
  border-radius:10px;
  color:#344054;
  font-size:12px;
  font-weight:700;
}
.excel-import-steps b{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  flex:0 0 26px;
  border-radius:50%;
  background:#1677ff;
  color:#fff;
}
.excel-upload-form{
  display:grid;
  gap:12px;
}
.excel-dropzone{
  position:relative;
  min-height:190px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:7px;
  padding:25px;
  border:2px dashed #b8c9df;
  background:#f9fbfe;
  border-radius:14px;
  cursor:pointer;
  text-align:center;
  transition:.18s;
}
.excel-dropzone:hover{
  border-color:#1677ff;
  background:#f3f8ff;
}
.excel-dropzone input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}
.excel-dropzone strong{
  font-size:16px;
}
.excel-dropzone small{
  color:var(--muted);
}
.excel-icon{
  display:grid;
  place-items:center;
  width:62px;
  height:52px;
  border-radius:10px;
  background:#0f9d58;
  color:#fff;
  font-weight:900;
  letter-spacing:.5px;
}
.excel-import-help ul{
  margin:0;
  padding-left:18px;
  color:#475467;
  font-size:12px;
  line-height:1.65;
}
.excel-help-actions{
  display:grid;
  gap:8px;
  margin-top:16px;
}
.excel-import-success{
  padding:18px;
  border:1px solid #abefc6;
  background:#ecfdf3;
  border-radius:12px;
}
.excel-import-success>strong{
  display:block;
  color:#067647;
  font-size:18px;
  margin-bottom:13px;
}
.excel-import-stats{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
  margin-bottom:14px;
}
.excel-import-stats>div{
  padding:10px;
  background:#fff;
  border:1px solid #d1fadf;
  border-radius:9px;
}
.excel-import-stats span,
.excel-import-stats b{
  display:block;
}
.excel-import-stats span{
  color:#667085;
  font-size:10px;
}
.excel-import-stats b{
  margin-top:4px;
  font-size:20px;
  color:#067647;
}
.excel-error-text{
  color:#b42318;
  font-weight:700;
}
@media(max-width:1050px){
  .excel-import-shell{
    grid-template-columns:1fr;
  }
  .excel-import-help{
    order:-1;
  }
}
@media(max-width:720px){
  .product-list-head{
    align-items:stretch!important;
    flex-direction:column;
  }
  .product-list-head>div:first-child{
    align-items:flex-start;
    flex-direction:column;
  }
  .product-excel-actions{
    width:100%;
  }
  .product-excel-actions .btn{
    flex:1 1 auto;
  }
  .excel-import-steps,
  .excel-import-stats{
    grid-template-columns:1fr;
  }
}


/* ===== V3.3.2: Excel import robust ===== */
.excel-detected-sheet{
  margin:0 0 12px;
  color:#475467;
  font-size:12px;
}


/* =========================================================
   V3.3.5 EXCEL SYNC MODE
   ========================================================= */
.excel-import-mode{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.excel-mode-option{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:13px;
  border:1px solid #d8e1ec;
  border-radius:11px;
  background:#fff;
  cursor:pointer;
  transition:.16s;
}
.excel-mode-option:hover{
  border-color:#9fc3f6;
  background:#f8fbff;
}
.excel-mode-option.selected{
  border-color:#1677ff;
  box-shadow:0 0 0 3px #e8f1ff;
  background:#f6faff;
}
.excel-mode-option input{
  width:auto;
  margin:3px 0 0;
  flex:0 0 auto;
}
.excel-mode-option span,
.excel-mode-option b,
.excel-mode-option small{
  display:block;
}
.excel-mode-option b{
  font-size:13px;
  color:#172033;
}
.excel-mode-option small{
  margin-top:4px;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}
.excel-sync-warning{
  padding:11px 13px;
  border:1px solid #fedf89;
  border-radius:9px;
  background:#fffaeb;
  color:#7a4d00;
  font-size:12px;
  line-height:1.5;
}
.excel-sync-result{
  margin:0 0 12px;
  color:#475467;
  font-size:12px;
}
.excel-import-stats{
  grid-template-columns:repeat(6,1fr);
}
@media(max-width:900px){
  .excel-import-stats{
    grid-template-columns:repeat(3,1fr);
  }
}
@media(max-width:720px){
  .excel-import-mode{
    grid-template-columns:1fr;
  }
  .excel-import-stats{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   V3.4.0 EXCEL IMAGE SYNC / MEDIA LIBRARY
   ========================================================= */
.media-page-grid{grid-template-columns:340px 1fr;}
.media-library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.media-card{border:1px solid #e4eaf3;border-radius:14px;background:#fff;overflow:hidden;display:flex;flex-direction:column;}
.media-card img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#f7f9fc;}
.media-card-body{padding:12px;display:grid;gap:6px;}
.media-card-body strong{font-size:13px;word-break:break-word;}
.media-card-body small{color:var(--muted);word-break:break-word;display:block;}
.media-card-body code{font-size:11px;}
.media-note{margin-top:16px;}
@media(max-width:980px){.media-page-grid{grid-template-columns:1fr;}}


/* =========================================================
   V3.4.2 MEDIA LIBRARY FULL INTEGRATION
   ========================================================= */
.media-top-grid{
  display:grid;
  grid-template-columns:minmax(300px,.8fr) minmax(360px,1.2fr);
  gap:18px;
  margin-bottom:18px;
}
.media-library-head{align-items:flex-end}
.media-library-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:14px;
}
.media-card{
  border:1px solid #e1e7ef;
  border-radius:13px;
  overflow:hidden;
  background:#fff;
}
.media-card-image{
  display:block;
  background:#f5f7fa;
}
.media-card img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
}
.media-card-body{
  padding:11px;
  display:grid;
  gap:6px;
}
.media-card-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:7px;
}
.media-card-title-row strong{font-size:13px;word-break:break-word}
.media-type-badge{
  flex:0 0 auto;
  padding:3px 6px;
  border:1px solid #d6e4f6;
  background:#f4f8fd;
  color:#245a96;
  border-radius:999px;
  font-size:9px;
  font-weight:800;
}
.media-card-actions{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  margin-top:3px;
}
.media-card-actions form{display:inline}
.media-edit-preview{
  display:flex;
  justify-content:center;
  margin-bottom:12px;
}
.media-edit-preview img{
  width:180px;
  height:150px;
  object-fit:contain;
  border:1px solid var(--line);
  border-radius:12px;
  background:#f8fafc;
}
.media-usage-box{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  padding:10px;
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:9px;
  font-size:11px;
}
.media-usage-box b{width:100%}
.media-usage-box span{
  padding:4px 7px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
}
.media-edit-actions{display:flex;gap:8px;flex-wrap:wrap}
.media-force-delete{
  margin-bottom:10px!important;
  padding:10px!important;
  border:1px solid #fda29b;
  background:#fff5f4;
  border-radius:8px;
}
.product-media-current{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}
.product-media-buttons,
.settings-logo-actions{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}
.settings-logo-library>div{
  display:grid;
  gap:8px;
}
.media-picker-open{overflow:hidden}
.media-picker-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
}
.media-picker-modal.open{display:block}
.media-picker-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(2px);
}
.media-picker-panel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(960px,94vw);
  max-height:88vh;
  overflow:auto;
  background:#fff;
  border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.25);
  padding:16px;
}
.media-picker-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:10px;
}
.media-picker-head h2{margin:0 0 3px}
.media-picker-head small{color:var(--muted)}
.media-picker-search{margin-bottom:12px}
.media-picker-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px;
}
.media-picker-item{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:stretch;
  border:1px solid var(--line);
  background:#fff;
  border-radius:10px;
  padding:7px;
  text-align:left;
  cursor:pointer;
}
.media-picker-item:hover{
  border-color:#1677ff;
  box-shadow:0 0 0 2px #e9f2ff;
}
.media-picker-item img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:7px;
  background:#f5f7fa;
}
.media-picker-item strong{
  font-size:11px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.media-picker-item small{font-size:9px;color:var(--muted)}

@media(max-width:900px){
  .media-top-grid{grid-template-columns:1fr}
  .media-library-head{align-items:stretch;flex-direction:column}
}
@media(max-width:650px){
  .product-media-current{align-items:flex-start;flex-direction:column}
  .product-media-buttons .btn,
  .settings-logo-actions .btn{width:100%}
  .media-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* =========================================================
   V3.5.0 THƯ VIỆN FILE
   ========================================================= */
.file-library-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.75fr);
  gap:18px;
  margin-bottom:18px;
}
.file-library-edit{align-self:start}
.file-edit-icon{
  display:flex;
  align-items:center;
  gap:13px;
  padding:13px;
  margin-bottom:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#f8fafc;
}
.file-edit-icon>span{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--line);
  font-size:28px;
}
.file-edit-icon strong,
.file-edit-icon small{display:block}
.file-edit-icon small{margin-top:4px;color:var(--muted)}
.file-share-box{
  padding:12px;
  border:1px solid #d8e5f5;
  border-radius:10px;
  background:#f6faff;
}
.file-share-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:7px;
}
.file-edit-actions{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}
.file-token-form{margin-top:9px}
.file-library-head{align-items:flex-end}
.file-library-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:13px;
}
.file-card{
  display:flex;
  gap:11px;
  min-width:0;
  padding:13px;
  border:1px solid #e0e7ef;
  border-radius:13px;
  background:#fff;
}
.file-card.is-disabled{opacity:.55}
.file-card-icon{
  flex:0 0 54px;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#f3f7fc;
  font-size:28px;
}
.file-card-content{min-width:0;flex:1}
.file-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:7px;
}
.file-card-head strong{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:13px;
}
.file-visibility{
  flex:0 0 auto;
  padding:3px 7px;
  border-radius:999px;
  font-size:9px;
  font-weight:800;
}
.file-visibility.private{background:#f2f4f7;color:#475467}
.file-visibility.unlisted{background:#fff4e5;color:#b54708}
.file-visibility.public{background:#ecfdf3;color:#067647}
.file-card-content>small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.file-card-content>p{
  min-height:34px;
  margin:7px 0;
  color:#667085;
  font-size:11px;
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.file-card-meta{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
}
.file-card-meta span{
  padding:3px 6px;
  border:1px solid var(--line);
  border-radius:999px;
  color:#667085;
  font-size:9px;
}
.file-card-actions{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  margin-top:9px;
}
.file-card-actions form{display:inline}
@media(max-width:1000px){
  .file-library-top{grid-template-columns:1fr}
}
@media(max-width:720px){
  .file-library-head{align-items:stretch;flex-direction:column}
  .file-share-row{grid-template-columns:1fr}
  .file-edit-actions .btn{flex:1 1 100%}
}


/* =========================================================
   V3.5.1 FILE UPLOAD LIMIT BY ROLE
   ========================================================= */
.file-role-limit-grid{
  display:grid;
  grid-template-columns:1fr 1fr .8fr;
  gap:12px;
  margin-top:8px;
}
.file-role-limit-card,
.file-role-server-card{
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#f8fafc;
}
.file-role-limit-card>span,
.file-role-server-card>span{
  display:block;
  margin-bottom:8px;
  color:#667085;
  font-size:9px;
  font-weight:900;
  letter-spacing:.9px;
}
.file-role-limit-card label{
  margin-bottom:6px;
}
.file-role-limit-card small,
.file-role-server-card small{
  display:block;
  margin-top:7px;
  color:#667085;
  line-height:1.5;
}
.file-role-server-card strong{
  display:block;
  font-size:25px;
  color:#1677ff;
}
.file-role-limit-note{
  margin-top:12px;
  background:#f6faff;
  border-color:#cfe1fb;
  color:#315b85;
}
.file-upload-limit-summary{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:7px;
}
.file-upload-limit-summary span{
  padding:5px 8px;
  border:1px solid #d8e4f2;
  background:#f7faff;
  border-radius:999px;
  color:#52657b;
  font-size:10px;
}
.file-upload-limit-summary span:last-child{
  border-color:#b7e4c7;
  background:#ecfdf3;
  color:#067647;
}
@media(max-width:850px){
  .file-role-limit-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   V3.5.5 CATEGORY SORT ORDER
   ========================================================= */
.category-order-box{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.category-order-head strong{
  display:block;
  font-size:13px;
}
.category-order-head small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  line-height:1.45;
}
.category-order-list{
  display:grid;
  gap:6px;
  margin-top:10px;
}
.category-order-row{
  display:grid;
  grid-template-columns:28px minmax(0,1fr) 78px;
  align-items:center;
  gap:7px;
  margin:0;
  padding:7px 8px;
  border:1px solid #e3eaf2;
  border-radius:9px;
  background:#f9fbfd;
}
.category-order-position{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:7px;
  background:#eaf3ff;
  color:#1768c7;
  font-size:10px;
  font-weight:900;
}
.category-order-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  font-weight:700;
}
.category-order-row input{
  width:100%;
  min-width:0;
  padding:6px 7px;
  text-align:center;
  font-weight:800;
}
.category-order-save{
  width:100%;
  margin-top:9px;
}


/* V3.5.7 - Messenger chăm sóc khách hàng */
.shop-contact-setting{
  padding:12px;
  border:1px solid #d7e5f5;
  border-radius:12px;
  background:#f8fbff;
}
.shop-contact-setting-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
}
.shop-contact-setting small{
  display:block;
  margin-top:7px;
  color:#667085;
  line-height:1.55;
}
@media(max-width:720px){
  .shop-contact-setting-row{grid-template-columns:1fr}
}


/* =========================================================
   V3.5.9 NỘI DUNG CHUYỂN KHOẢN TÙY CHỈNH
   ========================================================= */
.transfer-content-preview{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:8px;
  padding:9px 11px;
  border:1px solid #d8e5f5;
  border-radius:9px;
  background:#f7faff;
  color:#52657b;
  font-size:11px;
}
.transfer-content-preview strong{
  color:#0b4f9c;
  overflow-wrap:anywhere;
}


/* =========================================================
   V3.6.1 THEO DÕI VẬN CHUYỂN ĐA HÃNG
   ========================================================= */
.shipping-tracking-settings{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px 15px;
}
.shipping-tracking-settings>div>label{
  display:block;
  margin-bottom:6px;
  font-weight:800;
}
.shipping-tracking-settings small{
  display:block;
  margin-top:6px;
  color:#667085;
  line-height:1.5;
}
.shipping-tracking-info{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:13px;
  padding:11px;
  border:1px solid #d8e5f5;
  border-radius:11px;
  background:#f7faff;
  color:#52657b;
  font-size:10.5px;
}
.shipping-tracking-info strong{color:#1d4f86}
.shipping-tracking-info span{
  padding-left:8px;
  border-left:1px solid #cddcf0;
}
.admin-carrier-tracking{
  margin-top:12px;
}
.admin-carrier-status{
  padding:6px 9px;
  border-radius:999px;
  background:#ecfdf3;
  color:#067647;
  font-size:11px;
  font-weight:900;
}
.shipping-live-status{
  color:#067647;
  font-weight:800;
}
@media(max-width:800px){
  .shipping-tracking-settings{grid-template-columns:1fr}
}


/* =========================================================
   V3.6.3 TRACKING API HEALTH
   ========================================================= */
.tracking-api-health{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-bottom:13px;
}
.tracking-api-health>div{
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#f8fafc;
}
.tracking-api-health span,
.tracking-api-health strong{
  display:block;
}
.tracking-api-health span{
  color:#667085;
  font-size:9px;
  font-weight:850;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.tracking-api-health strong{
  margin-top:4px;
  font-size:12px;
}
.tracking-api-health .ok{
  border-color:#b7e4c7;
  background:#ecfdf3;
  color:#067647;
}
.tracking-api-health .warn{
  border-color:#f0d7a2;
  background:#fff8e8;
  color:#8a5a00;
}
.tracking-api-health .muted{
  color:#667085;
}
@media(max-width:700px){
  .tracking-api-health{grid-template-columns:1fr}
}


/* =========================================================
   V3.6.6 SHIP24 SETTINGS
   ========================================================= */
.tracking-setting-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:8px;
}
.legacy-tracking-note{
  padding:10px 12px;
  border:1px dashed #d7dee8;
  border-radius:10px;
  background:#fafbfc;
  color:#667085;
  font-size:10.5px;
  line-height:1.5;
}