/* ============ Nền tảng giao diện ============ */
:root {
  --bg: #070c0a;
  --bg-2: #0c1310;
  --panel: #121b17;
  --panel-2: #18241f;
  --line: #26352e;
  --line-soft: rgba(255, 255, 255, .07);
  --text: #eaf2ec;
  --muted: #8fa79c;
  --gold: #f2c14e;
  --gold-2: #c8921a;
  --red: #e0453a;
  --green: #22a05a;
  --felt: #0f6b41;
  --felt-2: #06321e;
  --wood: #4a2c17;
  --cw: 52px;              /* bề rộng lá bài */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --topbar: 56px;
  --tabbar: 0px;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-size: 14px;
  color: var(--text);
  background:
    radial-gradient(1000px 520px at 50% -160px, rgba(34, 120, 80, .35), transparent 70%),
    radial-gradient(700px 420px at 110% 100%, rgba(242, 193, 78, .07), transparent 60%),
    var(--bg);
  padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom));
}
button, input, select { font: inherit; color: inherit; }
button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
.hint { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 8px 0 0; }
.hint.center { text-align: center; }
.pos { color: #86efac; }
.neg { color: #fca5a5; }
kbd { display: none; }

/* ============ Thanh trên ============ */
.topbar {
  position: sticky; top: 0; z-index: 40; height: var(--topbar);
  display: flex; align-items: center; gap: 10px; padding: 0 12px;
  background: rgba(7, 12, 10, .88); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
  padding-top: env(safe-area-inset-top);
  /* iPhone xoay ngang: Dynamic Island và viền bo nằm ở cạnh trái/phải.
     max() nên máy tính và Android (env = 0) vẫn giữ nguyên 12px như cũ. */
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}
.brand { display: flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; font-size: 17px; white-space: nowrap; }
.brand .suit { color: var(--gold); font-size: 20px; }
.brand b { color: var(--gold); }
.nav { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  color: var(--muted); text-decoration: none; padding: 7px 12px; border-radius: 999px; white-space: nowrap; font-weight: 600;
}
.nav a:hover { color: var(--text); background: var(--panel-2); }
.nav a.active { color: #1a1204; background: linear-gradient(180deg, #f7d272, var(--gold-2)); }
.wallet {
  display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; margin-left: auto;
  background: var(--panel-2); border: 1px solid var(--line); font-weight: 800; font-variant-numeric: tabular-nums;
  transition: background .3s, border-color .3s;
}
.wallet.up { background: #14532d; border-color: #22a05a; }
.wallet.down { background: #4c1d1d; border-color: #e0453a; }
.coin { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe8a3, var(--gold) 45%, var(--gold-2)); }
.icon-btn, .avatar-btn {
  display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 18px;
}
.icon-btn:hover, .avatar-btn:hover { border-color: var(--gold); }

main {
  padding: 14px; max-width: 1280px; margin: 0 auto;
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
}

/* ============ Nút, bảng ============ */
.btn {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 16px; cursor: pointer; font-weight: 700; min-height: 44px;
  transition: transform .08s, border-color .2s, background .2s;
}
.btn:hover { border-color: var(--gold); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.gold { background: linear-gradient(180deg, #f7d272, var(--gold-2)); color: #1a1204; border-color: transparent; }
.btn.danger { background: #5b1f1c; border-color: #7c2b27; }
.btn.ghost { background: transparent; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; }
.panel h3 { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 10px; }
.chip-tag { color: var(--muted); font-size: 13px; }
.total-tag b { color: var(--gold); font-size: 16px; }

/* ============ Lá bài ============ */
.cards { display: flex; gap: 5px; justify-content: center; min-height: calc(var(--cw) * 1.42); }
.card {
  position: relative; width: var(--cw); height: calc(var(--cw) * 1.42); border-radius: 8px; flex: 0 0 auto;
  background: linear-gradient(160deg, #fff, #e8ebe9); color: #14181a; user-select: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .08);
  transition: transform .2s, box-shadow .2s;
}
.card.red { color: #c81f1f; }
.card .cr { position: absolute; top: 3px; left: 6px; font-weight: 800; font-size: calc(var(--cw) * .34); line-height: 1; }
.card .cs { position: absolute; top: calc(var(--cw) * .36); left: 6px; font-size: calc(var(--cw) * .24); line-height: 1; }
.card .cc { position: absolute; right: 5px; bottom: 2px; font-size: calc(var(--cw) * .62); line-height: 1; opacity: .92; }
.card.back {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.09) 0 4px, transparent 4px 8px),
    linear-gradient(160deg, #b3262c, #6d1015);
  box-shadow: 0 3px 10px rgba(0,0,0,.45), inset 0 0 0 3px #fff;
}
.card.deal { animation: deal .32s ease-out both; }
.card.hl { box-shadow: 0 0 0 3px var(--gold), 0 0 20px rgba(242,193,78,.75); transform: translateY(-6px); }
@keyframes deal { from { opacity: 0; transform: translateY(-24px) rotateY(80deg) scale(.85); } }

/* ============ Chip ============ */
.chip-select { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 12px 0; }
.chip {
  --c: #2b6cb0;
  width: 50px; height: 50px; border-radius: 50%; cursor: pointer; font-weight: 800; font-size: 12px; color: #fff;
  border: 4px dashed rgba(255,255,255,.75); text-shadow: 0 1px 2px rgba(0,0,0,.6);
  background: radial-gradient(circle, var(--c) 55%, color-mix(in srgb, var(--c) 70%, #000) 56%);
  box-shadow: 0 3px 8px rgba(0,0,0,.5); transition: transform .12s;
}
.chip:hover { transform: translateY(-3px); }
.chip.sel { outline: 3px solid var(--gold); outline-offset: 2px; transform: translateY(-4px); }
.chip.allin { font-size: 11px; }
.chip-on {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  min-width: 28px; height: 28px; padding: 0 4px; border-radius: 999px; background: var(--gold); color: #1a1204;
  font-size: 11px; font-weight: 900; display: grid; place-items: center; border: 2px dashed #fff; box-shadow: 0 2px 6px rgba(0,0,0,.6);
}

/* ============ Sảnh ============ */
.hero { text-align: center; margin: 6px 0 18px; }
.hero h1 { font-size: 24px; margin-bottom: 6px; }
.hero p { color: var(--muted); margin: 0 auto; max-width: 620px; line-height: 1.55; }
.lobby-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.game-card {
  position: relative; display: block; padding: 16px; border-radius: var(--r-lg); text-decoration: none; color: var(--text);
  border: 1px solid var(--line); background: linear-gradient(160deg, var(--panel-2), var(--panel));
  transition: transform .15s, border-color .2s;
}
.game-card:hover { transform: translateY(-3px); border-color: var(--gold); }
.gc-top { display: flex; align-items: center; justify-content: space-between; }
.gc-icon { font-size: 34px; }
.gc-live { color: var(--muted); font-size: 11.5px; }
.game-card h2 { font-size: 18px; margin: 8px 0 4px; }
.game-card p { margin: 0; color: var(--muted); line-height: 1.45; font-size: 13px; }
.gc-stats { margin-top: 10px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gc-poker { background: linear-gradient(160deg, #14432f, var(--panel)); }
.gc-lg { background: linear-gradient(160deg, #4a1d24, var(--panel)); }
.gc-bc { background: linear-gradient(160deg, #1d2f4a, var(--panel)); }
.gc-bj { background: linear-gradient(160deg, #3b1d4a, var(--panel)); }
.gc-tx { background: linear-gradient(160deg, #4a1d1d, var(--panel)); }
.gc-sb { background: linear-gradient(160deg, #4a3a1d, var(--panel)); }
.gc-xd { background: linear-gradient(160deg, #333, var(--panel)); }
.gc-rl { background: linear-gradient(160deg, #1d324a, var(--panel)); }
.lobby-foot { text-align: center; margin-top: 18px; }
.lan-card { max-width: 640px; margin: 18px auto 0; display: flex; gap: 16px; align-items: center; }
.lan-qr { flex: 0 0 140px; width: 140px; background: #fff; border-radius: 12px; padding: 6px; }
.lan-qr svg { display: block; width: 100%; height: auto; }
.lan-card h3 { color: var(--text); text-transform: none; letter-spacing: 0; font-size: 16px; }
.lan-card p { margin: 6px 0; color: var(--muted); }
.lan-url code { display: inline-block; margin: 4px 0; padding: 4px 9px; border-radius: 8px; background: #0a0f0d; color: var(--gold); font-size: 16px; }

/* ============ Bàn bài ============ */
.table-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px;
}
.level { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.level select { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; cursor: pointer; }
.pending-note { color: var(--gold); font-size: 12px; }
.table-wrap { padding-inline: 58px; }
.felt-table { position: relative; width: 100%; max-width: 960px; aspect-ratio: 16 / 9; margin: 30px auto 44px; }
.felt {
  background: radial-gradient(ellipse at center, #17915a 0%, var(--felt) 45%, var(--felt-2) 100%);
  border: 14px solid var(--wood);
  box-shadow: inset 0 0 70px rgba(0,0,0,.55), 0 18px 50px rgba(0,0,0,.6), 0 0 0 3px #6b4423;
}
.felt.oval { position: absolute; inset: 5% 6%; border-radius: 999px; }
.felt.lg-felt { background: radial-gradient(ellipse at center, #a3283a 0%, #7a1626 45%, #3d0911 100%); }
.felt.bc-felt { background: radial-gradient(ellipse at center, #2a6bb8 0%, #173f75 45%, #0a1f3d 100%); }
.table-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
/* Hũ tiền phải nổi trên ghế: nhãn và bong bóng của ghế trên cùng thõng xuống giữa bàn,
   che mất số tiền thì người chơi không biết đang cược bao nhiêu. */
.pot {
  position: relative; z-index: 5;
  background: rgba(0,0,0,.4); padding: 5px 16px; border-radius: 999px; font-weight: 800; color: var(--gold); min-height: 1.7em;
}
.board { min-width: calc(var(--cw) * 5 + 24px); }
.banner {
  position: relative; z-index: 5;
  background: rgba(0,0,0,.65); border: 1px solid var(--gold); border-radius: 12px; padding: 8px 14px;
  text-align: center; font-weight: 700; max-width: 86%;
}
.big-timer { font-size: 40px; font-weight: 900; text-shadow: 0 3px 12px rgba(0,0,0,.8); font-variant-numeric: tabular-nums; }

/* ============ Khung co giãn ============
   Mặt bàn được thiết kế MỘT LẦN ở cỡ chuẩn 960x540 rồi phóng/thu cho vừa chỗ trống
   còn lại, thay vì vá kích thước theo từng cỡ máy. Ghế đặt theo % của khung chuẩn nên
   tỉ lệ giữ nguyên trên mọi màn. Thanh thao tác nằm NGOÀI khung này để nút không bị
   thu nhỏ tới mức khó bấm. */
/* Phải là .table-wrap.stage: luật .table-wrap trong khối nằm ngang đứng sau trong file,
   để ngang độ ưu tiên là nó đè mất khung này. */
.table-wrap.stage {
  position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden;
  padding: 0; display: block;
  /* Ngoài khổ nằm ngang trang cuộn bình thường, khung không tự có chiều cao (con bên
     trong định vị tuyệt đối) nên phải cho nó cao theo đúng tỉ lệ khung thiết kế,
     không thì khung co về 0 và bàn biến mất trên máy tính. */
  width: 100%; aspect-ratio: 1200 / 450; max-height: 74vh;
}
.stage > .felt-table {
  position: absolute; top: 0; left: 0;
  /* Tỉ lệ khớp chỗ trống thật khi cầm ngang (~2,7:1). Nút thao tác đã dời lên ngang ghế
     nên bàn không phải dẹt như dải đường đua nữa. */
  width: 1200px; height: 340px; max-width: none; margin: 0; aspect-ratio: auto;
  transform-origin: top left;
  transform: translate(var(--sx, 0px), var(--sy, 0px)) scale(var(--sc, 1));
}

/* Ghế sát mép trên/dưới dịch vào trong chút: ghế có bài + dòng nhãn cao nên để 1% và 99%
   là bị khung bàn (overflow:hidden) cắt mất 1-6px. Dịch ghế chứ không nới khung,
   vì nới khung là chữ trên cả bàn nhỏ đi. */
.stage .seats-6 .seat[data-pos="3"] { top: 3%; }
.stage .seats-6 .seat[data-pos="0"] { top: 96%; }
.stage .seats-5 .seat[data-pos="0"] { top: 92%; }

/* ============ Nút thao tác ngang hàng ghế của mình ============ */
.view.co-nut-ghe { position: relative; }
.actionbar.tt-ghe {
  position: absolute; left: 0; right: 0; z-index: 20;
  top: var(--y-ghe, 86%); transform: translateY(-50%);
  max-width: none; margin: 0; padding: 0 6px;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--o-ghe, 150px) minmax(0, 1fr);
  align-items: center; pointer-events: none;
}
.tt-ghe > .act-buttons { display: none !important; }
.tt-trai, .tt-phai { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tt-trai { grid-column: 1; justify-content: flex-end; }
.tt-phai { grid-column: 3; justify-content: flex-start; }
/* Chỉ nút mới bắt chạm; khoảng trống hai bên vẫn để chạm xuyên xuống bàn */
.tt-trai > *, .tt-phai > * { pointer-events: auto; }
.tt-ghe:not(.tt-luot) .tt-nut { display: none !important; }
.tt-ghe .btn { flex: 0 1 auto; min-height: 38px; padding: 8px 16px; font-size: 13.5px; white-space: nowrap; }
.tt-ghe .act-row { margin: 0; gap: 6px; flex-wrap: nowrap; }
.tt-ghe .peek-row .hint { display: none; }
.tt-ghe .wait {
  padding: 4px 6px; font-size: 12.5px; text-align: left; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tt-ghe .turn-timer { min-width: 0; padding: 0 2px; }
.tt-to { position: relative; display: flex; }
.tt-moto.dang-mo { box-shadow: 0 0 0 3px rgba(242, 193, 78, .5), 0 6px 18px rgba(242, 193, 78, .35); }
/* Bảng chọn mức tố bật lên phía trên nút Tố */
.tt-ghe .tt-bang {
  position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 30;
  width: 168px; padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(180deg, #1d2a24, #0f1714);
  border: 1px solid var(--brass-3); border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .65);
}
.tt-ghe .tt-dong {
  position: absolute; top: -11px; right: -11px; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--brass-3); background: #1b1206; color: #ffe7ac;
  font-weight: 800; font-size: 12px; line-height: 1; cursor: pointer;
}
.tt-ghe .tt-bang .raise-box { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 8px; margin: 0; }
.tt-ghe .tt-bang .presets { display: flex; flex-direction: column; gap: 5px; }
.tt-ghe .tt-bang .presets button { flex: 0 0 auto; padding: 6px 4px; font-size: 12px; }
.tt-ghe .tt-bang .raise-row { display: contents; }
/* Thanh kéo DỌC: kéo lên là tăng mức tố, khớp với cột nút xếp từ lớn xuống nhỏ */
.tt-ghe .tt-bang .raise-row input[type=range] {
  grid-column: 2; grid-row: 1; justify-self: center; margin: 0;
  writing-mode: vertical-lr; direction: rtl;
  width: 24px; height: 100%; min-height: 120px; accent-color: var(--gold);
}
.tt-ghe .tt-bang .raise-row input[type=number] { display: none; }
.tt-ghe .tt-bang > .btn { width: 100%; min-height: 36px; padding: 7px 10px; }

/* Bàn có ghế là bàn nằm ngang (giống các app ngoài thị trường). Cầm dọc trên màn hẹp thì
   bàn chỉ còn hệ số co ~0,32, chữ 4px, nút đè lên ghế — nhắc xoay ngang thay vì cố nhét. */
@media (orientation: portrait) and (max-width: 700px) {
  .view.co-nut-ghe { min-height: 70vh; }
  .view.co-nut-ghe::before {
    content: '↻\A Xoay ngang điện thoại để chơi';
    white-space: pre; text-align: center;
    position: absolute; inset: 0; z-index: 60;
    display: flex; align-items: center; justify-content: center;
    padding: 24px; font-size: 17px; font-weight: 800; line-height: 1.9; color: #ffe7ac;
    background: rgba(7, 12, 10, .95);
  }
}

.seats { position: absolute; inset: 0; }
.seat {
  position: absolute; transform: translate(-50%, -50%); width: 146px; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
}
.seat .hole { display: flex; gap: 3px; min-height: calc(var(--cw) * 1.1); margin-bottom: -12px; z-index: 1; }
.seat .hole .card { --cw: 42px; }
.seat.me .hole .card { --cw: 52px; }
.three-cards .seat .hole .card { --cw: 38px; }
.three-cards .seat.me .hole .card { --cw: 46px; }
.seat .plate {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; width: 100%;
  background: linear-gradient(180deg, #1d2925, #101915); border: 2px solid #32453c; border-radius: 12px; padding: 6px 9px;
  box-shadow: 0 6px 16px rgba(0,0,0,.5);
}
.seat.me .plate { border-color: var(--gold); }
.seat .avatar { font-size: 21px; width: 30px; height: 30px; display: grid; place-items: center; background: #0a1210; border-radius: 50%; flex: 0 0 auto; }
.seat .meta { min-width: 0; flex: 1; }
.seat .name { font-weight: 700; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat .stack { color: var(--gold); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.seat .dbtn {
  position: absolute; right: -8px; top: -8px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; color: #111; font-weight: 900; font-size: 11px; display: grid; place-items: center;
}
.seat .tag {
  margin-top: 5px; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  background: rgba(0,0,0,.7); border: 1px solid #3a4f45; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.seat .bubble {
  position: absolute; bottom: calc(100% - 6px); left: 50%; transform: translateX(-50%);
  background: #fffbe8; color: #241d08; border-radius: 12px; padding: 4px 9px; font-size: 11.5px; font-weight: 600;
  white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.5); animation: pop .25s ease-out;
}
.seat.turn .plate { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(242,193,78,.3), 0 0 24px rgba(242,193,78,.45); }
.seat.folded { opacity: .42; }
.seat.folded .hole { visibility: hidden; }
/* Mình bỏ bài / úp bỏ: vẫn thấy bài cũ của mình, chỉ mờ đi */
.seat.me.folded { opacity: 1; }
.seat.me.folded .hole { visibility: visible; opacity: .45; filter: grayscale(.75); }
.seat.me.folded .plate { opacity: .6; }
/* Gợi ý bộ bài của mình: nhãn nằm ngay mép dưới bài, trên thẻ tên — khỏi phải liếc lên góc bàn */
.seat .goi-y-bai {
  position: absolute; left: 50%; bottom: calc(100% - 4px); transform: translateX(-50%); z-index: 2;
  /* rộng hơn thẻ tên được một chút cho tên dài ("K-10 đồng chất · khá"); phần lấn chỉ là lề trong, đồng hồ lượt vẫn đè lên trên */
  max-width: calc(100% + 16px); padding: 0 8px; border-radius: 999px; pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 11.5px; font-weight: 800; line-height: 19px; color: #2a1c02;
  background: linear-gradient(180deg, #ffe39a, #f2c14e); border: 1px solid #a8801f; box-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}
.seat.out { opacity: .5; }
.seat.winner .plate { border-color: #4ade80; box-shadow: 0 0 26px rgba(74,222,128,.6); }
.seat.winner .tag { background: #14532d; border-color: #4ade80; }
.seat.allin .tag { background: #7f1d1d; border-color: #ef4444; }
@keyframes pop { from { transform: translateX(-50%) scale(.6); opacity: 0; } }

.seats-6 .seat[data-pos="0"] { left: 50%; top: 99%; }
.seats-6 .seat[data-pos="1"] { left: 6%; top: 76%; }
.seats-6 .seat[data-pos="2"] { left: 9%; top: 22%; }
.seats-6 .seat[data-pos="3"] { left: 50%; top: 1%; }
.seats-6 .seat[data-pos="4"] { left: 91%; top: 22%; }
.seats-6 .seat[data-pos="5"] { left: 94%; top: 76%; }
.seats-5 .seat[data-pos="0"] { left: 50%; top: 99%; }
.seats-5 .seat[data-pos="1"] { left: 6%; top: 68%; }
.seats-5 .seat[data-pos="2"] { left: 22%; top: 6%; }
.seats-5 .seat[data-pos="3"] { left: 78%; top: 6%; }
.seats-5 .seat[data-pos="4"] { left: 94%; top: 68%; }

.betchip {
  position: absolute; transform: translate(-50%, -50%); z-index: 3;
  display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: 12px;
  background: rgba(0,0,0,.6); padding: 2px 9px 2px 3px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.chip-ico { width: 15px; height: 15px; border-radius: 50%; border: 2px dashed #fff; background: var(--red); }
.seats-6 .betchip[data-pos="0"] { left: 50%; top: 73%; }
.seats-6 .betchip[data-pos="1"] { left: 23%; top: 66%; }
.seats-6 .betchip[data-pos="2"] { left: 26%; top: 34%; }
.seats-6 .betchip[data-pos="3"] { left: 50%; top: 22%; }
.seats-6 .betchip[data-pos="4"] { left: 74%; top: 34%; }
.seats-6 .betchip[data-pos="5"] { left: 77%; top: 66%; }

/* Đánh biên (3 Cây) */
.bien { margin-top: 5px; display: flex; gap: 4px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: 11.5px; min-height: 24px; }
.bien button { border: 1px solid #806615; background: #2a1f0b; border-radius: 999px; padding: 3px 9px; cursor: pointer; font-weight: 700; font-size: 11.5px; }
.bien .bien-yes { background: #14532d; border-color: #16a34a; }
.bien .bien-no { background: #3f1515; border-color: #7f1d1d; }
.bien .offer { color: var(--gold); font-weight: 700; animation: blink 1s infinite; }
.bien .on { color: var(--gold); font-weight: 700; }
.bien .muted { color: var(--muted); }
@keyframes blink { 50% { opacity: .5; } }
.card.back.flippable { cursor: pointer; }
.card.back.flippable:hover { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--gold); }

/* ============ Thanh hành động ============ */
.actionbar { max-width: 960px; margin: 0 auto; }
.wait { color: var(--muted); text-align: center; padding: 12px; }
.act-buttons { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px; }
.act-row { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.act-row.wrap input { flex: 1 1 140px; background: #0a1210; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.act-main .btn { flex: 1 1 110px; }
.turn-timer { font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; min-width: 46px; text-align: center; }
.turn-timer:empty { display: none; }
.turn-timer.urgent { color: #f87171; }
.raise-box { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.presets { display: flex; gap: 6px; }
.presets button { flex: 1; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 4px; cursor: pointer; font-size: 12.5px; font-weight: 600; }
.presets button:hover { border-color: var(--gold); }
.raise-row { display: flex; gap: 8px; align-items: center; }
.raise-row input[type=range] { flex: 1; accent-color: var(--gold); }
.raise-row input[type=number] { width: 110px; background: #0a1210; border: 1px solid var(--line); border-radius: 10px; padding: 9px; text-align: right; font-variant-numeric: tabular-nums; }
.bet-line { display: flex; gap: 10px; align-items: center; justify-content: center; color: var(--muted); }
.bet-line b { color: var(--gold); font-size: 17px; }

.logbox { margin: 14px auto 0; max-width: 960px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px 14px; }
.logbox summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.log { max-height: 220px; overflow-y: auto; font-size: 12.5px; line-height: 1.6; color: #c9d6cf; margin-top: 8px; }
.log .sep { color: var(--gold); margin-top: 4px; }

/* ============ Blackjack ============ */
.bj-table {
  position: relative; max-width: 1000px; margin: 8px auto 14px; min-height: 420px; padding: 18px 14px 22px;
  border-radius: 24px 24px 46% 46% / 24px 24px 26% 26%; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.bj-dealer { text-align: center; }
.bj-label { font-weight: 700; margin-bottom: 6px; }
.val { display: inline-block; min-width: 28px; padding: 1px 9px; border-radius: 999px; background: rgba(0,0,0,.45); color: var(--gold); margin-left: 6px; }
.bj-rules { color: rgba(255,255,255,.45); font-size: 11px; letter-spacing: 1.6px; border-block: 1px solid rgba(255,255,255,.18); padding: 4px 14px; }
.bj-seats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; margin-top: auto; }
.bj-spot {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; min-height: 190px;
  padding: 8px 4px; border-radius: 16px; border: 2px dashed rgba(255,255,255,.16);
}
.bj-spot.me { border-color: rgba(242,193,78,.55); background: rgba(0,0,0,.14); }
.bj-spot.turn { border-style: solid; border-color: var(--gold); box-shadow: 0 0 22px rgba(242,193,78,.35); }
.bj-spot .hands { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.bj-hand { padding: 4px; border-radius: 10px; border: 2px solid transparent; text-align: center; }
.bj-hand.active { border-color: var(--gold); background: rgba(0,0,0,.2); }
.bj-hand .cards { --cw: 42px; min-height: 60px; }
.bj-hand .cards .card + .card { margin-left: -20px; }
.bj-hand .meta { margin-top: 4px; display: flex; gap: 6px; justify-content: center; align-items: center; font-size: 12px; }
.badge { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; background: #334155; }
.badge.win, .badge.blackjack { background: #166534; }
.badge.lose, .badge.bust { background: #7f1d1d; }
.badge.push { background: #475569; }
.bj-spot .plate {
  display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%;
  background: linear-gradient(180deg, #1d2925, #101915); border: 2px solid #32453c; border-radius: 12px; padding: 5px 9px;
}
.bj-spot .avatar { font-size: 20px; }
.bj-spot .name { font-weight: 700; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bj-spot .stack { color: var(--gold); font-size: 12px; }
.bj-spot .tag { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: rgba(0,0,0,.6); border: 1px solid #3a4f45; }
.bj-spot .tag.pos { border-color: #4ade80; color: #86efac; }
.bj-spot .tag.neg { border-color: #ef4444; color: #fca5a5; }

/* ============ Sân xúc xắc / đĩa ============ */
.round-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; color: var(--muted); margin-bottom: 10px; }
.round-bar b { color: var(--text); }
.round-bar .phase { color: var(--gold); font-weight: 700; }
.round-timer { font-size: 20px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.round-timer.urgent { color: #f87171; }
.dice-stage { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 14px; }
.bowl {
  position: relative; width: 210px; height: 210px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #3a2a1a, #1c130b 70%);
  border: 8px solid #6b4423; box-shadow: inset 0 0 40px rgba(0,0,0,.8), 0 12px 30px rgba(0,0,0,.6);
}
.bowl.plate { background: radial-gradient(circle, #fafafa 0 55%, #d6d6d6 56% 60%, #2a1c10 61%); }
.bowl.covered::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d4a15b, #8a5a24 60%, #5a3a16); box-shadow: 0 10px 30px rgba(0,0,0,.6);
}
.bowl.shaking { animation: shake .25s infinite; }
@keyframes shake {
  0%, 100% { transform: translate(0,0) rotate(0); }
  25% { transform: translate(-6px,3px) rotate(-4deg); }
  75% { transform: translate(6px,-3px) rotate(4deg); }
}
.bowl .big-timer { position: absolute; z-index: 2; }
.dice-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: 150px; }
.die {
  width: 54px; height: 54px; border-radius: 12px; background: linear-gradient(145deg, #fff, #dcdcdc);
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 7px;
  box-shadow: 0 4px 10px rgba(0,0,0,.6); animation: popin .35s ease-out both;
}
.die i { width: 10px; height: 10px; border-radius: 50%; margin: auto; visibility: hidden; background: #111; }
.die i.on { visibility: visible; }
.die.f1 i.on, .die.f4 i.on { background: #d11; }
@keyframes popin { from { transform: scale(.3) rotate(-90deg); opacity: 0; } }
.coins { display: grid; grid-template-columns: repeat(2, 44px); gap: 12px; }
.xcoin {
  display: block; width: 44px; height: 44px; border-radius: 50%; animation: popin .35s ease-out both;
  box-shadow: 0 3px 6px rgba(0,0,0,.45), inset 0 0 0 4px rgba(0,0,0,.12);
}
.xcoin.red { background: radial-gradient(circle at 35% 35%, #ff7a7a, #c81e1e 70%); }
.xcoin.white { background: radial-gradient(circle at 35% 35%, #fff, #cfcfcf 70%); }
.stage-result { min-height: 26px; font-size: 18px; font-weight: 800; text-align: center; }
.stage-result b { color: var(--gold); font-size: 22px; }

/* Mở bát: con xúc xắc còn úp + ô chọn kiểu mở */
.die-cover {
  width: 46px; height: 46px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 22px; font-weight: 900;
  color: rgba(255, 255, 255, .55); background: linear-gradient(150deg, #2a3b34, #16211c);
  border: 2px dashed rgba(255, 255, 255, .3); box-shadow: 0 3px 8px rgba(0, 0, 0, .6);
  transition: transform .12s, border-color .2s, color .2s;
}
.die-cover:hover { transform: translateY(-3px); border-color: var(--gold); color: var(--gold); }
.die-cover:active { transform: translateY(0); }
.mode-pick { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; font-size: 12.5px; color: var(--muted); }
.mode-pick button {
  font: inherit; font-weight: 700; cursor: pointer; padding: 6px 12px; border-radius: 999px;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line);
}
.mode-pick button.sel { background: var(--gold); color: #1b1405; border-color: var(--gold); }
.mode-pick button.lift-all { background: #14532d; color: #bbf7d0; border-color: #1f6b45; }

/* Dòng cân phiên Tài Xỉu */
.balance-note {
  margin: 10px 0 8px; padding: 9px 12px; border-radius: var(--r-md); font-size: 12.5px; line-height: 1.5;
  border: 1px solid var(--line); background: var(--panel); color: var(--muted);
}
.balance-note b { color: var(--text); }
.balance-note .mine { color: var(--gold); font-weight: 700; }
.balance-note.warn { border-color: #8a6d1f; background: linear-gradient(180deg, #1f1a0b, var(--panel)); }
.balance-note.done { border-color: #1f6b45; background: linear-gradient(180deg, #0b1f14, var(--panel)); }
.balance-note.done b { color: #7ee2a8; }
.balance-note.even { border-style: dashed; }

.side-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.side-grid.three { grid-template-columns: 1fr 1.3fr 1fr; margin-top: 10px; }
.side-grid.four { grid-template-columns: repeat(4, 1fr); margin-top: 10px; }
.side {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; cursor: pointer;
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 2px solid var(--line); border-radius: var(--r-lg);
  transition: transform .12s, border-color .2s, box-shadow .3s;
}
.side:hover { transform: translateY(-2px); border-color: var(--gold); }
.side.small { padding: 12px 6px; font-weight: 800; font-size: 14px; }
.side.small small { color: var(--muted); font-weight: 500; font-size: 11px; }
.side-name { font-size: 38px; font-weight: 900; letter-spacing: 2px; line-height: 1.05; }
.tai .side-name, .chan .side-name { color: #f87171; }
.xiu .side-name, .le .side-name { color: #e5e7eb; }
.side-sub { color: var(--muted); font-size: 12px; }
.side-pool { font-size: 19px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; margin-top: 6px; }
.side-count { color: var(--muted); font-size: 11.5px; }
.side-mine { min-height: 18px; font-size: 12.5px; font-weight: 700; color: #7dd3fc; }
.side.bao { background: linear-gradient(180deg, #3b1d4a, #24122e); }
.side.win { border-color: #4ade80; box-shadow: 0 0 28px rgba(74,222,128,.45); }
.side.lose { opacity: .55; }

.beads { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.bead { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.bead.tai, .bead.chan { background: #b91c1c; color: #fff; }
.bead.xiu, .bead.le { background: #e5e7eb; color: #111; }
.bead.bao { background: #9333ea; color: #fff; }
.chart-wrap { width: 100%; height: 120px; }
#tx-chart { width: 100%; height: 100%; display: block; }
.xd-stats { display: flex; gap: 14px; color: var(--muted); font-size: 12.5px; }
.xd-stats b { color: var(--text); }
.feed { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.feed li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--line-soft); }
.feed .s-tai, .feed .s-chan { color: #f87171; font-weight: 700; }
.feed .s-xiu, .feed .s-le { color: #e5e7eb; font-weight: 700; }
.two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; margin-top: 14px; }
.sb-history { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.sb-history .row { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; border-radius: 8px; background: var(--panel-2); }
.sb-history .dice { font-size: 19px; letter-spacing: 1px; }

/* ============ Bàn cược (Roulette / Sicbo) ============ */
.swipe-hint { display: none; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.board-wrap { overflow-x: auto; padding-bottom: 6px; }
.rl-board, .sb-board { background: var(--felt-2); padding: 10px; border-radius: var(--r-md); border: 7px solid var(--wood); }
.rl-board {
  display: grid; gap: 3px; min-width: 660px;
  grid-template-columns: 46px repeat(12, minmax(38px, 1fr)) 54px;
  grid-template-rows: repeat(3, 48px) 40px 40px;
}
.rl-board .cell { grid-row: var(--r) / span var(--rs, 1); grid-column: var(--c) / span var(--cs, 1); }
.cell {
  position: relative; display: grid; place-items: center; border-radius: 6px; cursor: pointer; font-weight: 800; font-size: 14px;
  border: 1px solid rgba(255,255,255,.18); user-select: none; -webkit-touch-callout: none; text-align: center;
  transition: filter .15s, box-shadow .2s;
}
.cell:hover { filter: brightness(1.3); }
.cell.red { background: #b91c1c; }
.cell.black { background: #151515; }
.cell.zero { background: #0b8a45; }
.cell.out { background: #0f5132; font-size: 12.5px; }
.cell.hit { box-shadow: 0 0 0 3px var(--gold), 0 0 18px var(--gold); z-index: 3; }
.sb-board { display: flex; flex-direction: column; gap: 4px; min-width: 720px; }
.sb-row { display: grid; gap: 4px; grid-template-columns: var(--cols); }
.sb-label { font-size: 10.5px; color: rgba(255,255,255,.5); margin-top: 4px; letter-spacing: .5px; }
.sb-cell {
  position: relative; background: #0f5132; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5px 2px; min-height: 52px;
  user-select: none; -webkit-touch-callout: none; text-align: center;
}
.sb-cell:hover { filter: brightness(1.3); }
.sb-cell .lb { font-weight: 800; font-size: 14px; }
.sb-cell small { font-size: 9.5px; opacity: .75; }
.sb-cell .dice { font-size: 19px; line-height: 1; letter-spacing: -1px; }
.sb-cell .big-die { font-size: 28px; }
.sb-cell.big { min-height: 78px; }
.sb-cell.big .lb { font-size: 24px; letter-spacing: 2px; }
.sb-cell.tai .lb { color: #fca5a5; }
.sb-cell.bao { background: #3b1d4a; }
.sb-cell.hit { box-shadow: 0 0 0 3px var(--gold), 0 0 16px var(--gold); z-index: 2; }
/* Số chip mình đang đặt trên một ô cược */
.cell .stake, .sb-cell .stake {
  position: absolute; inset: auto 2px 2px auto; min-width: 20px; padding: 1px 5px; border-radius: 10px;
  background: linear-gradient(180deg, #ffe8a3, var(--gold)); color: #1b1405; font-size: 10px; font-weight: 900;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .55); pointer-events: none;
}

/* ============ Roulette ============ */
.wheel-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wheel-wrap { position: relative; width: min(360px, 84vw); aspect-ratio: 1; }
.wheel-clip { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,.7); }
#rl-wheel { width: 100%; height: 100%; display: block; }
.wheel-pointer {
  position: absolute; left: 50%; top: -6px; transform: translateX(-50%); z-index: 2;
  width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 24px solid var(--gold);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.7));
}
.wheel-ball {
  position: absolute; left: 50%; top: 13%; width: 15px; height: 15px; margin-left: -7px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 35%, #fff, #bbb); box-shadow: 0 2px 5px rgba(0,0,0,.7);
}
.rl-history { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; margin: 10px 0; }
.rl-history span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; }
.rl-history .red { background: #c62828; }
.rl-history .black { background: #151515; }
.rl-history .green { background: #0b8a45; }
.stage-result .num {
  display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-size: 21px;
  margin-right: 10px; vertical-align: middle; border: 3px solid var(--gold);
}
.num.red { background: #c62828; } .num.black { background: #151515; } .num.green { background: #0b8a45; }

/* ============ Thanh tab dưới + sheet ============ */
.tabbar { display: none; }
.sheet { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.6); display: flex; align-items: flex-end; justify-content: center; }
.sheet-box {
  width: min(560px, 100%); max-height: 86vh; overflow-y: auto; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  animation: sheetUp .22s ease-out;
}
@keyframes sheetUp { from { transform: translateY(30px); opacity: 0; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sheet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sheet-grid a {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px; text-decoration: none;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--text); font-size: 12px; font-weight: 600;
}
.sheet-grid a span { font-size: 22px; }
.sheet-box h4 { margin: 16px 0 8px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.account-top { display: flex; align-items: center; gap: 12px; }
.account-avatar { font-size: 34px; width: 52px; height: 52px; display: grid; place-items: center; background: var(--panel-2); border-radius: 16px; }
.account-name { font-size: 18px; font-weight: 800; }
.account-role { color: var(--muted); font-size: 12.5px; }
.account-balance { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 800; color: var(--gold); }
.avatars { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.avatars button { width: 38px; height: 38px; font-size: 20px; background: var(--panel-2); border: 2px solid transparent; border-radius: 10px; cursor: pointer; }
.avatars button.sel { border-color: var(--gold); }
.stat-table { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 10px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.stat-table .head { color: var(--muted); }

/* ============ Drawer admin + toast ============ */
.drawer {
  position: fixed; right: 0; top: 0; bottom: 0; width: 460px; z-index: 70;
  background: var(--bg-2); border-left: 1px solid var(--line); display: flex; flex-direction: column; box-shadow: -10px 0 40px rgba(0,0,0,.5);
}
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); font-weight: 700; padding-top: calc(10px + env(safe-area-inset-top)); }
.drawer iframe { flex: 1; border: 0; width: 100%; background: var(--bg-2); }
#toasts { position: fixed; left: 50%; bottom: calc(20px + var(--tabbar) + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; width: max-content; max-width: 92vw; }
.toast { background: #1f2937; border: 1px solid var(--line); padding: 10px 16px; border-radius: 12px; box-shadow: 0 10px 26px rgba(0,0,0,.55); font-weight: 600; animation: toastIn .22s ease-out; }
.toast.error { border-color: #ef4444; }
.toast.win { border-color: #4ade80; background: #14532d; }
.toast.lose { border-color: #ef4444; background: #450a0a; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }

/* ============ Màn hình nhỏ (điện thoại) ============ */
@media (max-width: 900px) {
  :root { --cw: 46px; --tabbar: 62px; }
  main { padding: 12px 12px 20px; }
  .nav { display: none; }
  .brand-name { display: none; }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(5, 1fr);
    background: rgba(10, 16, 13, .95); backdrop-filter: blur(12px); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a, .tabbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 62px;
    background: none; border: 0; color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 600; cursor: pointer;
  }
  .tabbar a span, .tabbar button span { font-size: 20px; }
  .tabbar a.active { color: var(--gold); }
  .table-wrap { padding-inline: 30px; }
  .felt-table { aspect-ratio: 3 / 4; margin: 26px auto 40px; max-width: 520px; }
  .felt.oval { inset: 4% 8%; border-width: 10px; }
  .seat { width: 108px; }
  .seat .avatar { display: none; }
  .seat .name, .seat .stack { font-size: 11px; }
  .seats-6 .seat[data-pos="1"] { left: 9%; top: 78%; }
  .seats-6 .seat[data-pos="2"] { left: 9%; top: 26%; }
  .seats-6 .seat[data-pos="4"] { left: 91%; top: 26%; }
  .seats-6 .seat[data-pos="5"] { left: 91%; top: 78%; }
  .seats-5 .seat[data-pos="1"] { left: 9%; top: 70%; }
  .seats-5 .seat[data-pos="2"] { left: 20%; top: 8%; }
  .seats-5 .seat[data-pos="3"] { left: 80%; top: 8%; }
  .seats-5 .seat[data-pos="4"] { left: 91%; top: 70%; }
  .seat .hole .card { --cw: 34px; }
  .seat.me .hole .card { --cw: 44px; }
  .three-cards .seat .hole .card { --cw: 28px; }
  .three-cards .seat.me .hole .card { --cw: 40px; }
  .two-col { grid-template-columns: 1fr; }
  .side-grid.four { grid-template-columns: 1fr 1fr; }
  .side-name { font-size: 32px; }
  .swipe-hint { display: block; }
  .bj-seats { grid-template-columns: repeat(2, 1fr); }
  .bj-spot { min-height: 160px; }
  .bj-hand .cards { --cw: 38px; }
  .drawer { width: 100%; }
  .sheet-grid { grid-template-columns: repeat(3, 1fr); }
  /* Bàn roulette xoay dọc cho vừa màn hình */
  .rl-board {
    min-width: 0;
    grid-template-columns: repeat(3, 1fr) 44px 44px;
    grid-template-rows: 42px repeat(12, minmax(30px, 1fr)) 44px;
  }
  .rl-board .cell { grid-row: var(--c) / span var(--cs, 1); grid-column: var(--r) / span var(--rs, 1); }
  .sb-row { grid-template-columns: var(--cols-m, var(--cols)); }
  .sb-board { min-width: 560px; }
}
@media (max-width: 420px) {
  :root { --cw: 42px; }
  .chip { width: 44px; height: 44px; font-size: 11px; }
  .side-name { font-size: 28px; }
  .bowl { width: 180px; height: 180px; }
}

/* ============================================================
   MÀN HÌNH NGANG — mỗi bàn gọn trong đúng một khung, không cuộn
   Xoay dọc thì vẫn dùng bố cục cũ ở trên.
   ============================================================ */
@media (orientation: landscape) and (max-height: 620px) {
  :root { --topbar: 40px; }
  html { height: 100%; }
  body { height: 100vh; height: 100dvh; overflow: hidden; padding-bottom: 0; }

  .topbar {
    height: var(--topbar); padding: 0 8px; gap: 6px;
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }
  .topbar .icon-btn, .topbar .avatar-btn { min-height: 32px; height: 32px; }
  .wallet { font-size: 12.5px; padding: 4px 9px; }
  .tabbar { display: none !important; }

  main {
    max-width: none; padding: 5px 8px calc(5px + env(safe-area-inset-bottom));
    /* Xoay ngang trên iPhone thì lề trái/phải mới là chỗ bị Dynamic Island ăn mất */
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
    height: calc(100vh - var(--topbar)); height: calc(100dvh - var(--topbar));
    overflow: hidden;
  }
  .view:not([hidden]) { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 5px; }

  /* Lúc đang chơi thì giấu các khối phụ cho đỡ chật */
  .view .two-col, .view .logbox, .view .hint, .swipe-hint, .lan-card, .rl-history { display: none; }

  .round-bar { margin: 0; gap: 8px; font-size: 12px; flex: 0 0 auto; }
  .table-head { margin: 0; gap: 6px; font-size: 12px; flex: 0 0 auto; }
  .chip-select { margin: 0; gap: 5px; flex: 0 0 auto; }
  .chip { width: 40px; height: 40px; font-size: 10.5px; border-width: 3px; }
  .act-row, .actionbar { flex: 0 0 auto; }
  .actionbar { margin: 0; padding: 0; }
  .btn { padding: 7px 12px; min-height: 34px; font-size: 13px; }
  .big-timer { font-size: 26px; }
  /* Khung ngang hẹp: biển báo phải bó lại, không thì nó kéo ngang chạm ghế hai bên */
  .banner { padding: 5px 10px; font-size: 12.5px; max-width: 62%; }
  .mode-pick { margin: 0; font-size: 11px; gap: 5px; }
  .mode-pick button { padding: 4px 9px; }
  .balance-note { margin: 0; padding: 5px 9px; font-size: 11px; line-height: 1.4; }

  /* ---------------- Tài Xỉu: TÀI | bát | XỈU trên một hàng ---------------- */
  #view-taixiu {
    display: grid; gap: 5px;
    grid-template-columns: minmax(0, 1fr) minmax(130px, 20vw) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  }
  #view-taixiu .round-bar { grid-column: 1 / -1; grid-row: 1; }
  /* Cho hai cửa lớn thành ô lưới của chính màn hình, kẹp lấy khay xúc xắc */
  #view-taixiu .side-grid:not(.three) { display: contents; }
  #view-taixiu .side.tai { grid-column: 1; grid-row: 2; }
  #view-taixiu .side.xiu { grid-column: 3; grid-row: 2; }
  #view-taixiu .dice-stage { grid-column: 2; grid-row: 2; margin: 0; gap: 3px; min-height: 0; justify-content: center; }
  #view-taixiu .side-grid.three { grid-column: 1 / -1; grid-row: 3; margin: 0; gap: 5px; }
  #view-taixiu .balance-note { grid-column: 1 / -1; grid-row: 4; }
  #view-taixiu .chip-select { grid-column: 1 / -1; grid-row: 5; }

  #view-taixiu .side { padding: 6px; gap: 0; }
  #view-taixiu .side-name { font-size: clamp(20px, 7vh, 42px); }
  #view-taixiu .side-sub { font-size: 10.5px; }
  #view-taixiu .side-pool { font-size: clamp(13px, 3.6vh, 21px); margin-top: 2px; }
  #view-taixiu .side-count { font-size: 10px; }
  #view-taixiu .side-mine { min-height: 14px; font-size: 11px; }
  #view-taixiu .side.small { padding: 5px 4px; font-size: 12px; }
  #view-taixiu .side.small small { font-size: 10px; }
  #view-taixiu .side-nho, #view-xocdia .side-nho { font-size: 10px; }
  #view-taixiu .bowl { width: min(19vw, 27vh); height: min(19vw, 27vh); border-width: 5px; }
  #view-taixiu .dice-row { width: auto; gap: 4px; }
  #view-taixiu .die, #view-taixiu .die-cover { width: 30px; height: 30px; border-radius: 7px; font-size: 16px; padding: 4px; }
  #view-taixiu .die i { width: 5px; height: 5px; }
  #view-taixiu .stage-result { min-height: 0; font-size: 13px; }
  #view-taixiu .stage-result b { font-size: 16px; }

  /* ---------------- Sicbo: cả bàn cược nằm trọn trong khung ---------------- */
  #view-sicbo {
    display: grid; gap: 5px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  #view-sicbo .round-bar { grid-column: 1; grid-row: 1; }
  #view-sicbo .dice-stage { grid-column: 2; grid-row: 1; flex-direction: row; align-items: center; gap: 8px; margin: 0; }
  #view-sicbo .bowl { width: 62px; height: 62px; border-width: 4px; }
  #view-sicbo .dice-row { width: auto; gap: 3px; }
  #view-sicbo .die, #view-sicbo .die-cover { width: 22px; height: 22px; border-radius: 5px; font-size: 13px; padding: 3px; }
  #view-sicbo .die i { width: 4px; height: 4px; }
  #view-sicbo .stage-result { min-height: 0; font-size: 12.5px; white-space: nowrap; }
  #view-sicbo .board-wrap { grid-column: 1 / -1; grid-row: 2; overflow: visible; padding: 0; min-height: 0; }
  #view-sicbo .sb-board { min-width: 0; height: 100%; padding: 4px; border-width: 4px; gap: 3px; }
  /* Mỗi hàng tự khai chiều cao của nó qua --cao, khỏi phải đếm thứ tự con */
  #view-sicbo .sb-row { gap: 3px; flex: var(--cao, 1) 1 0; min-height: 0; grid-template-columns: var(--cols); }
  #view-sicbo .sb-chan { flex: 0 0 auto; margin-top: 3px; font-size: 9px; padding: 2px 4px; }
  #view-sicbo .sb-doc, #view-sicbo .sb-ngang { gap: 3px; }
  #view-sicbo .sb-doc > * { flex: 1 1 0; min-height: 0; }
  #view-sicbo .sb-label { display: none; }
  #view-sicbo .sb-cell { min-height: 0; padding: 1px; }
  #view-sicbo .sb-cell .lb { font-size: clamp(9px, 2vh, 15px); }
  #view-sicbo .sb-cell small { font-size: clamp(6.5px, 1.3vh, 10px); }
  /* Xúc xắc trong ô cược giờ là hình thật, phải co theo chiều cao màn hình.
     Để cỡ cố định thì máy nào khung thấp hơn một chút là xúc xắc tràn xuống hàng dưới. */
  #view-sicbo .sb-cell { overflow: hidden; }
  #view-sicbo .sb-cell .dice { gap: 1px; }
  /* Xúc xắc phải đủ to để đọc được mặt — đo trên ảnh mẫu là khoảng 17px */
  #view-sicbo .sb-cell .dice .die {
    width: clamp(11px, 3.5vh, 22px); height: clamp(11px, 3.5vh, 22px); border-radius: 3px; padding: 1.5px;
  }
  #view-sicbo .sb-cell .dice .die i { width: clamp(2px, .63vh, 4px); height: clamp(2px, .63vh, 4px); }
  #view-sicbo .sb-cell.donle .die { width: clamp(13px, 4.2vh, 26px); height: clamp(13px, 4.2vh, 26px); padding: 2px; }
  #view-sicbo .sb-cell.donle .die i { width: clamp(2.4px, .76vh, 4.6px); height: clamp(2.4px, .76vh, 4.6px); }
  #view-sicbo .sb-cell .big-die .die {
    width: clamp(11px, 2.8vh, 26px); height: clamp(11px, 2.8vh, 26px); border-radius: 4px; padding: 2px;
  }
  #view-sicbo .sb-cell .big-die .die i { width: clamp(1.8px, .5vh, 5px); height: clamp(1.8px, .5vh, 5px); }
  #view-sicbo .sb-cell.big { min-height: 0; }
  #view-sicbo .sb-cell.big .lb { font-size: clamp(15px, 4.6vh, 28px); }
  /* Các luật có #view-sicbo đè được luật chung, nên cỡ chữ riêng phải đặt ở đây */
  #view-sicbo .sb-cell.tong .lb { font-size: clamp(12px, 3.2vh, 22px); }
  #view-sicbo .sb-cell.tong small { font-size: clamp(7.5px, 1.7vh, 11px); }
  #view-sicbo .sb-cell.donle .lb { font-size: clamp(11px, 2.6vh, 17px); }
  #view-sicbo .chip-select { grid-column: 1; grid-row: 3; justify-content: flex-start; }
  #view-sicbo .act-row { grid-column: 2; grid-row: 3; }

  /* ---------------- Xóc Đĩa ---------------- */
  #view-xocdia {
    display: grid; gap: 5px;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 18vw) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
  }
  #view-xocdia .round-bar { grid-column: 1 / -1; grid-row: 1; }
  #view-xocdia .side-grid:not(.four) { display: contents; }
  #view-xocdia .side.chan { grid-column: 1; grid-row: 2; }
  #view-xocdia .side.le { grid-column: 3; grid-row: 2; }
  #view-xocdia .dice-stage { grid-column: 2; grid-row: 2; margin: 0; gap: 3px; min-height: 0; justify-content: center; }
  #view-xocdia .side-grid.four { grid-column: 1 / -1; grid-row: 3; margin: 0; gap: 5px; }
  #view-xocdia .chip-select { grid-column: 1 / -1; grid-row: 4; }
  #view-xocdia .side { padding: 6px; }
  #view-xocdia .side-name { font-size: clamp(20px, 7vh, 42px); }
  #view-xocdia .side.small { padding: 5px 4px; font-size: 11.5px; }
  #view-xocdia .bowl { width: min(17vw, 25vh); height: min(17vw, 25vh); }
  #view-xocdia .coins { grid-template-columns: repeat(2, min(6vh, 34px)); gap: 6px; }
  #view-xocdia .xcoin { width: min(6vh, 34px); height: min(6vh, 34px); }
  #view-xocdia .stage-result { min-height: 0; font-size: 13px; }

  /* ---------------- Roulette ---------------- */
  #view-roulette {
    display: grid; gap: 6px;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  #view-roulette .round-bar { grid-column: 1 / -1; grid-row: 1; }
  #view-roulette .wheel-stage { grid-column: 1; grid-row: 2; justify-content: center; gap: 4px; }
  #view-roulette .wheel-wrap { width: min(30vw, 46vh); }
  #view-roulette .stage-result { min-height: 0; font-size: 13px; }
  #view-roulette .stage-result .num { width: 32px; height: 32px; font-size: 15px; border-width: 2px; }
  #view-roulette .board-wrap { grid-column: 2; grid-row: 2; overflow: visible; padding: 0; min-height: 0; }
  #view-roulette .rl-board {
    min-width: 0; height: 100%; padding: 5px; border-width: 4px; gap: 2px;
    grid-template-columns: 34px repeat(12, minmax(0, 1fr)) 40px;
    grid-template-rows: repeat(3, minmax(0, 1fr)) minmax(0, .8fr) minmax(0, .8fr);
  }
  #view-roulette .cell { font-size: clamp(9px, 1.9vh, 14px); }
  #view-roulette .cell.out { font-size: clamp(7.5px, 1.5vh, 12px); }
  #view-roulette .panel { display: none; }
  #view-roulette .chip-select { grid-column: 1 / -1; grid-row: 3; }
  #view-roulette .act-row { grid-column: 1 / -1; grid-row: 3; justify-content: flex-end; }

  /* ---------------- Các bàn bài: mặt bàn cao bằng khung ---------------- */
  .table-wrap { padding-inline: 0; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
  /* Ghế được đặt tuyệt đối ở NGOÀI mép bàn (0% và 100%), nên mặt bàn phải thấp hơn
     khung để còn chỗ cho hàng ghế trên và dưới, không thì ghế bị cắt mất. */
  .felt-table { height: 76%; width: auto; aspect-ratio: 16 / 9; max-width: 92%; margin: 0 auto; }
  /* Ghế đặt theo % của mặt bàn nhưng lại to cố định bằng pixel. Mặt bàn co theo khung,
     ghế thì không, nên màn càng thấp (932x430 của iPhone) khoảng cách giữa các ghế càng
     rút lại trong khi cái ghế giữ nguyên cỡ — thế là chúng trườn lên nhau.
     Cho ghế co theo chiều cao khung mới dứt điểm; dịch tọa độ chỉ chữa được một cỡ màn. */
  .seat { width: clamp(84px, 21vh, 116px); }
  .seat .plate { padding: 3px 6px; gap: 5px; }
  .seat .name { font-size: clamp(9px, 2.4vh, 11.5px); }
  .seat .stack { font-size: clamp(8.5px, 2.3vh, 11px); }
  .seat .avatar {
    font-size: clamp(13px, 3.6vh, 21px);
    width: clamp(19px, 5.2vh, 30px); height: clamp(19px, 5.2vh, 30px);
  }
  .seat .hole { margin-bottom: -8px; }
  .seat .hole .card { --cw: clamp(24px, 7vh, 42px); }
  .seat.me .hole .card { --cw: clamp(28px, 8.4vh, 52px); }
  .three-cards .seat .hole .card { --cw: clamp(21px, 6.2vh, 38px); }
  .three-cards .seat.me .hole .card { --cw: clamp(25px, 7.4vh, 46px); }
  /* Bài chung giữa bàn cũng phải co theo khung. Trước đây chỉ co bài trên tay ghế,
     còn bài chung giữ nguyên 52px nên tràn khỏi mặt bàn và đè lên thẻ ghế hai bên. */
  .board .card { --cw: clamp(26px, 8vh, 46px); }
  .board { min-width: 0; }
  .seat .tag { margin-top: 3px; padding: 1px 7px; font-size: clamp(9px, 2.3vh, 11.5px); }
  .seat .dbtn { width: 18px; height: 18px; font-size: 10px; right: -6px; top: -6px; }
  /* Ghế trên/dưới đẩy ra ngoài mép bàn thêm chút, thôi thò vào giữa — chỗ của hũ tiền */
  .seats-6 .seat[data-pos="3"] { top: -1%; }
  .seats-6 .seat[data-pos="0"] { top: 101%; }
  .seats-5 .seat[data-pos="0"] { top: 101%; }
  .seats-5 .seat[data-pos="2"], .seats-5 .seat[data-pos="3"] { top: 4%; }
  .actionbar .act-main .btn { flex: 1 1 90px; }
  /* Thanh thao tác đang ăn tới 48% chiều cao màn, bóp mặt bàn còn một dải mỏng.
     Dồn hàng ½/¾/Pot/All-in và thanh trượt về CÙNG một hàng để trả lại ~80px cho bàn.
     Nút vẫn giữ chiều cao bấm được, không thu nhỏ. */
  .raise-box { margin-top: 4px; gap: 6px; flex-direction: row; align-items: center; }
  .raise-box .presets { flex: 1 1 auto; gap: 4px; }
  .raise-box .presets button { padding: 7px 4px; font-size: 11.5px; }
  .raise-box .raise-row { flex: 1 1 auto; gap: 6px; }
  .act-buttons { padding: 6px; }
  /* Blackjack dùng lưới ghế riêng: phải cho nhà cái co lại và hàng ghế
     ăn hết chỗ còn thừa, không thì 4 ghế bị mép bàn cắt mất tên và tiền cược. */
  #view-blackjack .bj-table {
    flex: 1 1 auto; min-height: 0; height: auto; margin: 0; padding: 8px 10px 10px;
    display: flex; flex-direction: column; gap: 6px; overflow: hidden;
  }
  #view-blackjack .bj-rules { display: none; }
  #view-blackjack .bj-dealer { flex: 0 0 auto; }
  #view-blackjack .bj-label { font-size: 11.5px; margin-bottom: 2px; }
  #view-blackjack .bj-dealer .cards { min-height: 0; }
  #view-blackjack .bj-seats { flex: 1 1 auto; min-height: 0; gap: 6px; align-items: stretch; }
  #view-blackjack .bj-spot { min-height: 0; padding: 4px; justify-content: space-between; }
  #view-blackjack .bj-spot .plate { padding: 2px 5px; }
  #view-blackjack .bj-spot .name { font-size: 11px; }
  #view-blackjack .bj-spot .stack { font-size: 10.5px; }
  #view-blackjack .bj-hand { overflow: hidden; }
  /* Cho bài co theo chiều cao khung để nhãn Thắng/Thua/Quắc và chip cược nằm lọt
     trong khung. Không dùng overflow:hidden ở đây — làm thế là cắt mất số tiền. */
  #view-blackjack .bj-hand .cards { --cw: clamp(24px, 7vh, 34px); gap: 3px; }
  #view-blackjack .bj-dealer .cards .card { --cw: clamp(26px, 7.6vh, 40px); }
  #view-blackjack .bj-seats { gap: 4px; }
  #view-blackjack .bj-spot { gap: 3px; }
  #view-blackjack .bj-hand .meta { font-size: 10.5px; gap: 4px; flex-wrap: nowrap; }
  /* Nhãn Thắng/Thua/Quắc phải nằm gọn trong ghế, không thò ra mép */
  #view-blackjack .bj-hand .badge { font-size: 10px; padding: 1px 6px; white-space: nowrap; }
  #view-blackjack .banner { font-size: 12px; padding: 4px 10px; }
  #view-blackjack .table-head { font-size: 11.5px; }

  /* ---- Bàn đã có khung co giãn thì TRẢ VỀ CỠ CHUẨN ----
     Khung đã lo việc thu nhỏ cho vừa màn. Nếu để ghế và bài tiếp tục co theo vh như các
     luật ở trên thì chúng CO HAI LẦN: khung thu nhỏ rồi ghế lại tự teo thêm, chữ bé tí.
     Bên trong khung chuẩn 960x540 mọi thứ phải là kích thước cố định. */
  /* Khổ nằm ngang: khung ăn theo flex của cột, bỏ tỉ lệ cố định dùng cho khổ thường */
  .table-wrap.stage { aspect-ratio: auto; max-height: none; }
  .stage .seat { width: 146px; }
  .stage .seat .plate { padding: 6px 9px; gap: 8px; }
  .stage .seat .name { font-size: 12.5px; }
  .stage .seat .stack { font-size: 12.5px; }
  .stage .seat .avatar { font-size: 21px; width: 30px; height: 30px; }
  .stage .seat .hole { margin-bottom: -12px; }
  .stage .seat .hole .card { --cw: 42px; }
  .stage .seat.me .hole .card { --cw: 52px; }
  .stage .three-cards .seat .hole .card { --cw: 38px; }
  .stage .three-cards .seat.me .hole .card { --cw: 46px; }
  .stage .seat .tag { margin-top: 5px; padding: 2px 10px; font-size: 11.5px; }
  .stage .seat .dbtn { width: 22px; height: 22px; font-size: 11px; right: -8px; top: -8px; }
  .stage .board .card { --cw: 52px; }
  .stage .banner { font-size: 14px; padding: 8px 14px; max-width: 86%; }
  /* Ghế về đúng vị trí gốc: khung chuẩn đủ cao nên không cần đẩy ra ngoài mép nữa */
  .stage .seats-6 .seat[data-pos="3"] { top: 3%; }
  .stage .seats-6 .seat[data-pos="0"] { top: 96%; }
  /* 3 Cây: ghế mình có 3 lá cỡ lớn + dòng nhãn nên cao hơn, để 99% là lòi đuôi khỏi khung */
  .stage .seats-5 .seat[data-pos="0"] { top: 92%; }
  .stage .seats-5 .seat[data-pos="2"], .stage .seats-5 .seat[data-pos="3"] { top: 6%; }
}

/* ============================================================
   LỚP "CASINO VÀNG" — chất liệu, chữ dập nổi, chip, xúc xắc.
   Chỉ đổi vẻ ngoài, không đụng tới bố cục ở trên.
   ============================================================ */
:root {
  --brass-1: #fbeec2;   /* ánh sáng trên mép */
  --brass-2: #e0bc72;
  --brass-3: #b8893a;
  --brass-4: #6d4a16;   /* viền tối */
  --maroon-1: #7a1226;
  --maroon-2: #450914;
  --cloth-1: #6d1327;   /* nhung đỏ mận của bàn Sicbo */
  --cloth-2: #350710;
}

/* ---- Tấm đồng: dùng cho cửa lớn Tài/Xỉu, Chẵn/Lẻ ---- */
.side {
  background: linear-gradient(180deg, var(--brass-1) 0%, var(--brass-2) 26%, var(--brass-3) 64%, var(--brass-2) 100%);
  border: 2px solid var(--brass-4);
  border-radius: 18px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .65), inset 0 -4px 8px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .55);
}
/* Dồn chữ vào giữa tấm để không còn khoảng trống hẫng bên dưới con số */
.side { justify-content: center; }
.side:hover { transform: translateY(-2px); border-color: #8a6424; filter: brightness(1.04); }
.side-name {
  color: #fffaf0;
  text-shadow: 0 1px 0 #8a6a2a, 0 2px 0 #6b4715, 0 3px 1px rgba(0, 0, 0, .45), 0 4px 10px rgba(0, 0, 0, .55);
  letter-spacing: 3px;
}
.tai .side-name, .chan .side-name { color: #fff2f0; }
.xiu .side-name, .le .side-name { color: #fbfbff; }
.side-sub { color: #4a3208; font-weight: 600; text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }
.side-pool {
  background: linear-gradient(180deg, var(--maroon-1), var(--maroon-2));
  border: 1.5px solid rgba(255, 215, 130, .6);
  border-radius: 999px; padding: 2px 16px; color: #fff;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .65), 0 1px 0 rgba(255, 255, 255, .25);
}
.side-count { color: #513706; font-weight: 600; }
.side-mine {
  color: #2a1b04; font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
/* Cửa nhỏ: chữ nằm trực tiếp trong nút nên phải đặt màu chữ tối cho nền đồng */
.side.small {
  background: linear-gradient(180deg, #f6e8c0 0%, #d7b06a 30%, #a87c33 70%, #ceaa63 100%);
  color: #2a1b04; text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}
.side.small small { color: #4a3208; font-weight: 600; }
/* Cửa nhỏ cũng hiện tiền và số người đặt, ghi gọn; hẹp quá thì tự xuống dòng */
.side-nho { font-size: 11px; font-weight: 800; line-height: 1.25; color: #2a1b04; font-variant-numeric: tabular-nums; }
.side.bao .side-nho { color: #fdf4ff; }
/* Cửa Bão: thân màu tím đậm nên chữ để màu kem cho dễ đọc */
.side.bao {
  background: linear-gradient(180deg, #c98ade 0%, #8e3fae 18%, #5d1f78 62%, #7e35a0 100%);
  border-color: #3d0f50;
}
.side.bao, .side.bao small, .side.bao .side-mine {
  color: #fdf4ff; text-shadow: 0 1px 0 rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .55);
}
.side.win { border-color: #ffe08a; box-shadow: 0 0 0 3px rgba(255, 224, 138, .55), 0 0 30px rgba(255, 210, 90, .5); }
/* Cửa thua chỉ tối đi chứ đừng xám xịt, nhìn cho sạch */
.side.lose { filter: brightness(.5) saturate(.85); opacity: 1; }

/* ---- Khay xúc xắc: vòng vàng nhiều lớp ---- */
.bowl {
  background: radial-gradient(circle at 38% 30%, #3a2a16, #150d05 72%);
  /* Giữ nguyên viền 8px như cũ để không xô lệch bố cục nằm ngang, chỉ đổi sang màu đồng */
  border: 8px solid var(--brass-3);
  box-shadow:
    inset 0 0 0 2px var(--brass-4), inset 0 0 42px rgba(0, 0, 0, .85), inset 0 4px 14px rgba(255, 220, 150, .18),
    0 0 0 1px var(--brass-4), 0 12px 30px rgba(0, 0, 0, .65);
}
.bowl.plate { background: radial-gradient(circle, #fbfbfb 0 54%, #cfcfcf 55% 60%, #2a1c10 61%); }
/* Nắp bát: vành ngoài tối, gờ sáng bên trong và vệt sáng chếch cho ra khối tròn */
.bowl.covered::after, .bowl-lid {
  background:
    radial-gradient(circle at 33% 25%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 44%),
    radial-gradient(circle at 50% 52%, var(--brass-1) 0 18%, var(--brass-2) 44%, var(--brass-3) 68%, #7a5520 85%, var(--brass-4) 100%);
  border: 3px solid var(--brass-4);
  box-shadow:
    inset 0 0 0 4px rgba(255, 235, 190, .38), inset 0 -12px 24px rgba(0, 0, 0, .5),
    0 10px 28px rgba(0, 0, 0, .65);
}
/* Nắp thật, kéo được — thay cho nắp giả vẽ bằng ::after (pseudo-element không kéo được) */
.bowl-lid {
  position: absolute; inset: -8px; border-radius: 50%; z-index: 2; touch-action: none;
  transition: transform .2s ease;
}
.bowl.has-lid.covered::after { content: none; }
.bowl-lid.can-drag { cursor: grab; }
.bowl-lid.dragging { transition: none; cursor: grabbing; }
.bowl-lid.can-drag::before {
  content: 'kéo nắp ra'; position: absolute; left: 0; right: 0; bottom: 13%;
  text-align: center; font-size: clamp(8px, 1.5vh, 12px); font-weight: 800;
  color: #4a3208; text-shadow: 0 1px 0 rgba(255, 246, 214, .6);
}
/* Đồng hồ chỉ để xem — không được chắn chuột, không thì bấm vào giữa nắp là trúng nó */
.bowl .big-timer { z-index: 4; pointer-events: none; }
/* Con chưa lộ: vẫn là khối xúc xắc trắng nhưng chưa có chấm */
.die.blank {
  background: linear-gradient(150deg, #f4f1e8, #d6d1c2);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), 0 3px 8px rgba(0, 0, 0, .45);
}

/* Số đếm ngược khắc chìm trên nền đồng thì dễ đọc hơn chữ sáng */
.bowl.covered .big-timer {
  color: #3d2a08;
  text-shadow: 0 1px 0 rgba(255, 246, 214, .65), 0 2px 6px rgba(0, 0, 0, .25);
}
.big-timer {
  color: #fff6df;
  text-shadow: 0 2px 0 #7a5418, 0 3px 10px rgba(0, 0, 0, .8);
}

/* ---- Xúc xắc thật: trắng ngà, mặt 1 và 4 chấm đỏ ---- */
.die {
  background: linear-gradient(150deg, #fff 0%, #f4f1e8 45%, #d9d4c6 100%);
  border-radius: 14px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .95), inset 0 -3px 6px rgba(0, 0, 0, .18), 0 5px 12px rgba(0, 0, 0, .55);
}
.die i { background: #1a1a1a; box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .35); }
.die.f1 i.on, .die.f4 i.on { background: #d4222c; }
.die-cover {
  background: linear-gradient(160deg, #4a3618, #241703 70%);
  border: 2px solid var(--brass-3);
  color: rgba(255, 220, 150, .75);
  box-shadow: inset 0 2px 0 rgba(255, 220, 150, .25), 0 5px 12px rgba(0, 0, 0, .6);
}
.die-cover:hover { border-color: var(--brass-1); color: #ffeec0; }

/* ---- Chip tròn như chip thật: răng trắng quanh mép ---- */
.chip {
  position: relative; isolation: isolate; border: none;
  /* Vành chip tối hơn tâm: phủ một lớp đen mờ hình vành khuyên lên màu gốc */
  background: radial-gradient(circle at 50% 50%, transparent 0 55%, rgba(0, 0, 0, .42) 55% 100%), var(--c);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .6), inset 0 0 0 2px rgba(255, 255, 255, .22);
}
.chip::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: 0;
  background: repeating-conic-gradient(from 7deg, #fff 0 11deg, transparent 11deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 0 57%, #000 58%);
  mask: radial-gradient(circle, transparent 0 57%, #000 58%);
  opacity: .9;
}
.chip::after {
  content: ''; position: absolute; inset: 23%; border-radius: 50%; z-index: 0;
  border: 1.5px solid rgba(255, 255, 255, .5);
  background: radial-gradient(circle at 36% 30%, rgba(255, 255, 255, .3), transparent 62%);
}
.chip > span { position: relative; z-index: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, .75); }
.chip.sel { transform: translateY(-4px) scale(1.06); box-shadow: 0 0 0 3px var(--gold), 0 9px 20px rgba(0, 0, 0, .65); }

/* ---- Bàn cược Sicbo: nhung đỏ mận, khung vàng ---- */
.sb-board {
  background: radial-gradient(ellipse at center, var(--cloth-1), var(--cloth-2) 78%);
  border: 7px solid var(--brass-3);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .6), 0 0 0 2px var(--brass-4), 0 14px 34px rgba(0, 0, 0, .6);
}
.sb-cell {
  background: linear-gradient(180deg, #8d2138 0%, #6a1527 55%, #4d0d1c 100%);
  border: 1px solid rgba(255, 214, 130, .38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
  overflow: hidden; /* chặn cứng: nội dung có to quá cũng không tràn đè sang ô khác */
}
.sb-cell:hover { filter: brightness(1.25); border-color: rgba(255, 224, 150, .85); }
.sb-cell .lb { color: #ffe7ac; text-shadow: 0 1px 0 rgba(0, 0, 0, .6); }
.sb-cell small { color: rgba(255, 226, 170, .72); }
.sb-cell.big {
  background: linear-gradient(180deg, var(--brass-1) 0%, var(--brass-2) 28%, var(--brass-3) 68%, var(--brass-2) 100%);
  border-color: var(--brass-4);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -3px 7px rgba(0, 0, 0, .32);
}
.sb-cell.big .lb { color: #fffaf0; text-shadow: 0 1px 0 #8a6a2a, 0 2px 0 #6b4715, 0 3px 8px rgba(0, 0, 0, .5); }
.sb-cell.big small { color: #3a2708; font-weight: 700; opacity: 1; }
.sb-cell.bao {
  background: linear-gradient(180deg, #c98ade 0%, #8e3fae 18%, #5d1f78 62%, #7e35a0 100%);
  border-color: #3d0f50;
}
.sb-cell.bao .lb, .sb-cell.bao small {
  color: #fdf4ff; text-shadow: 0 1px 0 rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .55);
}
.sb-cell.hit { box-shadow: 0 0 0 3px var(--gold), 0 0 22px rgba(255, 210, 90, .75); }
.sb-label { color: rgba(255, 226, 170, .82); font-weight: 600; }

/* ---- Bàn Sicbo dựng lại theo mẫu SunWin ---- */
.sb-doc { display: flex; flex-direction: column; gap: 4px; min-height: 0; }
/* Trên máy tính phải để nội dung tự quyết chiều cao. Nếu cho co về 0 thì 3 ô xếp dọc
   bị bóp lại, hàng không cao lên, xúc xắc tràn ra đè sang hàng dưới.
   Chỉ khổ nằm ngang (điện thoại) mới ép co cho vừa khung — xem khối @media ở cuối file. */
.sb-doc > * { flex: 1 1 auto; }
.sb-ngang { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4px; min-height: 0; }
.sb-hoavan { display: grid; place-items: center; color: var(--brass-2); font-size: 17px; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.sb-nhan { display: grid; place-items: center; color: rgba(255, 226, 170, .85); font-size: 11px; font-weight: 800; }
.dice.doc { flex-direction: column; }
/* Hai cửa lớn Xỉu / Tài: nhung tím như ảnh */
.sb-cell.cua.xiu, .sb-cell.cua.tai {
  background: linear-gradient(180deg, #7247b4 0%, #47217e 45%, #2b1052 100%); border-color: #1b0a36;
}
.sb-cell.cua.xiu .lb { color: #8fdcff; text-shadow: 0 2px 0 rgba(0, 0, 0, .55); }
.sb-cell.cua.tai .lb { color: #ff9f9f; text-shadow: 0 2px 0 rgba(0, 0, 0, .55); }
/* Lẻ / Chẵn: hồng mận */
.sb-cell.cua.le, .sb-cell.cua.chan {
  background: linear-gradient(180deg, #b2418f 0%, #7e2263 45%, #551040 100%); border-color: #3a0a2b;
}
.sb-cell.cua.le .lb, .sb-cell.cua.chan .lb { color: #ffe7ac; }
.sb-cell.cua small, .sb-cell.bao small { color: rgba(255, 255, 255, .8); }
/* Bão bất kỳ: đỏ thẫm như ảnh, không còn tím */
.sb-cell.bao { background: linear-gradient(180deg, #a32036 0%, #7a1226 45%, #4d0a18 100%); border-color: #35060f; }
.sb-cell.bao .lb, .sb-cell.bao small { color: #ffe7ac; text-shadow: 0 1px 0 rgba(0, 0, 0, .55); }
/* Hàng tổng điểm: số vàng to, tỉ lệ nhỏ bên dưới */
.sb-cell.tong .lb { font-size: clamp(14px, 2.6vh, 22px); color: #ffdf7a; text-shadow: 0 2px 0 rgba(0, 0, 0, .55); }
.sb-cell.tong small { color: #fff; opacity: .92; }
/* Hàng MỘT..SÁU: chữ bên trái, xúc xắc bên phải */
.sb-cell.donle { flex-direction: row; gap: 8px; }
.sb-cell.donle .lb { font-size: clamp(10px, 1.9vh, 16px); letter-spacing: 1px; color: #ffe7ac; }
.sb-chan {
  margin-top: 4px; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .4px; color: #ffe7ac;
  padding: 3px 6px; border-radius: 8px; border: 1px solid rgba(255, 214, 130, .45);
  background: linear-gradient(180deg, rgba(122, 18, 38, .9), rgba(69, 9, 20, .9));
}

/* Xúc xắc thu nhỏ in trong ô cược Sicbo và trong lịch sử (thay ký tự ⚀ cũ) */
.sb-cell .dice, .sb-history .dice { display: inline-flex; gap: 2px; justify-content: center; }
.sb-cell .dice .die, .sb-history .dice .die {
  width: 19px; height: 19px; border-radius: 4px; padding: 2px; animation: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(0, 0, 0, .5);
}
.sb-cell .dice .die i, .sb-history .dice .die i { width: 3.5px; height: 3.5px; }
.sb-cell .big-die .die { width: 26px; height: 26px; border-radius: 6px; padding: 3px; }
.sb-cell .big-die .die i { width: 5px; height: 5px; }

/* ---- Bàn Roulette: thêm khung vàng cho đồng bộ ---- */
.rl-board {
  background: radial-gradient(ellipse at center, #10744a, #04301c 80%);
  border: 7px solid var(--brass-3);
  box-shadow: inset 0 0 50px rgba(0, 0, 0, .55), 0 0 0 2px var(--brass-4), 0 14px 34px rgba(0, 0, 0, .6);
}
.rl-board .cell { border: 1px solid rgba(255, 214, 130, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.rl-board .cell.out { background: linear-gradient(180deg, #146b45, #0a4229); }
.cell.hit { box-shadow: 0 0 0 3px var(--gold), 0 0 22px rgba(255, 210, 90, .8); }

/* ---- Bàn bài: viền đồng + hũ tiền màu mận cho đồng bộ với Tài Xỉu / Sicbo ---- */
.felt {
  border-color: #7a5426;
  box-shadow:
    inset 0 0 70px rgba(0, 0, 0, .55), inset 0 0 0 3px rgba(255, 225, 170, .18),
    0 18px 50px rgba(0, 0, 0, .6), 0 0 0 3px var(--brass-3);
}
.pot {
  background: linear-gradient(180deg, var(--maroon-1), var(--maroon-2));
  border: 1px solid rgba(255, 215, 130, .55);
  color: #ffe7ac;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 8px rgba(0, 0, 0, .5);
}
.banner { border-color: var(--brass-3); box-shadow: 0 6px 20px rgba(0, 0, 0, .55); }

/* ---- Thanh phiên + viên thuốc ---- */
.round-bar b {
  display: inline-block; padding: 1px 12px; border-radius: 999px; color: #ffeec0;
  background: linear-gradient(180deg, #3a2a12, #1c1206);
  border: 1px solid var(--brass-3);
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, .25);
}
.round-bar .phase { color: #ffd86a; font-weight: 800; text-shadow: 0 1px 6px rgba(255, 190, 60, .45); }

/* ---- Nút bấm kiểu viên thuốc ---- */
.btn { border-radius: 999px; }
.btn.gold {
  background: linear-gradient(180deg, #fff0bd 0%, #f2c14e 42%, #c8921a 100%);
  color: #2a1b04; border: 1px solid #8a6420;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  box-shadow: 0 6px 18px rgba(242, 193, 78, .35), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.btn.danger {
  background: linear-gradient(180deg, #ff9c8e 0%, #e0453a 42%, #8f1d15 100%);
  color: #fff; border: 1px solid #6d1109;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  box-shadow: 0 6px 18px rgba(224, 69, 58, .3), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.btn.ghost { border-radius: 999px; }
.mode-pick button { border-radius: 999px; border-color: var(--brass-4); }
.mode-pick button.sel {
  background: linear-gradient(180deg, #fff0bd, #f2c14e 45%, #c8921a);
  color: #2a1b04; text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}

/* ---- Dải cầu ---- */
.bead { box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .35), 0 2px 4px rgba(0, 0, 0, .5); }
.bead.tai, .bead.chan { background: linear-gradient(180deg, #e2504a, #9d1b16); }
.bead.xiu, .bead.le { background: linear-gradient(180deg, #fdfdfd, #c9c9c9); color: #1a1a1a; }
.bead.bao { background: linear-gradient(180deg, #b070c9, #6d2e87); }

/* ---- Dòng cân phiên ---- */
.balance-note { border-color: var(--brass-4); }
.balance-note.warn { border-color: var(--brass-3); background: linear-gradient(180deg, #2e2208, var(--panel)); }

/* ============ Đầu bàn: nút Vào bàn / Mang thêm chip, chọn cách lật bài ============ */
.table-head .vao-ban { min-height: 32px; padding: 5px 14px; font-size: 13px; margin-left: auto; }
.lat-bai-chon {
  display: inline-flex; flex: 0 0 auto; border: 1px solid var(--brass-3); border-radius: 999px; overflow: hidden;
  background: rgba(0, 0, 0, .25);
}
.table-head .lat-bai-chon { margin-left: auto; }
.table-head .vao-ban:not([hidden]) + .lat-bai-chon { margin-left: 0; }
.lat-bai-chon button {
  background: transparent; border: 0; padding: 5px 11px; font-size: 12px; font-weight: 700;
  color: var(--muted); cursor: pointer; white-space: nowrap;
}
.lat-bai-chon button.chon { background: linear-gradient(180deg, #f7d272, var(--gold-2)); color: #1a1204; }

/* ============ Hộp mang chip vào bàn ============ */
.hop-chip {
  position: fixed; inset: 0; z-index: 85; display: grid; place-items: center;
  padding: 12px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left));
  background: rgba(0, 0, 0, .72);
}
.hop-chip-khung {
  width: min(420px, 100%); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto;
  padding: 14px 16px; border-radius: 18px;
  background: linear-gradient(180deg, #1d2a24, #0f1714);
  border: 1px solid var(--brass-3); box-shadow: 0 20px 50px rgba(0, 0, 0, .7);
  animation: sheetUp .2s ease-out;
}
.hc-dau { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hc-dau h3 { margin: 0; font-size: 16px; }
.hc-dau .icon-btn { width: 32px; height: 32px; font-size: 14px; }
.hc-muc { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }
.hc-muc b { color: var(--text); }
.hc-so {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 2px;
  font-size: 30px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums;
}
.hc-so .chip-ico { width: 20px; height: 20px; }
.hc-keo { display: block; width: 100%; margin: 6px 0 10px; accent-color: var(--gold); }
.hc-nhanh { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.hc-nhanh button {
  padding: 6px 2px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line);
  cursor: pointer; font-weight: 700; font-size: 12.5px; line-height: 1.25;
}
.hc-nhanh button small { display: block; font-weight: 600; color: var(--muted); font-size: 11px; }
.hc-nhanh button.chon { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold); }
.hc-nhanh button:disabled { opacity: .4; cursor: not-allowed; }
.hc-vi { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.hc-vi b { color: var(--text); }
.hc-loi { margin: 6px 0 0; color: #fca5a5; font-size: 12.5px; text-align: center; }
.hc-nut { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-top: 12px; }

/* ============ Màn nặn bài ============ */
.nb-man {
  position: fixed; inset: 0; z-index: 80; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: radial-gradient(ellipse at center, rgba(18, 96, 62, .94), rgba(3, 20, 12, .97));
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.nb-dau { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; justify-content: center; text-align: center; }
.nb-dau b { font-size: 17px; color: var(--gold); }
.nb-goi-y { color: #cfe3d8; font-size: 12.5px; }
.nb-gio {
  align-self: center; padding: 2px 10px; border-radius: 999px; font-weight: 800; font-size: 13px;
  color: #1a1204; background: linear-gradient(180deg, #f7d272, var(--gold-2)); font-variant-numeric: tabular-nums;
}
.nb-gio.gap { color: #fff; background: #b91c1c; }
.nb-hang { display: flex; gap: 22px; justify-content: center; align-items: center; }
.nb-la {
  position: relative; flex: 0 0 auto; width: var(--nb-w, 160px); height: calc(var(--nb-w, 160px) * 1.42);
  cursor: grab; touch-action: none;
}
.nb-la.dang-keo { z-index: 2; cursor: grabbing; }
.nb-mat, .nb-lung { position: absolute; inset: 0; border-radius: calc(var(--nb-w, 160px) * .07); }
.nb-mat {
  background: linear-gradient(160deg, #fff, #eceee9); color: #14181a; overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .1);
}
.nb-mat.red { color: #c81f1f; }
.nb-goc { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1; font-weight: 800; }
.nb-goc b { font-size: calc(var(--nb-w, 160px) * .23); letter-spacing: -1px; }
.nb-goc i { font-style: normal; font-size: calc(var(--nb-w, 160px) * .17); margin-top: 2px; }
.nb-goc.tren { top: 6%; left: 7%; }
.nb-goc.duoi { bottom: 6%; right: 7%; transform: rotate(180deg); }
.nb-giua { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--nb-w, 160px) * .62); }
.nb-cho { position: absolute; inset: 0; display: grid; place-items: center; color: #9aa39f; font-size: calc(var(--nb-w, 160px) * .2); }
/* Lá úp nằm đè lên lá bài: kéo trượt ra hướng nào cũng được để lộ lá bên dưới */
.nb-lung {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .09) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, #b3262c, #6d1015);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .35), inset 0 0 0 calc(var(--nb-w, 160px) * .045) #fff;
  will-change: transform;
}
.nb-la.dang-keo .nb-lung { box-shadow: 0 18px 38px rgba(0, 0, 0, .6), inset 0 0 0 calc(var(--nb-w, 160px) * .045) #fff; }
.nb-la.mo { cursor: default; }
.nb-la.mo .nb-lung { display: none; }
.nb-la.lat-nhanh .nb-mat { animation: nbLat .32s ease-out; }
.nb-la.vua-mo .nb-mat { animation: nbSang .6s ease-out; }
@keyframes nbLat { from { transform: perspective(600px) rotateY(90deg); } }
@keyframes nbSang { from { box-shadow: 0 0 0 4px var(--gold), 0 0 36px rgba(242, 193, 78, .9); } }
.nb-chan { display: flex; gap: 10px; }
.nb-chan .btn { min-height: 40px; padding: 8px 24px; }

@media (orientation: landscape) and (max-height: 620px) {
  .table-head .vao-ban { min-height: 26px; padding: 3px 12px; font-size: 12px; }
  .lat-bai-chon button { padding: 3px 9px; font-size: 11px; }
  .hop-chip { padding-top: 8px; padding-bottom: 8px; }
  .hop-chip-khung { padding: 10px 14px; max-height: calc(100dvh - 16px); }
  .hc-so { font-size: 24px; margin: 4px 0 0; }
  .hc-keo { margin: 4px 0 6px; }
  .hc-vi { margin-top: 5px; }
  .hc-nut { margin-top: 8px; }
  .hc-nut .btn { min-height: 36px; padding: 6px 10px; }
  .nb-man { gap: 8px; }
  .nb-chan .btn { min-height: 34px; padding: 6px 20px; }
}

/* ============ Sảnh ở khổ ngang thấp (điện thoại xoay ngang, cửa sổ thấp) ============ */
/* Màn này không cuộn dọc được, nên xếp các game thành một dải kéo ngang */
.lobby-thanh {
  position: relative; height: 10px; margin: 6px 4px 0; border-radius: 999px;
  background: rgba(255, 255, 255, .08); cursor: pointer; touch-action: none;
}
.lobby-nut {
  position: absolute; top: 0; bottom: 0; left: 0; min-width: 36px; border-radius: 999px;
  background: linear-gradient(180deg, #f7d272, var(--gold-2)); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
}
@media (orientation: landscape) and (max-height: 620px) {
  #view-lobby .hero { margin: 0; flex: 0 0 auto; }
  #view-lobby .hero h1 { font-size: 16px; margin: 0; }
  #view-lobby .hero p { display: none; }
  #view-lobby .lobby-grid {
    flex: 1 1 auto; min-height: 0; display: flex; gap: 10px;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  #view-lobby .lobby-grid::-webkit-scrollbar { display: none; }
  #view-lobby .game-card {
    flex: 0 0 clamp(190px, 26vw, 250px); scroll-snap-align: start;
    display: flex; flex-direction: column; overflow: hidden; padding: 12px 14px;
  }
  #view-lobby .game-card:hover { transform: none; }
  #view-lobby .gc-icon { font-size: 28px; }
  #view-lobby .game-card h2 { font-size: 16px; margin: 6px 0 3px; }
  #view-lobby .game-card p { font-size: 12px; }
  #view-lobby .gc-stats { margin-top: auto; padding-top: 8px; }
  #view-lobby .lobby-thanh { flex: 0 0 auto; }
  #view-lobby .lobby-foot { margin: 4px 0 0; flex: 0 0 auto; }
  #view-lobby .lobby-foot .btn { min-height: 30px; padding: 4px 12px; font-size: 12px; }
}

/* ============ Đồng hồ lượt trên thẻ tên ghế (bot hay người như nhau) ============ */
.plate.co-gio { position: relative; }
.plate.co-gio::after {
  content: ''; position: absolute; left: 8px; right: 8px; bottom: 3px; height: 3px; border-radius: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--gold) 0 calc(var(--gio, 1) * 100%), rgba(255, 255, 255, .14) calc(var(--gio, 1) * 100%) 100%);
}
.plate.co-gio.gio-gap::after {
  background: linear-gradient(90deg, #ef4444 0 calc(var(--gio, 1) * 100%), rgba(255, 255, 255, .14) calc(var(--gio, 1) * 100%) 100%);
}
.plate.co-gio::before {
  content: attr(data-gio); position: absolute; left: -9px; top: -10px; z-index: 3; pointer-events: none;
  min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--gold); color: #1a1204; box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.plate.co-gio.gio-gap::before { background: #dc2626; color: #fff; }
.table-head .vao-ban.nhay { animation: nutNhay 1.1s ease-in-out infinite; }
@keyframes nutNhay { 50% { box-shadow: 0 0 0 4px rgba(242, 193, 78, .45), 0 0 18px rgba(242, 193, 78, .6); } }

/* ============ Tiến Lên Miền Nam ============ */
.gc-tl { background: linear-gradient(160deg, #1d4a3f, var(--panel)); }
.felt.tl-felt { background: radial-gradient(ellipse at center, #208a5e 0%, #136042 45%, #093421 100%); }
.seats-4 .seat[data-pos="0"] { left: 50%; top: 97%; }
.seats-4 .seat[data-pos="1"] { left: 7%; top: 44%; }
.seats-4 .seat[data-pos="2"] { left: 50%; top: 9%; }
.seats-4 .seat[data-pos="3"] { left: 93%; top: 44%; }
.seats-4 .seat.me .hole { display: none; }
.seats-4 .seat.out { opacity: .6; }
.seats-4 .seat .tag.pos { background: #14532d; border-color: #4ade80; }
.seats-4 .seat .tag.neg { background: #450a0a; border-color: #ef4444; }
.card.back.tl-up { --cw: 40px; display: grid; place-items: center; }
.card.back.tl-up b {
  min-width: 26px; padding: 1px 6px; border-radius: 999px; background: rgba(0, 0, 0, .7); color: #ffe7ac;
  font-size: 14px; font-weight: 800; text-align: center; box-shadow: 0 0 0 1px rgba(255, 231, 172, .4);
}
/* Bài còn lại lúc hết ván. Phải thắng luật ".seat .hole .card" (42px): thua thì 13 lá dài ~390px và ghế
   trái/phải bị khung bàn cắt mất. Ghế trên xếp một hàng; ghế hai bên xếp lưới tối đa 7 lá/hàng (--cot)
   để gọn trong bề ngang ghế — mỗi ô lưới hẹp hơn lá nên các lá tự chồng lên nhau, vẫn thấy góc số. */
.tl-lat { display: flex; }
.seats-4 .seat .hole .tl-lat .card { --cw: 26px; margin: 0; border-radius: 5px; }
.seats-4 .seat .hole .tl-lat .card + .card { margin-left: -14px; }
.seats-4 .seat .hole .tl-lat .card .cc { display: none; }
.seats-4 .seat[data-pos="1"] .hole .tl-lat,
.seats-4 .seat[data-pos="3"] .hole .tl-lat {
  display: grid; grid-template-columns: repeat(var(--cot, 7), 14px); grid-auto-rows: 19px;
  padding: 0 12px 18px 0; /* phần lá thừa ra khỏi ô cuối (26-14, 37-19) */
}
.seats-4 .seat[data-pos="1"] .hole .tl-lat .card + .card,
.seats-4 .seat[data-pos="3"] .hole .tl-lat .card + .card { margin-left: 0; }
.tl-giua {
  position: absolute; left: 50%; top: 37%; transform: translate(-50%, -50%); z-index: 3; width: 56%;
  display: flex; flex-direction: column; align-items: center; gap: 5px; pointer-events: none;
}
.tl-ban { display: flex; flex-direction: column; align-items: center; gap: 5px; min-height: 30px; }
.tl-ban .cards { --cw: 46px; gap: 0; min-height: 0; }
.tl-ban .cards .card + .card { margin-left: -12px; }
.tl-ban .ten {
  font-size: 12.5px; font-weight: 800; color: #ffe7ac; background: rgba(0, 0, 0, .5);
  padding: 2px 12px; border-radius: 999px; white-space: nowrap;
}
.tl-ban .ten.nho { color: #cfe3d8; font-weight: 700; }
.tl-truoc { font-size: 11.5px; color: #cfe3d8; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tl-banner { min-width: 240px; display: flex; flex-direction: column; gap: 3px; pointer-events: auto; }
.tl-kq { display: flex; justify-content: space-between; gap: 18px; font-size: 13px; }
.tl-kq b.pos { color: #4ade80; }
.tl-kq b.neg { color: #f87171; }
.tl-kq-dau { font-weight: 800; color: #ffe7ac; text-align: center; margin-bottom: 2px; }
.tl-tay-khung { position: absolute; left: 50%; top: 71%; transform: translate(-50%, -50%); z-index: 6; }
.tl-tay {
  position: relative;
  display: flex; align-items: flex-end; padding-top: 20px; touch-action: none; user-select: none; -webkit-user-select: none;
}
.tl-tay .card { --cw: 58px; cursor: pointer; transition: transform .12s, box-shadow .12s, filter .15s; }
.tl-tay .card + .card { margin-left: -25px; }
.tl-tay .card.tach { margin-left: 7px; }
.tl-tay .card.chon { transform: translateY(-18px); box-shadow: 0 0 0 3px var(--gold), 0 10px 20px rgba(0, 0, 0, .5); }
.tl-tay .card.mo { filter: brightness(.5) saturate(.6); }
.tl-tay .card.keo { z-index: 5; transition: none; box-shadow: 0 14px 26px rgba(0, 0, 0, .6); }
.tl-tay .card:hover:not(.chon):not(.keo) { transform: translateY(-6px); }
.tl-chon {
  position: absolute; left: 100%; top: 62%; margin-left: 12px; transform: translateY(-50%); z-index: 7; pointer-events: none;
  padding: 2px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; white-space: nowrap;
  background: linear-gradient(180deg, #f7d272, var(--gold-2)); color: #1a1204; box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
}
.tl-chon.sai { background: #3f1d1d; color: #fecaca; box-shadow: 0 0 0 1px #ef4444; }
.tl-no {
  position: absolute; left: 50%; top: 37%; z-index: 9; pointer-events: none; white-space: nowrap;
  transform: translate(-50%, -50%); padding: 8px 20px; border-radius: 14px;
  font-size: 22px; font-weight: 900; color: #fff7d6; text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
  background: radial-gradient(ellipse at center, rgba(220, 38, 38, .92), rgba(127, 29, 29, .9));
  box-shadow: 0 0 0 2px #fbbf24, 0 12px 40px rgba(0, 0, 0, .6);
}
.tl-no.hien { animation: tlChat 2.2s ease-out forwards; }
@keyframes tlChat {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
  12% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  22% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.95); }
}

/* ============ Chia bàn: danh sách bàn của game bài ============ */
.view.chon-ban > :not(.ds-ban) { display: none !important; }
.view.chon-ban.co-nut-ghe::before { content: none !important; }
.view.chon-ban { min-height: 0; }
.ds-ban { overflow-y: auto; min-height: 0; flex: 1 1 auto; padding-bottom: 12px; }
.ds-ban-dau { display: flex; align-items: center; gap: 10px; margin: 2px 0 12px; flex-wrap: wrap; }
.ds-ban-dau h2 { margin: 0; font-size: 18px; flex: 1 1 auto; }
.ds-ban-dau .btn { min-height: 36px; padding: 6px 14px; text-decoration: none; display: inline-flex; align-items: center; }
.ds-ban-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.the-ban {
  display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer; padding: 12px 14px;
  border-radius: 16px; border: 1px solid var(--line); color: var(--text);
  background: linear-gradient(160deg, #183a2c, var(--panel)); transition: transform .12s, border-color .2s;
}
.the-ban:hover { transform: translateY(-2px); border-color: var(--gold); }
.the-ban.he-thong { background: linear-gradient(160deg, #2d2412, var(--panel)); border-color: #5b4a26; }
.tb-dau { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.tb-dau b { color: var(--gold); font-size: 16px; white-space: nowrap; }
.tb-tenban { color: var(--text); font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-muc { font-size: 13px; font-weight: 700; color: #ffe7ac; }
.tb-cham { display: flex; gap: 4px; flex-wrap: wrap; }
.tb-cham i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px dashed #5f7a6d; }
.tb-cham i.n { background: var(--gold); border: 0; box-shadow: 0 0 6px rgba(242, 193, 78, .6); }
.tb-cham i.b { background: #60a5fa; border: 0; }
.tb-so { display: flex; gap: 12px; font-size: 12.5px; color: var(--muted); }
.tb-chu { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-chu .cho { color: #fbbf24; font-weight: 700; }
.tb-chu .choi { color: #4ade80; font-weight: 700; }

/* Đầu bàn: tên bàn, đổi bàn, cài đặt */
.ban-info { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; }
.ban-info .btn { min-height: 30px; padding: 4px 10px; font-size: 12.5px; }
.ban-ten { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
.ban-ten b { color: var(--gold); }
.ban-bot { color: #93c5fd; }
.ban-chu { padding: 0 6px; border-radius: 999px; background: rgba(242, 193, 78, .18); color: var(--gold); font-weight: 700; font-size: 11px; }
.level select:disabled { opacity: .6; cursor: not-allowed; }

/* Hộp tạo bàn / cài đặt bàn */
.tb-truong { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; }
.tb-truong > span { color: var(--muted); font-weight: 700; }
.tb-truong input, .tb-truong select {
  width: 100%; min-height: 36px; padding: 6px 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
}
.tb-truong .lat-bai-chon { justify-self: start; }
.tb-truong .lat-bai-chon button { padding: 7px 14px; font-size: 13px; }
.tb-dem { display: inline-flex; align-items: center; gap: 10px; }
.tb-dem .btn { min-height: 34px; min-width: 38px; padding: 4px 10px; font-size: 18px; line-height: 1; }
.tb-dem output { min-width: 28px; text-align: center; font-size: 20px; font-weight: 800; color: var(--gold); }
.tb-goiy { margin-top: 10px; }

/* Ghế trống (bàn tắt bot / chưa đủ người) */
.seat.trong .plate { opacity: .45; border-style: dashed; background: rgba(0, 0, 0, .25); box-shadow: none; }
.seat.trong .stack, .seat.trong .tag, .seat.trong .bubble { visibility: hidden; }
.seat.trong .avatar { filter: grayscale(1); }
.bj-spot.trong .plate { opacity: .45; border-style: dashed; }
.bj-spot.trong .stack { visibility: hidden; }

@media (orientation: landscape) and (max-height: 620px) {
  .ds-ban-dau { margin: 0 0 8px; }
  .ds-ban-dau h2 { font-size: 15px; }
  .ds-ban-dau .btn { min-height: 30px; padding: 4px 10px; font-size: 12px; }
  .ds-ban-luoi { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
  .the-ban { padding: 8px 12px; gap: 4px; }
  .ban-info .btn { min-height: 26px; padding: 2px 8px; font-size: 11.5px; }
  .ban-ten { font-size: 11.5px; max-width: 30vw; }
  .tb-truong { margin-top: 6px; }
  .tb-truong input, .tb-truong select { min-height: 32px; }
}

/* Tiến Lên: thời gian xem bài, ngửa bài tới trắng từ từ */
.tl-demxem {
  padding: 3px 14px; border-radius: 999px; font-size: 14px; font-weight: 800; color: #1a1204;
  background: linear-gradient(180deg, #f7d272, var(--gold-2)); box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
  font-variant-numeric: tabular-nums;
}
.tl-ban .ten.tl-cotrang { color: #fff7d6; background: linear-gradient(180deg, #b91c1c, #7f1d1d); box-shadow: 0 0 0 1px #fbbf24; }
.tl-ban .cards.tl-ngua { --cw: 40px; }
.tl-ban .cards.tl-ngua .card + .card { margin-left: -16px; }
.card.lat-dan { animation: latDan .5s ease-out both; animation-delay: var(--tre, 0s); }
@keyframes latDan {
  0% { opacity: 0; transform: translateY(-14px) perspective(500px) rotateY(90deg); }
  100% { opacity: 1; transform: none; }
}

/* Bảng tiền cuối ván Tiến Lên nằm bên phải giữa bàn, để cột giữa (bài ngửa) không bị đẩy lên đè ghế trên */
.tl-banner { position: absolute; left: 74%; top: 33%; transform: translate(-50%, -50%); z-index: 8; min-width: 230px; max-width: 280px; }
.stage .tl-banner { max-width: 280px; }
.tl-banner.o-giua { left: 50%; top: 42.5%; }
.tl-ban .cards.tl-ngua { --cw: 34px; }
.tl-ban .cards.tl-ngua .card + .card { margin-left: -13px; }
.tl-giua.ket-qua { top: 40.5%; }

/* Tiến Lên Miền Bắc */
.gc-tlmb { background: linear-gradient(160deg, #4a2d1d, var(--panel)); }
.tl-chon.canh-bao { background: #7c2d12; border-color: #fb923c; color: #ffedd5; }

/* ============ Cờ Tỷ Phú ============ */
.gc-ctp { background: linear-gradient(160deg, #3b2a5a, var(--panel)); }
.ctp-khung { --ban: 520px; display: flex; gap: 10px; align-items: flex-start; height: min(80vh, 860px); min-height: 0; }
.ctp-khung.doc { flex-direction: column; align-items: center; height: auto; }
.ctp-ban { position: relative; width: var(--ban); height: var(--ban); flex: 0 0 auto; }
.ctp-luoi {
  position: absolute; inset: 0; display: grid; gap: 2px; padding: 3px; border-radius: 12px;
  grid-template-columns: 1.45fr repeat(7, 1fr) 1.45fr; grid-template-rows: 1.45fr repeat(7, 1fr) 1.45fr;
  background: linear-gradient(145deg, #f3cf6e, #b57d1f 40%, #6e4510);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.ctp-quan { position: absolute; inset: 0; pointer-events: none; }
/* Một ô: dải màu nhóm ở trên · tên · nhà · giá (ô trống) hoặc tiền thuê (ô có chủ) */
.ctp-o {
  --co-chu: clamp(6.5px, calc(var(--ban) * .021), 12.5px);
  --nen: linear-gradient(180deg, #fffaf0, #eadcbc);
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: 0; min-height: 0; overflow: hidden; padding: calc(var(--ban) * .014) 1px 1px;
  border: 0; border-radius: 5px; background: var(--nen); color: #2a1d0b; font: inherit; font-size: var(--co-chu); line-height: 1.08;
  cursor: pointer; text-align: center; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .16);
  transition: opacity .25s, filter .25s;
}
.ctp-o:hover { filter: brightness(1.07); }
.ctp-dai { position: absolute; left: 0; right: 0; top: 0; height: 15%; background: var(--nhom); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .22); }
.ctp-ten { font-weight: 800; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctp-gia { font-size: .9em; color: #7a5a24; font-weight: 800; line-height: 1.2; padding: 0 .4em; border-radius: 999px; white-space: nowrap; }
.ctp-gia:empty { display: none; }
.ctp-icon { font-size: 1.35em; line-height: 1; }
/* Ô đặc biệt: mỗi loại một màu cho dễ nhận */
.ctp-o.l-cohoi { --nen: linear-gradient(180deg, #fff0d6, #f6c46f); }
.ctp-o.l-thue { --nen: linear-gradient(180deg, #ffe4df, #f19d92); }
.ctp-o.l-dulich { --nen: linear-gradient(180deg, #eafcff, #b5e6f0); }
.ctp-o.goc { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .2); }
.ctp-o.l-xuatphat { --nen: linear-gradient(145deg, #3ddc97, #0b7266); }
.ctp-o.l-dao { --nen: linear-gradient(145deg, #9fb0c6, #2f3d52); }
.ctp-o.l-lehoi { --nen: linear-gradient(145deg, #ff6ec7, #7b2fd0); }
.ctp-o.l-dulich-bay { --nen: linear-gradient(145deg, #42c3fa, #1c4fd6); }
.ctp-o.goc .ctp-icon { font-size: 2.2em; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
.ctp-o.goc .ctp-ten { font-size: 1.15em; }
.ctp-o.goc .ctp-gia { color: #fff; background: rgba(0, 0, 0, .3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* Ô có chủ: tô kín màu người chơi + avatar chủ ở góc + tiền thuê trong nhãn tối */
.ctp-o.co-chu {
  --nen: linear-gradient(180deg, color-mix(in srgb, var(--chu) 55%, #fff) 0%, var(--chu) 55%, color-mix(in srgb, var(--chu) 75%, #000) 100%);
  color: #fff; text-shadow: 0 1px 1.5px rgba(0, 0, 0, .6);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--chu) 50%, #000), inset 0 -2px 0 rgba(0, 0, 0, .25);
}
.ctp-o.co-chu .ctp-dai { box-shadow: 0 1px 0 rgba(255, 255, 255, .9); }
.ctp-o.co-chu .ctp-gia { background: rgba(0, 0, 0, .45); color: #fff; text-shadow: none; }
.ctp-chu {
  position: absolute; top: 0; right: 0; z-index: 1; width: 1.6em; height: 1.6em; display: grid; place-items: center;
  font-size: .95em; line-height: 1; text-shadow: none; background: #fff; border-radius: 0 4px 0 7px;
  box-shadow: -1px 1px 0 1px color-mix(in srgb, var(--chu) 70%, #000);
}
.ctp-chu:empty, .ctp-lh:empty, .ctp-nha:empty { display: none; }
/* Nhà: 1–2 căn nhỏ · Khách sạn / Công trình biểu tượng to hẳn, viền vàng phát sáng */
.ctp-nha { display: flex; align-items: center; justify-content: center; line-height: 1; }
.ctp-nha i { font-style: normal; font-size: 1.2em; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
.ctp-nha i + i { margin-left: -.15em; }
.ctp-nha.ks i { font-size: 1.8em; }
.ctp-nha.bt i { font-size: 2em; }
.ctp-o.c-trai.co-nha, .ctp-o.c-phai.co-nha { padding-inline: 2.1em 1px; }
.ctp-o.c-phai.co-nha { padding-inline: 1px 2.1em; }
.ctp-o.c-trai .ctp-nha, .ctp-o.c-phai .ctp-nha { position: absolute; top: 55%; transform: translateY(-50%); flex-direction: column; left: 2px; }
.ctp-o.c-phai .ctp-nha { left: auto; right: 2px; }
.ctp-o.c-trai .ctp-nha i + i, .ctp-o.c-phai .ctp-nha i + i { margin: -.25em 0 0; }
.ctp-o.cap-3, .ctp-o.cap-4 {
  z-index: 1;
  box-shadow: inset 0 0 0 2px #ffd84d, inset 0 0 0 3.5px rgba(90, 55, 0, .6), 0 0 8px 2px rgba(255, 204, 51, .85);
}
.ctp-o.cap-4::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .6) 48%, transparent 60%) no-repeat;
  background-size: 250% 100%; animation: ctpBong 2.8s linear infinite;
}
@keyframes ctpBong { from { background-position: 160% 0; } to { background-position: -110% 0; } }
/* Lễ hội: viền hồng–vàng nhấp nháy, pháo hoa lấp lánh, nhãn 🎉×2 */
.ctp-o.le-hoi { z-index: 2; animation: ctpLeHoi 1.3s ease-in-out infinite alternate; }
@keyframes ctpLeHoi {
  from { box-shadow: inset 0 0 0 2.5px #ff4fd8, inset 0 0 0 4px rgba(80, 0, 60, .45), 0 0 6px 2px rgba(255, 79, 216, .75); }
  to { box-shadow: inset 0 0 0 2.5px #ffe14d, inset 0 0 0 4px rgba(80, 50, 0, .45), 0 0 14px 4px rgba(255, 190, 40, .95); }
}
.ctp-o.le-hoi::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(circle at 18% 32%, #fff38a 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 78% 42%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 60% 78%, #ffc2f0 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 28% 84%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 88% 70%, #ffe070 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 45% 55%, rgba(255, 230, 120, .45), transparent 60%);
  animation: ctpLapLanh 1.1s ease-in-out infinite alternate;
}
@keyframes ctpLapLanh { from { opacity: .3; } to { opacity: 1; } }
.ctp-lh {
  position: absolute; left: 0; top: 0; z-index: 1; padding: .08em .35em .08em .25em; border-radius: 4px 0 7px 0;
  font-size: .85em; font-weight: 900; line-height: 1.15; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
  background: linear-gradient(90deg, #ff2d95, #ff9f1a); box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.ctp-o.dang-xet { outline: 2.5px dashed #fff; outline-offset: -4px; }
.ctp-o.chon-duoc { outline: 3px solid #22c55e; outline-offset: -3px; animation: ctpSang 1s ease-in-out infinite; }
@keyframes ctpSang { 50% { filter: brightness(1.18); } }
/* Chạm tên người chơi: chỉ sáng ô của người đó */
.ctp-luoi.dang-loc .ctp-o.mo { opacity: .3; filter: grayscale(.8); }
.ctp-o.vua-doi { animation: ctpNay .6s ease-out; z-index: 3; }
@keyframes ctpNay { 35% { transform: scale(1.22); } }
.ctp-bung {
  position: absolute; z-index: 7; pointer-events: none; white-space: nowrap; transform: translate(-50%, -50%);
  padding: .2em .65em; border-radius: 999px; border: 2px solid #fff; background: var(--mau, #333); color: #fff;
  font-weight: 900; font-size: clamp(11px, calc(var(--ban) * .034), 17px); text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .55); animation: ctpBung 1.9s ease-out forwards;
}
.ctp-bung.to { font-size: clamp(13px, calc(var(--ban) * .048), 24px); background: linear-gradient(135deg, #ffe066, #f59e0b); color: #3b2200; text-shadow: none; }
.ctp-bung.le-hoi { font-size: clamp(13px, calc(var(--ban) * .048), 24px); background: linear-gradient(135deg, #ff3cac, #784ba0 55%, #2b86c5); }
@keyframes ctpBung {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
  14% { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
  28% { transform: translate(-50%, -50%) scale(1); }
  78% { transform: translate(-50%, -95%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -140%) scale(.92); opacity: 0; }
}
.ctp-phao { position: absolute; z-index: 6; width: 0; height: 0; pointer-events: none; }
.ctp-phao i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); opacity: 0; animation: ctpPhao 1.1s ease-out forwards; }
@keyframes ctpPhao {
  0% { transform: rotate(var(--g)) translateY(0) scale(1.2); opacity: 1; }
  100% { transform: rotate(var(--g)) translateY(calc(var(--ban) * -.13)) scale(.3); opacity: 0; }
}
/* Chú thích chủ đất giữa bàn */
.ctp-chu-ds { position: absolute; left: 3%; right: 3%; bottom: 3%; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--ban) * .01); }
.ctp-chu-the {
  display: inline-flex; align-items: center; gap: .35em; padding: .2em .65em .2em .2em; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: clamp(9px, calc(var(--ban) * .024), 12.5px); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
  background: linear-gradient(180deg, color-mix(in srgb, var(--mau) 78%, #fff), color-mix(in srgb, var(--mau) 82%, #000));
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.ctp-chu-the i { font-style: normal; width: 1.7em; height: 1.7em; display: grid; place-items: center; border-radius: 50%; background: #fff; text-shadow: none; }
.ctp-chu-the b { max-width: 6.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctp-chu-the span { font-weight: 600; white-space: nowrap; opacity: .95; }
.ctp-chu-the.dang-loc { box-shadow: 0 0 0 2px #fff, 0 0 12px 2px var(--mau); }
.ctp-chu-the.pha-san { opacity: .45; }
.ctp-khung.ban-nho .ctp-chu-the b { display: none; }
.ctp-khung.ban-nho .ctp-chu-the { padding-right: .45em; }
.ctp-khung.ban-nho .ctp-chu { width: 1.35em; height: 1.35em; font-size: .85em; }
.ctp-khung.ban-nho .ctp-lh { font-size: .75em; }
.ctp-quan-co {
  position: absolute; left: 0; top: 0; z-index: 3;
  width: calc(var(--ban) * .05); height: calc(var(--ban) * .05); min-width: 16px; min-height: 16px;
  border-radius: 50%; background: var(--mau); border: 2px solid #fff; display: grid; place-items: center;
  font-size: calc(var(--ban) * .028); line-height: 1; box-shadow: 0 3px 8px rgba(0, 0, 0, .55);
  transition: transform .16s ease;
}
.ctp-quan-co.bay { transition: transform .85s cubic-bezier(.35, -0.2, .3, 1.2); }
.ctp-quan-co.dang-di { z-index: 4; box-shadow: 0 0 0 3px rgba(255, 255, 255, .55), 0 3px 10px rgba(0, 0, 0, .6); }
.ctp-quan-co.nhay { animation: ctpNhay .17s ease-out; }
@keyframes ctpNhay { 50% { border-color: var(--gold); } }
.ctp-giua {
  grid-row: 2 / 9; grid-column: 2 / 9; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--ban) * .015); padding: 6px 6px calc(var(--ban) * .1); border-radius: 8px; overflow: hidden; color: #fff;
  background: radial-gradient(ellipse at center, #1f7a50 0%, #0f4a30 70%, #0a321f 100%);
}
.ctp-logo { position: absolute; top: 9%; font-weight: 900; letter-spacing: .12em; font-size: calc(var(--ban) * .07); opacity: .16; pointer-events: none; }
.ctp-xx { display: flex; gap: calc(var(--ban) * .02); min-height: calc(var(--ban) * .1); }
.ctp-xx .die { width: calc(var(--ban) * .1); height: calc(var(--ban) * .1); padding: calc(var(--ban) * .012); border-radius: calc(var(--ban) * .018); }
.ctp-xx .die i { width: calc(var(--ban) * .018); height: calc(var(--ban) * .018); }
.ctp-xx.lac .die { animation: ctpLac .7s ease-out both; }
@keyframes ctpLac { 0% { transform: translateY(-40%) rotate(-200deg) scale(.5); opacity: 0; } 60% { transform: translateY(8%) rotate(20deg); opacity: 1; } }
.ctp-tb { max-width: 92%; text-align: center; font-size: clamp(10px, calc(var(--ban) * .03), 15px); font-weight: 600; line-height: 1.35; min-height: 2.7em; }
.ctp-the {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; width: 70%;
  display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center;
  padding: calc(var(--ban) * .03); border-radius: 12px; background: linear-gradient(160deg, #fff7df, #f3dfa6); color: #2a1c02;
  border: 2px solid #b8893a; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); animation: sheetUp .25s ease-out;
  font-size: clamp(10px, calc(var(--ban) * .03), 15px);
}
.ctp-the b { font-size: 1.3em; }
.ctp-the small { opacity: .7; }
.ctp-kq, .ctp-xem {
  position: absolute; inset: 7%; z-index: 6; overflow: auto; padding: calc(var(--ban) * .025);
  border-radius: 12px; background: rgba(6, 16, 11, .94); border: 1px solid var(--brass-3);
  font-size: clamp(10px, calc(var(--ban) * .028), 14px); line-height: 1.45;
}
.ctp-kq-dau { font-size: 1.5em; font-weight: 900; color: var(--gold); text-align: center; }
.ctp-kq-ly { text-align: center; margin-bottom: 6px; opacity: .85; }
.ctp-kq-dong { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; padding: 3px 0; border-top: 1px solid var(--line-soft); }
.ctp-kq-dong i, .ctp-cham { display: inline-block; width: .8em; height: .8em; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.ctp-kq-dong .pos { color: #4ade80; } .ctp-kq-dong .neg { color: #f87171; }
.ctp-kq-sau { text-align: center; margin-top: 6px; opacity: .7; }
.ctp-xem { inset: auto 5% 5% 5%; max-height: 70%; }
.ctp-xem > b { display: block; font-size: 1.2em; margin-bottom: 3px; padding-right: 26px; }
.ctp-dong { position: absolute; right: 6px; top: 6px; background: none; border: 0; color: #fff; font-size: 16px; cursor: pointer; }
.ctp-bang { width: 100%; border-collapse: collapse; margin-top: 4px; }
.ctp-bang td { padding: 1px 4px; border-top: 1px solid var(--line-soft); }
.ctp-bang tr.nay td { color: var(--gold); font-weight: 700; }
.ctp-ben { flex: 1 1 auto; min-width: 0; align-self: stretch; display: flex; flex-direction: column; gap: 6px; max-height: var(--ban); }
.ctp-khung.doc .ctp-ben { width: 100%; max-height: none; }
.ctp-khung.doc .ctp-nk { max-height: 180px; }
.ctp-nguoi { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.ctp-ng {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "av ten tien" "av ts chip"; column-gap: 6px;
  align-items: center; padding: 4px 8px 4px 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); font-size: 12px; min-width: 0;
}
.ctp-ng[data-ghe] { cursor: pointer; background: linear-gradient(90deg, color-mix(in srgb, var(--mau) 32%, var(--panel-2)), var(--panel-2) 72%); }
.ctp-ng.dang-loc { border-color: var(--mau); box-shadow: 0 0 0 2px var(--mau); }
.ctp-ng > i { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: 10px 0 0 10px; }
.ctp-ng .av { grid-area: av; font-size: 20px; }
.ctp-ng .ten { grid-area: ten; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctp-ng .ten small { font-weight: 400; color: var(--muted); }
.ctp-ng .tien { grid-area: tien; color: var(--gold); font-weight: 800; }
.ctp-ng .ts { grid-area: ts; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctp-ng .von { grid-area: chip; color: var(--muted); font-size: 10.5px; }
.ctp-ng .co { position: absolute; right: 6px; top: -7px; font-size: 11px; }
.ctp-ng .gio { position: absolute; left: 50%; top: -8px; transform: translateX(-50%); font-size: 10px; font-weight: 800; background: var(--gold); color: #1a1204; border-radius: 999px; padding: 0 6px; }
.ctp-ng .gio:empty { display: none; }
.ctp-ng.luot { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(242, 193, 78, .3); }
.ctp-ng.minh .ten { color: #ffe7ac; }
.ctp-ng.pha-san { opacity: .5; }
.ctp-ng.trong { opacity: .45; display: flex; gap: 6px; }
.ctp-lenh { padding: 8px 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.ctp-lenh-dau { font-weight: 800; font-size: 14px; }
.ctp-lenh-dau.canh-bao { color: #fdba74; }
.ctp-goi { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.ctp-hang { display: flex; flex-wrap: wrap; gap: 6px; }
.ctp-hang .btn { padding: 7px 11px; min-height: 36px; font-size: 13px; }
.ctp-hang .btn small { font-weight: 600; opacity: .8; }
.ctp-lenh .btn.to { font-size: 16px; padding: 10px 18px; }
.ctp-cho { color: var(--muted); font-size: 13px; }
.ctp-dem { font-size: 12px; color: var(--muted); }
.ctp-dem.gap { color: #f87171; font-weight: 800; }
.ctp-nk { flex: 1 1 auto; min-height: 50px; overflow: auto; font-size: 11.5px; color: var(--muted); padding: 4px 8px; border-radius: 10px; background: rgba(0, 0, 0, .25); }
.ctp-nk .sep { color: var(--gold); }
@media (orientation: landscape) and (max-height: 620px) {
  #view-cotyphu .ctp-khung { flex: 1 1 auto; height: auto; gap: 8px; }
  .ctp-nguoi { gap: 4px; }
  .ctp-ng { padding: 2px 6px 2px 9px; font-size: 11px; }
  .ctp-ng .av { font-size: 16px; }
  .ctp-ng .ts, .ctp-ng .von { font-size: 9.5px; }
  .ctp-lenh { padding: 6px 8px; gap: 4px; }
  .ctp-lenh-dau { font-size: 12.5px; }
  .ctp-goi { font-size: 10.5px; }
  .ctp-hang .btn { padding: 5px 9px; min-height: 32px; font-size: 12px; }
  .ctp-lenh .btn.to { font-size: 14px; padding: 8px 14px; }
  .ctp-nk { font-size: 10px; }
}

/* ============ CashFlow ============ */
.gc-cf { background: linear-gradient(160deg, #1d4d3b, var(--panel)); }
.cf-khung .ctp-ben { overflow-y: auto; }
.cf-luoi {
  position: absolute; inset: 0; display: grid; gap: 2px; padding: 3px; border-radius: 12px;
  grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr);
  background: linear-gradient(145deg, #3b2f73, #1b1540 60%, #120e2c);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.cf-o {
  --co-chu: clamp(6px, calc(var(--ban) * .019), 11.5px);
  --nen: linear-gradient(180deg, #f8fafc, #e2e8f0);
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  min-width: 0; min-height: 0; overflow: hidden; padding: 1px; border: 0; border-radius: 5px;
  font: inherit; font-size: var(--co-chu); line-height: 1.08; color: #1c1917; text-align: center; cursor: pointer;
  background: var(--nen); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18);
}
.cf-o:hover { filter: brightness(1.07); }
.cf-icon { font-size: 1.45em; line-height: 1.1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.cf-ten { font-weight: 800; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-gia { font-weight: 700; font-size: .9em; opacity: .85; }
.cf-dt { font-weight: 900; font-size: .9em; color: #15803d; }
/* Vòng chuột: mỗi loại ô một màu như bàn gốc */
.cf-o.vong .cf-icon { font-size: 1.8em; }
.cf-o.vong.l-cohoi { --nen: linear-gradient(180deg, #dcfce7, #4ade80); }
.cf-o.vong.l-luong { --nen: linear-gradient(180deg, #fef9c3, #facc15); }
.cf-o.vong.l-thitruong { --nen: linear-gradient(180deg, #dbeafe, #60a5fa); }
.cf-o.vong.l-doodad { --nen: linear-gradient(180deg, #ffe4e6, #fb7185); }
.cf-o.vong.l-tuthien { --nen: linear-gradient(180deg, #ffedd5, #fb923c); }
.cf-o.vong.l-embe, .cf-o.vong.l-matviec { --nen: linear-gradient(180deg, #ede9fe, #a78bfa); }
/* Đường cao tốc */
.cf-o.nhanh { --nen: linear-gradient(180deg, #f0fdf4, #a7f3d0); }
.cf-o.nhanh.l-giacmo { --nen: linear-gradient(180deg, #fdf2f8, #f472b6); }
.cf-o.nhanh.l-cfday { --nen: linear-gradient(145deg, #fde68a, #f59e0b); }
.cf-o.nhanh.l-cfday .cf-icon { font-size: 2em; }
.cf-o.nhanh.l-kien, .cf-o.nhanh.l-kiemtoan, .cf-o.nhanh.l-lyhon { --nen: linear-gradient(180deg, #fca5a5, #b91c1c); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .5); }
.cf-o.nhanh.l-tuthien { --nen: linear-gradient(180deg, #ffedd5, #fb923c); }
.cf-o.nhanh.l-cuoc { --nen: linear-gradient(180deg, #cffafe, #22d3ee); }
.cf-o.nhanh.co-chu {
  --nen: linear-gradient(180deg, color-mix(in srgb, var(--chu) 55%, #fff), var(--chu) 60%, color-mix(in srgb, var(--chu) 75%, #000));
  color: #fff; text-shadow: 0 1px 1.5px rgba(0, 0, 0, .55);
}
.cf-o.nhanh.co-chu .cf-dt { color: #fff; }
.cf-o.nhanh.mo-cua { box-shadow: inset 0 0 0 2px var(--chu), inset 0 -2px 0 rgba(0, 0, 0, .18); }
.cf-o.nhanh.mo-minh { z-index: 1; animation: cfMoMinh 1.6s ease-in-out infinite alternate; }
@keyframes cfMoMinh { from { box-shadow: inset 0 0 0 2px #fff, 0 0 4px 1px rgba(255, 215, 80, .6); } to { box-shadow: inset 0 0 0 2px #ffd84d, 0 0 12px 3px rgba(255, 215, 80, .95); } }
.cf-chu { position: absolute; top: 0; right: 0; padding: 0 .2em; font-size: .9em; line-height: 1.35; background: #fff; border-radius: 0 4px 0 6px; text-shadow: none; }
.cf-chu:empty { display: none; }
.cf-o.dang-xet { outline: 2.5px dashed #fff; outline-offset: -4px; }
.cf-quan-co.nhanh { border-color: #ffd84d; }
.cf-giua {
  grid-row: 3 / 8; grid-column: 3 / 8; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--ban) * .015); padding: 6px; border-radius: 10px; overflow: hidden; color: #fff;
  background: radial-gradient(ellipse at center, #17603f 0%, #0c3f28 70%, #072a1a 100%);
}
.cf-logo { position: absolute; top: 7%; font-weight: 900; letter-spacing: .14em; font-size: calc(var(--ban) * .058); opacity: .2; pointer-events: none; }
.cf-the {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; width: 88%; max-height: 92%; overflow: auto;
  display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center;
  padding: calc(var(--ban) * .022); border-radius: 12px; color: #10231a; border: 2px solid #65a30d;
  background: linear-gradient(160deg, #f7fee7, #d9f99d); box-shadow: 0 10px 30px rgba(0, 0, 0, .6); animation: sheetUp .25s ease-out;
  font-size: clamp(10px, calc(var(--ban) * .027), 14px); line-height: 1.4;
}
.cf-the b { font-size: 1.2em; }
.cf-the small { opacity: .7; }
.cf-the .duong { color: #15803d; }
.cf-the.bo-lon { background: linear-gradient(160deg, #ecfeff, #a5f3fc); border-color: #0891b2; }
.cf-the.bo-tt { background: linear-gradient(160deg, #eff6ff, #bfdbfe); border-color: #2563eb; }
.cf-the.bo-dd { background: linear-gradient(160deg, #fff1f2, #fecdd3); border-color: #e11d48; }
.cf-the.bo-nhanh { background: linear-gradient(160deg, #fdf4ff, #f5d0fe); border-color: #c026d3; }
/* Người chơi: thêm thanh tiến độ thoát Vòng chuột */
.cf-ng { grid-template-areas: "av ten tien" "av ts chip" "td td td"; }
.cf-ng.dang-xem { border-color: var(--mau); box-shadow: 0 0 0 2px var(--mau); }
.cf-ng .ten small { font-weight: 600; }
.cf-tiendo { grid-area: td; position: relative; display: block; height: 15px; margin-top: 3px; border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, .1); }
.cf-tiendo i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #f59e0b, #22c55e); transition: width .4s; }
.cf-ng.nhanh .cf-tiendo i, .cf-tiendo.nhanh i { background: linear-gradient(90deg, #a855f7, #ec4899); }
.cf-tiendo em { position: relative; display: block; padding-left: 6px; font-style: normal; font-size: 10px; font-weight: 800; line-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 1px rgba(0, 0, 0, .6); }
.cf-tiendo.to { height: 20px; margin: 6px 0 4px; }
.cf-tiendo.to em { font-size: 11px; line-height: 20px; }
/* Bảng tài chính */
.cf-tc { flex: 0 0 auto; padding: 8px 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); font-size: 12px; }
.cf-tc-dau { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cf-tc-dau span { color: var(--muted); }
.cf-mo { font-size: 11.5px; color: var(--muted); }
.cf-luoi-tc { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.cf-dong { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 1px 0; }
.cf-dong > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-dong b { font-weight: 700; white-space: nowrap; }
.cf-dong small { color: var(--muted); font-weight: 400; }
.cf-dong.tong { border-top: 1px solid var(--line-soft); font-weight: 800; }
.cf-dong.duong b { color: #4ade80; }
.cf-dong.am b { color: #f87171; }
.cf-muc { margin-top: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.cf-trong { color: var(--muted); font-size: 11.5px; }
.cf-tc .btn.sm { padding: 2px 8px; min-height: 24px; font-size: 11px; margin-left: 4px; }
.cf-vay { margin-top: 6px; align-items: center; }
.cf-vay .btn.sm { margin-left: 0; }
.cf-vay small { color: var(--muted); }
.ctp-khung.cf-khung.ban-nho .cf-o .cf-gia { display: none; }
@media (orientation: landscape) and (max-height: 620px) {
  #view-cashflow .ctp-khung { flex: 1 1 auto; height: auto; gap: 8px; }
  .cf-tc { font-size: 11px; padding: 6px 8px; }
}

/* ============ CashFlow 2 (bàn 11×11: vòng ngoài 40 ô, vành trống, vòng trong 24 ô) ============ */
.gc-cf2 { background: linear-gradient(160deg, #26408b, var(--panel)); }
.cf2-luoi { grid-template-columns: repeat(11, 1fr); grid-template-rows: repeat(11, 1fr); gap: 2px; }
.cf2-khung .cf-giua { grid-row: 4 / 9; grid-column: 4 / 9; }
.cf2-khung .cf-o { --co-chu: clamp(5.5px, calc(var(--ban) * .0155), 10.5px); border-radius: 4px; }
.cf2-khung .cf-icon { font-size: 1.35em; }
.cf2-khung .cf-o.vong .cf-icon { font-size: 1.6em; }
.cf2-khung .cf-logo { font-size: calc(var(--ban) * .05); }
/* Giấc mơ bị người khác dẫm vào thì đắt thêm — viền vàng cho dễ thấy */
.cf-o.mo-tang { box-shadow: inset 0 0 0 2px #f59e0b, inset 0 -2px 0 rgba(0, 0, 0, .2); }
.cf-o.mo-tang .cf-gia { color: #7c2d12; font-weight: 900; }

.cf2-khung .ctp-quan-co { width: calc(var(--ban) * .036); height: calc(var(--ban) * .036); min-width: 13px; min-height: 13px; font-size: calc(var(--ban) * .021); border-width: 1.5px; }