:root{
  --bg:#0b1020; --card:#1b1512f2; --ink:#f6ead8; --mute:#c8b79c; --line:#4a3a2c;
  --red:#c8322a; --gold:#f7c948; --green:#3aa36b; --chip:#2b211b;
  font-family:"Be Vietnam Pro", system-ui, sans-serif; color:var(--ink);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);overflow:hidden}
#cv{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer;border:0;border-radius:12px;padding:10px 14px;background:var(--red);color:#fff;font-weight:700}
button:disabled{opacity:.45;cursor:default}
button.ghost{background:var(--chip);color:var(--ink);border:1px solid var(--line)}
button.big{width:100%;padding:14px;font-size:17px;margin-top:14px}
input{font:inherit;color:var(--ink);background:#120d0a;border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0}
h1,h2,h3{margin:0 0 10px}
h3{margin-top:18px;font-size:15px;color:var(--mute)}
.row{display:flex;align-items:center}
.gap{gap:8px;margin-top:10px}
.gap input{flex:1}
.grow{flex:1}

.screen{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;z-index:5}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 20px 60px #0009;backdrop-filter:blur(6px)}
.wide{width:min(620px,calc(100% - 32px))}
.note{padding-left:18px;color:var(--mute);line-height:1.55}
.check{display:flex;gap:8px;align-items:center;margin-top:8px}
.check.small{margin:0;white-space:nowrap;font-size:14px}
.lbl{display:block;margin:14px 0 6px;color:var(--mute);font-size:14px}
#setup input{width:100%}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{background:var(--chip);border:1px solid var(--line);color:var(--ink);font-weight:600;padding:8px 12px}
.chips button.on{background:var(--gold);color:#2a1a08;border-color:var(--gold)}
.sw{display:flex;gap:8px;flex-wrap:wrap}
.sw button{width:34px;height:34px;padding:0;border-radius:50%;border:3px solid transparent}
.sw button.on{border-color:var(--gold)}
.tables{display:grid;gap:8px}
.tables .t{display:flex;align-items:center;gap:10px;background:#120d0a;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.tables .t b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tables .empty{color:var(--mute);font-size:14px}
.foot{color:var(--mute);font-size:13px;margin:16px 0 0;text-align:center}

/* HUD trong bàn */
.hud{position:fixed;z-index:3}
.top{top:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:10px 12px;background:linear-gradient(#000a,#0000)}
.top button{white-space:nowrap;padding:8px 10px}
.tname{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.tname b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40vw}
.tname small{color:var(--mute);white-space:nowrap}
.xu{background:#0008;border-radius:999px;padding:6px 12px;white-space:nowrap}
.chat{right:10px;top:64px;width:min(340px,calc(100% - 20px))}   /* khung chat góc phải trên */
.log{max-height:34vh;overflow:auto;display:flex;flex-direction:column;gap:3px;margin-bottom:6px;font-size:14px;text-shadow:0 1px 2px #000}
.log div{background:#0007;border-radius:8px;padding:4px 8px;align-self:flex-start;max-width:100%;overflow-wrap:anywhere}
.log .sys{color:var(--gold)}
.log b{color:#ffd59a}
.chat form{gap:6px}
.chat input{flex:1;background:#000b}
.bar{left:0;right:0;bottom:0;display:flex;gap:6px;padding:10px;justify-content:center;flex-wrap:wrap;background:linear-gradient(#0000,#000b)}
.bar button{background:#000b;border:1px solid var(--line);color:var(--ink)}
.bar .dzo{background:var(--gold);color:#2a1a08;border:0;min-width:130px;font-size:16px}
.bar .dzo.live{background:var(--red);color:#fff;animation:pulse .5s infinite alternate}
@keyframes pulse{to{transform:scale(1.08)}}
.count{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);z-index:4;font-size:min(22vw,140px);font-weight:900;color:var(--gold);text-shadow:0 6px 24px #000;pointer-events:none}
.toasts{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;gap:8px;width:min(420px,calc(100% - 32px))}
.toast{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;gap:10px;align-items:center;box-shadow:0 8px 24px #0008}
.toast span{flex:1}
.modal{position:fixed;inset:0;background:#0009;z-index:9;display:grid;place-items:center;padding:16px}
.modal .card{width:min(420px,100%);max-height:90vh;overflow:auto}
.menu{display:grid;gap:8px}
.menu button{display:flex;justify-content:space-between;background:#120d0a;border:1px solid var(--line);color:var(--ink);font-weight:600}
.qr{display:block;margin:12px auto;image-rendering:pixelated;background:#fff;border-radius:8px}
.copy{display:flex;gap:6px}
.copy input{flex:1}
@media (max-width:560px){
  .chat{top:56px;left:10px;right:10px;width:auto}
  .log{max-height:20vh}
  .toasts{top:auto;bottom:130px}
  .nlwarn{top:auto;bottom:190px}
  .top{gap:6px;padding:8px}
  .xu{padding:6px 8px}
  .tname b{max-width:30vw}
}

/* năng lượng + WC */
.nl{display:flex;align-items:center;gap:6px;background:#0008;border-radius:999px;padding:6px 10px;white-space:nowrap;font-size:14px}
.nl i{display:block;width:70px;height:8px;border-radius:4px;background:#ffffff26;overflow:hidden}
.nl i b{display:block;height:100%;width:0;background:#4caf50;transition:width .3s}
.nl.red i b{background:#f39c12}
.nl.full i b{background:#e74c3c}
.nl.full{animation:pulse .5s infinite alternate}
.bar .wc{background:#2f66c2;border:0;color:#fff;animation:pulse .7s infinite alternate}
.nlwarn{position:fixed;left:50%;top:120px;transform:translateX(-50%);z-index:4;background:#7a1d16ee;color:#fff;font-weight:800;padding:10px 16px;border-radius:12px;box-shadow:0 8px 24px #0008;text-align:center;max-width:calc(100% - 32px)}
@media (max-width:560px){ .nl i{width:40px} }
@media (max-width:560px){
  .top .tname{display:none}
}

/* tab chat: bàn này / kênh chung */
.ctabs{display:flex;gap:4px;margin-bottom:4px}
.ctabs button{flex:1;background:#000a;color:var(--mute);border:1px solid var(--line);padding:6px 8px;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}
.ctabs button.on{background:var(--gold);color:#2a1a08;border-color:var(--gold)}
.ctabs button:disabled{opacity:.5}
.ctabs i{font-style:normal;background:var(--red);color:#fff;border-radius:999px;font-size:11px;padding:1px 6px;margin-left:6px}

/* nút giữ bạn nhậu lại khi vợ / chồng tới kéo về */
.giu{position:fixed;left:50%;bottom:150px;transform:translateX(-50%);z-index:6;background:#d0021b;color:#fff;font-size:20px;padding:14px 26px;border-radius:999px;box-shadow:0 8px 30px #000a;animation:pulse .45s infinite alternate}
.giu span{font-size:14px;opacity:.85;margin-left:6px}

#musicBtn.off{opacity:.4;text-decoration:line-through}

/* hít thở: vòng tròn hướng dẫn giữa màn hình, không chặn bấm */
.tho{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);z-index:5;width:190px;height:190px;pointer-events:none;display:grid;place-items:center}
.tho[hidden]{display:none}
.tho .ball{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#bff3e6cc 0%,#6fcfb8aa 55%,#3aa58a33 75%,transparent 76%);box-shadow:0 0 40px #6fcfb866;transform:scale(.45);will-change:transform}
.tho[data-ph="1"] .ball{background:radial-gradient(circle,#fff4c8dd 0%,#f2c96aaa 55%,#d9a23a33 75%,transparent 76%);box-shadow:0 0 50px #f2c96a77}
.tho .txt{position:relative;text-align:center;color:#103a30;text-shadow:0 1px 6px #fff8}
.tho .txt b{display:block;font-size:20px}
.tho .txt span{font-size:30px;font-weight:700}
.tho small{position:absolute;top:100%;margin-top:8px;white-space:nowrap;background:#000a;color:#fff;padding:4px 10px;border-radius:999px;font-size:12px}
@media (max-width:600px){.tho{width:140px;height:140px;top:36%}.tho .txt b{font-size:16px}.tho .txt span{font-size:24px}}

/* khung trả lời khi bị vợ / chồng lôi đi: luôn nằm trên màn hình, chạm ra ngoài không mất */
.tra{position:fixed;left:50%;bottom:132px;transform:translateX(-50%);z-index:8;width:min(520px,calc(100vw - 24px));max-height:52vh;overflow:auto;background:#2b0f0fee;color:#fff;border:2px solid #ff5a4f;border-radius:16px;padding:12px 14px;box-shadow:0 10px 34px #000b;animation:traPulse 1s infinite alternate}
.tra[hidden]{display:none}
.tra b{font-size:15px;color:#ffb3ad}
.tra p{margin:4px 0 8px;font-size:15px;font-style:italic}
.tra h3{margin:0 0 6px;font-size:13px;opacity:.85}
.tra .opts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tra .opts button{text-align:left;font-size:13px;padding:8px 10px;line-height:1.3}
.tra small{display:block;margin-top:8px;color:#ffd166;font-weight:600}
@keyframes traPulse{to{border-color:#ffd166}}
@media (max-width:600px){.tra{bottom:120px}.tra .opts{grid-template-columns:1fr}}

/* cấp bậc trên thanh trên cùng: màu theo bậc khung tên */
.lvl{display:flex;flex-direction:column;align-items:flex-start;gap:1px;background:#0008;border-radius:12px;padding:4px 10px;line-height:1.1;min-width:96px;border:2px solid transparent}
.lvl b{font-size:13px}.lvl small{font-size:10px;opacity:.85;white-space:nowrap}
.lvl i{display:block;width:100%;height:4px;border-radius:4px;background:#ffffff25;overflow:hidden}.lvl i b{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd166,#ff8c42)}
.lvl[data-tier="1"]{border-color:#c98b4a}.lvl[data-tier="2"]{border-color:#cfd9e6}.lvl[data-tier="3"]{border-color:#f2c94c;box-shadow:0 0 10px #f2c94c88}
.lvl[data-tier="4"]{border-image:linear-gradient(90deg,#ff5ec4,#ffd84d,#5ee7ff,#9b6bff) 1;box-shadow:0 0 14px #ff5ec488;animation:lvGlow 1.6s infinite alternate}
@keyframes lvGlow{to{box-shadow:0 0 18px #5ee7ffaa}}
.giu.cuu{background:#1f5fbf;bottom:206px;animation:none}
.diu{background:#2e8b57;color:#fff}
.tsel{width:100%;margin:6px 0 4px;padding:9px 10px;border-radius:10px;font-size:14px;background:#fffaf0;border:1px solid #d8c7a8}
@media (max-width:600px){.lvl{min-width:0;padding:3px 7px}.lvl small{display:none}}

/* kho phụ kiện */
.kho h3{margin:12px 0 6px;font-size:14px;opacity:.85}
.kitem{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:#ffffff10;margin-bottom:6px;border:1px solid transparent}
.kitem.on{border-color:#ffd166;background:#ffd16622}
.kitem .sw{width:18px;height:18px;border-radius:50%;flex:none;border:2px solid #fff8}
.kitem .nm{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.kitem .nm small{opacity:.75;font-size:12px}
.kitem button{flex:none;padding:6px 14px}

/* phòng hồi sức: băng trên cùng */
.lockbox{position:fixed;left:50%;top:62px;transform:translateX(-50%);z-index:6;width:auto;max-width:calc(100vw - 24px);background:#0f3b2add;color:#eafff3;border:1px solid #7cc85a;border-radius:999px;padding:4px 12px;font-size:13px;text-align:center;box-shadow:0 3px 12px #0008}
.lockbox[hidden]{display:none}
.lockbox small{display:block;font-size:12px;opacity:.85;margin-top:3px}
.lockbox button{margin-top:6px}

/* sảnh: server chủ đề, bàn có chủ đề / địa danh */
.chips.topics{flex-wrap:wrap}
.tables .t b small.tag{display:block;font-weight:600;font-size:12px;opacity:.8;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#newTopic,#newSub{padding:9px 8px;border-radius:10px;background:#120d0a;color:inherit;border:1px solid var(--line);min-width:0;flex:1}
#newHome{flex:1.2}
#tMeta{opacity:.9}
.lbl small{font-weight:400;opacity:.7}

/* khẩu hiệu xô bồ: khung bấm thích (góc trái) + dải ghim công khai */
.xbbox{position:fixed;left:12px;bottom:128px;z-index:5;width:min(340px,calc(100vw - 24px));background:#3a120cee;color:#fff3e6;border:2px solid #ff8a4c;border-radius:14px;padding:8px 12px;box-shadow:0 6px 20px #0009}
.xbbox[hidden]{display:none}
.xbbox p{margin:4px 0 6px;font-size:14px;line-height:1.35}
.xbbox small{opacity:.8}.xbbox .hint{display:block;margin-top:4px;font-size:11px}
.xbbox button{padding:6px 12px}
.pinbar{position:fixed;left:12px;top:58px;z-index:5;max-width:min(440px,calc(100vw - 24px));background:linear-gradient(90deg,#b3241bee,#d6631cee);color:#fff;border:2px solid #ffd166;border-radius:999px;padding:6px 16px;font-weight:700;font-size:14px;box-shadow:0 6px 20px #0008;text-align:center;animation:pinGlow 1.4s infinite alternate}
.pinbar[hidden]{display:none}
.pinbar small{display:block;font-weight:500;font-size:11px;opacity:.85}
@keyframes pinGlow{to{box-shadow:0 0 22px #ffd166aa}}
@media (max-width:600px){.xbbox{bottom:150px;font-size:13px}.pinbar{top:96px;font-size:12px;right:12px}}

/* khung chat gọn: nền tối mờ, chữ nhỏ, nút ẩn */
.chat{background:rgba(12,9,6,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid #ffffff1c;border-radius:14px;padding:6px;box-shadow:0 6px 22px #0007;width:min(300px,calc(100% - 20px))}
.chat[hidden]{display:none}
.chat .log{font-size:12.5px;gap:2px;max-height:26vh;margin-bottom:5px;text-shadow:none}
.chat .log div{background:#ffffff0f;padding:3px 7px;border-radius:7px;line-height:1.35}
.chat .ctabs button{padding:4px 6px;font-size:12px}
.chat .ctabs .chide{flex:none;width:30px;padding:4px 0;color:#fff;background:#0009}
.chat input{font-size:13px;padding:7px 9px}
.chat form button{padding:7px 12px;font-size:13px}
.chatshow{right:10px;top:64px;background:rgba(12,9,6,.75);color:#fff;border:1px solid #ffffff2a;border-radius:999px;padding:7px 14px;font-weight:700;font-size:13px}
.chatshow[hidden]{display:none}
.chatshow i{font-style:normal;background:var(--red);color:#fff;border-radius:999px;font-size:11px;padding:1px 6px;margin-left:6px}
@media (max-width:600px){.chat .log{max-height:18vh}.chatshow{top:56px}}

/* sảnh: bàn ưu tiên; ô chọn địa danh */
.tables .t.hot{border-color:#ffd16688;background:#1f160d}
#newHome,#home{padding:9px 8px;border-radius:10px;background:#120d0a;color:inherit;border:1px solid var(--line);min-width:0;flex:1;width:100%}
/* sân khấu: thẻ tên người đang diễn */
.stagecard{position:fixed;left:50%;bottom:132px;transform:translateX(-50%);z-index:7;width:min(460px,calc(100vw - 24px));text-align:center;background:linear-gradient(180deg,#2a0d3aee,#120626ee);color:#fff;border:2px solid #f7d046;border-radius:16px;padding:10px 14px;box-shadow:0 0 30px #f7d04666;animation:stagePop .35s ease-out}
.stagecard[hidden]{display:none}
.stagecard b{font-size:18px;color:#ffe08a}.stagecard p{margin:6px 0;font-size:17px;font-weight:700}
.stagecard small{display:block;opacity:.8;font-size:12px}.stagecard button{margin-top:6px;padding:4px 10px;font-size:12px}
@keyframes stagePop{from{transform:translateX(-50%) scale(.85);opacity:0}}

/* ghim khẩu hiệu nằm gọn trong tab Kênh chung */
.pinchat{display:flex;flex-direction:column;gap:3px;margin-bottom:5px}
.pinchat[hidden]{display:none}
.pinchat .pin{display:flex;align-items:center;gap:6px;background:linear-gradient(90deg,#b3241b55,#d6631c33);border:1px solid #ffd16655;border-radius:8px;padding:4px 6px;font-size:12px;line-height:1.3}
.pinchat .pin span{flex:1;min-width:0}.pinchat small{opacity:.75}
.chat .join{flex:none;padding:3px 8px;font-size:11.5px;border-radius:999px;background:var(--gold);color:#2a1a08;font-weight:700;margin-left:4px}
.chat .join:disabled{opacity:.55}
.log .pinline{color:#ffe08a}
/* menu gọi món: tiêu đề nhóm, món đặc sản */
.menu .mhead{grid-column:1/-1;margin:6px 0 2px;font-size:13px;color:#ffd166}
.menu button.local{border-color:#ffd16688;background:#2a1d0c}

/* bình chọn khẩu hiệu 👍 / 👎 */
.xbvote{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.xbvote button.on{outline:2px solid #ffd166}
#xbCount{font-size:12px;font-weight:700;color:#ffe08a}
.menu .mnote{grid-column:1/-1;margin:0 0 4px;font-size:12px}

/* Kênh chung: khẩu hiệu đang bình chọn */
.votechat{display:flex;flex-direction:column;gap:3px;margin-bottom:5px;max-height:30vh;overflow:auto}
.votechat[hidden]{display:none}
.votechat .vhead{font-size:12px;font-weight:700;color:#ffd166}.votechat .vhead small{font-weight:500;opacity:.75}
.votechat .vrow{background:#ffffff10;border:1px solid #ff8a4c44;border-radius:8px;padding:4px 6px;font-size:12px;line-height:1.3}
.votechat .vt{display:block}.votechat .vm{display:block;opacity:.7;font-size:11px;margin-top:1px}
.votechat .vb{display:flex;align-items:center;gap:4px;margin-top:3px}
.votechat .vb button{padding:2px 9px;font-size:12px;border-radius:999px;background:#000a;border:1px solid #ffffff2a}
.votechat .vb button.on{background:var(--gold);color:#2a1a08}
.votechat .vc{font-size:11px;font-weight:700;color:#ffe08a;margin-left:2px}
.ctabs button[hidden]{display:none}

/* lời chào theo quê ở Kênh chung */
.log .homegreet{background:linear-gradient(90deg,#2e8b5733,#ffffff0d)!important;border:1px solid #7cc85a55}
.log .homegreet b{color:#9fe39a}

/* thanh trên cùng: tên bàn co lại + cắt "…" khi chật, các ô bên phải giữ nguyên kích thước, không đè lên nhau */
.top .tname{flex:0 1 auto;min-width:0;overflow:hidden}
.top .tname b,.top .tname small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:none}
.top > :not(.tname):not(.grow){flex-shrink:0}
.top .grow{min-width:4px}
/* điện thoại: thanh trên cùng gọn lại cho vừa một dòng (nút chỉ còn biểu tượng, ẩn số % năng lượng) */
@media (max-width:600px){
  .top{gap:4px;padding:6px 6px}
  .top button{padding:6px 7px}
  #leave,#invite{font-size:0}
  #leave::before{content:'←';font-size:18px}
  #invite::before{content:'📨';font-size:16px}
  .top .nl{padding:5px 7px;gap:4px}.top .nl i{width:28px}#nlTxt{display:none}
  .top .xu{padding:5px 7px;font-size:13px}
  .top .lvl b{font-size:12px}
}

/* chat: bấm tên để ẩn / báo cáo; chủ bàn bấm tên bàn để quản lý */
.log b.who{cursor:pointer}.log b.who:hover{text-decoration:underline}
.top .tname.lead{cursor:pointer}.top .tname.lead b::after{content:' 👑';font-size:12px}

/* mã khôi phục tài khoản */
.reccode{font-family:ui-monospace,Consolas,monospace;font-size:15px;letter-spacing:.5px;word-break:break-all;background:#0006;border:1px dashed #ffd16688;border-radius:10px;padding:10px 12px;margin:8px 0;user-select:all}
.restore{margin-top:14px;font-size:13px}.restore summary{cursor:pointer;opacity:.85}.restore .row{margin-top:8px}

/* cửa hàng phụ kiện */
.kitem .sws{display:flex;gap:4px;margin-top:3px;flex-wrap:wrap}
.kitem .sws .sw{width:16px;height:16px;border-radius:50%;cursor:pointer;border:2px solid transparent;display:inline-block}
.kitem .sws .sw.on{border-color:#ffd166}
.kitem .price{font-weight:700;color:#ffe08a;white-space:nowrap}

/* giảm nhấp nháy: tắt các hiệu ứng nhấp nháy / phập phồng của giao diện */
body.calm *, body.calm *::before, body.calm *::after{animation:none!important}
#calmBtn.on{background:#2a3350}

/* nhiệm vụ hằng ngày */
#questN{font-size:11px;background:#ff8a4c;color:#1a0f05;border-radius:999px;padding:0 6px;margin-left:2px}#questN:empty{display:none}
.quests{display:flex;flex-direction:column;gap:8px;margin:6px 0 10px}
.quest{background:#ffffff0d;border:1px solid #ffffff1f;border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:5px}
.quest.done{border-color:#7cc85a88;background:#2e8b5722}
.quest small{opacity:.8}
.qbar{height:7px;background:#0007;border-radius:99px;overflow:hidden}.qbar i{display:block;height:100%;background:linear-gradient(90deg,#ffd166,#ff8a4c);border-radius:99px}
.quest.done .qbar i{background:#7cc85a}

/* sảnh: bảng xếp hạng tỉnh + bạn bè */
.toplist{display:flex;flex-direction:column;gap:3px}
.toplist .trow{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:8px;background:#ffffff0a}
.toplist .trow.me{outline:1px solid #ffd166;background:#ffd16614}
.toplist .rk{width:34px;text-align:center;font-weight:700}.toplist .pv{flex:1}.toplist .ex{font-weight:700;color:#ffe08a;font-size:13px}
#friends .t button.ghost{padding:4px 9px}

.log .dicebox{background:linear-gradient(90deg,#5b3cc433,#ffffff0d)!important;border-color:#9b7cff66}
/* điện thoại: thanh nút một hàng vuốt ngang (nút Dzô! luôn ở đầu), đỡ che cảnh quán */
@media (max-width:600px){
  .bar{flex-wrap:wrap;overflow:visible;justify-content:center;gap:5px;padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .bar button{flex:0 0 auto;padding:7px 9px;font-size:12.5px;white-space:nowrap}
  .bar .dzo{min-width:0;font-size:13.5px}
  .bar .sec{display:none}                            /* nút phụ gom vào nút ⋯, bấm mới bung ra */
  .bar.open .sec{display:inline-flex}
  .bar .morebtn{display:inline-flex;font-size:16px;font-weight:900;padding:5px 12px}
  .bar.open .morebtn{background:var(--gold);color:#2a1a08}
}

/* jackpot thiên thần: băng thông báo + khóa thao tác */
.angelbox{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:6;background:linear-gradient(90deg,#fff7c2,#ffe08a);color:#5a3a00;font-weight:800;font-size:14px;padding:8px 16px;border-radius:999px;box-shadow:0 0 22px #ffd166aa;max-width:calc(100% - 24px);text-align:center}
.angelbox[hidden]{display:none}
body.angelLock .bar, body.angelLock #chatF{opacity:.45;pointer-events:none;filter:grayscale(.6)}

/* hàng hiệu chế */
.kho .shead{display:flex;align-items:center;gap:8px;margin:12px 0 4px;font-size:15px}
.kho .shead.brand img{width:30px;height:30px;border-radius:7px}
.kho .shead small{font-weight:500;font-style:italic;opacity:.75;font-size:12px}
.kitem .blogo{width:34px;height:34px;border-radius:8px;flex:0 0 auto}
.kitem.lux{background:linear-gradient(90deg,#d4af3722,#ffffff08);border-color:#d4af3766}
.kitem.lux .price{color:#ffd700}
/* các băng thông báo trên cùng (thiên thần, phòng hồi sức, cảnh báo đầy bụng, toast) xếp thành một cột, không đè lên nhau */
.topstack{position:fixed;top:62px;left:50%;transform:translateX(-50%);z-index:7;display:flex;flex-direction:column;align-items:center;gap:6px;width:min(560px,calc(100vw - 24px));pointer-events:none}
.topstack > *{position:static!important;transform:none!important;left:auto!important;top:auto!important;pointer-events:auto;max-width:100%}
.topstack > .toasts{width:min(420px,100%);pointer-events:none}.topstack > .toasts > *{pointer-events:auto}
.topstack > .lockbox{width:auto;align-self:center}

#lvBox.lost{animation:lvLost .5s 3 alternate}@keyframes lvLost{to{box-shadow:0 0 18px #ff4d4daa;background:#5a1010}}

/* đang nợ tiền bia */
.debtbox{background:#4a1d06ee;color:#ffe7c2;border:1.5px solid #ff9a4c;border-radius:12px;padding:7px 12px;font-size:13px;font-weight:700;text-align:center;box-shadow:0 6px 18px #0008}
.debtbox[hidden]{display:none}

.quickgo{width:100%;margin:10px 0 4px;background:linear-gradient(90deg,#ffb300,#ff7a1a)!important;color:#2a1a08!important;font-weight:900}
.quickgo small{font-weight:600;opacity:.8}

@media (min-width:601px){.bar .morebtn{display:none}}
@media (max-width:600px){.bar .morebtn{order:1}.bar #wcBtn,.bar #diuBtn,.bar #thienBtn,.bar #thoBtn{order:2}.bar .sec{order:3}.bar [data-emo]{padding:7px 8px}}

.shopbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0}
.shopbtns .big{margin:0}
.petshop{background:linear-gradient(90deg,#7cc85a,#3fae8a)!important;color:#0d2a1a!important}
.shoptabs{margin:2px 0 8px}

#xu.neg{color:#ff6b6b}
#angelTxt{white-space:pre-line}

.eff{background:#0b3a5acc;border:1px solid #6fc3ff88;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:700;white-space:nowrap;color:#dff3ff}
.eff[hidden]{display:none}
.thuoc{border:1px solid #7cc85a66;background:#0f3b2a55}
.thuoc .nm small{display:block;opacity:.8;font-weight:500;line-height:1.35;margin-top:2px}
.kitem .cnt{font-weight:800;color:#7cff6b;white-space:nowrap}

.games{display:grid;gap:8px}
.games button{display:flex;align-items:center;gap:10px;text-align:left;background:#120d0a;border:1px solid var(--line);color:var(--ink);padding:12px}
.games button b{font-size:15px}.games button small{display:block;opacity:.75;font-weight:500}
.games button .ic{font-size:26px}
.hands{display:flex;gap:6px;margin-top:6px}.hands button{font-size:20px;padding:6px 12px}
.skill .lvl{font-weight:800;color:#ffd23f;white-space:nowrap}

.nl .nll{font-size:12px;font-weight:700;opacity:.9}
@media (max-width:600px){ .nl .nll .lg{display:none} }

.votechat .vnote{font-size:11px;opacity:.75;margin:2px 0 4px}
.votechat .vrow.mine{border-color:#ffd166aa;background:#ffd16614}
.votechat .vb .join{margin-left:auto;padding:2px 9px;font-size:12px;background:var(--gold);color:#2a1a08;border:0}

.tables .t{flex-wrap:wrap}
.tables .t .tbtoggle{flex-basis:100%;margin-top:6px;padding:4px 10px;font-size:12px;text-align:left}
.tables .t .tblist{flex-basis:100%;display:grid;gap:4px;margin-top:4px;max-height:260px;overflow:auto}
.tables .t .tblist[hidden]{display:none}
.tables .t .tbrow{display:flex;align-items:center;gap:8px;background:#ffffff0a;border:1px solid var(--line);border-radius:8px;padding:4px 8px;font-size:12.5px}
.tables .t .tbrow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tables .t .tbrow .cnt{white-space:nowrap;opacity:.85}
.tables .t .tbrow button{padding:3px 10px;font-size:12px}

#suaBtn{background:linear-gradient(90deg,#ffd166,#f39c12);color:#2a1a08;font-weight:800;border:0}

.lbl .req{color:#ff7a6b;font-size:12px;margin-left:4px}

/* "Tám chuyện": nội dung trong tab của khung chat + popup khi tới lượt / có câu hỏi */
.qapanel{font-size:13px}.qapanel[hidden]{display:none}
.qatab{padding:2px 2px 6px;max-height:34vh;overflow:auto}
.qapop{position:fixed;left:50%;bottom:132px;transform:translateX(-50%);z-index:7;width:min(380px,calc(100vw - 24px));background:rgba(20,14,10,.94);border:1px solid #ffd16699;border-radius:16px;padding:9px 12px;box-shadow:0 10px 30px #000a;animation:qaPop .25s ease-out}
@keyframes qaPop{from{transform:translate(-50%,20px);opacity:0}}
.qapanel .qhead{display:flex;align-items:center;gap:8px}.qapanel .qhead b{color:#ffd166;font-size:13px}
.qapanel .qclock{margin-left:auto;font-size:12px;opacity:.85;font-variant-numeric:tabular-nums}
.qapanel .qmin{padding:0 8px;font-size:12px;background:#0006;border:1px solid #ffffff2a;border-radius:8px}
.qapanel p{margin:6px 0 5px;line-height:1.35}.qapanel small{opacity:.8;font-size:11.5px}
.qapanel .qopts{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0}
.qapanel .qopts button,.toast .topts button{padding:5px 9px;font-size:12.5px;font-weight:600;border-radius:999px;background:#ffffff14;border:1px solid #ffd16655;color:#fff;text-align:left}
.qapanel .qopts button:hover,.toast .topts button:hover{background:#ffd16633}
.qapanel .qrow{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:4px}.qapanel .qrow button{padding:5px 10px;font-size:12.5px}.qapanel .qrow small{margin-right:auto}
.toast.talkt{flex-wrap:wrap}.toast .topts{display:flex;flex-wrap:wrap;gap:5px;width:100%}
body.angelLock .qapanel{opacity:.45;pointer-events:none}
@media (max-width:600px){.qapop{bottom:150px;font-size:12.5px}}

/* vòng điều hướng cảm ứng (chỉ hiện trên màn hình cảm ứng, khi đang đứng) */
.stick{position:fixed;left:18px;bottom:170px;z-index:5;width:118px;height:118px;border-radius:50%;background:radial-gradient(circle,#00000055 0 55%,#00000077 56% 100%);border:2px solid #ffd16699;box-shadow:0 6px 22px #0007;touch-action:none;user-select:none;-webkit-user-select:none}
.stick[hidden]{display:none}
.stick i{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe9a8,#f2b705);box-shadow:0 3px 10px #0009;pointer-events:none}

/* hướng dẫn tương tác: lớp tối có lỗ sáng quanh nút cần bấm, các tấm chặn trong suốt quanh lỗ, bong bóng lời dẫn */
.tutlayer{position:fixed;inset:0;z-index:60;pointer-events:none}
.tutblk{position:fixed;pointer-events:auto;background:transparent}
.tuthole{position:fixed;border-radius:12px;box-shadow:0 0 0 200vmax rgba(0,0,0,.62);border:2px solid var(--gold);transition:all .2s;animation:tutPulse 1.1s infinite alternate}
.tuthole.none{border:0;animation:none}
@keyframes tutPulse{to{border-color:#fff;box-shadow:0 0 0 200vmax rgba(0,0,0,.62),0 0 18px 4px #f7c94899}}
.tuttip{position:fixed;pointer-events:auto;background:var(--card);border:1px solid var(--gold);border-radius:14px;padding:12px 14px;box-shadow:0 10px 30px #000a;font-size:14.5px;line-height:1.45}
.tuttip p{margin:0 0 8px}.tuttip .tutpoint{display:block;color:var(--gold);font-size:13px;margin-bottom:8px;animation:tutBob .6s infinite alternate}
@keyframes tutBob{to{transform:translateY(-3px)}}
.tutrow{display:flex;align-items:center;gap:8px}.tutrow small{opacity:.7;margin-right:auto}.tutrow button{padding:7px 12px}


/* trang loading: ly bia vại đầy dần, bọt trắng trên mặt bia, bong bóng sủi */
.boot{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(circle at 50% 40%,#3a2414,#120b07 70%);transition:opacity .6s}
.boot.done{opacity:0;pointer-events:none}
.bglass{position:relative;width:112px;height:160px;border:4px solid #fff8;border-top:0;border-radius:0 0 18px 18px;background:#ffffff0d;margin-right:30px;box-shadow:inset 0 0 18px #fff2}
.bglass::after{content:'';position:absolute;right:-34px;top:28px;width:28px;height:74px;border:4px solid #fff8;border-left:0;border-radius:0 22px 22px 0}
.bglass i{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(#ffd54a,#f0a400);border-radius:0 0 14px 14px}
.bglass i::before{content:'';position:absolute;left:-4px;right:-4px;top:-15px;height:20px;border-radius:12px;background:radial-gradient(circle at 15% 60%,#fff 9px,transparent 10px),radial-gradient(circle at 40% 45%,#fff 11px,transparent 12px),radial-gradient(circle at 68% 60%,#fff 10px,transparent 11px),radial-gradient(circle at 90% 50%,#fff 9px,transparent 10px),#fffaf0}
.bglass em{position:absolute;inset:0;overflow:hidden;border-radius:0 0 14px 14px}
.bglass s{position:absolute;bottom:-8px;width:6px;height:6px;border-radius:50%;background:#fff9;animation:bootBub 2.2s linear infinite}
.bglass s:nth-child(1){left:18%}.bglass s:nth-child(2){left:38%;animation-delay:.5s;width:4px;height:4px}.bglass s:nth-child(3){left:58%;animation-delay:1.1s}.bglass s:nth-child(4){left:76%;animation-delay:.8s;width:5px;height:5px}.bglass s:nth-child(5){left:28%;animation-delay:1.6s;width:4px;height:4px}
@keyframes bootBub{to{transform:translateY(-170px)}}
.bpct{font-size:30px;font-weight:900;color:#ffd54a;font-variant-numeric:tabular-nums;text-shadow:0 3px 12px #000}
.btxt{color:#f6ead8;opacity:.85;font-size:14px}
.count.cheer{font-size:min(11vw,64px);white-space:nowrap;animation:cheerPop .5s ease-out}
@keyframes cheerPop{from{transform:translate(-50%,-50%) scale(.4);opacity:0}}

/* đang biểu diễn: khóa thao tác, hiện đếm ngược */
body.perfLock .bar,body.perfLock #stick{opacity:.45;pointer-events:none;filter:grayscale(.6)}
.perfbox{position:fixed;left:50%;top:70px;transform:translateX(-50%);z-index:6;background:linear-gradient(90deg,#6a1b9aee,#c2185bee);color:#fff;font-weight:800;padding:8px 18px;border-radius:999px;box-shadow:0 6px 20px #0008;white-space:nowrap}
.perfbox[hidden]{display:none}

/* profile người chơi + tab Bạn bè */
.pinfo{display:grid;gap:4px;margin:6px 0 10px;background:#ffffff0a;border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.prow{display:flex;justify-content:space-between;gap:10px;font-size:14px}.prow span{opacity:.75}.prow b{text-align:right}
.frtab{max-height:34vh;overflow:auto;padding:2px}.frtab[hidden]{display:none}
.frhead{font-size:12px;font-weight:700;color:#ffd166;margin:2px 2px 6px}
.frrow{display:flex;align-items:center;gap:6px;background:#ffffff0d;border-radius:9px;padding:5px 8px;margin-bottom:4px;font-size:12.5px}.frrow.on{background:#3aa36b22}
.frrow .frt{flex:1;min-width:0}.frrow .frt b{display:block}.frrow .frt small{opacity:.8;font-size:11.5px}
.frrow button{padding:3px 8px;font-size:12px}
.qapanel .qasks{flex-direction:column;align-items:stretch}.qapanel .qasks button{border-radius:10px}
.qapanel .qsaid{display:grid;gap:2px;margin:6px 0 2px;font-size:12px;max-height:110px;overflow:auto}.qapanel .qsaid div{background:#ffffff0d;border-radius:7px;padding:3px 7px}.qapanel .qsaid b{color:#ffd166}
.votechat .vb{flex-wrap:wrap}.votechat .vc{white-space:nowrap}

/* menu gộp 🤝 Tương tác / 😀 Biểu cảm: bung ngay trên nút */
.popmenu{position:fixed;z-index:8;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:min(360px,calc(100vw - 16px));background:rgba(20,14,10,.95);border:1px solid var(--gold);border-radius:14px;padding:8px;box-shadow:0 10px 28px #000a;animation:qaPop .18s ease-out}
.popmenu[hidden]{display:none}
.popmenu button{background:#000b;border:1px solid var(--line);color:var(--ink);padding:8px 11px;font-size:13.5px}
.popmenu button[hidden]{display:none}
.bar .menubtn{background:#2b211bcc;border-color:var(--gold)}
.bar .dzo.wait{background:#7a6a3a;color:#f6ead8}