/* ==========================================================================
   THEME v4 "WASHI" — lớp ghi đè nạp cuối cùng: đổi nhận diện, bố cục, điều hướng
   Hướng phong cách A: tối giản, ấm; kem washi + gỗ sồi; nhấn đỏ son + matcha.
   ========================================================================== */
:root {
  --font: 'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'Noto Serif', 'Times New Roman', Georgia, serif;
}
:root {
  --bg: #F4EEE3; --card: #FBF8F1; --card2: #fff;
  --pink: #C8442F; --pink2: #E07A62; --pink-soft: #F3D9D1;
  --brown: #3B2F2A; --brown2: #8A6F5C; --text: #3B2F2A; --muted: #8C7B6E;
  --green: #6E8B5B; --green-soft: #E3EBDA; --yellow: #D9A441; --orange: #C8793A; --red: #B8392B; --blue: #4A6572; --purple: #6B5B7B;
  --line: rgba(59, 47, 42, .13); --sh: 0 4px 14px rgba(59, 47, 42, .10); --sh-sm: 0 1px 3px rgba(59, 47, 42, .14);
  --wood: #C9A27A; --wood-d: #A87F55; --paper: #EFE6D6;
}
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 800; letter-spacing: .2px; }
body { background: #E3D8C6; }
.app { box-shadow: none; }
b, strong { font-weight: 700; }

/* ---------- Nút ---------- */
.btn { border-radius: 10px; box-shadow: none; border: 1px solid var(--line); background: var(--card2); font-weight: 600; }
.btn.pri { background: var(--pink); color: #fff; border-color: transparent; box-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
.btn.gold { background: var(--yellow); color: var(--brown); border-color: transparent; }
.btn.blue { background: var(--blue); color: #fff; border-color: transparent; } .btn.orange { background: var(--orange); color: #fff; border-color: transparent; }
.btn.green { background: var(--green); color: #fff; border-color: transparent; } .btn.purple { background: var(--purple); color: #fff; border-color: transparent; }
.btn.grad { background: var(--pink); color: #fff; border-color: transparent; } .btn.danger { background: var(--red); }
.btn.ghost { background: transparent; }
.btn.big { border-radius: 8px; font-family: var(--font-serif); font-size: 20px; letter-spacing: 1px; }
.chip { box-shadow: none; border: 1px solid var(--line); font-weight: 600; }
.chip.y { background: #F6E8C6; color: #6b4d12; border-color: #E5CD8E; } .chip.green { background: var(--green-soft); color: #3d5530; border-color: #C3D3B3; }
.tab { border-radius: 8px; box-shadow: none; border: 1px solid var(--line); font-weight: 600; } .tab.on { background: var(--brown); color: #fff; border-color: var(--brown); }
.bar > i { background: linear-gradient(90deg, #8aa56f, var(--green)); } .bar.warn > i { background: var(--yellow); } .bar.danger > i { background: var(--pink); }
.cnt { background: var(--brown); border: 0; color: #fff; box-shadow: none; } .cnt.empty, .empty > .cnt { background: var(--pink); color: #fff; }
.toast { border-radius: 10px; background: var(--brown); font-weight: 500; }

/* ---------- Thanh trên (HUD mỏng 1 hàng) ---------- */
.hud { grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: calc(6px + var(--safe-t)) 10px 6px; background: var(--card); border-bottom: 1px solid var(--line); }
.awning { height: 3px; background: linear-gradient(var(--wood), var(--wood-d)); border-radius: 0; box-shadow: none; }
.hbtn { width: 38px; height: 38px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); box-shadow: none; color: var(--brown); }
.hbtn.sm { width: 28px; height: 28px; border-radius: 8px; } .hbtn.pause { background: var(--pink); border-color: transparent; color: #fff; }
.hud-day { padding: 0; gap: 0; flex-direction: column; align-items: flex-start; } .hud-day b { font-family: var(--font-serif); font-size: 16px; line-height: 1.1; }
.hud-sub { font-size: 11.5px; font-weight: 500; }
.wx { margin-top: 2px; padding: 0 8px; border-radius: 99px; background: var(--paper); border: 1px solid var(--line); box-shadow: none; font-size: 10.5px; font-weight: 600; }
.hud-r { display: grid; grid-template-columns: auto auto; grid-template-areas: 'm m' 'b r'; gap: 2px 8px; justify-items: end; align-items: center; }
.hud-money { grid-area: m; text-align: right; line-height: 1; } .hud-money small { display: none; }
.hud-money b { font-family: var(--font-serif); font-size: 21px; font-weight: 800; color: var(--brown); font-variant-numeric: tabular-nums; }
.hud-r-btns { grid-area: b; flex-direction: row; gap: 4px; } .hud-rate { grid-area: r; } .hud-rate small { display: none; }
.stars { font-size: 10px; letter-spacing: 0; } .stars i.on { color: var(--yellow); }

/* ---------- Thanh điều hướng đáy + nút nổi (FAB) ---------- */
.nav { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--card); border-top: 1px solid var(--line); padding: 5px 6px calc(5px + var(--safe-b)); z-index: 8; }
.nav[hidden] { display: none; }
.nav-i { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 0 3px; color: var(--muted); font-size: 11px; font-weight: 600; transition: color .18s; }
.nav-i.on { color: var(--pink); } .nav-i.on::before { content: ''; position: absolute; top: -6px; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--pink); }
.nav-i:active .ic { transform: scale(.88); } .ic { transition: transform .15s; }
.cta { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 16px calc(12px + var(--safe-b)); background: none; pointer-events: none; }
.app[data-phase="home"] .cta, .app[data-phase="end"] .cta { bottom: calc(62px + var(--safe-b)); padding-bottom: 12px; }
.cta > * { pointer-events: auto; }
.cta-btn { border-radius: 999px; min-height: 50px; font-family: var(--font-serif); font-size: 17px; font-weight: 800; letter-spacing: .3px; background: var(--yellow); color: var(--brown); box-shadow: 0 6px 16px rgba(59, 47, 42, .28); }
.cta-btn:active { transform: scale(.97); box-shadow: 0 3px 8px rgba(59, 47, 42, .3); }
.cta-btn[data-act="open"] { background: var(--green); color: #fff; }
.cta-btn.cta-red { background: var(--red); color: #fff; font-size: 15px; box-shadow: 0 6px 16px rgba(184, 57, 43, .35); }
.cta-warn { color: #8a5a1a; font-weight: 500; text-align: center; }
.cta:empty { padding: 0; }

/* ---------- Màn chuẩn bị ---------- */
.home { padding: 10px 14px 150px; gap: 12px; background: var(--bg); }
.shopcard { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-sm); }
.logo-c { border: 2px solid var(--wood); box-shadow: none; }
.sc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sign-name { background: none; box-shadow: none; padding: 0; border-radius: 0; text-align: left; font-family: var(--font-serif); font-size: 22px; font-weight: 800; color: var(--brown); }
.sign-name i { color: var(--muted); }
.loc-chips { justify-content: flex-start; margin: 0; flex-wrap: wrap; gap: 6px; } .loc-chips .chip { font-size: 12px; padding: 2px 10px; }
.evb { background: #F2E6CE; border: 1px solid #E2CFA4; border-radius: 12px; padding: 9px 12px; } .evb .ev-i { font-size: 30px; } .evb b { font-size: 14.5px; } .evb p { font-weight: 500; }
.expect { background: none; text-align: left; padding: 0 2px; font-size: 14px; font-weight: 600; color: var(--brown2); } .expect b { color: var(--brown); }
.subh { font-family: var(--font-serif); }

/* ---------- Bottom sheet (mọi hộp thoại) ---------- */
.modal-back { place-items: end center; padding: 0; background: rgba(59, 47, 42, .5); }
.modal { position: relative; width: 100%; max-width: 520px; max-height: 90vh; max-height: calc(var(--app-height, 100vh) * .9); border: 0; border-radius: 20px 20px 0 0; background: var(--card); box-shadow: 0 -10px 40px rgba(0, 0, 0, .25); animation: sheetUp .3s cubic-bezier(.2, .8, .2, 1) backwards; transition: transform .2s; padding-top: 10px; padding-bottom: var(--safe-b); }
.modal::before { content: ''; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: #d6c9b6; z-index: 4; }
.modal.small, .modal.settings, .modal.day, .modal.pause { max-width: 520px; }
.modal-body { padding-top: 14px; }
.modal-x { top: 12px; right: 12px; width: 32px; height: 32px; box-shadow: none; border: 1px solid var(--line); background: var(--bg); }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
.m-title, .set-title { font-family: var(--font-serif); }
.box, .set-row, .dl, .day-stats > div { border-radius: 12px; }
.field { border-radius: 10px; border: 1.5px solid var(--line); } .field:focus { border-color: var(--pink); }


/* ---------- Màn bán hàng: thớt ở trung tâm ---------- */
.sell { background: linear-gradient(var(--paper) 0 26%, #D8BC96 26%); gap: 8px; padding: 6px 10px 14px; }
.sell::before { display: none; }
.qav .ring { background: conic-gradient(var(--green) calc(var(--p) * 1%), #e1d6c6 0); } .qav.on .ring { background: conic-gradient(var(--pink) calc(var(--p) * 1%), #e1d6c6 0); } .qav.on b { outline-color: var(--pink); }
.qav b { box-shadow: none; border: 1px solid var(--line); }
.bubble { border-radius: 4px; background: var(--card); border-left: 4px solid var(--pink); box-shadow: 0 3px 6px rgba(59, 47, 42, .15); margin-bottom: 6px; padding: 9px 12px; }
.bubble::before { display: none; }
.bubble::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: linear-gradient(-45deg, transparent 4px, var(--card) 0), linear-gradient(45deg, transparent 4px, var(--card) 0); background-size: 10px 6px; background-repeat: repeat-x; filter: drop-shadow(0 2px 1px rgba(59, 47, 42, .1)); }
.atag { background: var(--brown); border-radius: 3px; font-weight: 600; letter-spacing: .3px; }
.btxt { font-weight: 500; }
.hint { align-self: stretch; background: none; box-shadow: none; padding: 0 4px; border-radius: 0; color: var(--brown2); font-style: italic; font-weight: 500; font-size: 13px; text-align: left; max-width: none; }
.hint::before { content: '▸ '; color: var(--pink); font-style: normal; }
.tag-w { background: var(--brown); color: var(--bg); border: 0; border-radius: 3px; box-shadow: none; font-family: var(--font-serif); font-weight: 700; letter-spacing: 1px; }
.shelf { background: linear-gradient(#E9D2AE, #DDBF93); border-radius: 12px; border-bottom: 4px solid var(--wood-d); box-shadow: var(--sh-sm); }
.shelf-row::after { background: linear-gradient(var(--wood), var(--wood-d)); }
.jar .lab, .tray small { letter-spacing: -.2px; font-weight: 700; }
.lobby-go { background: var(--green); box-shadow: none; border-radius: 10px; color: #fff; }
.work { display: flex; flex-direction: column; gap: 8px; grid-template-columns: none; }
.work-row { display: flex; align-items: flex-end; gap: 8px; }
.work-row .work-l { flex: 1; min-width: 0; }
.work-row .board { height: 158px; border-radius: 14px; background: repeating-linear-gradient(90deg, #E8C58E 0 16px, #E0BB82 16px 32px); border: 4px solid var(--wood-d); }
.work-side { flex: none; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.work-side .phone { position: relative; top: auto; right: auto; border-radius: 10px; box-shadow: none; border: 1px solid var(--line); }
.work-side .trash { margin: 0; border-radius: 10px; background: #D8CFC1; box-shadow: none; }
.work-row .sealer { flex: none; margin-bottom: 2px; }
.pourbar { background: #4a3626; } .pb-zone { background: rgba(217, 164, 65, .85); }
.pourbar i { background: linear-gradient(90deg, #9bb887, var(--green)); } .pourbar i.ok { background: var(--yellow); } .pourbar i.over { background: var(--pink); }
/* khay topping: ngăn kéo ngang 2 hàng, vuốt để xem thêm */
.trays { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-columns: calc((100% - 26px) / 5.3); gap: 5px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 7px; background: linear-gradient(#8a6a4d, #6f523a); border-radius: 12px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35), var(--sh-sm); }
.trays::-webkit-scrollbar { display: none; } .tray { scroll-snap-align: start; }
/* ---------- Sảnh: mặt bằng nhìn từ trên xuống ---------- */
.lobby { background: var(--paper); }
.lcard { border-radius: 14px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--sh-sm); }
.lc-h h4 { color: var(--brown); } .pill { background: #F3D9D1; color: #8a2f20; border-color: transparent; font-weight: 600; } .pill.y { background: #F6E8C6; color: #6b4d12; }
.tables { grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px 12px; border-radius: 12px; background: repeating-linear-gradient(90deg, #DCC09A 0 40px, #D4B68E 40px 42px); box-shadow: inset 0 0 14px rgba(59, 47, 42, .2); }
.tbl { aspect-ratio: 1; border-radius: 50%; justify-content: center; padding: 4px; border: 3px solid var(--wood-d); box-shadow: 0 4px 8px rgba(59, 47, 42, .25); }
.tbl .t-ico { font-size: 28px; } .tbl small { font-size: 10.5px; font-weight: 600; }
.tbl.free { background: var(--bg); border-color: var(--green); } .tbl.busy { background: #F6E8C6; border-color: var(--yellow); } .tbl.dirty { background: #F3D9D1; border-color: var(--pink); }

/* ---------- Mini game ---------- */
.crush-board { border-color: var(--brown); border-radius: 12px; background: var(--paper); }
.mt span { border-radius: 10px; background: var(--card); }

/* ---------- Màn bán hàng: gọn để vừa một màn hình, không phải cuộn ---------- */
.sell { gap: 4px; padding: 4px 10px 8px; }
.queue-row { min-height: 40px; } .qav { width: 40px; height: 40px; } .qav b { width: 30px; height: 30px; font-size: 19px; }
.qav .ring { -webkit-mask: radial-gradient(circle, transparent 14px, #000 15px); mask: radial-gradient(circle, transparent 14px, #000 15px); }
.cust-zone { min-height: 0; align-items: center; }
.cust-av { width: 60px; padding-top: 0; } .cust-av .face { font-size: 48px; } .cust-av .idle { font-size: 40px; }
.bubble { margin: 0 0 6px; padding: 6px 10px; } .btxt { font-size: 12.5px; margin-top: 1px; } .pat { margin-top: 3px; }
.hint { font-size: 12px; line-height: 1.2; }
.shelf { padding: 5px 6px 6px; }
.shelf-row { margin-top: 2px; } .disps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.jar { height: 54px; max-width: 44px; } .cupslot { height: 96px; }
.work { gap: 4px; }
.work-row .board { height: 124px; }
.board-txt { top: 26px; font-size: 15px; }
.tray { aspect-ratio: 1 / .72; } .tray small { font-size: 7px; }
.trays { padding: 5px; gap: 4px; }
.flav-row { margin-top: 3px; }
.foot { margin-top: 0; }

/* --- Chồng ly giấy M / L --- */
.cupstack, .cupstack.l { clip-path: polygon(0 0, 100% 0, 82% 100%, 18% 100%); border-radius: 0; background:
    linear-gradient(180deg, transparent 0 34%, var(--pink) 34% 66%, transparent 66%),
    linear-gradient(90deg, #f3e6d3, var(--card) 35%, #efe0c9); }
.cupstack { width: 36px; height: 44px; } .cupstack.l { width: 44px; height: 54px; }
.cupstack .rim { height: 6px; background: linear-gradient(#fff, #e9dcc7); border-bottom: 2px solid #c9a678; }
.cupstack::after { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 3px; background: rgba(160, 120, 70, .25); }
.stack .cups { display: none; }
@media (max-width: 400px) { .cupstack { width: 32px; height: 40px; } .cupstack.l { width: 40px; height: 50px; } }

/* ---------- Thang chữ thống nhất: 11 / 12 / 13 / 14 / 16 ---------- */
body { font-size: 14px; }
.chalk h3 { font-size: 18px; margin-bottom: 4px; } .chalk h5 { font-size: 13px; margin: 6px 0 2px; }
.chalk .cr { font-size: 14px; } .chalk .cr b { font-weight: 700; } .chalk .sz { font-size: 13px; }
.tile { font-size: 11px; font-weight: 600; }
.evb b { font-size: 14px; } .evb p { font-size: 12.5px; }
.expect { font-size: 13px; } .expect small { font-size: 13px; font-weight: 500; }
.warnbox { font-size: 12.5px; line-height: 1.4; } .warnbox > b { font-size: 13px; }
.tab { font-size: 13px; }
.k-main b { font-size: 14px; font-weight: 700; } .k-main small { font-size: 12px; font-weight: 500; }
.pinput input { font-size: 16px; font-weight: 700; width: 70px; padding: 6px 4px; } .pinput span { font-weight: 600; font-size: 14px; }

@keyframes sway { 0%, 100% { transform: skewX(-1.2deg); } 50% { transform: skewX(1.6deg); } }
.intro-cup .steam { animation: steamUp 3s ease-in-out infinite; } @keyframes steamUp { 0%, 100% { opacity: .35; transform: translateY(2px); } 50% { opacity: .9; transform: translateY(-4px); } }

/* ---------- Màn mở đầu: quầy trà pastel (tham khảo, không sao chép) ---------- */
.intro { background: linear-gradient(#f9dccb 0, #fdeed9 38%, #fdf3e3 62%); }
.intro::before { height: 30%; background: repeating-linear-gradient(90deg, #f3e7dc 0 60px, #ece0d4 60px 62px), #f3e7dc; box-shadow: inset 0 8px 10px rgba(150, 110, 80, .12); }
.intro-sky .star { left: 42%; top: 2%; font-size: 30px; }
.intro-sky .bubble-tea { right: 3%; top: 1%; font-size: 56px; }
.in-aw { position: relative; z-index: 3; width: 100%; height: 96px; flex: none; margin-top: clamp(30px, 6vh, 56px);
  background: repeating-linear-gradient(90deg, var(--pink2) 0 40px, #fff6ea 40px 80px); filter: drop-shadow(0 6px 6px rgba(150, 80, 70, .22));
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 20px) no-repeat, radial-gradient(circle at 20px 0, #000 20px, transparent 21px) bottom / 40px 20px repeat-x;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - 20px) no-repeat, radial-gradient(circle at 20px 0, #000 20px, transparent 21px) bottom / 40px 20px repeat-x; }
.in-lan { position: relative; z-index: 3; display: flex; justify-content: space-around; width: 100%; font-size: 34px; margin-top: -6px; flex: none; pointer-events: none; }
.in-lan span { display: inline-block; transform-origin: top center; animation: swing 3.4s ease-in-out infinite; filter: drop-shadow(0 4px 5px rgba(255, 150, 90, .35)); }
.in-lan span:nth-child(2) { animation-delay: -1.2s; font-size: 28px; } .in-lan span:nth-child(3) { animation-delay: -2.2s; }
.intro-title { margin: auto 0; font-family: var(--font-serif); font-size: clamp(30px, 8.4vw, 40px); line-height: 1.1; color: #4a2f24; letter-spacing: .5px; text-shadow: 0 2px 0 #fff, 0 0 14px rgba(255, 255, 255, .95); }
.in-counter { position: relative; z-index: 3; width: 100%; flex: none; display: flex; align-items: flex-end; justify-content: space-around; padding: 0 14px 4px; font-size: 40px; line-height: 1;
  background: linear-gradient(transparent calc(100% - 14px), #c99a6b calc(100% - 14px)); border-bottom: 0; }
.in-cups { display: flex; gap: 4px; font-size: 32px; } .in-cups span { display: inline-block; animation: bob 3s ease-in-out infinite; } .in-cups span:nth-child(2) { animation-delay: -.8s; } .in-cups span:nth-child(3) { animation-delay: -1.6s; } .in-cups span:nth-child(4) { animation-delay: -2.2s; }
.in-cat { position: relative; font-size: 46px; animation: floaty 3.4s ease-in-out infinite; } .in-cat small { position: absolute; top: -10px; right: -12px; font-size: 12px; font-weight: 700; color: #a58b78; animation: zzz 2.4s ease-out infinite; }
.in-front { position: relative; z-index: 3; width: 100%; height: clamp(54px, 9vh, 84px); flex: none; display: flex; box-shadow: 0 6px 8px rgba(120, 80, 50, .18); }
.in-front i { flex: 1; } .in-front i:nth-child(1) { background: #d9b7c4; } .in-front i:nth-child(2) { background: #c2b8d8; } .in-front i:nth-child(3) { background: #b6d3c2; } .in-front i:nth-child(4) { background: #f2d2a6; } .in-front i:nth-child(5) { background: #e8b9bf; } .in-front i:nth-child(6) { background: #b9cde0; }
.in-front i { border-right: 2px solid rgba(255, 255, 255, .35); }
.in-corner { position: absolute; bottom: calc(46px + var(--safe-b)); z-index: 4; font-size: 34px; } .in-corner.l { left: 12px; } .in-corner.r { right: 12px; }
.intro-tag { margin-top: 12px; font-size: 13.5px; font-weight: 500; color: #7a5b4a; }
.intro-info { margin-top: 6px; font-size: 13px; font-weight: 700; color: #c0576f; }
.intro .btn.big { min-width: 0; width: min(76%, 300px); min-height: 48px; padding: 8px 24px; border-radius: 999px; background: linear-gradient(#f1a1b2, #df7f96); border: 0; color: #fff; font-family: var(--font-serif); font-size: 19px; box-shadow: 0 4px 0 #b95a73, 0 8px 14px rgba(185, 90, 115, .3); }
.intro .link { margin: 6px 0 calc(40px + var(--safe-b)); font-size: 14px; font-weight: 700; color: var(--brown); }
.intro .ver { left: 16px; bottom: calc(12px + var(--safe-b)); font-size: 12px; }

/* ---------- Phong cách pastel hồng (tham khảo tài liệu thiết kế) ---------- */
:root {
  --bg: #FDF0DF; --card: #FFFAF2; --paper: #FBE6D0;
  --pink: #EE7A96; --pink2: #F5A3B7; --pink-soft: #FFE1E8;
  --brown: #5A3A2E; --brown2: #8F6B58; --text: #4B3329; --muted: #A08674;
  --line: rgba(120, 80, 60, .16); --wood: #D2A878; --wood-d: #B5895A;
}
body { background: #F2DFC8; }
.btn { border-radius: 999px; }
.btn.pri, .btn.grad { background: linear-gradient(var(--pink2), var(--pink)); box-shadow: 0 3px 0 var(--pink-d); }
.btn.big { border-radius: 999px; }
.tab { border-radius: 999px; background: var(--card2); border: 1.5px solid #F0DCC6; font-weight: 700; }
.tab.on { background: linear-gradient(var(--pink2), var(--pink)); color: #fff; border-color: transparent; box-shadow: 0 2px 0 var(--pink-d); }
.chip.y { background: #FFF1C8; border-color: #F0D58A; } .chip.green { background: #E2F3E4; border-color: #B7DCBD; color: #2f6b3f; }
.nav { border-radius: 18px 18px 0 0; box-shadow: 0 -4px 12px rgba(120, 80, 60, .1); border-top: 0; }
.krow, .grow-row, .nrow, .erow, .lcard, .box { border-radius: 16px; }
.warnbox { border-radius: 16px; }
/* hộp thoại giữa màn hình, bo tròn */
.modal-back { place-items: center; padding: 14px; }
.modal { max-width: 440px; border-radius: 24px; padding-top: 0; animation: popIn .22s ease backwards; }
.modal::before { display: none; }
.modal-x { border-radius: 50%; }
/* màn chuẩn bị: mái hiên + bảng hiệu */
.home-awning { height: 44px; margin: -10px -14px -22px; position: relative; z-index: 1; flex: none; background: repeating-linear-gradient(90deg, var(--pink2) 0 36px, #FFF6EA 36px 72px); filter: drop-shadow(0 4px 4px rgba(150, 80, 70, .2));
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 14px) no-repeat, radial-gradient(circle at 18px 0, #000 18px, transparent 19px) bottom / 36px 14px repeat-x;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - 14px) no-repeat, radial-gradient(circle at 18px 0, #000 18px, transparent 19px) bottom / 36px 14px repeat-x; }
.shopcard { position: relative; z-index: 2; background: var(--card); border: 3px solid #E9C9A4; border-radius: 22px; box-shadow: 0 4px 0 #D9B48C, var(--sh); }
.sign-name { font-size: 22px; color: var(--pink); }
.loc-chips .chip { border-radius: 999px; }
.chalk { background: #2F4A3A; border: 6px solid #B0845C; border-radius: 16px; padding: 10px 14px 10px; color: #F6F2E2; box-shadow: var(--sh); }
.chalk h3 { color: #fff; }
.tiles { background: var(--panel); border-radius: 18px; }
.tile.on { background: var(--card); }
.evb { background: #FFF3D1; border: 2.5px solid #F6C84E; border-radius: 16px; }

/* ---------- Ô chức năng theo nhóm + thanh nav đáy ---------- */
.tiles { grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px 8px; }
.tile { min-height: 78px; font-size: 12px; padding: 8px 2px 6px; gap: 4px; }
.tile .t-i { font-size: 36px; }
.nav-i { font-size: 11.5px; gap: 3px; }
.nav-i .ic { width: 26px; height: 26px; }
.nav-i.on::before { display: none; }
.nav-i.on .ic { background: var(--pink-soft); border-radius: 12px; padding: 4px; width: 38px; height: 28px; box-sizing: border-box; }
.nav-i.on { font-weight: 700; }
.nav-e { font-style: normal; font-size: 26px; line-height: 1; width: 46px; height: 32px; display: grid; place-items: center; border-radius: 14px; filter: grayscale(.35) opacity(.8); transition: transform .15s, background .15s; }
.nav-i.on .nav-e { background: var(--pink-soft); filter: none; transform: translateY(-2px) scale(1.08); box-shadow: 0 2px 0 rgba(238, 122, 150, .35); }
.nav-i:active .nav-e { transform: scale(.9); }

/* HUD: hiện cả điểm và số đánh giá */
.hud-r { grid-template-columns: auto; grid-template-areas: 'm' 'r' 'b'; justify-items: end; gap: 3px; }
.hud-rate { flex-direction: row; align-items: center; gap: 5px; }
.hud-rate small { display: inline; font-size: 11px; font-weight: 600; color: var(--brown2); }
.hud-r-btns { justify-content: flex-end; }
/* hộp quy tắc gọn, bấm mới mở */
.warnbox { padding: 0; }
.warnbox summary { list-style: none; cursor: pointer; padding: 8px 12px; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 4px; }
.warnbox summary::-webkit-details-marker { display: none; }
.warnbox summary small { font-weight: 500; color: var(--muted); font-size: 12px; }
.warnbox summary::after { content: '▾'; margin-left: auto; color: var(--muted); transition: transform .15s; }
.warnbox[open] summary::after { transform: rotate(180deg); }
.warnbox[open] > :not(summary) { margin-left: 12px; margin-right: 12px; } .warnbox[open] > :last-child { margin-bottom: 10px; }
.adcard { cursor: pointer; } .adcard .ad-i { margin-left: auto; color: var(--muted); font-style: normal; font-size: 16px; }
.adcard .ad-s { font-size: 12.5px; color: var(--brown2); font-weight: 500; margin: 2px 0 0; }

/* ---------- Chọn màu giao diện ---------- */
.thm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 14px; }
.thm-it { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px; border-radius: 16px; background: var(--card); border: 2.5px solid var(--line); }
.thm-it i { width: 40px; height: 40px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.thm-it b { font-size: 12.5px; font-weight: 700; text-align: center; line-height: 1.15; }
.thm-it.on { border-color: var(--pink); box-shadow: 0 0 0 2px var(--pink-soft); }
.choice-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.choice { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 2px solid var(--line); font-weight: 600; font-size: 14px; transition: border-color .15s, background .15s; }
.choice.on { border-color: var(--pink); background: var(--pink-soft); font-weight: 700; } .choice i { font-style: normal; color: var(--pink); font-weight: 800; }
.choice:active { transform: scale(.98); }


/* ======================================================================
   CHỮ TOÀN GAME: một font duy nhất (Be Vietnam Pro), thang cỡ chữ thống nhất
   Tiêu đề 17-19 · mục 14-15 · nội dung 13-14 · phụ 12 · nhãn nhỏ 11
   ====================================================================== */
:root { --font-serif: var(--font); }
body { font-family: var(--font); font-size: 14px; line-height: 1.4; }
button, input, select, textarea { font-family: inherit; }
.intro-title { font-family: 'Noto Serif', Georgia, serif; }
h1, h2, h3, h4, h5, .m-title, .set-title, .sign-name, .hud-day b, .hud-money b, .cta-btn, .btn.big, .tag-w { font-family: var(--font); letter-spacing: 0; }
h1 { font-size: 22px; } h2 { font-size: 19px; } h3 { font-size: 17px; } h4 { font-size: 15px; } h5 { font-size: 13px; }
h1, h2, h3, h4, h5 { font-weight: 700; line-height: 1.25; }
.m-title { font-size: 17px; font-weight: 700; } .set-title { font-size: 18px; font-weight: 700; }
.m-text, .box, .rules { font-size: 13.5px; line-height: 1.45; }
.btn { font-size: 13.5px; font-weight: 600; } .btn.sm { font-size: 12.5px; } .btn.big { font-size: 16px; font-weight: 700; }
.cta-btn { font-size: 15px; font-weight: 700; }
.set-row b { font-size: 14px; font-weight: 600; } .set-row em { font-size: 12px; }
.krow b, .nrow b, .erow b, .grow-row b, .k-main b { font-size: 14px; font-weight: 600; line-height: 1.25; }
.k-main small, .nrow small, .krow small, .erow small { font-size: 12px; font-weight: 400; color: var(--muted); }
.grp { font-size: 13.5px; font-weight: 700; }
.catcard h4 { font-size: 15px; font-weight: 700; margin: 2px 0; }
.catcard p { font-size: 12.5px; line-height: 1.4; }
.catcard > div:first-child b:first-child { font-size: 11.5px; font-weight: 700; letter-spacing: .2px; }
.hud-day b { font-size: 15px; } .hud-money b { font-size: 20px; font-weight: 700; } .hud-money small { font-size: 11px; font-weight: 600; }
.tab { font-size: 13px; font-weight: 600; } .tab.on { font-weight: 700; }
.chip { font-size: 12px; } .muted, small { font-size: 12px; }
.nav-i { font-size: 11.5px; } .tile { font-size: 11.5px; }
.sign-name { font-size: 20px; font-weight: 700; }
.toast { font-size: 13.5px; font-weight: 500; }

/* Mạng xã hội: thẻ quảng cáo gọn một hàng */
.profile, .adbox, .vidbox { border-radius: 16px; }
.pf-h h4 { font-size: 16px; } .pf-h .muted { font-size: 12px; margin: 2px 0 0; }
.pf-h small.grayish { display: inline-block; background: var(--pink-soft); color: var(--brown2); font-weight: 600; }
.pf-s > div { background: var(--pink-soft); } .pf-s b { font-size: 18px; color: var(--pink); } .pf-s small { font-size: 11px; font-weight: 500; }
.adbox .sub { color: var(--muted); font-weight: 500; margin-top: -4px; } .adbox h4, .vidbox h4 { font-size: 15px; }
.adcard { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; }
.adcard.run { border-color: var(--green); background: var(--green-soft); }
.ad-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--pink-soft); display: grid; place-items: center; font-size: 22px; }
.ad-m { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ad-m b { font-size: 14px; font-weight: 600; line-height: 1.25; } .ad-m small { font-size: 12px; color: var(--muted); }
.ad-btn { min-width: 84px; min-height: 40px; padding: 4px 10px; flex-direction: column; gap: 0; line-height: 1.15; } .ad-btn b { font-size: 14px; font-weight: 700; } .ad-btn small { font-size: 10.5px; opacity: .9; font-weight: 500; color: inherit; }

/* ---------- Quầy: số ly dùng chung, trân châu, hiệu ứng ---------- */
.stacks { position: relative; }
.cupcnt { top: -8px; right: -10px; }
.tray .pile { gap: 1px; padding: 0 2px; }
.tray .pile i, .c-top, .fx-ball { box-shadow: inset -1.5px -2px 3px rgba(0, 0, 0, .35), 0 1px 1px rgba(0, 0, 0, .25);
  background-image: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .5) 0 9%, rgba(255, 255, 255, 0) 30%); }
.tray .pile i { width: 11px; height: 11px; margin: 0; }
.fx-ball { width: 13px; height: 13px; will-change: transform; }
.cup.sealing { animation: none; }
.fx-lid { position: fixed; z-index: 90; height: 10px; border-radius: 6px 6px 3px 3px; pointer-events: none; will-change: transform;
  background: linear-gradient(var(--card), #e5d8c6); border: 1px solid #d3c5b0; box-shadow: 0 2px 4px rgba(0, 0, 0, .22); }
.cupslot.plop .cup { animation: plopSoft .4s cubic-bezier(.3, 1.4, .6, 1); }
@keyframes plopSoft { 0% { transform: scale(1) } 35% { transform: scale(1.05, .95) } 100% { transform: scale(1) } }

/* Hộp thông báo trống / khoá: chữ vừa phải, chỉ emoji ở dòng đầu to */
.lockbox { font-size: 13px; font-weight: 500; line-height: 1.5; padding: 20px 16px; border-radius: 16px; }
.lockbox::first-line { font-size: 30px; line-height: 1.6; }
.emptybox { font-size: 13px; padding: 20px 14px; border-radius: 16px; line-height: 1.4; }
.emptybox::first-line { font-size: 30px; }
.emptybox b { font-size: 14px; font-weight: 600; } .emptybox p { font-size: 12.5px; }

/* ---------- Tổng quan cuối ngày: gọn, một con số chính ---------- */
.day-title { font-size: 22px; margin: 2px 0 8px; } .day-moon { font-size: 52px; }
.day-stats > div { padding: 8px 4px; } .day-stats b { font-size: 20px; } .day-stats span { font-size: 12px; color: var(--muted); }
.pl2 { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.pl2-hero { text-align: center; border-radius: 18px; padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.pl2-hero.neg { background: #FFE9E6; color: #A8321F; } .pl2-hero.pos { background: #E4F4E6; color: #2B7A3D; }
.pl2-hero small { font-size: 12.5px; font-weight: 600; opacity: .85; } .pl2-hero b { font-size: 32px; font-weight: 800; line-height: 1.15; } .pl2-hero span { font-size: 12.5px; opacity: .85; }
.pl2 .pl-bar { height: 8px; }
.pl2-list { display: flex; flex-direction: column; gap: 6px; }
.pl2-r { display: grid; grid-template-columns: 10px 1fr auto 64px; align-items: center; gap: 8px; font-size: 13.5px; }
.pl2-r i { width: 10px; height: 10px; border-radius: 50%; } .pl2-r em { font-style: normal; font-size: 12px; color: var(--muted); } .pl2-r b { text-align: right; font-weight: 600; }
.pl2-more { border-top: 1px solid var(--line); padding-top: 8px; }
.pl2-more summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--brown2); display: flex; justify-content: space-between; }
.pl2-more summary::-webkit-details-marker { display: none; } .pl2-more summary::after { content: '▾'; }
.pl2-more[open] summary::after { content: '▴'; }
.pl2-more .pl-cards { margin-top: 8px; } .pl2-more .pl-card { text-align: center; align-items: center; padding: 8px 4px; font-size: 11.5px; }
.pl2-more .pl-card small { font-size: 12px; font-weight: 700; } .pl2-more .pl-card em { font-style: normal; color: var(--muted); } .pl2-more .pl-card b { font-size: 18px; margin: 2px 0; }
.pl2-diag { font-size: 12.5px; color: var(--brown2); margin-top: 8px; line-height: 1.45; }
.day-cash { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--card); border: 1.5px solid var(--line); font-size: 14px; } .day-cash b { font-size: 16px; font-weight: 700; }
.tomorrow { font-size: 13px; font-weight: 500; margin: 10px 0; border-radius: 14px; }

/* Ô số lượng nhập tay */
.stepper input.num { width: 56px; min-width: 0; height: 36px; padding: 0 2px; font-family: inherit; font-size: 16px; font-weight: 700; color: var(--text); text-align: center; background: var(--card2); border: 2px solid var(--line); border-radius: 10px; outline: none; -moz-appearance: textfield; appearance: textfield; }
.stepper input.num::-webkit-outer-spin-button, .stepper input.num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input.num:focus { border-color: var(--pink); }

/* ---------- Icon nhỏ gọn hơn ---------- */
.tiles { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-radius: 14px; }
.tile { flex: 0 1 104px; width: 104px; max-width: calc((100% - 12px) / 4); min-width: 0; min-height: 50px; justify-content: center; gap: 2px; padding: 5px 4px; border-radius: 10px; font-size: 11.5px; line-height: 1.15; }
.tile .t-i { font-size: 22.4px; }
.nav-e { font-size: 16.8px; width: 40px; height: 28px; }
.nav-i { gap: 1px; padding: 4px 0 2px; }
.hbtn .ic, .hbtn.sm .ic { width: 16px; height: 16px; }


/* Màu dẫn xuất từ bảng màu giao diện: đổi chủ đề là đổi cả game */
:root {
  --pink-d: color-mix(in srgb, var(--pink) 72%, #000);
  --panel: color-mix(in srgb, var(--bg) 78%, #8a6a4a);
  --card2: #fff;
}
body { background: color-mix(in srgb, var(--bg) 85%, #7a5a3a); }

/* ---------- Màn bán hàng: khoá cuộn dọc, co theo chiều cao màn hình ---------- */
.app[data-phase="sell"] .view { overflow: hidden; }
.sell { height: 100%; min-height: 0; overflow: hidden; }
@media (max-height: 800px) {
  .cust-av .face { font-size: 40px; } .cust-av { width: 52px; } .bubble { padding: 5px 9px; } .btxt { font-size: 12px; }
  .jar { height: 46px; } .cupstack { height: 38px; } .cupstack.l { height: 46px; }
  .work-row .board { height: 104px; } .cupslot { height: 82px; }
  .tray { aspect-ratio: 1 / .6; } .tray .pile i { width: 9px; height: 9px; }
  .queue-row { min-height: 34px; } .qav { width: 34px; height: 34px; } .qav b { width: 26px; height: 26px; font-size: 16px; }
  .sealer { height: 74px; }
}
@media (max-height: 690px) {
  .cust-zone { display: none; } .hint { font-size: 11.5px; }
  .jar { height: 40px; } .work-row .board { height: 88px; } .cupslot { height: 70px; }
  .tray { aspect-ratio: 1 / .5; }
}
/* bình trà kính, khay inox, thớt gỗ: bóng nhẹ cho sinh động */
.jar::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(105deg, rgba(255,255,255,.55) 0 18%, transparent 30% 70%, rgba(255,255,255,.25) 85%); z-index: 3; pointer-events: none; }
.jlid { background: linear-gradient(#fff, #cfd3d6); }
.shelf { box-shadow: 0 3px 0 var(--wood-d), var(--sh-sm); }
.tray { box-shadow: inset 0 -3px 5px rgba(0, 0, 0, .12), 0 2px 0 rgba(0, 0, 0, .18); }
.board { box-shadow: inset 0 0 14px rgba(120, 70, 20, .25), var(--sh-sm); }
/* dòng trà rót: dòng chảy trong có bọt + vệt sáng, tia bắn ở miệng ly */
.stream { width: 9px; margin-left: -1px; border-radius: 6px; opacity: .95; box-shadow: 0 0 10px currentColor;
  background-image: linear-gradient(90deg, rgba(255,255,255,.6), rgba(255,255,255,0) 45%, rgba(0,0,0,.14)), repeating-linear-gradient(180deg, rgba(255,255,255,.5) 0 5px, transparent 5px 12px);
  background-size: 100% 100%, 100% 24px; animation: streamMove .35s linear infinite; }
.stream::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 26px; height: 12px; margin-left: -13px; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,.7), transparent 70%); animation: surfaceWave .5s ease-in-out infinite; }
.cupslot .cup { transition: transform .12s; }
.disp.pouring .jar { animation: jarShake .45s ease-in-out infinite; }
@keyframes jarShake { 50% { transform: rotate(-3deg) translateY(1px); } }


/* Dòng danh sách giữ chiều cao cố định: đổi số lượng không làm ô phóng to / thu nhỏ */
.krow, .grow-row, .nrow, .erow { min-height: 72px; }
.krow .plan { display: block; min-height: 16px; line-height: 16px; }
.krow .k-main { justify-content: center; }
.stepper { min-width: 138px; justify-content: flex-end; }

/* Nút đóng (✕) không đè lên phần đầu của hộp thoại */
.modal-body { padding-top: 6px; }
.mg-head { padding-right: 42px; min-height: 34px; align-items: center; gap: 8px; }
.modal .c-head, .modal .pg > .bar { margin-right: 0; }
.modal .c-head { padding-right: 42px; }
.modal-x { top: 10px; right: 10px; }

/* Ly trượt dưới vòi bình đang rót */
.work { position: relative; z-index: 3; }
.cupslot { position: relative; transition: transform .38s cubic-bezier(.25, .9, .35, 1); will-change: transform; }
.cupslot.under-tap { z-index: 6; pointer-events: none; }

/* ---------- Sửa chồng lấn: hàng tab, dòng kho/hương ---------- */
.tabs:not(.scroll) { flex-wrap: wrap; row-gap: 6px; }
.tabs:not(.scroll) .tab { flex: 1 1 auto; text-align: center; padding: 8px 10px; }
.krow { align-items: flex-start; min-height: 0; padding: 10px; }
.krow .k-ico { margin-top: 2px; }
.krow .k-main { min-width: 0; flex: 1 1 0; gap: 3px; justify-content: flex-start; }
.krow .k-t { gap: 5px; }
.krow .k-t b { white-space: normal; }
.krow .sale { white-space: nowrap; font-size: 11px; padding: 0 7px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; align-self: flex-start; }
.krow small { display: block; line-height: 1.35; word-break: break-word; }
.krow .plan { min-height: 0; line-height: 1.3; }
.krow .stepper { align-self: center; min-width: 0; gap: 3px; }
.krow .stepper button { width: 32px; height: 34px; }
.krow .stepper input.num { width: 46px; }
.home .panel, .panel-in { min-width: 0; }
.panel-in > * { max-width: 100%; }
.krow .plan { min-height: 1.3em; }
/* Submenu labels stay on one horizontally scrollable row. */
.panel-in .tabs.scroll { flex-wrap: nowrap; overflow-x: auto; min-width: 0; max-width: 100%; -webkit-overflow-scrolling: touch; }
.panel-in .tabs.scroll .tab { flex: 0 0 auto; white-space: nowrap; }

/* Compact header, preserving the device's top safe area. */
.hud { gap: 6px; padding: calc(4px + var(--safe-t)) 10px 4px; }
.hud .hud-l .hbtn { width: 36px; height: 36px; }
.hud .hud-r { gap: 2px; }
.hud .hud-r-btns { gap: 3px; }
.hud .hud-r-btns .hbtn.sm { width: 24px; height: 24px; border-radius: 7px; }
.hud .hud-r-btns .hbtn.sm .ic { width: 13px; height: 13px; }