:root{--bg:#120d0a;--surface:#1a120e;--text:#fff8ef;--muted:#b7a492;--muted2:#8f7c6c;--line:rgba(255,239,221,.1);--primary:#d08a46;--light:#f2c27b;--green:#86d596}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 15% 0%,rgba(208,138,70,.16),transparent 28rem),var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif}.track-container{width:min(850px,calc(100% - 28px));margin:auto}.track-top{position:sticky;top:0;z-index:10;border-bottom:1px solid var(--line);background:rgba(18,13,10,.88);backdrop-filter:blur(16px)}.nav{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:14px}.track-brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}.track-logo{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--light),var(--primary));color:#241309;font-weight:900}.track-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:12px;color:#d9c4af;text-decoration:none;background:#ffffff05}.track-main{padding:68px 0}.track-hero{text-align:center;margin-bottom:26px}.track-label{color:#c69d72;font-size:10px;letter-spacing:.15em;font-weight:900}.track-hero h1{margin:10px 0 10px;font-size:clamp(38px,7vw,60px);letter-spacing:-.055em}.track-hero p{margin:0;color:var(--muted);line-height:1.65}.track-card,.track-result,.track-help{padding:24px;border:1px solid var(--line);border-radius:20px;background:#ffffff04;box-shadow:0 20px 65px rgba(0,0,0,.16)}.track-card form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end}.track-card label{display:flex;flex-direction:column;gap:7px;color:#d7c0aa;font-size:10px;font-weight:800}.track-card input{min-height:44px;border:1px solid var(--line);border-radius:12px;background:#ffffff05;color:var(--text);padding:0 12px;outline:0}.track-card input:focus{border-color:#f2c27b66;box-shadow:0 0 0 4px #d08a4611}.track-card button{min-height:44px;padding:0 18px;border:0;border-radius:12px;background:linear-gradient(135deg,var(--light),var(--primary));color:#241309;font-weight:900;cursor:pointer}.track-card button:disabled{opacity:.6}.track-msg{grid-column:1/-1;min-height:18px;color:var(--muted2);font-size:11px}.track-msg.error{padding:10px;border-radius:10px;background:#ea8d7310;color:#efad99}.track-result{margin-top:16px}.track-result.hidden{display:none}.track-order-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.track-order-head h2{margin:4px 0 4px;font-size:24px}.track-order-head small,.track-order-meta span{color:var(--muted2)}.track-status-badge{padding:8px 10px;border-radius:999px;border:1px solid #f2c27b33;background:#f2c27b0d;color:#f2c27b;font-size:10px;font-weight:900}.track-order-meta{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:15px}.track-order-meta div{padding:12px;border:1px solid var(--line);border-radius:12px;background:#00000012}.track-order-meta span,.track-order-meta b{display:block}.track-order-meta span{font-size:9px}.track-order-meta b{margin-top:4px;font-size:12px}.track-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:22px}.track-step{position:relative;padding:12px;border:1px solid var(--line);border-radius:12px;color:#79695b;background:#0000000d;font-size:10px}.track-step b{display:block;margin-top:5px;color:inherit}.track-step.done{border-color:#86d59633;background:#86d5960a;color:#b7e7c0}.track-step.current{border-color:#f2c27b55;background:#f2c27b0b;color:#f2c27b}.track-cancelled{margin-top:18px;padding:12px;border:1px solid #ea8d7333;border-radius:12px;color:#efad99;background:#ea8d730a}.track-help{margin-top:16px;text-align:center}.track-help h2{margin:0 0 7px}.track-help p{margin:0 0 14px;color:var(--muted)}.track-help div{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.track-footer{padding:25px 0;border-top:1px solid var(--line);color:var(--muted2);font-size:10px}
@media(max-width:720px){.track-card form{grid-template-columns:1fr}.track-order-meta{grid-template-columns:1fr}.track-timeline{grid-template-columns:1fr 1fr}.track-order-head{flex-direction:column}}

.track-payment{margin-top:14px;padding:13px;border:1px solid var(--line);border-radius:12px;background:#00000012;display:flex;align-items:center;justify-content:space-between;gap:12px}
.track-payment span,.track-payment b{display:block}.track-payment span{color:var(--muted2);font-size:9px}.track-payment b{margin-top:3px;font-size:12px}
.track-payment.submitted{border-color:#f2c27b44;background:#f2c27b08}.track-payment.paid{border-color:#86d59644;background:#86d59608;color:#b7e7c0}.track-payment.rejected{border-color:#ea8d7344;background:#ea8d7308}
.track-pay-btn{display:inline-flex;padding:9px 12px;border-radius:10px;background:linear-gradient(135deg,var(--light),var(--primary));color:#241309;text-decoration:none;font-size:10px;font-weight:900}
@media(max-width:600px){.track-payment{align-items:stretch;flex-direction:column}}

.track-logo-img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(208,138,70,.15))}


/* ===== V5: automatic order recognition ===== */
.auto-orders-main{padding-top:54px}
.auto-track-hero{margin-bottom:20px}
.auto-track-hero h1{font-size:clamp(38px,6vw,56px)}
.auto-track-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:12px;padding:13px 15px;border:1px solid var(--line);
  border-radius:15px;background:#ffffff04
}
.auto-track-status{display:flex;align-items:center;gap:11px;min-width:0}
.auto-track-status b,.auto-track-status small{display:block}
.auto-track-status b{font-size:12px}
.auto-track-status small{margin-top:2px;color:var(--muted2);font-size:9px}
.auto-status-dot{
  width:9px;height:9px;border-radius:50%;background:#f2c27b;
  box-shadow:0 0 0 6px #f2c27b0d;flex:0 0 auto
}
.auto-status-dot.ready{
  background:var(--green);box-shadow:0 0 0 6px #86d5960d
}
.refresh-orders-btn{cursor:pointer}
.refresh-orders-btn:disabled{opacity:.55;cursor:wait}

.track-orders-list{display:grid;gap:11px}
.track-loading{
  min-height:180px;display:flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid var(--line);border-radius:18px;background:#ffffff03;color:var(--muted)
}
.track-loading span{
  width:18px;height:18px;border:2px solid #f2c27b33;border-top-color:var(--light);
  border-radius:50%;animation:trackSpin .8s linear infinite
}
@keyframes trackSpin{to{transform:rotate(360deg)}}

.auto-order-card{
  padding:18px;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(145deg,#ffffff05,#ffffff025);
  box-shadow:0 14px 38px rgba(0,0,0,.08)
}
.auto-order-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px
}
.auto-order-code{
  display:block;color:#a88b70;font-size:9px;font-weight:900;
  letter-spacing:.08em
}
.auto-order-title h2{margin:4px 0 3px;font-size:19px}
.auto-order-title small{color:var(--muted2);font-size:9px}
.auto-order-badges{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.auto-badge{
  display:inline-flex;align-items:center;min-height:27px;padding:0 9px;border-radius:999px;
  border:1px solid var(--line);font-size:8px;font-weight:900;white-space:nowrap
}
.status-new{color:#f2c27b;background:#f2c27b0a;border-color:#f2c27b26}
.status-contacted{color:#91bdf0;background:#6da7e90a;border-color:#6da7e926}
.status-processing{color:#efb463;background:#d08a460a;border-color:#d08a4626}
.status-completed{color:#a5dfb1;background:#86d5960a;border-color:#86d59626}
.status-cancelled{color:#efa793;background:#ea8d730a;border-color:#ea8d7326}
.payment-unpaid{color:#c0aa97}
.payment-pending{color:#f2c27b;background:#f2c27b0a;border-color:#f2c27b26}
.payment-paid{color:#a5dfb1;background:#86d5960a;border-color:#86d59626}
.payment-rejected,.payment-cancelled{color:#efa793;background:#ea8d730a;border-color:#ea8d7326}

.auto-order-meta{
  display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:14px
}
.auto-order-meta>div{
  padding:10px;border:1px solid var(--line);border-radius:11px;background:#00000010
}
.auto-order-meta span,.auto-order-meta b{display:block}
.auto-order-meta span{color:var(--muted2);font-size:8px}
.auto-order-meta b{margin-top:3px;font-size:10px}

.auto-order-footer{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
  color:var(--muted2);font-size:9px
}
.auto-order-actions{display:flex;gap:6px;flex-wrap:wrap}
.auto-order-action{
  min-height:34px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 10px;border:1px solid var(--line);border-radius:9px;
  color:#d9c4af;text-decoration:none;background:#ffffff04;font-size:9px;font-weight:800
}
.auto-order-action.primary{
  border-color:#d08a4633;background:linear-gradient(135deg,var(--light),var(--primary));
  color:#241309
}

.track-empty{
  padding:42px 20px;text-align:center;border:1px dashed var(--line);
  border-radius:18px;background:#ffffff025
}
.track-empty.hidden{display:none}
.track-empty-icon{
  width:48px;height:48px;display:grid;place-items:center;margin:0 auto 13px;
  border-radius:14px;background:#d08a4610;color:#f2c27b;font-size:21px
}
.track-empty h2{margin:0 0 7px}
.track-empty p{max-width:520px;margin:0 auto 15px;color:var(--muted);line-height:1.6}
.track-empty-primary{
  display:inline-flex;align-items:center;min-height:42px;padding:0 14px;border-radius:11px;
  background:linear-gradient(135deg,var(--light),var(--primary));color:#241309;
  text-decoration:none;font-weight:900;font-size:10px
}

.track-privacy-note{
  display:flex;gap:12px;margin-top:14px;padding:14px;border:1px solid var(--line);
  border-radius:15px;background:#ffffff025
}
.privacy-icon{
  width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;
  border-radius:11px;background:#ffffff05;color:#c49b76
}
.track-privacy-note b{display:block;font-size:11px}
.track-privacy-note p{margin:3px 0 0;color:var(--muted2);font-size:9px;line-height:1.55}

@media(max-width:720px){
  .auto-orders-main{padding-top:38px}
  .auto-track-toolbar{align-items:stretch;flex-direction:column}
  .refresh-orders-btn{width:100%}
  .auto-order-head{flex-direction:column}
  .auto-order-badges{justify-content:flex-start}
  .auto-order-meta{grid-template-columns:1fr 1fr}
  .auto-order-footer{align-items:stretch;flex-direction:column}
  .auto-order-actions{display:grid;grid-template-columns:1fr 1fr}
}
@media(max-width:430px){
  .auto-order-meta{grid-template-columns:1fr}
  .auto-order-actions{grid-template-columns:1fr}
}


/* ===== V6: customer center tabs / purchased / cart ===== */
.customer-tabs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  margin:12px 0 14px;padding:5px;border:1px solid var(--line);
  border-radius:15px;background:#ffffff025
}
.customer-tab{
  min-height:47px;display:flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;border-radius:11px;background:transparent;
  color:var(--muted);cursor:pointer;font:inherit;font-size:10px;font-weight:850
}
.customer-tab b{
  min-width:21px;height:21px;padding:0 5px;display:grid;place-items:center;
  border-radius:999px;background:#ffffff07;color:#d8c2ae;font-size:8px
}
.customer-tab:hover{color:var(--text);background:#ffffff035}
.customer-tab.active{
  border-color:#d08a4630;background:#d08a4610;color:#f2c27b
}
.customer-tab.active b{background:#f2c27b;color:#241309}

.customer-panel{display:none}
.customer-panel.active{display:block}
.panel-heading{margin:3px 0 13px}
.panel-heading h2,.cart-panel-head h2{margin:5px 0 3px;font-size:23px}
.panel-heading p,.cart-panel-head p{margin:0;color:var(--muted2);font-size:9px}

.purchased-card{
  border-color:#86d59622;
  background:linear-gradient(145deg,#86d59608,#ffffff025)
}

.cart-panel-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  margin:2px 0 12px
}
.danger-soft{
  color:#efa793!important;border-color:#ea8d7326!important;background:#ea8d7308!important;
  cursor:pointer
}
.danger-soft:disabled{opacity:.38;cursor:not-allowed}

.cart-items-list{display:grid;gap:9px}
.cart-item-card{
  display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:14px;
  align-items:center;padding:12px;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(145deg,#ffffff05,#ffffff025)
}
.cart-item-image{
  width:110px;height:78px;border-radius:11px;overflow:hidden;
  border:1px solid var(--line);background:linear-gradient(135deg,#392218,#8d522f);
  display:grid;place-items:center;color:#f2c27b;font-weight:950
}
.cart-item-image img{width:100%;height:100%;object-fit:cover}
.cart-item-info span,.cart-item-info b,.cart-item-info small{display:block}
.cart-item-info span{color:#9b816b;font-size:8px;text-transform:uppercase;letter-spacing:.08em}
.cart-item-info h3{margin:3px 0 4px;font-size:15px}
.cart-item-info b{color:#f2c27b;font-size:13px}
.cart-item-info small{margin-top:3px;color:var(--muted2);font-size:8px}
.cart-item-actions{display:flex;align-items:center;gap:6px}
.cart-remove-btn{
  cursor:pointer;color:#efa793!important;border-color:#ea8d7326!important;
  background:#ea8d7307!important
}

.cart-summary{
  display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:center;
  margin-top:11px;padding:13px;border:1px solid #d08a4625;border-radius:15px;
  background:#d08a4608
}
.cart-summary.hidden{display:none}
.cart-summary>div{padding:0 8px}
.cart-summary span,.cart-summary b{display:block}
.cart-summary span{color:var(--muted2);font-size:8px}
.cart-summary b{margin-top:2px;font-size:15px}
.cart-summary .track-empty-primary{white-space:nowrap}

@media(max-width:720px){
  .customer-tabs{
    grid-template-columns:1fr 1fr 1fr;
    overflow:hidden
  }
  .customer-tab{
    min-width:0;padding:0 5px;font-size:9px;gap:5px
  }
  .customer-tab span{white-space:nowrap}
  .cart-panel-head{align-items:stretch;flex-direction:column}
  .cart-item-card{
    grid-template-columns:86px minmax(0,1fr);
    gap:10px
  }
  .cart-item-image{width:86px;height:68px}
  .cart-item-actions{
    grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr
  }
  .cart-item-actions .auto-order-action{width:100%}
  .cart-summary{grid-template-columns:1fr 1fr}
  .cart-summary .track-empty-primary{grid-column:1/-1;justify-content:center}
}
@media(max-width:430px){
  .customer-tabs{
    display:flex;overflow-x:auto;scrollbar-width:none
  }
  .customer-tabs::-webkit-scrollbar{display:none}
  .customer-tab{flex:0 0 auto;min-width:116px;padding:0 10px}
  .cart-item-card{grid-template-columns:72px minmax(0,1fr)}
  .cart-item-image{width:72px;height:62px}
}


/* ===== V7: bỏ tiêu đề lớn + mô tả ở Trung tâm khách hàng ===== */
.compact-customer-label{
  margin:0 0 10px!important;
  padding:0!important;
  min-height:0!important;
}
.compact-customer-label .track-label{
  display:block;
}
@media(max-width:720px){
  .compact-customer-label{
    margin-bottom:8px!important;
  }
}


/* V8 — đi thẳng vào 3 tab */
.auto-orders-main{padding-top:22px!important}
.customer-tabs{margin-top:0!important}
@media(max-width:720px){
  .auto-orders-main{padding-top:14px!important}
}


/* ===== V10: persistent main navigation on Tracking ===== */
.track-main-nav-wrap{
  border-top:1px solid rgba(255,239,221,.055);
  border-bottom:1px solid rgba(255,239,221,.075);
  background:#100c09;
}
.track-main-nav{
  width:min(920px,calc(100% - 44px));
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 0 11px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.track-main-nav::-webkit-scrollbar{display:none}
.track-main-nav a{
  flex:0 0 auto;
  min-height:39px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 13px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#17110d;
  color:#cbb8a7;
  text-decoration:none;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
  transition:.16s ease;
}
.track-main-nav a:hover{
  border-color:#d08a4642;
  background:#d08a4610;
  color:#f2c27b;
}
.track-main-nav a.active{
  border-color:#d08a4650;
  background:#d08a4616;
  color:#f2c27b;
}
@media(max-width:720px){
  .track-main-nav{
    width:100%;
    padding:9px 12px 11px;
    gap:7px;
  }
  .track-main-nav a{
    min-height:40px;
    padding:0 12px;
    font-size:10px;
  }
  .auto-orders-main{
    padding-top:16px!important;
  }
}