/* Tong Kho X — conservative rebuild from original sources. */
:root{--primary:#A94D36;--primary-dark:#873C2B;--primary-soft:#F8EEE9;--bg:#F6F7F9;--card:#fff;--border:#E6E9EF;--text:#202A39;--text-soft:#657084;--text-mute:#8792A4;--shadow-sm:0 2px 9px rgba(30,42,60,.035);--shadow-md:0 8px 24px rgba(30,42,60,.065);--radius:14px;--radius-sm:10px}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;letter-spacing:-.008em}
.sidebar{box-shadow:none}.brand{padding-top:22px;padding-bottom:20px;gap:0}.brand-mark{display:none!important}.brand-name{font-size:18px!important;font-weight:800!important;letter-spacing:-.45px!important}.brand-sub{font-size:11px!important}
.nav-item.active{background:#F8EEE9!important;color:#924330!important;box-shadow:none!important;border-left:3px solid #A94D36;border-radius:9px}.nav-item:hover{background:#F5F6F8}
.nav-label{letter-spacing:.10em}.sidebar-foot{font-size:11px;line-height:1.8;color:#748094}.sidebar-foot::first-line{color:#647084}
.topbar{background:rgba(255,255,255,.97);box-shadow:none}.topbar-title{letter-spacing:-.025em}
.card,.panel{box-shadow:0 2px 12px rgba(26,39,59,.035);border-color:#E8EBF0}.card{transition:box-shadow .2s}.card:hover{box-shadow:0 7px 24px rgba(26,39,59,.065)}
button,a,input,select{font-family:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(169,77,54,.35);outline-offset:2px}
.tx-credit{padding:12px;text-align:center;color:#8A93A3;font-size:11px}
/* Shop: retain original markup, layout, product-card information and purchasing actions. */
body:has(.sf-copy) .go-order{background:#A94D36;color:white;box-shadow:none}
body:has(.sf-copy) .cart-pay{background:#A94D36;color:#fff;box-shadow:none}
/* Keep the original shop purchase buttons and all pricing rows; avoid the V2 red override. */
body:has(.sf-copy) .nav-item.active{background:#F8EEE9!important;color:#924330!important}
/* Dashboard: a true information hierarchy, not stacked equal-size panels. */
.tx-kpis-primary{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:10px}
.tx-kpis-primary .card{min-height:130px;padding:20px 20px 18px;border-top:3px solid #D8A88C}
.tx-kpis-primary .card:first-child{border-top-color:#A94D36}
.tx-kpis-primary .card .v{font-size:clamp(21px,2vw,30px);letter-spacing:-.045em}
.tx-kpis-secondary{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:20px}
.tx-kpis-secondary .card{padding:13px 16px;background:#FAFBFC;box-shadow:none}
.tx-kpis-secondary .card .v{font-size:21px}
.tx-dashboard-main{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(280px,.8fr);gap:16px;align-items:stretch;margin-bottom:16px}
.tx-dashboard-main .panel{height:100%;margin:0;padding:20px}
.tx-dashboard-main .chart-wrap{height:320px}
.tx-stock-slot .buckets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tx-stock-slot .bk{padding:20px 10px;background:#F7F8FA;border:1px solid #EDF0F3}
.tx-stock-slot .bk-n{font-size:28px;color:#A94D36}
.tx-stock-slot .panel-sub{margin-bottom:24px}
.content .period{margin-bottom:16px;color:#758095}
@media(max-width:1180px){.tx-dashboard-main{grid-template-columns:1fr}.tx-stock-slot .buckets{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){.tx-kpis-primary,.tx-kpis-secondary{grid-template-columns:repeat(2,minmax(0,1fr))}.tx-dashboard-main .chart-wrap{height:270px}.tx-stock-slot .buckets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.tx-kpis-primary .card{padding:14px;min-height:110px}.tx-kpis-primary .card .v{font-size:21px}.tx-kpis-secondary .card{padding:12px}.tx-kpis-secondary .card .v{font-size:18px}.tx-dashboard-main .panel{padding:14px}.tx-dashboard-main .chart-wrap{height:240px}}


/* 2026-10-22: targeted visual corrections approved by owner.
   Preserve original shop markup, ordering, API, pricing and seller logic. */
:root{
  --primary:#C52F32;
  --primary-dark:#A82329;
  --primary-soft:#FCECED;
  --danger:#C52F32;
}
/* Preserve red emphasis for discounts, selling prices and seller margins. */
.pcard .off-badge{background:#C52F32!important;color:#fff!important}
.pcard .price-sale{color:#C52F32!important}
.pcard .nbh-box .nb-row b,
.pcard .nbh-box .nb-ln b{color:#C52F32!important}
.pcard .nbh-box .nb-box-qty b{color:#8A5A00!important}
.pcard .pname{color:#202A39}
.pcard .btn-buy{background:#fff;color:#202A39;border-color:#DCE2EA}
.pcard .btn-buy:hover{color:#C52F32;border-color:#C52F32;background:#FFF5F5}
.pcard .btn-cart{background:#F6A623;color:#fff}
.pcard .btn-cart:hover{background:#E9930D}
/* Align quantity controls and purchase buttons at the same bottom baseline.
   Flex parent and original product-card content are preserved. */
.pcard{height:100%}
.pcard .pbody{display:flex;flex-direction:column;flex:1;min-height:0}
.pcard .pactions{margin-top:auto;padding-top:12px;flex-shrink:0}
.pcard .pact-row{align-items:stretch;min-height:44px}
.pcard .pact-row .btn-buy,.pcard .pact-row .btn-cart{min-height:44px}
.pcard .qstep{flex-shrink:0}
/* Revenue is navy, with more breathing room between digits. */
.tx-kpis-primary .card:first-child .v,
.tx-kpis-primary .card:first-child .v.primary{
  color:#243B53!important;
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-weight:750;
  font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:.015em!important;
  line-height:1.32;
  overflow-wrap:anywhere;
}
.tx-kpis-primary .card:first-child{border-top-color:#243B53}
/* Keep semantic growth coloring. */
.cmp.up{color:#16A34A!important}
.cmp.down{color:#C52F32!important}
/* Restore meaningful red accents without painting the entire interface red. */
.nav-item.active{background:#FCECED!important;color:#A82329!important;border-left-color:#C52F32!important}
.off-badge{background:#C52F32!important}
@media(max-width:540px){
 .tx-kpis-primary .card:first-child .v{font-size:clamp(19px,5vw,25px)}
 .pcard .pact-row .btn-buy,.pcard .pact-row .btn-cart{min-height:42px}
}

/* 2026-10-22: KPI number rhythm, V2 outline menu, revenue workspace. */
.tx-nav-svg{display:block;flex:none;width:19px;height:19px;stroke:currentColor}
.nav-item .ic{width:23px;min-width:23px;display:inline-flex;align-items:center;justify-content:center;line-height:1}
/* Keep numeric tracking uniform across all dashboard KPIs, not only revenue. */
.tx-kpis-primary .card .v,.tx-kpis-secondary .card .v{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif!important;font-variant-numeric:tabular-nums lining-nums!important;font-feature-settings:"tnum" 1,"lnum" 1;letter-spacing:0!important;word-spacing:0!important;line-height:1.28!important;font-weight:750!important;white-space:normal}
.tx-kpis-primary .card .v{font-size:clamp(22px,1.75vw,30px)!important}
.tx-kpis-secondary .card .v{font-size:clamp(19px,1.35vw,23px)!important}
.tx-kpis-primary .card .k,.tx-kpis-secondary .card .k{line-height:1.45;min-height:18px}
/* Revenue: give wallet, statistics and order statuses a consistent visual language. */
body:has(#dash-body) .content{max-width:none}
#dash-body{color:#202A39}
#dash-body .bal-row{gap:14px;margin-bottom:18px}
#dash-body .bal-card{padding:22px 24px;border-radius:16px;box-shadow:0 5px 20px rgba(26,39,59,.065);min-height:148px;justify-content:flex-start}
#dash-body .bal-vi{background:linear-gradient(115deg,#B62E31,#D64A31 65%,#E37A3B)}
#dash-body .bal-hh{background:linear-gradient(115deg,#177D4A,#179A61)}
#dash-body .bal-label{font-size:13px;letter-spacing:.01em}
#dash-body .bal-val{font-size:clamp(22px,2vw,30px);letter-spacing:0;font-variant-numeric:tabular-nums;line-height:1.28;margin-top:8px}
#dash-body .bal-btn{align-self:flex-start;min-width:132px;padding:9px 18px;margin-top:13px;box-shadow:none}
#dash-body .bal-sub{font-size:12px;margin-top:12px}
#dash-body .stats{gap:14px;margin:0 0 23px}
#dash-body .stat{padding:21px 23px;min-height:116px;border-radius:15px;box-shadow:0 3px 16px rgba(26,39,59,.035)}
#dash-body .stat .k{font-size:12px;letter-spacing:.02em}
#dash-body .stat .v{font-size:clamp(21px,1.9vw,28px);line-height:1.3;letter-spacing:0;margin-top:10px;font-variant-numeric:tabular-nums}
#dash-body .stat.rev .v{color:#243B53}
#dash-body .stat.profit .v{color:#C52F32}
#dash-body .section-title{font-size:15px;font-weight:750;margin:24px 0 12px;color:#253044}
#dash-body .stgrid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px;margin-bottom:24px}
#dash-body .stgrid-item{padding:16px 12px;border-radius:14px;box-shadow:0 3px 12px rgba(26,39,59,.035)}
#dash-body .stg-n{font-size:24px;margin-top:8px;font-variant-numeric:tabular-nums}
#dash-body .stg-l{font-size:12px;margin-top:5px}
/* Order cards: readable even when product names are very long. */
#dash-body .orders{border:0;background:transparent;box-shadow:none;display:flex;flex-direction:column;gap:12px;overflow:visible}
#dash-body .order{background:#fff;border:1px solid #E5E9F0;border-radius:14px;padding:17px 20px;box-shadow:0 3px 14px rgba(26,39,59,.035);transition:border-color .15s,box-shadow .15s}
#dash-body .order:last-child{border-bottom:1px solid #E5E9F0}
#dash-body .order:hover{border-color:#D2D9E4;box-shadow:0 7px 20px rgba(26,39,59,.065)}
#dash-body .order-top{margin-bottom:9px}
#dash-body .order-code-line{font-size:14px;margin-bottom:7px}
#dash-body .order-sp{font-size:13px;line-height:1.65;color:#5E6B7E;overflow-wrap:anywhere;margin-bottom:12px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
#dash-body .order-bot{padding-top:11px;border-top:1px solid #EEF0F4}
#dash-body .order-money{font-size:13px;line-height:1.55}
#dash-body .order-date{font-size:12px}
#dash-body .dl-btn{width:34px;height:34px}
#dash-body .wd-list{border-radius:14px;margin-bottom:20px}
@media(max-width:700px){#dash-body .bal-row{flex-direction:column}#dash-body .bal-card{min-height:128px;padding:18px}#dash-body .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}#dash-body .stat{padding:15px;min-height:98px}#dash-body .stat .v{font-size:20px}#dash-body .stat:last-child{grid-column:span 2}#dash-body .order{padding:14px}#dash-body .stgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.tx-kpis-primary .card .v{font-size:clamp(19px,4.5vw,25px)!important}}