/* =========================================================================
   🍡 THEME CUTE PASTEL — Tiệm Tà Tữa
   Lớp phủ giao diện, nạp SAU cùng để khoác "áo" mới cho style.css,
   baucua.css, xidach.css, banbe.css.

   Nguyên tắc: mọi màu đều suy ra từ bảng màu người chơi đang chọn
   (--bg / --panel / --line / --ink / --soft / --pink do game.js gán),
   nên 12 tông màu trong Cài đặt đều đẹp, kể cả tông "Đêm dịu".

   Muốn quay về giao diện cũ: xoá dòng <link> tới file này trong index.html.
   ========================================================================= */

/* ---------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------- */
:root{
  /* Màu nền tảng — chỉ là giá trị dự phòng trước khi game.js chạy,
     trùng với tông mặc định "Sữa dâu". */
  --bg:#fff4f8;
  --panel:#ffffff;
  --line:#ffdcea;
  --ink:#56405a;
  --soft:#7d6584;
  --pink:#cf3d79;
  --pink-d:#a12a5d;

  /* Sắc độ suy ra từ tông hiện hành */
  --bg-2:color-mix(in srgb, var(--line) 45%, var(--bg));
  --bg-3:color-mix(in srgb, var(--line) 22%, var(--bg));
  --panel-2:color-mix(in srgb, var(--bg) 45%, var(--panel));
  --edge:color-mix(in srgb, var(--line) 78%, var(--panel));
  --pink-mid:color-mix(in srgb, var(--pink) 45%, var(--panel));
  --pink-tint:color-mix(in srgb, var(--pink) 18%, var(--panel));
  --pink-soft:color-mix(in srgb, var(--pink) 10%, var(--panel));
  --sheen:rgba(255,255,255,.45);

  /* Màu ngữ nghĩa — giữ cố định để người chơi luôn nhận ra ý nghĩa */
  --mint:#7fd8b4;   --mint-s:#128a63;  --mint-soft:#eafbf3;
  --lav:#cdb8f5;    --lav-s:#7a4fc9;   --lav-soft:#f5efff;
  --sky:#b7e2fb;    --sky-s:#1f6f9f;   --sky-soft:#eff8fe;
  --butter:#ffe49c; --gold:#eda21f;    --gold-s:#8f5d02;  --gold-soft:#fff7e4;
  --peach:#ffc9ab;  --peach-soft:#fff3ec;
  --warn:#d33f63;   --warn-soft:#fff0f4;

  /* Quầy gỗ & bảng menu */
  --counter:color-mix(in srgb, var(--line) 80%, var(--bg));
  --counter-top:color-mix(in srgb, var(--line) 42%, var(--panel));
  --chalk:var(--panel);
  --chalk-ink:var(--ink);

  /* Bán kính */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;

  /* Đổ bóng mềm */
  --sh-1:0 1px 2px rgba(80,50,80,.06), 0 2px 6px rgba(80,50,80,.06);
  --sh-2:0 2px 4px rgba(80,50,80,.07), 0 6px 16px rgba(80,50,80,.09);
  --sh-3:0 6px 14px rgba(80,50,80,.10), 0 18px 40px rgba(80,50,80,.16);
  --sh-in:inset 0 2px 0 var(--sheen);

  /* Gradient dùng lại */
  /* Đỉnh gradient luôn đúng bằng màu nhấn nên chữ trắng luôn đủ tương phản,
     kể cả ở tông tối; độ bóng do lớp ::before của .big tạo ra. */
  --g-pink:linear-gradient(180deg, var(--pink), color-mix(in srgb, var(--pink) 82%, var(--pink-d)));
  --g-mint:linear-gradient(180deg,#8ee2c1,#3cb392);
  --g-butter:linear-gradient(180deg,#ffeec0,#ffdc88);
  --g-lav:linear-gradient(180deg,#ddccff,#c1a6f2);
  --g-rainbow:linear-gradient(90deg,#ffa8c8,#ffd9a3,#c8f0dc,#b7e2fb,#d9c6fa);

  --font-display:"Grandstander","Baloo 2",system-ui,sans-serif;
  --dur:.16s;
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
}

/* Tông tối: làm sáng các màu ngữ nghĩa cho dễ đọc */
body.dark{
  --mint-s:#6fdcb4; --mint-soft:rgba(111,220,180,.14);
  --lav-s:#c4a6f7;  --lav-soft:rgba(196,166,247,.14);
  --sky-s:#8fcdf2;  --sky-soft:rgba(143,205,242,.14);
  --gold-s:#f5c76b; --gold-soft:rgba(245,199,107,.14);
  --warn:#ff8fa8;   --warn-soft:rgba(255,143,168,.14);
  --peach-soft:rgba(255,201,171,.12);
  --sheen:rgba(255,255,255,.14);
}

/* ---------------------------------------------------------------
   2. NỀN — voan pastel + chấm bi trên ảnh tiệm
   --------------------------------------------------------------- */
body,body:not(.selling){background:var(--bg)}

body:not(.selling)::before{
  background:
    radial-gradient(circle at 12px 12px, color-mix(in srgb, var(--pink) 26%, transparent) 2.4px, transparent 3px) 0 0/48px 48px,
    radial-gradient(circle at 36px 30px, color-mix(in srgb, var(--pink) 16%, transparent) 2px, transparent 2.6px) 0 0/48px 48px,
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 72%, transparent) 0,
      color-mix(in srgb, var(--bg) 58%, transparent) 28%,
      color-mix(in srgb, var(--bg) 84%, transparent) 70%,
      color-mix(in srgb, var(--bg) 95%, transparent) 100%),
    url(../img/tt-prep.jpg) center top/cover no-repeat,
    var(--bg) !important;
}

/* ---------------------------------------------------------------
   3. CHỮ
   --------------------------------------------------------------- */
.card h1,.card h2,.board h2,.sec,.rh,.tpage h2,.h-m,.verdict-title,.ulv-title,.bc-title,.xd-title{
  font-family:var(--font-display);
  letter-spacing:.2px;
}
.h-m{font-weight:600}
.sec{color:var(--ink);display:flex;align-items:center;gap:7px}
.sec::before{
  content:"";width:9px;height:9px;border-radius:50%;flex:none;
  background:var(--g-pink);
  box-shadow:0 0 0 3px var(--pink-soft);
}
.note,.legend,.wl,.gh span,.gt span:last-child,.gr2 .gv,.tgrp,.thead,.rday{color:var(--soft)}

/* ---------------------------------------------------------------
   7. DÒNG DANH SÁCH
   --------------------------------------------------------------- */
.rowi{
  border-bottom:1.5px solid var(--bg-3);
  padding:9px 0;
}
.rowi .nm{color:var(--ink)}
.rowi .sub{color:var(--soft)}
.rowi .sub.low{color:var(--warn)}
.rowi .icon{
  display:grid;place-items:center;
  width:34px;height:34px;
  background:var(--bg-2);
  border-radius:var(--r-sm);
  box-shadow:var(--sh-in);
}
.sw{border:2px solid var(--edge);box-shadow:var(--sh-1)}

/* ---------------------------------------------------------------
   8. NÚT — kiểu "kẹo dẻo": viền mềm, bóng đáy, bấm lún
   --------------------------------------------------------------- */
.sbtn,.setb,.pager button,.thb,.stp,.stab,.chip,.rpbtn,.danger,.bb-subtab{
  transition:transform var(--dur) var(--ease-pop), box-shadow var(--dur),
             background var(--dur), border-color var(--dur), color var(--dur);
}

.sbtn{
  border:2px solid var(--edge);
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  color:var(--ink);
  border-radius:var(--r-sm);
  min-height:34px;
  padding:5px 10px;
  box-shadow:0 2px 0 var(--edge);
}
.sbtn:active:not(:disabled){transform:translateY(2px);box-shadow:0 0 0 var(--edge)}
.sbtn.pri{
  background:var(--g-pink);
  border-color:var(--pink-d);
  color:#fff;
  box-shadow:0 3px 0 var(--pink-d), var(--sh-1);
}
.sbtn.pri:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 0 var(--pink-d)}
.sbtn.ghost{border-radius:var(--r-md)}
.sbtn:disabled{opacity:.42;box-shadow:none}

/* Nút lớn (CTA) */
.big{
  background:var(--g-pink);
  border:0;
  border-radius:var(--r-lg);
  padding:14px 26px;
  font-size:1.15rem;
  font-family:var(--font-display);
  letter-spacing:.3px;
  box-shadow:0 5px 0 var(--pink-d), 0 10px 24px color-mix(in srgb, var(--pink) 32%, transparent);
  position:relative;
  overflow:hidden;
  transition:transform var(--dur) var(--ease-pop), box-shadow var(--dur), filter var(--dur);
}
/* Vệt sáng bóng kẹo */
.big::before{
  content:"";position:absolute;left:0;right:0;top:0;height:42%;
  background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0));
  border-radius:var(--r-lg) var(--r-lg) 50% 50%/var(--r-lg) var(--r-lg) 20px 20px;
  pointer-events:none;
}
.big:active:not(:disabled){
  transform:translateY(4px);
  box-shadow:0 1px 0 var(--pink-d), 0 4px 12px color-mix(in srgb, var(--pink) 24%, transparent);
}
.big:disabled{opacity:.55;box-shadow:0 3px 0 color-mix(in srgb, var(--pink-d) 55%, transparent)}
.big.blocked{filter:grayscale(.35)}

.nextb{
  background:var(--g-pink);
  border-radius:var(--r-sm);
  box-shadow:0 3px 0 var(--pink-d);
  min-height:46px;
}
.nextb:active{transform:translateY(3px);box-shadow:0 0 0 var(--pink-d)}

.openbar{
  background:linear-gradient(transparent,
    color-mix(in srgb, var(--bg) 88%, transparent) 34%,
    var(--bg) 72%);
  padding-top:16px;
}

/* Nút nguy hiểm */
.danger{
  border:2px solid var(--warn);
  color:var(--warn);
  background:var(--warn-soft);
  border-radius:var(--r-md);
  box-shadow:0 2px 0 color-mix(in srgb, var(--warn) 28%, transparent);
}
.danger:active{transform:translateY(2px);box-shadow:none}

/* Phân trang */
.pager button{
  border:2px solid var(--edge);
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border-radius:var(--r-sm);
  box-shadow:0 2px 0 var(--edge);
  min-width:40px;height:40px;
}
.pager button.on{
  background:var(--g-pink);border-color:var(--pink-d);color:#fff;
  box-shadow:0 2px 0 var(--pink-d);
}
.pager span{color:var(--soft)}

/* Chip / segment / tab con */
.chip{
  border:2px solid var(--edge);
  background:var(--panel-2);
  border-radius:var(--r-pill);
  color:var(--ink);
  min-height:36px;
  padding:7px 10px;
  box-shadow:var(--sh-1);
}
.chip.on{
  border-color:var(--pink);
  background:var(--pink-soft);
  color:var(--pink);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--pink) 22%, transparent);
}
.chip:active{transform:scale(.96)}

.stab,.stp{
  border:2px solid var(--edge);
  background:var(--panel-2);
  color:var(--soft);
  border-radius:var(--r-pill);
  min-height:38px;
  box-shadow:var(--sh-1);
}
.stab.on{
  background:var(--g-pink);border-color:var(--pink-d);color:#fff;
  box-shadow:0 3px 0 var(--pink-d);
}
.stp.on{border-color:var(--pink);background:var(--pink-soft);color:var(--pink)}
.stp.done{border-color:var(--mint);background:var(--mint-soft);color:var(--mint-s)}
.stab:active,.stp:active{transform:scale(.96)}

.thb{
  border:2px solid var(--edge);
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border-radius:var(--r-md);
  box-shadow:0 2px 0 var(--edge);
}
.thb.on{
  border-color:var(--pink);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--pink) 26%, transparent), 0 2px 0 var(--pink-mid);
}
.thb i{box-shadow:0 0 0 2px var(--edge), var(--sh-1)}

.multi span{border:1.5px solid var(--edge);border-radius:var(--r-pill);padding:2px 9px;background:var(--panel-2)}
.multi span.cur{border-color:var(--pink);color:var(--pink);background:var(--pink-soft)}
.multi span.dn{border-color:var(--mint);color:var(--mint-s);background:var(--mint-soft)}

/* Nút cài đặt hàng dài */
.setb{
  border:2px solid var(--edge);
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border-radius:var(--r-md);
  box-shadow:0 3px 0 var(--edge), var(--sh-1);
  min-height:56px;
}
.setb:active{transform:translateY(3px);box-shadow:0 0 0 var(--edge)}
.setb small{color:var(--soft)}
.setb.warnb{
  border-color:color-mix(in srgb, var(--warn) 42%, var(--line));
  color:var(--warn);background:var(--warn-soft);
  box-shadow:0 3px 0 color-mix(in srgb, var(--warn) 24%, transparent);
}

/* ---------------------------------------------------------------
   9. Ô NHẬP
   --------------------------------------------------------------- */
.pin input,.step5 input,.pinbox,.rpin{
  border:2px solid var(--edge);
  background:var(--panel-2);
  color:var(--ink);
  border-radius:var(--r-sm);
  box-shadow:inset 0 2px 4px rgba(80,50,80,.05);
  transition:border-color var(--dur), box-shadow var(--dur);
}
.pin input:focus,.step5 input:focus,.pinbox:focus,.rpin:focus{
  border-color:var(--pink-mid);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--pink) 20%, transparent);
  outline:none;
}
.pin span{color:var(--soft)}
button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--pink);outline-offset:3px;border-radius:var(--r-xs);
}

/* ---------------------------------------------------------------
   10. THẺ, MỤC TIÊU, KPI, THANH TIẾN ĐỘ
   --------------------------------------------------------------- */
.goalc{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:2px solid var(--edge);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
  padding:12px 14px;
}
.goalc.done{border-color:var(--mint);color:var(--mint-s);background:var(--mint-soft)}
.goalc.warnc{border-color:var(--warn);color:var(--warn);background:var(--warn-soft)}
.gb{background:var(--bg-2);border-radius:var(--r-pill);height:8px;overflow:hidden}
.gb i{background:var(--g-butter);border-radius:var(--r-pill);transition:width .4s var(--ease-pop)}
.gr.ok .gt span:first-child{color:var(--mint-s)}
.gr.ok .gb i,.gr2.ok .gb i{background:var(--g-mint)}

.kpis div{
  background:linear-gradient(180deg, var(--panel), var(--bg-3));
  border:1.5px solid var(--edge);
  border-radius:var(--r-md);
  padding:9px 6px;
  color:var(--soft);
  box-shadow:var(--sh-1);
}
.kpis b{color:var(--ink);font-family:var(--font-display)}

.fore{
  background:var(--lav-soft);
  border:1.5px solid color-mix(in srgb, var(--lav) 45%, var(--panel));
  border-radius:var(--r-md);
  padding:10px 12px;
}
.fore.big2{color:var(--lav-s)}

.lvl{
  background:linear-gradient(180deg, var(--panel), var(--gold-soft));
  border:2px solid var(--butter);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
  padding:10px 14px;
}
.lvl small{color:var(--gold-s)}
.lvup{background:var(--gold-soft);border:1.5px dashed var(--gold);border-radius:var(--r-sm)}
.lvs div{background:var(--bg-3);border-radius:var(--r-sm);border:1px solid var(--edge)}
.lvs b{color:var(--pink)}

.life{border-radius:var(--r-pill);padding:1px 7px}
.life.l1{background:var(--warn-soft);color:var(--warn);border:1px solid color-mix(in srgb, var(--warn) 30%, transparent)}
.life.l3{background:var(--gold-soft);color:var(--gold-s);border:1px solid color-mix(in srgb, var(--gold) 34%, transparent)}
.life.l0{background:var(--bg-2);color:var(--soft);border:1px solid var(--edge)}

.tag{background:var(--g-pink);border-radius:var(--r-pill);padding:1px 8px;box-shadow:var(--sh-1)}
.sold{background:var(--warn);border-radius:var(--r-pill);padding:1px 7px}
.okline{color:var(--mint-s)}
.warnline,.lowstar{color:var(--warn)}
.wbox{
  background:var(--warn-soft);
  border:1px solid color-mix(in srgb, var(--warn) 24%, transparent);
  border-radius:var(--r-sm);padding:7px 10px;
}

.final{
  background:linear-gradient(180deg, var(--pink-soft), var(--pink-tint));
  border:2px solid var(--edge);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
}
.final small{color:var(--soft)}

.evc{
  background:linear-gradient(180deg, var(--panel), var(--gold-soft));
  border:2px solid var(--butter);
  border-radius:var(--r-md);
  box-shadow:var(--sh-1);
}
.evc.loan{background:linear-gradient(180deg, var(--panel), var(--mint-soft));border-color:var(--mint)}
.evc small{color:var(--soft)}

.c8{
  background:var(--panel-2);
  border:2px dashed var(--pink-mid);
  border-radius:var(--r-md);
  color:var(--pink);
}

/* ---------------------------------------------------------------
   11. BẢNG SỐ LIỆU
   --------------------------------------------------------------- */
.trow,.crow,.gtab td,.gtab th{border-bottom:1.5px dashed var(--edge)}
.tbar{background:var(--bg-2);border-radius:var(--r-pill);height:5px}
.tbar i{background:var(--g-lav)}
.crow.sub,.trow.sub,.gtab th{color:var(--soft)}
.dist .bar{background:var(--bg-2);border-radius:var(--r-pill)}
.dist i{background:var(--g-butter);border-radius:var(--r-pill)}
.dist .dstr{border-radius:var(--r-sm)}
.dist .dstr.on{background:var(--pink-soft)}
.revc{color:var(--sky-s)}

/* ---------------------------------------------------------------
   12. ĐÁNH GIÁ — bong bóng chat
   --------------------------------------------------------------- */
.rev{padding:11px 0;border-bottom:1.5px solid var(--bg-3)}
.rface{background:var(--bg-2);border:2px solid var(--edge);box-shadow:var(--sh-1)}
.rstar{border-color:var(--lav) !important;background:var(--lav-soft) !important}
.rev p{
  background:var(--bg-3);
  border-radius:4px 14px 14px 14px;
  padding:7px 10px;
  margin-top:4px;
}
.rev.bad p{background:var(--warn-soft);color:var(--warn)}
.rpbtn{
  border:2px solid var(--edge);
  background:var(--panel-2);
  color:var(--pink);
  border-radius:var(--r-pill);
  padding:4px 14px;
  box-shadow:0 2px 0 var(--edge);
}
.rpbtn:active{transform:translateY(2px);box-shadow:none}
.rrep{
  background:var(--pink-soft);
  border-left:4px solid var(--pink-mid);
  border-radius:4px 14px 14px 4px;
}
.rrep b{color:var(--pink)}
.rrep span{color:var(--ink)}
.rcust-rep{
  background:var(--sky-soft) !important;
  border-left:4px solid var(--sky) !important;
  border-radius:4px 14px 14px 4px;
}
.rcust-head{color:var(--sky-s) !important}
.rpq{
  background:var(--lav-soft);
  border:1.5px solid color-mix(in srgb, var(--lav) 45%, var(--panel));
  border-radius:var(--r-md);color:var(--soft);
}
.rplink{color:var(--pink)}
.star-delta{border-radius:var(--r-pill)}
.star-delta.up{background:var(--mint-soft);color:var(--mint-s);border:1px solid var(--mint)}
.star-delta.down{background:var(--warn-soft);color:var(--warn);border:1px solid color-mix(in srgb, var(--warn) 38%, transparent)}

/* ---------------------------------------------------------------
   13. MODAL, TOAST, SPLASH
   --------------------------------------------------------------- */
.modal{
  background:color-mix(in srgb, var(--ink) 48%, transparent);
  backdrop-filter:blur(6px) saturate(1.1);
  -webkit-backdrop-filter:blur(6px) saturate(1.1);
}
.card{
  background:var(--panel);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-3), 0 0 0 4px var(--sheen);
  padding:26px 20px 22px;
  position:relative;
  overflow:hidden;
  animation:cutePop .28s var(--ease-pop) both;
}
/* Dải cầu vồng trang trí trên đầu thẻ */
.card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:6px;
  background:var(--g-rainbow);
}
.card h1,.card h2{color:var(--ink)}
.card h1{margin-top:8px}
.card p{color:var(--soft)}
@keyframes cutePop{
  from{transform:scale(.9) translateY(10px);opacity:0}
  to{transform:none;opacity:1}
}

.toast{
  background:linear-gradient(180deg, color-mix(in srgb, var(--ink) 86%, var(--panel)), var(--ink));
  color:var(--bg);
  border:2px solid var(--sheen);
  border-radius:var(--r-pill);
  box-shadow:0 8px 22px rgba(60,35,60,.3);
  padding:10px 20px;
}
.toast.show{animation:toastPop .32s var(--ease-pop) both}
@keyframes toastPop{
  from{transform:translateX(-50%) translateY(-14px) scale(.9);opacity:0}
  to{transform:translateX(-50%) translateY(4px) scale(1);opacity:1}
}
.toast.pri{
  background:linear-gradient(180deg, color-mix(in srgb, var(--warn) 80%, #fff), var(--warn)) !important;
  color:#fff !important;
}
.toast.sell{background:color-mix(in srgb, var(--ink) 92%, transparent);color:var(--bg)}

.splash{background:var(--bg)}
.dots i{background:var(--edge);height:9px;border-radius:var(--r-pill)}
.dots i.on{background:var(--g-pink);width:24px}
.tpage h2{color:var(--ink)}
.tpage p,.tour .skip{color:var(--soft)}

/* ---------------------------------------------------------------
   14. MÀN BÁN HÀNG (quầy + lớp chrome của Quầy Pha 3.0)
   --------------------------------------------------------------- */
.counter{
  background:linear-gradient(180deg, var(--counter), color-mix(in srgb, var(--line) 95%, var(--ink)));
  border-top:8px solid var(--counter-top);
  box-shadow:inset 0 6px 14px rgba(80,50,80,.08);
}
.work{color:var(--ink)}
.panel{background:var(--panel);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.cust{
  background:var(--panel);
  border:2px solid var(--edge);
  border-radius:var(--r-md);
  box-shadow:var(--sh-1);
}
.cust.onlc{
  border-color:var(--pink-mid);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--pink) 20%, transparent);
}
.cust.onlc .who{color:var(--pink)}
.cust.empty{border-color:var(--edge);color:var(--soft)}
.who .face{background:var(--bg-2);border:2px solid var(--edge);box-shadow:var(--sh-1)}
.say{background:var(--bg-3);border-radius:4px 14px 14px 14px}
.say b{color:var(--pink)}
.otx .n{background:var(--line);color:var(--ink)}
.otx .oi.ok{color:var(--mint-s)}
.step i{background:var(--g-pink)}
.step.done i{background:var(--g-mint)}
.onl{border:2px solid var(--pink-mid);border-radius:var(--r-md);box-shadow:var(--sh-1)}
.onl .hd{color:var(--pink)}
.ing{
  border:2px solid var(--edge);
  background:var(--panel-2);
  border-radius:var(--r-sm);
  box-shadow:var(--sh-1);
}
.ing.on{border-color:var(--pink);background:var(--pink-soft)}
.ing .cnt{color:var(--soft)}
.ing .cnt.z{color:var(--warn)}
.till{
  background:var(--panel);
  border:2px solid var(--edge);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-3);
}
.straw{background:var(--pink-mid)}
.cupno{color:var(--pink)}

/* Chrome của #q3 (sân khấu vẽ tay) — chỉ chỉnh badge/nút cho hợp tông */
.q3chip.q3on{outline-color:var(--pink-mid) !important}
.q3n{background:var(--pink)}
.q3st{background:var(--sky-s)}
.q3vip{background:var(--gold)}
.q3vipT{background:var(--gold);color:#fff;border-radius:var(--r-sm)}
.q3x{background:var(--warn)}
.q3so{background:var(--warn);border-radius:var(--r-xs)}
.q3lv{background:linear-gradient(90deg, var(--warn), #f6b93b 58%, #3cb392 82%)}
.q3wait{border-radius:var(--r-sm)}
.q3tr{color:var(--lav-s)}

/* ---------------------------------------------------------------
   15. NÂNG CẤP / BÁN CHẠY / PHÁN QUYẾT
   --------------------------------------------------------------- */
.upg-lv-banner{
  background:linear-gradient(135deg, var(--panel), var(--lav-soft)) !important;
  border:2px solid color-mix(in srgb, var(--lav) 42%, var(--panel)) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:var(--sh-2) !important;
}
.ulv-tag{background:var(--lav-soft);color:var(--lav-s)}
.ulv-title{color:var(--ink)}
.ulv-desc{color:var(--soft)}
.ulv-current,.ulv-current b{color:var(--mint-s)}
.ulv-btn{
  background:var(--g-pink) !important;
  border:2px solid var(--pink-d) !important;
  border-radius:var(--r-md) !important;
  color:#fff !important;
  box-shadow:0 3px 0 var(--pink-d) !important;
}
.ulv-btn .ulv-next,.ulv-btn .ulv-cost{color:#fff !important}
.ulv-btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 0 var(--pink-d) !important}
.ulv-btn:disabled{background:var(--bg-2) !important;border-color:var(--edge) !important}
.ulv-btn:disabled .ulv-next,.ulv-btn:disabled .ulv-cost{color:var(--soft) !important}

.menu-bestseller-card{
  background:linear-gradient(135deg, var(--panel), var(--gold-soft)) !important;
  border:2px solid var(--butter) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:var(--sh-2) !important;
  animation:none !important;
}
.mbs-head,.mbs-qty{color:var(--gold-s)}
.mbs-item{
  background:var(--panel);
  border:1.5px solid color-mix(in srgb, var(--gold) 26%, transparent);
  border-radius:var(--r-sm);
}
.mbs-name{color:var(--ink)}
.bs-tag{background:var(--g-pink);border-radius:var(--r-pill);box-shadow:var(--sh-1)}

.verdict-box{border-radius:var(--r-lg)}
.verdict-title.success{color:var(--mint-s)}
.verdict-title.fail{color:var(--warn)}

.sell-mat-btn{border-radius:var(--r-pill) !important}
.gz-active-btn{background:var(--mint-soft) !important;color:var(--mint-s) !important;border-color:var(--mint) !important}
.gz-badge-pill{background:var(--g-pink);border-radius:var(--r-pill)}

/* ---------------------------------------------------------------
   16. MINIGAME — Bầu Cua
   --------------------------------------------------------------- */
.baucua-modal{
  background:color-mix(in srgb, var(--ink) 50%, transparent);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.baucua-card{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:4px solid var(--pink-mid);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-3), 0 0 0 4px var(--sheen);
  color:var(--ink);
}
.bc-header{border-bottom:2px dashed var(--edge)}
.bc-title{color:var(--pink)}
.bc-close-btn{
  background:var(--panel-2);
  border:2px solid var(--edge);
  color:var(--soft);
  box-shadow:0 2px 0 var(--edge);
}
.bc-close-btn:hover{background:var(--pink);border-color:var(--pink);color:#fff}
/* Thanh két: xanh casino → tím lavender pastel */
.bc-wallet-bar{
  background:linear-gradient(180deg, var(--panel), var(--lav-soft)) !important;
  border:2px solid var(--lav) !important;
  border-radius:var(--r-md);
  color:var(--lav-s);
  box-shadow:var(--sh-in) !important;
}
.bc-wallet-bar .bc-money{color:var(--lav-s);text-shadow:none}
.bc-wallet-bar .bc-bet-total{color:var(--pink)}

/* ---------------------------------------------------------------
   17. MINIGAME — Xì Dách
   --------------------------------------------------------------- */
.xidach-modal{
  background:color-mix(in srgb, var(--ink) 55%, transparent);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.xd-card-container{
  background:linear-gradient(180deg, var(--panel), var(--mint-soft)) !important;
  border:4px solid var(--mint) !important;
  border-radius:var(--r-xl);
  box-shadow:var(--sh-3), 0 0 0 4px var(--sheen) !important;
  color:var(--ink) !important;
}
.xd-header{border-bottom:2px dashed color-mix(in srgb, var(--mint) 60%, transparent)}
.xd-title{color:var(--mint-s);text-shadow:none}
.xd-btn-sm{
  background:var(--panel);
  border:2px solid var(--mint);
  color:var(--mint-s);
  border-radius:var(--r-pill);
}
.xd-btn-sm:hover{background:var(--mint-s);color:var(--panel);border-color:var(--mint-s)}
.xd-close-btn{
  background:var(--panel-2);
  border:2px solid var(--edge);
  color:var(--soft);
  box-shadow:0 2px 0 var(--edge);
}
.xd-close-btn:hover{background:var(--pink);border-color:var(--pink);color:#fff}
.xd-wallet-bar{
  background:linear-gradient(180deg, var(--panel), var(--gold-soft)) !important;
  border:2px solid var(--butter) !important;
  border-radius:var(--r-md);
  color:var(--gold-s) !important;
  box-shadow:var(--sh-in) !important;
}

/* ---------------------------------------------------------------
   18. BẠN BÈ
   --------------------------------------------------------------- */
.bb-subtabs{border-bottom:2px solid var(--edge)}
.bb-subtab{
  background:var(--panel-2);
  border:2px solid var(--edge);
  border-radius:var(--r-pill);
  color:var(--soft);
  min-height:34px;
  box-shadow:var(--sh-1);
}
.bb-subtab.on{
  background:var(--g-pink);border-color:var(--pink-d);color:#fff;
  box-shadow:0 2px 0 var(--pink-d);
}
.bb-my-card{
  background:linear-gradient(135deg, var(--panel), var(--peach-soft)) !important;
  border:2px solid var(--peach) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:var(--sh-2) !important;
}
.bb-avatar-wrap{
  background:var(--panel) !important;
  border-color:var(--pink-mid) !important;
  box-shadow:var(--sh-2) !important;
}
.bb-avatar-edit-badge{background:var(--pink) !important}
.bb-card-name{color:var(--ink) !important}
.bb-card-shop{color:var(--soft) !important}
.bb-card-quote{
  color:var(--pink) !important;
  background:var(--pink-soft) !important;
  border:1.5px dashed var(--pink-mid) !important;
  border-radius:var(--r-sm) !important;
}
.bb-fav-order{
  background:var(--panel) !important;
  border:1.5px solid var(--edge);
  border-radius:var(--r-sm) !important;
  color:var(--soft) !important;
}
.bb-fav-title{color:var(--ink) !important}
.bb-fav-tag{background:var(--lav-soft) !important;color:var(--lav-s) !important;border-radius:var(--r-pill)}

/* ---------------------------------------------------------------
   19. CHUYỂN ĐỘNG NHỎ & TRỢ NĂNG
   --------------------------------------------------------------- */
.tab,.chip,.stab,.stp,.sbtn,.pager button,.bb-subtab,.setb{touch-action:manipulation}

/* Nhịp thở nhẹ cho nút mở cửa */
@media (prefers-reduced-motion:no-preference){
  .openbar .big{animation:cuteBreathe 3.4s ease-in-out infinite}
  @keyframes cuteBreathe{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-2px)}
  }
  .openbar .big:active{animation:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* Không tô màu thanh cuộn: ở các dải trượt ngang (.swipe, .lane, .tourw)
   trình duyệt vẽ thanh cuộn ĐÈ lên nội dung, che mất dòng chữ bên dưới. */
.pane,.news,.tourw,.lane,.swipe,.tabs{scrollbar-width:none;-ms-overflow-style:none}
.pane::-webkit-scrollbar,.news::-webkit-scrollbar,.tourw::-webkit-scrollbar,
.lane::-webkit-scrollbar,.swipe::-webkit-scrollbar,.tabs::-webkit-scrollbar{width:0;height:0;display:none}

/* Màn hình rộng: bo góc khung app cho giống một chiếc máy chơi game nhỏ */
@media (min-width:600px){
  .app{
    border-radius:0 0 var(--r-xl) var(--r-xl);
    box-shadow:0 0 0 1px var(--edge), 0 20px 60px rgba(80,50,80,.18);
    background:var(--bg);
  }
}

/* ---------------------------------------------------------------
   21. BẢNG THÔNG BÁO CỦA DEV (splash banner)
   --------------------------------------------------------------- */
.sp-banner-overlay{background:color-mix(in srgb, var(--ink) 60%, transparent)}
.sp-banner-card{
  background:var(--panel);
  border:2px solid var(--edge);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-3), 0 0 0 4px var(--sheen);
  overflow:hidden;
}
.sp-banner-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:6px;
  background:var(--g-rainbow);
}
.sp-banner-close{
  background:var(--bg-2);
  color:var(--soft);
  border:2px solid var(--edge);
  width:36px;height:36px;
}
.sp-banner-badge{
  background:var(--pink-soft);
  color:var(--pink);
  border:1.5px solid var(--pink-mid);
  border-radius:var(--r-pill);
}
.sp-banner-title{color:var(--ink);font-family:var(--font-display)}
.sp-banner-text{
  background:var(--bg-3);
  color:var(--ink);
  border-left:4px solid var(--pink-mid);
  border-radius:4px var(--r-md) var(--r-md) 4px;
}
.sp-banner-qr-wrap{
  background:var(--bg-3);
  border:1.5px dashed var(--pink-mid);
  border-radius:var(--r-lg);
}
.sp-banner-qr{border-radius:var(--r-md);display:block;width:min(100%,320px);max-height:52vh;object-fit:contain;margin:0 auto}
.sp-banner-qr-caption{color:var(--soft)}
.game-qr-wrap{margin:12px auto 16px;padding:14px;border:2px solid var(--line);border-radius:18px;background:#fff;text-align:center;box-shadow:0 4px 0 color-mix(in srgb,var(--line) 70%,transparent)}
.game-qr{display:block;width:min(100%,280px);height:auto;margin:0 auto 10px;border-radius:10px;image-rendering:pixelated}
.game-qr-wrap small{display:block;color:var(--soft);font-size:11px;word-break:break-all}
.sp-banner-btn{
  background:var(--g-pink);
  border-radius:var(--r-lg);
  height:52px;
  box-shadow:0 5px 0 var(--pink-d), 0 8px 20px color-mix(in srgb, var(--pink) 28%, transparent);
}
.sp-banner-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--pink-d)}

/* Màn chờ dạng chữ (sp-body) */
.sp-body h1{color:var(--ink);font-family:var(--font-display)}
.sp-sub,.sp-link,.sp-ver{color:var(--soft)}

/* ---------------------------------------------------------------
   22. SỬA CHI TIẾT
   --------------------------------------------------------------- */
/* Nút "Mở cửa" khi chưa nấu đủ: đọc ra là "chưa sẵn sàng",
   dùng màu bơ cố định nên rõ chữ ở mọi tông màu. */
.big.blocked{
  background:var(--g-butter);
  color:#6d4a05;
  filter:none;
  box-shadow:0 5px 0 #eebf5b, 0 10px 24px rgba(237,162,31,.22);
}
.big.blocked::before{background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0))}
.big.blocked:active{box-shadow:0 1px 0 #eebf5b}

/* Nhãn "NÂNG CẤP CẤP ĐỘ (LEVEL)" không bị gãy đôi viên thuốc */
.ulv-tag{
  white-space:nowrap;
  font-size:.66rem;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Dòng cài đặt dài không nhảy 2 dòng */
.setb{gap:10px}
.setb small{flex:none;text-align:right;max-width:44%}

/* Nút lớn khi bị khoá: xám trung tính, chữ vẫn đọc rõ
   (trước đây là hồng mờ, chữ trắng trên nền nhạt rất khó đọc) */
.big:disabled{
  background:var(--bg-2);
  color:var(--soft);
  opacity:1;
  box-shadow:0 4px 0 var(--edge);
}
.big:disabled::before{display:none}
.big.blocked:disabled{background:var(--g-butter);color:#6d4a05;box-shadow:0 5px 0 #eebf5b}


/* ---------------------------------------------------------------
   24. MINIGAME — chi tiết còn lại
   --------------------------------------------------------------- */
/* Bầu Cua: bàn cược & quân cược */
.bc-board{
  background:var(--bg-3) !important;
  border:3px solid var(--pink-mid) !important;
  border-radius:var(--r-lg) !important;
}
.bc-tile{
  background:var(--panel) !important;
  border:2px solid var(--edge) !important;
  border-radius:var(--r-md) !important;
  box-shadow:var(--sh-1);
}
.bc-tile-name{color:var(--ink) !important}
.bc-tile-badge{background:var(--pink) !important;border-color:var(--panel) !important}
.bc-plate{border:2px solid var(--pink-mid) !important;border-radius:var(--r-lg) !important}
.bc-bowl{
  background:radial-gradient(circle, #f4fbff 40%, #ddeffa 70%, var(--sky) 100%) !important;
  border:5px solid var(--sky) !important;
}
.bc-sub-btn{
  background:var(--panel-2) !important;
  border:2px solid var(--edge) !important;
  border-radius:var(--r-md) !important;
  color:var(--ink) !important;
  box-shadow:0 2px 0 var(--edge);
}
.bc-sub-btn:active{transform:translateY(2px);box-shadow:none}
.bc-roll-btn{
  background:var(--g-pink) !important;
  border:2px solid var(--pink-d) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:0 4px 0 var(--pink-d) !important;
}
.bc-roll-btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--pink-d) !important}
.bc-roll-btn:disabled{
  background:var(--bg-2) !important;
  border-color:var(--edge) !important;
  color:var(--soft) !important;
  opacity:1 !important;
  box-shadow:0 4px 0 var(--edge) !important;
}
/* Tiêu đề minigame không gãy dòng thành 2 hàng cao */
.bc-title,.xd-title{font-size:1.05rem;line-height:1.25;min-width:0}

/* Xì Dách: bàn chơi & thẻ bài */
.xd-table{
  background:var(--panel-2) !important;
  border:2px solid var(--mint) !important;
  border-radius:var(--r-lg) !important;
}
.xd-card{
  background:var(--panel) !important;
  border:2px solid var(--edge) !important;
  border-radius:var(--r-sm) !important;
  box-shadow:var(--sh-1) !important;
}
.xd-player-seat{
  background:var(--panel) !important;
  border:2px solid var(--edge) !important;
  border-radius:var(--r-md) !important;
}
.xd-dealer-title,.xd-p-name{color:var(--ink) !important}
.xd-p-bet,.xd-p-status,.xd-chips-label{color:var(--soft) !important}
.xd-btn{border-radius:var(--r-md) !important}
.xd-btn-hit{background:var(--g-mint) !important;border-color:var(--mint-s) !important;color:#fff !important}
.xd-btn-stand{background:var(--g-pink) !important;border-color:var(--pink-d) !important;color:#fff !important}
.xd-rules-overlay{background:color-mix(in srgb, var(--ink) 55%, transparent) !important}
.xd-rules-list{background:var(--panel) !important;color:var(--ink) !important;border-radius:var(--r-lg) !important}

/* Bầu Cua & Xì Dách dùng chung các viên chip cược */
.bc-chip,.xd-chip{border-radius:var(--r-pill) !important;box-shadow:var(--sh-1)}