/* LÕI — sảnh, phòng chờ, màn chơi */
#app { position: fixed; inset: 0; display: flex; flex-direction: column; }
.man { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* ---------- Sảnh ---------- */
.sanh { overflow-y: auto; overflow-x: hidden; }
.sanh-dau { display: flex; align-items: center; gap: 14px; padding: 16px clamp(14px, 3vw, 40px); flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 12px; color: #fff; margin-right: auto; }
.logo .huy-hieu { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 30px;
  background: linear-gradient(135deg, #ffd43b, #ff5ca8); box-shadow: 0 6px 0 #c2307a, var(--bong); transform: rotate(-6deg); }
.logo h1 { margin: 0; font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 900; letter-spacing: .5px; text-shadow: 0 3px 0 rgba(0,0,0,.18); }
.logo small { display: block; font-size: .8rem; font-weight: 600; opacity: .85; letter-spacing: 0; }
.chip-ho-so { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.95); border-radius: 999px; padding: 6px 16px 6px 6px; box-shadow: var(--bong); cursor: pointer; transition: transform .15s; }
.chip-ho-so:hover { transform: translateY(-2px); }
.chip-ho-so .av { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #e5dbff, #c5f6fa); display: grid; place-items: center; font-size: 24px; }
.chip-ho-so b { display: block; font-size: .95rem; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-ho-so span { font-size: .8rem; color: var(--cam); font-weight: 700; }
.thanh-tab { display: flex; gap: 8px; padding: 0 clamp(14px, 3vw, 40px) 6px; flex-wrap: wrap; }
.tab { border: 0; padding: .55em 1.1em; border-radius: 999px; font-weight: 700; color: #fff; background: rgba(255,255,255,.18); cursor: pointer; font-size: .95rem; transition: background .15s, color .15s, transform .15s; }
.tab:hover { background: rgba(255,255,255,.3); }
.tab.bat { background: #fff; color: var(--chinh); box-shadow: var(--bong); }
.luoi-tro { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: clamp(12px, 2vw, 22px); padding: 14px clamp(14px, 3vw, 40px) 40px; }
.the-tro { position: relative; aspect-ratio: 4/5; border-radius: var(--bo-lon); cursor: pointer; color: #fff; overflow: hidden;
  background: linear-gradient(150deg, var(--a), var(--b)); box-shadow: 0 8px 0 rgba(0,0,0,.12), var(--bong-lon);
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); transition: transform .18s ease-out, box-shadow .18s; }
.the-tro:hover { --ty: -6px; box-shadow: 0 14px 0 rgba(0,0,0,.10), 0 22px 46px rgba(35,25,77,.4); }
.the-tro::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.45), transparent 55%); opacity: 0; transition: opacity .2s; }
.the-tro:hover::before { opacity: 1; }
.the-tro .bieu-tuong { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: clamp(64px, 7vw, 96px); filter: drop-shadow(0 8px 10px rgba(0,0,0,.25)); transition: transform .3s cubic-bezier(.3,1.6,.5,1); line-height: 1; }
.the-tro .bieu-tuong svg { width: 1.1em; height: 1.1em; display: block; }
.the-tro:hover .bieu-tuong { transform: translate(-50%, -56%) scale(1.12) rotate(-6deg); }
.the-tro .vong { position: absolute; width: 150%; aspect-ratio: 1; left: -25%; top: -55%; border-radius: 50%; background: rgba(255,255,255,.12); }
.the-tro .ten { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; background: linear-gradient(transparent, rgba(0,0,0,.28)); }
.the-tro .ten b { display: block; font-size: 1.25rem; font-weight: 800; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.the-tro .ten small { font-size: .78rem; opacity: .92; font-weight: 600; }
.the-tro .nhan { position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,.92); color: var(--chu); font-size: .72rem; font-weight: 800; padding: .3em .7em; border-radius: 999px; }
.the-tro .nhan.moi { background: var(--vang); }
.the-tro.sap-co { filter: saturate(.55) brightness(.92); }
.the-tro.sap-co .bieu-tuong { opacity: .75; }

/* ---------- Hộp chọn chế độ ---------- */
.hop-che-do .dau-tro { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.hop-che-do .dau-tro .bt { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; font-size: 38px; color: #fff; background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: var(--bong); flex: none; }
.hop-che-do .dau-tro .bt svg { width: 44px; height: 44px; }
.hop-che-do p { margin: 0; color: var(--chu-nhat); }
.cac-che-do { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0; }
.che-do { border: 2px solid #ece8ff; border-radius: 18px; padding: 14px; cursor: pointer; text-align: center; transition: border-color .15s, transform .15s, background .15s; background: #fff; }
.che-do:hover { transform: translateY(-2px); border-color: var(--chinh); }
.che-do.bat { border-color: var(--chinh); background: var(--mat-2); }
.che-do .i { font-size: 34px; } .che-do b { display: block; margin-top: 4px; } .che-do small { color: var(--chu-nhat); font-size: .78rem; }
.dong-cau-hinh { display: flex; align-items: center; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
.dong-cau-hinh > label { min-width: 110px; font-weight: 700; font-size: .92rem; }
.nhom-chon { display: flex; gap: 6px; flex-wrap: wrap; }
.nhom-chon button { border: 2px solid #ece8ff; background: #fff; border-radius: 999px; padding: .4em .9em; font-weight: 700; cursor: pointer; color: var(--chu); }
.nhom-chon button.bat { border-color: var(--chinh); background: var(--chinh); color: #fff; }

/* ---------- Phòng chờ ---------- */
.phong { align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
.phong .th-the { width: min(720px, 100%); }
.ma-phong { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px; }
.ma-phong .ma { font-size: 2.4rem; font-weight: 900; letter-spacing: .25em; color: var(--chinh); background: var(--mat-2); padding: .1em .5em; border-radius: 14px; }
.ds-ghe { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ghe { border-radius: 16px; padding: 12px; background: var(--mat-2); display: flex; align-items: center; gap: 10px; min-height: 64px; border: 2px solid transparent; }
.ghe .av { font-size: 30px; width: 44px; height: 44px; display: grid; place-items: center; background: #fff; border-radius: 50%; flex: none; }
.ghe b { display: block; font-size: .92rem; } .ghe small { color: var(--chu-nhat); font-size: .75rem; }
.ghe.trong { border: 2px dashed #cfc6ff; background: #fff; color: var(--chu-nhat); justify-content: center; cursor: pointer; }
.ghe.toi { border-color: var(--chinh); }
.ghi-chu { font-size: .82rem; color: var(--chu-nhat); background: #fff8e1; border-radius: 12px; padding: 10px 12px; margin-top: 12px; line-height: 1.45; }

/* ---------- Màn chơi ---------- */
.man-choi { background: rgba(10, 5, 40, .12); }
.thanh-tren { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); z-index: 5; flex-wrap: nowrap; overflow-x: auto; }
.thanh-tren .ten-tro { color: #fff; font-weight: 800; font-size: 1.05rem; white-space: nowrap; margin-right: 6px; }
.ds-nguoi { display: flex; gap: 6px; flex: 1; justify-content: center; }
.nguoi { position: relative; display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.9); border-radius: 999px; padding: 3px 12px 3px 3px; font-size: .85rem; font-weight: 700; transition: transform .2s, box-shadow .2s; white-space: nowrap; border: 3px solid transparent; }
.nguoi .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: var(--c, #ddd); }
.nguoi.luot { transform: scale(1.08); border-color: var(--vang); box-shadow: 0 0 0 4px rgba(255, 212, 59, .45), var(--bong); animation: nhip-luot 1.2s ease-in-out infinite; }
@keyframes nhip-luot { 50% { box-shadow: 0 0 0 8px rgba(255, 212, 59, .15), var(--bong); } }
.cl0 .nguoi.luot { animation: none; }
.nguoi .bong-chat { position: absolute; top: 110%; left: 50%; transform: translateX(-50%); background: #fff; border-radius: 14px; padding: 4px 10px; font-size: 1.4rem; box-shadow: var(--bong-lon); z-index: 20; white-space: nowrap; }
.nguoi .bong-chat.chu { font-size: .9rem; }
.khung-tro { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.bang-emoji { position: absolute; right: 10px; top: 56px; background: #fff; border-radius: 18px; padding: 10px; box-shadow: var(--bong-lon); display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; z-index: 30; width: 260px; }
.bang-emoji button { border: 0; background: transparent; font-size: 1.6rem; cursor: pointer; border-radius: 10px; padding: 4px; }
.bang-emoji button:hover { background: var(--mat-2); }
.bang-emoji .cau { grid-column: 1 / -1; font-size: .85rem; text-align: left; padding: 6px 10px; background: var(--mat-2); }
.man-ket { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20,10,60,.45); z-index: 40; backdrop-filter: blur(2px); }
.man-ket .th-the { text-align: center; min-width: min(380px, 92vw); }
.man-ket h2 { font-size: 2.4rem; margin: 6px 0; }
.man-ket .lon-bt { font-size: 72px; }
.man-chuyen-may { position: absolute; inset: 0; z-index: 35; display: grid; place-items: center; background: linear-gradient(135deg, #7c5cff, #ff5ca8); color: #fff; text-align: center; cursor: pointer; }
.man-chuyen-may .av { font-size: 90px; }
@media (max-width: 640px) {
  .luoi-tro { grid-template-columns: repeat(2, 1fr); }
  .thanh-tren .ten-tro { display: none; }
  .nguoi { padding-right: 6px; } .nguoi .ten-n { display: none; }
}

/* Ảnh Blender gói 4–5: nền sảnh, logo, ảnh bìa trò */
.sanh.co-nen { background-size: cover; background-position: center; }
.logo.co-anh h1 { line-height: 0; }
.logo.co-anh img { height: clamp(48px, 7vw, 76px); width: auto; display: block; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.logo.co-anh small { line-height: 1.3; margin-top: 2px; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.luoi-tro:has(.co-bia) { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.the-tro.co-bia { aspect-ratio: 8/5; container-type: inline-size; }
.the-tro.co-bia .bia { position: absolute; inset: 0; --rong-anh: 100cqw; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.the-tro.co-bia:hover .bia { transform: scale(1.04); }
.the-tro.co-bia .vong, .the-tro.co-bia .bieu-tuong { display: none; }
.the-tro.co-bia .ten { top: 10px; left: 10px; right: auto; bottom: auto; padding: .3em .8em; border-radius: 999px; background: rgba(20,10,60,.55); }
.the-tro.co-bia .ten b { font-size: .85rem; }
.the-tro.co-bia .ten small { display: none; }
html[lang="vi"] .the-tro.co-bia .ten { display: none; }
@media (max-width: 640px) { .luoi-tro:has(.co-bia) { grid-template-columns: 1fr 1fr; } }

/* Ván dở */
.van-do { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #e6fcf5; border: 2px solid var(--la); border-radius: 16px; padding: 10px 12px; margin: 10px 0 4px; }
.van-do > div { flex: 1; min-width: 150px; }
.van-do b { display: block; }
.van-do small { color: var(--chu-nhat); }

/* ===== Theo thiết bị (TH.thietBi, HOP-DONG mục 13) ===== */
.nut-ngan-keo, .nut-toan-man, .nhac-xoay { display: none !important; }
/* Điện thoại / máy tính bảng: nút đủ lớn để chạm */
.cham .th-nut { min-height: 44px; }
.cham .th-nut.tron { min-width: 44px; min-height: 44px; }
.cham .nhom-chon button { min-height: 40px; }
.cham:not(.ung-dung) .man-choi .nut-toan-man { display: inline-flex !important; }

/* Điện thoại xoay ngang: chiều cao thấp, tận dụng chiều ngang */
.tb-dt-ngang .man { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.tb-dt-ngang .sanh-dau { padding: 6px 12px; gap: 8px; flex-wrap: nowrap; flex: none; }
.tb-dt-ngang .logo.co-anh img { height: 38px; }
.tb-dt-ngang .logo small { display: none; }
.tb-dt-ngang .logo .huy-hieu { width: 38px; height: 38px; font-size: 22px; }
.tb-dt-ngang .logo h1 { font-size: 1.2rem; }
.tb-dt-ngang .sanh-dau .th-nut { padding: .45em .9em; font-size: .88rem; }
.tb-dt-ngang .chip-ho-so { padding: 3px 10px 3px 3px; }
.tb-dt-ngang .chip-ho-so .av { width: 36px; height: 36px; font-size: 20px; }
.tb-dt-ngang .chip-ho-so span { display: none; }
.tb-dt-ngang .thanh-tab { flex: none; padding-bottom: 2px; flex-wrap: nowrap; overflow-x: auto; }
.tb-dt-ngang .tab { padding: .4em .9em; font-size: .85rem; white-space: nowrap; }
.tb-dt-ngang .luoi-tro, .tb-dt-ngang .luoi-tro:has(.co-bia) { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; padding: 8px 12px 24px; }
.tb-dt-ngang .the-tro .ten b { font-size: 1rem; }
.tb-dt-ngang .thanh-tren { padding: 3px 8px; gap: 6px; }
.tb-dt-ngang .thanh-tren .ten-tro { display: none; }
.tb-dt-ngang .thanh-tren .nguoi { padding: 2px 8px 2px 2px; }
.tb-dt-ngang .th-hop { padding: 12px 16px; max-height: 94vh; max-height: 94dvh; }
.tb-dt-ngang .th-hop h2 { font-size: 1.1rem; margin-bottom: 6px; }
.tb-dt-ngang .th-hop .nut-hang { margin-top: 10px; position: sticky; bottom: -12px; background: var(--mat); padding: 8px 0 10px; z-index: 2; box-shadow: 0 -8px 12px -8px rgba(35,25,77,.15); }
.tb-dt-ngang .thanh-tren .nguoi .ten-n { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-dt-ngang .hop-che-do .dau-tro { margin-bottom: 6px; }
.tb-dt-ngang .hop-che-do .dau-tro .bt { width: 44px; height: 44px; font-size: 26px; }
.tb-dt-ngang .hop-che-do .dau-tro p { display: none; }
.tb-dt-ngang .cac-che-do { grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
.tb-dt-ngang .che-do { padding: 6px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.tb-dt-ngang .che-do .i { font-size: 22px; } .tb-dt-ngang .che-do b { margin: 0; } .tb-dt-ngang .che-do small { display: none; }
.tb-dt-ngang .dong-cau-hinh { margin: 4px 0; }
.tb-dt-ngang .ghi-chu { margin-top: 6px; padding: 6px 10px; }
.tb-dt-ngang .man-ket .th-the { padding: 12px 18px; }
.tb-dt-ngang .man-ket h2 { font-size: 1.6rem; margin: 2px 0; }
.tb-dt-ngang .man-ket .lon-bt { font-size: 44px; }
.tb-dt-ngang .phong { padding: 8px 12px; align-items: stretch; }
.tb-dt-ngang .phong .th-the { width: min(900px, 100%); margin: auto; padding: 12px 16px; }
.tb-dt-ngang .ma-phong .ma { font-size: 1.7rem; }
/* Ngăn kéo: trò gắn class th-bang-ben cho bảng bên; trên điện thoại ngang bảng trượt ra từ phải */
.tb-dt-ngang .man-choi:has(.th-bang-ben) .nut-ngan-keo { display: inline-flex !important; }
.tb-dt-ngang .th-bang-ben { position: absolute !important; top: 0; right: 0; bottom: 0; left: auto !important; width: min(340px, 48vw) !important; max-width: none !important; height: auto !important;
  z-index: 60; overflow-y: auto; background: var(--mat); box-shadow: -10px 0 30px rgba(0,0,0,.3); padding: 10px 10px 10px 12px; padding-right: calc(10px + env(safe-area-inset-right));
  transform: translateX(105%); transition: transform .25s cubic-bezier(.3,.8,.4,1); }
.tb-dt-ngang .th-bang-ben.mo { transform: none; }
.tb-dt-ngang .man-choi.ngan-keo-mo .nut-ngan-keo { background: var(--chinh); color: #fff; }
/* Nhắc xoay ngang (trò có huongUuTien: 'ngang') */
.tb-dt-doc .nhac-xoay { display: flex !important; position: absolute; left: 50%; top: calc(62px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 45; align-items: center; gap: 8px;
  background: rgba(20,10,60,.88); color: #fff; padding: 6px 6px 6px 14px; border-radius: 999px; font-weight: 700; font-size: .9rem; box-shadow: var(--bong-lon); width: max-content; max-width: 94vw; }
.nhac-xoay .i { display: inline-block; animation: th-xoay 1.6s ease-in-out infinite; }
@keyframes th-xoay { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }

/* PC: bảng rộng, hover */
.tb-pc .luoi-tro:has(.co-bia) { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }