:root{
    --ink:#20372c;
    --text:#283a30;
    --muted:#69776e;
    --green:#285f45;
    --green-dark:#204b37;
    --sage:#eaf0e9;
    --line:#dfe5dd;
    --bg:#fbfcf9;
    --white:#fff;
    --radius:18px;
    --shadow:0 12px 35px #1830230a;
    --danger:#b56a5a;
    --warn:#c0683f
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:26px}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Segoe UI",Arial,Helvetica,sans-serif;font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.52}
input,select,textarea{color:var(--ink);min-width:0}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #659e78;outline-offset:3px}
svg{flex-shrink:0;vertical-align:middle}
h1,h2,h3,p{margin:0}
h1,h2,h3{color:var(--ink);line-height:1.2;letter-spacing:-.035em}
h1{font-size:42px}
h2{font-size:30px}
h3{font-size:19px}
fieldset{border:0;padding:0;margin:0;min-width:0}
label{display:block}
table{border-collapse:collapse}

.container{width:min(1220px,calc(100% - 64px));margin-inline:auto}
.narrow{max-width:850px}
.muted{color:var(--muted)}
.small{font-size:13px}
.full-width{width:100%}
.d-none{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-100px;z-index:1000;padding:12px 20px;background:var(--ink);color:white}
.skip-link:focus{top:10px}

/* ---- Reuse Button system từ cart.html & login.html ---- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:11px 20px;border-radius:11px;font-size:13px;font-weight:600;border:1px solid transparent;width:100%;background:transparent;transition:background .2s,transform .15s}
.button.auto-width,.hero-actions .button{width:auto}
.button.primary,.primary{background:var(--ink);color:#fff}
.button.primary:hover:not(:disabled),.primary:hover:not(:disabled){background:var(--green-dark);transform:translateY(-1px)}
.button.primary:disabled{opacity:.5;cursor:not-allowed}
.button.secondary,.secondary{background:#fff;border-color:var(--line);color:var(--ink)}
.button.secondary:hover:not(:disabled),.secondary:hover:not(:disabled){background:#eff4ed}
.text-link{font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:5px}

/* ---- Header & Top Strip (đồng bộ index.html & cart.html) ---- */
.demo-strip{background:#203e2d;color:#e6eee7;font-size:11px;letter-spacing:.055em}
.strip-inner{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.strip-inner>a{font-size:11px;white-space:nowrap}
.status-dot,.tiny-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#a9c7a9;vertical-align:middle;margin-right:8px}
.site-header{background:#fff;border-bottom:1px solid var(--line)}
.header-main{height:91px;display:flex;align-items:center;gap:21px}
.brand{display:inline-flex;align-items:center;font-size:32px;line-height:1;font-weight:800;letter-spacing:-1.8px;white-space:nowrap;color:var(--ink)}
.brand-dot{color:var(--green)}
.brand-symbol{width:37px;height:42px;border-radius:11px;background:var(--green);color:#f2f6ec;display:flex;align-items:center;justify-content:center;margin-right:9px}
.brand-symbol svg{width:24px;height:24px}
.brand-tagline{font-size:9px;line-height:1.6;letter-spacing:.11em;color:var(--muted);border-left:1px solid var(--line);padding-left:19px;white-space:nowrap}
.header-search{display:flex;align-items:center;gap:12px;height:44px;background:#f3f5f0;border:1px solid #e7ebe2;border-radius:9px;padding:0 13px;margin-left:auto;width:440px;color:#64766b}
.header-search input{background:transparent;border:0;outline:0;width:100%;font-size:12px}
.header-search button{border:0;background:transparent;padding:3px;color:var(--green)}
.nav-spacer{flex:1}
.header-icons{display:flex;align-items:center;gap:18px}
.icon-link{font-size:13px;display:flex;align-items:center;gap:9px;white-space:nowrap;position:relative;color:var(--ink)}
.icon-link:hover,.icon-link.active{color:var(--green)}
.cart-count{position:absolute;top:-7px;right:-10px;background:var(--green);color:#fff;font-size:9px;font-weight:700;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.account-link{font-size:13px;display:flex;align-items:center;gap:9px;white-space:nowrap;margin-left:10px}
.main-nav{height:47px;display:flex;gap:30px;align-items:center;font-size:12px;font-weight:600}
.main-nav a{white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.main-nav a:hover{color:var(--green)}
.main-nav .muted-link{color:var(--muted);font-size:11px;font-weight:400}

/* ==========================================================================
   AUTH: LAYOUT 2 CỘT BẤT ĐỐI XỨNG (100vh) - Chuẩn CSS login.html của bạn
   ========================================================================== */
.login-split{display:grid;grid-template-columns:.92fr 1.08fr;min-height:100vh;background:var(--white)}

/* ---- Cột trái: Brand / Storytelling Panel ---- */
.brand-panel{background:var(--sage);padding:48px 56px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;border-right:1px solid var(--line)}
.brand-top{display:flex;align-items:center;gap:16px;position:relative;z-index:2}
.brand-tag{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-left:1px solid #cdd8cb;padding-left:16px;line-height:1.5}

.brand-story{position:relative;z-index:2;max-width:460px;margin-block:auto;padding-block:36px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px;margin-bottom:16px}
.eyebrow-line,.short-line{display:inline-block;width:22px;height:1px;background:var(--green)}
.brand-story h2{font-size:42px;line-height:1.15;letter-spacing:-.04em;color:var(--ink);margin-bottom:16px}
.brand-story h2 em{font-style:italic;font-weight:500;color:#557a62;display:block;margin-top:4px}
.brand-story p{font-size:14px;color:var(--muted);line-height:1.75;max-width:400px}

/* ---- Minh hoạ Card xếp lớp + Vòng tròn mờ ---- */
.layered-showcase{position:relative;min-height:190px;display:flex;align-items:flex-end;z-index:2}
.decor-orb{position:absolute;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,#d5e2cf 0%,rgba(213,226,207,0) 72%);right:-30px;bottom:-60px;pointer-events:none;z-index:0}
.decor-ring{position:absolute;width:210px;height:210px;border-radius:50%;border:1px solid #d1ddd0;right:24px;bottom:-15px;pointer-events:none;z-index:0}
.card-stack{position:relative;width:100%;max-width:380px;height:155px;z-index:2}
.stack-card{position:absolute;border-radius:16px;padding:16px 20px;border:1px solid var(--line);box-shadow:var(--shadow);display:flex;align-items:center;gap:14px}
.stack-card.card-back{background:#dfeadc;border-color:#cedbc9;width:290px;top:6px;left:36px;transform:rotate(3.5deg);opacity:.92}
.stack-card.card-front{background:var(--white);width:310px;bottom:10px;left:0;transform:rotate(-2.5deg)}
.check-badge{width:38px;height:38px;border-radius:50%;background:var(--sage);color:var(--green);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.check-badge svg{width:20px;height:20px}
.stack-meta strong{display:block;font-size:13px;color:var(--ink);line-height:1.35}
.stack-meta span{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.stack-pill{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:6px;background:var(--sage);color:var(--green)}

/* Bố cục chia đôi cột */
.checkout-layout {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 25px;
  align-items: center; /* ĐÃ SỬA: Thay 'start' bằng 'center' để chiếc thẻ nằm GIỮA theo chiều dọc */
}

.p-CardCvcIcons-svg{
  position: absolute;
  right: 12px;
}

.visa-card-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
  align-items: center;
}

@media (min-width: 768px) {
  .checkout-layout {
    grid-template-columns: 320px 1fr; /* Thẻ bên trái, Form bên phải */
  }
  .mini-info{
    margin-left: 15px;
  }
}

/* Style cho chiếc thẻ ảo trực quan */
#preview-bank {
  font-family: 'Share Tech Mono', monospace; /* Hoặc font chữ sans-serif bất kỳ bạn đang dùng */
  text-transform: uppercase;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}

.card-preview-wrapper {
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* ĐÃ THÊM: Đảm bảo vùng chứa thẻ chiếm hết chiều cao để căn giữa chuẩn */
}

.interactive-card {
  width: 100%;
  max-width: 320px;
  height: 190px;
  background: linear-gradient(135deg, #1f2937, #111827); /* Nền tối sang trọng */
  border-radius: 12px;
  padding: 20px;
  box-sizing: border-box;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  font-family: system-ui, -apple-system, sans-serif;
  transition: background 0.3s ease;
}

/* Đổi màu gradient dựa trên loại thẻ được nhập */
.interactive-card.visa-bg { background: linear-gradient(135deg, #0b3162, #00152e); }
.interactive-card.master-bg { background: linear-gradient(135deg, #331313, #1a0505); }

.card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-chip {
  width: 35px;
  height: 26px;
  background: linear-gradient(135deg, #f0ca7d, #bb8d34);
  border-radius: 4px;
}

.card-brand-logo {
  font-weight: 800;
  font-style: italic;
  font-size: 22px;
  letter-spacing: 1px;
}

.card-preview-number {
  font-family: 'Courier New', Courier, monospace;
  font-size: 19px;
  letter-spacing: 2px;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

.card-bottom-row {
  display: flex;
  justify-content: space-between;
}

.card-meta label {
  font-size: 9px;
  color: #9ca3af;
  display: block;
  margin-bottom: 2px;
  letter-spacing: 0.5px;
}

.card-meta div {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* ========================================================
   ĐÃ BỔ SUNG: CÁC THUỘC TÍNH ĐỂ SỬA LỖI LỆCH Ô CVV 
   ======================================================== */

/* Khung lưới chứa 2 ô Ngày hết hạn và CVV */
.field-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  width: 100%;
  align-items: end; /* Đóng vai trò ép các ô input luôn bằng đáy với nhau */
}

/* Đảm bảo label chữ của CVV luôn có một khoảng trống giả lập bằng chiều cao chữ bên cạnh */
#field-card-cvv .field-label {
  display: block;
  white-space: nowrap;
}

/* Nếu nhãn Ngày hết hạn bị xuống dòng, đoạn này giúp ô CVV tự cân đối khoảng cách */
#field-card-exp .field-label {
  line-height: 1.2;
  margin-bottom: 8px;
}
#field-card-cvv .field-label {
  margin-bottom: 8px;
  /* Thêm padding top nếu chữ Ngày hết hạn rớt 2 dòng để đẩy chữ CVV xuống bằng hàng */
  padding-top: 1.2em; 
}

@media (max-width: 480px) {
  /* Fix khoảng cách label trên màn hình siêu nhỏ nếu cần */
  #field-card-cvv .field-label {
    padding-top: 0;
  }
}


/* ---- Cột phải: Form Panel & Hệ thống Form chuẩn ---- */
.form-panel{background:var(--white);padding:56px 64px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.form-shell{width:100%;max-width:420px}
.top-nav-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;font-size:12px;color:var(--muted)}
.top-nav-row a{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:500}
.top-nav-row a:hover{color:var(--green)}

.form-eyebrow{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.form-shell h1{font-size:36px;letter-spacing:-.04em;color:var(--ink);margin-bottom:8px}
.form-subtitle{font-size:14px;color:var(--muted);margin-bottom:28px}

.form-field{margin-bottom:18px}
.field-label{display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:7px}
.input-wrap{position:relative;display:flex;align-items:center}
.input-control{width:100%;min-height:46px;padding:11px 14px;border:1px solid var(--line);border-radius:11px;background:var(--white);color:var(--ink);font-size:14px;transition:border-color .2s,background-color .2s}
.input-control::placeholder{color:#9aa49d}
.input-control:hover{border-color:#c5d0c3}
.input-control:focus{border-color:var(--green);outline:none;box-shadow:0 0 0 3px rgba(40,95,69,.12)}
textarea.input-control{min-height:86px;resize:vertical}

.password-wrap .input-control{padding-right:64px}
.toggle-pw{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:600;padding:6px 8px;border-radius:6px}
.toggle-pw:hover{color:var(--ink);background:var(--sage)}

/* ---- Trạng thái lỗi (Error State) ---- */
.form-field.is-error .input-control{border-color:#E57373;background:rgba(229,115,115,0.06)}
.form-field.is-error .input-control:focus{box-shadow:0 0 0 3px rgba(229,115,115,0.16)}
.field-error{display:none;font-size:12px;color:#d32f2f;margin-top:6px;align-items:center;gap:5px;animation:fadeInError .2s ease}
.field-error svg{width:14px;height:14px;flex-shrink:0}
.form-field.is-error .field-error{display:flex}

@keyframes fadeInError{
  from{opacity:0;transform:translateY(-3px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes shakeField{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  50%{transform:translateX(5px)}
  75%{transform:translateX(-3px)}
}
.form-field.shake{animation:shakeField .28s ease}

.forgot-row{display:flex;justify-content:flex-end;margin-top:-6px;margin-bottom:22px}
.forgot-link{font-size:12.5px;font-weight:600;color:var(--green);text-decoration:underline;text-underline-offset:3px}
.forgot-link:hover{color:var(--green-dark)}

.terms-label{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;color:var(--muted);cursor:pointer;line-height:1.55}
.terms-label input[type=checkbox]{accent-color:var(--green);width:16px;height:16px;margin-top:2px;flex-shrink:0}
.terms-label a{color:var(--green);font-weight:600;text-decoration:underline;text-underline-offset:3px}

.auth-status{display:none;margin-bottom:16px;padding:12px 14px;border-radius:11px;background:var(--sage);border:1px solid #cfe0cc;color:var(--green-dark);font-size:12.5px;align-items:center;gap:8px}
.auth-status.show{display:flex}
.auth-status svg{width:16px;height:16px;flex-shrink:0}

.switch-auth{text-align:center;font-size:13px;color:var(--muted);margin-top:24px}
.switch-auth a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.switch-auth a:hover{color:var(--green)}

/* ==========================================================================
   HOME / CATALOG (index.html)
   ========================================================================== */
.hero{display:grid;grid-template-columns:1.13fr .87fr;position:relative;background:#eff3eb;border:1px solid #e8eee3;border-radius:22px;margin-top:28px;overflow:hidden;min-height:413px;padding:44px 44px 38px;gap:12px}
.hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center}
.hero .eyebrow{color:var(--green)}
.hero h1{font-size:48px;line-height:1.2;letter-spacing:-.045em;margin-bottom:12px}
.hero h1>span{color:#668365;font-weight:450}
.hero-copy>p{font-size:13px;color:#6b786c;line-height:1.8;margin:5px 0 25px}
.hero-actions{display:flex;gap:23px;align-items:center;flex-wrap:wrap}
.hero-disclaimer{font-size:10px;color:#7d887b;margin-top:26px}
.hero-visual{position:relative;min-height:320px;display:flex;align-items:center;justify-content:center}
.orb{position:absolute;border-radius:50%;border:1px solid #dce5d6}
.orb-outer{width:340px;height:340px;background:#e3ebde;right:10px;top:-5px}
.orb-inner{width:265px;height:265px;right:47px;top:33px;background:#d8e3d1;border-color:#d1ddc7}
.hero-label{position:absolute;right:3px;top:-2px;font-size:8px;letter-spacing:.16em;color:#729168;writing-mode:vertical-rl;z-index:2}
.floating-note{position:absolute;left:0;bottom:14px;background:#fff;border:1px solid #e6ebe0;box-shadow:0 8px 24px #20372914;border-radius:12px;padding:13px 18px;display:flex;align-items:center;gap:10px;z-index:5;transform:rotate(-3deg)}
.floating-note strong{display:block;font-size:12px;line-height:1.4}
.floating-note span:not(.mini-icon){font-size:9px;color:#7d887a}
.mini-icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#edf3e6;color:var(--green)}
.art-caption{position:absolute;bottom:0;right:4px;font-size:7px;letter-spacing:.13em;color:#778c6e}
.value-strip{display:grid;grid-template-columns:repeat(3,1fr);padding:25px 10px 28px;border-bottom:1px solid var(--line);gap:30px}
.value-strip>div{display:flex;align-items:center;gap:12px;justify-content:center}
.value-strip>div>svg{color:#638465;width:23px;height:23px}
.value-strip strong{display:block;font-size:12px;line-height:1.7}
.value-strip small{display:block;color:#8a9389;font-size:10px}
.value-strip>div+div{border-left:1px solid var(--line)}

.theme-sage{--device:#9cafa0;--edge:#617968;--screen:#7b9b7d;--screen-light:#cad8ab;--picture:#eef2e9}
.theme-lilac{--device:#b4abc6;--edge:#716682;--screen:#8e7aac;--screen-light:#d2c6e4;--picture:#f0edf4}
.theme-sand{--device:#d1c4ac;--edge:#9b8d72;--screen:#b49e7c;--screen-light:#ecdfbd;--picture:#f4f0e7}
.theme-slate{--device:#7b8787;--edge:#414f55;--screen:#586977;--screen-light:#a6bac2;--picture:#edf0ef}
.phone-art{width:184px;height:174px;position:relative;margin:0 auto}
.device{position:absolute;border-radius:18px;width:78px;height:151px;border:2px solid var(--edge);box-shadow:3px 7px 10px #00000020}
.device-back{left:23px;top:8px;background:linear-gradient(135deg,#ffffff5a,var(--device) 34%,var(--device));transform:rotate(-13deg);z-index:1;box-shadow:inset 0 0 0 1px #ffffff80,3px 8px 14px #00000020}
.device-front{left:81px;top:14px;transform:rotate(10deg);background:#171f1c;overflow:hidden;z-index:2;padding:4px;border-color:#52645a}
.device-front:before{content:"";position:absolute;inset:3px;border-radius:14px;background:linear-gradient(120deg,#e6eacb,var(--screen));z-index:0}
.island{position:absolute;top:9px;left:50%;width:28px;height:7px;background:#202a23;border-radius:20px;transform:translateX(-50%);z-index:4}
.camera-cluster{width:37px;height:42px;position:absolute;top:10px;left:7px;background:#9da59b30;border:1px solid #ffffff55;border-radius:11px}
.camera-cluster i{display:block;width:13px;height:13px;background:radial-gradient(circle at 40% 35%,#405e62 0,#0c1516 27%,#26362e 37%,#101d1b 55%,#65736a 65%,#101d1b 70%);border:1px solid #5d7269;border-radius:50%;position:absolute;left:4px;top:4px;box-shadow:0 0 0 1px #ffffff30}
.camera-cluster i:nth-child(2){top:22px}
.camera-cluster i:nth-child(3){left:20px;top:13px}
.camera-cluster b{position:absolute;width:4px;height:4px;border-radius:50%;background:#e5e1be;right:4px;top:4px}
.device-mark{position:absolute;left:0;right:0;top:77px;text-align:center;color:#ffffff55;font-size:19px;font-weight:600}
.screen-wave{position:absolute;width:133px;height:133px;border-radius:46%;background:var(--screen);top:55px;left:-22px;transform:rotate(30deg);z-index:1;box-shadow:inset 0 6px 20px #ffffff60}
.wave-two{top:89px;left:-33px;background:var(--screen-light);transform:rotate(-26deg)}
.wave-three{top:120px;background:var(--screen);left:-6px}
.device-shadow{position:absolute;width:130px;height:12px;border-radius:50%;background:#32493217;filter:blur(7px);bottom:-3px;left:30px;z-index:0}
.phone-art-hero{width:310px;height:300px;transform:translate(4px,-3px)}
.phone-art-hero .device{width:132px;height:260px;border-radius:29px;border-width:3px}
.phone-art-hero .device-back{left:27px;top:13px}
.phone-art-hero .device-front{left:138px;top:21px}
.phone-art-hero .device-front:before{inset:4px;border-radius:23px}
.phone-art-hero .island{width:48px;height:11px;top:13px}
.phone-art-hero .camera-cluster{width:64px;height:74px;border-radius:17px;left:11px;top:15px}
.phone-art-hero .camera-cluster i{width:23px;height:23px;left:6px;top:7px}
.phone-art-hero .camera-cluster i:nth-child(2){top:40px}
.phone-art-hero .camera-cluster i:nth-child(3){left:35px;top:23px}
.phone-art-hero .camera-cluster b{width:6px;height:6px;right:8px;top:8px}
.phone-art-hero .device-mark{top:137px;font-size:29px}
.phone-art-hero .screen-wave{width:220px;height:220px;top:93px;left:-40px}
.phone-art-hero .wave-two{top:155px;left:-49px}
.phone-art-hero .wave-three{top:211px;left:-8px}
.phone-art-hero .device-shadow{width:250px;height:22px;left:35px;bottom:-10px}

.catalog-section{padding-top:40px;padding-bottom:60px}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:24px}
.section-heading .eyebrow{margin-bottom:10px;color:var(--green)}
.section-heading h2{font-size:29px}
.section-heading>div>p{margin:8px 0 0;font-size:12px;color:var(--muted)}
.section-marker{font-size:9px;letter-spacing:.12em;color:#94a08f;align-self:flex-end;margin-bottom:8px}
.catalog-layout{display:grid;grid-template-columns:205px minmax(0,1fr);gap:25px}
.filter-panel{background:white;border:1px solid var(--line);border-radius:13px;padding:19px 17px;align-self:start}
.filter-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px;font-size:12px}
.filter-title strong{display:flex;align-items:center;gap:6px}
.link-button{border:0;background:transparent;padding:3px 0;color:#8a9788;font-size:10px}
.filter-panel .field-label{font-weight:600;font-size:11px;margin:18px 0 8px}
.filter-search{display:flex;gap:7px;border:1px solid var(--line);padding:9px 8px;border-radius:7px}
.filter-search svg{width:15px;height:15px;margin-top:2px;color:#83937c}
.filter-search input{width:100%;border:0;background:transparent;font-size:10px;padding:0}
.filter-panel select{width:100%;border:1px solid var(--line);border-radius:7px;padding:9px 7px;font-size:11px;background:#fff}
.need-fieldset{margin-top:25px;border-top:1px solid var(--line);padding-top:18px}
.need-fieldset legend{font-size:11px;font-weight:600;float:left;width:100%;margin-bottom:11px}
.need-fieldset:after{content:"";display:table;clear:both}
.need-option{display:flex;align-items:center;gap:8px;font-size:11px;border-radius:7px;cursor:pointer;padding:8px 7px;margin-bottom:3px;color:#687867}
.need-option input{accent-color:var(--green);width:12px;height:12px;margin:0}
.need-option svg{width:16px;height:16px}
.need-option.selected{background:#edf3e9;color:var(--green)}
.filter-note{margin-top:23px;border-radius:8px;background:#f5f7f1;padding:12px 10px;color:#85917d;display:flex;gap:6px;align-items:flex-start}
.filter-note svg{width:14px;height:14px;margin-top:3px}
.filter-note p{font-size:9px;margin:0;line-height:1.8}
.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px}
.tabs{display:flex;gap:6px;padding:4px;border-radius:9px;background:#edf1e9}
.tabs button{background:transparent;border:0;border-radius:6px;padding:7px 15px;font-size:11px;color:#73806d;white-space:nowrap}
.tabs button.active{background:#fff;color:var(--green);font-weight:600;box-shadow:0 1px 5px #143a1410}
.sort-label{display:flex;align-items:center;gap:10px;color:#8c9587;font-size:10px}
.sort-label select{border:1px solid var(--line);background:#fff;border-radius:7px;padding:8px 7px;font-size:10px;color:#52694e}
.result-count{font-size:10px;color:#475e43;margin:17px 0 13px}
.result-count span{color:#a0a898;margin-left:3px}
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.product-card{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;transition:box-shadow .2s,border-color .2s}
.product-card:hover{border-color:#a9bf9d;box-shadow:var(--shadow)}
.product-picture{position:relative;height:211px;background:var(--picture);display:flex;align-items:center;justify-content:center;border:0;width:100%;padding-top:20px;border-bottom:1px solid #e5eadd;cursor:pointer}
.product-picture .phone-art{transform:scale(.94)}
.badge{position:absolute;top:12px;left:12px;padding:4px 8px;background:#fff;color:#5e7a54;border:1px solid #e2eadd;border-radius:5px;font-size:8px;font-weight:600;line-height:1.4;z-index:4}
.badge.used{background:#f9f3e7;color:#8c744c;border-color:#e8dfc6}
.badge.in-flow{position:static;display:inline-block;font-size:10px;padding:5px 9px}
.picture-caption{position:absolute;bottom:9px;right:10px;font-size:6px;letter-spacing:.11em;color:#94a08e}
.product-info{padding:15px 15px 12px}
.product-brand{font-size:8px;text-transform:uppercase;letter-spacing:.12em;color:#98a18f;margin-bottom:3px}
.product-title{display:block;font-size:16px;font-weight:650;letter-spacing:-.025em;line-height:1.5}
.product-title>span{font-size:12px;font-weight:450;color:#8b9483;margin-left:3px}
.spec-chips{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
.spec-chips span{font-size:8px;background:#f6f7f3;border:1px solid #e8ece2;color:#7d8972;padding:1px 6px;border-radius:4px}
.condition-line{font-size:9px;color:#949d8e;margin:9px 0 12px;min-height:16px}
.product-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #edf0e8;padding-top:10px}
.product-bottom strong{font-size:18px;letter-spacing:-.035em;font-weight:650}
.product-bottom small{display:block;font-size:8px;color:#9ca493;line-height:1.6}
.circle-link{display:flex;align-items:center;justify-content:center;width:31px;height:31px;border:1px solid #dfe8d8;border-radius:50%;color:#769066;background:#f8faf5;flex-shrink:0}
.circle-link:hover{background:#e6efde}
.circle-link svg{width:16px;height:16px}
.stock-label{font-size:8px;display:inline-flex;align-items:center;gap:5px;color:#8f9c83;margin-top:9px}
.stock-label i{width:4px;height:4px;border-radius:50%;background:#8cac70}
.stock-label.empty-stock{color:#a08f79}
.stock-label.empty-stock i{background:#bba383}
.empty-state{border:1px dashed #c8d5be;border-radius:14px;padding:50px 25px;text-align:center;color:var(--muted)}
.empty-state h3{margin-top:16px}
.empty-state .button{margin-top:12px;width:auto}

.site-footer{background:#f0f3ec;border-top:1px solid #e1e7da;padding-top:40px}
.footer-grid{display:grid;grid-template-columns:1.1fr 1fr 1.1fr 1.4fr;gap:32px;padding-bottom:29px}
.footer-grid .brand{font-size:32px}
.footer-grid p{color:#86917d;font-size:11px;line-height:1.85;margin-top:10px}
.footer-grid h3{font-size:11px;letter-spacing:0;margin:5px 0 13px;font-weight:600}
.footer-grid>div>a:not(.brand){display:block;font-size:10px;color:#839277;margin-bottom:6px}
.footer-note{background:#e7edde;padding:14px;border-radius:10px;display:flex;gap:8px;align-items:flex-start}
.footer-note svg{color:#7c9270;width:18px;height:18px;margin-top:3px}
.footer-note p{margin:0;color:#7a896f;font-size:10px}
.footer-bottom{border-top:1px solid #dfe6d7;display:flex;justify-content:space-between;gap:20px;font-size:8px;letter-spacing:.08em;color:#9da68f;padding-block:15px}

/* ==========================================================================
   CART & CHECKOUT (cart.html & checkout.html)
   ========================================================================== */
.page-space{padding-top:40px;padding-bottom:70px}
.breadcrumbs{display:flex;gap:10px;font-size:11px;color:#8d9a81;margin-bottom:18px;flex-wrap:wrap}
.page-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.page-title h1{font-size:30px}
.select-all{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.select-all input{accent-color:var(--green);width:14px;height:14px}

.cart-layout,.checkout-layout{display:grid;grid-template-columns:1.7fr 1fr;gap:26px;align-items:start}
.checkout-panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin-bottom:22px}
.checkout-panel h2{font-size:18px;margin-bottom:6px;display:flex;align-items:center;gap:9px}
.checkout-panel .panel-sub{font-size:12.5px;color:var(--muted);margin-bottom:20px}
.field-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* Phương thức thanh toán: Visa, MoMo, Ngân hàng */
.payment-card.momo-pay.active {
  background-color: #FFF0F5 !important;
  border-color: #D82D8B !important;
}
.payment-card.momo-pay.active .radio-circle {
  background-color: #D82D8B !important;
}

.payment-card.napas-pay.active {
  background-color: #E6F0F8 !important;
  border-color: #0054A6 !important;
}
.payment-card.napas-pay.active .radio-circle {
  background-color: #0054A6 !important;
}
.payment-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.payment-card{position:relative;border:1.5px solid var(--line);border-radius:14px;padding:15px 14px;background:var(--white);cursor:pointer;transition:border-color .2s,background-color .2s,box-shadow .2s;display:flex;flex-direction:column;gap:10px}
.payment-card:hover{border-color:#b8c9b4}
.payment-card.active{border-color:var(--ink);background:var(--sage);box-shadow:var(--shadow)}
.payment-card input[type=radio]{position:absolute;top:14px;right:14px;accent-color:var(--green);width:15px;height:15px;margin:0}
.payment-icon{width:38px;height:38px;border-radius:10px;background:#f2f5f0;color:var(--green);display:flex;align-items:center;justify-content:center}
/* .payment-card.active .payment-icon{background:var(--white);color:var(--ink)} */

.payment-icon.napas{background:#E6F0F8;color:#0054A6}
.payment-icon.momo{background:#fdf2f8;color:#a50064}
.payment-card strong{display:block;font-size:13px;color:var(--ink);line-height:1.3}
.payment-card span{display:block;font-size:11px;color:var(--muted);margin-top:2px}

.payment-detail-box{border-top:1px solid var(--line);padding-top:20px;animation:fadeInError .2s ease}
.qr-box{background:var(--bg);border:1px solid var(--line);border-radius:15px;padding:22px;display:grid;grid-template-columns:172px 1fr;gap:22px;align-items:center}
.qr-card{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center;box-shadow:var(--shadow)}
.qr-card svg{width:136px;height:136px;display:block;margin:0 auto 6px}
.qr-card small{font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.qr-info-rows{display:flex;flex-direction:column;gap:9px}
.qr-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px dashed var(--line);font-size:12.5px}
.qr-row:last-child{border-bottom:0;padding-bottom:0}
.qr-row span{color:var(--muted)}
.qr-row strong{color:var(--ink);font-weight:700}
.qr-row strong.amount{font-size:17px;color:var(--green-dark)}
.copy-btn{border:1px solid #c9d6be;background:var(--white);color:var(--green);border-radius:6px;padding:3px 8px;font-size:10.5px;font-weight:600;margin-left:6px}
.copy-btn:hover{background:var(--sage)}
.qr-hint{font-size:11.5px;color:var(--muted);margin-top:12px;display:flex;align-items:center;gap:6px}

/* ==========================================================================
   CSS DÀNH RIÊNG CHO BOX THANH TOÁN MOMO
   ========================================================================== */
.qr-box.momo-theme {
  background: #FFF0F5;             /* Nền hồng pastel siêu nhạt, dịu mắt */
  border-color: rgba(165, 0, 100, 0.12); /* Viền hồng mờ */
}

/* Biến đổi màu chữ Label (Ngân hàng, Số tài khoản...) cho hợp tone hồng */
.qr-box.momo-theme .qr-row span {
  color: #8C6E7E; 
}

/* Đổi màu nhấn cho Số tiền và Mã giao dịch thành màu hồng thương hiệu MoMo */
.qr-box.momo-theme .qr-row strong.amount,
.qr-box.momo-theme .qr-row strong.momo-highlight {
  color: #A50064; /* Hồng đậm MoMo */
}

/* Tối ưu riêng nút copy của tab MoMo */
.qr-box.momo-theme .copy-btn {
  border-color: #F4C2D7;
  color: #A50064;
}
.qr-box.momo-theme .copy-btn:hover {
  background: #FCE4EC; /* Hover ra màu hồng nhẹ */
}


/* ==========================================================================
   CSS DÀNH RIÊNG CHO BOX THANH TOÁN NAPAS / NGÂN HÀNG
   ========================================================================== */
.qr-box.napas-theme {
  background: #EDF5FA;             /* Nền xanh dương pastel siêu nhạt */
  border-color: rgba(0, 84, 166, 0.12);  /* Viền xanh dương mờ */
  grid-template-columns: 226px 1fr;
}

/* Biến đổi màu chữ Label cho hợp tone xanh dương */
.qr-box.napas-theme .qr-row span {
  color: #5B6E80;
}

/* Đổi màu nhấn cho Số tiền và Mã giao dịch thành màu xanh dương Napas */
.qr-box.napas-theme .qr-row strong.amount,
.qr-box.napas-theme .qr-row strong.napas-highlight {
  color: #0054A6; /* Xanh dương Napas chuẩn */
}

/* Tối ưu riêng nút copy của tab Napas */
.qr-box.napas-theme .copy-btn {
  border-color: #BCD4EC;
  color: #0054A6;
}
.qr-box.napas-theme .copy-btn:hover {
  background: #E1F0FA; /* Hover ra màu xanh dương nhẹ */
}

.qr-box.napas-theme .qr-card small {
  color: #0054A6;
  opacity: 0.8;
}

.qr-box.momo-theme .qr-card small {
  color: #A50064;
  opacity: 0.8;
}

/* Summary Panel (dùng chung cart.html & checkout.html) */
/* 1. Giới hạn chiều cao cho danh sách và bật tính năng cuộn */
.order-mini-list {
  max-height: 240px; /* Điều chỉnh độ cao tùy ý bạn để vừa vặn layout */
  overflow-y: auto;
  padding-right: 8px; /* Tạo khoảng trống nhỏ để thanh cuộn không đè sát vào chữ */
}

/* 2. Custom thanh cuộn trên các trình duyệt Chrome, Edge, Safari */
.order-mini-list::-webkit-scrollbar {
  width: 8px; /* Giúp thanh cuộn mảnh và tinh tế hơn */
}

.order-mini-list::-webkit-scrollbar-track {
  background: transparent; /* Giúp nền thanh cuộn hòa vào màu nền xám nhạt của panel */
}

.order-mini-list::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15); /* Màu thanh cuộn mờ nhã nhặn */
  border-radius: 10px; /* Bo tròn mượt mà */
  transition: background-color 0.2s ease;
}

/* Hiệu ứng khi rê chuột vào thanh cuộn sẽ đậm lên một chút */
.order-mini-list::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3); 
}

/* .summary-panel{background:var(--sage);border-radius:var(--radius);padding:22px;position:sticky;top:20px} */
.summary-panel h2{font-size:14px;margin-bottom:16px}
.order-mini-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;max-height:260px;overflow-y:auto}
.order-mini-item{display:grid;grid-template-columns:46px 1fr auto;gap:11px;align-items:center;background:var(--white);padding:10px 12px;border-radius:12px;border:1px solid var(--line)}
.item-thumb{width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--sage);flex-shrink:0}
.item-thumb svg{width:22px;height:22px;color:var(--green)}
.item-thumb.theme-lilac{background:#f0edf4}.item-thumb.theme-lilac svg{color:#8e7aac}
.item-thumb.theme-sand{background:#f4f0e7}.item-thumb.theme-sand svg{color:#9b8d72}

.mini-info strong{display:block;font-size:13px;color:var(--ink);line-height:1.3;}
.mini-info span{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.mini-price{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap}

.summary-rows{border-top:1px solid #d1ddc7;padding-top:12px;margin-top:4px}
.summary-rows div{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:8px}
.summary-rows .discount{color:var(--warn)}
.summary-rows .free{color:var(--green)}
.summary-total{border-top:1px solid #d1ddc7;padding-top:14px;margin-top:4px;display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.summary-total span:first-child{font-size:13px;color:var(--ink)}
.summary-total strong{font-size:21px;font-weight:700;letter-spacing:-.03em;color:var(--green-dark)}
.continue-shopping{display:block;text-align:center;font-size:11.5px;color:var(--muted);margin-top:14px}
.continue-shopping:hover{color:var(--green)}

.btn-spinner{width:15px;height:15px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.mobile-checkout-bar{display:none}

/* ==========================================================================
   RESPONSIVE 3 MỐC GIỐNG CART.HTML & LOGIN.HTML
   ========================================================================== */
@media(max-width:1100px){
  .brand-tagline{display:none}
  .hero{padding:32px}
  .hero h1{font-size:39px}
  .header-search{max-width:430px}
  .catalog-layout{grid-template-columns:180px minmax(0,1fr);gap:19px}
  .product-grid{gap:12px}

  .login-split{grid-template-columns:1fr;min-height:auto}
  .brand-panel{padding:36px 40px;border-right:0;border-bottom:1px solid var(--line)}
  .brand-story{margin-block:24px 16px;padding-block:0;max-width:100%}
  .brand-story h2{font-size:34px}
  .layered-showcase{min-height:145px}
  .form-panel{padding:48px 40px;align-items:center}

  .cart-layout,.checkout-layout{grid-template-columns:1fr}
  .summary-panel{position:static}
}

@media(max-width:860px){
  .container{width:calc(100% - 36px)}
  .header-main{height:78px;gap:16px}
  .header-search{width:auto;flex:1}
  .icon-link span:not(.cart-count),.account-link span{display:none}
  .catalog-layout{grid-template-columns:1fr}
  .filter-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 15px;padding:16px;align-items:center}
  .filter-title{grid-column:1/-1;margin-bottom:0}
  .filter-panel>.field-label{display:none}
  .need-fieldset{grid-column:1/-1;margin:0;padding:0;border:0;display:flex;gap:9px;flex-wrap:wrap}
  .need-fieldset legend,.filter-note,.section-marker{display:none}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .payment-methods{grid-template-columns:1fr}
  .qr-box{grid-template-columns:1fr;text-align:center}
  .qr-card{max-width:190px;margin:0 auto}
}

@media(max-width:600px){
  .container{width:calc(100% - 32px)}
  .header-main{height:auto;min-height:70px;flex-wrap:wrap;padding-block:12px;gap:12px}
  .brand{font-size:26px}
  .brand-symbol{width:32px;height:36px;border-radius:9px}
  .brand-symbol svg{width:20px;height:20px}
  .header-icons{margin-left:auto}
  .header-search{order:3;min-width:100%;height:38px;margin:0}
  .page-space{padding-top:20px;padding-bottom:110px}
  .page-title h1{font-size:23px}
  .hero{grid-template-columns:1fr;padding:28px 24px 10px}
  .value-strip{grid-template-columns:1fr;gap:0}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}

  /* Auth mobile chuẩn từ CSS login.html của bạn */
  .brand-panel{padding:22px 20px}
  .brand-tag{font-size:9px;padding-left:12px}
  .brand-story{margin-block:16px 4px}
  .eyebrow{font-size:10px;margin-bottom:8px}
  .brand-story h2{font-size:25px;margin-bottom:8px}
  .brand-story p{font-size:12.5px}
  .layered-showcase{display:none}

  .form-panel{padding:28px 20px 44px;align-items:stretch}
  .form-shell{max-width:100%}
  .top-nav-row{margin-bottom:22px}
  .form-shell h1{font-size:28px}
  .form-subtitle{font-size:13px;margin-bottom:22px}
  .input-control{font-size:16px;min-height:46px}
  .button{min-height:48px}

  /* Checkout mobile */
  .checkout-panel{padding:18px 16px}
  .field-grid-2{grid-template-columns:1fr;gap:0}
  .summary-panel .button.primary{display:none}
  .mobile-checkout-bar{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);padding:12px 16px;align-items:center;gap:12px;z-index:50;box-shadow:0 -8px 24px #1830230f}
  .mobile-checkout-bar .total-block{flex:1}
  .mobile-checkout-bar .total-block span{display:block;font-size:10px;color:var(--muted)}
  .mobile-checkout-bar .total-block strong{font-size:16px;color:var(--green-dark)}
  .mobile-checkout-bar .button{width:auto;padding:12px 20px}
  .mobile-checkout-bar .button:disabled{opacity:.5}
}
/* ---- Page heading ---- */
.page-space{padding-top:40px;padding-bottom:70px}
.breadcrumbs{display:flex;gap:10px;font-size:11px;color:#8d9a81;margin-bottom:18px}
.page-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.page-title h1{font-size:30px}
.select-all{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.select-all input{accent-color:var(--green);width:14px;height:14px}

/* ---- Layout ---- */
.cart-layout{display:grid;grid-template-columns:1.7fr 1fr;gap:26px;align-items:start}

/* ---- Cart list ---- */
.cart-list{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.cart-item{display:grid;grid-template-columns:18px 64px 1fr auto auto 24px;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid #edf0e8;position:relative}
.cart-item:last-child{border-bottom:0}
.cart-item input[type=checkbox]{accent-color:var(--green);width:14px;height:14px}
.item-thumb{width:64px;height:64px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--sage);flex-shrink:0}
.item-thumb svg{width:26px;height:26px;color:var(--green)}
.item-thumb.theme-lilac{background:#f0edf4}.item-thumb.theme-lilac svg{color:#8e7aac}
.item-thumb.theme-sand{background:#f4f0e7}.item-thumb.theme-sand svg{color:#9b8d72}
.item-info strong{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.item-info span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
.item-info .out-of-stock{color:#c08a5a}
.qty-stepper{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;padding:4px 8px}
.qty-stepper button{border:0;background:transparent;width:20px;height:20px;color:var(--ink);font-size:14px;line-height:1}
.qty-stepper button:disabled{opacity:.35;cursor:not-allowed}
.qty-stepper span{font-size:12px;min-width:14px;text-align:center}
.item-price{font-size:14px;font-weight:600;min-width:92px;text-align:right;white-space:nowrap}
.item-price small{display:block;font-size:10px;font-weight:400;color:var(--muted)}
.remove-btn{border:0;background:transparent;color:var(--danger);width:22px;height:22px}
.remove-btn svg{width:17px;height:17px}
.cart-item.disabled{opacity:.55}
.cart-item.disabled .item-price{color:#9aa698}
.cart-item.removing{opacity:0;transform:translateX(12px);transition:opacity .25s,transform .25s}

.empty-cart{padding:70px 25px;text-align:center;color:var(--muted);display:none}
.empty-cart svg{width:46px;height:46px;color:#b9c6b1;margin-bottom:16px}
.empty-cart .button{margin-top:16px;display:inline-flex;width:auto}

/* ---- Summary panel ---- */
.summary-panel{
  /* background:var(--sage); */
  background: #f9f9f9; /* Màu nền xám nhạt, dịu mắt */
  border: 1px dashed var(--green-dark);
  border-radius:var(--radius);
  padding:22px;
  position:sticky;
  top:20px
}

.summary-panel h2{font-size:14px;margin-bottom:16px}
.voucher-row{margin-bottom:14px}
.voucher-row label{display:block;font-size:10.5px;color:var(--muted);margin-bottom:6px;font-weight:600}
.voucher-input-group{display:flex;gap:7px}
.voucher-input-group input{flex:1;border:1px solid #c9d6be;border-radius:8px;padding:9px 11px;font-size:12px;background:#fff;min-width:0}
.voucher-input-group button{background:var(--ink);color:#fff;border:0;border-radius:8px;padding:0 14px;font-size:11px;font-weight:600;white-space:nowrap}
.voucher-msg{margin:7px 0 0;font-size:11px;display:flex;align-items:center;gap:5px;min-height:14px}
.voucher-msg svg{width:13px;height:13px;flex-shrink:0}
.voucher-msg.ok{color:var(--green)}
.voucher-msg.err{color:var(--danger)}
.summary-rows{border-top:1px solid #d1ddc7;padding-top:12px;margin-top:4px}
.summary-rows div{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:8px}
.summary-rows .discount{color:var(--warn)}
.summary-rows .free{color:var(--green)}
.row-discount{display:none}
.summary-total{border-top:1px solid #d1ddc7;padding-top:14px;margin-top:4px;display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.summary-total span:first-child{font-size:13px;color:var(--ink)}
.summary-total strong{font-size:21px;font-weight:700;letter-spacing:-.03em;color:var(--green-dark)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:11px 20px;border-radius:9px;font-size:13px;font-weight:600;border:1px solid transparent;width:100%;background:transparent}
.button.primary{background:var(--green);color:#fff}
.button.primary:hover:not(:disabled){background:var(--green-dark)}
.button.primary:disabled{opacity:.5;cursor:not-allowed}
.button.secondary{background:#fff;border-color:var(--line);color:var(--ink)}
.continue-shopping{display:block;text-align:center;font-size:11.5px;color:var(--muted);margin-top:14px}
.continue-shopping:hover{color:var(--green)}

.mobile-checkout-bar{display:none}

@media(max-width:1100px){
  .cart-layout{grid-template-columns:1fr}
  .summary-panel{position:static}
  .cart-item{grid-template-columns:16px 52px 1fr auto auto 20px;gap:10px;padding:13px 14px}
  .item-thumb{width:52px;height:52px;border-radius:10px}
  .item-thumb svg{width:21px;height:21px}
}
@media(max-width:600px){
  .container{width:calc(100% - 32px)}
  .header-main{height:70px}
  .brand{font-size:26px}
  .page-space{padding-top:20px;padding-bottom:110px}
  .page-title h1{font-size:23px}
  .cart-item{grid-template-columns:16px 50px 1fr;grid-template-rows:auto auto;row-gap:8px;padding:13px}
  .item-thumb{grid-row:1/3}
  .item-info{grid-column:3}
  .qty-stepper{grid-column:2/4;justify-self:start;margin-top:2px}
  .item-price{grid-column:1/4;text-align:left;margin-top:4px}
  .cart-item .remove-btn{position:absolute;top:13px;right:13px}

  .summary-panel .button.primary{display:none}
  .mobile-checkout-bar{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);padding:12px 16px;align-items:center;gap:12px;z-index:50;box-shadow:0 -8px 24px #1830230f}
  .mobile-checkout-bar .total-block{flex:1}
  .mobile-checkout-bar .total-block span{display:block;font-size:10px;color:var(--muted)}
  .mobile-checkout-bar .total-block strong{font-size:16px;color:var(--green-dark)}
  .mobile-checkout-bar .button{width:auto;padding:12px 20px}
  .mobile-checkout-bar .button:disabled{opacity:.5}
}

/* ---- RESULT CHECKOUT ---- */

.result-wrap{min-height:calc(100vh - 91px);display:flex;align-items:center;justify-content:center;padding:40px 20px}
.result-card{width:100%;max-width:460px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:44px 38px;text-align:center}
.result-icon{width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.result-icon svg{width:32px;height:32px}
.result-icon.pending{background:var(--sage);color:var(--green)}
.result-icon.pending svg{animation:spin 1.1s linear infinite}
.result-icon.success{background:var(--sage);color:var(--green)}
.result-icon.failed{background:#fbeceb;color:var(--danger)}
@keyframes spin{to{transform:rotate(360deg)}}

.result-title{font-size:23px;margin-bottom:8px}
.result-sub{font-size:13.5px;color:var(--muted);margin-bottom:26px;line-height:1.7}

.result-meta{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px 18px;text-align:left;margin-bottom:26px;display:none}
.result-meta.show{display:block}
.result-meta .row{display:flex;justify-content:space-between;font-size:12.5px;padding:6px 0}
.result-meta .row span:first-child{color:var(--muted)}
.result-meta .row span:last-child{color:var(--ink);font-weight:600}
.result-meta .row+.row{border-top:1px dashed var(--line)}

.result-actions{display:flex;flex-direction:column;gap:10px}
.result-actions .button{width:100%}

.progress-dots{display:flex;justify-content:center;gap:6px;margin-top:18px}
.progress-dots span{width:6px;height:6px;border-radius:50%;background:var(--line)}
.progress-dots span.active{background:var(--green)}

/* ---- Hệ thống Status Badge đồng nhất 100% giữa Buyer (profile, track-order) & Admin ---- */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.status-pending {
  background: #FFF2D9;
  color: #B8860B;
  border: 1px solid #F3DFB3;
}
.status-shipping {
  background: #E3F0FF;
  color: #2B6CB0;
  border: 1px solid #C5DDFB;
}
.status-delivered {
  background: #E2EFE4;
  color: #4A6B52;
  border: 1px solid #C6DEC9;
}
.status-cancelled {
  background: #FBECEB;
  color: #B56A5A;
  border: 1px solid #F2D2CE;
}
.status-vip {
  background: #FFF6E0;
  color: #A67C00;
  border: 1px solid #EDD89F;
}

/* ==========================================================================
   TRANG PROFILE (profile.html — Layout 2 cột 30% / 70%)
   ========================================================================== */
.profile-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

/* Cột trái: Sidebar tài khoản */
.profile-sidebar {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 20px;
  position: sticky;
  top: 20px;
}
.profile-user-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--green);
  border: 2px solid #cfe0cc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}
.profile-user-box strong {
  font-size: 16px;
  color: var(--ink);
  display: block;
}
.profile-user-box span {
  font-size: 12.5px;
  color: var(--muted);
  display: block;
  margin-top: 3px;
}
.profile-tier-tag {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--sage);
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: background 0.18s, color 0.18s;
}
.profile-nav-item svg {
  width: 18px;
  height: 18px;
  color: var(--muted);
  transition: color 0.18s;
}
.profile-nav-item:hover {
  background: #f3f6f1;
  color: var(--ink);
}
.profile-nav-item.active {
  background: var(--sage);
  color: var(--green-dark);
}
.profile-nav-item.active svg {
  color: var(--green-dark);
}
.profile-nav-item .nav-badge {
  margin-left: auto;
  background: var(--white);
  color: var(--green-dark);
  border: 1px solid #cddbc8;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
}
.profile-nav-item.logout {
  color: var(--danger);
  margin-top: 8px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 11px 11px;
  padding-top: 14px;
}
.profile-nav-item.logout svg {
  color: var(--danger);
}
.profile-nav-item.logout:hover {
  background: #fbeceb;
}

/* Cột phải: Các Card nội dung Profile */
.profile-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.profile-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}
.profile-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.profile-card-header h2 {
  font-size: 19px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.profile-card-header p {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 4px;
}
.input-control[readonly] {
  background: #f4f6f2;
  color: var(--muted);
  cursor: not-allowed;
}
.form-actions-right {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 10px;
}
.form-actions-right .button {
  width: auto;
  min-width: 160px;
}

/* Bảng lịch sử đơn hàng trong Profile */
.order-filter-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.order-filter-pills button {
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 999px;
  transition: all 0.18s;
}
.order-filter-pills button:hover {
  border-color: #b8c9b4;
  color: var(--ink);
}
.order-filter-pills button.active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.orders-table-wrap {
  overflow-x: auto;
  margin-top: 6px;
}
.mobi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}
.mobi-table th {
  background: #F7F8F6;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
}
.mobi-table td {
  padding: 15px 14px;
  border-bottom: 1px solid #edf0e8;
  color: var(--text);
  vertical-align: middle;
}
.mobi-table tbody tr:hover {
  background: #FAFBFA;
}
.mobi-table tbody tr:last-child td {
  border-bottom: 0;
}
.order-id-cell {
  font-weight: 700;
  color: var(--ink);
}
.order-items-preview {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-total-cell {
  font-weight: 700;
  color: var(--green-dark);
}
.table-action-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--green);
  padding: 6px 11px;
  border-radius: 8px;
  background: var(--sage);
  transition: background 0.18s;
}
.table-action-link:hover {
  background: #dce8d9;
  color: var(--green-dark);
}

/* ==========================================================================
   TRANG THEO DÕI ĐƠN HÀNG (track-order.html — Timeline ngang 4 mốc)
   ========================================================================== */
.track-header-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
  margin-bottom: 24px;
}
.track-top-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.track-order-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.track-order-title h1 {
  font-size: 28px;
  letter-spacing: -0.03em;
}
.track-meta-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.track-search-inline {
  display: flex;
  gap: 8px;
  align-items: center;
}
.track-search-inline input {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 12.5px;
  min-height: 40px;
  background: var(--bg);
  width: 190px;
}
.track-search-inline button {
  background: var(--ink);
  color: var(--white);
  border: 0;
  border-radius: 9px;
  padding: 0 14px;
  height: 40px;
  font-size: 12px;
  font-weight: 600;
}

/* Timeline ngang 4 mốc */
.track-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  padding-top: 32px;
  padding-bottom: 8px;
}
/* .timeline-step {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
} */

.timeline-step {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Các bước đã hoàn thành hoặc đang ở vị trí hiện tại sẽ được ưu tiên nổi lên trên */
.timeline-step.reached,
.timeline-step.current {
  z-index: 2; 
}
/* Đường kẻ ngang nối giữa các chấm */
.timeline-step:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 19px;
  right: 50%;
  width: 92%;
  height: 3px;
  background: var(--line);
  z-index: -2;
  transition: background 0.3s ease;
}
.timeline-step.reached:not(:first-child)::before {
  background: var(--green);
}
.timeline-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--line);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
  transition: all 0.25s ease;
}
.timeline-dot svg {
  width: 18px;
  height: 18px;
}
.timeline-step.reached .timeline-dot {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
  box-shadow: 0 0 0 5px var(--sage);
}
.timeline-step.current .timeline-dot {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
  box-shadow: 0 0 0 6px #d6e5d4;
}
.timeline-label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
}
.timeline-step.reached .timeline-label {
  color: var(--ink);
}
.timeline-time {
  font-size: 11.5px;
  color: var(--muted);
  min-height: 18px;
}
.timeline-desc {
  font-size: 11px;
  color: #849287;
  max-width: 190px;
  margin-top: 3px;
}

/* Grid 2 cột bên dưới Timeline */
.track-lower-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 24px;
  align-items: start;
}
.info-kv-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.info-kv-row {
  display: grid;
  grid-template-columns: 135px 1fr;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line);
  font-size: 13px;
}
.info-kv-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.info-kv-row span {
  color: var(--muted);
}
.info-kv-row strong {
  color: var(--ink);
  font-weight: 600;
}

/* Nhật ký hành trình chi tiết */
.activity-log-list {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.activity-log-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 12.5px;
}
.activity-log-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  margin-top: 6px;
  flex-shrink: 0;
}
.activity-log-item.muted-log .activity-log-dot {
  background: #c5d0c3;
}
.activity-log-item strong {
  display: block;
  color: var(--ink);
}
.activity-log-item span {
  font-size: 11.5px;
  color: var(--muted);
}

/* Responsive cho Profile & Track Order */
@media (max-width: 1100px) {
  .profile-layout {
    grid-template-columns: 1fr;
  }
  .profile-sidebar {
    position: static;
  }
  .profile-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .profile-nav-item {
    width: auto;
    flex: 1 1 auto;
    justify-content: center;
  }
  .profile-nav-item.logout {
    margin-top: 0;
    border-top: 0;
    padding-top: 11px;
    border-radius: 11px;
  }
  .track-lower-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .profile-card,
  .track-header-card {
    padding: 18px 16px;
  }
  .form-actions-right .button {
    width: 100%;
  }
  /* Chuyển Timeline ngang sang Timeline dọc trên Mobile */
  .track-timeline {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-top: 22px;
    padding-left: 8px;
  }
  .timeline-step {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    gap: 14px;
  }
  .timeline-step:not(:first-child)::before {
    top: -24px;
    left: 19px;
    right: auto;
    width: 3px;
    height: 26px;
  }
  .timeline-dot {
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .timeline-desc {
    max-width: 100%;
  }
  .info-kv-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .track-search-inline {
    width: 100%;
  }
  .track-search-inline input {
    flex: 1;
  }
}

/* NEWWWWWWWWW CHATGPT */
/* Thông báo trạng thái trang */
.track-page-message {
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 8px;
  background: #f3f4f6;
  color: #374151;
}

.track-page-message[hidden] {
  display: none;
}

.track-page-message.error {
  background: #fef2f2;
  color: #b91c1c;
}

.track-page-message.info {
  background: #eff6ff;
  color: #1d4ed8;
}

/* Badge trạng thái đơn hàng */
.order-status-label {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.status-pending {
  background: #fef3c7;
  color: #92400e;
}

.status-approved {
  background: #dbeafe;
  color: #1d4ed8;
}

.status-shipping {
  background: #e0e7ff;
  color: #4338ca;
}

.status-delivered {
  background: #dcfce7;
  color: #166534;
}

.status-cancelled {
  background: #fee2e2;
  color: #991b1b;
}

.status-unknown {
  background: #f3f4f6;
  color: #4b5563;
}

/* Ảnh sản phẩm */
.item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Trạng thái timeline đặc biệt */
.timeline-cancelled,
.timeline-warning {
  padding: 10px 12px;
  margin-top: 12px;
  border-radius: 8px;
  font-size: 13px;
}

.timeline-cancelled {
  background: #fef2f2;
  color: #b91c1c;
}

.timeline-warning {
  background: #fffbeb;
  color: #92400e;
}

/* ==========================================================================
   BỔ SUNG CHUẨN HOÁ: ROLE / TIER BADGES, MEMBERSHIP CARD & DEMO SWITCHER
   ========================================================================== */

/* Đồng bộ class status cho cả renderOrderStatusBadge() và track-order.js */
.order-status-label,
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.order-status-label::before,
.status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.status-pending { background: #FFF2D9; color: #B8860B; border: 1px solid #F3DFB3; }
.status-approved { background: #EDF3E9; color: #285F45; border: 1px solid #C8DBC2; }
.status-shipping { background: #E3F0FF; color: #2B6CB0; border: 1px solid #C5DDFB; }
.status-delivered { background: #E2EFE4; color: #4A6B52; border: 1px solid #C6DEC9; }
.status-cancelled { background: #FBECEB; color: #B56A5A; border: 1px solid #F2D2CE; }
.status-unknown { background: #F3F5F0; color: #69776E; border: 1px solid #DFE5DD; }

/* ---- Role & Tier Badges (NORMAL | VIP | VVIP & BUYER | SELLER | ADMIN) ---- */
.profile-badges-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.role-badge,
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.role-badge.role-buyer { background: #F3F5F0; color: var(--muted); border: 1px solid var(--line); }
.role-badge.role-seller { background: #E3F0FF; color: #1E56A0; border: 1px solid #B9D7EA; }
.role-badge.role-admin { background: var(--ink); color: #E7EFE4; border: 1px solid var(--ink); }

.tier-badge.tier-normal { background: var(--sage); color: var(--green); border: 1px solid #CFE0CC; }
.tier-badge.tier-vip { background: #FFF6E0; color: #A67C00; border: 1px solid #EDD89F; }
.tier-badge.tier-vvip { background: linear-gradient(135deg, #20372C, #14241B); color: #F5D77F; border: 1px solid #D4AF37; }

/* ---- Thẻ Hạng Thành Viên & Tiến Trình Chi Tiêu (Profile) ---- */
.membership-banner {
  background: linear-gradient(135deg, #EFF4EC 0%, #E3ECE0 100%);
  border: 1px solid #D2E0CE;
  border-radius: var(--radius);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.membership-banner.tier-vip {
  background: linear-gradient(135deg, #FFFDF7 0%, #FFF5DC 100%);
  border-color: #EDD89F;
}
.membership-banner.tier-vvip {
  background: linear-gradient(135deg, #20372C 0%, #16281F 100%);
  border-color: #365847;
  color: #F2F6EC;
}
.membership-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.membership-top h3 {
  font-size: 17px;
  margin-bottom: 4px;
}
.membership-banner.tier-vvip .membership-top h3,
.membership-banner.tier-vvip .membership-spent strong {
  color: #F5D77F;
}
.membership-top p {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
}
.membership-banner.tier-vvip .membership-top p,
.membership-banner.tier-vvip .membership-progress-meta {
  color: #C4D4C8;
}
.membership-spent {
  text-align: right;
}
.membership-spent span {
  display: block;
  font-size: 11px;
  color: var(--muted);
}
.membership-banner.tier-vvip .membership-spent span {
  color: #A9BFA8;
}
.membership-spent strong {
  font-size: 20px;
  color: var(--green-dark);
  letter-spacing: -0.03em;
}
.membership-progress-track {
  width: 100%;
  height: 8px;
  background: rgba(32, 55, 44, 0.12);
  border-radius: 999px;
  overflow: hidden;
}
.membership-banner.tier-vvip .membership-progress-track {
  background: rgba(255, 255, 255, 0.16);
}
.membership-progress-fill {
  height: 100%;
  background: var(--green);
  border-radius: 999px;
  transition: width 0.35s ease;
}
.membership-banner.tier-vip .membership-progress-fill { background: #B8860B; }
.membership-banner.tier-vvip .membership-progress-fill { background: #F5D77F; }
.membership-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--muted);
  gap: 10px;
  flex-wrap: wrap;
}

/* Nút mở Workspace cho Seller / Admin trong Profile Sidebar */
.profile-nav-item.workspace-link {
  background: var(--ink);
  color: var(--white);
  margin-bottom: 6px;
}
.profile-nav-item.workspace-link svg {
  color: #A9C7A9;
}
.profile-nav-item.workspace-link:hover {
  background: var(--green-dark);
  color: var(--white);
}

/* ---- Thanh công cụ Demo Test Role & Tier (Dành cho Dev / Tester) ---- */
.demo-switcher-card {
  background: #F5F7F2;
  border: 1px dashed #B9C8B5;
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.demo-switcher-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 7px;
}
.demo-switcher-title small {
  font-weight: 400;
  color: var(--muted);
}
.demo-switcher-Controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.demo-chip-btn {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 8px;
  transition: all 0.15s;
}
.demo-chip-btn:hover {
  border-color: var(--green);
  color: var(--green);
}
.demo-chip-btn.active {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}

/* ---- Phân trang đơn hàng (Profile) & Thông báo (Track Order) ---- */
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
}
.pagination-btns {
  display: flex;
  gap: 6px;
}
.page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.page-btn.active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.track-page-message {
  padding: 13px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 18px;
  border: 1px solid #DBE6D1;
  background: #F3F7EE;
  color: var(--ink);
}
.track-page-message.error {
  background: #FFF2EE;
  border-color: #F1D5C9;
  color: #97533B;
}
.timeline-cancelled,
.timeline-warning {
  grid-column: 1 / -1;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  background: #FBECEB;
  color: var(--danger);
  border: 1px solid #F2D2CE;
}
.quick-order-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--muted);
}

/* ==========================================================================
   ADMIN & SELLER DASHBOARD (ARGON MODULAR OVERRIDE — 03 & 04 MD)
   ========================================================================== */

.admin-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
  background: #F5F5F7;
}

/* ---- Sidebar cố định bên trái (Nền rêu đậm #1C3A2E chữ trắng) ---- */
.admin-sidebar {
  background: #1C3A2E;
  color: #F2F6EC;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid #14281F;
  z-index: 45;
  user-select: none;
}
.admin-sidebar-brand {
  height: 76px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.admin-sidebar-brand .brand-symbol {
  width: 34px;
  height: 38px;
  border-radius: 10px;
  background: #285F45;
  color: #fff;
  margin-right: 0;
}
.admin-sidebar-brand strong {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -1.2px;
  color: #fff;
}
.admin-sidebar-brand strong span {
  color: #8FD1A8;
}
.admin-badge-tag {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(231, 239, 228, 0.14);
  color: #CFE6D5;
}

.admin-nav-list {
  flex: 1;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
.admin-nav-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(231, 239, 228, 0.45);
  padding: 10px 12px 6px;
}
.admin-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(242, 246, 236, 0.78);
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  width: 100%;
  text-align: left;
  transition: all 0.18s ease;
}
.admin-nav-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.85;
}
.admin-nav-link:hover:not(:disabled) {
  background: rgba(231, 239, 228, 0.08);
  color: #fff;
}
.admin-nav-link.active {
  background: rgba(231, 239, 228, 0.15);
  color: #fff;
  border-left-color: #8FD1A8;
}
.admin-nav-link.active svg {
  color: #8FD1A8;
  opacity: 1;
}
.admin-nav-badge {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.admin-nav-badge.danger {
  background: #E57373;
  color: #fff;
}
.admin-nav-badge.warn {
  background: #F59E0B;
  color: #fff;
}

.admin-sidebar-footer {
  padding: 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 31, 24, 0.35);
  display: flex;
  align-items: center;
  gap: 11px;
}
.admin-mini-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #E7EFE4;
  color: #1C3A2E;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.admin-mini-meta {
  flex: 1;
  min-width: 0;
}
.admin-mini-meta strong {
  display: block;
  font-size: 12.5px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-mini-meta span {
  display: block;
  font-size: 10.5px;
  color: #9AB5A4;
}
.admin-logout-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: #F2B8B5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-logout-icon:hover {
  background: rgba(229, 115, 115, 0.18);
}

/* ---- Vùng Main Workspace & Top Navbar ---- */
.admin-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.admin-topbar {
  height: 76px;
  background: var(--white);
  border-bottom: 1px solid #E7E9E6;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 35;
}
.admin-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}
.admin-mobile-toggle {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  align-items: center;
  justify-content: center;
}
.admin-search-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F5F5F7;
  border: 1px solid #E7E9E6;
  border-radius: 999px;
  height: 42px;
  padding: 0 16px;
  width: min(380px, 100%);
}
.admin-search-pill svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
}
.admin-search-pill input {
  border: 0;
  background: transparent;
  outline: none;
  width: 100%;
  font-size: 13px;
  color: var(--ink);
}
.admin-topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.admin-Quick-links {
  display: flex;
  gap: 8px;
}
.admin-Quick-link {
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.admin-Quick-link:hover {
  background: var(--sage);
  border-color: #C5D6C1;
}
.admin-Quick-link.active-mode {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.admin-notif-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-notif-dot {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E53935;
  border: 1.5px solid #fff;
}
.admin-top-divider {
  width: 1px;
  height: 26px;
  background: var(--line);
}
.admin-user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.admin-user-chip .chip-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}

/* ---- Nội dung Workspace ---- */
.admin-content {
  padding: 28px;
  flex: 1;
}
.admin-view-section {
  display: none;
  animation: fadeInError 0.2s ease;
}
.admin-view-section.active {
  display: block;
}
.admin-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.admin-page-header h1 {
  font-size: 28px;
  letter-spacing: -0.035em;
  color: #14241B;
}
.admin-page-header p {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

/* ---- Hàng Stat Cards (4 cột hoặc 8 thẻ) ---- */
.stat-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--white);
  border: 1px solid #E7E9E6;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.stat-card:hover {
  transform: translateY(-2px);
  border-color: #C7D6C3;
}
.stat-card.warn-border {
  border-color: #F3DFB3;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF8 100%);
}
.stat-card.danger-border {
  border-color: #F2D2CE;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFBFB 100%);
}
.stat-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.stat-icon-circle {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #E7EFE4;
  color: #1C3A2E;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-icon-circle svg {
  width: 20px;
  height: 20px;
}
.stat-icon-circle.amber { background: #FFF2D9; color: #B8860B; }
.stat-icon-circle.blue { background: #E3F0FF; color: #2B6CB0; }
.stat-icon-circle.red { background: #FBECEB; color: #B56A5A; }

.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}
.stat-trend.up {
  background: #E2EFE4;
  color: #285F45;
}
.stat-trend.down {
  background: #FBECEB;
  color: #B56A5A;
}
.stat-value {
  font-size: 26px;
  font-weight: 800;
  color: #14241B;
  letter-spacing: -0.04em;
  line-height: 1.1;
}
.stat-label {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 500;
}

/* ---- Card trắng chuẩn Argon Override (Bo góc 20px) ---- */
.admin-card {
  background: var(--white);
  border: 1px solid #E7E9E6;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
  margin-bottom: 24px;
}
.admin-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.admin-card-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: #14241B;
}
.admin-card-header p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
.admin-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-input,
.admin-select {
  height: 40px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  font-size: 12.5px;
  color: var(--ink);
}
.admin-input:focus,
.admin-select:focus {
  border-color: var(--green);
  outline: none;
}

/* ---- Grid Biểu đồ (65% / 35% và 50% / 50%) ---- */
.charts-row-65-35 {
  display: grid;
  grid-template-columns: 1.85fr 1fr;
  gap: 22px;
  margin-bottom: 24px;
}
.charts-row-50-50 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 24px;
}
.chart-canvas-wrap {
  position: relative;
  width: 100%;
  height: 290px;
}
.chart-canvas-wrap.sm {
  height: 240px;
}
.period-toggle-group {
  display: inline-flex;
  background: #F2F5F0;
  padding: 3px;
  border-radius: 10px;
  gap: 3px;
}
.period-toggle-group button {
  border: 0;
  background: transparent;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}
.period-toggle-group button.active {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* ---- Cột Hành động trong Bảng Admin ---- */
.action-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.status-select-inline {
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--white);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.status-select-inline:hover {
  border-color: var(--green);
}
.icon-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.icon-action-btn:hover {
  background: var(--sage);
  color: var(--green);
  border-color: #C2D4BE;
}
.icon-action-btn.danger:hover {
  background: #FBECEB;
  color: var(--danger);
  border-color: #F2D2CE;
}
.low-stock-alert {
  color: #D32F2F;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ---- Quản lý Đánh giá (Reviews Card — Ưu tiên 1-2 sao) ---- */
.reviews-list-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.review-item-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  transition: box-shadow 0.2s;
}
.review-item-card.low-rating {
  border-left: 4px solid #E57373;
  background: #FFFCFC;
}
.review-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.review-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.review-stars {
  color: #F59E0B;
  font-size: 13px;
  letter-spacing: 1px;
}
.review-stars.low {
  color: #D32F2F;
}
.review-content-text {
  font-size: 13.5px;
  color: var(--ink);
  margin: 8px 0 14px;
  line-height: 1.6;
}
.review-reply-box {
  background: #F7F8F6;
  border-left: 3px solid var(--green);
  padding: 12px 15px;
  border-radius: 0 10px 10px 0;
  font-size: 12.5px;
  color: var(--text);
}
.review-reply-box strong {
  display: block;
  color: var(--green-dark);
  font-size: 11.5px;
  margin-bottom: 3px;
}
.review-reply-form {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  align-items: flex-start;
}
.review-reply-form textarea {
  flex: 1;
  min-height: 44px;
  height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 12.5px;
  resize: vertical;
}

/* ---- Giao diện Tin nhắn / Chat 2 cột (Messenger / Zalo OA style) ---- */
.chat-workspace {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  height: calc(100vh - 165px);
  min-height: 520px;
  background: var(--white);
  border: 1px solid #E7E9E6;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
}
.chat-sidebar-list {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  background: #FAFBFA;
}
.chat-sidebar-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chat-conv-items {
  flex: 1;
  overflow-y: auto;
}
.chat-conv-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #EEF1EC;
  cursor: pointer;
  transition: background 0.15s;
}
.chat-conv-item:hover {
  background: #F1F5EF;
}
.chat-conv-item.active {
  background: #E7EFE4;
}
.chat-conv-info {
  flex: 1;
  min-width: 0;
}
.chat-conv-info strong {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink);
}
.chat-conv-info strong small {
  font-weight: 400;
  font-size: 10.5px;
  color: var(--muted);
}
.chat-conv-info p {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
}
.unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}

.chat-main-window {
  display: flex;
  flex-direction: column;
  background: var(--white);
}
.chat-window-header {
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.chat-messages-scroll {
  flex: 1;
  padding: 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #FBFDFB;
}
.chat-bubble {
  max-width: 72%;
  padding: 11px 15px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.5;
  position: relative;
}
.chat-bubble.customer {
  align-self: flex-start;
  background: #F0F3EE;
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.chat-bubble.seller {
  align-self: flex-end;
  background: #1C3A2E;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-bubble small {
  display: block;
  font-size: 10px;
  opacity: 0.7;
  margin-top: 4px;
  text-align: right;
}
.chat-input-bar {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 10px;
  background: var(--white);
}
.chat-input-bar input {
  flex: 1;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #F5F5F7;
  font-size: 13px;
}
.chat-input-bar input:focus {
  background: var(--white);
  border-color: var(--green);
  outline: none;
}

/* ---- Modal 2 cột Thêm/Sửa sản phẩm & Slide-over Drawer Khách hàng ---- */
.admin-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 36, 27, 0.48);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}
.admin-modal-backdrop.open {
  display: flex;
}
.admin-modal-box {
  background: var(--white);
  border-radius: 20px;
  border: 1px solid var(--line);
  width: min(760px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
  animation: fadeInError 0.2s ease;
}
.admin-modal-header {
  padding: 20px 26px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-modal-header h3 {
  font-size: 18px;
}
.admin-modal-body {
  padding: 24px 26px;
}
.modal-product-grid {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 24px;
}
.upload-dropzone {
  border: 2px dashed #B9C8B5;
  border-radius: 16px;
  background: #F7F9F5;
  padding: 24px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 240px;
  color: var(--muted);
  cursor: pointer;
}
.upload-dropzone:hover {
  border-color: var(--green);
  background: var(--sage);
}
.admin-modal-footer {
  padding: 16px 26px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Slide-over Drawer bên phải cho trang Khách hàng */
.slide-over-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 36, 27, 0.4);
  z-index: 105;
  display: none;
  justify-content: flex-end;
}
.slide-over-backdrop.open {
  display: flex;
}
.slide-over-panel {
  width: min(460px, 100vw);
  height: 100vh;
  background: var(--white);
  padding: 26px;
  overflow-y: auto;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---- Responsive cho Admin & Seller Dashboard ---- */
@media (max-width: 1100px) {
  .admin-shell {
    grid-template-columns: 1fr;
  }
  .admin-sidebar {
    position: fixed;
    left: -270px;
    top: 0;
    bottom: 0;
    width: 260px;
    transition: left 0.25s ease;
  }
  .admin-sidebar.mobile-open {
    left: 0;
  }
  .admin-mobile-toggle {
    display: inline-flex;
  }
  .stat-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .charts-row-65-35,
  .charts-row-50-50 {
    grid-template-columns: 1fr;
  }
  .chat-workspace {
    grid-template-columns: 240px 1fr;
  }
}

@media (max-width: 600px) {
  .admin-content {
    padding: 16px;
  }
  .admin-topbar {
    padding: 0 16px;
  }
  .admin-Quick-links {
    display: none;
  }
  .stat-cards-grid {
    grid-template-columns: 1fr;
  }
  .modal-product-grid {
    grid-template-columns: 1fr;
  }
  .chat-workspace {
    grid-template-columns: 1fr;
    height: auto;
  }
  .chat-sidebar-list {
    max-height: 220px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* ==========================================================================
   UI/UX POLISH: TYPOGRAPHY TO RÕ, HOVER TINH TẾ & FIX LOGO SIDEBAR (ADMIN & SELLER)
   ========================================================================== */

.admin-shell {
  grid-template-columns: 272px minmax(0, 1fr);
  background: #F4F6F3;
  font-size: 15px;
}

/* 1. Fix dứt điểm Logo góc trên bên trái không bao giờ rớt thành 2 dòng */
.admin-sidebar-brand {
  height: 78px !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.admin-sidebar-brand .brand-symbol {
  width: 36px !important;
  height: 40px !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
}
.admin-sidebar-brand strong {
  font-size: 21px !important;
  font-weight: 800 !important;
  letter-spacing: -0.8px !important;
  color: #FFFFFF !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 5px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
.admin-sidebar-brand strong span {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #98D8B1 !important;
  letter-spacing: -0.2px !important;
}
.admin-badge-tag {
  margin-left: auto !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  background: rgba(152, 216, 177, 0.16) !important;
  color: #B4E6C7 !important;
  border: 1px solid rgba(152, 216, 177, 0.28) !important;
  flex-shrink: 0 !important;
}

/* 2. Menu Sidebar: Chữ to rõ hơn + Hiệu ứng trượt nhẹ sang phải khi Hover */
.admin-nav-group-label {
  font-size: 10.5px !important;
  letter-spacing: 0.14em !important;
  color: rgba(231, 239, 228, 0.55) !important;
  padding: 14px 14px 6px !important;
}
.admin-nav-link {
  padding: 12px 15px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: rgba(242, 246, 236, 0.82) !important;
  border-radius: 12px !important;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
              background-color 0.2s ease,
              color 0.2s ease,
              box-shadow 0.2s ease !important;
}
.admin-nav-link svg {
  width: 19px !important;
  height: 19px !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
}
.admin-nav-link:hover:not(:disabled) {
  background: rgba(231, 239, 228, 0.12) !important;
  color: #FFFFFF !important;
  transform: translateX(4px) !important;
}
.admin-nav-link:hover:not(:disabled) svg {
  transform: scale(1.1) !important;
  color: #98D8B1 !important;
}
.admin-nav-link.active {
  background: linear-gradient(90deg, rgba(152, 216, 177, 0.22) 0%, rgba(231, 239, 228, 0.08) 100%) !important;
  color: #FFFFFF !important;
  border-left: 3.5px solid #8FD1A8 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}

/* 3. Stat Cards (KPI Cards): Số to sắc nét, Hover nổi lên + Đổi màu Icon tinh tế */
.stat-card {
  padding: 22px 24px !important;
  border-radius: 18px !important;
  border: 1px solid #DFE6DC !important;
  background: #FFFFFF !important;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.22s ease,
              border-color 0.22s ease !important;
  cursor: default;
}
.stat-card:hover {
  transform: translateY(-4px) scale(1.01) !important;
  border-color: #285F45 !important;
  box-shadow: 0 16px 36px rgba(28, 58, 46, 0.09) !important;
}
.stat-icon-circle {
  width: 46px !important;
  height: 46px !important;
  border-radius: 13px !important;
  transition: transform 0.22s ease, background-color 0.22s ease, color 0.22s ease !important;
}
.stat-icon-circle svg {
  width: 22px !important;
  height: 22px !important;
}
.stat-card:hover .stat-icon-circle {
  transform: scale(1.08) rotate(-3deg) !important;
  background: #1C3A2E !important;
  color: #FFFFFF !important;
}
.stat-value {
  font-size: 29px !important;
  font-weight: 800 !important;
  color: #14241B !important;
  letter-spacing: -0.04em !important;
  margin-top: 2px !important;
  transition: color 0.2s ease !important;
}
.stat-card:hover .stat-value {
  color: #285F45 !important;
}
.stat-label {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #5A6960 !important;
}
.stat-trend {
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
}

/* 4. Admin Cards & Headings: Chữ rõ ràng, khoảng cách thoáng */
.admin-card {
  padding: 26px 28px !important;
  border-radius: 20px !important;
  border: 1px solid #DFE6DC !important;
  transition: box-shadow 0.22s ease, border-color 0.22s ease !important;
}
.admin-card:hover {
  border-color: #C5D4C1 !important;
  box-shadow: 0 14px 34px rgba(24, 48, 35, 0.05) !important;
}
.admin-card-header h2 {
  font-size: 19.5px !important;
  font-weight: 800 !important;
  color: #14241B !important;
  letter-spacing: -0.03em !important;
}
.admin-card-header p {
  font-size: 13px !important;
  color: #64736A !important;
}

/* 5. Bảng dữ liệu (Tables): Chữ to hơn (14px), dòng hover nổi bật sắc nét */
.mobi-table th {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  padding: 14px 16px !important;
  color: #4E5E54 !important;
  background: #F4F7F2 !important;
}
.mobi-table td {
  font-size: 14px !important;
  padding: 16px 16px !important;
  transition: background-color 0.15s ease !important;
}
.mobi-table tbody tr {
  transition: transform 0.15s ease, background-color 0.15s ease !important;
}
.mobi-table tbody tr:hover td {
  background: #F1F6EF !important;
}
.order-id-cell {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: #1C3A2E !important;
}
.order-total-cell {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: #1F4E37 !important;
}

/* 6. Nút bấm, Pills, Dropdowns khi Hover */
.order-filter-pills button,
.period-toggle-group button,
.admin-Quick-link,
.table-action-link,
.status-select-inline,
.icon-action-btn {
  font-size: 12.5px !important;
  transition: all 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.order-filter-pills button:hover:not(.active),
.admin-Quick-link:hover:not(.active-mode),
.table-action-link:hover,
.icon-action-btn:hover {
  transform: translateY(-1.5px) !important;
  box-shadow: 0 4px 12px rgba(28, 58, 46, 0.08) !important;
}
.status-select-inline {
  height: 36px !important;
  padding: 0 10px !important;
  font-size: 12.5px !important;
  border-radius: 9px !important;
}
.status-select-inline:hover {
  border-color: #285F45 !important;
  background: #F6FAF5 !important;
}

.order-mini-list::-webkit-scrollbar {
  width: 8px; /* Giúp thanh cuộn mảnh và tinh tế hơn */
}

.order-mini-list::-webkit-scrollbar-track {
  background: transparent; /* Giúp nền thanh cuộn hòa vào màu nền xám nhạt của panel */
}

.order-mini-list::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15); /* Màu thanh cuộn mờ nhã nhặn */
  border-radius: 10px; /* Bo tròn mượt mà */
  transition: background-color 0.2s ease;
}

/* Hiệu ứng khi rê chuột vào thanh cuộn sẽ đậm lên một chút */
.order-mini-list::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3); 
}::-webkit-scrollbar {
  width: 8px; /* Giúp thanh cuộn mảnh và tinh tế hơn */
}

.order-mini-list::-webkit-scrollbar {
  width: 8px; /* Giúp thanh cuộn mảnh và tinh tế hơn */
}

.order-mini-list::-webkit-scrollbar-track {
  background: transparent; /* Giúp nền thanh cuộn hòa vào màu nền xám nhạt của panel */
}

.order-mini-list::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15); /* Màu thanh cuộn mờ nhã nhặn */
  border-radius: 10px; /* Bo tròn mượt mà */
  transition: background-color 0.2s ease;
}

/* Hiệu ứng khi rê chuột vào thanh cuộn sẽ đậm lên một chút */
.order-mini-list::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3); 
}::-webkit-scrollbar-track {
  background: transparent; /* Giúp nền thanh cuộn hòa vào màu nền xám nhạt của panel */
}

.order-mini-list::-webkit-scrollbar {
  width: 8px; /* Giúp thanh cuộn mảnh và tinh tế hơn */
}

.order-mini-list::-webkit-scrollbar-track {
  background: transparent; /* Giúp nền thanh cuộn hòa vào màu nền xám nhạt của panel */
}

.order-mini-list::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15); /* Màu thanh cuộn mờ nhã nhặn */
  border-radius: 10px; /* Bo tròn mượt mà */
  transition: background-color 0.2s ease;
}

/* Hiệu ứng khi rê chuột vào thanh cuộn sẽ đậm lên một chút */
.order-mini-list::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3); 
}::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15); /* Màu thanh cuộn mờ nhã nhặn */
  border-radius: 10px; /* Bo tròn mượt mà */
  transition: background-color 0.2s ease;
}

/* Hiệu ứng khi rê chuột vào thanh cuộn sẽ đậm lên một chút */
.order-mini-list::-webkit-scrollbar {
  width: 8px; /* Giúp thanh cuộn mảnh và tinh tế hơn */
}

.order-mini-list::-webkit-scrollbar-track {
  background: transparent; /* Giúp nền thanh cuộn hòa vào màu nền xám nhạt của panel */
}

.order-mini-list::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15); /* Màu thanh cuộn mờ nhã nhặn */
  border-radius: 10px; /* Bo tròn mượt mà */
  transition: background-color 0.2s ease;
}

/* Hiệu ứng khi rê chuột vào thanh cuộn sẽ đậm lên một chút */
.order-mini-list::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3); 
}::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3); 
}