/* ================================================================
   SantaMarket — MẪU LANDING TỔNG QUÁT (design-system)
   Bản "Chợ tươi cao cấp" (hội đồng thiết kế chọn 12/07/2026),
   đã áp 6 fix giám đốc: footer KEM · hero KHÔNG chấm trang trí ·
   squircle stroke đậm · giá LÀM MỜ "Giá dự kiến" · fix lề mobile ·
   logo THẬT. Brand cam ấm bám app santapocket. Mobile-first.
   Đổi "vỏ" theo nhãn chỉ bằng các biến --brand* ở :root.
   ================================================================ */

/* -------- TOKEN BRAND (khớp theme app thật) -------- */
:root{
  --brand:        #ED761D;   /* cam Market */
  --brand-2:      #FBAD1B;   /* cam-vàng */
  --brand-strong: #E19300;   /* cam đậm */
  --grad-a:       #FAB427;
  --grad-b:       #EE771D;
  --grad-c:       #E52921;
  --grad-sign:    linear-gradient(135deg, var(--grad-a) 0%, var(--grad-b) 52%, var(--grad-c) 100%);
  --grad-hero:    linear-gradient(150deg, #FBB03B 0%, #F79420 40%, #ED761D 72%, #E5541B 100%);
  --grad-cream:   linear-gradient(160deg, #FFF6E4 0%, #FFE9CB 100%);

  --paper:   #FFF7E9;
  --paper-2: #FFFAEE;
  --card:    #FFFFFF;
  --tint:    #FFEDDF;
  --tint-2:  #FFF7E5;
  --ink:     #15171C;
  --body:    #3A3D44;
  --muted:   #808893;
  --line:    #EFE7DA;

  --ok:      #2FAF09;
  --danger:  #ED2330;

  --r-xl: 26px;
  --r-lg: 20px;
  --r-md: 16px;
  --r-btn: 15px;
  --sh-sm: 0 2px 8px rgba(31,20,8,.06);
  --sh-md: 0 8px 24px rgba(31,20,8,.08);
  --sh-lg: 0 18px 48px rgba(214,96,20,.16);
  --sh-glow: 0 14px 34px rgba(237,118,29,.30);

  --max: 1080px;
  --gutter: clamp(16px, 4vw, 28px);

  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
#dang-ky,#hang,#nhan-hang{ scroll-margin-top:80px; }
body{
  margin:0;
  color:var(--body);
  background:var(--paper);
  line-height:1.55;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
h1,h2,h3,h4{ color:var(--ink); font-weight:800; letter-spacing:-.02em; line-height:1.15; margin:0; }
:focus-visible{ outline:3px solid var(--brand); outline-offset:2px; border-radius:8px; }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brand);
}
.section{ padding:clamp(38px,7vw,64px) 0; }
.section-head{ max-width:640px; margin:0 0 clamp(20px,4vw,32px); }
.section-head h2{ font-size:clamp(1.5rem,4.6vw,2.05rem); margin:.5rem 0 .5rem; }
.section-head p{ margin:0; color:var(--muted); font-size:1.02rem; }
.muted{ color:var(--muted); }
.err{ color:var(--danger); font-weight:600; }

/* ---------- Nút ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:none; border-radius:var(--r-btn);
  padding:13px 22px; font-weight:700; font-size:.98rem; letter-spacing:-.01em;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
  white-space:nowrap;
}
.btn svg{ width:19px; height:19px; }
.btn-primary,.btn.primary{ background:var(--grad-sign); color:#fff; box-shadow:var(--sh-glow); }
.btn-primary:hover,.btn.primary:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(237,118,29,.38); }
.btn-primary:active{ transform:translateY(0); }
.btn-ghost,.btn.ghost{ background:#fff; color:var(--brand); border:1.5px solid var(--tint); box-shadow:var(--sh-sm); }
.btn-ghost:hover,.btn.ghost:hover{ border-color:var(--brand); background:var(--tint-2); }
.btn-sm,.btn.sm{ padding:9px 15px; font-size:.86rem; border-radius:12px; }
.btn-block,.btn.lg{ width:100%; padding:16px; font-size:1.05rem; }

/* ================= HEADER ================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,251,244,.86);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.header-in{ display:flex; align-items:center; gap:14px; height:64px; }
.logo{ display:flex; align-items:center; flex-shrink:0; }
.logo img{ height:30px; width:auto; }
.locpill{
  display:inline-flex; align-items:center; gap:8px;
  margin-left:auto;
  max-width:min(46vw,280px);
  padding:8px 14px; border-radius:999px;
  background:#fff; border:1px solid var(--line);
  box-shadow:var(--sh-sm);
  color:var(--ink); font-weight:600; font-size:.86rem;
  overflow:hidden;
}
.locpill .ic-pin{ color:var(--brand); flex-shrink:0; display:inline-flex; }
.locpill .ic-pin svg{ width:18px; height:18px; }
.locpill .loc-label{ color:var(--muted); font-weight:600; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; display:block; line-height:1.1; }
.locpill .loc-text{ display:block; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.locpill .loc-stack{ min-width:0; }
.header-cta{ flex-shrink:0; }
@media(max-width:560px){
  .locpill .loc-label{ display:none; }
  .header-cta .btn{ display:none; }
}

/* ================= HERO (KHÔNG chấm trang trí — fix #2) ========= */
.hero{ padding:clamp(20px,4vw,34px) 0 8px; }
.hero-card{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  background:var(--grad-hero);
  box-shadow:var(--sh-lg);
  padding:clamp(28px,6vw,52px);
  color:#fff;
  isolation:isolate;
}
.hero-card::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 90% at 12% 8%, rgba(255,255,255,.34), transparent 46%),
    radial-gradient(90% 80% at 100% 106%, rgba(190,32,10,.36), transparent 55%);
}
.hero-badge{
  display:inline-flex; align-items:center; gap:7px;
  background:#FFF4E0; color:#C24E10;
  font-weight:800; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  padding:7px 13px; border-radius:999px;
  box-shadow:0 2px 8px rgba(120,50,0,.18);
}
.hero-badge svg{ width:14px; height:14px; }
.hero-card h1{
  color:#fff; margin:18px 0 12px;
  font-size:clamp(1.85rem,6.4vw,3rem);
  line-height:1.08; letter-spacing:-.03em;
  text-shadow:0 2px 14px rgba(150,50,0,.22);
  max-width:16ch;
}
.hero-sub{ color:rgba(255,255,255,.96); font-size:clamp(1rem,2.6vw,1.18rem); margin:0 0 22px; max-width:36ch; font-weight:500; }
.hero-sub b{ font-weight:800; color:#fff; }
.hero-points{ list-style:none; padding:0; margin:0 0 26px; display:grid; gap:10px; }
.hero-points li{ display:flex; align-items:center; gap:11px; font-weight:600; color:#fff; font-size:.98rem; }
.hero-points .tick{
  flex-shrink:0; width:24px; height:24px; border-radius:8px;
  background:rgba(255,255,255,.22); display:grid; place-items:center;
}
.hero-points .tick svg{ width:15px; height:15px; color:#fff; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.hero-actions .btn-primary{ background:#fff; color:var(--grad-c); box-shadow:0 10px 26px rgba(120,40,0,.28); }
.hero-actions .btn-primary:hover{ background:#fff; box-shadow:0 16px 34px rgba(120,40,0,.34); }
.hero-actions .btn-ghost{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.5); box-shadow:none; }
.hero-actions .btn-ghost:hover{ background:rgba(255,255,255,.24); border-color:#fff; }
.hero-note{ font-size:.82rem; color:rgba(255,255,255,.92); margin:14px 0 0; display:flex; align-items:center; gap:7px; }
.hero-note svg{ width:15px; height:15px; opacity:.9; flex-shrink:0; }

/* thẻ TRẮNG nổi đè hero (kiểu "ví") */
.hero-float{
  position:relative; z-index:2;
  margin:-30px clamp(8px,3vw,20px) 0;
  background:#fff; border-radius:var(--r-lg);
  box-shadow:var(--sh-md);
  padding:16px 18px;
  display:flex; align-items:center; gap:14px;
}
.hero-float .hf-ic{
  flex-shrink:0; width:46px; height:46px; border-radius:14px;
  background:var(--grad-sign); display:grid; place-items:center; color:#fff;
  box-shadow:var(--sh-glow);
}
.hero-float .hf-ic svg{ width:24px; height:24px; }
.hero-float .hf-body{ min-width:0; }
.hero-float .hf-title{ font-weight:800; color:var(--ink); font-size:.98rem; }
.hero-float .hf-desc{ color:var(--muted); font-size:.84rem; }
.hero-float .hf-act{ margin-left:auto; flex-shrink:0; }
/* fix #6: mobile — nút xuống hàng thì DÀN FULL, không hack lề */
@media(max-width:520px){
  .hero-float{ flex-wrap:wrap; }
  .hero-float .hf-body{ flex:1 1 60%; }
  .hero-float .hf-act{ flex-basis:100%; margin-left:0; margin-top:4px; }
  .hero-float .hf-act .btn{ width:100%; }
}

/* ================= DẢI TIN CẬY (squircle) ================= */
.trust{ padding-top:clamp(30px,5vw,44px); }
.trust-grid{
  display:grid; gap:clamp(14px,3vw,22px);
  grid-template-columns:repeat(4,1fr);
}
@media(max-width:720px){ .trust-grid{ grid-template-columns:repeat(2,1fr); } }
.trust-item{ text-align:center; }
.squircle{
  width:66px; height:66px; margin:0 auto 12px;
  border-radius:29%;
  background:var(--grad-sign);
  display:grid; place-items:center; color:#fff;
  box-shadow:var(--sh-glow);
}
.squircle svg{ width:32px; height:32px; }
.trust-item h3{ font-size:1rem; margin:0 0 3px; }
.trust-item p{ margin:0; font-size:.86rem; color:var(--muted); line-height:1.4; }

/* ================= GIỚI THIỆU NHÃN ================= */
.brand-intro .intro-card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-sm);
  padding:clamp(22px,4vw,32px);
  display:flex; gap:clamp(16px,3vw,26px); align-items:center; flex-wrap:wrap;
}
.brand-logo{
  flex-shrink:0; width:76px; height:76px; border-radius:20px;
  background:var(--grad-cream); border:1px solid var(--line);
  display:grid; place-items:center;
  font-weight:800; color:var(--brand); font-size:1.5rem; letter-spacing:-.02em;
  box-shadow:var(--sh-sm);
}
.brand-logo.has-img{ background:#fff; padding:8px; overflow:hidden; }
.brand-logo.has-img img{ width:100%; height:100%; object-fit:contain; }
.brand-intro-body{ flex:1; min-width:220px; }
.brand-intro-body h2{ font-size:clamp(1.3rem,3.4vw,1.7rem); margin:0 0 6px; }
.brand-intro-body p{ margin:0; color:var(--body); }
.brand-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:14px 0 0; }
.brand-tags li{
  background:var(--tint-2); color:var(--brand-strong);
  border:1px solid var(--line);
  font-weight:600; font-size:.8rem; padding:6px 12px; border-radius:999px;
}

/* ================= KHO HÀNG (chuẩn quick-commerce) ============ */
/* Thanh công cụ: ô tìm nổi + chip nhóm hàng cuộn ngang */
.cat-toolbar{ margin:clamp(4px,1.5vw,10px) 0 clamp(14px,2.6vw,20px); display:grid; gap:12px; }
.cat-search{ position:relative; max-width:440px; }
.cat-search-ic{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--muted); display:inline-flex; pointer-events:none; }
.cat-search-ic svg{ width:19px; height:19px; }
.cat-search-input{
  width:100%; border:1.5px solid var(--line); border-radius:999px;
  background:#fff; padding:12px 16px 12px 44px; font-size:.98rem; color:var(--ink);
  box-shadow:var(--sh-sm); transition:border-color .15s ease, box-shadow .15s ease;
  appearance:none; -webkit-appearance:none;
}
.cat-search-input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.cat-search-input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(237,118,29,.14); }
.cat-chips{
  display:flex; gap:9px; overflow-x:auto; padding:2px 2px 6px;
  scrollbar-width:none; -ms-overflow-style:none;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
}
.cat-chips::-webkit-scrollbar{ display:none; }
.cat-chip{
  flex:0 0 auto; scroll-snap-align:start;
  border:1.5px solid var(--line); background:#fff; color:var(--body);
  font-weight:700; font-size:.86rem; padding:8px 15px; border-radius:999px;
  box-shadow:var(--sh-sm); white-space:nowrap;
  transition:transform .14s ease, background .14s ease, color .14s ease, border-color .14s ease;
}
.cat-chip:hover{ border-color:var(--brand); color:var(--brand); }
.cat-chip.is-active{ background:var(--grad-sign); color:#fff; border-color:transparent; box-shadow:var(--sh-glow); }

/* Dải quyền lợi (freeship · voucher · tủ 24/7) — hiện 1 lần cho cả kho */
.cat-perks{ display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 clamp(12px,2.2vw,16px); }
.perk{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.8rem; font-weight:700; color:var(--brand-strong);
  background:var(--tint-2); border:1px solid var(--line);
  padding:6px 12px; border-radius:999px;
}
.perk svg{ width:15px; height:15px; color:var(--brand); }

/* Lưới thẻ — DÀY hơn: ~5-6 cột desktop, 2 cột điện thoại */
.catalog-results{ position:relative; min-height:140px; }
.products-grid{
  display:grid; gap:clamp(10px,1.8vw,16px);
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
}
@media(max-width:520px){ .products-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } }
[aria-busy="true"] .products-grid{ opacity:.85; }

.pcard{
  position:relative; display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden;
  box-shadow:var(--sh-sm);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pcard:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--tint); }
.pthumb{
  position:relative; aspect-ratio:1/1;
  background:#FBF9F5; overflow:hidden;
  display:grid; place-items:center; padding:10px;
}
.pthumb img{ width:100%; height:100%; object-fit:contain; }
.pthumb.noimg{ color:#D9B896; background:linear-gradient(135deg,#FFF7EA,#FFEFDD); }
.pthumb .noimg-ic svg{ width:42px; height:42px; opacity:.7; }
.pcard.soldout .pthumb img{ opacity:.5; filter:grayscale(.4); }

/* Huy hiệu góc ảnh */
.pbadge{
  position:absolute; top:8px; left:8px; z-index:2;
  display:inline-flex; align-items:center; gap:4px;
  font-size:.72rem; font-weight:800; padding:4px 9px; border-radius:999px;
  color:#fff; box-shadow:var(--sh-sm); letter-spacing:-.01em;
}
.pbadge.sale{ background:var(--danger); }
.pbadge.out{ background:rgba(21,23,28,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }

/* Vùng "Thêm vào giỏ" trong thân thẻ: nút "+ Thêm" ↔ bộ đếm "− n +" */
.pcard-cart{ margin-top:9px; }
.pcard-add{
  width:100%; height:38px; border-radius:11px;
  border:1.5px solid var(--tint); background:#fff; color:var(--brand);
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-weight:800; font-size:.86rem; box-shadow:var(--sh-sm);
  transition:transform .14s ease, background .14s ease, border-color .14s ease;
}
.pcard-add svg{ width:17px; height:17px; }
.pcard-add:hover{ border-color:var(--brand); background:var(--tint-2); }
.pcard-add:active{ transform:scale(.97); }

/* Bộ đếm số lượng — dùng chung: thẻ · giỏ · kết quả AI */
.qty{
  display:inline-flex; align-items:center; justify-content:space-between;
  height:38px; border-radius:11px; overflow:hidden;
  background:var(--grad-sign); color:#fff; box-shadow:var(--sh-glow);
}
.pcard-cart .qty{ width:100%; }
.qty-btn{
  width:38px; height:38px; flex-shrink:0; border:none; background:transparent; color:#fff;
  display:grid; place-items:center; transition:transform .12s ease, background .12s ease;
}
.qty-btn svg{ width:17px; height:17px; }
.qty-btn:hover{ background:rgba(255,255,255,.16); }
.qty-btn:active{ transform:scale(.88); }
.qty-n{ font-weight:800; font-size:.95rem; min-width:1.6em; text-align:center; font-variant-numeric:tabular-nums; }

.pbody{ display:flex; flex-direction:column; flex:1; padding:10px 11px 12px; }
.pcard h3{
  font-size:.85rem; font-weight:700; color:var(--ink); line-height:1.3;
  margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.2em;
}
.pfoot{ display:flex; align-items:flex-end; justify-content:space-between; gap:6px; margin-top:auto; padding-top:9px; }
.pprice-wrap{ display:flex; flex-direction:column; gap:0; min-width:0; }
.pprice{ font-weight:800; color:var(--ink); font-size:1rem; letter-spacing:-.02em; white-space:nowrap; }
.pprice.muted{ color:var(--muted); font-weight:700; font-size:.9rem; }
.pprice .cur{ font-size:.72em; color:var(--brand); font-weight:800; margin-left:1px; }
.pprice-old{ font-size:.74rem; color:var(--muted); text-decoration:line-through; white-space:nowrap; }
.psold{ font-size:.7rem; color:var(--muted); white-space:nowrap; flex-shrink:0; }

/* Khung xương khi tải (đổi nhóm/tìm) */
.pcard-sk{ border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--card); }
.pcard-sk .sk-img, .pcard-sk .sk-l{
  background:linear-gradient(90deg,#F3EADF 25%,#FBF3E8 37%,#F3EADF 63%);
  background-size:400% 100%; animation:sk 1.3s ease-in-out infinite;
}
.pcard-sk .sk-img{ aspect-ratio:1/1; }
.pcard-sk .sk-l{ height:11px; margin:11px 11px 0; border-radius:6px; }
.pcard-sk .sk-l.short{ width:55%; margin-bottom:14px; }
@keyframes sk{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }

/* ── Nút giỏ trên header (chế độ cửa hàng) ── */
.header-cart{
  position:relative; width:42px; height:42px; border-radius:12px;
  border:1.5px solid var(--tint); background:#fff; color:var(--brand);
  display:grid; place-items:center; box-shadow:var(--sh-sm);
  transition:border-color .14s ease, background .14s ease;
}
.header-cart:hover{ border-color:var(--brand); background:var(--tint-2); }
.header-cart svg{ width:21px; height:21px; }
.header-cart-badge{
  position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; padding:0 5px;
  border-radius:999px; background:var(--danger); color:#fff;
  font-size:.68rem; font-weight:800; line-height:19px; text-align:center;
  box-shadow:0 2px 6px rgba(210,30,40,.4);
}
.header-cart-badge[hidden]{ display:none; }

/* ── Thanh giỏ nổi đáy (hiện khi giỏ có ≥ 1 món) ── */
.cart-tray{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(16px + env(safe-area-inset-bottom)); z-index:65;
  max-width:calc(100vw - 28px); width:min(440px,calc(100vw - 28px));
  animation:tray-in .22s ease;
}
.cart-tray[hidden]{ display:none; }
.cart-tray-btn{
  width:100%; display:flex; align-items:center; gap:12px;
  background:var(--grad-sign); color:#fff; border:none; border-radius:999px;
  box-shadow:var(--sh-lg); padding:10px 18px 10px 14px;
}
.cart-tray-btn .ct-ic{ position:relative; display:inline-flex; }
.cart-tray-btn .ct-ic svg{ width:24px; height:24px; }
.ct-badge{
  position:absolute; top:-7px; right:-8px; min-width:19px; height:19px; padding:0 5px;
  border-radius:999px; background:#fff; color:var(--grad-c);
  font-size:.68rem; font-weight:800; line-height:19px; text-align:center;
}
.ct-stack{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; }
.ct-count{ font-size:.74rem; font-weight:600; opacity:.94; }
.ct-total{ font-size:1rem; font-weight:800; font-variant-numeric:tabular-nums; }
.ct-go{ margin-left:auto; display:inline-flex; align-items:center; gap:3px; font-weight:800; font-size:.9rem; white-space:nowrap; }
.ct-go svg{ width:16px; height:16px; transform:rotate(-90deg); }
@keyframes tray-in{ from{ opacity:0; transform:translate(-50%,12px); } to{ opacity:1; transform:translate(-50%,0); } }
@media(max-width:760px){ .cart-tray{ bottom:calc(16px + env(safe-area-inset-bottom)); } }
/* Có món trong giỏ → thanh giỏ THAY thanh CTA đáy (khỏi chồng 2 thanh) */
body.has-cart .mobile-cta{ display:none; }
body.modal-open{ overflow:hidden; }

/* Chip "món quan tâm" trong form đăng ký */
.interest-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }
.interest-chips[hidden]{ display:none; }
.ichip{
  display:inline-flex; align-items:center; gap:4px;
  background:var(--tint-2); color:var(--brand-strong); border:1px solid var(--line);
  font-weight:600; font-size:.8rem; padding:5px 6px 5px 11px; border-radius:999px;
}
.ichip-x{
  border:none; background:rgba(0,0,0,.07); color:var(--body);
  width:18px; height:18px; border-radius:50%; line-height:1; font-size:.9rem;
  display:grid; place-items:center; padding:0;
}
.ichip-x:hover{ background:var(--danger); color:#fff; }

.empty-box{
  background:var(--paper-2); border:1px dashed var(--line);
  border-radius:var(--r-lg); padding:clamp(24px,5vw,36px);
  text-align:center; margin-top:6px;
}
.empty-box p{ margin:0 0 6px; }

/* ================= NHẬN HÀNG THẾ NÀO ================= */
.how{ background:var(--paper-2); }
.steps{
  list-style:none; padding:0; margin:0;
  display:grid; gap:clamp(14px,2.6vw,22px);
  grid-template-columns:repeat(3,1fr);
}
@media(max-width:760px){ .steps{ grid-template-columns:1fr; } }
.step{
  position:relative;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:24px 22px 22px;
  box-shadow:var(--sh-sm);
}
.step-n{
  width:44px; height:44px; border-radius:14px;
  background:var(--grad-sign); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:1.15rem;
  box-shadow:var(--sh-glow); margin-bottom:16px;
}
.step h3{ font-size:1.12rem; margin:0 0 7px; }
.step p{ margin:0; color:var(--body); font-size:.94rem; }
@media(min-width:761px){
  .step:not(:last-child)::after{
    content:""; position:absolute; top:46px; right:-13px; width:26px; height:2px;
    background:repeating-linear-gradient(90deg,var(--brand-2) 0 6px,transparent 6px 11px);
  }
}

/* ================= ĐĂNG KÝ QUAN TÂM ================= */
.signup-card{
  background:var(--grad-cream);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-md);
  padding:clamp(24px,5vw,44px);
  display:grid; gap:clamp(24px,4vw,44px);
  grid-template-columns:1.05fr 1fr;
  align-items:center;
}
@media(max-width:820px){ .signup-card{ grid-template-columns:1fr; } }
.signup-copy .eyebrow{ color:var(--grad-c); }
.signup-copy h2{ font-size:clamp(1.5rem,4.4vw,2rem); margin:.4rem 0 .6rem; }
.signup-copy p{ margin:0; color:var(--body); font-size:1.02rem; }
.signup-copy .free-tags{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px; }
.signup-copy .free-tags li{ display:flex; align-items:flex-start; gap:10px; font-weight:600; color:var(--ink); font-size:.94rem; }
.signup-copy .free-tags svg{ width:20px; height:20px; color:var(--ok); flex-shrink:0; margin-top:1px; }

.form-card{ background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-sm); padding:clamp(20px,3.5vw,28px); }
.field{ margin-bottom:16px; }
.field > label{ display:block; font-weight:700; color:var(--ink); font-size:.9rem; margin-bottom:7px; }
.field .req{ color:var(--danger); }
.field .opt{ color:var(--muted); font-weight:500; font-size:.85em; }
.phone-input{
  display:flex; align-items:stretch;
  border:1.5px solid var(--line); border-radius:var(--r-btn);
  background:#fff; overflow:hidden;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.phone-input:focus-within{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(237,118,29,.14); }
.cc-chip{
  display:flex; align-items:center; gap:5px;
  padding:0 13px; background:var(--tint-2); color:var(--ink);
  font-weight:700; font-size:.95rem; border-right:1px solid var(--line);
  flex-shrink:0;
}
.cc-chip svg{ width:13px; height:13px; color:var(--muted); }
.phone-input input{
  flex:1; min-width:0; border:none; outline:none; background:transparent;
  padding:14px 14px; font-size:1rem; color:var(--ink);
}
.txt-input, .sel-input{
  width:100%; border:1.5px solid var(--line); border-radius:var(--r-btn);
  background:#fff; padding:14px; font-size:1rem; color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
  appearance:none; -webkit-appearance:none;
}
.txt-input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(237,118,29,.14); }
.sel-input{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23808893' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:42px;
}
.sel-input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(237,118,29,.14); }
.sel-input.sm{ padding:8px 34px 8px 12px; font-size:.85rem; border-radius:10px; }
.field-hint{ font-size:.8rem; color:var(--muted); margin:7px 0 0; }
.otp-send{ margin-top:10px; }
.form-foot-note{ font-size:.82rem; color:var(--muted); margin:12px 0 0; text-align:center; display:flex; align-items:center; justify-content:center; gap:6px; }
.form-foot-note svg{ width:14px; height:14px; color:var(--brand); flex-shrink:0; }
/* thông báo kết quả (app.js .form-msg + lớp ok/err) */
.form-msg{ margin:12px 0 0; font-size:.92rem; text-align:center; font-weight:600; }
.form-msg:empty{ display:none; }
.form-msg.ok{ color:var(--ok); }
.form-msg.err{ color:var(--danger); }
/* honeypot chống bot — ẩn khỏi mắt & bàn phím */
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none; }

/* ================= FAQ ================= */
.faq-list{ display:grid; gap:12px; max-width:760px; }
.faq{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-sm);
}
.faq summary{
  list-style:none; cursor:pointer;
  padding:18px 52px 18px 20px; position:relative;
  font-weight:700; color:var(--ink); font-size:1.01rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:20px; top:20px;
  width:18px; height:18px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ED761D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center/contain no-repeat;
  transition:transform .2s ease;
}
.faq[open] summary::after{ transform:rotate(180deg); }
.faq .faq-body{ padding:0 20px 18px; color:var(--body); font-size:.95rem; }

/* ================= FOOTER (fix #1: KEM, không tối) ============= */
.site-footer{
  background:var(--grad-cream);
  border-top:1px solid var(--line);
  color:var(--body);
  padding:clamp(32px,5vw,48px) 0 clamp(28px,4vw,40px);
  margin-top:clamp(30px,5vw,50px);
}
.footer-in{ display:flex; gap:24px; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; }
.footer-logo{ height:30px; margin-bottom:12px; }
.footer-brand p{ margin:0; max-width:40ch; font-size:.92rem; line-height:1.6; color:var(--muted); }
.footer-meta{ text-align:right; max-width:34ch; }
.footer-badge{ margin:0 0 8px; font-size:.9rem; color:var(--body); }
.footer-copy{ margin:0; font-size:.82rem; color:var(--muted); }
@media(max-width:620px){ .footer-meta{ text-align:left; } }
/* chừa chỗ cho thanh CTA dính đáy trên mobile */
@media(max-width:760px){ .site-footer{ padding-bottom:calc(80px + env(safe-area-inset-bottom)); } }

/* ================= THANH CTA DÍNH ĐÁY (mobile) ================= */
.mobile-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:none;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,251,244,.92);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(31,20,8,.08);
}
.mobile-cta .btn{ width:100%; }
@media(max-width:760px){ .mobile-cta{ display:block; } }

/* ================= TRANG CHỦ ================= */
.home-hero{
  padding:clamp(36px,7vw,64px) 0 clamp(28px,5vw,48px);
  background:var(--grad-cream); border-bottom:1px solid var(--line);
}
.home-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,52px); align-items:center; }
.home-hero h1{ font-size:clamp(1.8rem,5.5vw,2.6rem); margin:.4rem 0 .5rem; max-width:16ch; }
.home-lead{ margin:0; color:var(--body); font-size:1.05rem; max-width:44ch; }
.home-hero-copy .free-tags{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:11px; }
.home-hero-copy .free-tags li{ display:flex; align-items:flex-start; gap:10px; font-weight:600; color:var(--ink); font-size:.95rem; }
.home-hero-copy .free-tags svg{ width:20px; height:20px; color:var(--ok); flex-shrink:0; margin-top:1px; }
.home-form .form-card-head{ margin-bottom:16px; }
.home-form .form-card-head .eyebrow{ display:block; }
.home-form .form-card-head strong{ display:block; font-size:1.12rem; color:var(--ink); margin-top:5px; letter-spacing:-.01em; }
@media(max-width:820px){
  .home-hero-grid{ grid-template-columns:1fr; gap:26px; }
  .home-hero h1{ max-width:100%; }
}
.tile-filter{ position:relative; max-width:440px; margin:0 0 18px; }
.tile-filter svg{ position:absolute; left:15px; top:50%; transform:translateY(-50%); width:19px; height:19px; color:var(--muted); pointer-events:none; }
.tile-filter-input{
  width:100%; border:1.5px solid var(--line); border-radius:999px;
  background:#fff; padding:12px 16px 12px 44px; font-size:.98rem; color:var(--ink);
  box-shadow:var(--sh-sm); transition:border-color .15s ease, box-shadow .15s ease;
  appearance:none; -webkit-appearance:none;
}
.tile-filter-input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(237,118,29,.14); }
.tile[hidden]{ display:none; }
.tiles-empty{ margin-top:16px; color:var(--muted); }
.tiles{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.tile{
  display:flex; align-items:center; gap:12px;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--sh-sm); padding:16px 18px;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.tile:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--tint); }
.tile-body{ display:flex; flex-direction:column; min-width:0; }
.tile-body strong{ color:var(--ink); font-weight:800; }
.tile-go{ margin-left:auto; color:var(--brand); display:inline-flex; }
.tile-go svg{ width:20px; height:20px; }

/* ================= TRANG CẢM ƠN / LỖI ================= */
.wrap.narrow{ max-width:640px; }
.thanks{ padding-block:clamp(40px,8vw,72px); text-align:center; }
.thanks-ic{ width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background:rgba(47,175,9,.12); color:var(--ok); display:grid; place-items:center; }
.thanks-ic svg{ width:34px; height:34px; }
.thanks h1{ font-size:clamp(1.6rem,4.5vw,2.2rem); margin:0 0 10px; }
.thanks p{ margin:0 auto 8px; max-width:46ch; color:var(--body); }
.thanks .btn{ margin-top:16px; }

/* ================= CONCIERGE (đội Santa) ================= */
.concierge{ padding-block:clamp(24px,5vw,40px); }
.bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.inline{ display:inline; }
.help{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-md); margin:18px 0; box-shadow:var(--sh-sm); }
.help summary{ cursor:pointer; padding:14px 18px; font-weight:700; color:var(--ink); }
.help-body{ padding:0 18px 16px; font-size:.92rem; color:var(--body); }
.help-body ol{ margin:8px 0 0; padding-left:20px; display:grid; gap:6px; }
.help-body code{ background:var(--tint-2); padding:1px 6px; border-radius:6px; font-size:.9em; }
.linkbuilder{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:18px; margin:18px 0; box-shadow:var(--sh-sm); }
.linkbuilder h2{ font-size:1.1rem; margin:0 0 12px; }
.inline-form{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.inline-form .txt-input{ width:auto; flex:1 1 160px; padding:10px 12px; }
.link-out{ margin:12px 0 0; }
.link-out code{ background:var(--tint-2); padding:8px 12px; border-radius:8px; display:inline-block; word-break:break-all; font-size:.9rem; }
.table-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-sm); }
.leads{ width:100%; border-collapse:collapse; font-size:.9rem; background:var(--card); }
.leads th, .leads td{ text-align:left; padding:11px 13px; border-bottom:1px solid var(--line); white-space:nowrap; }
.leads th{ background:var(--paper-2); color:var(--ink); font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; }
.leads tbody tr:hover{ background:var(--tint-2); }
.leads tbody tr:last-child td{ border-bottom:none; }

/* Giảm chuyển động */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ================================================================
   CHỢ WEB — Dải AI · Ngăn giỏ · Chọn cách nhận · Hộp thoại AI ·
   Màn thanh toán (giữ chỗ). Bám token cam ấm. Bill chốt 13/07 chiều:
   web = chợ đầy đủ (giỏ + thanh toán + AI). CHƯA thu tiền (Pha 2 nối cổng).
   ================================================================ */

/* ── Dải "Đi chợ nhanh với AI" ── */
.ai-band{
  width:100%; display:flex; align-items:center; gap:13px;
  margin:0 0 14px; padding:14px 16px; text-align:left;
  border:1.5px solid var(--tint); border-radius:var(--r-md);
  background:linear-gradient(100deg,#FFF6E7 0%,#FFEFDA 100%);
  box-shadow:var(--sh-sm);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ai-band:hover{ transform:translateY(-2px); box-shadow:var(--sh-md); border-color:var(--brand); }
.ai-band-ic{
  flex-shrink:0; width:42px; height:42px; border-radius:12px;
  background:var(--grad-sign); color:#fff; display:grid; place-items:center; box-shadow:var(--sh-glow);
}
.ai-band-ic svg{ width:22px; height:22px; }
.ai-band-txt{ display:flex; flex-direction:column; min-width:0; }
.ai-band-txt strong{ color:var(--ink); font-size:1rem; font-weight:800; }
.ai-band-txt span{ color:var(--muted); font-size:.85rem; overflow:hidden; text-overflow:ellipsis; }
.ai-band-go{ margin-left:auto; color:var(--brand); flex-shrink:0; }
.ai-band-go svg{ width:22px; height:22px; transform:rotate(-90deg); }
@media(max-width:520px){ .ai-band-txt span{ display:none; } }

/* ── Lớp phủ nền (scrim) chung ── */
.scrim{
  position:fixed; inset:0; z-index:90;
  background:rgba(21,17,10,.5); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  animation:fade-in .2s ease;
}
.scrim[hidden]{ display:none; }
@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }

/* ── Ngăn giỏ (trượt bên phải / đáy trên di động) ── */
.cart-drawer{
  position:fixed; top:0; right:0; z-index:100;
  width:min(420px,94vw); height:100dvh;
  display:flex; flex-direction:column;
  background:var(--paper-2); box-shadow:-18px 0 48px rgba(31,20,8,.22);
  animation:drawer-in .26s cubic-bezier(.22,.61,.36,1);
}
.cart-drawer[hidden]{ display:none; }
@keyframes drawer-in{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }
.drawer-head{
  display:flex; align-items:center; gap:10px;
  padding:16px 18px; border-bottom:1px solid var(--line); background:#fff;
}
.drawer-head strong{ display:inline-flex; align-items:center; gap:9px; font-size:1.1rem; color:var(--ink); }
.drawer-head strong svg{ width:21px; height:21px; color:var(--brand); }
.drawer-x{
  margin-left:auto; width:38px; height:38px; border-radius:10px;
  border:none; background:var(--tint-2); color:var(--ink);
  display:grid; place-items:center; flex-shrink:0;
}
.drawer-x svg{ width:19px; height:19px; }
.drawer-x:hover{ background:var(--tint); }
.drawer-body{ flex:1; overflow-y:auto; padding:14px 18px; }

/* ── Chọn cách nhận (giao / tủ) ── */
.ship-seg{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  padding:12px 18px; background:#fff; border-bottom:1px solid var(--line);
}
.co-block .ship-seg{ padding:0; background:transparent; border:none; margin-top:8px; }
.ship-opt{
  display:flex; align-items:center; gap:9px; text-align:left;
  padding:10px 12px; border-radius:12px;
  border:1.5px solid var(--line); background:var(--paper-2); color:var(--body);
  transition:border-color .14s ease, background .14s ease;
}
.ship-opt svg{ width:22px; height:22px; flex-shrink:0; color:var(--muted); }
.ship-opt-txt{ display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.ship-opt-txt b{ color:var(--ink); font-size:.9rem; }
.ship-opt-txt small{ color:var(--muted); font-size:.72rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ship-opt.is-active{ border-color:var(--brand); background:var(--tint-2); box-shadow:var(--sh-sm); }
.ship-opt.is-active svg{ color:var(--brand); }

/* ── Dòng hàng trong giỏ / AI ── */
.cart-line, .ai-row{
  display:flex; align-items:center; gap:11px;
  padding:11px 0; border-bottom:1px solid var(--line);
}
.cart-line:last-child, .ai-row:last-child{ border-bottom:none; }
.cl-thumb{
  flex-shrink:0; width:48px; height:48px; border-radius:11px; overflow:hidden;
  background:#FBF9F5; border:1px solid var(--line); display:grid; place-items:center;
}
.cl-thumb img{ width:100%; height:100%; object-fit:contain; }
.cl-noimg{ width:100%; height:100%; background:linear-gradient(135deg,#FFF7EA,#FFEFDD); }
.cl-body{ display:flex; flex-direction:column; min-width:0; flex:1; }
.cl-name{
  font-size:.88rem; font-weight:700; color:var(--ink); line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cl-price{ font-size:.82rem; color:var(--muted); font-weight:600; margin-top:2px; }
.cl-qty{ flex-shrink:0; height:34px; }
.cl-qty .qty-btn{ width:34px; height:34px; }

.cart-empty{ text-align:center; padding:42px 16px; color:var(--muted); }
.cart-empty[hidden]{ display:none; }
.cart-empty .ce-ic{ display:inline-flex; color:var(--tint); }
.cart-empty .ce-ic svg{ width:52px; height:52px; color:#E9C9A6; }
.cart-empty p{ margin:10px 0 0; }
.cart-empty b{ color:var(--brand); }

/* ── Chân ngăn giỏ / thanh toán ── */
.drawer-foot{
  padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); background:#fff;
}
.drawer-foot[hidden]{ display:none; }
.drawer-sum{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:4px; }
.drawer-sum span{ color:var(--muted); font-weight:600; }
.drawer-sum b{ font-size:1.3rem; color:var(--ink); font-weight:800; font-variant-numeric:tabular-nums; }
.drawer-note{ margin:0 0 12px; font-size:.76rem; color:var(--muted); line-height:1.45; }
.drawer-note svg{ width:13px; height:13px; vertical-align:-1px; color:var(--ok); }
.drawer-note b{ color:var(--body); }
.drawer-foot .btn svg{ transform:rotate(-90deg); }

/* ── Hộp thoại (AI + thanh toán) ── */
.modal{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:flex-end; justify-content:center;
  padding:0;
}
.modal[hidden]{ display:none; }
.modal .scrim{ z-index:-1; }
.modal-card{
  position:relative; width:min(560px,100%);
  max-height:92dvh; display:flex; flex-direction:column;
  background:var(--paper-2);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:0 -18px 60px rgba(31,20,8,.28);
  animation:sheet-in .28s cubic-bezier(.22,.61,.36,1);
}
@media(min-width:640px){
  .modal{ align-items:center; padding:20px; }
  .modal-card{ border-radius:var(--r-xl); max-height:88dvh; }
}
@keyframes sheet-in{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
.modal-head{
  display:flex; align-items:center; gap:10px;
  padding:16px 18px; border-bottom:1px solid var(--line); background:#fff;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.modal-head strong{ display:inline-flex; align-items:center; gap:9px; font-size:1.08rem; color:var(--ink); }
.modal-head strong svg{ width:20px; height:20px; color:var(--brand); }
.modal-body{ padding:16px 18px; overflow-y:auto; flex:1; }
.co-back{ margin-left:0; margin-right:2px; }
.co-back svg{ transform:rotate(90deg); }

/* ── Hộp thoại AI ── */
.ai-hint{ margin:0 0 12px; color:var(--muted); font-size:.9rem; }
.ai-input{
  width:100%; border:1.5px solid var(--line); border-radius:14px;
  background:#fff; padding:13px 15px; font:inherit; font-size:.98rem; color:var(--ink);
  resize:vertical; min-height:76px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ai-input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(237,118,29,.14); }
.ai-egs{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.ai-eg{
  border:1px solid var(--line); background:#fff; color:var(--body);
  border-radius:999px; padding:7px 13px; font-size:.82rem; font-weight:600;
  transition:border-color .14s ease, color .14s ease, background .14s ease;
}
.ai-eg:hover{ border-color:var(--brand); color:var(--brand); background:var(--tint-2); }
.ai-result{ margin-top:16px; }
.ai-result[hidden]{ display:none; }
.ai-think{ display:flex; align-items:center; gap:8px; color:var(--muted); font-weight:600; padding:8px 0; }
.ai-think span{ width:8px; height:8px; border-radius:50%; background:var(--brand); animation:ai-dot 1s infinite ease-in-out; }
.ai-think span:nth-child(2){ animation-delay:.16s; }
.ai-think span:nth-child(3){ animation-delay:.32s; }
@keyframes ai-dot{ 0%,80%,100%{ transform:scale(.5); opacity:.4; } 40%{ transform:scale(1); opacity:1; } }
.ai-list{ border:1px solid var(--line); border-radius:var(--r-md); background:#fff; padding:2px 14px; }
.ai-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:14px; }
.ai-foot span{ color:var(--muted); font-weight:600; }
.ai-foot b{ color:var(--ink); font-size:1.12rem; font-weight:800; }
.ai-none{ color:var(--muted); text-align:center; padding:18px 0; }
.ai-miss{ margin:10px 0 0; font-size:.82rem; color:var(--danger); }

/* ── Màn thanh toán ── */
.co-card .modal-body{ padding-bottom:8px; }
.co-view[hidden]{ display:none; }
.co-sum{
  border:1px solid var(--line); border-radius:var(--r-md); background:#fff;
  padding:6px 14px; margin-bottom:16px;
}
.co-line{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); }
.co-line:last-child{ border-bottom:none; }
.co-l-q{ font-weight:800; color:var(--brand); font-variant-numeric:tabular-nums; flex-shrink:0; }
.co-l-n{ flex:1; min-width:0; font-size:.88rem; color:var(--ink); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.co-l-p{ font-weight:700; color:var(--body); font-variant-numeric:tabular-nums; flex-shrink:0; }
.co-block{ margin-bottom:16px; }
.co-label{ display:block; font-weight:800; color:var(--ink); font-size:.9rem; margin-bottom:8px; }
.co-block .field{ margin-top:8px; }
.co-mini-label{ display:block; font-weight:700; color:var(--body); font-size:.82rem; margin:0 0 6px; }
.select-wrap{ position:relative; }
.select-wrap::after{
  content:''; position:absolute; right:15px; top:50%; width:9px; height:9px; pointer-events:none;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);
}
.select-wrap select.txt-input{
  width:100%; appearance:none; -webkit-appearance:none; background:#fff;
  padding-right:38px; cursor:pointer;
}
.co-tu-note{
  margin:8px 0 0; padding:12px 14px; border-radius:12px;
  background:var(--tint-2); border:1px solid var(--tint); color:var(--body); font-size:.86rem; line-height:1.5;
}
.co-tu-note b{ color:var(--ink); }
.co-ship-extra{ margin-top:2px; }
.co-msg{ margin:6px 0 0; font-size:.88rem; min-height:1.2em; }
.co-msg.err{ color:var(--danger); font-weight:600; }

/* ── Xong đơn ── */
.co-done{ text-align:center; padding:24px 10px 8px; }
.co-done-ic{
  width:64px; height:64px; margin:0 auto 14px; border-radius:50%;
  background:var(--grad-sign); color:#fff; display:grid; place-items:center; box-shadow:var(--sh-glow);
}
.co-done-ic svg{ width:32px; height:32px; }
.co-done h3{ font-size:1.3rem; margin-bottom:8px; }
.co-done p{ margin:6px 0; color:var(--body); }
.co-done b{ color:var(--ink); }
.co-done .btn{ margin-top:16px; }