:root {
  --bg-1: #ffffff;
  --bg-2: #f5f8fc;
  --surface: rgba(255, 255, 255, 0.88);
  --surface-solid: #ffffff;
  --surface-2: #f2f5fa;
  --surface-2-solid: #eef2f7;
  --border: rgba(0, 96, 209, 0.35);
  --border-strong: rgba(0, 96, 209, 0.35);
  --text: #111111;
  --text-dim: #111111;
  --text-faint: #111111;
  --accent: #0060d1;
  --accent-2: #2f86ff;
  --accent-glow: rgba(0, 96, 209, 0.35);
  --gold: #e9b007;
  --gold-2: #c68f00;
  --win: #16a34a;
  --win-bg: rgba(22, 163, 74, 0.1);
  --lose: #e11d48;
  --lose-bg: rgba(225, 29, 72, 0.09);
  --radius-sm: 10px;
  --radius: 10px;
  --radius-lg: 10px;
  --shadow-card: 0 10px 30px -14px rgba(17, 17, 17, 0.18);
  --content-w: 1300px;
}

* { box-sizing: border-box; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; }

body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--text);
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% -8%, rgba(0, 96, 209, 0.08), transparent 42%),
    radial-gradient(circle at 100% 0%, rgba(0, 96, 209, 0.05), transparent 38%),
    radial-gradient(circle at 50% 100%, rgba(233, 176, 7, 0.05), transparent 40%),
    #ffffff;
  background-attachment: fixed;
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes popIn {
  0% { transform: scale(0.4); opacity: 0; }
  70% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes selectPulse {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.wrap {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 28px 20px 80px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface-solid);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.2px;
  color: var(--text);
  text-decoration: none;
}

.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 30% 28%, #fff, var(--gold) 42%, var(--gold-2) 100%);
  box-shadow: 0 0 16px rgba(233, 176, 7, 0.5);
}

.brand-logo-img {
  max-height: 60px;
  max-width: 150px;
  height: auto;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  vertical-align: middle;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: var(--text-dim);
  flex-wrap: nowrap;
}

.user-identity-row { display: contents; }

.nav-link {
  color: var(--accent-2);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.nav-link:hover { background: rgba(0, 96, 209, 0.1); }

.balance-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, rgba(233, 176, 7, 0.14), rgba(233, 176, 7, 0.05));
  border: 1px solid rgba(233, 176, 7, 0.4);
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
}

.vip-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(180deg, #fff6de, #f7dfa0);
  border: 1px solid rgba(199, 148, 47, 0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 3px rgba(199,148,47,0.25);
  color: #7a4a12;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.3px;
  padding: 6px 12px;
  border-radius: 999px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
}
.topbar-right .live-clock,
.topbar-right .balance-pill,
.topbar-right .vip-pill,
.topbar-right .user-menu-trigger,
.topbar-right .notif-wrap,
.topbar-right .topbar-logout-btn,
.topbar-right #openLoginBtn,
.topbar-right #openRegisterBtn,
.topbar-right #demoPlayBtn {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (min-width: 901px) {
  .topbar-right { flex-direction: row; align-items: center; gap: 10px; }
  .topbar-right .live-clock { font-size: 12px; padding: 5px 11px; gap: 5px; }
  .topbar-right .user-info { gap: 10px; font-size: 14px; }
  .topbar-right .user-info .balance-pill { font-size: 13.5px; padding: 7px 12px 7px 9px; }
  .topbar-right .user-info .vip-pill { font-size: 12.5px; padding: 6px 11px; }
  .topbar-right .user-info .notif-bell { width: 36px; height: 36px; }
  .topbar-right .user-info .notif-bell svg { width: 18px; height: 18px; }
  .topbar-right .user-info .user-menu-trigger { font-size: 14px; padding: 6px 8px; gap: 7px; }
  .topbar-right .user-info .user-menu-trigger .user-menu-icon { width: 28px; height: 28px; }
  .topbar-right .user-info .btn-cta,
  .topbar-right .user-info .btn-outline { font-size: 14.5px; padding: 8px 16px; }
  #userMenuDropdown .notif-wrap { margin-bottom: 4px; }
  #userMenuDropdown .notif-bell {
    width: 100%; height: auto; display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text); justify-content: flex-start;
    background: none; border: none;
  }
  #userMenuDropdown .notif-bell:hover { background: var(--surface-2); }
  #userMenuDropdown .notif-bell svg { width: 16px; height: 16px; color: var(--text-dim); }
  #userMenuDropdown .notif-bell-label { display: inline; font-size: 14px; }
  #userMenuDropdown .notif-dot { position: static; margin-left: auto; }
  .wallet-quick-actions { gap: 8px; }
  .topbar-right .user-info .wallet-quick-btn { font-size: 13.5px; padding: 7px 14px; gap: 7px; }
  .topbar-right .user-info .wallet-quick-btn svg { width: 17px; height: 17px; }
  .balance-pill .mac-reload-btn {
    width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(0, 96, 209, 0.1);
    color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    cursor: pointer; padding: 0;
  }
  .balance-pill .mac-reload-btn svg { width: 13px; height: 13px; }
  .balance-pill .mac-reload-btn:active { background: rgba(0, 96, 209, 0.2); }
  .balance-pill .mac-reload-btn.spinning svg { animation: mac-reload-spin 0.7s linear infinite; }
  @keyframes mac-reload-spin { to { transform: rotate(360deg); } }
}

@media (max-width: 900px) {
  .topbar-inner { gap: 8px; }
  .topbar-right { gap: 8px; }
  .live-clock { padding: 6px 10px; font-size: 11px; gap: 5px; }
  .hello-prefix { display: none; }
  .topbar-logout-btn { display: none; }
  .balance-pill { font-size: 12px; padding: 6px 10px 6px 8px; }
  .vip-pill { font-size: 11px; padding: 5px 9px; }
}

.live-clock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 7px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

.lang-switch-wrap { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; }
.lang-switch-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 2px 4px;
  cursor: pointer;
  color: var(--text-dim);
  line-height: 0;
}
.lang-switch-trigger svg:first-of-type { display: block; border-radius: 10px; }
.lang-switch-trigger:hover { background: var(--surface-2-solid); }
.lang-switch-wrap.open .lang-switch-trigger { background: var(--surface-2-solid); border-color: var(--border-strong); }
.lang-switch-chevron { flex-shrink: 0; transition: transform 0.15s ease; }
.lang-switch-wrap.open .lang-switch-chevron { transform: rotate(180deg); }
.lang-switch-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 150px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 6px;
  z-index: 60;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.lang-switch-dropdown.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.lang-switch-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.lang-switch-item svg { flex-shrink: 0; display: block; border-radius: 10px; }
.lang-switch-item:hover { background: var(--surface-2); }
.lang-switch-item.active { background: var(--surface-2-solid); font-weight: 700; }

@media (max-width: 640px) {
  .lang-switch-trigger svg:first-of-type,
  .lang-switch-item svg { width: 15px; height: 10px; }
}

/* Dropdown "Quốc gia/khu vực" tự dựng (không phải <select> gốc, vì HTML không hiển thị được ảnh
   bên trong <option>) cho form đăng ký khách en/zh — hiện cờ SVG thật lấy từ flagcdn.com trước tên
   nước. KHÔNG dùng transform để hiện/ẩn dropdown (chỉ opacity/visibility) — modal đăng ký từng dính
   lỗi transform trên khối cha làm gãy cuộn chạm iOS, .country-select-list cũng phải cuộn được trong
   modal nên tránh lặp lại đúng lỗi đó. */
.country-select { position: relative; }
.country-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: var(--surface-2-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.country-select-trigger:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 96, 209, 0.16); }
.country-select-flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.country-select-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }
.country-select-trigger.has-value .country-select-label { color: var(--text); }
.country-select-chevron { flex-shrink: 0; color: var(--text-dim); transition: transform 0.15s ease; }
.country-select.open .country-select-chevron { transform: rotate(180deg); }
.country-select-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 8px;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.country-select-dropdown.show { opacity: 1; visibility: visible; pointer-events: auto; }
.country-select-search {
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 8px;
  background: var(--surface-2-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.country-select-list {
  max-height: 240px;
  overflow-y: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.country-select-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.country-select-item:hover { background: var(--surface-2); }
.country-select-item-flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }

/* Ô mã vùng SĐT tách riêng đứng trước ô số điện thoại (form đăng ký khách en/zh) — cùng cơ chế
   dropdown tự dựng + cờ SVG thật như .country-select ở trên, chỉ hẹp hơn vì chỉ cần hiện "+xx". */
.phone-input-group { display: flex; gap: 8px; align-items: stretch; }
.dial-code-select { position: relative; flex-shrink: 0; width: 92px; }
.dial-code-trigger {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 10px;
  background: var(--surface-2-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}
.dial-code-trigger.has-value { color: var(--text); }
.dial-code-trigger:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 96, 209, 0.16); }
.dial-code-flag { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.dial-code-chevron { flex-shrink: 0; margin-left: auto; color: var(--text-dim); transition: transform 0.15s ease; }
.dial-code-select.open .dial-code-chevron { transform: rotate(180deg); }
.dial-code-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 260px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 8px;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.dial-code-dropdown.show { opacity: 1; visibility: visible; pointer-events: auto; }
.dial-code-search {
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 8px;
  background: var(--surface-2-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.dial-code-list { max-height: 240px; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; }

.coin-icon {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 30% 28%, #fff, var(--gold) 45%, var(--gold-2) 100%);
}

.notif-wrap { position: relative; }
.notif-bell {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
}
.notif-bell:hover { color: var(--text); }

.notif-bell-label { display: none; }
.notif-dot {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lose);
  box-shadow: 0 0 0 2px var(--bg-1);
}
.notif-item { padding: 12px; border-radius: var(--radius-sm); }
.notif-item:hover { background: var(--surface-2); }
.notif-item .t { font-weight: 700; font-size: 14px; margin-bottom: 4px; color: var(--text); }
.notif-item .m { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.notif-item .d { font-size: 11px; color: var(--text-faint); margin-top: 6px; }

.notify-user-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 6px;
  z-index: 10;
}
.notify-user-result-item { padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; }
.notify-user-result-item:hover { background: var(--surface-2); }
.notify-user-result-item .u { font-weight: 700; color: var(--text); }
.notify-user-result-item .meta { color: var(--text-dim); font-size: 12px; margin-top: 2px; }

.user-menu-wrap { position: relative; }
.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}
.user-menu-trigger:hover { background: var(--surface-2); }
.user-menu-trigger .user-menu-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2-solid);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  flex-shrink: 0;
}
.user-menu-trigger .chevron { color: var(--text-faint); transition: transform 0.15s ease; flex-shrink: 0; }
.user-menu-wrap.open .chevron { transform: rotate(180deg); }
.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 220px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 8px;
  display: none;
  z-index: 50;
  text-align: left;
}
.user-menu-dropdown.show { display: block; }
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  font-size: 14px;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.user-menu-item:hover { background: var(--surface-2); }
.user-menu-item svg { flex-shrink: 0; color: var(--text-dim); }
.menu-logout-item { display: none; }

.bh-dropdown-wrap { position: relative; }
.bh-dropdown-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text); background: var(--surface-2-solid);
  border: 1px solid var(--border); border-radius: 999px; padding: 9px 16px; cursor: pointer; white-space: nowrap;
}
.bh-dropdown-trigger:hover { border-color: var(--border-strong); }
.bh-dropdown-trigger .chevron { color: var(--text-faint); transition: transform 0.15s ease; flex-shrink: 0; }
.bh-dropdown-wrap.open .chevron { transform: rotate(180deg); }
.bh-dropdown-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 200px;
  background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 6px; display: none; z-index: 50; text-align: left;
}
.bh-dropdown-menu.show { display: block; }
.bh-dropdown-item {
  display: block; width: 100%; background: none; border: none; color: var(--text);
  font-size: 13.5px; text-align: left; padding: 9px 12px; border-radius: var(--radius-sm); cursor: pointer;
}
.bh-dropdown-item:hover { background: var(--surface-2); }
.bh-dropdown-item.active { color: var(--accent); font-weight: 700; background: var(--surface-2); }

.wallet-quick-actions { display: none; align-items: center; gap: 10px; flex-shrink: 0; }
@media (min-width: 901px) {
  .wallet-quick-actions { display: flex; }
  .user-menu-item-wallet { display: none; }
}
.wallet-quick-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.wallet-quick-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); border-color: var(--border-strong); }
.wallet-quick-btn svg { flex-shrink: 0; color: var(--accent); }
.wallet-quick-badge {
  position: absolute;
  top: -12px;
  right: -8px;
  background: var(--lose);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1.5;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}

.wallet-quick-icon { display: contents; }

.method-choice-label { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.method-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.method-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.method-tab:hover { border-color: var(--accent); color: var(--text); }
.method-tab-icon { font-size: 26px; line-height: 1; }
.method-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.taixiu-side-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Riêng nút chọn phương thức nạp/rút (USDT/Ngân hàng, có icon lớn phía trên chữ) cần thẻ to hơn
   hẳn — giữ lại kiểu cũ qua class phụ .user-method-tab, tách khỏi .method-tab dùng chung cho các
   tab lọc/chọn nhỏ (ngày, loại, số chữ số...) để không bị to quá khổ như trước. */
.user-method-tab {
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 22px 12px;
  white-space: normal;
}
.change-method-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 0 12px;
}
.change-method-link:hover { text-decoration: underline; }
.method-info {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.9;
}
.method-info .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.method-info .row .k { color: var(--text-dim); flex-shrink: 0; }
.method-info .row .v-wrap { display: flex; align-items: center; gap: 6px; min-width: 0; }
.method-info .row .v { color: var(--text); font-weight: 700; text-align: right; word-break: break-all; }
.copy-btn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  cursor: pointer;
}
.copy-btn:hover { color: var(--text); border-color: var(--border-strong); }
.copy-btn.copied { color: var(--win); border-color: var(--win); }
.method-qr {
  display: block;
  width: 140px;
  height: 140px;
  object-fit: contain;
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 8px;
  margin: 0 auto 14px;
}

.pay-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) 1fr;
  gap: 24px;
  margin-bottom: 20px;
  align-items: stretch;
}
.pay-left,
.pay-right {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 22px;
}
.pay-left { text-align: center; }
.pay-left .pay-note-box { text-align: left; margin-top: 22px; margin-bottom: 0; }
.pay-qr-wrap {
  display: inline-block;
  background: #fff;
  padding: 10px;
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px -10px rgba(17, 17, 17, 0.25);
}
.pay-qr { display: block; width: 250px; height: 250px; object-fit: contain; }
.pay-napas-badge { display: block; margin: 12px auto 0; width: 130px; height: auto; }
.pay-amount-big {
  margin-top: 14px;
  font-size: 19px;
  font-weight: 800;
  color: var(--gold-2);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.pay-right { display: flex; flex-direction: column; min-width: 0; }
.pay-right .field { margin-top: 16px; margin-bottom: 0; }
.pay-timer-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 2px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.pay-timer-label { font-size: 13px; color: var(--text-dim); }
.pay-timer { font-size: 24px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.pay-timer.expired { color: var(--text-faint); }
.pay-info-rows { display: flex; flex-direction: column; }
.pay-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.pay-info-row:last-child { border-bottom: none; }
.pay-info-row .k { color: var(--text-dim); flex-shrink: 0; }
.pay-info-row .v-wrap { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pay-info-row .v { color: var(--text); font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.pay-note-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.7;
}
.pay-note-box strong { display: block; margin-bottom: 6px; color: var(--text); }
.pay-note-box ul { margin: 0; padding-left: 18px; }
@media (max-width: 560px) {
  .pay-grid { grid-template-columns: 1fr; }
  .pay-left, .pay-right { padding: 18px 16px; }
}

.usdt-panel { max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.usdt-card {
  text-align: center;
  padding: 28px 24px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.usdt-scan-label { font-size: 13px; color: var(--text-dim); margin: 0 0 10px; }
.usdt-amount-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 6px; }
.usdt-amount-big { font-size: 32px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.usdt-token-label { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.usdt-network-label { font-size: 12.5px; color: var(--text-dim); margin-bottom: 18px; }
.usdt-warning-box {
  background: rgba(233, 176, 7, 0.12);
  border: 1px solid rgba(233, 176, 7, 0.4);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 12.5px;
  color: var(--gold-2);
  line-height: 1.6;
}
.usdt-warning-box p { margin: 0 0 8px; }
.usdt-warning-box p:last-child { margin-bottom: 0; }
.usdt-qr-wrap { margin: 0 auto 18px; }
.usdt-qr-wrap .pay-qr { width: 220px; height: 220px; }
.usdt-address-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  text-align: left;
}
.usdt-address-text { font-family: 'Courier New', monospace; font-size: 13px; color: var(--text); word-break: break-all; }
.usdt-address-hint { font-size: 12px; color: var(--text-faint); margin: 0 0 20px; }
.usdt-summary-rows { border-top: 1px solid var(--border); padding-top: 14px; text-align: left; }
.usdt-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 13.5px; color: var(--text-dim); }
.usdt-summary-row .pay-timer { font-size: 16px; }
.usdt-summary-row span:last-child { color: var(--text); font-weight: 700; }
.usdt-note-box { text-align: left; }
.usdt-note-box ol { margin: 0; padding-left: 20px; }
.usdt-panel .field { text-align: left; margin: 0; }

.expired-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 22px;
  padding: 70px 20px;
  min-height: 560px;
}
.expired-icon {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 4px solid var(--lose);
  color: var(--lose);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.expired-text { font-size: 15px; font-weight: 700; color: var(--lose); max-width: 420px; margin: 0; }
.expired-btn { width: auto; min-width: 220px; }

input[type="file"] { min-width: 0; max-width: 100%; flex: 1; }

button {
  cursor: pointer;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  padding: 11px 20px;
  font-family: inherit;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.15s, opacity 0.15s, border-color 0.15s;
}

button.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  width: 100%;
  box-shadow: 0 8px 24px -8px var(--accent-glow);
}
button.primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 30px -8px var(--accent-glow); }
button.primary:active:not(:disabled) { transform: translateY(0); }
button.primary:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.back-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 20px -8px var(--accent-glow);
  transition: transform 0.12s ease, box-shadow 0.2s ease;
}
.back-home-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -6px var(--accent-glow); }
.back-home-btn:active { transform: translateY(0); }
.back-home-btn svg { flex-shrink: 0; }

.hall-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.hall-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  color: var(--text-dim);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s ease, border-color 0.15s ease, color 0.15s ease;
}
.hall-tab:hover { color: var(--text); border-color: var(--border-strong); }
.hall-tab.active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  box-shadow: 0 8px 20px -8px var(--accent-glow);
}
.hall-tab.active:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -6px var(--accent-glow); }
.hall-tab.soon { opacity: 0.7; }
.hall-tab .wallet-quick-badge { top: -10px; right: -6px; }
@media (min-width: 641px) {
  .hall-tab { flex: 1; justify-content: center; }
}
@media (max-width: 640px) {

  .hall-tabs { display: grid; grid-template-columns: 1fr 1fr; row-gap: 18px; column-gap: 6px; }
  .hall-tab { padding: 8px 12px; font-size: 12.5px; justify-content: center; }
  .hall-tab .wallet-quick-badge { top: -8px; right: -4px; font-size: 8px; padding: 2px 5px; }
}

.locked-modal-icon {
  width: 56px;
  height: 56px;
  margin: 4px auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--lose), #f43f5e);
  box-shadow: 0 10px 26px -8px rgba(225, 29, 72, 0.35);
}
.locked-modal-desc strong { color: var(--lose); }

button.link {
  background: none;
  color: var(--accent-2);
  padding: 4px 0;
  font-weight: 600;
}
button.link:hover { color: var(--accent); }

button.ghost {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}
button.ghost:hover:not(:disabled) { background: rgba(17, 17, 17, 0.05); border-color: var(--border-strong); }
button.ghost:disabled { opacity: 0.5; cursor: not-allowed; }
button.ghost.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.card {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-card);
  animation: fadeSlideUp 0.45s ease both;
}

.card h2 {
  margin: 0 0 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.auth-card {
  max-width: 400px;
  margin: 64px auto 0;
  text-align: center;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(5, 7, 12, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.modal-overlay.show { opacity: 1; pointer-events: auto; }

body:has(.modal-overlay.show), body:has(.threshold-modal-overlay.show), body:has(.promo-sheet-overlay.show) { overflow: hidden; }

/* KHÔNG dùng transform (translateY/scale) để tạo hiệu ứng mở/đóng ở .modal-box — dù đã thử trung hoà
   về "transform: none" khi .show (thay vì translateY(0) scale(1)) vẫn KHÔNG hết lỗi thật trên iPhone
   (xác nhận thực tế 2026-09-20, sau khi deploy + test lại). Bỏ hẳn transform khỏi mọi trạng thái —
   hiệu ứng mở/đóng giờ CHỈ dựa vào opacity của .modal-overlay (đã có sẵn) — để loại trừ hoàn toàn khả
   năng iOS Safari chặn vuốt cuộn tay vì "còn transform đang áp dụng" trên chính phần tử overflow-y:auto
   hoặc cha của nó, dù giá trị đó tương đương không transform về mặt hình học. */
.modal-box {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  text-align: center;
  box-shadow: 0 24px 70px -16px rgba(0, 0, 0, 0.65);
}

.modal-box {
  height: 80vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Đặt TƯỜNG MINH pan-y (thay vì để mặc định auto) — user xác nhận thật trên iPhone: chạm/bấm bên
     trong modal vẫn bình thường, CHỈ RIÊNG vuốt/cuộn là không phản hồi gì — đúng dấu hiệu kinh điển
     của touch-action bị trình duyệt suy luận sai ý định cử chỉ. Ép rõ ràng "cho phép vuốt dọc" để loại
     trừ hẳn khả năng này (2026-09-20). */
  touch-action: pan-y;
}
.threshold-modal { height: 80vh; }

@media (max-width: 640px) {

  .modal-box { scrollbar-width: none; }
  .modal-box::-webkit-scrollbar { display: none; }
  .threshold-modal-body { scrollbar-width: none; }
  .threshold-modal-body::-webkit-scrollbar { display: none; }

  #notifModalBody, #promoDetailBody, #guideModalBody, .info-modal-body, .taixiu-history-scroll {
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #notifModalBody::-webkit-scrollbar,
  #promoDetailBody::-webkit-scrollbar,
  #guideModalBody::-webkit-scrollbar,
  .info-modal-body::-webkit-scrollbar,
  .taixiu-history-scroll::-webkit-scrollbar { display: none; }
}
@media (min-width: 641px) {

  .modal-box,
  .threshold-modal-body,
  #notifModalBody,
  #promoDetailBody,
  #guideModalBody,
  .info-modal-body {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
  .modal-box::-webkit-scrollbar,
  .threshold-modal-body::-webkit-scrollbar,
  #notifModalBody::-webkit-scrollbar,
  #promoDetailBody::-webkit-scrollbar,
  #guideModalBody::-webkit-scrollbar,
  .info-modal-body::-webkit-scrollbar { width: 6px; }
  .modal-box::-webkit-scrollbar-track,
  .threshold-modal-body::-webkit-scrollbar-track,
  #notifModalBody::-webkit-scrollbar-track,
  #promoDetailBody::-webkit-scrollbar-track,
  #guideModalBody::-webkit-scrollbar-track,
  .info-modal-body::-webkit-scrollbar-track { background: transparent; }
  .modal-box::-webkit-scrollbar-thumb,
  .threshold-modal-body::-webkit-scrollbar-thumb,
  #notifModalBody::-webkit-scrollbar-thumb,
  #promoDetailBody::-webkit-scrollbar-thumb,
  #guideModalBody::-webkit-scrollbar-thumb,
  .info-modal-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
}

.modal-close {

  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface-solid);
  border: none;
  color: var(--text-dim);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}
.modal-close:hover { background: var(--surface-2); color: var(--text); }

.modal-close {
  position: sticky;

  top: -20px;
  z-index: 2;
}

.modal-close { margin: -20px -16px 0 auto; }

.wallet-req-history-scroll, .tx-history-list, .bet-history-list {
  max-height: none;
  overflow-y: visible;
}

.auth-modal-box {
  height: auto;
  max-height: 90vh;
}

.auth-modal-box .auth-logo { width: 46px; height: 46px; margin-bottom: 12px; }
.auth-modal-box .auth-logo-img { max-height: 36px; margin-bottom: 12px; }
.auth-modal-box .auth-tabs { margin-bottom: 18px; }
.auth-modal-box .auth-subtitle { margin-bottom: 16px; }
.auth-modal-box .field { margin-bottom: 14px; }

@media (max-width: 640px) {
  .auth-modal-box { max-height: 92vh; }
}

.auth-logo {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, #fff, var(--gold) 42%, var(--gold-2) 100%);
  box-shadow: 0 0 30px rgba(233, 176, 7, 0.45);
}
.auth-logo-img {
  display: block;
  max-height: 64px;
  max-width: 220px;
  margin: 0 auto 16px;
  object-fit: contain;
}

.auth-title {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 4px;
}
.auth-subtitle { color: var(--text-dim); font-size: 14px; margin-bottom: 24px; }

.auth-tabs {
  display: flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 24px;
}
.auth-tab {
  flex: 1;
  text-align: center;
  padding: 9px 0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  background: none;
  transition: background 0.2s, color 0.2s;
}
.auth-tab.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 6px 18px -6px var(--accent-glow);
}

.field { margin-bottom: 16px; text-align: left; }

.field label {
  display: block;
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 6px;
  font-weight: 500;
}

.usdt-network-select-box {
  background: linear-gradient(135deg, #1cc3ea, #0ea5e9);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.usdt-network-select-box label {
  display: block;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 10px;
}
.usdt-network-select-box select {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: none;
  background: #fff;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  appearance: auto;
}
.usdt-network-select-box select option:disabled { color: var(--text-faint); }

input[type="text"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="date"],
select {
  width: 100%;
  padding: 11px 14px;
  background: var(--surface-2-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

select { cursor: pointer; }
select option { background: var(--surface-2-solid); color: var(--text); }

input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 96, 209, 0.16); }

input[type="date"] { color-scheme: dark; }

input:disabled, select:disabled { opacity: 0.55; cursor: not-allowed; }
input[readonly] { background: var(--surface-2); cursor: not-allowed; }

input::placeholder { color: var(--text-faint); opacity: 1; }

.row-filter-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 8px; }
.row-filter-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text); }
.row-filter-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

.cashback-group { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.cashback-group:last-of-type { border-bottom: none; margin-bottom: 6px; }
.cashback-group-toggle { margin-bottom: 12px; }
.cashback-tier-table { display: flex; flex-direction: column; gap: 4px; padding-left: 2px; }
.cashback-tier-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 0;
}
.cashback-tier-row + .cashback-tier-row { border-top: 1px solid var(--border); }
.cashback-tier-index { min-width: 48px; padding-bottom: 9px; font-size: 12px; font-weight: 700; color: var(--text-faint); }
.cashback-tier-field { display: flex; flex-direction: column; gap: 4px; }
.cashback-tier-field label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.3px; }
.cashback-tier-field input[type="number"] {
  width: 130px;
  padding: 8px 10px;
  background: var(--surface-2-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}

@media (max-width: 640px) {

  .cashback-tier-table { gap: 10px; }
  .cashback-tier-row {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 0.9fr;
    gap: 8px;
    align-items: end;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 10px 12px;
  }
  .cashback-tier-row + .cashback-tier-row { border-top: none; }
  .cashback-tier-index {
    grid-column: 1 / -1;
    min-width: 0;
    padding-bottom: 0;
  }
  .cashback-tier-field { min-width: 0; gap: 3px; }
  .cashback-tier-field label { font-size: 10px; }
  .cashback-tier-field input[type="text"],
  .cashback-tier-field input[type="number"] {
    width: 100%;
    padding: 8px 6px;
    font-size: 13px;
  }

  #historyTypeTabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: none !important;
  }
}

.captcha-row { display: flex; gap: 10px; align-items: center; }
.captcha-code {
  flex-shrink: 0;
  font-family: 'Courier New', monospace;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 4px;
  padding: 10px 16px;
  min-width: 84px;
  text-align: center;
  color: var(--text);
  background: repeating-linear-gradient(135deg, rgba(17, 17, 17, 0.04) 0 2px, transparent 2px 6px), var(--surface-2-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  user-select: none;
}
.captcha-code span { display: inline-block; }
.captcha-refresh {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  padding: 0;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.15s, border-color 0.15s;
}
.captcha-refresh:hover { transform: rotate(90deg); }
.captcha-row input { flex: 1; min-width: 0; }

.error-msg {
  background: var(--lose-bg);
  border: 1px solid rgba(225, 29, 72, 0.4);
  color: var(--lose);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin-bottom: 16px;
  display: none;
  text-align: left;
  animation: fadeSlideUp 0.25s ease both;
}
.error-msg.show { display: block; }
.notice-msg {
  background: rgba(0, 96, 209, 0.1);
  border: 1px solid rgba(0, 96, 209, 0.35);
  color: var(--accent-2);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
  text-align: left;
  animation: fadeSlideUp 0.25s ease both;
}
.notice-msg.show { display: block; }

.switch-row {
  text-align: center;
  margin-top: 16px;
  font-size: 14px;
  color: var(--text-dim);
}

.hero-panel {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 26px 30px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  background: var(--surface-solid);
}

.ring-wrap { position: relative; width: 128px; height: 128px; flex-shrink: 0; }
.ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--surface-2-solid); stroke-width: 8; }
.ring-fg {
  fill: none;
  stroke: var(--accent-2);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 326.7;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke 0.3s ease;
}
.ring-fg.locked { stroke: var(--lose); }
.ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ring-time {
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ring-time.locked { color: var(--lose); }
.ring-sub { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }

.hero-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  gap: 14px;
  flex: 1;
  width: 100%;
  z-index: 1;
}
.hero-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(160deg, rgba(0, 96, 209, 0.07), rgba(47, 134, 255, 0.015));
}
.hero-col:first-child {
  background: linear-gradient(160deg, rgba(0, 96, 209, 0.13), rgba(47, 134, 255, 0.03));
}

.round-label {
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.round-value {
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--text), var(--text-dim));
  -webkit-background-clip: text;
  background-clip: text;
}

.balls-row { display: flex; gap: 10px; justify-content: center; }
.ball {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: #4a2e00;
  background: radial-gradient(circle at 30% 25%, #fff, var(--gold) 45%, var(--gold-2) 100%);
  box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.2), 0 3px 10px rgba(0, 0, 0, 0.35);
  animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.ball.empty {
  background: var(--surface-2-solid);
  border: 1px dashed var(--border-strong);
  color: var(--text-faint);
  box-shadow: none;
  animation: none;
}
.ball.small { width: 28px; height: 28px; font-size: 12px; }
#paytableContainer .ball { width: 15px; height: 15px; }

@keyframes ballSpinPulse {
  0%, 100% { transform: translateY(-3px) scale(1.05); }
  50% { transform: translateY(1px) scale(0.96); }
}
.ball-spin {
  background: radial-gradient(circle at 30% 25%, #fff, #bfe0ff 45%, var(--accent-2) 100%);
  animation: ballSpinPulse 0.35s ease-in-out infinite;
}

.jackpot-banner {
  position: relative;
  text-align: center;
  padding: 22px 18px 18px;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 50% -10%, rgba(255, 200, 90, 0.2), transparent 62%),
    linear-gradient(155deg, #3d2400, #1c1204 70%);
  border: 1px solid #7a5108;
  box-shadow:
    0 0 0 1px rgba(255, 224, 150, 0.18) inset,
    0 0 0 5px #170e03 inset,
    0 0 0 6px #7a5108 inset,
    0 0 18px -4px rgba(0, 0, 0, 0.5);
  margin-bottom: 16px;
}
@media (prefers-reduced-motion: no-preference) {
  .jackpot-banner { animation: jackpotPulseGlow 2.6s ease-in-out infinite; }
}
@keyframes jackpotPulseGlow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 224, 150, 0.18) inset,
      0 0 0 5px #170e03 inset,
      0 0 0 6px #7a5108 inset,
      0 0 18px -4px rgba(0, 0, 0, 0.5),
      0 0 0 rgba(255, 170, 60, 0);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 224, 150, 0.3) inset,
      0 0 0 5px #170e03 inset,
      0 0 0 6px #d19a1f inset,
      0 0 18px -4px rgba(0, 0, 0, 0.5),
      0 0 22px 2px rgba(255, 170, 60, 0.45);
  }
}
.jackpot-banner-corner { position: absolute; width: 13px; height: 13px; border: 2px solid #e9c877; opacity: 0.8; pointer-events: none; }
.jackpot-banner-corner.tl { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.jackpot-banner-corner.tr { top: 6px; right: 6px; border-left: none; border-bottom: none; }
.jackpot-banner-corner.bl { bottom: 6px; left: 6px; border-right: none; border-top: none; }
.jackpot-banner-corner.br { bottom: 6px; right: 6px; border-left: none; border-top: none; }
.jackpot-banner .jackpot-label {
  font-family: 'Anton', 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff4cf;
  text-shadow: 0 0 14px rgba(255, 200, 90, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.jackpot-banner .jackpot-label::before,
.jackpot-banner .jackpot-label::after { content: '\2726'; font-size: 11px; opacity: 0.85; transform: translateY(-1px); }
.jackpot-banner .jackpot-amount {
  font-family: 'Anton', 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(30px, 5vw, 40px);
  letter-spacing: 0.01em;
  line-height: 1.05;
  margin: 8px 0 4px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, #b8830f 25%, #fff4cf 45%, #fff4cf 55%, #b8830f 75%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .jackpot-banner .jackpot-amount { animation: jackpotShine 3.2s ease-in-out infinite; }
}
@keyframes jackpotShine {
  0% { background-position: 220% 0; }
  60%, 100% { background-position: -40% 0; }
}
.jackpot-banner .jackpot-subtext { font-size: 12.5px; color: #e7cf9a; opacity: 0.85; font-weight: 500; margin-top: 4px; }

.pick6-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 25px);
  justify-content: start;
  gap: 8px;
  margin: 14px 0;
}
.pick6-num {
  width: 25px;
  height: 25px;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-2-solid);
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.pick6-num:hover { border-color: var(--accent); transform: translateY(-1px); }
.pick6-num.selected {
  background: radial-gradient(circle at 30% 25%, #fff, var(--gold) 45%, var(--gold-2) 100%);
  color: #4a2e00;
  border-color: var(--gold);
}
.pick6-num.selected.quickpick { box-shadow: 0 0 0 2px var(--accent); }
.pick6-num:disabled { opacity: 0.35; cursor: not-allowed; }

.pick6-cart-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--surface-2);
}
.pick6-cart-row .pick6-cart-numbers { display: flex; gap: 6px; flex-wrap: nowrap; flex-shrink: 0; }
@media (max-width: 640px) {
  .pick6-cart-numbers .ball.small { width: 20px; height: 20px; }
}

.pick6-two-col { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 22px; }
.pick6-two-col > .card { flex: 1 1 0; min-width: 280px; }

.pending-list { margin-top: 18px; }
.pending-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, rgba(233, 176, 7, 0.16), rgba(233, 176, 7, 0.05));
  border: 1px solid rgba(233, 176, 7, 0.4);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
}
.pending-chip .n { font-weight: 800; color: #8a6100; }

.number-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 28px);
  justify-content: start;
  gap: 7px;
  margin-bottom: 22px;
}

.number-cell {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s ease, background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
}

.number-cell:hover {
  border-color: var(--accent);
  color: var(--text);
  transform: translateY(-2px);
}
.number-cell.selected {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 6px 16px -4px var(--accent-glow);
  animation: selectPulse 0.35s ease;
}

.field-hint {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 6px;
}

.field-hint.lb-points-cap-hint { color: var(--lose); font-weight: 700; }

.bet-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.bet-row .field { flex: 1; margin-bottom: 0; }
.bet-row-btn-wrap { flex-shrink: 0; }
.bet-row-btn-wrap label {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
  visibility: hidden;
}
.bet-row button { flex-shrink: 0; width: 170px; }
/* Ngũ Long dùng chung .bet-row/.guide-btn cho hàng "Xác nhận đặt cược" (không phải hàng nhập điểm
   như Lottery US) — .guide-btn có padding:0 16px inline (ghi đè padding:11px 20px mặc định của
   button), lại không có chiều cao/canh giữa riêng, nên trên PC nó thấp hơn hẳn #playBtn bên cạnh
   (22px so với 36px, đo thực tế) và .bet-row{align-items:flex-start} không kéo giãn 2 nút bằng
   nhau — chữ "Hướng dẫn" nhìn lệch không cùng hàng với "Xác nhận đặt cược". Bản mobile (@media
   max-width:640px bên dưới) đã có sẵn fix tương tự (33px, khớp #playBtn mobile) nhưng chỉ áp cho
   mobile — bổ sung khớp riêng cho PC (36px, khớp #playBtn desktop thật). ĐẶT TRƯỚC khối 640px (cùng
   specificity .confirm-row .guide-btn) để rule mobile phía sau còn thắng đúng lúc ở mobile — nếu đặt
   SAU sẽ đè luôn cả rule mobile do CSS phân thắng thua theo thứ tự khi độ đặc hiệu bằng nhau (đúng
   lỗi từng gặp với .hero-compact .balls-row .ball). */
.confirm-row .guide-btn { height: 36px; display: flex; align-items: center; justify-content: center; }
/* Giữ #playBtn 1 kích thước cố định dù đổi text "Đặt cược" <-> "Kỳ sắp đóng..." (khoá cược 5s
   cuối kỳ), tránh nút co giãn liên tục gây giật layout — chọn theo độ rộng của "Kỳ sắp đóng...". */
#playBtn { min-width: 135px; }

.result-panel {
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid rgba(0, 96, 209, 0.3);
  border-left: 4px solid var(--accent-2);
  background: linear-gradient(180deg, rgba(0, 96, 209, 0.08), rgba(0, 96, 209, 0.02));
  display: none;
  animation: fadeSlideUp 0.3s ease both;
}
.result-panel.show { display: block; }

.result-headline {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
}
.result-detail { color: var(--text-dim); font-size: 14px; line-height: 1.6; }

.table-wrap {
  overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
thead { background: var(--surface-2); }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--text-dim); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
tbody tr { transition: background 0.12s; }
tbody tr:hover { background: rgba(17, 17, 17, 0.03); }
tbody tr:last-child td { border-bottom: none; }

/* Bảng "Lịch sử cược gần đây" (game.html/ngu-long.html/tai-xiu.html/lotobet-18/27.html) có min-width
   560px nên trên điện thoại luôn phải cuộn ngang — cột Thời gian/Mã vé cược (ít quan trọng, khách ít
   khi cần xem ngay) được đánh dấu .hist-col-secondary để ẩn bớt trên mobile, nhường chỗ cho các cột
   Cược/Nhận/Kết quả (quan trọng nhất sau khi đặt cược) hiện ngay không cần vuốt. */
@media (max-width: 640px) {
  .hist-col-secondary { display: none; }
  /* table {min-width:560px} ở trên vẫn ép bảng rộng tối thiểu 560px dù đã ẩn bớt cột, khiến Nhận/Kết
     quả vẫn bị đẩy ra ngoài màn hình — bỏ min-width riêng cho bảng lịch sử cược này trên mobile để 5
     cột còn lại (Kỳ/Cửa cược/Cược/Nhận/Kết quả) co vừa đúng khung hình, không cần vuốt ngang nữa. */
  .hist-table-wrap table { min-width: 0; }
  .hist-table-wrap th, .hist-table-wrap td { padding: 8px 6px; font-size: 12px; }
}

.resizable-table { min-width: 0; border: 1px solid var(--border); }
.resizable-table th, .resizable-table td { border-right: 1px solid var(--border); overflow: hidden; text-overflow: ellipsis; }
.resizable-table th:last-child, .resizable-table td:last-child { border-right: none; white-space: normal; }
.resizable-table td input[type="text"],
.resizable-table td input[type="number"] {
  padding: 7px 10px;
  font-size: 13px;
  min-width: 90px;
}
.resizable-table th { position: relative; }
.col-resizer {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  z-index: 2;
}
.col-resizer:hover, .col-resizer.active { background: var(--accent); opacity: 0.6; }

#dashboardSummaryTable th { text-align: center; }
#dashboardSummaryTable td:not(:first-child) { text-align: center; }

#usersTable th, #usersTable td { text-align: center; }
/* Ghim 8 cột định danh đầu tiên (ID → Mã ví USDT) khi cuộn ngang bảng nhiều cột — tránh admin
   cộng/sửa nhầm tài khoản vì không còn thấy các cột định danh khi đã cuộn sang cột thống kê bên
   phải. --sticky-left-N do initColumnResize() trong admin-common.js tính theo đúng độ rộng thật
   của từng cột (kể cả sau khi admin tự kéo giãn cột) — không hardcode số px vì cột có thể resize.
   Bảng gốc dùng border-collapse: collapse (đường viền giữa 2 ô gộp làm 1) nhưng cách này xung
   khắc với position: sticky — trình duyệt không vẽ lại đúng đường viền đã gộp khi ô dịch chuyển
   sang trạng thái "dính". Đổi riêng bảng này sang separate + border-spacing: 0 để mỗi ô tự vẽ
   viền riêng (chỉ set border-right/border-bottom, không set trái/trên nên không bị viền đôi). */
#usersTable { border-collapse: separate; border-spacing: 0; }
#usersTable th:nth-child(-n+8), #usersTable td:nth-child(-n+8) {
  position: sticky;
  z-index: 1;
  background: var(--surface-solid);
}
#usersTable th:nth-child(1), #usersTable td:nth-child(1) {
  left: var(--sticky-left-1, 0);
  /* Viền trái của TABLE (.resizable-table { border: 1px solid ... }) thuộc về khối <table>, khi
     cuộn ngang nó cuộn theo cả bảng và biến mất khỏi khung nhìn — chỉ có các ô sticky đứng yên.
     Phải tự vẽ viền trái riêng cho ô đầu tiên thì mới luôn thấy được đường viền mép trái. */
  border-left: 1px solid var(--border);
}
#usersTable th:nth-child(2), #usersTable td:nth-child(2) { left: var(--sticky-left-2, 0); }
#usersTable th:nth-child(3), #usersTable td:nth-child(3) { left: var(--sticky-left-3, 0); }
#usersTable th:nth-child(4), #usersTable td:nth-child(4) { left: var(--sticky-left-4, 0); }
#usersTable th:nth-child(5), #usersTable td:nth-child(5) { left: var(--sticky-left-5, 0); }
#usersTable th:nth-child(6), #usersTable td:nth-child(6) { left: var(--sticky-left-6, 0); }
#usersTable th:nth-child(7), #usersTable td:nth-child(7) { left: var(--sticky-left-7, 0); }
#usersTable th:nth-child(8), #usersTable td:nth-child(8) {
  left: var(--sticky-left-8, 0);
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08);
}
#usersTable thead th:nth-child(-n+8) { background: var(--surface-2-solid); z-index: 2; }
#usersTable tbody tr:hover td:nth-child(-n+8) { background: #f5f5f5; }

/* Trước đây ghim cứng cột cuối (Thao tác) vào mép phải để luôn bấm được nút Sửa/Khoá/Xoá dù cuộn
   ngang đến đâu — nhưng cột đứng im giữa lúc các cột khác trôi qua bên dưới bị phản ánh là rối
   mắt/khó nhìn (2026-09-16), nên bỏ ghim, để cột này cuộn theo bảng như các cột còn lại. */

#internalAccountsTable th, #internalAccountsTable td { text-align: center; }

#inviteLinksTable th, #inviteLinksTable td { text-align: center; }
#inviteLinksTable th:last-child, #inviteLinksTable td:last-child { text-align: left; min-width: 400px; }

.invite-actions-row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 6px; }
.invite-actions-row button { padding: 7px 10px; white-space: nowrap; }

#roundsTable th:nth-child(4), #roundsTable td:nth-child(4) { text-align: center; }
#roundsTable th:nth-child(5), #roundsTable td:nth-child(5) { text-align: center; }

.special-number-input {
  width: 56px;
  padding: 6px 8px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-solid);
  color: inherit;
  font: inherit;
  transition: border-color 0.2s, background 0.2s;
}
.special-number-input:focus { outline: none; border-color: var(--accent); }
.special-number-input.save-ok { border-color: #1e9e5a; background: rgba(30, 158, 90, 0.08); }
.special-number-input.save-err { border-color: #e5484d; background: rgba(229, 72, 77, 0.08); }

#roundHistoryTable th:nth-child(2), #roundHistoryTable td:nth-child(2) { text-align: center; }

#betsTable th, #betsTable td { text-align: center; }
#betsTable thead th { position: sticky; top: 0; background: var(--surface-2-solid); z-index: 1; }
#betsTableWrap { max-height: 640px; overflow-y: auto; }

#cashbackHistoryTable th, #cashbackHistoryTable td { text-align: center; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.badge.win { background: var(--win-bg); color: var(--win); }
.badge.lose { background: var(--lose-bg); color: var(--lose); }
.badge.pending { background: rgba(233, 176, 7, 0.16); color: #8a6100; }

.stats-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-box {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-card);
  animation: fadeSlideUp 0.45s ease both;
  border-top: 3px solid var(--accent);
}
.stat-box .label { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; }
.stat-box .value { font-size: 24px; font-weight: 800; }

.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.tab-btn {
  background: none;
  color: var(--text-dim);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--text); border-bottom-color: var(--accent-2); }
.tab-panel[hidden] { display: none; }

/* Đánh dấu field có nội dung dịch riêng theo ngôn ngữ (trang Admin SEO) — xem #seoLangTabs. */
.lang-field-label::after { content: " 🌐"; }

.credit-row { display: flex; gap: 10px; align-items: center; }
.credit-row input { width: 120px; }

.banner-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.banner-gallery-item {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 1920 / 600;
  background: var(--surface-2);
}
.banner-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-admin-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}
.promo-admin-thumb {
  position: relative;
  aspect-ratio: 620 / 260;
  background: var(--surface-2-solid);
  display: flex;
  align-items: center;
  justify-content: center;
}
.promo-admin-thumb img { width: 100%; height: 100%; object-fit: fill; display: block; }
.promo-admin-upload-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: rgba(10, 14, 26, 0.75);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.promo-admin-body { padding: 14px; }

.promo-tabs { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.promo-tab {
  flex: 0 0 auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.promo-tab:hover { border-color: var(--border-strong); }
.promo-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

@media (max-width: 640px) {

  .promo-tabs {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 8px;
  }
  .promo-tab {
    flex: none;
    grid-column: span 3;
    padding: 9px 6px;
    font-size: 12.5px;
    text-align: center;
  }
}

.promo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.promo-card {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, border-color 0.2s ease;

  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.promo-card:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.promo-card-thumb {
  aspect-ratio: 620 / 260;
  background: linear-gradient(135deg, rgba(0, 96, 209, 0.22), rgba(233, 176, 7, 0.18));
  cursor: pointer;
}
.promo-card-thumb img { width: 100%; height: 100%; object-fit: fill; display: block; }
.promo-card-body { padding: 22px; }
.promo-card-body h3 { margin: 0 0 8px; font-size: 17px; font-weight: 800; }
.promo-card-body p { margin: 0 0 18px; color: var(--text-dim); font-size: 14px; line-height: 1.6; }

@media (max-width: 640px) {
  .promo-grid { grid-template-columns: 1fr; gap: 16px; }
}

@media (min-width: 641px) {
  .promo-card-body .promo-view-detail-btn { display: none; }
  .promo-card-body:has(.promo-view-detail-btn:only-child) { padding: 0; }
}

.promo-detail-modal-box { max-width: 1280px; max-height: 88vh; }
@media (min-width: 641px) {
  .promo-detail-modal-box {
    width: 1350px;
    height: 900px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
  }
}

#promoDetailBody { scrollbar-width: none; }
#promoDetailBody::-webkit-scrollbar { display: none; }

.promo-detail-banner {
  width: 100%;
  aspect-ratio: 1150 / 400;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  margin-bottom: 18px;
}
.promo-detail-banner img { width: 100%; height: 100%; object-fit: fill; display: block; }
/* Ảnh modal Quà Tặng giữ đúng tỷ lệ gốc admin tải lên (VD 2040x500), không ép khung 1150:400 và
   không kéo méo như các banner bài khuyến mãi thường (mỗi bài 1 khung cố định, ảnh này thì đổi
   ảnh tuỳ ý qua trang admin nên không thể khoá cứng 1 tỷ lệ). */
.gift-promo-block .promo-detail-banner { aspect-ratio: auto; height: auto; background: transparent; }
.gift-promo-block .promo-detail-banner img { width: 100%; height: auto; object-fit: contain; }
.promo-detail-title { margin: 0 0 18px; font-size: 20px; font-weight: 800; text-align: center; }
.promo-detail-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 16px;
  background: var(--surface-2);
  overflow-x: hidden;
}
.promo-detail-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 14px;
}
.promo-detail-heading-line {
  flex: 1 1 auto;
  max-width: 90px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent));
}
.promo-detail-heading-line.right { background: linear-gradient(90deg, var(--accent), transparent); }
.promo-detail-heading-diamond { color: var(--accent); font-size: 13px; flex-shrink: 0; line-height: 1; }
.promo-detail-heading-text {
  font-size: 21px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--accent);
  text-align: center;
  white-space: nowrap;
}
.promo-detail-box-content { font-size: 14px; line-height: 1.7; color: var(--text-dim); max-width: 100%; overflow-x: hidden; }
.promo-detail-box-content p { margin: 0 0 10px; }
.promo-detail-box-content p:last-child { margin: 0; }
.promo-detail-box-content p, .promo-detail-box-content div, .promo-detail-box-content span,
.promo-detail-box-content li, .promo-detail-box-content strong, .promo-detail-box-content b,
.promo-detail-box-content font {
  white-space: normal !important;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}
.promo-detail-box-content table {

  border-collapse: separate;
  border-spacing: 0;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  table-layout: auto;
  margin: 0 0 10px;
  font-size: 13px;
}
/* RTE trong trang admin hay ghi cứng width theo px cho <table>/<td> khi admin kéo-thả resize cột
   lúc soạn bài khuyến mãi — với table-layout:fixed, trình duyệt luôn nới table rộng bằng đúng tổng
   các cột đó bất kể table có width:100% hay không (đúng chuẩn CSS), nên tràn ra ngoài khung. Ép
   width:auto!important trên từng ô để bỏ qua width cứng đó, layout auto sẽ tự co theo khung chứa. */
.promo-detail-box-content table td, .promo-detail-box-content table th { width: auto !important; border-right: 1px solid rgba(0, 0, 0, 0.15); border-bottom: 1px solid rgba(0, 0, 0, 0.15); padding: 8px 10px; color: var(--text-dim); overflow-wrap: break-word; }
.promo-detail-box-content table tr:first-child td, .promo-detail-box-content table tr:first-child th { border-top: 1px solid rgba(0, 0, 0, 0.15); }
.promo-detail-box-content table td:first-child, .promo-detail-box-content table th:first-child { border-left: 1px solid rgba(0, 0, 0, 0.15); }
.promo-detail-box-content table tbody tr:last-child td, .promo-detail-box-content table tbody tr:last-child th { border-bottom: 1px solid rgba(0, 0, 0, 0.15); }

.promo-detail-box-content table td:not(:first-child),
.promo-detail-box-content table th:not(:first-child) { padding-right: 9px; }

.promo-detail-box-content img.promo-register-btn-img {
  display: block !important;
  width: 240px !important;
  height: 75.66px !important;
  max-width: none !important;
  object-fit: contain !important;
  margin: 14px auto !important;
}

@media (max-width: 640px) {

  #promoDetailOverlay { padding: 0; }
  #promoDetailOverlay .modal-box { border-radius: 0; border-left: none; border-right: none; padding: 20px 14px; }

  .promo-detail-box { padding: 14px 4px; }
  .promo-detail-box-content table { table-layout: auto; font-size: 8px; }
  .promo-detail-box-content table td, .promo-detail-box-content table th {
    width: auto !important;
    padding: 3px 1px;
  }

  .promo-detail-box-content table td:not(:first-child),
  .promo-detail-box-content table th:not(:first-child) { padding-right: 0; }
  .promo-detail-box-content table tr:not(:first-child) td { white-space: nowrap; }

  .promo-detail-box-content table:not(.promo-table-lg) tr:first-child td:not(:only-child),
  .promo-detail-box-content table:not(.promo-table-lg) tr:first-child th:not(:only-child) { white-space: nowrap; }
  .promo-detail-box-content table:not(.promo-table-lg) tr:only-child td:only-child {
    width: 100% !important;
    white-space: normal;
    word-break: break-word;
    font-size: 13px;
  }

  .promo-detail-box-content table.promo-table-cols-2,
  .promo-detail-box-content table.promo-table-cols-3 { font-size: 13px; table-layout: fixed; }
  .promo-detail-box-content table.promo-table-cols-2 td, .promo-detail-box-content table.promo-table-cols-2 th,
  .promo-detail-box-content table.promo-table-cols-3 td, .promo-detail-box-content table.promo-table-cols-3 th { padding: 6px 4px; width: auto !important; }
  .promo-detail-box-content table.promo-table-cols-2 tr:not(:first-child) td,
  .promo-detail-box-content table.promo-table-cols-2 tr:first-child td,
  .promo-detail-box-content table.promo-table-cols-2 tr:first-child th,
  .promo-detail-box-content table.promo-table-cols-3 tr:not(:first-child) td,
  .promo-detail-box-content table.promo-table-cols-3 tr:first-child td,
  .promo-detail-box-content table.promo-table-cols-3 tr:first-child th { white-space: normal; word-break: break-word; }
  .promo-detail-box-content table.promo-table-cols-4 { font-size: 11px; table-layout: fixed; }
  .promo-detail-box-content table.promo-table-cols-4 td, .promo-detail-box-content table.promo-table-cols-4 th { padding: 5px 3px; }
  .promo-detail-box-content table.promo-table-cols-4 tr:not(:first-child) td,
  .promo-detail-box-content table.promo-table-cols-4 tr:first-child td,
  .promo-detail-box-content table.promo-table-cols-4 tr:first-child th { white-space: normal; }
  .promo-detail-box-content table.promo-table-cols-5 { font-size: 10px; table-layout: fixed; }
  .promo-detail-box-content table.promo-table-cols-5 td, .promo-detail-box-content table.promo-table-cols-5 th { padding: 4px 2px; width: auto !important; }
  .promo-detail-box-content table.promo-table-cols-5 tr:not(:first-child) td,
  .promo-detail-box-content table.promo-table-cols-5 tr:first-child td,
  .promo-detail-box-content table.promo-table-cols-5 tr:first-child th { white-space: normal; word-break: break-word; }

  .promo-detail-box-content table.promo-table-cols-2 td:not(:first-child), .promo-detail-box-content table.promo-table-cols-2 th:not(:first-child),
  .promo-detail-box-content table.promo-table-cols-3 td:not(:first-child), .promo-detail-box-content table.promo-table-cols-3 th:not(:first-child) { padding-right: 3px; }
  .promo-detail-box-content table.promo-table-cols-4 td:not(:first-child), .promo-detail-box-content table.promo-table-cols-4 th:not(:first-child) { padding-right: 2px; }
  .promo-detail-box-content table.promo-table-cols-5 td:not(:first-child), .promo-detail-box-content table.promo-table-cols-5 th:not(:first-child) { padding-right: 1px; }

  .promo-detail-box-content img.promo-register-btn-img { max-width: none !important; width: 150px !important; height: 40px !important; object-fit: contain !important; }

  .promo-detail-box-content table.promo-table-lg { font-size: 10px; }
  .promo-detail-box-content table.promo-table-lg td,
  .promo-detail-box-content table.promo-table-lg th { padding: 4px 1px; }

  .promo-detail-box-content table.promo-table-lg td:not(:first-child),
  .promo-detail-box-content table.promo-table-lg th:not(:first-child) { padding-left: 2px; padding-right: 1px; }

  .promo-detail-box-content table.promo-table-lg td:first-child,
  .promo-detail-box-content table.promo-table-lg th:first-child { padding-left: 3px; padding-right: 3px; }
}

.promo-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(5, 7, 12, 0.72);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.promo-sheet-overlay.show { opacity: 1; pointer-events: auto; }

/* KHÔNG dùng transform (translateY) để trượt sheet lên — dù đã thử trung hoà về "transform: none" khi
   .show vẫn KHÔNG hết lỗi thật trên iPhone (xác nhận thực tế 2026-09-20). Bỏ hẳn transform khỏi mọi
   trạng thái, hiệu ứng mở giờ chỉ còn opacity của .promo-sheet-overlay (đã có sẵn) — mất hiệu ứng
   "trượt lên" nhưng loại trừ hoàn toàn khả năng .promo-sheet (cha của .promo-sheet-body, khối thật sự
   cần vuốt cuộn) bị iOS Safari chặn cử chỉ vuốt vì còn transform áp dụng trên đường đi cha-con. */
.promo-sheet {
  width: 100%;
  max-width: 640px;
  height: calc(100vh - 64px);
  background: var(--surface-solid);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -18px 44px -18px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.promo-sheet-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 14px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.promo-sheet-title { flex: 1; text-align: center; font-size: 16px; font-weight: 800; color: #fff; letter-spacing: 0.03em; text-transform: uppercase; }
.promo-sheet-icon-btn {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: none;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.promo-sheet-back-btn { background: rgba(255, 255, 255, 0.22); color: #fff; box-shadow: none; visibility: hidden; }
.promo-sheet-back-btn.show { visibility: visible; }

.promo-sheet-body { flex: 1; overflow-y: auto; padding: 14px 12px 20px; scrollbar-width: none; touch-action: pan-y; }
.promo-sheet-body::-webkit-scrollbar { display: none; }

.promo-sheet-card {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  margin-bottom: 14px;
  transition: transform 0.15s ease;
}
.promo-sheet-card:last-child { margin-bottom: 0; }
.promo-sheet-card:active { transform: scale(0.98); }
.promo-sheet-card img { width: 100%; display: block; }

@media (min-width: 641px) {
  .promo-sheet-overlay { display: none !important; }
}

@media (max-width: 640px) {
  #promoDesktopWrap { display: none; }
}

#promoDetailOverlay .modal-close {
  top: -16px;
  right: -12px;

  margin: 0 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 20px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
#promoDetailOverlay .modal-close:hover { background: var(--surface-2); }
@media (max-width: 640px) {

  #promoDetailOverlay .modal-close { right: 8px; }
}
@media (min-width: 641px) {

  #promoDetailOverlay .modal-close { top: -20px; right: auto; margin: -20px -16px 0 auto; }
}

.rte { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.rte-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.rte-toolbar button {
  padding: 5px 10px;
  font-size: 13px;
  background: var(--surface-2-solid);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
}
.rte-toolbar button:hover { border-color: var(--border-strong); }
.rte-toolbar input[type="color"] {
  width: 30px;
  height: 30px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2-solid);
  cursor: pointer;
}
.rte-color-group { display: flex; align-items: center; gap: 5px; }
.rte-toolbar button.rte-color-swatch {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.12s ease;
}
.rte-toolbar button.rte-color-swatch:hover { transform: scale(1.15); border-color: var(--accent); }
.rte-color-label { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.rte-toolbar button.rte-color-swatch.rte-color-clear {
  background: var(--surface-2-solid);
  color: var(--lose);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rte-sep { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }
.rte-radius-group { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.rte-radius-group input[type="range"] { width: 90px; accent-color: var(--accent); cursor: pointer; }
.rte-radius-value { min-width: 32px; }
.rte-px-input {
  width: 46px;
  padding: 4px 6px;
  font-size: 12px;
  background: var(--surface-2-solid);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
}
.rte-corner-group { display: flex; align-items: center; gap: 3px; }
.rte-corner-group button {
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  background: var(--surface-2-solid);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 10px;
  cursor: pointer;
}
.rte-corner-group button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.rte-font-select {
  padding: 5px 8px;
  font-size: 12px;
  background: var(--surface-2-solid);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  max-width: 150px;
  cursor: pointer;
}
.rte-toolbar .rte-radius-group input[data-fontsize-slider] { width: 70px; }
.rte-editable {
  min-height: 90px;
  padding: 12px 14px;
  background: var(--surface-2-solid);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  outline: none;
  max-width: 100%;
  overflow-x: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
}
.rte-editable * { max-width: 100%; overflow-wrap: break-word; word-break: break-word; white-space: normal !important; }
.rte-editable table { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; margin: 6px 0; }
.rte-editable table td { border-right: 1px solid rgba(0, 0, 0, 0.15); border-bottom: 1px solid rgba(0, 0, 0, 0.15); padding: 6px 8px; overflow-wrap: break-word; }
.rte-editable table tr:first-child td { border-top: 1px solid rgba(0, 0, 0, 0.15); }
.rte-editable table td:first-child { border-left: 1px solid rgba(0, 0, 0, 0.15); }
.rte-editable table tbody tr:last-child td { border-bottom: 1px solid rgba(0, 0, 0, 0.15); }

.rte-editable td.rte-cell-multiselect, .rte-editable th.rte-cell-multiselect {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  position: relative;
}
.rte-editable td.rte-cell-multiselect::after, .rte-editable th.rte-cell-multiselect::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 96, 209, 0.18);
  pointer-events: none;
}

.banner-gallery-item .del-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  background: rgba(10, 14, 26, 0.75);
  color: #fff;
  font-size: 15px;
  line-height: 1;
}
.banner-gallery-item .del-btn:hover { background: var(--lose); }

.empty-state { color: var(--text-dim); font-size: 14px; padding: 24px 0; text-align: center; }

.dist-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 240px;
  padding: 10px 6px 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
}
.dist-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  width: 22px;
  height: 100%;
  cursor: default;
}
.dist-bar {
  width: 100%;
  min-height: 2px;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  transition: height 0.25s ease;
}
.dist-bar:hover { filter: brightness(1.2); }
.dist-bar.drawn { background: linear-gradient(180deg, var(--gold), var(--gold-2)); }
.dist-label { font-size: 9px; color: var(--text-faint); margin-top: 4px; }

.chat-shell { display: flex; height: 620px; }
.chat-conv-list {
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.chat-conv-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 14px 16px;
  cursor: pointer;
  border-radius: 0;
}
.chat-conv-item:hover { background: var(--surface-2); }
.chat-conv-item.active { background: rgba(0, 96, 209, 0.1); }
.chat-conv-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.chat-conv-name { font-weight: 700; font-size: 14px; color: var(--text); }
.chat-conv-badge {
  flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--lose);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-conv-preview {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-conv-time { font-size: 11px; color: var(--text-faint); margin-top: 4px; display: flex; align-items: center; gap: 5px; }
.chat-conv-presence-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; }
.chat-conv-presence-dot.online { background: var(--win); }
.chat-thread-status {
  font-size: 12px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
}
.chat-thread-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; }
.chat-thread-status.online .dot { background: var(--win); }
.chat-thread-status.online { color: var(--win); }

.chat-thread { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-thread-header { padding: 16px 20px; border-bottom: 1px solid var(--border); font-size: 15px; }
.chat-thread-body { flex: 1; overflow-y: auto; touch-action: pan-y; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.chat-thread-input { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--border); }
.chat-thread-input input { flex: 1; }

.chat-bubble-row { display: flex; gap: 8px; align-items: flex-end; }
.chat-bubble-row.me { justify-content: flex-end; }
.chat-bubble-avatar { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.cskh-avatar-cell { position: relative; display: inline-flex; width: 96px; height: 96px; }
.cskh-avatar-slot {
  display: flex; align-items: center; justify-content: center; width: 96px; height: 96px;
  border-radius: 50%; border: 1px dashed var(--border); cursor: pointer; overflow: hidden; background: var(--surface-2);
}
.cskh-avatar-slot:hover { border-color: var(--border-strong); }
.cskh-avatar-preview { width: 100%; height: 100%; object-fit: cover; }
.cskh-avatar-plus { color: var(--text-faint); font-size: 28px; font-weight: 700; }
.cskh-avatar-remove {
  position: absolute; top: -4px; right: -4px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--lose); color: #fff; border: none; font-size: 12px; line-height: 1; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.chat-bubble {
  max-width: 68%;
  background: var(--surface-2-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
}
.chat-bubble-row:not(.me) .chat-bubble { border-bottom-left-radius: 5px; }
.chat-bubble-row.me .chat-bubble {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #fff;
  border-bottom-right-radius: 5px;
}
.chat-bubble-name { font-size: 11px; font-weight: 700; color: var(--accent-2); margin-bottom: 3px; }
.chat-bubble-text { font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.chat-bubble-time { font-size: 10px; color: var(--text-faint); margin-top: 5px; }
.chat-bubble-row.me .chat-bubble-time { color: rgba(255, 255, 255, 0.75); }
.chat-bubble-image {
  display: block;
  max-width: 100%;
  max-height: 220px;
  border-radius: 10px;
  cursor: zoom-in;
  object-fit: cover;
}

@media (max-width: 860px) {
  .chat-shell { flex-direction: column; height: auto; }
  .chat-conv-list { width: 100%; max-height: 220px; border-right: none; border-bottom: 1px solid var(--border); }
  .chat-thread { height: 480px; }
}

.chat-widget-box {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 100px);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 90;
}
.chat-widget-box.show { display: flex; }

/* Cửa sổ chat riêng (window.open ?chatPopup=1) — chỉ hiện khung chat, ẩn hết phần còn lại của
   trang (kể cả các modal/overlay khác như cảnh báo lừa đảo, đăng nhập...) để khách điều hướng cửa
   sổ chính thoải mái mà không làm mất/đóng cuộc trò chuyện. Ẩn theo kiểu "mọi thứ trừ khung chat"
   thay vì liệt kê từng ID để không bị sót nếu trang có thêm modal/overlay mới sau này. */
body.chat-popup-mode > *:not(#chatWidgetBox) {
  display: none !important;
}
body.chat-popup-mode {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
body.chat-popup-mode .chat-widget-box {
  position: static;
  transform: none;
  width: 100%;
  /* 100vh trên mobile tính theo chiều cao lớn nhất có thể (thanh địa chỉ ẩn đi), cao hơn khoảng
     nhìn thấy thật khi thanh địa chỉ đang hiện — khiến khung nhập tin nhắn bị đẩy khuất phía dưới,
     không bấm được. 100dvh tính đúng theo khoảng nhìn thấy thật tại từng thời điểm (trình duyệt mới
     hỗ trợ), khai báo 100vh trước làm phương án dự phòng cho trình duyệt cũ không hiểu dvh. */
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  border-radius: 0;
  border: none;
  box-shadow: none;
}
.chat-widget-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  background:
    radial-gradient(circle at 12% 30%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 2.2%),
    radial-gradient(circle at 68% 65%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 1.8%),
    radial-gradient(circle at 85% 22%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 1.8%),
    radial-gradient(circle at 42% 82%, rgba(0, 0, 0, 0.15) 0%, rgba(255, 255, 255, 0) 1.6%),
    radial-gradient(circle at 93% 78%, rgba(0, 0, 0, 0.15) 0%, rgba(255, 255, 255, 0) 1.6%),
    linear-gradient(120deg, #1668e6, #34baf0);
  color: #fff;
  font-weight: 700;
  position: relative;
}
.chat-widget-header button {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  padding: 0 4px;
  cursor: pointer;
  line-height: 1;
}
.chat-widget-back { display: flex; align-items: center; justify-content: center; }
.chat-widget-body { flex: 1; overflow-y: auto; touch-action: pan-y; padding: 16px; display: flex; flex-direction: column; gap: 10px; }

.chat-widget-header-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.chat-widget-close-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 18px !important;
  padding: 0 !important;
}
.chat-widget-close-btn:hover { background: rgba(255, 255, 255, 0.35) !important; }

.chat-widget-avatar {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  overflow: hidden;
}
.chat-widget-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-widget-avatar .status-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--win);
  border: 2px solid #1c74e0;
  display: none;
}
.chat-widget-avatar .status-dot.show { display: block; }
.chat-widget-avatar .status-dot.offline { background: #9aa5b5; }
.chat-widget-header-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.chat-widget-header-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-widget-header-status {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 14px;
}
.chat-widget-header-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--win); flex-shrink: 0; }
.chat-widget-header-status.offline .dot { background: rgba(255, 255, 255, 0.55); }

.chat-bubble-time { display: flex; align-items: center; gap: 4px; }

.chat-typing-row { display: flex; gap: 8px; align-items: flex-end; }
.chat-typing-bubble {
  display: flex;
  gap: 4px;
  padding: 11px 14px;
  border-radius: var(--radius);
  border-bottom-left-radius: 5px;
  background: var(--surface-2-solid);
  border: 1px solid var(--border);
}
.chat-typing-bubble span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
  opacity: 0.5;
  animation: chatTypingBounce 1.3s infinite ease-in-out;
}
.chat-typing-bubble span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing-bubble span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatTypingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
  30% { transform: translateY(-4px); opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-typing-bubble span { animation: none; opacity: 0.6; }
}

.chat-widget-precat { flex: 1; overflow-y: auto; touch-action: pan-y; padding: 22px 20px; display: flex; }
.chat-widget-precat-inner { width: 100%; align-self: flex-start; }
.chat-precat-staff-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 20px;
  background: var(--surface-2-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.chat-precat-staff-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
}
.chat-precat-staff-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-precat-staff-meta { flex: 1; min-width: 0; }
.chat-precat-staff-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-precat-staff-role { font-size: 11.5px; color: var(--text-dim); margin-top: 1px; }
.chat-precat-staff-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--win);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--win-bg);
}
.chat-precat-brand { position: relative; text-align: center; margin-bottom: 20px; }
.chat-precat-sparkle {
  position: absolute;
  top: -6px;
  left: 6px;
  color: var(--accent-2);
  opacity: 0.55;
}
.chat-precat-sparkle.s2 { top: 14px; left: 26px; width: 10px; height: 10px; opacity: 0.35; }
.chat-precat-logo-img { max-height: 76px; max-width: 220px; margin: 4px auto 14px; object-fit: contain; }
.chat-precat-brand .brand-mark { width: 64px !important; height: 64px !important; margin: 4px auto 14px !important; }
.chat-precat-text { margin: 0; color: var(--text-dim); font-size: 13.5px; line-height: 1.7; }
.chat-widget-precat .field { margin-bottom: 16px; }
.chat-widget-precat .error-msg { margin-bottom: 16px; }

.chat-widget-precat .field label { display: flex; align-items: center; gap: 6px; }
.chat-widget-precat .field label .chat-precat-input-icon { position: static; color: var(--accent); display: flex; }
.chat-precat-input-wrap { position: relative; display: flex; align-items: center; }
.chat-precat-input-wrap input,
.chat-precat-input-wrap select {
  padding-left: 14px;
  padding-right: 34px;
  border-color: rgba(0, 96, 209, 0.28);
  border-radius: 10px;
}
.chat-precat-input-wrap select { appearance: none; -webkit-appearance: none; -moz-appearance: none; }
.chat-precat-select-arrow {
  position: absolute;
  right: 11px;
  color: var(--accent);
  pointer-events: none;
  display: flex;
}
.chat-precat-input-wrap.has-value .chat-precat-select-arrow { display: none; }
.chat-precat-input-check {
  position: absolute;
  right: 11px;
  color: var(--win);
  pointer-events: none;
  display: none;
}
.chat-precat-input-wrap.has-value .chat-precat-input-check { display: flex; }

.chat-widget-precat button.primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 13px 20px;
  position: relative;
  overflow: hidden;
}
.chat-widget-precat button.primary::after {
  content: '';
  position: absolute;
  top: -70%;
  left: -25%;
  width: 35%;
  height: 240%;
  background: rgba(255, 255, 255, 0.32);
  transform: rotate(20deg);
  pointer-events: none;
}
.chat-widget-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }

.chat-quick-reply-btn {
  border: 1px solid var(--border);
  background: var(--surface-2-solid);
  color: var(--text);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.chat-quick-reply-btn:hover { background: var(--surface-2); border-color: var(--accent-2); }

.chat-waiting-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(233, 176, 7, 0.12);
  border-top: 1px solid rgba(233, 176, 7, 0.4);
  border-bottom: 1px solid rgba(233, 176, 7, 0.4);
  color: #8a6100;
  font-size: 12px;
}
.chat-waiting-spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(233, 176, 7, 0.4);
  border-top-color: var(--gold);
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
.chat-widget-input input { flex: 1; }
.chat-widget-input button {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-widget-attach-btn { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); }
.chat-widget-attach-btn:hover { color: var(--text); border-color: var(--border-strong); }
.chat-widget-attach-btn:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 640px) {
  .chat-widget-box {
    right: 8px;
    bottom: 8px;
    top: auto;
    transform: none;
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    height: calc(100vh - 140px);
  }
}

.btn-cta, .btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 700;
  font-size: 15px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.15s, border-color 0.15s;
}
.btn-cta {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 8px 24px -8px var(--accent-glow);
}
.btn-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -8px var(--accent-glow); }
.btn-outline {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  border: 1px solid var(--border);
}
.btn-outline:hover { background: rgba(17, 17, 17, 0.05); border-color: var(--border-strong); }
.btn-cta.lg, .btn-outline.lg { padding: 15px 32px; font-size: 16px; }

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.banner-carousel-wrap {
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.banner-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 600;
  background: linear-gradient(135deg, rgba(0, 96, 209, 0.24), rgba(47, 134, 255, 0.14) 55%, rgba(233, 176, 7, 0.14));
}
.banner-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.banner-slide.active { opacity: 1; }

.home-marquee {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 9px 16px 9px 4px;
}
@media (max-width: 640px) {
  .home-marquee {
    width: 100%;
    max-width: 440px;
    height: 45px;
    margin: 0 auto;
    box-sizing: border-box;
  }
}
.home-marquee-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #4a2e00;
}
.home-marquee-scroll-area {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.home-marquee-track {
  display: inline-block;
  padding-left: 100%;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent);

  animation: home-marquee-scroll 30s linear infinite;
}
@keyframes home-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .home-marquee-track { animation: none; padding-left: 0; }
}

#mobileAuthSlot { max-width: var(--content-w); margin: 0 auto; }
@media (max-width: 640px) {
  #mobileAuthSlot:not(:empty) { padding: 0; }
  #mobileAuthSlot .user-info {
    background: var(--surface-solid);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    padding: 14px 14px;
    gap: 8px;
    flex-wrap: nowrap;
    width: 100%;
    justify-content: flex-end;
  }
  #mobileAuthSlot .user-info .balance-pill { order: 1; }
  #mobileAuthSlot .user-info .notif-wrap { order: 2; }
  #mobileAuthSlot .user-info #topbarReferralLink { order: 3; }
  #mobileAuthSlot .user-info #topbarVipLink { order: 4; }
  #mobileAuthSlot .user-info .user-menu-wrap { order: 5; }
  #mobileAuthSlot .user-info #openLoginBtn,
  #mobileAuthSlot .user-info #openRegisterBtn,
  #mobileAuthSlot .user-info #demoPlayBtn {
    flex: 1 1 0;
    justify-content: center;
    padding: 13px 6px;
    font-size: 13px;
    gap: 5px;
    white-space: nowrap;
  }
}

.mobile-account-card { display: none; }
@media (max-width: 640px) {
  .mobile-account-card.show {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: var(--content-w);
    margin: 0 auto;
    padding: 13px 14px;
    background: var(--surface-solid);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-card);
  }
  .mac-left { display: flex; flex-direction: column; gap: 7px; flex-shrink: 0; min-width: 120px; height: 60px; }
  .mac-row1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .mac-row1 .lvl-badge { width: 22px; height: 22px; font-size: 10px; border-width: 1.5px; flex-shrink: 0; }
  .mac-row1 .lvl-badge-img { width: 20px; height: 20px; }
  .mac-row1 .user-menu-trigger { padding: 2px 2px; font-size: 13.5px; gap: 4px; min-width: 0; }
  .mac-row1 .user-menu-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 92px; }
  .mac-row1 .user-menu-icon { display: none; }

  .mac-row1 .chevron { display: none; }
  .mac-row1 .notif-wrap { flex-shrink: 0; }
  .mac-row1 .notif-bell { width: 22px; height: 22px; }
  .mac-row1 .notif-bell svg { width: 14px; height: 14px; }
  .mac-row1 a.btn-outline { font-size: 9.5px; padding: 3px 7px; flex-shrink: 0; }
  .mac-row2 { display: flex; align-items: center; }
  .mac-row2 .balance-pill { font-size: 13px; padding: 6px 8px 6px 8px; gap: 6px; flex-shrink: 0; }
  .mac-reload-btn {
    width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(0, 96, 209, 0.1);
    color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    cursor: pointer; padding: 0;
  }
  .mac-reload-btn:active { background: rgba(0, 96, 209, 0.2); }
  .mac-reload-btn.spinning svg { animation: mac-reload-spin 0.7s linear infinite; }
  @keyframes mac-reload-spin { to { transform: rotate(360deg); } }

  .mac-right {
    flex: 1 1 auto; height: 49px; min-width: 0; display: flex; align-items: center;
    justify-content: space-between; padding-left: 10px; padding-right: 10px; border-left: 1px solid var(--border);
  }

  #macRight #walletQuickActions { display: contents; }
  #macRight .wallet-quick-btn {
    flex: 0 0 auto; min-width: 0; flex-direction: column; gap: 6px; padding: 0; border: none;
    background: none; box-shadow: none; border-radius: 0; font-size: 9.5px; color: var(--accent);
  }
  #macRight .wallet-quick-btn:hover { transform: none; box-shadow: none; }
  #macRight { gap: 10px; }
  #macRight .wallet-quick-icon {
    display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    border-radius: 10px;
  }
  #macRight #quickDepositBtn .wallet-quick-icon { background: linear-gradient(160deg, #34d399, #059669); }
  #macRight #quickWithdrawBtn .wallet-quick-icon { background: linear-gradient(160deg, #60a5fa, #2563eb); }
  #macRight #macGiftBtn .wallet-quick-icon { background: linear-gradient(160deg, #a78bfa, #7c3aed); }
  #macRight #macLogoutBtn .wallet-quick-icon { background: linear-gradient(160deg, #fca5a5, #dc2626); }
  #macRight .wallet-quick-icon svg { color: #fff; width: 17px; height: 17px; }
  #macRight .wallet-quick-badge { top: -8px; right: -3px; font-size: 8px; padding: 2px 4px; }
}

.mobile-hamburger-btn { display: none; }
@media (max-width: 640px) {
  body.has-mobile-sidebar .topbar-inner { display: grid; grid-template-columns: auto 1fr auto; }
  body.has-mobile-sidebar .mobile-hamburger-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px; border: none;
    background: linear-gradient(135deg, var(--accent), var(--accent-2), var(--gold), var(--accent-2), var(--accent));
    background-size: 300% 300%;
    color: #fff; cursor: pointer; padding: 0; flex-shrink: 0;
    animation: hamburger-gradient-pulse 3s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    body.has-mobile-sidebar .mobile-hamburger-btn { animation: none; box-shadow: 0 4px 12px -2px var(--accent-glow); }
  }
  .mobile-hamburger-btn svg { width: 18px; height: 18px; }
  body.has-mobile-sidebar .brand { justify-self: center; }
}

.mobile-sidebar-overlay { display: none; }
.mobile-sidebar { display: none; }
@media (max-width: 640px) {
  .mobile-sidebar-overlay {
    display: block; position: fixed; inset: 0; background: rgba(10, 14, 20, 0.5);
    z-index: 60; opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
  }
  .mobile-sidebar-overlay.show { opacity: 1; pointer-events: auto; }
  .mobile-sidebar {
    display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0;
    width: 78%; max-width: 300px; background: var(--surface-solid); z-index: 61;
    transform: translateX(-100%); transition: transform 0.22s ease;
  }

  .mobile-sidebar.open { transform: translateX(0); box-shadow: 8px 0 24px rgba(0, 0, 0, 0.25); }
  .ms-head {
    display: flex; align-items: center; gap: 12px; padding: 20px 16px 16px;
    background: linear-gradient(160deg, var(--accent-2), var(--accent)); color: #fff; position: relative; flex-shrink: 0;
  }
  .ms-head .lvl-badge { width: 40px; height: 40px; font-size: 14px; flex-shrink: 0; }
  .ms-head .lvl-badge-img { width: 30px; height: 30px; }
  .ms-user-info { min-width: 0; }
  .ms-username { font-weight: 800; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ms-balance { font-size: 12.5px; opacity: 0.9; margin-top: 3px; display: flex; align-items: center; gap: 5px; }
  .ms-close-btn {
    position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.18); border: none; display: flex; align-items: center;
    justify-content: center; color: #fff; cursor: pointer; padding: 0; flex-shrink: 0;
  }
  .ms-close-btn svg { width: 14px; height: 14px; }
  .ms-body { display: flex; flex-direction: column; overflow-y: auto; flex: 1; padding: 8px; gap: 2px; }
  .ms-divider { height: 1px; background: var(--border); margin: 6px 8px; }
  .ms-body .notif-wrap { width: 100%; }
  .ms-body .notif-bell {
    width: 100%; height: auto; display: flex; align-items: center; gap: 12px;
    padding: 11px 12px; border-radius: var(--radius-sm); color: var(--text); justify-content: flex-start;
  }
  .ms-body .notif-bell:hover { background: var(--surface-2); }
  .ms-body .notif-bell svg { width: 18px; height: 18px; color: var(--gold); }
  .ms-body .notif-bell-label { display: inline; font-size: 14.5px; font-weight: 600; }
  .ms-body .notif-dot { position: static; margin-left: auto; }
  .ms-body .user-menu-item { font-size: 14.5px; padding: 11px 12px; }
  .ms-body .user-menu-item svg { color: var(--accent); }
  .ms-body #menuLogoutBtn { color: var(--lose); margin-top: auto; }
  .ms-body #menuLogoutBtn svg { color: var(--lose); }
}
.banner-slide-empty { display: flex; align-items: center; justify-content: center; overflow: hidden; }

.banner-balls { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.banner-balls .ball { position: absolute; animation: floatY 4.5s ease-in-out infinite; }
.banner-balls .ball:nth-child(1) { top: 14%; left: 8%; animation-delay: 0s; }
.banner-balls .ball:nth-child(2) { top: 65%; left: 14%; width: 30px; height: 30px; font-size: 12px; animation-delay: 1.1s; }
.banner-balls .ball:nth-child(3) { top: 22%; right: 10%; animation-delay: 0.6s; }
.banner-balls .ball:nth-child(4) { top: 68%; right: 16%; width: 34px; height: 34px; font-size: 14px; animation-delay: 1.8s; }

.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 800;
  margin: 8px 0 6px;
}
.section-title .ball { width: 28px; height: 28px; font-size: 12px; flex-shrink: 0; }
.section-subtitle { color: var(--text-dim); font-size: 14px; margin: 0 0 22px; }

.lobby-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 20px;
  margin-bottom: 40px;
}
@media (min-width: 641px) {
  .lobby-section {
    grid-template-columns: repeat(2, 1fr);
  }
  .lobby-section > *:nth-child(1) { grid-column: 1; grid-row: 1; }
  .lobby-section > *:nth-child(2) { grid-column: 1; grid-row: 2; }
  .lobby-section > *:nth-child(3) { grid-column: 2; grid-row: 1; }
  .lobby-section > *:nth-child(4) { grid-column: 2; grid-row: 2; }
}
.lobby-card {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, border-color 0.2s ease;
  animation: fadeSlideUp 0.45s ease both;
}
.lobby-card:hover { transform: translateY(-5px); border-color: var(--border-strong); }

.home-lobby-hero .hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-lobby-hero .hero-col { min-width: 0; }
.home-lobby-hero .balls-row { flex-wrap: wrap; justify-content: center; gap: 6px; }
.home-lobby-hero .ball { width: 25px; height: 25px; font-size: 11px; }
@media (max-width: 640px) {
  .home-lobby-hero .hero-col-5 { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .wrap { padding: 14px 10px 50px; }
  .lobby-section { gap: 8px 12px; margin-bottom: 26px; }
  .section-title { font-size: 18px; margin: 4px 0 4px; }
  .section-title .ball { width: 22px; height: 22px; font-size: 11px; }
  .section-subtitle { font-size: 12.5px; margin: 0 0 14px; }
  .ring-wrap { width: 96px; height: 96px; }
  .ring-time { font-size: 18px; }
  .ring-sub { font-size: 10px; }
  .hero-col { padding: 12px 8px; }
  .round-label { font-size: 10.5px; margin-bottom: 5px; }
  .round-value { font-size: 19px; }
}
.lobby-thumb {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: radial-gradient(circle at 30% 20%, rgba(233, 176, 7, 0.3), transparent 55%),
              linear-gradient(135deg, rgba(0, 96, 209, 0.3), rgba(47, 134, 255, 0.2));
}
.lobby-body { padding: 22px; }
.lobby-body h3 { margin: 0 0 8px; font-size: 17px; font-weight: 800; }
.lobby-body p { margin: 0 0 18px; color: var(--text-dim); font-size: 14px; line-height: 1.6; }
.lobby-meta { display: flex; gap: 20px; margin-bottom: 20px; }
.lobby-meta .m-label { font-size: 11px; color: var(--accent-2); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700; }
.lobby-meta .m-value { font-size: 15px; font-weight: 800; color: var(--accent); }
.lobby-body .btn-cta { width: 100%; }

.site-footer {
  margin-top: 16px;
  padding: 0 20px 40px;
}
.wrap:has(+ .site-footer) { padding-bottom: 8px; }
.footer-card {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.footer-banner {
  padding: 22px 20px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 0 0 50% 50% / 0 0 26px 26px;
}

.footer-banner-logo {
  display: flex;
  align-items: center;
  background: #ffffff;
  padding: 12px 26px;
  border-radius: 999px;
  box-shadow: 0 10px 28px -10px rgba(0, 30, 70, 0.45);
}
.footer-banner-logo .brand-mark { box-shadow: 0 0 20px rgba(233, 176, 7, 0.6); }
.footer-banner-logo .brand-logo-img { box-sizing: content-box; }

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 30px 36px 8px;
}
.footer-col { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.footer-col h4 { margin: 0 0 14px; }
.footer-col h4 span {
  display: inline-block;
  padding: 9px 18px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text);
  background: var(--surface-2-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.footer-col a,
.footer-link-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  text-decoration: none;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}
.footer-col a:hover,
.footer-link-btn:hover { color: var(--text); background: var(--surface-2); }
.footer-col span { color: var(--text-faint); }

.footer-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.footer-col .footer-link-icon { color: #ffffff; }
.footer-link-icon svg { width: 11px; height: 11px; }
.footer-link-emoji { font-size: 11px; line-height: 1; }

.info-modal-box { max-width: 560px; text-align: left; max-height: 82vh; display: flex; flex-direction: column; }
.info-modal-title { margin: 0 0 16px; padding-right: 28px; font-size: 20px; font-weight: 800; }
.info-modal-body { overflow-y: auto; padding-right: 4px; touch-action: pan-y; }
.info-modal-body h3 { font-size: 15px; font-weight: 700; margin: 18px 0 8px; color: var(--text); }
.info-modal-body h3:first-child { margin-top: 0; }
.info-modal-body p { font-size: 14px; line-height: 1.7; color: var(--text-dim); margin: 0 0 4px; }
.info-modal-body strong { color: var(--text); }

#fraudWarningModalOverlay { z-index: 300; padding: clamp(10px, 4vw, 20px); }
.fraud-shell { position: relative; width: 100%; max-width: 1080px; }
.fraud-close {
  position: absolute;
  top: clamp(-16px, -4vw, -18px);
  right: clamp(0px, 1vw, 4px);
  z-index: 5;
  width: clamp(26px, 8vw, 34px);
  height: clamp(26px, 8vw, 34px);
  border-radius: 50%;
  border: 3px solid #fff;
  background: linear-gradient(135deg, #ff7a45, #e8320a);
  color: #fff;
  font-size: clamp(14px, 4vw, 18px);
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  transition: filter 0.15s ease;
}
.fraud-close:hover { filter: brightness(1.08); }

.fraud-warning-modal-box {
  width: 1080px;
  max-width: 100%;
  height: 800px;
  max-height: 92vh;
  max-height: 92dvh;
  text-align: left;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #fff 0%, #fff8ec 100%);
  padding: 0 0 clamp(12px, 4vw, 22px);
}
.fraud-warning-inner { padding: clamp(12px, 5vw, 22px) clamp(8px, 4vw, 18px); overflow-y: auto; flex: 1; }
@media (min-width: 641px) {
  .fraud-warning-inner { overflow-y: visible; }
}
.fraud-warning-image { display: block; width: 100%; aspect-ratio: 1020 / 250; object-fit: contain; border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin: 0; background: transparent; }
.fraud-content-table { width: 100%; max-width: 1044px; min-width: 0; aspect-ratio: 1042 / 340; margin: 0 auto; border-collapse: separate; border-spacing: 0; }
.fraud-content-table td { border: 1px solid var(--gold); border-radius: 10px; padding: clamp(10px, 4vw, 18px) clamp(10px, 4vw, 20px); background: rgba(233, 176, 7, 0.05); white-space: normal; word-break: break-word; vertical-align: top; font-size: clamp(13px, 3.5vw, 15px); line-height: 1.6; }
.fraud-warning-footer { padding: clamp(8px, 3vw, 12px) clamp(10px, 4vw, 30px) 0; display: flex; justify-content: flex-end; flex-shrink: 0; }
.fraud-dismiss-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); cursor: pointer; user-select: none; }
.fraud-dismiss-check input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--gold-2); }
@media (max-width: 640px) {
  .fraud-warning-footer { padding: 12px 18px 0; }
  .fraud-warning-inner { display: flex; flex-direction: column; }
  .fraud-content-table { flex: 1; aspect-ratio: auto; min-height: 200px; }
}

.rm-shell { position: relative; width: 100%; max-width: 1250px; }
.rm-close {
  position: absolute;
  top: -18px;
  right: 4px;
  z-index: 5;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: linear-gradient(135deg, #ff7a45, #e8320a);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  transition: filter 0.15s ease;
}
.rm-close:hover { filter: brightness(1.08); }

.referral-modal-box {
  width: 1250px;
  max-width: 100%;
  height: 750px;
  max-height: 92vh;
  max-height: 92dvh;
  text-align: left;
  background: linear-gradient(180deg, #fff 0%, #fff8ec 100%);
  padding: 0 0 22px;
}
.rm-inner { padding: 0 22px; }
.referral-modal-box { scrollbar-width: none; }
.referral-modal-box::-webkit-scrollbar { display: none; }

.rm-code-card {
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(233, 176, 7, 0.1), rgba(198, 143, 0, 0.03));
  padding: 16px;
}
.rm-code-value {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #7a1010;
  padding: 9px 16px;
  background: #fff;
  border-radius: 8px;
  border: 1.5px dashed var(--gold-2);
}
.rm-btn-gold {
  padding: 9px 16px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #3a2400;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 6px 14px -6px rgba(198, 143, 0, 0.6);
  transition: transform 0.15s ease;
}
.rm-btn-gold:hover { transform: translateY(-1px); }

.rm-stat-card { text-align: center; padding: 14px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-solid); }
.rm-stat-num { font-size: 22px; font-weight: 900; color: #7a1010; }

.rm-code-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.rm-code-left { flex: 1 1 260px; }
.rm-code-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.rm-qr-box { flex: 0 0 auto; margin: 0 auto; text-align: center; }
.rm-qr-img {
  width: 96px;
  height: 96px;
  display: block;
  border: 2px solid var(--gold);
  border-radius: 8px;
  background: #fff;
  padding: 4px;
}
.rm-qr-caption { font-size: 11px; color: var(--text-dim); margin-top: 6px; max-width: 110px; }

.rm-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-solid);
  padding: 16px;
  margin-bottom: 16px;
}
.rm-section-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: #7a1010; margin: 0 0 12px; }

.rm-table { width: 100%; min-width: 0; border-collapse: collapse; font-size: 13px; line-height: 1.8; table-layout: fixed; border: 1px solid #000; }
.rm-table th { text-transform: none; }
.rm-table-downline { table-layout: auto; min-width: 560px; }
.rm-table-downline th, .rm-table-downline td { white-space: nowrap; }
@media (max-width: 480px) {
  .rm-table-downline { table-layout: auto; min-width: 0; border: none; }
  .rm-table-downline thead { display: none; }
  .rm-table-downline tbody, .rm-table-downline tr { display: block; }
  .rm-table-downline tr {
    border: 1px solid #000;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
  }
  .rm-table-downline tr:last-child { margin-bottom: 0; }
  .rm-table-downline td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    text-align: right;
    white-space: normal;
    border-right: none !important;
    border-bottom: 1px solid #eee;
    padding: 8px 10px;
    font-size: 12px;
  }
  .rm-table-downline td:last-child { border-bottom: none; }
  .rm-table-downline td::before {
    content: attr(data-label);
    font-weight: 700;
    color: #7a1010;
    text-align: left;
  }
  .rm-table-downline td[colspan] {
    display: block;
    text-align: center;
  }
  .rm-table-downline td[colspan]::before { content: none; }
}
.rm-table th {
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #3a2400;
  font-weight: 800;
  padding: 9px 12px;
  text-align: center;
  border-bottom: 1px solid #000;
}
.rm-table th:not(:last-child) { border-right: 1px solid #000; }
.rm-table td { padding: 9px 12px; text-align: center; border-bottom: 1px solid #000; color: var(--text); }
.rm-table td:not(:last-child) { border-right: 1px solid #000; }
.rm-table td:last-child { font-weight: 700; color: #7a1010; }
.rm-table tbody tr:nth-child(even) td { background: var(--surface-2-solid); }
.rm-table tbody tr:last-child td { border-bottom: none; }

.rm-table-kv td { white-space: normal; }
.rm-table-kv td:first-child { width: 66%; }
.rm-table-kv td:last-child { width: 34%; }
@media (max-width: 480px) {
  .rm-table-kv { font-size: 12px; }
  .rm-table-kv td:first-child { width: 62%; }
  .rm-table-kv td:last-child { width: 38%; }
}

@media (max-width: 640px) {
  .rm-inner { padding: 0 14px; }
  .rm-shell { width: 400px; max-width: 100%; height: 800px; max-height: 92vh; max-height: 92dvh; }
  .referral-modal-box { width: 396px; max-width: 100%; height: 780px; max-height: 92vh; max-height: 92dvh; }
  #giftModalBody { padding-left: 10px !important; padding-right: 10px !important; }

  .rm-code-card { padding: 12px; }
  .rm-section-title { margin-bottom: 8px; }
  .rm-code-row { gap: 10px; }
  .rm-code-left { flex: 1 1 170px; }
  .rm-code-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .rm-code-value { font-size: 15px; padding: 7px 10px; letter-spacing: 1.5px; text-align: center; }
  .rm-code-actions .rm-btn-gold { padding: 8px 10px; font-size: 12px; text-align: center; }
  .rm-qr-box { margin: 0; }
  .rm-qr-img { width: 76px; height: 76px; padding: 3px; }
  .rm-qr-caption { font-size: 9px; margin-top: 4px; max-width: 76px; }
}

.footer-desc { color: var(--text-dim); font-size: 13px; line-height: 1.7; margin: 0; max-width: 340px; }

.footer-bottom {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  text-align: center;
  color: var(--text-faint);
  font-size: 12px;
}

.footer-age-badge { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.footer-age-pill {
  display: inline-flex; align-items: center; justify-content: center;
  background: #888e99; color: #fff; font-weight: 900; font-size: 15px;
  padding: 3px 13px; border-radius: 999px; letter-spacing: 0.3px;
}
.footer-age-text {
  font-weight: 800; font-size: 11px; line-height: 1.2; letter-spacing: 0.3px;
  color: #111111; text-transform: uppercase; text-align: left;
}

@media (max-width: 640px) {
  .footer-banner { padding: 18px 20px 26px; }
  .footer-inner { grid-template-columns: 1fr; gap: 0; padding: 24px 20px 8px; }
  .footer-col { padding: 16px 0; }
  .footer-col:first-child { padding-top: 0; }
  .footer-col:not(:first-child) { border-top: 1px solid var(--border); }
  .footer-bottom { padding: 14px 16px; flex-direction: column; gap: 10px; }

  .footer-col h4 { text-align: center; }
  #footerColumnsWrap .footer-col:nth-child(1) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }
  #footerColumnsWrap .footer-col:nth-child(2),
  #footerColumnsWrap .footer-col:nth-child(3) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 8px;
  }
  #footerColumnsWrap .footer-col:nth-child(1) h4,
  #footerColumnsWrap .footer-col:nth-child(2) h4,
  #footerColumnsWrap .footer-col:nth-child(3) h4 {
    grid-column: 1 / -1;
  }
  #footerColumnsWrap .footer-col a,
  #footerColumnsWrap .footer-col .footer-link-btn {
    margin: 0;
    padding: 6px 4px;
    font-size: 11.5px;
    line-height: 1.25;
  }

  #footerColumnsWrap .footer-col:nth-child(1) a,
  #footerColumnsWrap .footer-col:nth-child(1) .footer-link-btn {
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    text-align: center;
  }

  #footerColumnsWrap .footer-col:nth-child(2) a,
  #footerColumnsWrap .footer-col:nth-child(3) a,
  #footerColumnsWrap .footer-col:nth-child(3) .footer-link-btn {
    flex-direction: row;
    justify-content: flex-start;
    gap: 6px;
    text-align: left;
  }
}

.admin-shell { display: flex; min-height: 100vh; align-items: stretch; }

.admin-sidebar {
  width: 232px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-solid);
  border-right: 1px solid var(--border);
  padding: 20px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.admin-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 28px; }
.admin-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.15s, color 0.15s;
}
.admin-nav a:hover { background: var(--surface-2); color: var(--text); }
.admin-nav a.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 6px 18px -6px var(--accent-glow);
}

.admin-nav-group { display: flex; flex-direction: column; }
.admin-nav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.admin-nav-group-toggle:hover { background: var(--surface-2); color: var(--text); }
.admin-nav-group.open > .admin-nav-group-toggle { color: var(--text); }
.admin-nav-group-chevron { flex-shrink: 0; transition: transform 0.2s; }
.admin-nav-group.open .admin-nav-group-chevron { transform: rotate(180deg); }
.admin-nav-group-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 0;
  overflow: hidden;
  padding-left: 14px;
  transition: max-height 0.2s ease;
}
.admin-nav-group.open .admin-nav-group-items { max-height: 220px; margin-top: 4px; }
.admin-nav-group-items a { padding: 8px 14px; font-size: 13px; }

.admin-nav-divider { height: 1px; background: var(--border); margin: 10px 6px; }

.admin-sidebar-footer { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--border); }
.admin-sidebar-footer .who { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 10px; }
.admin-sidebar-footer button { width: 100%; padding: 9px 0; }

.lang-switcher-wrap { position: relative; }
.lang-switcher-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.lang-switcher-trigger:hover { background: var(--surface-2-solid); }
.lang-switcher-trigger .lang-switcher-name { flex: 1; text-align: left; }
.lang-switcher-flag {
  display: inline-flex;
  width: 20px;
  height: 14px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}
.lang-switcher-flag svg { width: 100%; height: 100%; display: block; }
.lang-switcher-trigger .chevron { color: var(--text-faint); transition: transform 0.15s ease; flex-shrink: 0; }
.lang-switcher-wrap.open .chevron { transform: rotate(180deg); }
.lang-switcher-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 100%;
  min-width: 180px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 6px;
  display: none;
  z-index: 60;
}
.lang-switcher-wrap.open .lang-switcher-dropdown { display: block; }
.lang-switcher-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.lang-switcher-item:hover { background: var(--surface-2); }
.lang-switcher-item.active { background: var(--accent); color: #fff; }
#sidebarLangSwitcher .lang-switcher-trigger { width: 100%; padding: 9px 10px; margin-bottom: 12px; }

.login-lang-switcher { width: 170px; margin: 20px auto 0; }
.login-lang-switcher .lang-switcher-dropdown { top: calc(100% + 8px); bottom: auto; }

.admin-main { flex: 1; min-width: 0; }
.admin-content { width: 100%; padding: 32px 28px 60px; }
.admin-page-title { font-size: 22px; font-weight: 800; margin: 0 0 24px; }

.deposit-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.recent-activity { display: flex; flex-direction: column; gap: 10px; }
.recent-activity-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 13px;
}
.recent-activity-row .who { color: var(--text-dim); }

@media (max-width: 900px) {
  .topbar-inner { flex-wrap: wrap; }
  .user-info { flex-wrap: wrap; }
  .topbar-right { display: contents; }
  .topbar-right .user-info { order: 2; flex-basis: 100%; justify-content: flex-end; }
  .topbar-right .user-info .notif-wrap { order: 1; }
  .topbar-right .user-info .balance-pill { order: 2; }
  .topbar-right .user-info .user-menu-wrap { order: 3; }
}

@media (max-width: 640px) {
  /* Input chữ dưới 16px khiến Safari/iOS tự động zoom cả trang khi bấm vào ô nhập (bàn phím hiện
     lên, trang "phình to" ra), kéo theo tràn viền/cuộn ngang cho tới khi rời focus — đúng lỗi ô
     "Số điểm cược" bị báo. Ép về đúng 16px chỉ trên Mobile, không đụng cỡ chữ Desktop. */
  input[type="text"], input[type="password"], input[type="number"], input[type="tel"],
  input[type="email"], input[type="date"], select {
    font-size: 16px;
  }

  .bet-row { flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: 6px; }
  .bet-row .field { flex: 1 1 60px; min-width: 56px; margin-bottom: 0; }
  .bet-row .field input { height: 33px; padding: 4px 8px; }
  .bet-row-btn-wrap { flex: 0 0 auto; }
  .bet-row-btn-wrap > div { gap: 5px !important; }
  /* Lotobet 18/27 dùng #addCartBtn thay cho #playBtn — chưa có mobile override riêng nên cao
     tới 42px (padding mặc định của button), kéo theo #guide-btn kế bên bị stretch giãn theo
     (align-items mặc định là stretch trong div flex bọc 2 nút). Ép về 33px cho khớp ô input. */
  .bet-row-btn-wrap #addCartBtn { height: 33px; padding: 0 12px; font-size: 12px; display: flex; align-items: center; justify-content: center; }
  .bet-row-btn-wrap #betAllBtn { height: 33px; padding: 0 12px; font-size: 12px; display: flex; align-items: center; justify-content: center; }
  .bet-row button { width: auto; }
  .bet-row #playBtn { padding: 9px 9px; font-size: 11.5px; min-width: 91px; }
  .bet-row .guide-btn { padding: 0 8px !important; font-size: 11px; }
  /* Ngũ Long dùng chung .bet-row/.guide-btn cho hàng "Xác nhận đặt cược", không phải hàng nhập điểm
     như Lottery US — rule ở trên làm nút quá nhỏ, khiến badge "!" đè lên chữ "Hướng dẫn". Trả lại
     kích thước đủ rộng, cao khớp #playBtn (33px) để badge không chồng lên chữ. */
  .confirm-row .guide-btn { padding: 0 14px !important; font-size: 12.5px; height: 33px; display: flex; align-items: center; justify-content: center; }

  .confirm-row { flex-direction: row; align-items: stretch; }
  .confirm-row button { width: auto; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .hero-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .hero-col-wide { grid-column: 1 / -1; }

  .wrap { padding: 20px 14px 60px; }
  .card { padding: 18px; }
  .number-grid { gap: 5px; }

  #pickModeTabs { flex-wrap: nowrap !important; gap: 6px; }
  /* min-width:0 bắt buộc phải có khi dùng flex:1 1 0 — thiếu dòng này Chrome/Android tự lách qua
     được (co vẫn vừa) nhưng Safari/iPhone tuân theo đúng chuẩn CSS "automatic minimum size", không
     chịu co nhỏ hơn bề rộng nội dung, gây tràn viền/cuộn ngang CHỈ trên iPhone. */
  #pickModeTabs .method-tab { flex: 1 1 0; min-width: 0; padding: 8px 4px; gap: 2px; font-size: 11px; white-space: normal; }

  #roadTabs { flex-wrap: nowrap !important; gap: 4px; }
  #roadTabs .method-tab { flex: 1 1 0; min-width: 0; padding: 7px 2px; font-size: 10px; white-space: normal; line-height: 1.25; }

  #betTabs { flex-wrap: nowrap !important; gap: 4px; }
  #betTabs .method-tab { flex: 1 1 0; min-width: 0; padding: 7px 2px; font-size: 10px; white-space: normal; line-height: 1.25; }

  #roadDonThucSubTabs { flex-wrap: nowrap !important; gap: 3px; }
  #roadDonThucSubTabs .method-tab { flex: 1 1 0; min-width: 0; padding: 6px 2px; font-size: 10px; white-space: normal; line-height: 1.2; }

  /* Mega Power / Super Power Ball: 4 nút Chọn nhanh/Xoá chọn/Thêm vào giỏ/Hướng dẫn đang tràn
     ra ngoài khung ở màn hình nhỏ (dùng width:auto cố định + không co) — cho phép xuống dòng
     thành 2x2 và co giãn đều theo bề rộng thực tế của từng loại điện thoại. */
  .pick6-actions { flex-wrap: nowrap !important; gap: 4px !important; }
  .pick6-actions button { flex: 1 1 0 !important; min-width: 0 !important; padding: 6px 2px !important; font-size: 10.5px !important; white-space: normal !important; line-height: 1.2; }

  .topbar-inner { padding: 10px 14px; gap: 8px 10px; flex-wrap: wrap; }
  .brand { font-size: 16px; gap: 8px; }
  .brand-mark { width: 24px; height: 24px; }
  .brand-logo-img { max-height: 40px; max-width: 140px; }
  .live-clock { padding: 6px 10px; font-size: 11px; gap: 5px; order: 1; }

  .clock-weekday { display: none; }
  .user-info, .topbar-right { gap: 8px; }
  .user-info { flex-wrap: wrap; }
  .topbar-right { display: contents; }
  .topbar-right .user-info { order: 2; flex-basis: 100%; justify-content: flex-end; }
  .topbar-right .user-info .notif-wrap { order: 1; }
  .topbar-right .user-info .balance-pill { order: 2; }
  .topbar-right .user-info .user-menu-wrap { order: 3; }

  .topbar-inner > .user-info { display: contents; }

  .topbar-inner > .user-info > .live-clock { display: none; }

  .user-identity-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
    order: 2;
  }
  .user-identity-row .balance-pill { order: 1; flex-shrink: 0; font-size: 11px; padding: 5px 8px 5px 6px; gap: 6px; }
  .user-identity-row .balance-pill .coin-icon { width: 12px; height: 12px; }
  .user-identity-row .notif-wrap { order: 2; flex-shrink: 0; }
  .user-identity-row .vip-pill { order: 3; flex-shrink: 0; font-size: 10px; padding: 4px 7px; gap: 3px; }

  .user-identity-row .username-wrap {
    order: 4;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12.5px;
  }
  .balance-pill { font-size: 12px; padding: 6px 10px 6px 8px; }
  button.btn-cta, button.btn-outline, a.btn-cta, a.btn-outline { padding: 8px 14px; font-size: 13px; }
  .user-menu-trigger { font-size: 13px; padding: 5px 6px; gap: 6px; }
  .user-menu-trigger .user-menu-icon { width: 24px; height: 24px; }
  .hello-prefix { display: none; }
  .menu-logout-item { display: flex; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 14px; }
  .topbar-logout-btn { display: none; }

  .user-menu-dropdown {
    position: fixed;
    top: 64px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    max-height: 70vh;
  }
}

@media (max-width: 380px) {
  .topbar-inner { padding: 8px 10px; gap: 6px 8px; }
  .brand-logo-img { max-height: 34px; max-width: 88px; }
  .live-clock { padding: 5px 8px; font-size: 9.5px; gap: 4px; }
}

.admin-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
}
.admin-nav-toggle:hover { background: var(--surface-2-solid); }

@media (max-width: 860px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar {
    width: 100%;
    height: auto;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 14px;
    overflow: visible;
  }

  .admin-nav-toggle { display: flex; order: 1; position: relative; z-index: 3; }
  .admin-sidebar .brand { order: 2; flex-shrink: 0; position: relative; z-index: 3; }
  .admin-sidebar > #sidebarLangSwitcher {
    order: 3;
    margin-left: auto;
    flex-shrink: 0;
    position: relative;
    z-index: 3;
  }
  #sidebarLangSwitcher .lang-switcher-trigger { width: auto; margin-bottom: 0; padding: 7px 8px; gap: 4px; }
  #sidebarLangSwitcher .lang-switcher-trigger .lang-switcher-name { display: none; }
  #sidebarLangSwitcher .lang-switcher-trigger .chevron { display: none; }
  #sidebarLangSwitcher .lang-switcher-dropdown { left: auto; right: 0; bottom: auto; top: calc(100% + 8px); width: 190px; }

  .admin-sidebar {
    position: relative;
    z-index: 90;
    background: var(--surface-solid);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .admin-nav {
    position: fixed;
    top: 58px;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 260px;
    max-width: 78vw;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 10px;
    background: var(--surface-solid);
    border: none;
    border-right: 1px solid var(--border);
    border-radius: 0 var(--radius) var(--radius) 0;
    box-shadow: 14px 0 30px -16px rgba(17, 17, 17, 0.3);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  .admin-sidebar.nav-open .admin-nav { transform: translateX(0); }
  .admin-sidebar.nav-open::before {
    content: '';
    position: fixed;
    top: 58px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: rgba(17, 17, 17, 0.4);
  }
  .admin-nav .admin-sidebar-footer {
    padding: 10px 6px 4px;
    margin-top: 6px;
    border-top: 1px solid var(--border);
  }
  .admin-nav .admin-sidebar-footer .who { font-size: 13px; margin-bottom: 10px; padding: 0 8px; }
  .admin-nav .admin-sidebar-footer button { width: 100%; }
  .admin-nav a { padding: 10px 14px; font-size: 14px; white-space: nowrap; flex-shrink: 0; }
  .admin-nav-divider { height: 1px; width: auto; margin: 6px 4px; flex-shrink: 0; }
  .admin-content { padding: 20px 14px 50px; }
  .deposit-settings-grid { grid-template-columns: 1fr; }

  .tabs { flex-wrap: nowrap; }
  .tab-btn {
    flex: 1 1 0;
    white-space: normal;
    text-align: center;
    padding: 8px 6px;
    line-height: 1.25;
  }

  .cashback-tier-field input[type="number"] { width: 88px; }
}

.float-menu {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 10px;
  background: var(--surface-solid);
  border: 2px solid rgba(0, 96, 209, 0.3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(0, 96, 209, 0.1);
  transition: padding 0.3s ease;
}

.float-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 600px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}
.float-menu.collapsed { padding-top: 10px; padding-bottom: 10px; }
.float-menu.collapsed .float-items {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.float-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 68px;
  padding: 10px 6px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.float-item:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--text); }

.float-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
}
.float-icon svg { width: 17px; height: 17px; }

.float-toggle {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 14px;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, color 0.15s ease;
}
.float-toggle:hover { color: var(--text); }
.float-menu.collapsed .float-toggle { transform: rotate(180deg); }

.float-ball-outer {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.15), 0 3px 10px rgba(0, 0, 0, 0.35);
}
.float-home-icon { position: relative; z-index: 2; width: 18px; height: 18px; color: #fff; }
.float-orbit {
  position: absolute;
  inset: -4px;
  animation: floatOrbitSpin 3s linear infinite;
}
.float-orbit-ball {
  position: absolute;
  top: -3px;
  left: 50%;
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 25%, #fff, var(--gold) 45%, var(--gold-2) 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  color: #4a2e00;
  font-weight: 800;
  font-size: 8px;
  animation: floatOrbitCounterSpin 3s linear infinite;
}
@keyframes floatOrbitSpin { to { transform: rotate(360deg); } }
@keyframes floatOrbitCounterSpin { to { transform: rotate(-360deg); } }

.float-item-center { display: none; }

@media (max-width: 640px) {
  body { padding-bottom: 104px; }
  .float-menu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    transform: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: none;
    margin: 0;
    gap: 8px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: none;
    z-index: 45;
  }
  .float-toggle { display: none; }
  .float-items {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    max-height: none;
    overflow: visible;
    opacity: 1;
    pointer-events: auto;
  }
  .float-item { flex: 1 1 0; width: auto; min-width: 0; padding: 8px 2px; font-size: 10px; }
  .float-label { white-space: normal; line-height: 1.2; }
  .float-icon { width: 28px; height: 28px; margin: 0 auto; }
  .float-icon svg { width: 14px; height: 14px; }

  .float-item-center {
    display: flex;
    position: relative;
  }
  .float-item-center .float-ball-outer {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 54px;
    height: 54px;
    border: 3px solid var(--surface-solid);
    z-index: 2;
  }
  .float-item-center .float-home-icon { width: 24px; height: 24px; }
  .float-item-center .float-orbit { inset: -5px; }
  .float-item-center .float-orbit-ball { width: 17px; height: 17px; margin-left: -8.5px; top: -4px; font-size: 10px; }
  .float-item-center .float-label {
    margin-top: 32px;
    font-weight: 800;
    color: var(--accent);
  }
}

.outcome-group-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 18px 0 10px;
}
.outcome-group-title:first-child { margin-top: 0; }

.bet-tabs { margin-bottom: 14px; }

.bet-tab-panel { margin-bottom: 6px; }

.bet-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
.bet-table th:nth-child(1) { width: 27%; }
.bet-table th:nth-child(2) { width: 15%; }
.bet-table th:nth-child(3) { width: 30%; }
.bet-table th:nth-child(4) { width: 28%; }
.bet-table th {
  text-align: left;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  white-space: normal;
}
.bet-table td {
  padding: 6px 6px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  overflow: hidden;
  white-space: normal;
}
.bet-table tbody tr:last-child td { border-bottom: none; }
.bet-row-item { transition: background-color 0.12s; }
.bet-row-item.active { background: rgba(0, 96, 209, 0.06); }
.bet-name { font-weight: 700; color: var(--text); font-size: 12.5px; line-height: 1.25; }
.bet-cap-hint { font-weight: 400; font-size: 10px; color: var(--text-dim); margin-top: 2px; line-height: 1.2; }
.bet-mult { font-size: 11px; font-weight: 700; color: var(--gold-2); white-space: nowrap; }
input.bet-stake-input {

  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 5px 6px;
  font-size: 13px;
  border-radius: 10px;
  -moz-appearance: textfield;
}
input.bet-stake-input::-webkit-outer-spin-button,
input.bet-stake-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.bet-quick { display: flex; flex-wrap: wrap; gap: 3px; }
.bet-quick button {
  flex: 1 1 auto;
  min-width: 0;
  padding: 3px 4px;
  font-size: 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
}
.bet-quick button:hover { border-color: var(--accent); color: var(--accent); }
.bet-quick button:disabled { opacity: 0.4; cursor: not-allowed; }
.bet-quick button:disabled:hover { border-color: var(--border); color: var(--text-dim); }

.outcome-total-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 0;
  padding: 12px 16px;
  background: var(--surface-2);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.outcome-total-bar .lbl { color: var(--text-dim); font-size: 13px; }
.outcome-total-bar .val { font-weight: 800; font-size: 17px; color: var(--accent); }

.guide-btn { position: relative; overflow: visible; }
.guide-alert-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--lose);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--bg-1);
  animation: guide-alert-pulse 1.6s ease-in-out infinite;
}
@keyframes guide-alert-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
@keyframes hamburger-gradient-pulse {
  0% { background-position: 0% 50%; box-shadow: 0 4px 12px -2px var(--accent-glow); }
  50% { background-position: 100% 50%; box-shadow: 0 4px 16px 0 rgba(233, 176, 7, 0.55); }
  100% { background-position: 0% 50%; box-shadow: 0 4px 12px -2px var(--accent-glow); }
}
.guide-modal-body h3 { font-size: 15px; font-weight: 700; margin: 18px 0 8px; color: var(--text); }
.guide-modal-body h3:first-child { margin-top: 0; }
.guide-modal-body p { margin: 0 0 12px; line-height: 1.5; font-size: 13.5px; color: var(--text); }
.guide-modal-body .table-wrap { margin: 0 0 12px; }
.guide-modal-body .guide-table td { font-size: 12.5px; }
.guide-modal-body .guide-table th { padding-left: 6px; padding-right: 6px; }
.guide-modal-body .guide-example { color: var(--text-dim); font-size: 13px; }

.donthuc-picker { display: flex; flex-direction: column; gap: 8px; }
.donthuc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.donthuc-row-label { width: 56px; flex-shrink: 0; font-weight: 700; font-size: 13px; color: var(--text); }
.donthuc-numbers { display: flex; gap: 5px; flex-wrap: wrap; }
.donthuc-num {
  width: 28px;
  height: 28px;
  min-width: 0;
  padding: 0;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.donthuc-num:hover { border-color: var(--accent); }
.donthuc-num.active, .donthuc-num.implied { background: var(--accent); border-color: var(--accent); color: #fff; }
.donthuc-quick { display: flex; gap: 5px; flex-wrap: wrap; margin-left: auto; }
.donthuc-tag {
  padding: 5px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.donthuc-tag:hover { border-color: var(--accent); color: var(--accent); }
.donthuc-tag.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.donthuc-row.active { border-color: var(--accent); background: rgba(0, 96, 209, 0.04); }
.donthuc-stake {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-basis: 100%;
  padding-top: 8px;
  margin-top: 2px;
  border-top: 1px dashed var(--border);
}
.donthuc-stake-label { font-size: 12px; color: var(--text-dim); flex-shrink: 0; }
input.donthuc-stake-input {

  width: 90px;
  min-width: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 5px 8px;
  font-size: 13px;
  border-radius: 10px;
  -moz-appearance: textfield;
}
.donthuc-stake-input::-webkit-outer-spin-button, .donthuc-stake-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.donthuc-subtotal { font-size: 12.5px; font-weight: 700; color: var(--accent); }

@media (max-width: 640px) {
  .donthuc-row { padding: 8px 10px; gap: 8px; }
  .donthuc-row-label { width: 100%; }
  .donthuc-numbers { flex-basis: 100%; gap: 3px; flex-wrap: nowrap; }
  .donthuc-num { width: auto; height: 24px; flex: 1 1 0; min-width: 0; font-size: 10px; }
  .donthuc-quick { margin-left: 0; width: 100%; }
  .donthuc-stake { flex-wrap: wrap; gap: 6px; }
  input.donthuc-stake-input { width: 80px; }
  .donthuc-tag { padding: 4px 9px; font-size: 10.5px; flex: 1 1 auto; text-align: center; }
}

@media (max-width: 640px) {
  .bet-table { font-size: 11px; }
  .bet-table th, .bet-table td { padding: 4px 3px; }
  .bet-name { font-size: 11px; }
  .bet-cap-hint { font-size: 9px; }
  input.bet-stake-input { padding: 4px 4px; font-size: 11px; }
  .bet-quick button { padding: 2px 3px; font-size: 9px; }
}

.road-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.road-section { min-width: 0; }
.road-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.road-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 11px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.road-legend span { display: inline-flex; align-items: center; gap: 4px; color: var(--text-dim); }
.road-legend .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.road-grid {
  position: relative;
  height: 120px;
  background-color: var(--surface-2);
  overflow: hidden;
  border-right: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}
.road-gridlines { position: absolute; inset: 0; pointer-events: none; }
.road-gridline-v { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border-strong); }
.road-gridline-h { position: absolute; left: 0; right: 0; height: 1px; background: var(--border-strong); }
.road-cells {
  position: relative;
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: repeat(6, 20px);
  gap: 0;
  height: 100%;
}
.road-cell {
  width: 100%;
  height: 100%;
  min-width: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.road-cell.big { background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #4a2e00; }
.road-cell.small { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.road-cell.even { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.road-cell.odd { background: linear-gradient(135deg, #e0524d, #b83a36); }
.road-cell.dragon { background: linear-gradient(135deg, #e0524d, #b83a36); }
.road-cell.tiger { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.road-cell.tie { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.road-cell.tai { background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #4a2e00; }
.road-cell.xiu { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.road-cell.chan { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.road-cell.le { background: linear-gradient(135deg, #e0524d, #b83a36); }
.road-cell.five_kind { background: linear-gradient(135deg, #fbbf24, #d97706); color: #4a2e00; }
.road-cell.four_kind { background: linear-gradient(135deg, #a855f7, #7e22ce); }
.road-cell.straight { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.road-cell.full_house { background: linear-gradient(135deg, #ec4899, #be185d); }
.road-cell.three_kind { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.road-cell.two_pair { background: linear-gradient(135deg, #f97316, #c2410c); }
.road-cell.one_pair { background: linear-gradient(135deg, #22c55e, #15803d); }
.road-cell.high_card { background: linear-gradient(135deg, #94a3b8, #64748b); }
.road-empty { color: var(--text-dim); font-size: 13px; padding: 6px 2px; }
.road-tabs { margin-bottom: 14px; }
.road-donthuc-subtabs { margin-bottom: 16px; }

@media (max-width: 640px) {
  .road-columns { grid-template-columns: 1fr; gap: 16px; }
  .road-section-title { flex-direction: column; align-items: flex-start; gap: 4px; }
  .road-grid { height: 84px; }
  .road-cells { grid-template-rows: repeat(6, 14px); gap: 0; }
  .road-cell { font-size: 6px; border-width: 1px; }
}

.vip-hero-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-2); margin-bottom: 6px;
}
.vip-hero-title { font-size: 22px; font-weight: 800; margin-bottom: 18px; color: var(--text); }
.vip-hero-title .name { color: var(--gold-2); }

.tier-row { display: grid; grid-template-columns: 450px 1fr; gap: 20px; align-items: stretch; animation: vip-rise 0.5s ease both; }
@media (max-width: 780px) { .tier-row { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .tier-card { padding: 14px 16px; gap: 8px; }
  .tier-badge-wrap { width: 84px; height: 84px; }
  .tier-badge-wrap svg#badgeSeal { width: 84px; height: 84px; }
  .badge-beam { width: 66px; top: -30px; bottom: -30px; }
  .badge-number-overlay { font-size: 20px; -webkit-text-stroke: 2px #0a2e52; }
  .badge-number-overlay-img { width: 62px; height: 62px; }
  .tier-nav-btn { width: 22px; height: 22px; top: 6px; }
  .tier-nav-btn svg { width: 12px; height: 12px; }
  .tier-nav-prev { left: 6px; }
  .tier-nav-next { right: 6px; }
  .tier-current-label { font-size: 9.5px; }
  .tier-level-label { font-size: 17px; }
  .tier-req { font-size: 10.5px; gap: 6px; }
  .req-diamond { width: 14px; height: 14px; border-radius: 4px; }
  .req-diamond svg { width: 8px; height: 8px; }
}
@keyframes vip-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.tier-card {
  position: relative; overflow: hidden; min-width: 0;
  width: 100%; max-width: 450px; aspect-ratio: 450 / 215;
  border-radius: 10px; padding: 20px 24px;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px;
  background-size: cover; background-position: center;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.4) 0 2px, transparent 2px 15px),
    linear-gradient(135deg, #caa059 0%, #f6e6bd 22%, #fdf7e6 42%, #f0d99a 60%, #d9ad57 82%, #c69a4d 100%);
  box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(255,255,255,0.5);
}
.tier-sheen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.tier-sheen::after {
  content: ''; position: absolute; top: -60%; left: -55%; width: 30%; height: 220%;
  background: linear-gradient(75deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: rotate(12deg);
  animation: vip-sheen-sweep 1.6s 0.5s cubic-bezier(.4,0,.2,1) 1;
}
@keyframes vip-sheen-sweep { from { left: -55%; } to { left: 150%; } }
@media (prefers-reduced-motion: reduce) { .tier-sheen::after { animation: none; opacity: 0; } .tier-row { animation: none; } }

.tier-left { min-width: 0; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 9px; }
.tier-current-label {
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: #6b4a10; opacity: 0.85; margin-bottom: -3px;
}
.tier-level-label {
  font-size: 22px; font-weight: 800; line-height: 1; color: #fff; margin-bottom: 2px;
  text-shadow: 0 2px 0 rgba(150,104,20,0.4), 0 1px 0 rgba(255,255,255,0.7), 0 3px 8px rgba(120,80,10,0.25);
}
.tier-req { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: #5b4008; }
.tier-req b { color: #3d2a03; }
.req-diamond {
  flex-shrink: 0; width: 17px; height: 17px; border-radius: 5px; transform: rotate(45deg);
  background: linear-gradient(160deg, #ffb648, #e8811a); box-shadow: 0 2px 4px rgba(150,90,10,0.35);
  display: flex; align-items: center; justify-content: center;
}
.req-diamond svg { transform: rotate(-45deg); width: 10px; height: 10px; }

.tier-nav-btn {
  position: absolute; top: 10px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.85);
  color: #6b4a10; cursor: pointer; box-shadow: 0 2px 5px rgba(120,80,10,0.2);
  transition: background 0.15s ease, transform 0.1s ease;
}
.tier-nav-btn svg { width: 14px; height: 14px; }
.tier-nav-btn:hover:not(:disabled) { background: rgba(255,255,255,0.9); }
.tier-nav-btn:active:not(:disabled) { transform: scale(0.9); }
.tier-nav-btn:disabled { opacity: 0.3; cursor: default; }
.tier-nav-prev { left: 10px; }
.tier-nav-next { right: 10px; }

.tier-badge-wrap { position: relative; width: 132px; height: 132px; flex-shrink: 0; z-index: 1; }
.badge-beam {
  position: absolute; left: 50%; top: -50px; bottom: -50px; width: 104px; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent 0%, rgba(255,253,242,0.75) 22%, rgba(255,253,242,0.75) 78%, transparent 100%);
}
.badge-number-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Segoe UI', system-ui, sans-serif; font-weight: 900; font-size: 30px;
  color: #fff; -webkit-text-stroke: 3px #0a2e52; paint-order: stroke fill;
  text-shadow: 0 1px 8px rgba(10,46,82,0.35);
}
.badge-number-overlay-img { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(10,46,82,0.35)); }

.upgrade-card {
  min-width: 0;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px 22px; display: flex; flex-direction: column; justify-content: center; gap: 16px;
}
.upgrade-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: nowrap; }
.upgrade-head h3 { font-size: 16px; font-weight: 800; margin: 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.upgrade-head h3 .lvl { color: var(--gold-2); }
.upgrade-jump-btn {
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--text); background: var(--surface-2-solid);
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; white-space: nowrap; cursor: pointer; flex-shrink: 0;
}
@media (max-width: 360px) {
  .upgrade-head h3 { font-size: 14px; }
  .upgrade-jump-btn { font-size: 11px; padding: 6px 10px; }
}
.upgrade-jump-btn:hover { border-color: var(--border-strong); }
.upgrade-empty { font-size: 13.5px; color: var(--text-dim); text-align: center; padding: 10px 0; }
.vip-detail-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text); background: var(--surface-2-solid);
  border: 1px solid var(--border); border-radius: 999px; padding: 7px 16px; margin-bottom: 16px; cursor: pointer;
}
.vip-detail-back-btn:hover { border-color: var(--border-strong); }

.upgrade-metric-label { font-size: 12.5px; font-weight: 700; color: var(--text-dim); margin-bottom: 5px; }
.upgrade-metric-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: 13.5px; margin-bottom: 7px;
}
.upgrade-progress { font-weight: 700; }
.upgrade-progress .cur.lose { color: var(--lose); }
.upgrade-progress .cur.ok { color: var(--gold-2); }
.upgrade-progress .req { color: var(--text-faint); font-weight: 500; }
.upgrade-missing { font-size: 12.5px; color: var(--text-dim); }
.upgrade-missing b.lose { color: var(--lose); }
.upgrade-missing b.ok { color: var(--win); }
.upgrade-bar-track {
  height: 9px; border-radius: 999px; background: var(--surface-2-solid); border: 1px solid var(--border); overflow: hidden;
}
.upgrade-bar-fill { height: 100%; border-radius: 999px; }
.upgrade-bar-fill.lose { background: linear-gradient(90deg, #f7b4c2, var(--lose)); }
.upgrade-bar-fill.ok { background: linear-gradient(90deg, var(--gold), var(--gold-2)); }

.pill-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
@media (max-width: 560px) { .pill-btn-row { grid-template-columns: 1fr; } }
.vip-pill-btn {
  display: flex; align-items: center; gap: 0; height: 52px; border-radius: 999px;
  background: linear-gradient(180deg, #fefbe4, #fbefbb);
  border: 1.5px solid #e3b657; box-shadow: 0 3px 0 rgba(199, 148, 47, 0.35), 0 6px 14px rgba(199, 148, 47, 0.18);
  cursor: pointer; font-family: inherit; padding: 0; overflow: hidden; text-align: left;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.vip-pill-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 rgba(199,148,47,0.35), 0 9px 16px rgba(199,148,47,0.22); }
.vip-pill-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(199,148,47,0.35); }
.pill-icon-wrap {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; margin: -1.5px;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #eaa93c 65%, #c9812a 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 -3px 6px rgba(160,100,10,0.35), inset 0 2px 3px rgba(255,255,255,0.6);
}
.pill-icon-wrap svg { width: 26px; height: 26px; }
.pill-btn-label {
  flex: 1; min-width: 0; padding: 0 10px 0 14px; font-size: 15px; font-weight: 800; color: #7a4a12;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pill-btn-arrow { flex-shrink: 0; color: #a97a2e; margin-right: 16px; }

.threshold-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(15, 12, 8, 0.55); padding: 24px; align-items: center; justify-content: center;
}
.threshold-modal-overlay.show { display: flex; }
.threshold-modal {
  background: var(--surface-solid); border-radius: 10px; width: 100%; max-width: 860px; max-height: 85vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,0.4);
  /* KHÔNG dùng animation kèm transform (vip-modal-rise cũ) — animation-fill-mode:both giữ nguyên
     transform ở keyframe cuối (translateY(0) scale(1)) SAU KHI chạy xong, y hệt lỗi transform "nghỉ"
     đã sửa ở .modal-box (xem line ~879) — chỉ đổi tên khác (animation thay vì transition) nên lần
     trước tìm theo ".show" chưa bắt được. Đổi hẳn sang opacity-only. */
  animation: vip-modal-fade-in 0.25s ease both;
}
@keyframes vip-modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .threshold-modal { animation: none; } }
.threshold-modal-head { position: relative; padding: 22px 50px 16px; text-align: center; flex-shrink: 0; }
.threshold-modal-title { font-size: 21px; font-weight: 800; color: #9a6a1c; }
.threshold-modal-close {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-2-solid); border: none; color: var(--text-dim); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.threshold-modal-close:hover { color: var(--text); }
.threshold-modal-body { overflow-y: auto; padding: 0 22px 22px; overscroll-behavior: contain; touch-action: pan-y; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.threshold-table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 13px; }
table.threshold-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: linear-gradient(180deg, #f9e69b, #f0d264);
  color: #6b4a0e; font-weight: 800; font-size: 11.5px; letter-spacing: 0.03em;
  padding: 11px 12px; text-align: center; border-bottom: 2px solid #e4bd53;
}
table.threshold-table td { padding: 10px 12px; text-align: center; border-bottom: 1px solid var(--border); color: var(--text); }
table.threshold-table tr.is-current td { background: var(--gold-bg, rgba(233,176,7,0.12)); }
table.threshold-table tr:last-child td { border-bottom: none; }
td.vip-maintain { color: var(--gold-2); font-weight: 700; }
.lvl-badge {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; color: #fff; font-weight: 800; font-size: 12px; border: 2px solid rgba(255,255,255,0.7);
  box-shadow: 0 2px 5px rgba(0,0,0,0.25);
}
.lvl-badge.band-1 { background: radial-gradient(circle at 32% 28%, #7fbaff, var(--accent) 70%); }
.lvl-badge.band-2 { background: radial-gradient(circle at 32% 28%, #c9aeff, #7c3aed 70%); }
.lvl-badge.band-3 { background: radial-gradient(circle at 32% 28%, #ffe9a8, var(--gold-2) 70%); }
.lvl-badge-img { display: inline-block; width: 40px; height: 40px; object-fit: contain; vertical-align: middle; }

@media (min-width: 641px) and (max-width: 1520px) {
  #vipInfoContent { max-width: calc(100% - 110px); }
}

.vip-badge-cell { position: relative; display: inline-flex; width: 40px; height: 40px; }
.vip-badge-slot {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 10px; border: 1px dashed var(--border); cursor: pointer; overflow: hidden; background: var(--surface-2);
}
.vip-badge-slot:hover { border-color: var(--border-strong); }
.vip-badge-preview { width: 100%; height: 100%; object-fit: contain; }
.vip-badge-plus { color: var(--text-faint); font-size: 16px; font-weight: 700; }
.vip-badge-remove {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--lose); color: #fff; border: none; font-size: 10px; line-height: 1; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}

.vip-card-cell { position: relative; display: inline-flex; width: 64px; height: 31px; }
.vip-card-slot {
  display: flex; align-items: center; justify-content: center; width: 64px; height: 31px;
  border-radius: 10px; border: 1px dashed var(--border); cursor: pointer; overflow: hidden; background: var(--surface-2);
}
.vip-card-slot:hover { border-color: var(--border-strong); }
.vip-card-preview { width: 100%; height: 100%; object-fit: cover; }
.vip-card-plus { color: var(--text-faint); font-size: 14px; font-weight: 700; }
.vip-card-remove {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--lose); color: #fff; border: none; font-size: 10px; line-height: 1; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}

.vip-history-list { display: flex; flex-direction: column; gap: 10px; }
.vip-h-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 16px;
}
.vip-h-ic {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.vip-h-ic.levelup { background: rgba(124, 58, 237, 0.1); color: #7c3aed; }
.vip-h-ic.monthly { background: var(--gold-bg, rgba(233,176,7,0.12)); color: var(--gold-2); }
.vip-h-body { flex: 1; min-width: 0; }
.vip-h-title { font-size: 13.5px; font-weight: 700; color: var(--text); }
.vip-h-time { font-size: 12px; color: var(--text-faint); margin-top: 1px; }
.vip-h-amount { font-weight: 800; font-size: 14.5px; color: var(--gold-2); white-space: nowrap; }

.lb-results-card { padding: 0; overflow: hidden; }
.lb-results-grid { display: grid; grid-template-columns: 1.6fr 1fr; }

.lb-results-table-wrap { border-right: 1px solid var(--border); min-width: 0; overflow-x: auto; }
.lb-dauduoi-wrap { background: var(--surface-2); min-width: 0; overflow-x: auto; }
.lb-results-table, .lb-dauduoi-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  font-size: 13.5px;
}

.lb-dauduoi-table { table-layout: fixed; }

.lb-dauduoi-table td:nth-child(1), .lb-dauduoi-table th:nth-child(1) { width: 56px; padding-left: 8px; padding-right: 8px; }
.lb-dauduoi-table td:nth-child(3), .lb-dauduoi-table th:nth-child(3) { width: 158.7px; }
.lb-results-table td, .lb-dauduoi-table td, .lb-results-table th, .lb-dauduoi-table th {
  padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: center;
}

.lb-dauduoi-table td { padding-top: 8px; padding-bottom: 8px; }

.lb-results-table td:not(:last-child), .lb-dauduoi-table td:not(:last-child),
.lb-results-table th:not(:last-child), .lb-dauduoi-table th:not(:last-child) {
  border-right: 1px solid var(--border);
}
.lb-results-table tbody tr:nth-child(even), .lb-dauduoi-table tbody tr:nth-child(even) { background: rgba(0, 0, 0, 0.02); }
.lb-results-table thead th, .lb-dauduoi-table thead th {
  text-align: center; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-faint); border-bottom: 1px solid var(--border-strong);
}

.lb-giai-name { font-weight: 700; color: var(--text-dim); white-space: nowrap; width: 1%; }
.lb-giai-nums { font-variant-numeric: tabular-nums; letter-spacing: 0.3px; white-space: normal; }
.lb-lo-pair { font-weight: 800; color: var(--accent); }
.lb-pending { color: var(--text-faint); }
.lb-dauduoi-table td:first-child { font-weight: 800; color: var(--accent); }
.lb-dauduoi-table td:nth-child(2) { font-variant-numeric: tabular-nums; white-space: normal; }
.lb-ky-pick {
  background: none; border: 1px solid var(--border); border-radius: 999px; color: var(--text-dim);
  font-size: 11.5px; padding: 1px 9px; cursor: pointer; white-space: nowrap;
}
.lb-ky-pick:hover { border-color: var(--border-strong); }
.lb-ky-pick.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.lb-status-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--surface-2); border-top: 1px solid var(--border); padding: 12px 16px;
}
.lb-status-ky { font-size: 13.5px; color: var(--text-dim); }
.lb-status-countdown {
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 15px; color: var(--accent);
  background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 4px 12px;
}
.lb-status-countdown.locked { color: var(--lose); border-color: var(--lose); }
@media (max-width: 720px) {
  .lb-results-grid { grid-template-columns: 1fr; gap: 10px; padding: 10px; }

  .lb-results-table-wrap,
  .lb-dauduoi-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .lb-results-table-wrap { background: var(--surface); }
  .lb-status-bar { justify-content: center; text-align: center; }

  .lb-dauduoi-table td:nth-child(1), .lb-dauduoi-table th:nth-child(1) { width: 77px; }
  .lb-dauduoi-table td:nth-child(3), .lb-dauduoi-table th:nth-child(3) { width: auto; }

  .lb-history-table th, .lb-history-table td { padding: 8px 6px; font-size: 12px; }
  .lb-history-table th:nth-child(1), .lb-history-table td:nth-child(1) { width: 13%; }
  .lb-history-table th:nth-child(2), .lb-history-table td:nth-child(2) { width: 38%; }
  .lb-history-table th:nth-child(3), .lb-history-table td:nth-child(3) { width: 27%; white-space: normal; }
  .lb-history-table th:nth-child(4), .lb-history-table td:nth-child(4) { width: 22%; }
  .lb-history-table .balls-row { gap: 3px; }
  .lb-history-table .ball.small { width: 18px; height: 18px; font-size: 9px; }
  .lb-history-table .ghost { padding: 5px 4px; font-size: 11px; white-space: normal; }

  #betTypeTabs.row-filter-grid { flex-wrap: nowrap; gap: 18px; justify-content: flex-start; }
  #betTypeTabs.row-filter-grid .row-filter-check { gap: 4px; font-size: 12px; white-space: nowrap; }
  #betTypeTabs.row-filter-grid .row-filter-check input[type="checkbox"] { width: 14px; height: 14px; flex-shrink: 0; }
}

#manualNumberInput {
  display: block;
  width: 100%;
  height: 250px;
  padding: 11px 14px;
  background: var(--surface-2-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  resize: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#manualNumberInput:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 96, 209, 0.16); }

.lb-hint-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.lb-hint-row .field-hint { margin-top: 0; }

.lb-max-numbers-hint {
  text-align: right; color: var(--lose); font-size: 12px; font-weight: 700; white-space: nowrap;
}

.lb-history-table {
  table-layout: fixed;
  min-width: 0;
}
.lb-history-table th, .lb-history-table td { width: 25%; text-align: center; }

.lw-fab {
  position: fixed;
  right: 16px;
  bottom: 24px;
  z-index: 95;
  width: 150px;
  height: 150px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  filter: drop-shadow(0 10px 20px rgba(120, 10, 10, 0.35));
  animation: lwFabPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.lw-fab:hover { filter: drop-shadow(0 12px 24px rgba(120, 10, 10, 0.45)); }
@media (max-width: 640px) { .lw-fab { right: 12px; bottom: 118px; width: 86px; height: 105px; } }

/* Nút nổi GIF Tài Xỉu ở Trang Chủ — ĐỐI XỨNG bên trái, cùng bottom với .lw-fab (Vòng Quay May Mắn)
   bên phải để 2 nút ngang hàng nhau. TÁCH RIÊNG hoàn toàn khỏi .lw-fab (không dùng chung class).
   Click vào mở modal nhúng iframe /tai-xiu/ ngay tại trang chủ (xem #txHallModalOverlay bên dưới +
   script cạnh thẻ <a> trong home.html) — vẫn giữ href thật để fallback/mở tab mới hoạt động bình
   thường nếu khách Ctrl/Cmd-click hoặc JS lỗi. */
.tx-home-fab {
  position: fixed;
  left: 16px;
  bottom: 24px;
  z-index: 95;
  display: block;
  width: 100px;
  height: 150px;
  border-radius: 12px;
  overflow: hidden;
  filter: drop-shadow(0 10px 20px rgba(0, 30, 90, 0.35));
  animation: lwFabPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.tx-home-fab img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tx-home-fab:hover { filter: drop-shadow(0 12px 24px rgba(0, 30, 90, 0.45)); }
@media (max-width: 640px) { .tx-home-fab { left: 12px; bottom: 118px; width: 70px; height: 105px; } }

/* Modal sảnh Tài Xỉu mở từ .tx-home-fab — dùng chung khung .modal-overlay/.modal-box có sẵn (nền
   tối mờ dần, animation mở/đóng, tự khoá cuộn trang nền qua rule body:has(.modal-overlay.show) đã
   có sẵn) nhưng OVERRIDE riêng kích thước/nền vì đây là NHÚNG ĐÚNG BÀN CƯỢC (iframe /tai-xiu/?embed=1
   — trang con đã tự ẩn topbar/hall-tabs/lịch sử qua class "tx-embed", xem style.css phần Tài Xỉu),
   không phải hộp thoại text hay nhúng nguyên trang như trước — nền TRONG SUỐT để lộ lớp phủ tối của
   modal, kích thước ôm sát đúng bàn+chat thay vì chiếm gần hết màn hình. */
.tx-hall-modal-overlay { padding: 16px; }
.tx-hall-modal-box {
  width: 100%;
  max-width: 1320px;
  height: auto;
  max-height: 94vh;
  padding: 0;
  text-align: initial;
  background: transparent;
  /* .modal-box mặc định có border 1px solid var(--border) (viền xanh nhạt) — hợp lý cho hộp thoại
     text nền trắng, nhưng ở đây nền đã trong suốt nên viền đó nổi rõ thành 1 đường viền mỏng bao
     quanh hẳn khối bàn+chat, không cần thiết — bỏ hẳn cho khớp với nền trong suốt. */
  border: none;
  box-shadow: none;
  overflow-y: auto;
  overflow-x: hidden;
}
.tx-hall-modal-iframe {
  width: 100%;
  /* Chiều cao mặc định trước khi trang con báo kích thước thật qua postMessage (xem script cạnh
     .tx-home-fab) — tránh 1 khoảng trắng/trong suốt quá nhỏ hoặc quá lớn lúc vừa mở. JS sẽ ghi đè
     trực tiếp qua iframe.style.height ngay khi có số đo thật. */
  height: 560px;
  border: none;
  display: block;
}
@media (max-width: 480px) {
  .tx-hall-modal-overlay { padding: 8px; }
}
/* Mobile (≤900px — đúng lúc .taixiu-shell chuyển sang xếp dọc, xem @media (max-width:900px) ở phần
   Tài Xỉu) — tắt hẳn thanh cuộn của khung modal. LƯU Ý: đổi overflow-y:visible trong khi overflow-x
   vẫn là hidden KHÔNG có tác dụng — theo spec CSS, khi 1 trục là hidden còn trục kia visible, trình
   duyệt tự quy computed value của trục "visible" thành "auto" (vẫn cuộn khi tràn), không thật sự tắt
   được. Cách đúng: bỏ hẳn max-height (nguyên nhân duy nhất khiến nó CẦN cuộn) — bàn+chat xếp dọc trên
   mobile đo thực tế luôn thấp hơn chiều cao màn hình thật, nên không cần giới hạn 94vh ở đây nữa. */
@media (max-width: 900px) {
  .tx-hall-modal-box { max-height: none; }
}

.lw-fab-ring {

  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
}
.lw-fab-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url(/uploads/vong-quay-may-man-5mb.webp);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  animation: lwSpinSlow 7s linear infinite;
}
.lw-fab-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  z-index: 2;
  background-image: url(/uploads/nut-button-bat-dau.webp);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
@media (max-width: 640px) { .lw-fab-hub { width: 22px; height: 22px; margin: -11px 0 0 -11px; } }
.lw-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--lose);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.lw-fab-badge.lw-hidden { display: none; }

@keyframes lwFabPop { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes lwFabBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes lwSpinSlow { to { transform: rotate(360deg); } }

.lw-modal-overlay { z-index: 200; }

.lw-modal-shell {
  position: relative;
  width: 100%;
  max-width: 1250px;
}

/* KHÔNG dùng transform — xem giải thích đầy đủ ở .modal-box (line ~879): trung hoà về "transform: none"
   khi .show vẫn KHÔNG hết lỗi chặn vuốt cuộn tay thật trên iPhone, nên bỏ hẳn transform khỏi mọi
   trạng thái luôn, chỉ còn opacity của .lw-modal-overlay lo hiệu ứng mở/đóng. */
.lw-modal-box {
  position: relative;
  width: 100%;
  max-width: 1250px;
  height: 600px;
  max-height: 92vh;
  overflow-y: auto;
  scrollbar-width: none;
  touch-action: pan-y;
  background: linear-gradient(180deg, #fff 0%, #fff8ec 100%);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
  padding: 0 0 22px;
}
.lw-modal-box::-webkit-scrollbar { display: none; }
@media (max-width: 720px) {

  .lw-modal-box { height: auto; max-height: 90vh; }
}

.lw-close {
  position: absolute;
  top: -18px;
  right: 4px;
  z-index: 5;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: linear-gradient(135deg, #ff7a45, #e8320a);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  transition: filter 0.15s ease;
}
.lw-close:hover { filter: brightness(1.08); }

.lw-ribbon {
  position: relative;
  margin: 18px 18px 0;
  padding: 20px 16px;
  text-align: center;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #7a1010, #4a0505);
  border: 3px solid var(--gold);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08), 0 10px 24px -10px rgba(122, 16, 16, 0.6);
  overflow: hidden;
}
.lw-ribbon span {
  position: relative;
  z-index: 2;
  color: var(--gold);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 1px;
  text-shadow: 0 2px 0 #2a0303, 0 0 18px rgba(233, 176, 7, 0.5);
}
@media (max-width: 640px) { .lw-ribbon span { font-size: 18px; } }
.lw-ribbon-lights { position: absolute; inset: 6px; pointer-events: none; }
.lw-light-row { position: absolute; left: 10px; right: 10px; display: flex; justify-content: space-between; }
.lw-light-row.lw-top { top: 2px; }
.lw-light-row.lw-bottom { bottom: 2px; }
.lw-light-row span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px 2px rgba(233, 176, 7, 0.8);
  animation: lwBlink 1.4s ease-in-out infinite;
}
@keyframes lwBlink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

.lw-body {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 30px;

  padding: 6px 26px 0;
  align-items: start;
}
@media (max-width: 720px) { .lw-body { grid-template-columns: 1fr; padding: 6px 18px 0; gap: 20px; } }

.lw-left { display: flex; flex-direction: column; gap: 10px; }

.lw-time-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface-solid); }
.lw-time-card-head {
  padding: 9px 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}
.lw-time-card-body { padding: 10px 12px; font-size: 12px; line-height: 1.6; color: var(--text-dim); max-height: 140px; overflow-y: auto; }
.lw-time-card-body div { background: transparent !important; }

.lw-info-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #3a2400;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 6px 14px -6px rgba(198, 143, 0, 0.6);
  transition: transform 0.15s ease;
}
.lw-info-btn:hover { transform: translateY(-1px); }

.lw-right { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.lw-wheel-wrap { position: relative; width: 420px; height: 420px; max-width: 100%; }
@media (max-width: 720px) { .lw-wheel-wrap { width: 300px; height: 300px; } }
@media (max-width: 420px) { .lw-wheel-wrap { width: 250px; height: 250px; } }

.lw-wheel {

  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: url(/uploads/vong-quay-may-man-5mb.webp);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.45));
  transition: transform 4.2s cubic-bezier(0.13, 0.6, 0.08, 1);
}

.lw-wheel-pointer {

  position: absolute;
  top: 6px;
  left: 50%;
  margin-left: -30px;
  width: 60px;
  height: 64px;
  z-index: 4;
  background-image: url(/uploads/nut-button-trimmed.webp);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.4));
}
@media (max-width: 720px) {
  .lw-wheel-pointer { top: 6px; margin-left: -15px; width: 30px; height: 33px; }
}

.lw-wheel-center {

  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  border-radius: 50%;
  z-index: 5;
  background-image: url(/uploads/nut-button-bat-dau.webp);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7a3d00;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.5px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s ease;
}
@media (max-width: 720px) {
  .lw-wheel-center { width: 78px; height: 78px; margin: -39px 0 0 -39px; font-size: 13px; }
}
.lw-wheel-center:hover:not(.lw-disabled) { transform: scale(1.05); }
.lw-wheel-center:active:not(.lw-disabled) { transform: scale(0.96); }
.lw-wheel-center.lw-disabled { cursor: not-allowed; }

.lw-chances {
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--surface-2-solid);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-dim);
}
.lw-chances b { color: var(--lose); font-size: 15px; }

.lw-result-toast {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translate(-50%, 10px);
  min-width: 200px;
  max-width: 80%;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #3a2400;
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  box-shadow: 0 10px 24px -8px rgba(198, 143, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 6;
}
.lw-result-toast.show { opacity: 1; transform: translate(-50%, 0); }

.lw-info-overlay { z-index: 210; }

/* KHÔNG dùng transform — xem giải thích đầy đủ ở .modal-box (line ~879). */
.lw-info-box {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #ffab3d 0%, #ff6a1a 55%, #e2380c 100%);
  border-radius: 10px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}
@media (max-width: 640px) {

  .lw-info-box { height: 600px; max-height: 90vh; }
}

.lw-info-head {
  position: relative;
  flex-shrink: 0;
  padding: 16px 54px 12px 20px;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.lw-info-close {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: linear-gradient(135deg, #ff7a45, #e8320a);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.lw-info-close:hover { filter: brightness(1.08); }

.lw-info-badge {
  position: absolute;
  top: -14px;
  right: 42px;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(160deg, #fff, #fff3d6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transform: rotate(-10deg);
  box-shadow: 0 6px 14px -2px rgba(0, 0, 0, 0.35);
}

.lw-info-inner {
  flex: 1;
  margin: 0 10px 10px;
  background: linear-gradient(180deg, #fff 0%, #fff8ec 100%);
  border-radius: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.lw-info-inner::-webkit-scrollbar { display: none; }

.lw-winners-table th, .lw-winners-table td { padding: 6px 6px; }

.lw-info-body { padding: 16px 18px; font-size: 16px; line-height: 1.7; color: var(--text-dim); }
.lw-info-body div { background: transparent !important; }

.lw-info-body.promo-detail-box-content { font-size: 16px; }
.lw-info-body table { font-size: 16px; }

.lw-info-footer { flex-shrink: 0; display: flex; justify-content: center; padding: 12px 20px 16px; }
.lw-info-done-btn {
  min-width: 150px;
  padding: 10px 30px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #3a2400;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease;
}
.lw-info-done-btn:hover { transform: translateY(-1px); }

.lw-yellow-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; font-size: 16px; }
.lw-yellow-table th {
  background: linear-gradient(180deg, #fff6a0, #ffe873);
  color: #3a2400;
  font-weight: 800;
  padding: 10px 6px;
  border: 1px solid #111111;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
}
.lw-yellow-table td {
  padding: 9px 6px;
  border: 1px solid #111111;
  text-align: center;
  color: var(--text);
  white-space: normal;
  overflow-wrap: break-word;
}
.lw-yellow-table th:first-child, .lw-yellow-table td:first-child { width: 15%; }
.lw-yellow-table tbody tr:nth-child(even) { background: var(--surface-2-solid); }
.lw-yellow-table tbody tr:last-child td { border-bottom: 1px solid #111111; }

.lw-prize-table th:first-child, .lw-prize-table td:first-child { width: 34%; }
@media (max-width: 420px) {

  .lw-yellow-table { font-size: 13px; }
  .lw-yellow-table th, .lw-yellow-table td { padding: 7px 4px; }
  .lw-yellow-table th:first-child, .lw-yellow-table td:first-child { width: 13%; }
  .lw-prize-table th:first-child, .lw-prize-table td:first-child { width: 38%; }
}
.lw-empty { padding: 30px 0; text-align: center; color: var(--text-faint); }

.install-app-section { margin-top: 28px; }
.install-app-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: linear-gradient(135deg, rgba(0, 96, 209, 0.08), rgba(47, 134, 255, 0.03));
  border: 2px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 32px 40px;
  min-height: 240px;
}
.install-app-left { flex: 1 1 380px; min-width: 260px; }
.install-app-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.install-app-icon { flex-shrink: 0; }
.install-app-icon img { width: 56px; height: 56px; border-radius: 14px; border: 2px solid var(--accent); box-shadow: var(--shadow-card); }
.install-app-content { flex: 1 1 auto; }
.install-app-title { font-size: 22px; font-weight: 800; color: var(--accent); margin-bottom: 8px; }
.install-app-subtitle { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.6; max-width: 440px; }
.install-app-platforms { display: flex; gap: 20px; flex-wrap: wrap; }
.install-app-platform { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.install-app-qr { width: 140px; height: 140px; border-radius: 10px; border: 1px solid var(--border); background: #fff; padding: 4px; }

.install-app-badge {
  position: relative;
  width: 45px;
  height: 45px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(160deg, #ffffff, #edf3fb);
  border: 1px solid rgba(0, 96, 209, 0.12);
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.8);
}
.install-app-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 55%);
}
.install-app-badge img { position: relative; z-index: 1; object-fit: contain; }
.install-app-badge-android { border-width: 2px; border-color: #2ea043; }
.install-app-badge-ios { border-width: 2px; border-color: #374151; }
.install-app-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  border: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  white-space: nowrap;
}
.install-app-btn-android,
.install-app-btn-ios {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 20px -8px var(--accent-glow);
}
.install-app-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
}
.install-app-btn-icon img { width: 14px; height: 14px; object-fit: contain; }

/* Khung ảnh minh hoạ (kiểu nhân vật + mockup điện thoại như QQ88 làm) — nguồn
   ảnh nên xuất @2x ở khoảng 583×388px, hiển thị co lại còn khung dưới đây để
   nét trên màn hình retina. Chưa có ảnh thật thì hiện placeholder viền đứt;
   khi thả file thật vào /public/img/install-app-illustration.png, ảnh tự
   hiện ra và placeholder tự ẩn (không cần sửa code) — xem onload/onerror. */
.install-app-illustration {
  flex: 0 0 540px;
  width: 540px;
  aspect-ratio: 583 / 388;
  display: flex;
  align-items: center;
  justify-content: center;
}
.install-app-illustration-img { width: 100%; height: 100%; object-fit: contain; }
.install-app-illustration-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px dashed rgba(0, 96, 209, 0.35);
  border-radius: var(--radius);
  color: var(--text-faint);
  text-align: center;
  padding: 16px;
}
.install-app-illustration-placeholder svg { opacity: 0.6; }
.install-app-illustration-placeholder span { font-size: 12px; line-height: 1.5; max-width: 200px; }

.install-guide-steps { margin: 0; padding-left: 20px; color: var(--text-dim); font-size: 14px; line-height: 1.9; }
.install-guide-steps li { margin-bottom: 8px; }
.install-guide-steps li:last-child { margin-bottom: 0; }

.flag-icon {
  display: inline-block;
  width: 20px;
  height: 14px;
  margin-left: 6px;
  border-radius: 2px;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* Modal hướng dẫn cài đặt — dùng lại đúng "khung" (.fraud-shell/.fraud-close)
   của modal Cảnh Báo Lừa Đảo cho đồng bộ: nút đóng tròn nổi ở góc, nền
   gradient trắng-nhạt, khung nội dung có viền. Chỉ đổi kích thước nhỏ gọn
   hơn (nội dung là 4 bước hướng dẫn, không cần to như banner cảnh báo). */
.install-guide-shell { max-width: 440px; }
.install-guide-modal-box {
  width: 440px;
  height: auto;
  max-height: 90vh;
  max-height: 90dvh;
  background: linear-gradient(180deg, #fff 0%, #f4f8ff 100%);
  padding: clamp(22px, 6vw, 30px) clamp(18px, 5vw, 26px);
}
.install-guide-inner { overflow-y: auto; }
.install-guide-box {
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: rgba(0, 96, 209, 0.05);
  padding: clamp(12px, 4vw, 18px) clamp(14px, 4vw, 20px);
  margin-top: 14px;
}
@media (max-width: 640px) {
  .install-guide-shell { max-width: 92vw; }
  .install-guide-modal-box { width: 92vw; }
}

@media (max-width: 900px) {
  .install-app-card { flex-wrap: wrap; justify-content: center; }
  .install-app-illustration { order: -1; }
}

@media (max-width: 640px) {
  .install-app-card { padding: 20px; gap: 20px; }
  .install-app-header { flex-direction: column; align-items: center; text-align: center; }
  .install-app-subtitle { max-width: none; }
  .install-app-title { font-size: 17px; }
  .install-app-platforms { width: 100%; justify-content: space-around; }
  .install-app-qr { width: 96px; height: 96px; }
  .install-app-illustration { width: 300px; height: 200px; flex-basis: 300px; aspect-ratio: auto; }
}

/* Nút "Nghe thử" của toggle thông báo giọng nói (admin-common.js, mọi trang admin) là position:fixed
   góc dưới-phải, đứng yên khi cuộn — trên màn hình hẹp (điện thoại) nó có thể đè lên nội dung đang
   cuộn tới đúng vị trí đó (VD nút lọc "Tuần trước" ở bảng Khách hàng), che mất và không bấm được nội
   dung bên dưới. Ẩn bớt nút phụ này trên màn hình hẹp, giữ lại nút tắt/bật tròn nhỏ hơn (44px, ít khả
   năng che trúng nội dung hơn nhiều so với nút "Nghe thử" rộng ~130px). */
@media (max-width: 480px) {
  #voiceAlertTestBtn { display: none !important; }
}


/* ===== Tài Xỉu — bàn cược có nắp mở (public/tai-xiu.html) =====
   3 lớp ảnh thật (public/uploads/ban-tai-xiu.png, dia-tai-xiu.png, nap-tai-xiu.png) đều cùng canvas
   1774x887 — xếp chồng đúng nguyên vị trí (inset:0, không cần dịch toạ độ) là khớp: ban = khung bàn,
   dia = dĩa đựng xúc xắc (nằm giữa), nap = nắp đậy xúc xắc (nằm giữa, to hơn dĩa 1 chút, đúng kiểu nắp
   đậy). Khi có kết quả: nap phóng to + mờ dần để "mở nắp", lộ dĩa + xúc xắc + tổng điểm bên dưới.
   Tỉ lệ khung tham chiếu đúng theo ảnh gốc: 1774:887 (~2:1). */
.taixiu-shell {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}
/* Cột chứa bàn + hàng đặt cược, TÁCH RIÊNG khỏi .taixiu-table-card — để hàng đặt cược (bên dưới)
   luôn cùng chiều rộng với bàn và canh giữa đúng theo bàn, không bị tính theo cả khung chat bên cạnh. */
.taixiu-table-col {
  flex: 3 1 620px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.taixiu-table-card {
  width: 100%;
  max-width: 900px;
  aspect-ratio: 1774 / 887;
  position: relative;
  /* container-type:inline-size biến chiều rộng THẬT SỰ đã render của khung này thành mốc cho đơn vị
     cqw dùng khắp bên dưới (dĩa/nắp/xí ngầu/chữ...) — khác với % (vốn đã dùng cho left/top, không đổi)
     hay vw (theo chiều rộng CẢ TRÌNH DUYỆT), cqw luôn bám đúng kích thước khung này bất kể zoom trình
     duyệt bao nhiêu % hay đang ở layout desktop/mobile nào, nên mọi lớp ảnh + chữ đè lên nhau luôn co
     giãn ĐỒNG BỘ cùng 1 tỉ lệ — fix lỗi lệch hình lúc zoom 150% và lỗi kích thước không khớp trên mobile. */
  container-type: inline-size;
  /* Chặn nắp bị kéo ra khỏi khung tạo khoảng trống/scroll ngang lạ trên trang — kéo quá mép khung thì
     nắp bị CHE KHUẤT ở đúng viền bàn thay vì trôi tự do ra ngoài toàn trang, không còn đẩy chiều rộng
     trang vượt viewport nữa (xem endLidDrag()/pointermove trong tai-xiu.html — không giới hạn khoảng
     kéo, chỉ clip phần vượt khung tại đây). */
  overflow: hidden;
}
/* 3 lớp TÁCH RIÊNG hoàn toàn (không dùng class dùng chung nữa) — mỗi lớp có đủ position/size/
   z-index của riêng nó, sửa lớp nào chỉ cần sửa đúng block của lớp đó, không đụng lớp khác. */
.taixiu-board-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
/* Ảnh dĩa/nắp đã cắt sát viền tròn (không còn khoảng trong suốt thừa quanh canvas 1774x887 gốc
   nữa) — nên WIDTH dưới đây chính là kích thước thật của dĩa/nắp, muốn to/nhỏ hơn thì sửa thẳng số
   % này. height để auto, tự giữ đúng tỉ lệ ảnh (không bị méo). LEFT/TOP + transform để canh giữa
   đúng tâm bàn (đo từ ảnh ban-tai-xiu.png gốc). */
.taixiu-plate-img {
  position: absolute;
  left: 49.86%;
  top: 59.5%;
  transform: translate(-50%, -50%);
  /* Đổi từ px cố định sang cqw (tỉ lệ giữ nguyên hệt như 250x200px lúc khung rộng đúng 900px, mốc
     max-width bên trên) để dĩa luôn to/nhỏ ĐÚNG THEO khung bàn thật sự, không lệch khi khung co giãn. */
  width: 27.778cqw;
  height: 22.222cqw;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}
.taixiu-lid-img {
  position: absolute;
  left: 50.06%;
  top: 59.5%;
  transform: translate(-50%, -50%);
  /* cqw thay vì px cố định — cùng lý do như .taixiu-plate-img, để nắp luôn khớp đúng kích thước dĩa
     bên dưới dù khung bàn co giãn theo zoom trình duyệt hay layout mobile. */
  width: 27.778cqw;
  height: 22.222cqw;
  /* auto (không phải none) — cho khách chạm/kéo tự mở nắp trong 15 giây đầu kỳ, xem canInteractWithLid()
     trong tai-xiu.html. touch-action: none để kéo ngang trên mobile không bị cuộn trang theo. */
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  user-select: none;
  /* Tắt hẳn tính năng "kéo ảnh" mặc định của trình duyệt (native image drag) — nếu không tắt, trình
     duyệt tự tạo thêm 1 "ảnh ma" mờ + thu nhỏ chạy theo con trỏ SONG SONG với code kéo thật của mình,
     nhìn giống hệt "nắp bị mờ và co nhỏ lại" dù CSS/JS không hề đổi opacity/kích thước gì cả. */
  -webkit-user-drag: none;
  user-drag: none;
  /* z-index 4 — THẤP hơn .taixiu-countdown-circle (z-index:6, cùng tâm bàn) khi nắp còn ĐỨNG YÊN, để
     số giây đếm ngược luôn hiện rõ đè lên mặt nắp lúc chưa kéo. Lúc ĐANG KÉO thì đổi hẳn sang z-index
     cao nhất — xem .taixiu-lid-dragging bên dưới — nếu không sẽ bị bảng cầu/khung Tài Xỉu (z-index:5)
     đè lên khi kéo lấn qua vùng đó (bug user báo). */
  z-index: 4;
  transform-origin: 50% 50%;
  transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Mở nắp = ẨN NGAY LẬP TỨC, không trượt/mờ dần/phóng to gì thêm (display không animate được nên
   luôn là 1 lần cắt gọn) — lúc ĐANG kéo tay thì nắp vẫn bám theo con trỏ/ngón tay bình thường (xem
   pointermove trong tai-xiu.html), chỉ riêng khoảnh khắc XÁC NHẬN mở là ẩn dứt khoát, không animate. */
.taixiu-lid-img.open {
  display: none;
}
/* #taixiuLid đổi từ <img> sang <div> bọc ngoài (chứa ảnh nắp thật + chữ "Mở") để chữ LUÔN DÍNH THEO
   nắp — mọi transform kéo/mở vẫn gán vào ĐÚNG phần tử này (giữ nguyên id="taixiuLid", giữ nguyên class
   .taixiu-lid-img) nên toàn bộ JS kéo/mở nắp không cần sửa gì, ảnh + chữ con bên trong tự động trượt/
   ẩn theo cùng 1 lúc với nắp. Ảnh thật chỉ cần lấp đầy đúng khung cha, không tự có position riêng. */
.taixiu-lid-photo {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Chữ "Mở" — hiện đúng lúc nắp đang mời chạm/kéo (.taixiu-lid-reveal-ready, xem setupRevealForRound()/
   commitLidOpen()/closeLidToIdle() trong tai-xiu.html — vòng đời y hệt hiệu ứng nhấp nháy sẵn có, KHÔNG
   cần thêm state JS riêng). Class này ở ngay trên #taixiuLid (cha của label) nên vẫn hiện xuyên suốt lúc
   đang kéo (.taixiu-lid-dragging không xoá .taixiu-lid-reveal-ready — xem pointerdown), đúng yêu cầu
   "kéo đi chữ Mở vẫn dính trên nắp". Cùng font/kiểu chữ dập nổi với .taixiu-countdown-circle (đứng cùng
   1 chỗ) để khi đổi qua lại giữa 2 trạng thái không bị lệch phong cách. */
.taixiu-lid-open-label {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: Anton, Arial, sans-serif;
  --txlid-fs: clamp(20px, 6.5cqw, 58px);
  font-size: var(--txlid-fs);
  letter-spacing: 1px;
  color: #ffe9a8;
  -webkit-text-stroke: calc(var(--txlid-fs) * 0.0208) #7a4a00;
  text-shadow:
    0 calc(var(--txlid-fs) * 0.0139) 0 #fff3cf,
    0 calc(var(--txlid-fs) * 0.0278) 0 #ffd75e,
    0 calc(var(--txlid-fs) * 0.0556) 0 #d69a00,
    0 calc(var(--txlid-fs) * 0.0833) 0 #a86e00,
    0 calc(var(--txlid-fs) * 0.125) calc(var(--txlid-fs) * 0.1944) rgba(0, 0, 0, 0.5);
}
.taixiu-lid-reveal-ready .taixiu-lid-open-label {
  display: flex;
}
/* Đang kéo tay — tắt transition để nắp bám sát ngón tay/con trỏ theo thời gian thực, không bị độ trễ
   easing của transition mặc định (chỉ dùng cho lúc TỰ động mở/đóng, không phải lúc đang kéo). Đồng
   thời đẩy z-index lên CAO NHẤT trong khung bàn (cao hơn cả .taixiu-corner-btn z-index:6) — chỉ trong
   lúc đang kéo — để nắp luôn nổi trên mọi lớp khác dọc đường kéo, không bị bảng cầu/nút góc đè lên. */
.taixiu-lid-dragging {
  transition: none !important;
  cursor: grabbing;
  z-index: 8;
}
/* Gợi ý "có thể chạm để mở" trong lúc đang chờ khách tự mở (đầu mỗi kỳ) — nhấp nháy nhẹ nhàng, tắt
   ngay khi bắt đầu kéo (taixiu-lid-dragging) hoặc đã mở hẳn (open), xem commitLidOpen(). */
@keyframes taixiuLidInvite {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}
.taixiu-lid-reveal-ready {
  animation: taixiuLidInvite 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .taixiu-lid-reveal-ready { animation: none; }
}

/* Chỉ còn đúng 1 con (.taixiu-dice-row) — đã bỏ tổng điểm + nhãn Tài/Xỉu (taixiu-total/-result-status)
   theo yêu cầu, nên canh giữa đơn giản bằng chính translate(-50%,-50%) của khung này, không cần flex
   column/gap nữa. */
.taixiu-dice-display {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 59.5%;
  transform: translate(-50%, -50%);
}
/* Cụm 3 viên xí ngầu xếp hình tam giác (2 viên trên, 1 viên dưới giữa) — container fix cứng kích
   thước để 3 viên position:absolute có chỗ neo vào, đã đo để vẫn vừa lòng dĩa (dia-tai-xiu.png) ở
   khung 250x200px của đĩa trên bàn. Thu nhỏ lại 1 chút so với bản dãn rộng trước để 3 viên sát gần
   nhau hơn, không còn cách quá xa. */
.taixiu-dice-row {
  position: relative;
  /* cqw thay vì px cố định — xem giải thích ở .taixiu-table-card (container-type: inline-size).
     QUAN TRỌNG: viên 3 (bottom-center) chỉ CHẮC CHẮN không chồng lên viên 1/2 (top-left/top-right)
     nếu tách được theo TRỤC DỌC (rowHeight > 2×dieSize) — tách theo trục ngang một mình KHÔNG đủ vì
     viên 3 nằm giữa, luôn đè ngang lên cả 2 viên kia. Công thức đang dùng: cả W lẫn H đều = 2×dieSize
     + khoảng hở (dieSize = 5.2cqw, xem .tx-die bên dưới). Khung này CHÍNH GIỮA .taixiu-dice-display
     (left:50%/top:59.5% + translate(-50%,-50%)) nên thu nhỏ W/H lại (12.5 → 11.5 → 11cqw) sẽ kéo cả 3
     viên (đang neo vào 4 góc/cạnh của khung) xích vào gần đúng tâm hơn mà tâm không đổi chỗ — đúng ý
     "thu vào giữa tâm đĩa". Khoảng hở còn lại ở 11cqw: 11 - 2×5.2 = 0.6cqw, vẫn dương (không chồng). */
  width: 11cqw;
  height: 11cqw;
}
/* Khối lập phương 3D THẬT (6 mặt = 6 ảnh mat-1..mat-6.png ghép quanh 1 hình hộp, xoay bằng
   rotateX/rotateY) — thay cho bản trước (1 ảnh phẳng đổi src liên tục mỗi 90ms để giả chuyển động,
   nhìn máy móc theo đúng góp ý user). translateZ(2.3333cqw) = ĐÚNG NỬA kích thước .tx-die (4.6667cqw)
   để 6 mặt khép kín thành hình hộp vuông vức, không hở góc. */
.tx-die {
  position: absolute;
  /* cqw thay vì px cố định để khối xí ngầu luôn to/nhỏ đúng theo khung bàn (xem container-type ở
     .taixiu-table-card). Đã thử qua nhiều mốc (4 → 4.5 → 5 → 6 → 6.5 → 5.5 → 5.2cqw), chỉnh lại
     4.6667cqw (= đúng 42px lúc khung bàn rộng 900px) theo yêu cầu — .taixiu-dice-row giữ nguyên
     11cqw (khoảng hở giữa 3 viên tăng lên vì viên nhỏ lại, không đụng tới vì user chỉ yêu cầu thu nhỏ
     viên, không yêu cầu đổi khoảng cách). */
  width: 4.6667cqw;
  height: 4.6667cqw;
}
.tx-die:nth-child(1) { left: 0; top: 0; }
.tx-die:nth-child(2) { right: 0; top: 0; }
.tx-die:nth-child(3) { left: 50%; bottom: 0; transform: translateX(-50%); }
/* perspective đặt ở lớp NGOÀI cùng preserve-3d (không phải chính .tx-die-cube) — đúng chuẩn CSS 3D:
   phần tử có perspective là "camera", phần tử preserve-3d bên trong nó mới thật sự xoay trong không
   gian đó. ~3.46x kích thước viên (tỉ lệ giữ nguyên như trước, 18/5.2), cho độ sâu vừa phải (quá lớn
   nhìn phẳng, quá nhỏ méo mó) — co theo đúng tỉ lệ khi viên nhỏ lại từ 5.2 xuống 4.6667cqw. */
.tx-die-scene {
  width: 100%;
  height: 100%;
  perspective: 16.15cqw;
}
.tx-die-cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  /* 3.9s — GẦN SÁT trọn cửa sổ hoạt động thật (LID_AUTO_OPEN_CUSHION_MS 3s + DICE_TUMBLE_EXTRA_MS 2s =
     5s, trừ hao ~1.1s do tickCountdown chỉ kiểm tra mỗi 1s nên lúc bắt đầu/kết thúc có thể trễ tới 1s)
     để khối THẬT SỰ CÒN ĐANG QUAY tới gần lúc bị stopDiceTumble() khoá cứng — bản cũ 2.5s khiến khối
     quay xong sớm (~giây 15.5) rồi ĐỨNG YÊN "dùng lại" mặt đã hạ cánh cho tới giây 17, nhìn như KHÔNG
     còn quay nữa dù nội bộ vẫn coi là active (đúng lỗi user phát hiện). Vẫn phải NGẮN HƠN mốc khoá cứng
     ở mọi trường hợp (không được bằng/vượt) để tránh bị cắt transform giữa chừng gây giật hình — xem
     stopDiceTumble() trong tai-xiu.html. cubic-bezier có chút nảy nhẹ cuối (0.4,1.05) giống hiệu ứng
     xúc xắc thật chạm đáy dĩa. */
  transition: transform 3.9s cubic-bezier(0.2, 0.85, 0.4, 1.05);
}
.tx-die-face {
  position: absolute;
  inset: 0;
  border-radius: 18%;
  overflow: hidden;
  background: #0044cc;
  box-shadow: inset 0 0 0.55cqw rgba(255, 255, 255, 0.5), 0 0.15cqw 0.35cqw rgba(0, 0, 0, 0.5);
  backface-visibility: hidden;
}
.tx-die-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 6 mặt ghép quanh tâm khối — tọa độ nghịch đảo của bảng ánh xạ FACE_ROTATIONS trong tai-xiu.html
   (xoay CẢ KHỐI theo đúng góc nghịch đảo của mặt N thì mặt N sẽ quay ra chính diện). Đổi 1 bên thì
   PHẢI đổi bên kia theo, 2 bảng này luôn phải khớp nhau. */
.tx-die-face-1 { transform: rotateY(0deg) translateZ(2.3333cqw); }
.tx-die-face-2 { transform: rotateY(180deg) translateZ(2.3333cqw); }
.tx-die-face-3 { transform: rotateY(90deg) translateZ(2.3333cqw); }
.tx-die-face-4 { transform: rotateY(-90deg) translateZ(2.3333cqw); }
.tx-die-face-5 { transform: rotateX(90deg) translateZ(2.3333cqw); }
.tx-die-face-6 { transform: rotateX(-90deg) translateZ(2.3333cqw); }
/* Trạng thái chờ (chưa có kết quả) — làm xám/mờ khối đi, tránh gây hiểu lầm là kết quả thật đã ra. Áp
   filter ở .tx-die-scene (NGOÀI ngữ cảnh preserve-3d của .tx-die-cube) để không ảnh hưởng cách trình
   duyệt dựng hình 3D bên trong. */
.tx-die-idle .tx-die-scene {
  filter: grayscale(1) brightness(0.75) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}
@media (prefers-reduced-motion: reduce) {
  .tx-die-cube { transition: none; }
}

/* Ảnh mặt xúc xắc cỡ nhỏ trong bảng "Lịch sử kỳ quay" (modal roundHistoryContainer) — thay cho
   .balls-row/.ball (ký hiệu bóng số ⚀⚁ dùng chung với các sảnh xổ số bóng khác, gây hiểu lầm Tài Xỉu
   cũng là xổ số bóng). Class riêng, KHÔNG đụng .balls-row/.ball gốc — các sảnh khác không đổi gì. */
.taixiu-history-dice-row {
  display: flex;
  gap: 4px;
  justify-content: center;
}
.taixiu-history-dice-face {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* Đúng khung "khe" trống có sẵn trong ảnh ban-tai-xiu.png (ngay dưới logo TÀI XỈU 5MB) — chỉ còn
   hiện "Kỳ #..", không hiện đếm ngược giây nữa (xem #countdown bị ẩn ở dưới). justify-content:center
   tự canh giữa dù số kỳ dài ngắn khác nhau, không cần chỉnh tay khi số kỳ tăng lên nhiều chữ số. */
.taixiu-top-slot {
  position: absolute;
  z-index: 5;
  left: 37.03%;
  right: 35.17%;
  top: 27.20%;
  height: 9.02%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  /* cqw thay vì vw — bám theo kích thước khung bàn thật (container-type ở .taixiu-table-card), không
     phải theo bề rộng cả trình duyệt, nên không còn lệch lúc zoom hay lúc khung nằm trong layout khác. */
  font-size: clamp(11px, 2.2cqw, 18px);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}
.taixiu-top-slot .locked { color: #ffd75e; }

/* Số giây đếm ngược hiện NGAY TRONG vòng tròn mặt dĩa/nắp — z-index cao hơn cả nắp (4) để luôn
   thấy được lúc đang mở cược (nắp đang đậy). Ẩn đi lúc nắp mở lộ kết quả (xem hàm
   openLidWithResult()/renderCenterIdle() trong tai-xiu.html) để không đè lên số xúc xắc/tổng điểm. */
/* Số giây to, kiểu chữ vàng nổi khối (giống mẫu tham khảo) — dùng nhiều lớp text-shadow xếp chồng
   để tạo hiệu ứng dập nổi kim loại thay vì chỉ đổ bóng phẳng. */
.taixiu-countdown-circle {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 59.5%;
  transform: translate(-50%, -50%);
  font-family: Anton, Arial, sans-serif;
  /* cqw thay vì vw — xem giải thích ở .taixiu-top-slot. Đưa font-size vào 1 biến CSS riêng
     (--txcd-fs) để viền chữ (text-stroke) + các lớp đổ bóng dập nổi bên dưới TÍNH THEO đúng size
     đó bằng calc() thay vì để px cố định — trước đây viền 1.5px + đổ bóng 1/2/4/6/9px LUÔN giữ
     nguyên kích thước dù chữ co nhỏ lại trên mobile (chạm sàn 40px), khiến hiệu ứng dập nổi vốn
     tinh tế ở size 72px trở nên quá dày/chồng lấn lên số quá nhỏ, nhìn mờ/nhoè/như bị lệch nét đúp
     (đúng lỗi trong ảnh chụp màn hình mobile). Co theo đúng tỉ lệ % font-size thì luôn giữ đúng độ
     dày tương đối bất kể size to/nhỏ ra sao. */
  --txcd-fs: clamp(24px, 8cqw, 72px);
  font-size: var(--txcd-fs);
  color: #ffe9a8;
  -webkit-text-stroke: calc(var(--txcd-fs) * 0.0208) #7a4a00;
  text-shadow:
    0 calc(var(--txcd-fs) * 0.0139) 0 #fff3cf,
    0 calc(var(--txcd-fs) * 0.0278) 0 #ffd75e,
    0 calc(var(--txcd-fs) * 0.0556) 0 #d69a00,
    0 calc(var(--txcd-fs) * 0.0833) 0 #a86e00,
    0 calc(var(--txcd-fs) * 0.125) calc(var(--txcd-fs) * 0.1944) rgba(0, 0, 0, 0.5);
}
.taixiu-countdown-circle.locked {
  color: #ffb3b3;
  -webkit-text-stroke: calc(var(--txcd-fs) * 0.0208) #7a0000;
  text-shadow:
    0 calc(var(--txcd-fs) * 0.0139) 0 #ffe0e0,
    0 calc(var(--txcd-fs) * 0.0278) 0 #ff6b6b,
    0 calc(var(--txcd-fs) * 0.0556) 0 #d61f1f,
    0 calc(var(--txcd-fs) * 0.0833) 0 #8f0000,
    0 calc(var(--txcd-fs) * 0.125) calc(var(--txcd-fs) * 0.1944) rgba(0, 0, 0, 0.5);
}
.taixiu-countdown-circle.hidden { display: none; }

.taixiu-side {
  position: absolute;
  z-index: 5;
  top: 30%;
  bottom: 14%;
  width: 22%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1cqw, 10px);
  text-align: center;
}
.taixiu-side-tai { left: 11%; }
.taixiu-side-xiu { right: 11%; }
/* Số người đang cược ở mỗi cửa kỳ này — TÁCH RIÊNG khỏi .taixiu-side-label/.taixiu-side-pot, chỉ
   để tạo cảm giác đông người chơi (giống pot tổng tiền), không ảnh hưởng cách tính thắng thua. */
.taixiu-side-users {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffe9a8;
  font-weight: 700;
  font-size: clamp(9px, 1.6cqw, 12px);
  font-variant-numeric: tabular-nums;
}
.taixiu-side-users svg {
  width: clamp(9px, 1.333cqw, 12px);
  height: clamp(9px, 1.333cqw, 12px);
  flex-shrink: 0;
  color: #ffd75e;
}
.taixiu-side-label {
  font-family: Anton, Arial, sans-serif;
  font-size: clamp(16px, 3.6cqw, 26px);
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
  transition: color 0.3s ease, transform 0.3s ease;
}
/* Logo chữ "TÀI"/"XỈU" (ảnh admin cung cấp, public/uploads/tai.png + xiu.png, canvas vuông 80x80px)
   thay cho text thường — cqw để co giãn đúng tỉ lệ theo khung bàn trên cả PC lẫn mobile (mobile đã có
   transform:scale(0.85) chung cho cả .taixiu-side ở @media 480px nên không cần chỉnh riêng ở đây). */
.taixiu-side-label-img {
  display: block;
  /* To hơn bản gốc (32/6.6cqw/48) — CHỈ áp dụng PC, xem override riêng ở @media(max-width:480px)
     giữ nguyên size cũ cho mobile. */
  width: clamp(38px, 7.6cqw, 56px);
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}
/* Bên thắng (Tài/Xỉu) sáng bừng lên đúng lúc mở nắp — bật/tắt qua JS trong commitLidOpen()/
   closeLidToIdle() (tai-xiu.html), không tự bật bằng CSS suy luận gì cả. */
@keyframes txResultWinPulse {
  0% { transform: scale(1); color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55); }
  35% {
    transform: scale(1.3);
    color: #ffe9a8;
    text-shadow: 0 0 14px rgba(255, 215, 94, 0.95), 0 0 30px rgba(255, 215, 94, 0.7), 0 2px 6px rgba(0, 0, 0, 0.55);
  }
  65% { transform: scale(1.05); }
  100% {
    transform: scale(1.12);
    color: #ffe9a8;
    text-shadow: 0 0 12px rgba(255, 215, 94, 0.85), 0 0 22px rgba(255, 215, 94, 0.5), 0 2px 6px rgba(0, 0, 0, 0.55);
  }
}
/* Nhấp nháy LIÊN TỤC sau cú "nhấp lên" ban đầu — bắt đầu đúng lúc mở nắp (dù khách tự mở sớm hay để
   máy tự mở ở giây cushion) tới hết giây 15 khi closeLidToIdle() xoá class .tx-result-win (tai-xiu.html).
   0%/100% khớp ĐÚNG state cuối của txResultWinPulse (scale 1.12, cùng text-shadow) để bàn giao mượt,
   không giật hình lúc chuyển từ hiệu ứng "nhấp lên" sang hiệu ứng "nhấp nháy lặp". */
@keyframes txResultWinBlink {
  0%, 100% {
    transform: scale(1.12);
    text-shadow: 0 0 12px rgba(255, 215, 94, 0.85), 0 0 22px rgba(255, 215, 94, 0.5), 0 2px 6px rgba(0, 0, 0, 0.55);
  }
  50% {
    transform: scale(1.22);
    text-shadow: 0 0 20px rgba(255, 215, 94, 1), 0 0 36px rgba(255, 215, 94, 0.85), 0 2px 6px rgba(0, 0, 0, 0.55);
  }
}
.taixiu-side-label.tx-result-win {
  color: #ffe9a8;
  animation:
    txResultWinPulse 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    txResultWinBlink 0.9s ease-in-out 0.7s infinite;
}
@media (prefers-reduced-motion: reduce) {
  .taixiu-side-label.tx-result-win {
    animation: none;
    color: #ffe9a8;
    text-shadow: 0 0 12px rgba(255, 215, 94, 0.85), 0 2px 6px rgba(0, 0, 0, 0.55);
  }
}
.taixiu-side-pot {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: clamp(14px, 3cqw, 20px);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
/* Hiệu ứng "bump" khi số (pot tiền cược / số người ảo) tăng lên — JS tự thêm/gỡ class này mỗi lần
   số tăng (xem animateNumberTo() trong tai-xiu.html), dùng chung cho mọi ô số nên để riêng 1 class
   tiện ích, không gắn cứng vào .taixiu-side-pot hay .taixiu-side-users. */
@keyframes taixiuBump {
  0% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(1.28); filter: brightness(1.6) drop-shadow(0 0 6px rgba(255, 215, 94, 0.9)); }
  100% { transform: scale(1); filter: brightness(1); }
}
.taixiu-bump {
  display: inline-block;
  animation: taixiuBump 0.6s ease;
}
@media (prefers-reduced-motion: reduce) {
  .taixiu-bump { animation: none; }
}
.taixiu-cuoc-btn {
  border: none;
  border-radius: 999px;
  /* .taixiu-side là flex column CAO CỐ ĐỊNH (top/bottom % của .taixiu-table-card) — thêm dòng
     .taixiu-side-mybet (số tiền đã cược) khiến tổng chiều cao 5 phần tử đôi khi vượt quá khung có sẵn
     trên màn hình rất nhỏ, và mặc định flex-shrink:1 sẽ tự ý co nút CƯỢC xuống thấp hơn cả sàn clamp()
     phía dưới (đã thấy co tới ~15px dù sàn đặt 24px) — khoá cứng không cho co, thà tràn nhẹ ra ngoài
     khung còn hơn nút bấm bị bóp nhỏ tới mức khó bấm trúng. */
  flex-shrink: 0;
  /* cqw có chặn sàn (clamp) để nút không bị nhỏ quá mức đọc được lúc khung bàn co lại rất nhỏ trên
     mobile — vẫn co giãn đúng tỉ lệ theo khung như các phần khác, chỉ không cho xuống dưới mức tối
     thiểu để bấm/đọc được. */
  width: clamp(64px, 11.111cqw, 100px);
  height: clamp(28px, 3.889cqw, 35px);
  /* Phải tự reset padding về 0 — không thì kế thừa "padding: 11px 20px" từ rule "button" chung của
     cả site (xem style.css dòng ~736), lúc bàn co nhỏ trên mobile chỉ còn ~24-28px cao mà riêng
     padding trên/dưới đã chiếm 22px, đẩy chữ CƯỢC lệch hẳn xuống dưới tâm nút (đúng lỗi user báo).
     Kèm flex để tự căn giữa chữ cả ngang lẫn dọc, không phụ thuộc padding/line-height mặc định. */
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: clamp(9px, 1.8cqw, 13px);
  letter-spacing: 0.5px;
  cursor: pointer;
  background: linear-gradient(180deg, #ffd75e, #d69a00);
  color: #4a2c00;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.taixiu-cuoc-btn:hover { transform: translateY(-1px); }
/* Đánh dấu cửa đang chọn bằng viền sáng NẰM BÊN TRONG (box-shadow inset) thay vì outline — outline
   vẽ ra phía NGOÀI viền nút nên trước đây bấm chọn/xoá làm nút trông như phình to rồi thu nhỏ lại
   theo đúng lúc thêm/bớt class "active". inset giữ nguyên y hệt kích thước hiển thị của nút dù đang
   chọn hay không, đồng nhất trên cả PC lẫn mobile (không phụ thuộc breakpoint). */
.taixiu-cuoc-btn.active { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 0 0 3px #fff; }
.taixiu-cuoc-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
/* Số điểm khách ĐÃ cược ở đúng cửa này trong kỳ hiện tại — CHỈ con số, không kèm nhãn/chữ nào khác
   (đúng yêu cầu). LUÔN chiếm sẵn chỗ (kể cả lúc rỗng, không dùng display:none) — .taixiu-side dùng
   justify-content:center nên nếu ẩn hẳn phần tử này lúc rỗng rồi cho xuất hiện lại lúc vừa cược xong,
   khối nội dung phía trên (số người/label/pot/nút CƯỢC) sẽ bị đẩy dịch lên do khối tổng cao thêm rồi
   tự căn giữa lại — giữ nguyên chỗ trống cố định để không bị xô lệch khi số bắt đầu hiện ra. */
.taixiu-side-mybet {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: clamp(11px, 2.2cqw, 15px);
  color: #ffe9a8;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  height: 1em;
  line-height: 1em;
  /* Cùng lý do flex-shrink:0 như .taixiu-cuoc-btn ở trên — không cho khoảng chờ cố định này bị bóp
     bằng 0 khi thiếu chỗ (sẽ vô tình lại tái hiện đúng lỗi "đội các dòng trên lên" đã sửa trước đó). */
  flex-shrink: 0;
}

.taixiu-below-board {
  margin-top: 14px;
}
/* Đúng khe "bảng cầu" có sẵn trong ảnh ban-tai-xiu.png (thanh ngang có chấm tròn, ngay trên viên
   kim cương đáy khung) — đo trực tiếp từ ảnh gốc, xem cách đo tương tự .taixiu-top-slot ở trên. */
.taixiu-history-dots {
  position: absolute;
  z-index: 5;
  left: 23.68%;
  right: 23.90%;
  top: 84.30%;
  height: 6.20%;
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: flex-end;
  overflow: hidden;
}
.taixiu-dot {
  width: clamp(10px, 1.778cqw, 16px);
  height: clamp(10px, 1.778cqw, 16px);
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
}
.taixiu-dot-tai { background: var(--gold); border-color: var(--gold-2); }
.taixiu-dot-xiu { background: #ffffff; }
/* 3 nút icon góc viền bàn (ảnh admin cung cấp, public/uploads/) — đóng modal Tài Xỉu ở Trang Chủ +
   mở 2 modal lịch sử (kỳ quay / cược khách hàng). cqw để luôn đúng tỉ lệ theo khung bàn, position
   theo % để bám đúng 4 góc viền dù bàn co giãn kích thước nào. */
.taixiu-corner-btn {
  position: absolute;
  z-index: 6;
  width: 50px;
  height: 50px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  transition: transform 0.12s ease;
}
.taixiu-corner-btn:hover { transform: scale(1.08); }
.taixiu-corner-btn img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* top:3%/bottom:3% đo trên CẢ khung .taixiu-table-card (gồm cả phần logo phượng hoàng phía trên đĩa
   cược, chiếm gần 1/4 chiều cao khung) — top:3% từng đặt nút Đóng lọt lên tận vùng logo, cách rất xa
   viền đĩa thật, không giống 3 ô vuông user khoanh (ngay cạnh viền đĩa, gần vòng đếm giờ/dãy chấm).
   Đổi lại theo đúng vị trí đã đo trên ảnh user gửi. */
.taixiu-corner-close { top: 34%; right: 8%; display: none; }
.tx-embed .taixiu-corner-close { display: block; }
.taixiu-corner-roundhistory { bottom: 15%; left: 8%; }
.taixiu-corner-bethistory { bottom: 15.5%; right: 8%; }
.taixiu-stake-bar {
  /* Mặc định ẨN VỀ MẶT THỊ GIÁC (visibility, không phải display:none) — vẫn CHIẾM ĐÚNG CHỖ trong
     layout dù chưa hiện, để .taixiu-shell/.tx-hall-modal-box luôn giữ nguyên 1 chiều cao cố định
     (504px) bất kể khách đã bấm CƯỢC hay chưa, không còn hiện tượng modal phóng to/co nhỏ theo lúc
     bấm cược nữa. Trước dùng display:none thì khung này co về 0 chiều cao, kéo theo cả modal co lại
     480px rồi lại phình ra 504px lúc bấm cược — đúng lỗi user báo. visibility:hidden vẫn giữ chỗ
     nhưng tự động không nhận click/tab được, không cần thêm pointer-events riêng. */
  visibility: hidden;
  opacity: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  /* Nhích lên trên 1 chút để khung này lại gần bàn cược hơn — margin gốc là 14px (thừa hưởng từ
     .taixiu-below-board), giảm còn ~6px. Không dùng margin âm lớn: margin % trong CSS luôn tính
     theo BỀ RỘNG khung chứa (~900px), nên -3% = -27px sẽ đẩy khung này chồng lên bàn và bị modal
     tự đo chiều cao cắt mất hẳn (đã test thấy lỗi này). Mức 0px bị cắt mất nửa hàng nút (dính sát
     mép dưới modal) — không dùng thấp hơn 6px. */
  margin-top: 6px;
}
.taixiu-stake-bar.show { visibility: visible; opacity: 1; }
.taixiu-stake-bar input {
  max-width: 160px;
  text-align: center;
  height: 34px;
  /* Đồng bộ tông vàng-gold với 3 nút bên cạnh (.taixiu-cuoc-btn) — input mặc định của site (bo góc
     vuông, viền xanh nhạt) lệch hẳn tông so với các nút vừa đổi, giữ nền trắng để số vẫn rõ, chỉ đổi
     viền/bo góc/màu chữ cho khớp bộ. */
  border-radius: 999px;
  border: 2px solid #d69a00;
  background: #fff;
  color: #4a2c00;
  font-weight: 800;
}
.taixiu-stake-bar input:focus {
  border-color: #ffd75e;
  box-shadow: 0 0 0 3px rgba(214, 154, 0, 0.25);
}
.taixiu-stake-bar button {
  height: 34px;
  /* Trước để inline style="width:auto;..." thẳng trong HTML (đè lên width:100% mặc định của
     button.primary/button) — chuyển hẳn vào đây để media query bên dưới còn override được lúc
     xuống mobile (inline style trong thẻ luôn thắng CSS ngoài dù có media query hay không). */
  width: auto;
  /* Canh chữ chính giữa cả ngang lẫn dọc — #guideBtn bọc chữ trong <span> con nên không tự động
     căn giữa hệt như 2 nút còn lại (chữ trần), dùng flex ở đây để cả 3 nút luôn khớp nhau. */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Đồng bộ y hệt mẫu + màu của .taixiu-cuoc-btn (nút CƯỢC vàng gold trên bàn) — bo tròn hẳn pill,
     gradient vàng, chữ nâu đậm, đổ bóng — thay cho kiểu .ghost/.primary mặc định của site trước đây. */
  border: none;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  background: linear-gradient(180deg, #ffd75e, #d69a00);
  color: #4a2c00;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.taixiu-stake-bar button:hover:not(:disabled) { transform: translateY(-1px); }
#betAllBtn { padding: 8px 14px; font-size: 12px; }
#playBtn { padding: 8px 20px; }
/* .taixiu-cuoc-btn:disabled dùng opacity:0.5 — hợp lý vì nó luôn nằm đè trên ảnh bàn ĐẶC, nhưng hàng
   nút này (.taixiu-stake-bar) có thể nằm trong modal nền TRONG SUỐT (xem .tx-hall-modal-box), dùng
   opacity sẽ lộ hẳn nội dung phía sau, nhìn như nút "trong suốt" (đã từng bị lỗi này). Nên giữ màu
   ĐẶC (opacity:1) cho trạng thái disabled thay vì copy y hệt opacity của mẫu — chỉ đồng bộ hình
   dáng/màu lúc BÌNH THƯỜNG, còn lúc disabled đổi riêng sang tông vàng nhạt đặc, không dùng opacity. */
#playBtn:disabled {
  opacity: 1;
  transform: none;
  background: linear-gradient(180deg, #f0e4c0, #d8c99a);
  color: #9c8a5c;
  box-shadow: none;
  cursor: not-allowed;
}
#guideBtn { padding: 8px 14px; }
/* Mobile: xếp cả 4 phần tử (ô nhập điểm + 3 nút) thành ĐÚNG 1 HÀNG NGANG, không cho xuống dòng —
   thu nhỏ gap/padding/font vừa đủ để tất cả nằm gọn trong bề rộng khung bàn (đã thu hẹp trên mobile),
   input cũng bớt max-width lại để nhường chỗ cho 3 nút. */
@media (max-width: 480px) {
  .taixiu-stake-bar {
    flex-wrap: nowrap;
    gap: 5px;
    /* Nhích thêm lên trên riêng cho mobile — mức chung 6px (PC) vẫn còn hơi xa so với bàn cược trên
       màn hình nhỏ. Không xuống dưới 3px: 0px từng bị cắt mất nửa hàng nút do dính sát mép dưới
       modal (xem giải thích ở rule .taixiu-stake-bar gốc, hiện áp dụng chung cho PC). */
    margin-top: 3px;
  }
  .taixiu-stake-bar input {
    max-width: none;
    flex: 1 1 0;
    min-width: 0;
    padding-left: 4px;
    padding-right: 4px;
  }
  .taixiu-stake-bar button {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
  }
  #betAllBtn { padding: 8px 8px; font-size: 11px; }
  #playBtn { padding: 8px 10px; font-size: 12.5px; }
  #guideBtn { padding: 8px 8px; font-size: 12.5px; }
}

.taixiu-chat-panel {
  position: relative;
  flex: 1 1 280px;
  max-width: 340px;
  min-width: 260px;
  height: 480px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.taixiu-chat-messages {
  flex: 1;
  overflow-y: auto;
  touch-action: pan-y;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.taixiu-chat-msg { font-size: 13px; line-height: 1.4; word-break: break-word; }
.taixiu-chat-msg .u { font-weight: 700; color: var(--accent); margin-right: 4px; }
.taixiu-chat-vip-badge {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: -3px;
  margin-right: 3px;
}
.taixiu-chat-input-row {
  position: relative; /* làm mốc để .taixiu-chat-emoji-panel tự bật lên đúng ngay phía trên hàng này */
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--border);
}
.taixiu-chat-input-row input { flex: 1; }
.taixiu-chat-input-row button { width: auto; padding: 0 16px; }
.taixiu-chat-emoji-btn {
  flex-shrink: 0;
  width: 36px;
  padding: 0;
  font-size: 17px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.taixiu-chat-emoji-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.taixiu-chat-emoji-panel {
  display: none;
  position: absolute;
  left: 10px;
  bottom: 100%;
  margin-bottom: 6px;
  width: 260px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.35);
  padding: 8px;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  z-index: 20;
}
.taixiu-chat-emoji-panel.show { display: grid; }
.taixiu-chat-emoji-item {
  width: 100%;
  padding: 4px 0 !important;
  font-size: 17px;
  line-height: 1;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.taixiu-chat-emoji-item:hover { background: var(--surface-2); }

.taixiu-nickname-modal-box {
  max-width: 380px;
  height: auto;
  text-align: left;
}
.taixiu-nickname-modal-title { margin: 0 0 10px; font-size: 19px; }
.taixiu-nickname-modal-desc { margin: 0 0 18px; color: var(--text-dim); font-size: 14px; line-height: 1.6; }
.taixiu-nickname-input { text-align: left; }
.taixiu-nickname-error {
  min-height: 18px;
  margin-top: 8px;
  color: #ff5c5c;
  font-size: 13px;
  line-height: 1.4;
}
.taixiu-nickname-save-btn { margin-top: 14px; }

@media (max-width: 900px) {
  /* .taixiu-shell chuyển sang column: trục chính đổi thành chiều dọc, nên flex-basis 620px của
     .taixiu-table-card (đặt cho trục ngang lúc flex-direction:row) sẽ bị hiểu nhầm thành chiều CAO
     cố định, đè lên aspect-ratio và tạo khoảng trắng thừa rất lớn — phải reset về flex:none để
     chiều cao tự tính lại đúng theo aspect-ratio khi xếp dọc. */
  .taixiu-shell { flex-direction: column; align-items: stretch; }
  .taixiu-table-col { flex: none; max-width: none; }
  .taixiu-chat-panel { max-width: none; height: 340px; }
}

/* ================= Chat công khai — Lottery CN (ngu-long.html) + Lottery US (game.html) =================
   Thêm khung chat bên cạnh .hero-panel mà KHÔNG đụng .hero-grid/.hero-col gốc (2 class đó vẫn đang
   dùng nguyên vẹn ở home.html lobby preview và chính 2 trang này cho phần .hero-col bên trong) — chỉ
   thay ĐÚNG cấu trúc bọc ngoài: .hero-row (hàng chứa khối hero thu gọn + khung chat) > .hero-compact
   (gộp lại 4 ô cũ: 2 ô nhỏ đếm giờ+số kỳ xếp 1 hàng trong .hero-compact-top, 2 ô kết quả xếp full-width
   bên dưới) — nhường chỗ ngang cho khung chat, xem bản phác thảo đã duyệt trước khi code. Style chat
   phỏng theo đúng .taixiu-chat-panel (Tài Xỉu) nhưng đặt tên riêng "hall-chat-*" vì đây là chat của
   Lottery CN/US chứ không phải Tài Xỉu — không dùng chung class để tránh nhầm lẫn khi debug DevTools. */
/* flex:1 + width:100% BẮT BUỘC phải có — .hero-panel (cha) cũng là flex container, .hero-row là flex
   item của nó nên mặc định flex-grow:0 sẽ chỉ co vừa đúng nội dung (không tự lấp đầy hàng), giống hệt
   lý do .hero-grid gốc cũng có 2 dòng này. Thiếu nó gây ra khoảng trắng rất lớn bên phải khung chat. */
.hero-row { display: flex; gap: 18px; align-items: stretch; flex: 1; width: 100%; }
.hero-compact { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-width: 0; }
.hero-compact-top { display: flex; gap: 10px; }
.hero-compact-top .hero-col { flex: 1; }
/* Bóng kết quả riêng cho Lottery CN/US (trong .hero-compact) — nhỏ hơn .ball mặc định (44px) vì khối
   hero giờ hẹp hơn trước (chia sẻ chỗ với khung chat). Scope qua .hero-compact để KHÔNG đụng tới các
   nơi khác cũng dùng class .ball (bảng lịch sử, home.html lobby preview, các sảnh lottery khác...). */
.hero-compact .balls-row .ball { width: 34px; height: 34px; font-size: 14px; }

.hall-chat-panel {
  position: relative;
  flex: 0 0 350px;
  width: 350px;
  height: 480px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hall-chat-messages { flex: 1; overflow-y: auto; touch-action: pan-y; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.hall-chat-msg { font-size: 13px; line-height: 1.4; word-break: break-word; }
.hall-chat-msg .u { font-weight: 700; color: var(--accent); margin-right: 4px; }
.hall-chat-vip-badge { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; margin-right: 3px; }
.hall-chat-input-row { position: relative; display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
.hall-chat-input-row input { flex: 1; }
.hall-chat-input-row button { width: auto; padding: 0 16px; }
.hall-chat-emoji-btn {
  flex-shrink: 0;
  width: 36px;
  padding: 0;
  font-size: 17px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.hall-chat-emoji-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.hall-chat-emoji-panel {
  display: none;
  position: absolute;
  left: 10px;
  bottom: 100%;
  margin-bottom: 6px;
  width: 260px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.35);
  padding: 8px;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  z-index: 20;
}
.hall-chat-emoji-panel.show { display: grid; }
.hall-chat-emoji-item {
  width: 100%;
  padding: 4px 0 !important;
  font-size: 17px;
  line-height: 1;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.hall-chat-emoji-item:hover { background: var(--surface-2); }

.hall-nickname-modal-box { max-width: 380px; height: auto; text-align: left; }
.hall-nickname-modal-title { margin: 0 0 10px; font-size: 19px; }
.hall-nickname-modal-desc { margin: 0 0 18px; color: var(--text-dim); font-size: 14px; line-height: 1.6; }
.hall-nickname-input { text-align: left; }
.hall-nickname-error { min-height: 18px; margin-top: 8px; color: #ff5c5c; font-size: 13px; line-height: 1.4; }
.hall-nickname-save-btn { margin-top: 14px; }

@media (max-width: 760px) {
  /* Ngưỡng riêng 760px (khác 640px của .hero-grid gốc) vì khối .hero-row giờ RỘNG HƠN hero-grid cũ
     (thêm khung chat bên cạnh) nên cần xuống dòng sớm hơn mới đủ chỗ đọc quả bóng kết quả. */
  .hero-row { flex-direction: column; align-items: stretch; }
  .hall-chat-panel { flex: none; width: 100%; height: 300px; }
}

/* Ngưỡng 640px riêng cho kích thước quả bóng (khác breakpoint 760px xếp cột ở trên) — ĐẶT SAU rule
   PC (base .hero-compact .balls-row .ball) trong file vì specificity bằng nhau (0,3,0): nếu đặt
   TRƯỚC (như bản cũ ở khối 640px phía trên) sẽ luôn bị rule PC ghi đè bất kể màn hình, do CSS phân
   thắng thua theo thứ tự xuất hiện khi độ đặc hiệu bằng nhau — đúng lỗi user báo "bóng vẫn to". */
@media (max-width: 640px) {
  .hero-compact .balls-row .ball { width: 28px; height: 28px; font-size: 12px; }
}

/* ================= Chat công khai — Lottery 18 VN + Lottery 27 VN =================
   2 sảnh này KHÔNG dùng .hero-panel/.hero-grid như CN/US mà dùng bảng kết quả kiểu xổ số truyền
   thống (.lb-results-card, xem lotobet-18.html/lotobet-27.html) — chiều cao bảng co giãn theo dữ
   liệu thật (số lượng số trúng mỗi giải không cố định) nên KHÔNG dùng align-items:stretch để khung
   chat tự giãn theo (rủi ro: overflow-y:auto bên trong cần 1 chiều cao CỐ ĐỊNH của cha để hoạt động
   đúng, giống hệt bài học từ .hero-compact trước đó) — thay vào đó .lb-chat dùng chiều cao CỐ ĐỊNH
   450px (đo thực tế .lb-results-card ở cả 2 sảnh đều ~450px), bảng kết quả giữ nguyên chiều cao tự
   nhiên của nó, không ép theo chat. */
.lb-row { display: flex; gap: 14px; align-items: flex-start; }
.lb-row > .lb-results-card { flex: 1 1 auto; min-width: 0; }
.hall-chat-panel.lb-chat { flex: 0 0 300px; width: 300px; height: 450px; }

@media (max-width: 720px) {
  /* Cùng ngưỡng 720px mà .lb-results-grid gốc đã dùng để xếp cột — xuống dòng đúng lúc bảng kết quả
     cũng chuyển sang xếp dọc, tránh 2 breakpoint lệch nhau gây khoảng giữa bố cục nhìn rối. */
  .lb-row { flex-direction: column; }
  .hall-chat-panel.lb-chat { width: 100%; height: 280px; }
}

@media (max-width: 480px) {
  .taixiu-side {
    top: 27%;
    /* Các clamp() ở .taixiu-side-users/-label/-pot/.taixiu-cuoc-btn đều có SÀN tối thiểu bằng px
       (để không nhỏ tới mức không đọc/bấm được) — trên màn hình điện thoại thật, khung bàn co lại
       khá nhỏ nên hầu hết đã tụt xuống đúng mức sàn đó rồi, nhìn hơi to so với dĩa. Thu nhỏ nguyên
       CẢ CỤM (badge số người + chữ Tài/Xỉu + tiền cược + nút CƯỢC) lại 1 chút bằng scale thay vì hạ
       từng sàn riêng lẻ, để cả cụm co đều theo đúng tỉ lệ ban đầu, không lệch nhau. */
    transform: scale(0.85);
    /* Từ lúc thêm dòng .taixiu-side-mybet (5 phần tử thay vì 4), tổng chiều cao ở SÀN tối thiểu đôi
       khi vượt khung cao cố định (top/bottom % ở trên) trên màn hình rất nhỏ — giảm khoảng cách dòng
       riêng cho mobile để nhường thêm chỗ, ưu tiên hơn PC (vẫn giữ clamp(4px,1cqw,10px) chung). */
    gap: clamp(2px, 1cqw, 10px);
  }
  /* Riêng badge số người cược (.taixiu-side-users) thu nhỏ thêm 15% NỮA trên mobile — cộng dồn với
     scale(0.85) của cả cụm .taixiu-side ở trên (0.85 x 0.85 ≈ 0.7225 so với kích thước gốc), vì badge
     này nhìn to/lệch tỉ lệ so với phần còn lại trên màn hình điện thoại thật. transform-origin mặc
     định là center nên vẫn giữ đúng vị trí, chỉ nhỏ lại tại chỗ, không lệch hàng. */
  .taixiu-side-users {
    transform: scale(0.85);
  }
  /* Logo chữ TÀI/XỈU vừa tăng size riêng cho PC (38/7.6cqw/56, xem .taixiu-side-label-img gốc) — giữ
     NGUYÊN size cũ ở đây cho mobile, không tăng theo PC. */
  .taixiu-side-label-img {
    width: clamp(32px, 6.6cqw, 48px);
  }
  /* Riêng badge Xỉu dịch thêm qua trái một chút trên mobile — giữ nguyên scale(0.85) ở trên, chỉ
     cộng thêm translateX (transform sau cùng ghi đè cả cụm, phải gộp chung 1 khai báo). */
  .taixiu-side-xiu .taixiu-side-users {
    transform: scale(0.85) translateX(-6px);
  }
  /* Riêng cột Xỉu dịch qua trái thêm 1% trên mobile — right tăng từ 11% lên 12% (right đo từ mép
     phải nên right CÀNG LỚN thì cụm càng dịch vào trong/sang trái). Chỉ áp dụng mobile, PC giữ
     nguyên 11%. */
  .taixiu-side-xiu {
    right: 12%;
  }
  /* Tương tự, cột Tài dịch qua phải thêm 1% trên mobile — left tăng từ 11% lên 12% (left đo từ mép
     trái nên left CÀNG LỚN thì cụm càng dịch vào trong/sang phải). Chỉ áp dụng mobile, PC giữ
     nguyên 11%. */
  .taixiu-side-tai {
    left: 12%;
  }
  /* Thu nhỏ riêng kích thước nút CƯỢC ~15% trên mobile — PC giữ nguyên clamp gốc. CHỈ đổi width/
     height, cố tình KHÔNG đụng vào font-size (giữ nguyên clamp(9px, 1.8cqw, 13px) gốc) để chữ CƯỢC
     không bị thu nhỏ theo, đúng yêu cầu. */
  .taixiu-cuoc-btn {
    width: clamp(54px, 9.444cqw, 85px);
    height: clamp(24px, 3.306cqw, 30px);
  }
  /* Hạ sàn tối thiểu của chấm bảng cầu xuống đúng 8x8px trên mobile — sàn cũ 10px (từ clamp() ở
     .taixiu-dot) hơi to so với khung bàn đã co nhỏ, .trimHistoryDotsToFit() trong tai-xiu.html vẫn
     tự tính lại số chấm vừa khít theo kích thước mới này, không cần sửa gì thêm ở JS. */
  .taixiu-dot {
    width: 8px;
    height: 8px;
  }
  /* Khoảng cách giữa các chấm — thu từ 5px (PC) xuống 1.6px riêng trên mobile, PC giữ nguyên 5px. */
  .taixiu-history-dots {
    gap: 1.6px;
  }
  /* 3 nút góc (Đóng/lịch sử cầu/lịch sử cược) đang cố định 50x50px cho PC (khung bàn ~900px rộng —
     50px ≈ 5.5% bề rộng khung). Trên mobile khung bàn co lại chỉ còn ~374px, giữ nguyên 50px sẽ chiếm
     tới ~13% bề rộng, đè lên chữ Tài/Xỉu và dãy chấm lịch sử. Giảm xuống 22px để giữ đúng tỉ lệ ~5.5%
     như PC (vị trí % top/right/bottom/left giữ nguyên, vẫn bám đúng góc). */
  .taixiu-corner-btn {
    width: 22px;
    height: 22px;
  }
  /* Modal "Lịch sử kỳ quay" trên mobile — TRẦN 420px (PC vẫn 720x520, xem max-width:720px inline ở
     tai-xiu.html), nhưng vẫn giữ width:100% gốc của .modal-box để tự co nhỏ lại đúng bề rộng khả dụng
     trên các máy hẹp hơn 420px + padding (.modal-overlay padding:20px mỗi bên) — không ép cứng width
     cố định, tránh tràn/cắt mép phải như bản đầu (user báo lỗi, yêu cầu "tuỳ biến chứ không phải sửa
     đi" cho các màn hình nhỏ hơn). Máy đủ rộng (≥460px) mới đạt đúng 420px như yêu cầu. */
  #roundHistoryModalOverlay .modal-box {
    max-width: 420px;
  }
}

/* Chế độ nhúng qua iframe trong modal ở Trang Chủ (?embed=1 — xem renderTaiXiu() trong server.js +
   .tx-home-fab/.tx-hall-modal-* trong home.html/style.css) — CHỈ hiện đúng bàn cược + chat
   (.taixiu-shell), ẩn hết phần "vỏ trang" (topbar, banner demo) và cho nền TRONG SUỐT để lộ lớp nền
   tối mờ của modal phía sau thay vì nền trắng/gradient thường. Trang không còn thanh chuyển sảnh
   (.hall-tabs) hay 2 bảng lịch sử dạng "card" cuộn trang nữa — đã bỏ hẳn, chuyển thành modal + 3 nút
   góc bàn (.taixiu-corner-btn) dùng chung cho cả trang /tai-xiu/ độc lập lẫn khi nhúng. */
.tx-embed { background: transparent !important; }
.tx-embed .topbar,
.tx-embed #demoBanner { display: none; }
.tx-embed .wrap { padding: 0; max-width: none; }
.tx-embed .taixiu-shell { justify-content: center; }
/* body{min-height:100vh} ở đầu file.css (cho trang thường luôn phủ nền hết chiều cao màn hình) vô
   tình gây VÒNG LẶP TỰ KHOÁ trong iframe nhúng: 100vh ở đây luôn bằng đúng chiều cao HIỆN TẠI của
   iframe (không phải màn hình thật), nên body.scrollHeight không bao giờ co lại nhỏ hơn lần đo trước
   — reportSize() (script cuối file) lấy max(shellHeight, body.scrollHeight) nên bị kẹt mãi ở mốc mặc
   định 560px dù nội dung thật chỉ 480px, để lại khoảng trống lộ nền Trang Chủ phía sau (đúng lỗi user
   báo "bàn nhìn lệch"). Bỏ hẳn min-height ở đây — trong iframe nhúng không cần phủ nền hết màn hình,
   .taixiu-shell tự quyết định chiều cao thật. */
.tx-embed { min-height: 0; }
/* body { padding-bottom: 104px } ở @media(max-width:640px) phía trên vốn để chừa chỗ cho thanh menu
   nổi cố định dưới cùng CỦA TRANG CHỦ (CSKH/Khuyến Mãi/Trang Chủ/VIP/Giới thiệu) — trang tai-xiu.html
   này thật ra không có thanh đó, nhưng vẫn ăn chung rule body nên luôn dư ra 104px trống ở cuối trang.
   Trên trang /tai-xiu/ độc lập thì 104px trống này gần như vô hại (cuối trang dài, cuộn tới cũng
   không ai để ý). Nhưng trong iframe nhúng ở modal thì đây chính là NGUYÊN NHÂN gây ra thanh cuộn dọc
   mờ trên mobile: script báo kích thước (postMessage) đo đúng .taixiu-shell (không có 104px này),
   nhưng NỘI DUNG TRANG THẬT vẫn cao hơn iframe đúng 104px đó, nên trang tự cuộn nội bộ để lộ hết phần
   dư — chính là "thanh cuộn mờ màu xanh" user báo. Bỏ hẳn padding này trong chế độ nhúng. */
.tx-embed { padding-bottom: 0; }