/* =====================================================================
   Mặt tiền: trang giới thiệu + trang bán hàng cho khách.
   Mobile-first tuyệt đối — khách xem live bằng điện thoại, một tay,
   vừa xem vừa chốt. Mọi thứ bấm được đều ≥ 44px.
   ===================================================================== */

/* ---- khung ---------------------------------------------------------- */
.site-head{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:14px;
  padding:12px 16px;
  background:rgba(255,255,255,.88);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-head nav{display:flex;align-items:center;gap:6px;margin-left:auto;font-size:.9rem}
.site-head nav a{text-decoration:none;padding:8px 10px;border-radius:8px;font-weight:600;color:var(--ink-2)}
.site-head nav a:hover{background:var(--paper-3);color:var(--ink)}

/* Nhận diện khách trên thanh đầu trang. Bấm vào là sang "Đơn của tôi". */
.me-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px 5px 5px !important;border-radius:99px;
  background:var(--paper-3);color:var(--ink) !important;font-weight:700 !important;
  max-width:200px;
}
.me-chip:hover{background:var(--line)}
.me-ava{
  flex:0 0 26px;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:#fff;
  font-size:.72rem;font-weight:800;letter-spacing:-.01em;
}
.me-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.86rem}
@media(max-width:520px){
  .me-chip{max-width:132px;gap:6px;padding:4px 9px 4px 4px !important}
  .me-name{font-size:.8rem}
}
@media(max-width:380px){.me-name{display:none}}

.cart-btn{position:relative;display:inline-flex;align-items:center;gap:7px;font-weight:700 !important;color:var(--ink) !important}
.cart-btn b{
  min-width:20px;height:20px;padding:0 5px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--live);color:#fff;border-radius:99px;
  font-size:.72rem;font-weight:800;
}

.shell{max-width:1080px;margin:0 auto;padding:0 16px 96px}
.shell-narrow{max-width:560px;margin:0 auto;padding:0 16px 96px}

.site-foot{border-top:1px solid var(--line);background:var(--paper-2);padding:28px 16px 40px;margin-top:48px}
.site-foot .inner{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;font-size:.86rem;color:var(--ink-3)}
.site-foot a{color:var(--ink-2);text-decoration:none;margin-right:14px}

/* =====================================================================
   TRANG GIỚI THIỆU (dành cho chủ shop)
   ===================================================================== */
.hero{padding:40px 0 8px}
.hero-grid{display:grid;gap:36px;align-items:center}
@media(min-width:960px){.hero-grid{grid-template-columns:minmax(0,1fr) 400px;gap:48px}}
.hero-copy{max-width:600px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px}
.hero h1{margin-bottom:0}
.hero h1 mark{background:linear-gradient(180deg,transparent 62%,#ffd9d5 62%);color:inherit;padding:0 2px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hero-note{margin-top:14px;font-size:.84rem;color:var(--ink-3)}

/* ---- khung điện thoại minh hoạ -------------------------------------- */
.hero-visual{position:relative;justify-self:center;padding:18px 0}
.phone{
  position:relative;width:300px;border-radius:38px;
  background:var(--ink);padding:11px;
  box-shadow:0 30px 60px -28px rgba(15,15,18,.55), 0 2px 6px rgba(15,15,18,.12);
}
.phone-notch{
  position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:104px;height:22px;border-radius:0 0 14px 14px;background:var(--ink);z-index:3;
}
.phone-screen{
  background:var(--paper);border-radius:28px;overflow:hidden;
  padding:26px 12px 14px;display:flex;flex-direction:column;gap:9px;
}
.ph-head{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 6px}
.ph-logo{font-weight:850;font-size:.86rem;letter-spacing:-.03em}
.ph-logo em{font-style:normal;color:var(--live)}
.ph-cart{font-size:.72rem;font-weight:700;color:var(--ink-2);display:inline-flex;align-items:center;gap:5px}
.ph-cart b{background:var(--live);color:#fff;border-radius:99px;padding:0 6px;font-size:.64rem}

.ph-live{
  display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:10px;
  background:linear-gradient(100deg,#fff4f2,#ffe9e6);border:1px solid #ffc9c2;
}
.ph-live .live-tag{font-size:.6rem;padding:3px 8px 3px 7px;gap:5px}
.ph-live .live-dot{width:5px;height:5px}
.ph-live-txt{font-size:.72rem;font-weight:700;color:#8a1c12}

.ph-code{border:2px solid var(--ink);border-radius:11px;padding:8px 9px}
.ph-code-lbl{font-size:.58rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.ph-code-row{display:flex;gap:6px;margin-top:6px}
.ph-code-in{
  flex:1;background:var(--paper-2);border:1px solid var(--line-2);border-radius:8px;
  padding:7px 9px;font:800 .95rem/1 var(--mono);letter-spacing:.14em;color:#c2bbab;
}
.ph-code-btn{
  background:var(--live);color:#fff;border-radius:8px;padding:8px 12px;
  font-size:.76rem;font-weight:800;display:flex;align-items:center;
}

.ph-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ph-lot{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper);
  display:flex;flex-direction:column}
.ph-lot.is-sold{opacity:.6}
.ph-lot-img{position:relative;aspect-ratio:4/5;background:var(--paper-3);overflow:hidden}
.ph-lot-img img{width:100%;height:100%;object-fit:cover}
.ph-lot-img .lot{position:absolute;top:5px;left:5px;z-index:2;font-size:.58rem;padding:3px 5px 2px}
.ph-stamp{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-9deg);
  border:2px solid var(--err);color:var(--err);background:rgba(255,255,255,.85);
  border-radius:4px;padding:2px 6px;font-size:.58rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap;
}
.ph-lot-price{font-size:.76rem;font-weight:800;padding:6px 7px 0}
.ph-lot-btn{
  margin:5px 7px 7px;background:var(--ink);color:#fff;border-radius:6px;
  padding:5px;text-align:center;font-size:.62rem;font-weight:700;
}
.ph-lot-btn.is-off{background:var(--paper-3);color:var(--ink-3)}

/* thẻ nổi cạnh điện thoại */
.hero-float{
  position:absolute;display:flex;flex-direction:column;gap:1px;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:9px 12px;box-shadow:var(--shadow-lg);font-size:.76rem;
}
.hero-float b{font-size:.86rem}
.hero-float span{color:var(--ink-3)}
/* Đặt lệch hẳn ra mép điện thoại: băng ĐANG LIVE và ô gõ mã là phần phải
   nhìn thấy rõ nhất, không được để thẻ nổi che. */
.hero-float.f1{top:47%;left:-42px;border-color:var(--ok);background:var(--ok-dim)}
.hero-float.f1 b{color:var(--ok)}
.hero-float.f2{bottom:7%;right:-36px}
@media(max-width:1040px){.hero-float.f1{left:-12px}.hero-float.f2{right:-8px}}
@media(max-width:719px){.hero-float{display:none}}

/* ---- section chung -------------------------------------------------- */
.section{padding:46px 0}
.section-head{max-width:620px;margin-bottom:28px}
.section-head h2{font-size:clamp(1.5rem,4vw,2.1rem);margin-bottom:10px}

/* ---- CÁC SHOP ĐANG LIVE --------------------------------------------- */
.onair-head{margin-bottom:22px}
.onair-head h2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.onair-head .live-tag{font-size:.86rem;padding:7px 14px 7px 11px}
.onair-head .live-dot{width:8px;height:8px}

/* Cột có trần chiều rộng + canh trái: một shop đang live trông vẫn ra tấm
   ra món, mười shop thì tự xuống dòng — không bị kéo giãn méo mó. */
.onair-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
@media(min-width:640px){.onair-grid{grid-template-columns:repeat(auto-fill,minmax(300px,340px));justify-content:start}}

.onair-card{
  display:flex;flex-direction:column;text-decoration:none;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  transition:box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.onair-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);border-color:#ffc9c2}

.onair-thumbs{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.onair-thumb{aspect-ratio:4/5;background:var(--paper-3);display:flex;align-items:center;justify-content:center;overflow:hidden}
.onair-thumb img{width:100%;height:100%;object-fit:cover}
.onair-thumb .lot{font-size:.6rem;padding:3px 5px 2px}
.onair-badge{
  position:absolute;top:8px;left:8px;z-index:2;
  display:inline-flex;align-items:center;gap:5px;
  background:var(--live);color:#fff;border-radius:99px;padding:4px 9px;
  font-size:.62rem;font-weight:800;letter-spacing:.09em;
}
.onair-badge .live-dot{width:5px;height:5px}

.onair-body{display:flex;align-items:center;gap:10px;padding:12px 13px 8px}
.onair-body .shop-avatar{flex:0 0 38px;width:38px;height:38px;font-size:.95rem;border-radius:11px}
.onair-body b{display:block;font-size:.94rem;color:var(--ink)}
.onair-body .t-xs{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.onair-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 13px 13px;border-top:1px solid var(--line);margin-top:4px}
.onair-go{margin-left:auto;font-size:.8rem;font-weight:700;color:var(--live)}

.onair-empty{
  text-align:center;padding:48px 20px;border-radius:var(--radius);
  border:1px dashed var(--line-2);background:var(--paper-2);color:var(--ink-3);
}
.onair-empty .mark{font-size:2rem;color:var(--line-2);margin-bottom:10px}
.onair-empty p{margin-bottom:16px}

/* ---- vấn đề / giải pháp --------------------------------------------- */
.vs{display:grid;gap:14px}
@media(min-width:760px){.vs{grid-template-columns:1fr 1fr}}
.vs-col{border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:var(--paper)}
.vs-col.bad{background:var(--paper-2)}
.vs-col.good{border-color:var(--ink);box-shadow:var(--shadow)}
.vs-col h3{font-size:1rem;margin-bottom:14px;display:flex;align-items:center;gap:8px}
/* Không dùng flex ở <li>: chữ in đậm bên trong sẽ bị tách thành phần tử
   flex riêng và vỡ dòng. Bullet vẽ bằng ::before định vị tuyệt đối. */
.vs-col li{position:relative;padding:7px 0 7px 18px;font-size:.93rem;line-height:1.55;color:var(--ink-2)}
.vs-col li::before{content:"";position:absolute;left:0;top:15px;width:6px;height:6px;border-radius:50%;background:var(--line-2)}
.vs-col.good li::before{background:var(--ok)}

/* ---- các bước -------------------------------------------------------- */
.steps{display:grid;gap:16px;counter-reset:s}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
@media(min-width:760px){.steps-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.steps-4{grid-template-columns:repeat(4,1fr)}}
.step{position:relative;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.step-art{background:var(--paper-2);border-radius:10px;margin-bottom:14px;padding:6px}
.step-art svg{width:100%;height:auto;display:block}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;top:14px;right:14px;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;background:var(--ink);color:#fff;border-radius:8px;
  font:800 .8rem/1 var(--mono);
}
.step h3{font-size:1rem;margin-bottom:7px}
.step p{font-size:.89rem;color:var(--ink-2);line-height:1.55}
.step code{font-family:var(--mono);font-size:.85em;background:var(--paper-3);padding:1px 5px;border-radius:4px}

/* ---- showcase Chế độ Live ------------------------------------------- */
.showcase{display:grid;gap:28px;align-items:center}
@media(min-width:960px){.showcase{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px}}
.showcase-copy h2{font-size:clamp(1.4rem,3.6vw,1.9rem);margin:12px 0 10px}
.tick-list{margin-top:16px;display:grid;gap:8px}
.tick-list li{position:relative;padding-left:22px;font-size:.92rem;color:var(--ink-2);line-height:1.55}
.tick-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--ok);font-weight:800}

.mock-live{
  background:#0b0b0e;border-radius:16px;overflow:hidden;
  box-shadow:0 26px 56px -26px rgba(15,15,18,.6);
  border:1px solid #23232c;color:#e8e8f0;
}
.ml-top{display:flex;align-items:center;gap:10px;padding:10px 13px;border-bottom:1px solid #1d1d24;background:#0f0f13}
.ml-onair{display:inline-flex;align-items:center;gap:6px;background:var(--live);color:#fff;
  border-radius:99px;padding:4px 10px;font-size:.62rem;font-weight:800;letter-spacing:.09em}
.ml-onair .live-dot{width:5px;height:5px}
.ml-title{font-size:.74rem;font-weight:700;color:#cfcfdd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ml-time{margin-left:auto;font:700 .7rem/1 var(--mono);color:#7a7a8f}

.ml-body{display:grid;grid-template-columns:1.15fr 1fr;gap:1px;background:#1d1d24}
.ml-left,.ml-right{background:#0b0b0e;padding:12px}
.ml-h{display:block;font-size:.58rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:#6d6d82;margin:0 0 8px}
.ml-h b{color:#d0d0de;margin-left:5px}
.ml-lots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px}
.ml-lot{background:#13131a;border:1px solid #262632;border-radius:8px;padding:7px 6px;
  display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.ml-lot .lot{font-size:.56rem;padding:3px 5px 2px;background:#f2f2f6;color:#0b0b0e}
.ml-btn{width:100%;background:var(--live);color:#fff;border-radius:5px;padding:4px;
  text-align:center;font-size:.58rem;font-weight:800}
.ml-flag{font-size:.54rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#6d6d82}
.ml-lot.is-held{border-color:#7a4a12;background:#191309}
.ml-lot.is-held .ml-flag{color:#ffa63d}
.ml-lot.is-sold{opacity:.5}

.ml-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.ml-stat{background:#13131a;border:1px solid #262632;border-radius:8px;padding:7px 9px;display:flex;flex-direction:column}
.ml-stat span{font-size:.54rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#6d6d82}
.ml-stat b{font-size:1rem;letter-spacing:-.02em}
.ml-feed{background:#13131a;border:1px solid #262632;border-radius:9px;padding:9px 10px;margin-bottom:6px;
  display:flex;flex-direction:column;gap:2px}
.ml-feed.is-new{border-color:var(--live)}
.ml-feed b{font-size:.86rem;letter-spacing:-.01em}
.ml-feed span{font-size:.58rem;color:#7a7a8f;font-variant-numeric:tabular-nums}
.ml-feed i{font-style:normal;font-size:.72rem;font-weight:800;color:#ffd7d3;margin-top:3px}

@media(max-width:520px){
  .ml-body{grid-template-columns:1fr}
  .ml-lots{grid-template-columns:repeat(4,1fr)}
}

/* ---- tính năng ------------------------------------------------------- */
.feats{display:grid;gap:14px}
@media(min-width:680px){.feats{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.feats{grid-template-columns:repeat(3,1fr)}}
.feat{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:var(--paper)}
.feat-ico{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:11px;margin-bottom:12px;
  background:var(--paper-3);color:var(--ink);
}
.feat-ico svg{width:21px;height:21px}
.feat h3{font-size:.98rem;margin-bottom:6px}
.feat p{font-size:.89rem;color:var(--ink-2);line-height:1.55}

/* ---- giá ------------------------------------------------------------- */
.price-row{display:grid;gap:26px;align-items:center}
@media(min-width:860px){.price-row{grid-template-columns:1fr 400px;gap:40px}}
.price-card{
  border:1px solid var(--ink);border-radius:var(--radius);padding:26px;
  background:var(--paper);box-shadow:var(--shadow);
}
.price-card .amount{font-size:2.6rem;font-weight:850;letter-spacing:-.04em;line-height:1}
.price-card li{position:relative;padding:6px 0 6px 22px;font-size:.92rem;color:var(--ink-2);line-height:1.5}
.price-card li::before{content:"✓";position:absolute;left:0;top:6px;color:var(--ok);font-weight:800}

.cta-band{border-radius:20px;padding:40px 24px;text-align:center;background:var(--ink);color:#fff}
.cta-band h2{font-size:clamp(1.4rem,4vw,2rem);margin-bottom:10px}
.cta-band p{color:#b9b9c6;margin-bottom:20px}

/* =====================================================================
   MẶT TIỀN NGƯỜI MUA — /live
   Ba khối xếp theo mức độ vào được ngay: đang live -> sắp lên sóng ->
   mở cả ngày. Ô tìm kiếm lọc tại chỗ, popup nhận diện chỉ mời một lần.
   ===================================================================== */
.head-live{display:inline-flex;align-items:center;gap:6px;color:var(--live) !important;font-weight:700 !important;white-space:nowrap}
.head-live .live-dot{background:var(--live)}
.hl-ngan{display:none}
@media(max-width:560px){
  .site-head{gap:8px;padding:11px 12px}
  .site-head nav{gap:2px}
  .site-head nav a{padding:7px 8px}
  .hl-dai{display:none}
  .hl-ngan{display:inline}
}

/* ---- đầu trang ------------------------------------------------------ */
.buyer-hero{display:grid;gap:20px;padding:24px 0 6px}
@media(min-width:920px){
  .buyer-hero{grid-template-columns:minmax(0,1fr) 380px;align-items:end;gap:32px}
}
.hero-words .live-tag{font-size:.8rem;padding:6px 13px 6px 10px;margin-bottom:12px}
.hero-words .live-dot{width:8px;height:8px}
.hero-words h1{font-size:clamp(1.7rem,4.6vw,2.5rem);letter-spacing:-.035em}
.hero-words .t-lead{margin-top:8px;max-width:520px}

/* Điện thoại: nén phần đầu lại để thẻ shop lên gần đầu màn hình — khách vào
   là để xem shop, không phải để đọc phần giới thiệu. */
@media(max-width:719px){
  .buyer-hero{padding:16px 0 2px;gap:14px}
  .hero-words h1{font-size:1.6rem}
  .hero-words .t-lead{font-size:.94rem;margin-top:6px}
  .hero-words .live-tag{margin-bottom:9px}
  .section-tight{padding:20px 0 0}
}

/* ---- ô tìm kiếm ------------------------------------------------------ */
.searchbar{
  display:flex;align-items:center;gap:10px;
  background:var(--paper);border:1px solid var(--line-2);border-radius:99px;
  padding:0 6px 0 16px;box-shadow:var(--shadow);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.searchbar:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(15,15,18,.08), var(--shadow)}
.searchbar .ico{display:flex;color:var(--ink-3);flex:0 0 auto}
.searchbar .ico svg{width:18px;height:18px}
.searchbar input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  padding:14px 0;font-size:.98rem;
}
.searchbar input::placeholder{color:#a9a396}
.searchbar input::-webkit-search-cancel-button{display:none}
.searchbar .clear{
  flex:0 0 auto;border:0;background:var(--paper-3);color:var(--ink-2);cursor:pointer;
  width:30px;height:30px;border-radius:50%;font-size:.8rem;line-height:1;margin-right:4px;
}
.searchbar .clear:hover{background:var(--ink);color:#fff}

/* ---- tiêu đề khối --------------------------------------------------- */
.section-tight{padding:26px 0 0}
.section-tight .lot-toolbar{gap:9px;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.section-tight .lot-toolbar h2{font-size:1.12rem;letter-spacing:-.02em}

/* =====================================================================
   THẺ SHOP ĐANG LIVE
   Khảm một ảnh chính + ba ảnh phụ: bốn ô bằng nhau nhìn thành một băng
   bẹt, mắt không có chỗ bám. Ảnh chính cho thấy shop đang bán kiểu đồ gì
   chỉ trong một cái liếc.
   ===================================================================== */
.shop-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
@media(min-width:1100px){.shop-grid{grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}}

.shopcard{
  display:flex;flex-direction:column;text-decoration:none;overflow:hidden;
  border:1px solid var(--line);border-radius:18px;background:var(--paper);
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  animation:cardin .4s both cubic-bezier(.2,.8,.2,1);
  animation-delay:calc(var(--i, 0) * 45ms);
}
@keyframes cardin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.shopcard{animation:none}}

.shopcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:#ffc9c2}
.shopcard:hover .mosaic-cell.is-main img{transform:scale(1.045)}

.mosaic{
  position:relative;display:grid;gap:2px;background:var(--line);
  /* minmax(0,…) chứ không phải 1fr: `1fr` vẫn giữ mức tối thiểu bằng chiều
     cao thực của ảnh bên trong, khảm bị kéo giãn và aspect-ratio vô hiệu. */
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  grid-template-rows:repeat(3,minmax(0,1fr));
  aspect-ratio:3/2;min-height:0;
}
.mosaic-cell{
  position:relative;overflow:hidden;background:var(--paper-3);
  display:flex;align-items:center;justify-content:center;
  /* min-height/min-width:0 là bắt buộc: mặc định ô grid là `auto`, ảnh bên
     trong đẩy hàng giãn ra và aspect-ratio của khảm mất tác dụng. */
  min-height:0;min-width:0;
}
.mosaic-cell.is-main{grid-row:span 3}
/* Ảnh đặt tuyệt đối: ảnh nằm trong dòng chảy thì kích thước thực của nó
   trở thành chiều cao tối thiểu của hàng, khảm bị kéo giãn và aspect-ratio
   mất tác dụng. Tuyệt đối thì ảnh không đóng góp gì vào min-content nữa. */
.mosaic-cell img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:transform .35s ease;
}
.mosaic-cell .lot{font-size:.58rem;padding:3px 5px 2px}
.thumb-blank{width:100%;height:100%;
  background:repeating-linear-gradient(45deg,var(--paper-3),var(--paper-3) 7px,#eee7da 7px,#eee7da 14px)}

.shopcard-badge{
  position:absolute;top:10px;left:10px;z-index:3;
  display:inline-flex;align-items:center;gap:5px;
  background:var(--live);color:#fff;border-radius:99px;padding:5px 10px;
  font-size:.62rem;font-weight:800;letter-spacing:.09em;
  box-shadow:0 2px 8px rgba(255,46,32,.35);
}
.shopcard-badge .live-dot{width:5px;height:5px}

/* Con số quan trọng nhất nằm ngay trên ảnh, không phải lẫn dưới chân thẻ */
.shopcard-count{
  position:absolute;left:10px;bottom:10px;z-index:3;
  background:rgba(15,15,18,.82);color:#fff;border-radius:99px;
  padding:5px 11px;font-size:.72rem;font-weight:600;backdrop-filter:blur(4px);
}
.shopcard-count b{font-weight:850}

.shopcard-body{display:flex;align-items:center;gap:11px;padding:13px 14px 9px;min-width:0}
.shopcard-body .shop-avatar{
  flex:0 0 44px;width:44px;height:44px;font-size:1.05rem;border-radius:13px;
  margin-top:-30px;border:3px solid var(--paper);box-shadow:var(--shadow);
}
.shopcard-body .grow{min-width:0;display:flex;flex-direction:column;gap:1px}
.shopcard-body b{font-size:1rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shopcard-body .t-xs{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.shopcard-foot{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px 13px;margin-top:auto;
}
.shopcard-go{margin-left:auto;font-size:.85rem;font-weight:700;color:var(--live);white-space:nowrap}
.shopcard:hover .shopcard-go span{display:inline-block;transform:translateX(3px);transition:transform .18s ease}

/* =====================================================================
   HAI KHỐI PHỤ — sắp lên sóng & mở cả ngày
   ===================================================================== */
.soon-grid{display:grid;gap:10px}
@media(min-width:760px){.soon-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1200px){.soon-grid{grid-template-columns:repeat(3,1fr)}}

.soon-item{
  display:flex;align-items:center;gap:12px;padding:12px 14px;text-decoration:none;min-width:0;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.soon-item:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:var(--shadow)}
.soon-item .shop-avatar{flex:0 0 40px;width:40px;height:40px;font-size:.98rem;border-radius:12px}
.soon-item .grow{min-width:0;display:flex;flex-direction:column;gap:1px}
.soon-item b{font-size:.94rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.soon-item .t-xs{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Ô giờ đứng đầu hàng, đọc như một lịch phát sóng */
.when{
  flex:0 0 52px;width:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:7px 0;border-radius:11px;background:var(--hold-dim);color:var(--hold);
}
.when b{font:800 .95rem/1 var(--mono);letter-spacing:-.01em}
.when span{font-size:.62rem;font-weight:700;margin-top:2px;opacity:.85}

/* ---- lời mời lưu thông tin (khi đã bấm "Để sau") --------------------- */
.idbar{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  padding:14px 16px;border-radius:var(--radius);
  border:1px dashed var(--line-2);background:var(--paper-2);
  transition:border-color .15s ease, background .15s ease;
}
.idbar:hover{border-color:var(--ink);background:var(--paper)}
.idbar-ico{font-size:1.2rem;flex:0 0 auto}
.idbar .grow{min-width:0;display:flex;flex-direction:column}
.idbar b{font-size:.94rem}

/* ---- popup nhận diện -------------------------------------------------- */
.modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:18px}
.modal-backdrop{position:absolute;inset:0;background:rgba(15,15,18,.55);backdrop-filter:blur(3px);
  animation:fadein .18s ease}
.modal-card{
  position:relative;z-index:2;width:100%;max-width:400px;
  background:var(--paper);border-radius:20px;padding:26px 24px 22px;
  box-shadow:var(--shadow-lg);max-height:calc(100vh - 36px);overflow-y:auto;
  animation:popin .22s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes popin{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.modal-backdrop,.modal-card{animation:none}}

.modal-x{
  position:absolute;top:12px;right:12px;width:30px;height:30px;
  border:0;border-radius:50%;background:var(--paper-3);color:var(--ink-2);
  cursor:pointer;font-size:.85rem;line-height:1;
}
.modal-x:hover{background:var(--ink);color:#fff}
.modal-kicker{display:inline-block;background:var(--live-dim);color:var(--live);
  border-radius:99px;padding:4px 11px;font-size:.7rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;margin-bottom:10px}
.modal-card h2{font-size:1.3rem;margin-bottom:8px}

/* =====================================================================
   TRANG SHOP — nơi khách livestream đổ về
   ===================================================================== */
.shop-head{
  margin-top:18px;padding:18px;border-radius:20px;
  background:var(--paper);border:1px solid var(--line);
}
.shop-head.is-live{border-color:#ffc9c2}

.shop-id{display:flex;gap:14px;align-items:flex-start}
.shop-avatar{
  flex:0 0 54px;width:54px;height:54px;border-radius:16px;
  background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:850;font-size:1.3rem;letter-spacing:-.03em;overflow:hidden;
}
.shop-avatar img{width:100%;height:100%;object-fit:cover}
.shop-avatar.lg{flex:0 0 62px;width:62px;height:62px;border-radius:19px;font-size:1.5rem}
.shop-head h1{font-size:clamp(1.35rem,3.6vw,1.8rem);letter-spacing:-.03em}
.shop-bio{margin-top:5px;font-size:.9rem;color:var(--ink-2);line-height:1.5}

.shop-facts{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.fact{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:99px;
  padding:4px 11px;font-size:.79rem;color:var(--ink-3);
}
.fact b{color:var(--ink);font-weight:700}
/* Thu tiền trước là điều kiện khác thường, phải nhìn ra ngay chứ không lẫn
   vào mấy con số ship với thời gian giữ hàng. */
.fact.is-warn{background:var(--hold-dim);border-color:#f0cf9c;color:var(--hold);font-weight:700}

/* Băng LIVE: khi shop đang lên sóng thì đây là thứ đập vào mắt đầu tiên */
.live-banner{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:16px 0 0;padding:13px 15px;border-radius:var(--radius);
  background:linear-gradient(100deg,#fff4f2,#ffe9e6);
  border:1px solid #ffc9c2;
}
/* flex-basis 0 (mặc định của .grow) làm cột chữ co còn vài chục pixel khi băng
   có thêm nút "Xem buổi live" — mỗi dòng một chữ. Cho một bề rộng mong muốn để
   nút tự rớt xuống hàng dưới thay vì bóp chữ. */
.live-banner .grow{flex:1 1 220px;min-width:0}
.live-banner .txt{font-size:.92rem;color:#8a1c12;font-weight:700}

.demo-note{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:14px 0 0;padding:11px 14px;border-radius:var(--radius);
  background:#f6f3ff;border:1px solid #ded3fb;
  font-size:.88rem;color:#4c3596;
}

.soon-banner{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:16px 0 0;padding:13px 15px;border-radius:var(--radius);
  background:var(--paper-2);border:1px dashed var(--line-2);
}
.soon-banner .grow{flex:1 1 220px;min-width:0}

/* ---------------------------------------------------------------------
   Lưới lô hàng
   --------------------------------------------------------------------- */
.lot-sec{padding:26px 0 0}
.lot-toolbar{display:flex;align-items:center;gap:9px;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.lot-toolbar h2{font-size:1.12rem;letter-spacing:-.02em}

.lot-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){.lot-grid{grid-template-columns:repeat(3,1fr);gap:14px}}
@media(min-width:900px){.lot-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1200px){.lot-grid{grid-template-columns:repeat(5,1fr)}}

.lot-card{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:16px;
  background:var(--paper);overflow:hidden;
  transition:box-shadow .16s ease, transform .16s ease, opacity .2s ease;
}
.lot-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.lot-card:hover .lot-media img{transform:scale(1.04)}
.lot-card.is-fresh{animation:dropin .45s cubic-bezier(.2,.8,.2,1)}
@keyframes dropin{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}}
.lot-card.is-sold{opacity:.6}
.lot-card.is-sold .lot{background:var(--ink-3)}

.lot-media{position:relative;display:block;aspect-ratio:1;background:var(--paper-3);overflow:hidden}
.lot-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.lot-media .placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font:800 1.4rem/1 var(--mono);letter-spacing:.12em;color:#cec5b2;
  background:repeating-linear-gradient(45deg,var(--paper-3),var(--paper-3) 9px,#eee7da 9px,#eee7da 18px);
}
.lot-media .lot{position:absolute;top:8px;left:8px;z-index:2}
.lot-fresh{position:absolute;top:8px;right:8px;z-index:2;background:var(--live);color:#fff;
  font-size:.64rem;font-weight:800;letter-spacing:.07em;padding:4px 7px;border-radius:6px;text-transform:uppercase}

.lot-body{padding:10px 11px 11px;display:flex;flex-direction:column;gap:3px;flex:1}
.lot-title{font-size:.9rem;font-weight:600;line-height:1.35;min-height:calc(.9rem * 1.35 * 2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lot-price{font-size:1.12rem;font-weight:850;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.lot-attrs{font-size:.76rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lot-actions{margin-top:auto;padding-top:9px}
.lot-actions .btn{width:100%}

/* Bốn trạng thái bật/tắt hoàn toàn bằng class ở thẻ ngoài, để JavaScript
   chuyển tức thì lúc shop bấm "Lên kệ" mà không phải dựng lại HTML. */
.lot-card .stamp,
.lot-card .lock-veil,
.lot-card .lot-fresh,
.lot-card .mine-flag,
.lot-card .act-locked,
.lot-card .act-sold,
.lot-card .act-mine{display:none}

.lot-card.is-locked .act-open{display:none}
.lot-card.is-locked .act-locked{display:block}
.lot-card.is-locked .lock-veil{display:flex}
.lot-card.is-locked .lot-media img,
.lot-card.is-locked .lot-media .placeholder{filter:grayscale(.55) brightness(.94)}

.lot-card.is-sold .act-open,
.lot-card.is-sold .act-locked,
.lot-card.is-sold .lock-veil{display:none}
.lot-card.is-sold .act-sold{display:block}
.lot-card.is-sold .stamp{display:block}

.lot-card.is-fresh .lot-fresh{display:block}

/* Món CHÍNH khách này đang giữ. Cũng đã trừ khỏi kho như "đã bán", nhưng phải
   nhìn ra ngay là của mình — đóng dấu ĐÃ CHỐT lên món mình vừa săn được là
   cách nhanh nhất làm khách hoảng giữa buổi live. */
.lot-card.is-mine{border-color:#f0cf9c;background:#fffdf8}
.lot-card.is-mine .act-open,
.lot-card.is-mine .act-sold,
.lot-card.is-mine .act-locked,
.lot-card.is-mine .stamp,
.lot-card.is-mine .lock-veil{display:none}
.lot-card.is-mine .act-mine{display:flex}
.lot-card.is-mine .mine-flag{display:flex}
.mine-flag{
  position:absolute;left:8px;right:8px;bottom:8px;z-index:3;
  align-items:center;justify-content:center;gap:5px;
  background:rgba(194,96,12,.94);color:#fff;
  border-radius:8px;padding:5px 8px;
  font-size:.7rem;font-weight:800;letter-spacing:.01em;
}
.act-mine{background:var(--hold-dim);color:var(--hold);border:1px solid #f0cf9c}
.act-mine:hover{background:var(--hold);color:#fff;border-color:var(--hold)}

.lock-veil{
  position:absolute;inset:0;z-index:3;
  align-items:flex-end;justify-content:center;padding-bottom:10px;
  background:linear-gradient(180deg,rgba(15,15,18,0) 45%,rgba(15,15,18,.55));
}
.lock-txt{
  background:rgba(15,15,18,.86);color:#fff;
  border-radius:99px;padding:5px 11px;
  font-size:.7rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;
}

/* Thanh giữ hàng dính đáy màn hình — đồng hồ không bao giờ khuất */
.holdbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;align-items:center;gap:12px;
  padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:var(--ink);color:#fff;
  box-shadow:0 -8px 28px -12px rgba(0,0,0,.5);
}
.holdbar .clock{font:800 1.05rem/1 var(--mono);color:#ffb4ac;font-variant-numeric:tabular-nums}
.holdbar .lbl{font-size:.78rem;color:#a9a9b8}
.holdbar .btn{margin-left:auto;flex:0 0 auto}
.holdbar.is-urgent{background:var(--err)}
.holdbar.is-urgent .clock{color:#fff}
.holdbar.is-urgent .lbl{color:#ffd9d5}
/* Chỗ trống chừa cho thanh dính đáy — cùng bật/tắt với thanh. */
.holdbar-space{height:74px}

/* ---------------------------------------------------------------------
   THÔNG BÁO & LỜI NHẮC
   Hai loại khác nhau hẳn:
     .toast — việc đã xong, tự tắt, không cản đường ai
     .nudge — còn việc phải làm, nằm lại tới khi khách bấm
   --------------------------------------------------------------------- */
.toast{
  position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:90;
  max-width:min(92vw,420px);
  padding:11px 16px;border-radius:99px;
  background:var(--ink);color:#fff;
  font-size:.87rem;font-weight:600;text-align:center;
  box-shadow:var(--shadow-lg);
  animation:toast-in .22s cubic-bezier(.2,.8,.2,1);
}
.toast.is-out{opacity:0;transform:translateX(-50%) translateY(6px);transition:.5s ease}
@keyframes toast-in{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1}}

.nudge{
  position:fixed;left:12px;right:12px;bottom:96px;z-index:90;
  display:flex;align-items:center;gap:12px;
  max-width:600px;margin:0 auto;
  padding:13px 14px;border-radius:16px;
  background:var(--paper);border:1px solid #ffc9c2;
  box-shadow:var(--shadow-lg);
  animation:toast-in .22s cubic-bezier(.2,.8,.2,1);
}
.nudge .grow{
  min-width:0;display:flex;flex-direction:column;gap:2px;
  font-size:.88rem;line-height:1.4;color:var(--ink-2);
}
.nudge .grow b{color:var(--ink);font-size:.92rem}
.nudge .grow .sub{font-size:.8rem;color:var(--ink-3)}
.nudge .btn{flex:0 0 auto}
.nudge-x{
  flex:0 0 auto;width:26px;height:26px;padding:0;
  border:0;background:transparent;color:var(--ink-3);
  font-size:.8rem;line-height:1;cursor:pointer;border-radius:7px;
}
.nudge-x:hover{background:var(--paper-3);color:var(--ink)}
@media(max-width:520px){
  .nudge{flex-wrap:wrap}
  .nudge .grow{flex:1 1 100%;order:1}
  .nudge .btn{order:2;flex:1}
  .nudge-x{order:3}
}

/* =====================================================================
   MÀN GIAO DỊCH — giỏ, địa chỉ, đơn, tra cứu

   Trục giữa hẹp hơn phần còn lại của web là CỐ Ý: lưới tủ đồ càng rộng càng
   xem được nhiều món, còn một dòng địa chỉ kéo dài 1600px thì không ai điền
   nổi. Mọi khối trong nhóm này dùng chung một bề rộng để lề trái thẳng hàng.
   ===================================================================== */
.flow-head,.hold-stack,.checkout,.co-clock,.ticket,.ord-cols,.ord-acts,
.pay-panel,.lookup,.mo-sec,.flow-note{max-width:1000px;margin-inline:auto}

.flow-head{padding:20px 0 2px}
.flow-head h1{font-size:clamp(1.5rem,4.2vw,2.1rem);letter-spacing:-.035em;margin-top:8px}
.flow-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.flow-head-row form{flex:0 0 auto;padding-bottom:4px}
.flow-head .t-lead{margin-top:6px}
.crumb{display:inline-flex;align-items:center;gap:6px;font-size:.87rem;color:var(--ink-3);text-decoration:none}
.crumb:hover{color:var(--ink)}

.iconbtn{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:9px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink-3);
  font-size:.8rem;line-height:1;cursor:pointer;transition:.15s ease;
}
.iconbtn:hover{background:var(--err-dim);border-color:transparent;color:var(--err)}

.panel{border:1px solid var(--line);border-radius:18px;background:var(--paper);padding:16px;margin-top:16px}
.panel-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}

.totals{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-2)}
.totals .line{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:.92rem;color:var(--ink-2)}
.totals .line.grand{margin-top:6px;padding-top:10px;border-top:1px solid var(--line);
  font-size:1.1rem;font-weight:800;color:var(--ink)}
.totals .line b{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------------------------------------------------------------------
   GIỎ = những món ĐANG BỊ GIỮ. Đồng hồ to hơn giá tiền vì hết giờ là mất
   món, còn giá thì đằng nào cũng trả khi nhận hàng.
   --------------------------------------------------------------------- */
.hold-stack{display:grid;gap:16px;margin-top:18px}
.hold-card{
  border:1px solid var(--line);border-radius:20px;background:var(--paper);
  padding:0 16px 16px;box-shadow:var(--shadow);
}
.hold-top{display:flex;align-items:center;gap:11px;padding:14px 0 12px;border-bottom:1px solid var(--line)}
.hold-top .grow{display:flex;flex-direction:column;gap:1px;min-width:0}
.hold-top b{font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shop-avatar.sm{flex:0 0 40px;width:40px;height:40px;border-radius:12px;font-size:1rem}

.hold-clock{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:6px 13px;border-radius:12px;
  background:var(--hold-dim);color:var(--hold);
}
.hold-clock .countdown{font-size:1.16rem}
.hold-clock .lbl{font-size:.62rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;opacity:.8}

.hold-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.hold-item:last-child{border-bottom:0}
.hold-thumb{
  flex:0 0 58px;width:58px;height:72px;border-radius:11px;overflow:hidden;
  background:var(--paper-3);display:flex;align-items:center;justify-content:center;text-decoration:none;
}
.hold-thumb img{width:100%;height:100%;object-fit:cover}
.hold-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.hold-info b{font-size:.94rem;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hold-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hold-price{flex:0 0 auto;font-size:1rem;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}

.hold-acts{display:flex;gap:10px;margin-top:16px}
.hold-acts .btn{flex:1}
.hold-acts .btn-live{flex:1.7}
.hold-acts .btn-quiet{border:1px solid var(--line-2);background:var(--paper)}
@media(max-width:560px){
  .hold-acts{flex-direction:column}
  .hold-thumb{flex-basis:50px;width:50px;height:62px}
  .hold-price{font-size:.92rem}
}

/* ---------------------------------------------------------------------
   ĐIỀN ĐỊA CHỈ
   Máy tính: form trái, tóm tắt đơn dính bên phải — gõ tới ô cuối vẫn thấy
   mình trả bao nhiêu. Điện thoại: tóm tắt lên trước cho khách yên tâm.
   --------------------------------------------------------------------- */
.co-clock{
  position:sticky;top:57px;z-index:40;
  display:flex;align-items:center;gap:12px;
  margin-top:14px;padding:10px 14px;border-radius:16px;
  background:var(--hold-dim);border:1px solid #f4dfc0;
  box-shadow:var(--shadow);
}
.co-clock .grow{display:flex;flex-direction:column;gap:1px;min-width:0}
.co-clock b{font-size:.92rem;color:#8a4708}
.co-clock .t-xs{color:var(--hold)}
.co-clock-num{
  flex:0 0 auto;font:800 1.3rem/1 var(--mono);color:var(--hold);
  font-variant-numeric:tabular-nums;
  background:var(--paper);border-radius:11px;padding:9px 12px;
}
@media(max-width:560px){.co-clock .t-xs{display:none}}

.checkout{display:grid;gap:18px;margin-top:18px}
@media(min-width:920px){
  .checkout{grid-template-columns:minmax(0,1fr) 330px;gap:28px;align-items:start}
  /* Đặt vị trí bằng lưới chứ không đổi thứ tự HTML: trên điện thoại tóm tắt
     phải đứng trước form, trên máy tính phải nằm cột phải. */
  .checkout > .co-form{grid-column:1;grid-row:1}
  .checkout > .co-side{grid-column:2;grid-row:1;position:sticky;top:132px}
}

.co-card{border:1px solid var(--line);border-radius:18px;background:var(--paper-2);padding:14px 15px}
.co-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:4px}
.co-card-head a{color:var(--ink-3)}
.co-list{display:grid;gap:10px;padding:10px 0 0}
.co-list li{display:flex;align-items:center;gap:10px}
.co-list .grow{display:flex;flex-direction:column;gap:3px;min-width:0;align-items:flex-start}
.co-list b{font-size:.88rem;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.co-list .t-num{font-size:.9rem;white-space:nowrap}
.co-thumb{
  flex:0 0 44px;width:44px;height:52px;border-radius:9px;overflow:hidden;background:var(--paper-3);
  display:flex;align-items:center;justify-content:center;
}
.co-thumb img{width:100%;height:100%;object-fit:cover}

.co-form{display:flex;flex-direction:column;gap:16px}
.co-block{
  display:flex;flex-direction:column;gap:12px;
  border:1px solid var(--line);border-radius:18px;background:var(--paper);padding:16px;
}
.co-step{font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.co-submit{margin-top:2px}
.co-assure{display:grid;gap:6px;font-size:.8rem;color:var(--ink-3);line-height:1.5;padding-left:16px}
.co-assure li{position:relative}
.co-assure li::before{content:"✓";position:absolute;left:-16px;color:var(--ok);font-weight:800}

/* ---------------------------------------------------------------------
   ĐƠN ĐÃ CHỐT — dựng như tờ biên lai, có đường răng cưa xé ngang
   --------------------------------------------------------------------- */
.ticket{
  position:relative;margin-top:20px;
  border:1px solid var(--line);border-radius:20px;background:var(--paper);
  box-shadow:var(--shadow);overflow:hidden;
}
.ticket-top{text-align:center;padding:26px 20px 22px}
.ticket-lbl{margin-top:16px;font-size:.74rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3)}
.ticket-code{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:8px 0 12px}
.ticket-code span{font:850 clamp(1.5rem,6vw,2.1rem)/1 var(--mono);letter-spacing:.09em}
.copybtn{
  border:1px solid var(--line-2);background:var(--paper-2);color:var(--ink-2);
  border-radius:99px;padding:6px 13px;font-size:.78rem;font-weight:700;cursor:pointer;transition:.15s ease;
}
.copybtn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.copybtn.is-done{background:var(--ok-dim);border-color:transparent;color:var(--ok)}

/* Đường xé: hai khuyết tròn hai bên + nét đứt ở giữa */
.ticket-rip{position:relative;height:18px;background:var(--paper)}
.ticket-rip::before,.ticket-rip::after{
  content:"";position:absolute;top:50%;transform:translateY(-50%);
  width:18px;height:18px;border-radius:50%;background:var(--paper-2);
  border:1px solid var(--line);
}
.ticket-rip::before{left:-10px}
.ticket-rip::after{right:-10px}
.ticket-foot{
  padding:16px 20px 20px;background:var(--paper);
  border-top:1px dashed var(--line-2);
}
.ticket.is-dead{border-color:#f3cdc9}
.ticket.is-dead .ticket-code span{color:var(--ink-3);text-decoration:line-through}

.timeline{display:flex;gap:0;overflow-x:auto;padding-bottom:2px}
.timeline .node{flex:1;min-width:74px;text-align:center;position:relative;padding-top:22px;
  font-size:.74rem;color:var(--ink-3)}
.timeline .node::before{content:"";position:absolute;top:4px;left:50%;transform:translateX(-50%);
  width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--line-2);z-index:2}
.timeline .node::after{content:"";position:absolute;top:9px;left:-50%;width:100%;height:2px;background:var(--line-2)}
.timeline .node:first-child::after{display:none}
.timeline .node.done{color:var(--ink-2)}
.timeline .node.done::before{background:var(--ok);border-color:var(--ok)}
.timeline .node.done::after{background:var(--ok)}
/* Bước hiện tại: chấm to hơn + vòng sáng, để mắt bắt ngay "đơn đang ở đâu" */
.timeline .node.at{color:var(--ink);font-weight:800}
.timeline .node.at::before{width:16px;height:16px;top:2px;box-shadow:0 0 0 4px var(--ok-dim)}

/* Điện thoại: năm bước nằm ngang trong 340px thì phải kéo ngang mới thấy bước
   cuối — mà đây đúng là thứ khách vào xem. Dựng đứng lại, không cuộn gì cả. */
@media(max-width:560px){
  .timeline{display:grid;overflow:visible}
  .timeline .node{
    display:flex;align-items:center;min-height:34px;
    padding:0 0 0 26px;text-align:left;white-space:nowrap;
  }
  .timeline .node::before{top:11px;left:5px;transform:none}
  .timeline .node.at::before{top:9px;left:3px}
  .timeline .node::after{top:-50%;left:10px;width:2px;height:100%}
}

.ord-cols{display:grid;gap:0}
@media(min-width:760px){.ord-cols{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:start}}
.ord-items{display:grid;gap:11px}
.ord-items li{display:flex;align-items:center;gap:10px}
.ord-items .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.ord-items b{font-size:.92rem;line-height:1.35}
.ord-items .t-num{white-space:nowrap;font-size:.95rem}

.ship-to{display:flex;flex-direction:column;gap:4px;font-size:.94rem;line-height:1.5}
.ship-to .t-num{font-family:var(--mono);font-size:.9rem;color:var(--ink-2)}
.ship-note{margin-top:6px;padding-top:8px;border-top:1px dashed var(--line);font-size:.85rem;color:var(--ink-3)}

.ord-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.ord-acts .btn{flex:1;min-width:150px}
.ord-acts .btn-quiet{background:var(--paper-2)}

/* Huỷ đơn: cố ý để cuối trang và nhạt — đây là lối thoát, không phải lời mời. */
.huy-don{
  display:flex;gap:9px;flex-wrap:wrap;align-items:center;
  max-width:1000px;margin:26px auto 0;padding-top:18px;border-top:1px dashed var(--line-2);
}
.huy-don .input{flex:1;min-width:220px;font-size:.86rem;padding:9px 12px}
.huy-don .btn{flex:0 0 auto;color:var(--err)}
.huy-don .btn:hover{background:var(--err-dim)}

/* khối chuyển khoản + QR */
.pay-panel{border-color:var(--line-2);background:var(--paper-2)}
/* Shop thu tiền trước: đây không còn là gợi ý mà là việc phải làm nốt. */
.pay-panel.is-required{border-color:#f0cf9c;background:#fffdf8;box-shadow:var(--shadow)}
.pay-panel.is-required .btn-live{margin-top:12px}
.pay-row{display:grid;gap:16px;align-items:center}
@media(min-width:560px){.pay-row{grid-template-columns:190px minmax(0,1fr)}}
.pay-qr{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:10px}
/* Chữ nằm dưới ảnh: mã QR tải xong thì nền trắng của ảnh che đi. Mạng chậm mà
   ô vuông trống trơn thì khách tưởng hỏng. */
.pay-qr::after{
  content:"Đang tải mã QR…";position:absolute;inset:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;color:var(--ink-3);
}
.pay-qr img{position:relative;z-index:1}
/* Giữ sẵn chỗ vuông cho mã QR: ảnh này lấy từ dịch vụ ngoài, mạng 3G tải
   chậm — không đặt trước tỉ lệ thì cả khối nhảy dựng lên khi ảnh về. */
/* Nền trong suốt để dòng "đang tải" ở dưới lộ ra khi ảnh chưa về; mã QR do
   dịch vụ trả về vốn đã có nền trắng nên tải xong là che kín. */
.pay-qr img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:8px;background:transparent}
.pay-qr .qr-fallback{display:none;font-size:.8rem;color:var(--ink-3);line-height:1.5;text-align:center;padding:22px 6px}
.pay-qr.is-failed img{display:none}
.pay-qr.is-failed .qr-fallback{display:block}
/* Bảng thông tin chuyển khoản: nhãn trái, giá trị phải — không có rule .kv
   nào ở phía khách nên trước đó nó rơi về <dl> mặc định, tụt dòng lởm chởm. */
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 18px;margin:0 0 10px;font-size:.9rem}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0;font-weight:700;text-align:right;overflow-wrap:anywhere}
.kv dd.t-num{font-family:var(--mono);letter-spacing:.03em}

/* ---------------------------------------------------------------------
   ĐƠN CỦA TÔI

   Chia khu theo VIỆC CỦA KHÁCH. Khu "cần bạn xử lý" được tô khác hẳn: đó là
   thứ duy nhất trên màn này khách phải động tay vào.
   --------------------------------------------------------------------- */
.mo-sec{margin-top:26px}
.mo-sec-head{display:flex;align-items:center;gap:9px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.mo-sec-head h2{font-size:1.08rem;letter-spacing:-.02em}
.mo-sec-note{margin:-4px 0 13px;font-size:.86rem;line-height:1.5;color:var(--hold)}
.is-todo-sec .mo-sec-head{border-bottom-color:#f0cf9c}

.mo-list{display:grid;gap:11px}
@media(min-width:860px){
  .mo-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Khu "cần bạn xử lý" giữ một cột: đây là việc phải làm, cho nó chiếm hết
     bề ngang thay vì nằm nép nửa hàng cạnh khoảng trống. */
  .is-todo-sec .mo-list{grid-template-columns:1fr}
}

.mo{
  display:flex;align-items:center;gap:12px;
  padding:12px;text-decoration:none;
  border:1px solid var(--line);border-radius:18px;background:var(--paper);
  transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.mo:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.mo.is-todo{border-color:#f0cf9c;background:#fffdf8}
.mo.is-todo:hover{border-color:var(--hold)}
/* Đơn đã xong không cần tranh sự chú ý, nhưng vẫn phải đọc được */
.mo.is-done{background:var(--paper-2)}
.mo.is-done .mo-pic{opacity:.72}

/* ---- cụm ảnh món ---- */
.mo-pics{position:relative;flex:0 0 auto;display:flex}
.mo-pic{
  flex:0 0 auto;width:52px;height:64px;border-radius:11px;overflow:hidden;
  background:var(--paper-3);border:2px solid var(--paper);
  display:flex;align-items:center;justify-content:center;
}
/* Chồng lên nhau như xấp ảnh: bốn ô rời nhau ăn hết bề ngang của điện thoại */
.mo-pic + .mo-pic{margin-left:-26px}
.mo.is-done .mo-pic{border-color:var(--paper-2)}
.mo-pic img{width:100%;height:100%;object-fit:cover}
.mo-more{
  align-self:center;margin-left:6px;flex:0 0 auto;
  font-size:.72rem;font-weight:800;color:var(--ink-3);
}

/* ---- phần chữ ---- */
.mo-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mo-top{display:flex;align-items:baseline;gap:10px}
.mo-shop{font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mo-sum{margin-left:auto;flex:0 0 auto;font-size:.95rem;font-weight:850}
.mo-title{
  font-size:.84rem;color:var(--ink-2);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mo-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:3px}
.mo-when{font-size:.74rem;color:var(--ink-3)}
.mo-go{flex:0 0 auto;color:var(--line-2);font-size:1.1rem}
.mo:hover .mo-go{color:var(--ink-3)}

@media(max-width:420px){
  .mo{gap:10px;padding:11px}
  .mo-pic{width:46px;height:57px}
  .mo-pic + .mo-pic{margin-left:-24px}
  .mo-go{display:none}
}

/* nhãn tình trạng đơn — bản cho mặt tiền khách (app.css là bản cho shop) */
.st{display:inline-flex;align-items:center;padding:3px 9px;border-radius:99px;
  font-size:.72rem;font-weight:700;background:var(--paper-3);color:var(--ink-2);white-space:nowrap}
.st-new{background:var(--live-dim);color:var(--live)}
.st-confirmed,.st-packed{background:var(--hold-dim);color:var(--hold)}
.st-shipped{background:#e8f0fb;color:#1e5aa8}
.st-delivered{background:var(--ok-dim);color:var(--ok)}
.st-cancelled,.st-returned{background:var(--err-dim);color:var(--err)}

/* nhãn riêng cho đường đi của TIỀN, không lẫn với đường đi của hàng */
.st-pay-wait{background:var(--hold);color:#fff}
.st-pay-claim{background:var(--hold-dim);color:var(--hold)}
.st-pay-ok{background:var(--ok-dim);color:var(--ok)}
/* Đơn huỷ mà khách đã (báo) chuyển tiền: việc còn lại là đòi tiền về. */
.st-pay-refund{background:var(--err);color:#fff}

/* ---------------------------------------------------------------------
   TRA CỨU ĐƠN
   --------------------------------------------------------------------- */
.lookup{display:flex;justify-content:center;padding:30px 0}
.lookup-card{
  width:100%;max-width:460px;text-align:center;
  border:1px solid var(--line);border-radius:22px;background:var(--paper);
  padding:30px 24px 24px;box-shadow:var(--shadow);
}
.lookup-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;margin-bottom:14px;border-radius:14px;
  background:var(--ink);color:#fff;font:850 1rem/1 var(--mono);letter-spacing:.06em;
}
.lookup-card h1{font-size:1.5rem}
.lookup-card > .t-small{margin-top:7px}
.lookup-form{display:grid;gap:10px;margin:18px 0 14px}
.lookup-input{
  text-align:center;font:800 1.3rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  padding:14px 12px;
}
.lookup-input::placeholder{color:#cfc7b7;letter-spacing:.14em}
.lookup-card .hint{text-align:center}

/* ---------------------------------------------------------------------
   CHI TIẾT MÓN
   --------------------------------------------------------------------- */
/* Cột ảnh cố ý KHÔNG chia đôi màn hình: ảnh 4/5 kéo hết nửa màn 1600px thì
   cao gần 900px, khách phải cuộn mới thấy nút mua. */
.detail{display:grid;gap:20px;padding-top:14px;max-width:1000px;margin-inline:auto}
@media(min-width:820px){.detail{grid-template-columns:minmax(0,400px) minmax(0,1fr);align-items:start;gap:34px}}
.detail-media .frame{
  position:relative;border-radius:20px;overflow:hidden;background:var(--paper-3);aspect-ratio:4/5;
  border:1px solid var(--line);
}
.detail-media .frame img{width:100%;height:100%;object-fit:cover}
.detail-media .frame .lot{position:absolute;top:12px;left:12px;z-index:2}
.detail-media .placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font:800 2.4rem/1 var(--mono);letter-spacing:.1em;color:#cec5b2;
  background:repeating-linear-gradient(45deg,var(--paper-3),var(--paper-3) 11px,#eee7da 11px,#eee7da 22px);
}
.detail-media .stamp{font-size:1.8rem}

.g-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:2px}
.g-thumb{
  flex:0 0 66px;width:66px;height:80px;padding:0;overflow:hidden;cursor:pointer;
  border:2px solid transparent;border-radius:11px;background:var(--paper-3);
}
.g-thumb img{width:100%;height:100%;object-fit:cover}
.g-thumb.is-on{border-color:var(--ink)}

.detail-info h1{font-size:clamp(1.35rem,4vw,1.9rem);margin:10px 0 6px}
.detail-price{font-size:2rem;font-weight:850;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.spec{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;margin:18px 0;font-size:.92rem}
.spec dt{color:var(--ink-3)}
.spec dd{margin:0;font-weight:600}
.detail-desc{white-space:pre-line;color:var(--ink-2);line-height:1.6;font-size:.94rem}
.detail-info .note{margin-top:18px}
.detail-buy{margin-top:18px}
.detail-info .hint{margin-top:10px}

.empty-state{text-align:center;padding:52px 20px;color:var(--ink-3)}
.empty-state .mark{font:800 2rem/1 var(--mono);color:var(--line-2);margin-bottom:14px}