/* =========================================================================
   🧋 TIỆM TÀ TỮA — BỐ CỤC & HÌNH ẢNH MỚI
   Nạp sau theme-cute.css. File này lo phần "khung":
   nền giấy dán tường, HUD viên nang, dây cờ, thẻ menu hoá đơn,
   dock điều hướng dưới đáy, màn mở đầu mới, và nhãn trên quầy pha.
   Gameplay (js/game.js) giữ nguyên, chỉ đổi cách trình bày.
   ========================================================================= */

:root{
  --tt-ink:#5a3f5e;
  --tt-dock-h:66px;
  --tt-safe-b:env(safe-area-inset-bottom,0px);
  --tt-safe-t:env(safe-area-inset-top,0px);
}

/* ---------------------------------------------------------------
   NỀN — giấy dán tường Tà Tữa (ly, trân châu, tim, lá)
   --------------------------------------------------------------- */
body:not(.selling)::before{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 35%, transparent),
      color-mix(in srgb, var(--bg) 55%, transparent)),
    url(../img/tt-prep.jpg) center top/1400px auto repeat,
    var(--bg) !important;
}
.app{background:transparent}

/* ---------------------------------------------------------------
   HUD — viên nang trắng nổi phía trên
   --------------------------------------------------------------- */
header.tt-hud{
  position:sticky;
  top:calc(var(--tt-safe-t) + 6px);
  z-index:10;
  margin:calc(var(--tt-safe-t) + 6px) 10px 0;
  padding:8px 10px;
  display:flex;
  align-items:center;
  gap:6px;
  background:var(--panel);
  border:2px solid var(--edge);
  border-radius:24px;
  box-shadow:0 4px 0 var(--edge), 0 10px 26px rgba(80,50,80,.12);
}
header.tt-hud .h-l{display:contents}
header.tt-hud .pbtn{
  width:38px;height:38px;flex:none;
  border:2px solid var(--edge);
  background:var(--bg-3);
  box-shadow:0 2px 0 var(--edge);
  animation:none;
}
header.tt-hud .pbtn .ico,header.tt-hud .pbtn img{width:26px;height:26px}
header.tt-hud .pbtn:active{transform:translateY(2px);box-shadow:none}
#bcBtn,#xdBtn{animation:none !important}

.tt-day{
  display:flex;flex-direction:column;justify-content:center;
  margin-right:auto;min-width:0;
  line-height:1.05;white-space:nowrap;
  padding-left:4px;
}
.tt-dayn{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--ink)}
.tt-day small{display:flex;align-items:center;gap:3px;color:var(--soft);font-weight:700;font-size:.72rem}
.tt-day small .ico{width:14px;height:14px}

header.tt-hud .h-m{display:flex;align-items:center;font-size:1.1rem;text-align:right}
header.tt-hud .h-m small{display:none}          /* tên tiệm đã nằm trên thẻ menu */
header.tt-hud #hMoney{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 12px 3px 6px;
  background:var(--g-butter);
  border:2px solid #f2c95f;
  border-radius:var(--r-pill);
  color:#6d4a05;
  box-shadow:0 2px 0 #e9bb4f;
  font-family:var(--font-display);font-weight:700;
  font-variant-numeric:tabular-nums;
}
header.tt-hud #hMoney::before{
  content:"";width:20px;height:20px;flex:none;
  background:url(../img/tt-ic/coin.svg) center/contain no-repeat;
}
header.tt-hud .h-r{
  display:flex;flex-direction:column;align-items:flex-end;
  line-height:1.05;white-space:nowrap;
}
header.tt-hud .stars{font-size:.95rem;letter-spacing:0}
header.tt-hud .h-r small{font-size:.66rem;color:var(--soft);font-weight:700}

/* Màn hẹp lúc chuẩn bị: 2 hàng — (nút … sao) / (ngày … tiền) */
@media (max-width:460px){
  body:not(.selling) header.tt-hud{
    display:grid;
    grid-template-columns:repeat(5,auto) minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    gap:6px 6px;
  }
  body:not(.selling) header.tt-hud .pbtn{grid-row:1}
  body:not(.selling) .tt-day{
    grid-row:2;grid-column:1 / span 6;
    flex-direction:row;align-items:baseline;gap:8px;
    background:var(--bg-3);
    border-radius:var(--r-pill);
    padding:5px 12px;
    margin:0;
    justify-self:start;
  }
  body:not(.selling) header.tt-hud .h-r{grid-row:1;grid-column:-2 / -1}
  body:not(.selling) header.tt-hud .h-m{grid-row:2;grid-column:-2 / -1}
}
@media (max-width:359px){
  header.tt-hud .pbtn{width:34px;height:34px}
  header.tt-hud .pbtn .ico{width:22px;height:22px}
}

/* Lúc đang bán: HUD 1 hàng gọn */
body.selling header.tt-hud{margin-top:calc(var(--tt-safe-t) + 4px);padding:6px 8px;border-radius:20px}
body.selling .tt-day small{font-size:.8rem;color:var(--ink)}
body.selling header.tt-hud .h-r small{display:none}

/* ---------------------------------------------------------------
   DÂY CỜ (thay cho mái hiên sọc cũ)
   --------------------------------------------------------------- */
.awning{
  height:30px;
  margin:0 6px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='30' viewBox='0 0 200 30'%3E%3Cpath d='M0 4Q50 12 100 4T200 4' fill='none' stroke='%235a3f5e' stroke-width='2'/%3E%3Cpath d='M8 5.6l22 1.6-10 17z' fill='%23ffb3cd' stroke='%235a3f5e' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M48 7.6l22-1.4-9 17.6z' fill='%23ffe08a' stroke='%235a3f5e' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M88 4.6l22-.4-11 17.4z' fill='%23a8e6cc' stroke='%235a3f5e' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M128 3.6l22 1.4-10 17.2z' fill='%23a9dcfb' stroke='%235a3f5e' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M168 6.4l22-1.6-9 17.6z' fill='%23cdb6fa' stroke='%235a3f5e' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0/200px 30px repeat-x;
  box-shadow:none;
}
.awning::after{display:none}
body.selling .awning{height:6px;background:none}

/* ---------------------------------------------------------------
   THẺ TIỆM + MENU HOÁ ĐƠN
   --------------------------------------------------------------- */
.tt-hero{
  margin:4px 12px 14px;
  filter:drop-shadow(0 4px 0 var(--edge)) drop-shadow(0 10px 18px rgba(80,50,80,.10));
}
.tt-hero .sign{margin:0;display:block;position:relative;z-index:1}
.tt-hero .sign button{
  width:100%;
  display:flex;align-items:center;gap:10px;
  min-height:76px;
  padding:14px 16px 12px 84px;
  background:
    radial-gradient(circle at 44px 50%, var(--pink-soft) 0 30px, transparent 31px),
    var(--panel);
  border:0;
  border-radius:26px 26px 0 0;
  box-shadow:none;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:1.45rem;font-weight:700;
  text-align:left;
  white-space:normal;
  position:relative;
  overflow:visible;
}
.tt-hero .sign button::before{
  content:"";position:absolute;left:14px;top:50%;
  width:60px;height:60px;
  transform:translateY(-52%) rotate(-7deg);
  background:url(../img/tt-mascot.svg) center/contain no-repeat;
  filter:drop-shadow(0 3px 0 rgba(90,63,94,.18));
  animation:ttWiggle 5s ease-in-out infinite;
}
.tt-hero .sign button::after{
  content:"Tiệm của bạn · chạm để đổi tên";
  position:absolute;left:84px;bottom:9px;
  font-family:"Baloo 2",sans-serif;font-size:.68rem;font-weight:700;
  color:var(--soft);letter-spacing:.2px;z-index:0;pointer-events:none;
}
.tt-sname{display:block;position:relative;z-index:1;line-height:1.25;padding-bottom:18px;min-width:0;max-width:calc(100% - 44px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tt-hero .sign button small{
  margin-left:auto;flex:none;opacity:1;
  width:34px;height:34px;display:grid;place-items:center;
  position:relative;z-index:2;background:var(--bg-3);border-radius:50%;
}
.tt-hero .sign button small .ico{width:20px;height:20px;vertical-align:0}
.tt-hero .sign button:active{transform:none}

.tt-hero .board{
  position:relative;
  margin:0;
  background:
    radial-gradient(circle at 0 0, transparent 10px, var(--panel) 10.5px) top left/51% 100% no-repeat,
    radial-gradient(circle at 100% 0, transparent 10px, var(--panel) 10.5px) top right/51% 100% no-repeat;
  color:var(--ink);
  border:0;outline:0;
  border-radius:0;
  box-shadow:none;
  padding:16px 18px 14px !important;
}
/* đường xé hoá đơn giữa tên tiệm và menu */
.tt-hero .board::before{
  content:"";position:absolute;left:16px;right:16px;top:0;height:0;
  border-top:2.5px dashed var(--edge);
}
/* mép răng cưa đáy hoá đơn */
.tt-hero .board::after{
  content:"";position:absolute;left:0;right:0;bottom:-11px;height:12px;
  background:
    linear-gradient(135deg, var(--panel) 6px, transparent 6.5px) 0 0/16px 12px repeat-x,
    linear-gradient(225deg, var(--panel) 6px, transparent 6.5px) 0 0/16px 12px repeat-x;
}
.tt-hero .board h2{
  all:unset;
  display:flex;align-items:center;gap:6px;
  font-family:var(--font-display);font-weight:700;
  font-size:.82rem;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--pink);
  margin-bottom:8px;
}
.tt-hero .board h2 .ico{width:22px;height:22px}
.tt-hero .board .items{gap:4px 18px;font-size:.9rem}
.tt-hero .board .it{
  border-bottom:0;
  align-items:center;
  padding:3px 0;
  background:linear-gradient(90deg, transparent 0, transparent calc(100% - 1px)) ;
}
.tt-hero .board .it>span:first-child{font-weight:700}
.tt-hero .board .it>span:last-child{
  font-family:var(--font-display);font-weight:700;font-size:.82rem;
  color:var(--ink);
  background:var(--bg-3);
  border-radius:var(--r-pill);
  padding:1px 9px;
  font-variant-numeric:tabular-nums;
}
.tt-hero .board .btop{
  display:inline-block;
  margin:10px 0 4px;
  padding:1px 10px;
  border-radius:var(--r-pill);
  background:var(--lav-soft);
  color:var(--lav-s);
  font-size:.72rem;letter-spacing:.6px;text-transform:uppercase;opacity:1;
}
.tt-hero .board .tgb{margin-top:4px;font-size:.72rem;font-weight:800}
.tt-hero .board .extra{
  margin-top:10px;text-align:center;
  font-size:.74rem;font-weight:700;color:var(--soft);
}
.daily-special-card{display:grid;gap:2px;margin:8px 0 10px;padding:8px 10px;border:2px solid #f3c56b;border-radius:10px;background:#fff3cf;color:#7a4b14;font-size:.78rem}
.daily-special-card b{font-size:.82rem}
.daily-special-card span{font-weight:800}
.daily-special-card small{color:#966b3b}
.daily-special-card.done{border-color:#65b893;background:#e4f7ed;color:#176447}

/* ---------------------------------------------------------------
   KHUNG NỘI DUNG
   --------------------------------------------------------------- */
#view .pane{
  margin:0 12px calc(var(--tt-dock-h) + 96px + var(--tt-safe-b));
  border-radius:26px;
  border:2px solid var(--edge);
  box-shadow:0 4px 0 var(--edge), 0 10px 22px rgba(80,50,80,.08);
  padding:16px 14px 18px;
}

/* ---------------------------------------------------------------
   DOCK ĐIỀU HƯỚNG DƯỚI ĐÁY (thay hàng tab phía trên)
   --------------------------------------------------------------- */
#view .tabs{
  position:fixed;z-index:16;
  left:50%;transform:translateX(-50%);
  bottom:calc(var(--tt-safe-b) + 8px);
  width:min(536px, calc(100% - 16px));
  margin:0;
  display:flex;gap:2px;
  padding:6px;
  overflow:visible;
  background:var(--panel);
  border:2px solid var(--edge);
  border-radius:26px;
  box-shadow:0 4px 0 var(--edge), 0 12px 30px rgba(80,50,80,.18);
}
#view .tab{
  flex:1;min-width:0;
  min-height:var(--tt-dock-h);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;
  padding:4px 2px 6px !important;
  border-radius:20px;
  background:transparent;
  color:var(--soft) !important;
  font-size:.66rem !important;font-weight:700;
  opacity:1;
  box-shadow:none;
  white-space:nowrap;overflow:visible;
}
#view .tab .ti{
  display:grid;place-items:center;
  width:40px;height:40px;
  border-radius:50%;
  transition:transform .22s var(--ease-pop), background .18s, box-shadow .18s;
}
/* Icon 3D: hơi to hơn + bóng đổ mềm để nổi khỏi mặt dock.
   Tab thường hạ độ tương phản một chút; tab đang chọn nảy lên, rõ nét, có bóng nịnh mắt. */
#view .tab .ti .ico{
  width:30px;height:30px;
  filter:drop-shadow(0 2px 1.5px rgba(80,50,80,.20));
  transition:transform .22s var(--ease-pop), filter .18s;
}
#view .tab:not(.on) .ti .ico{filter:drop-shadow(0 1.5px 1px rgba(80,50,80,.16)) saturate(.9) opacity(.92)}
#view .tab.on{background:transparent;color:var(--pink) !important;font-weight:800}
#view .tab.on .ti{
  background:var(--pink-soft);
  box-shadow:0 0 0 3px var(--panel), 0 0 0 5.5px var(--pink-mid), 0 7px 14px rgba(80,50,80,.22);
  transform:translateY(-16px) scale(1.12);
}
#view .tab.on .ti .ico{
  width:32px;height:32px;
  filter:drop-shadow(0 3px 3px rgba(80,50,80,.28));
  animation:ttTabPop .32s var(--ease-pop);
}
@keyframes ttTabPop{0%{transform:scale(.7) rotate(-8deg)}60%{transform:scale(1.12) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
#view .tab:active .ti{transform:scale(.9)}
#view .tab.on:active .ti{transform:translateY(-16px) scale(1.02)}
@media (prefers-reduced-motion:reduce){#view .tab.on .ti .ico{animation:none}}

/* Nút lớn nổi ngay trên dock */
#view .openbar{
  bottom:calc(var(--tt-safe-b) + var(--tt-dock-h) + 30px);
  padding:0 16px;
  background:none;
  pointer-events:none;
  z-index:15;
}
#view .openbar>*{pointer-events:auto}
#view .openbar .big{max-width:520px}
body.kbopen #view .tabs{display:none}
/* lớp mờ dưới đáy để nội dung cuộn không lộ lởm chởm quanh dock */
body:not(.selling) .app::after{
  content:"";position:fixed;left:0;right:0;bottom:0;z-index:14;pointer-events:none;
  height:calc(var(--tt-safe-b) + var(--tt-dock-h) + 70px);
  background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 88%, transparent) 55%, var(--bg));
}
body.kbopen .app::after{display:none}
body.vpfix #view .tabs{bottom:auto;top:calc(var(--vpfix) - 8px);transform:translate(-50%,-100%)}
body.vpfix #view .openbar{transform:translateY(calc(-100% - var(--tt-dock-h) - 22px))}

/* ---------------------------------------------------------------
   MÀN MỞ ĐẦU MỚI (sân khấu 768×1376)
   --------------------------------------------------------------- */
.splash:has(.sp4){background:#f4ecff}
.sp4{background:linear-gradient(180deg,#c9e7ff,#eadfff 45%,#ffe2ee 75%,#fff4ea)}
.sp4-st{font-family:"Baloo 2",system-ui,sans-serif}

.sp4-t{
  position:absolute;left:0;right:0;top:52px;margin:0;
  /* gap 10px + line-height 1.16 bên dưới: chừa chỗ cho dấu tiếng Việt
     (chữ Ữ cao hơn chữ hoa thường) để viên "Tiệm" không dính vào chữ lớn */
  display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;line-height:1;white-space:nowrap;
  font-family:"Grandstander","Baloo 2",sans-serif;
  text-shadow:none;color:#fff;
}
.sp4-t small{
  display:inline-block;
  font-size:34px;font-weight:700;letter-spacing:6px;
  padding:6px 22px 4px 28px;
  color:var(--tt-ink);
  background:#ffe08a;
  border:5px solid var(--tt-ink);
  border-radius:999px;
  box-shadow:0 6px 0 var(--tt-ink);
  transform:rotate(-4deg);
  margin-bottom:0;
  position:relative;z-index:1;
}
.sp4-t span{
  font-size:128px;font-weight:700;letter-spacing:1px;line-height:1.16;
  color:#fff;
  -webkit-text-stroke:0;
  text-shadow:
    5px 0 0 var(--tt-ink),-5px 0 0 var(--tt-ink),0 5px 0 var(--tt-ink),0 -5px 0 var(--tt-ink),
    4px 4px 0 var(--tt-ink),-4px 4px 0 var(--tt-ink),4px -4px 0 var(--tt-ink),-4px -4px 0 var(--tt-ink),
    0 14px 0 var(--tt-ink),5px 12px 0 var(--tt-ink),-5px 12px 0 var(--tt-ink),
    0 18px 22px rgba(90,63,94,.25);
  background:none;
  animation:ttTitle 3.6s ease-in-out infinite;
  display:inline-block;
}
@supports (paint-order:stroke){
  .sp4-t span{
    color:#ff8fb8;
    -webkit-text-stroke:14px var(--tt-ink);
    paint-order:stroke fill;
    text-shadow:0 12px 0 var(--tt-ink), 0 20px 24px rgba(90,63,94,.25);
  }
}
@keyframes ttTitle{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-8px) rotate(1.5deg)}}

.sp4-tag{top:1088px;color:var(--tt-ink);font-weight:700}
.sp4-me{top:1136px;color:#c23a78;font-family:"Grandstander","Baloo 2",sans-serif;font-weight:600}
.sp4-foot{left:124px;width:520px;top:1168px;height:164px;justify-content:flex-start;gap:8px}
.sp4-msg{color:var(--tt-ink);font-family:"Grandstander","Baloo 2",sans-serif;font-weight:600}
.sp4-bar{
  height:50px;border-radius:25px;
  background:#fff;
  border:5px solid var(--tt-ink);
  box-shadow:0 6px 0 var(--tt-ink);
  box-sizing:border-box;
}
.sp4-bar i{
  border-radius:20px;
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.35) 0 12px, transparent 12px 24px),
    linear-gradient(90deg,#ffb3cd,#cdb6fa,#a9dcfb);
}
.sp4-bar span{color:var(--tt-ink);text-shadow:0 2px 0 #fff,0 -2px 0 #fff,2px 0 0 #fff,-2px 0 0 #fff;font-family:"Grandstander","Baloo 2",sans-serif}
.sp4-go{
  height:76px;border-radius:30px;
  background:linear-gradient(180deg,#ffb7cf 0 13%,#ff8fb8 14%,#ec5f98 100%);
  border:5px solid var(--tt-ink);
  color:#fff;
  font-family:"Grandstander","Baloo 2",sans-serif;font-weight:700;font-size:40px;letter-spacing:.5px;
  text-shadow:0 3px 0 rgba(90,63,94,.35);
  box-shadow:0 9px 0 var(--tt-ink), 0 18px 30px rgba(236,95,152,.3);
  position:relative;overflow:hidden;
  animation:ttGo 1.8s ease-in-out infinite;
}
.sp4-go::before{display:none}
.sp4-go:active{transform:translateY(7px);box-shadow:0 2px 0 var(--tt-ink);animation:none}
@keyframes ttGo{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.sp4-help{color:var(--tt-ink);font-family:"Grandstander","Baloo 2",sans-serif;font-weight:600;text-decoration-thickness:3px;text-underline-offset:5px}
.sp4-ver{left:0;right:0;text-align:center;top:1334px;color:var(--tt-ink);opacity:.55;font-size:22px}

/* bong bóng bay lên */
.tt-bub{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #fff 0 16%, rgba(255,255,255,.35) 18% 55%, rgba(205,182,250,.35) 56%);
  border:3px solid rgba(90,63,94,.35);
  animation:ttBub 7s ease-in-out infinite;
  pointer-events:none;
}
@keyframes ttBub{
  0%{transform:translate(0,40px) scale(.7);opacity:0}
  15%{opacity:1}
  50%{transform:translate(14px,-80px) scale(1)}
  85%{opacity:1}
  100%{transform:translate(-10px,-200px) scale(1.05);opacity:0}
}
/* lấp lánh */
.tt-spk{
  position:absolute;width:30px;height:30px;
  background:#ffe08a;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  animation:ttSpk 2.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes ttSpk{0%,100%{transform:scale(.4) rotate(0);opacity:.3}50%{transform:scale(1.1) rotate(45deg);opacity:1}}
/* ly nháy mắt: mí mắt phủ lên mắt vẽ sẵn trong tranh */
.tt-lid{
  position:absolute;top:776px;width:42px;height:48px;
  background:#f1c9a4;
  border-radius:50%;
  transform:scaleY(0);transform-origin:50% 0;
  animation:ttBlink 4.8s infinite;
  pointer-events:none;
}
.tt-lid::after{
  content:"";position:absolute;left:4px;right:4px;top:18px;height:12px;
  border-bottom:6px solid var(--tt-ink);border-radius:0 0 50% 50%;
  opacity:0;animation:ttBlinkLine 4.8s infinite;
}
.tt-lid.l{left:297px}
.tt-lid.r{left:429px}
@keyframes ttBlink{0%,90%,100%{transform:scaleY(0)}93%,96%{transform:scaleY(1)}}
@keyframes ttBlinkLine{0%,91%,100%{opacity:0}93%,96%{opacity:1}}
/* tim bay ra từ ống hút */
.tt-steam{position:absolute;left:520px;top:236px;width:40px;height:40px;pointer-events:none}
.tt-steam b{
  position:absolute;left:0;top:0;width:28px;height:26px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 26'%3E%3Cpath d='M14 24C4 17 1 12 3 7c2-5 9-6 11 0 2-6 9-5 11 0 2 5-1 10-11 17z' fill='%23ffb3cd' stroke='%235a3f5e' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:0;
  animation:ttHeart 4.2s ease-out infinite;
}
.tt-steam b:nth-child(2){animation-delay:1.4s;left:10px}
.tt-steam b:nth-child(3){animation-delay:2.8s;left:-8px}
@keyframes ttHeart{
  0%{transform:translate(0,0) scale(.5);opacity:0}
  15%{opacity:1}
  100%{transform:translate(26px,-150px) scale(1.15) rotate(12deg);opacity:0}
}
@keyframes ttWiggle{0%,86%,100%{transform:translateY(-52%) rotate(-7deg)}90%{transform:translateY(-58%) rotate(5deg)}94%{transform:translateY(-52%) rotate(-10deg)}}

/* ---------------------------------------------------------------
   QUẦY PHA — nhãn & huy hiệu hợp với tranh mới
   --------------------------------------------------------------- */
#q3stage{background-color:#f1e9ff}
#q3daynote{
  position:absolute;left:auto;right:18px;top:84px;width:310px;min-height:56px;box-sizing:border-box;
  display:flex;align-items:flex-start;gap:8px;padding:9px 12px 9px 10px;z-index:7;
  border:2px solid #745675;border-radius:12px 12px 12px 4px;background:#fff8df;color:var(--tt-ink);
  box-shadow:3px 4px 0 rgba(83,62,87,.28);font-family:"Grandstander","Baloo 2",sans-serif;
}
#q3daynote::after{content:"";position:absolute;left:-2px;bottom:-8px;width:13px;height:13px;background:#fff8df;border-left:2px solid #745675;border-bottom:2px solid #745675;transform:skewY(-28deg) rotate(-8deg);z-index:-1}
#q3daynote .q3daynote-ic{width:24px;height:24px;display:grid;place-items:center;flex:none}
#q3daynote .q3daynote-ic .ico{width:21px;height:21px}
#q3daynote b{display:block;font-size:15px;line-height:1.1}
#q3daynote small{display:block;margin-top:3px;font-family:"Baloo 2",system-ui,sans-serif;font-size:11px;font-weight:700;line-height:1.15;white-space:normal}
#q3daynote>div:last-child{min-width:0;flex:1}
#q3daynote.q3daynote-crowded{width:154px;min-height:38px;padding:6px 9px;align-items:center}
#q3daynote.q3daynote-crowded .q3daynote-ic{width:21px;height:21px}
#q3daynote.q3daynote-crowded .q3daynote-ic .ico{width:18px;height:18px}
#q3daynote.q3daynote-crowded b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#q3daynote.q3daynote-crowded small{display:none}
/* nối dài mép trên (xà bạc hà) và mép dưới (tủ tím) của tranh */
#q3stage::before,#q3stage::after{
  content:"";position:absolute;left:0;right:0;height:1400px;pointer-events:none;
}
#q3stage::before{bottom:1375px;background:repeating-linear-gradient(90deg,#a8e6cc 0 40px,#c2f0dd 40px 80px)}
#q3stage::after{top:1375px;background:#d8c6fb}
.q3patch{background:#e8f7ef !important}

.q3tag{color:var(--tt-ink);font-family:"Grandstander","Baloo 2",sans-serif;font-weight:700}
.q3jarT,.q3lbT{color:var(--tt-ink);font-family:"Grandstander","Baloo 2",sans-serif;font-weight:700}
#q3noCup{color:#4f8f77;font-family:"Grandstander","Baloo 2",sans-serif;font-weight:600}
#q3hint{color:var(--tt-ink)}
.q3gauge{background:var(--tt-ink)}
.q3badge{
  background:#fff;
  border:3px solid var(--tt-ink);
  color:var(--tt-ink);
  box-shadow:0 2px 0 var(--tt-ink);
  font-family:"Grandstander","Baloo 2",sans-serif;
}
.q3bar{border-color:var(--tt-ink);background:#fff}
.q3chip{
  background:conic-gradient(var(--c) calc(var(--p)*360deg), #e6dcff 0) !important;
  box-shadow:0 3px 0 rgba(90,63,94,.35);
}
.q3fc{background-color:#fff}
#q3coach{
  background:#ec5f98;
  box-shadow:0 4px 0 var(--tt-ink);
  border:3px solid var(--tt-ink);
  font-family:"Grandstander","Baloo 2",sans-serif;font-weight:600;
}
.q3z.q3coachT{box-shadow:0 0 0 4px #ec5f98}
.q3z.q3coachT::before{border-color:#ec5f98}
.q3wait{color:var(--tt-ink);background:rgba(255,255,255,.9)}

/* ---------------------------------------------------------------
   MÀN RỘNG: khung app như một chiếc điện thoại nhỏ giữa giấy dán tường
   --------------------------------------------------------------- */
@media (min-width:600px){
  .app{background:transparent;box-shadow:none;border-radius:0}
}
@media (prefers-reduced-motion:reduce){
  .tt-hero .sign button::before,.sp4-t span,.sp4-go,.tt-bub,.tt-spk,.tt-lid,.tt-lid::after,.tt-steam b{animation:none !important}
  .tt-bub,.tt-steam b{display:none}
}

/* Mặt khách cỡ lớn trong hướng dẫn dùng class "big" trùng tên với nút lớn
   → ăn nhầm nền hồng/bóng của nút thành một vệt hồng lạc. Trả nó về làm ảnh. */
i.tfc.big{
  background-color:transparent !important;
  box-shadow:none !important;
  padding:0 !important;border:0 !important;border-radius:0 !important;
  max-width:none !important;animation:none !important;
  font-size:inherit;letter-spacing:0;overflow:visible;
}
i.tfc.big::before{display:none !important}

/* ---------------------------------------------------------------
   BẠN BÈ — bỏ tông cam/xám cũ, dùng bảng màu Tà Tữa
   --------------------------------------------------------------- */
.bb-my-card{
  background:linear-gradient(160deg, var(--panel) 40%, var(--pink-soft)) !important;
  border:2px solid var(--edge) !important;
  box-shadow:0 4px 0 var(--edge) !important;
}
.bb-btn{border-radius:var(--r-md);min-height:42px;font-family:var(--font-display);font-weight:600}
.bb-btn.primary{
  background:var(--g-pink) !important;color:#fff !important;
  border:2px solid var(--pink-d) !important;
  box-shadow:0 3px 0 var(--pink-d) !important;
}
.bb-btn.secondary{
  background:var(--panel) !important;color:var(--pink) !important;
  border:2px solid var(--pink-mid) !important;
  box-shadow:0 3px 0 var(--pink-mid) !important;
}
.bb-btn:hover{filter:none;transform:none}
.bb-btn:active{transform:translateY(3px);box-shadow:none !important}
.bb-redeem-box{
  background:var(--lav-soft) !important;
  border:2px dashed color-mix(in srgb, var(--lav) 70%, var(--panel)) !important;
  border-radius:var(--r-lg) !important;
}
.bb-redeem-title{color:var(--ink) !important}
.bb-redeem-input{
  background:var(--panel);color:var(--ink);
  border:2px solid var(--edge) !important;border-radius:var(--r-sm) !important;
  min-height:42px;
}
.bb-redeem-input:focus{border-color:var(--pink-mid) !important;box-shadow:0 0 0 4px color-mix(in srgb, var(--pink) 18%, transparent)}
.bb-friend-item{border-radius:var(--r-md) !important;border-color:var(--edge) !important}
.bb-friend-name{color:var(--ink) !important}
.bb-friend-sub,.bb-friend-quote{color:var(--soft) !important}
.bb-sm-btn{
  background:var(--panel-2) !important;color:var(--ink) !important;
  border:2px solid var(--edge) !important;border-radius:var(--r-pill) !important;
  box-shadow:0 2px 0 var(--edge);
}
.bb-sm-btn.del{color:var(--warn) !important}
.bb-gift-card{border-radius:var(--r-md) !important;border-color:var(--edge) !important}
.bb-gift-card.on{border-color:var(--pink) !important;background:var(--pink-soft) !important;box-shadow:0 0 0 3px color-mix(in srgb, var(--pink) 22%, transparent)}
.bb-gift-val{color:var(--pink) !important}
.bb-visit-best-item{border-color:var(--edge) !important;color:var(--ink) !important;border-radius:var(--r-sm) !important}
.bb-chal-banner{border-radius:var(--r-lg) !important}

/* Nút cảnh báo "Chưa nấu…" gọn một dòng */
#view .openbar .big.blocked{font-size:.95rem;padding:12px 16px;line-height:1.25}
#view .openbar .big.blocked .ico{width:20px;height:20px}

/* ---------------------------------------------------------------
   QUẦY PHA — nhãn "Hết" / ổ khoá không được đè lên tên hũ, tên thùng

   Bản gốc phủ kín vùng chạm (inset:6px) rồi canh giữa chữ, nên trên
   hũ trà chữ rơi đúng vào tấm nhãn (vùng 362–522, nhãn 428–474).
   Ở đây đổi thành một viên nang đặc, đặt vào đúng khoảng trống của
   từng loại vùng; lớp mờ báo "không dùng được" cũng dừng trước nhãn.
   --------------------------------------------------------------- */
.q3z.q3empty::after,.q3z.q3lock::after{
  inset:auto;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:auto;height:auto;
  display:block;
  padding:1px 9px;
  border:2.5px solid var(--tt-ink);
  border-radius:999px;
  background:#fffdf8;
  color:var(--tt-ink);
  font-family:"Grandstander","Baloo 2",sans-serif;
  font-weight:600;font-size:17px;line-height:1.45;
  white-space:nowrap;
  box-shadow:0 2px 0 var(--tt-ink);
  pointer-events:none;
}
.q3z.q3lock::after{content:"🔒";font-size:18px;padding:0 8px;background:#f3ecff}

/* Lớp mờ báo không dùng được: nằm ở nền vùng chạm, không phải lớp phủ chữ */
.q3z.q3empty{background:rgba(255,253,248,.62)}
/* Đồ chưa mở vẫn nhận diện được, nhưng không cạnh tranh với nguyên liệu đang dùng. */
.q3z.q3lock{background:rgba(255,255,255,.68);filter:saturate(.42) brightness(1.06)}

/* Hũ trà: nhãn tên ở 428–474 → đẩy viên nang lên dải kính trống 396–428 */
.q3jar.q3empty::after,.q3jar.q3lock::after{
  top:34px;transform:translateX(-50%);
  font-size:15px;padding:0 8px;line-height:1.5;
}
.q3jar.q3lock::after{font-size:16px}
.q3jar.q3empty{background:linear-gradient(180deg,rgba(255,253,248,.62) 0 64px,transparent 64px)}
.q3jar.q3lock{background:linear-gradient(180deg,rgba(255,255,255,.68) 0 64px,transparent 64px)}

/* Thùng foam / đá / đường: nhãn ở 1097–1131 → lớp mờ dừng trước nhãn */
#q3b_cheese.q3empty,#q3b_fmatcha.q3empty,#q3b_fsalt.q3empty,
#q3b_fube.q3empty,#q3b_ice.q3empty,#q3b_sugar.q3empty{
  background:linear-gradient(180deg,rgba(255,253,248,.62) 0 118px,transparent 118px);
}
#q3b_cheese.q3lock,#q3b_fmatcha.q3lock,#q3b_fsalt.q3lock,
#q3b_fube.q3lock,#q3b_ice.q3lock,#q3b_sugar.q3lock{
  background:linear-gradient(180deg,rgba(255,255,255,.68) 0 118px,transparent 118px);
}
/* canh viên nang vào khoảng trống giữa huy hiệu số và nhãn */
#q3b_cheese.q3empty::after,#q3b_fmatcha.q3empty::after,#q3b_fsalt.q3empty::after,
#q3b_fube.q3empty::after,#q3b_ice.q3empty::after,#q3b_sugar.q3empty::after,
#q3b_cheese.q3lock::after,#q3b_fmatcha.q3lock::after,#q3b_fsalt.q3lock::after,
#q3b_fube.q3lock::after,#q3b_ice.q3lock::after,#q3b_sugar.q3lock::after{
  top:60px;transform:translateX(-50%);
}

/* Lúc vùng đang được nhấn / được gợi ý thì bỏ lớp mờ cho rõ */
.q3z.q3empty:active,.q3z.q3lock:active{background:rgba(255,255,255,.28)!important}

/* Chai siro: vùng 1166–1356, hình trái cây nhận diện vị ở 1239–1273
   → đẩy viên nang xuống thân chai để không che hình. */
[id^="q3b_f_"].q3empty::after,[id^="q3b_f_"].q3lock::after{
  top:124px;transform:translateX(-50%);
  font-size:14px;padding:0 7px;border-width:2px;
}
[id^="q3b_f_"].q3lock::after{font-size:15px}
/* Cute compact music player */
.sp4-tools .sp4-music{padding:6px 8px 7px;border:3px solid #e5b6c8;border-radius:18px;background:linear-gradient(180deg,#fffafd,#ffeef6);box-shadow:0 4px 0 #d397ad;min-width:0}
.sp4-tools .sp4-track{height:25px;color:#8d4e69;font-size:16px;line-height:25px;text-shadow:0 1px #fff;}
.sp4-tools .sp4-music-row{grid-template-columns:34px minmax(0,1fr) 34px;gap:5px}
.sp4-tools .sp4-skip{height:38px;border:2px solid #d9a6ba;border-radius:13px;background:#fff;color:#a35b78;font-size:25px;line-height:1;box-shadow:0 3px 0 #c486a0}
.sp4-tools .sp4-skip:active{box-shadow:0 1px 0 #c486a0}
.sp4-tools .sp4-tool{height:38px;border-width:2px;border-radius:13px;font-size:16px;box-shadow:0 3px 0 #c486a0}
.sp4-tools .sp4-tool img{width:22px;height:22px}
.music-player{background:linear-gradient(180deg,#fffafd,#ffeef6);border-color:#e5b6c8;box-shadow:0 3px 0 #d397ad}
.music-player>b{color:#8d4e69}
.music-nav .sbtn{border-color:#d9a6ba;color:#a35b78;background:#fff;box-shadow:0 2px 0 #c486a0}
@media (max-width:430px){.sp4-tools .sp4-track{font-size:14px}.sp4-tools .sp4-skip{font-size:22px}}
.sp4-foot{top:1138px;height:226px;gap:6px}
.sp4-ver{top:1360px}

/* Splash action stack: primary CTA, secondary actions, compact now-playing bar. */
.sp4-foot{align-items:stretch;justify-content:flex-start}
.sp4-secondary{width:100%;height:42px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sp4-secondary:has(:only-child){grid-template-columns:1fr}
.sp4-secondary .sp4-help,.sp4-restart{min-width:0;height:42px;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 14px;border:2px solid #d9a6ba;border-radius:14px;background:rgba(255,250,253,.94);color:#874b65;font:700 18px "Baloo 2",system-ui,sans-serif;text-decoration:none;box-shadow:0 3px 0 #c486a0;cursor:pointer;white-space:nowrap}
.sp4-restart img{width:21px;height:21px;object-fit:contain}
.sp4-secondary .sp4-help:hover,.sp4-restart:hover{background:#fff;transform:translateY(-1px)}
.sp4-secondary .sp4-help:active,.sp4-restart:active{transform:translateY(2px);box-shadow:0 1px 0 #c486a0}
.sp4-musicbar{width:100%;height:66px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px 8px 12px;border:2px solid #e5b6c8;border-radius:17px;background:linear-gradient(180deg,rgba(255,253,255,.98),rgba(255,239,247,.98));box-shadow:0 4px 0 #d397ad;color:#754257}
.sp4-now{min-width:0;display:flex;align-items:center;gap:9px;text-align:left}
.sp4-now>img{width:30px;height:30px;flex:0 0 auto;padding:4px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px #f0d3de}
.sp4-now>span{min-width:0;display:flex;flex-direction:column;line-height:1.05}
.sp4-now small{font:800 10px "Baloo 2",system-ui,sans-serif;letter-spacing:.8px;color:#b15d7e}
.sp4-now b{max-width:235px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 17px "Baloo 2",system-ui,sans-serif;color:#754257}
.sp4-music-actions{display:grid;grid-template-columns:34px 40px 34px;align-items:center;gap:5px;flex:0 0 auto}
.sp4-music-actions button{width:34px;height:34px;display:grid;place-items:center;padding:0;border:1.5px solid #dfb4c5;border-radius:11px;background:#fff;color:#8f4f69;font:800 23px/1 "Baloo 2",system-ui,sans-serif;box-shadow:0 2px 0 #c991a8;cursor:pointer;transition:transform .18s ease,background .18s ease,box-shadow .18s ease}
.sp4-music-actions .sp4-play{width:40px;height:40px;border-radius:13px;background:#ef719f;color:#fff;border-color:#b84e78;box-shadow:0 3px 0 #a94369;font-size:15px}
.sp4-music-actions button:hover{background:#fff7fb;transform:translateY(-1px)}
.sp4-music-actions .sp4-play:hover{background:#f47daa}
.sp4-music-actions button:active{transform:translateY(2px);box-shadow:0 0 0 #c991a8}
.sp4-secondary button:focus-visible,.sp4-music-actions button:focus-visible{outline:3px solid #5da8d1;outline-offset:2px}
@media (max-width:430px){.sp4-secondary .sp4-help,.sp4-restart{font-size:16px}.sp4-now b{max-width:190px;font-size:16px}}

/* Splash menu rhythm: each action owns a row, including its tactile shadow. */
.sp4-foot:has(.sp4-go:not([hidden])){
  display:grid;
  grid-template-rows:68px 42px 66px;
  row-gap:12px;
  height:224px;
}
.sp4-foot:has(.sp4-go:not([hidden])) .sp4-go{
  width:100%;height:68px;margin:0;
  border:4px solid var(--tt-ink);border-radius:25px;
  box-shadow:0 5px 0 #8f4569,0 12px 24px rgba(143,69,105,.16),inset 0 3px 0 rgba(255,255,255,.42);
  animation:none;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.sp4-foot:has(.sp4-go:not([hidden])) .sp4-go:hover{filter:brightness(1.025)}
.sp4-foot:has(.sp4-go:not([hidden])) .sp4-go:active{
  transform:translateY(3px);
  box-shadow:0 2px 0 #8f4569,0 7px 15px rgba(143,69,105,.14),inset 0 3px 0 rgba(255,255,255,.35);
}
.sp4-foot:has(.sp4-go:not([hidden])) .sp4-secondary,
.sp4-foot:has(.sp4-go:not([hidden])) .sp4-musicbar{margin:0}
.sp4-secondary .sp4-help,.sp4-restart{box-shadow:0 2px 0 #c486a0}
.sp4-musicbar{box-shadow:0 3px 0 #d397ad,0 9px 20px rgba(141,78,105,.09)}
@media (max-width:430px){
  .sp4-foot:has(.sp4-go:not([hidden])){grid-template-rows:64px 42px 64px;row-gap:11px}
  .sp4-foot:has(.sp4-go:not([hidden])) .sp4-go{height:64px;border-radius:23px;font-size:34px}
  .sp4-musicbar{height:64px}
}

/* =========================================================================
   SỬA BỐ CỤC CHÂN MÀN MỞ ĐẦU
   Trước đây .sp4-me và .sp4-foot đều bị neo vào toạ độ Y cứng (1136 / 1138)
   nên dòng "tiệm · ngày · tiền" đè lên nút Chơi tiếp, và khi thêm thanh nhạc
   thì tràn khối. Giờ gom vào một cột tự co giãn, neo đáy, xếp dọc — hết chồng.
   ========================================================================= */
/* Neo trong khung tranh 768px được scale theo CHIỀU CAO, nên khung tràn ngang
   trên máy dài. Thụt lề rộng để cả cột luôn nằm trong vùng nhìn thấy, không bị
   cắt mép (đặc biệt nút ‹ ❚❚ › của thanh nhạc). */
.sp4-panel{
  position:absolute; left:118px; right:118px; bottom:96px;
  display:flex; flex-direction:column; align-items:stretch; gap:14px;
  pointer-events:auto;
}
/* dòng tiệm · ngày · tiền: về dòng thường, nằm ngay trên nút, căn giữa */
.sp4-me{
  position:static; left:auto; right:auto; top:auto;
  margin:0 0 2px; text-align:center;
  font-size:26px; line-height:1.25;
}
/* khối hành động: cột tự cao, bỏ mọi kích thước/vị trí cứng */
.sp4-foot{
  position:static; left:auto; right:auto; top:auto;
  width:auto; height:auto;
  display:flex; flex-direction:column; align-items:stretch; gap:12px;
}
.sp4-foot:has(.sp4-go:not([hidden])){
  display:flex; flex-direction:column; align-items:stretch;
  height:auto; row-gap:12px;
}
/* số phiên bản: neo sát đáy, không đụng khối hành động */
.sp4-ver{top:auto; bottom:22px}
/* KHÔNG giảm lề trên máy hẹp: đơn vị px ở đây là px trong khung tranh đã scale,
   khung càng cao càng tràn ngang, nên máy hẹp cần lề LỚN hơn, không phải nhỏ hơn. */
@media (max-height:740px){
  .sp4-panel{bottom:84px; gap:12px}
  .sp4-me{font-size:24px}
}

/* ---- Ô âm lượng nhạc trong Cài đặt ---- */
.setb-vol{cursor:default;gap:10px}
.setb-vol>label{flex:none;font-weight:800;color:var(--ink)}
.setb-vol #sVol{
  flex:1;min-width:0;height:26px;
  accent-color:var(--pink);
  background:transparent;cursor:pointer;
}
.setb-vol>b{flex:none;min-width:44px;text-align:right;color:var(--pink);font-family:"Grandstander","Baloo 2",sans-serif;font-variant-numeric:tabular-nums}
.setb-vol.off{opacity:.55}
.setb-vol.off #sVol{cursor:not-allowed}

/* --- Tắt outline focus toàn bộ (gây viền lạ xuyên qua backdrop-blur) --- */
*:focus,*:focus-visible{outline:none !important}

/* ---- Menu Cài đặt nhóm ---- */
.setb-grp{position:relative;padding-right:36px !important}
.setb-grp b{font-weight:800;color:var(--ink)}
.setb-arr{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-style:normal;font-size:1.3rem;font-weight:700;color:var(--soft);pointer-events:none}
.setl-hr{border:none;border-top:1.5px dashed var(--edge);margin:6px 0}