:root {
  color-scheme: dark;
  --bg: #0f172a;
  --panel: #111827;
  --muted: #94a3b8;
  --text: #e5e7eb;
  --brand: #38bdf8;
  --brand-2: #22c55e;
  --danger: #f87171;
  --warn: #f59e0b;
  --border: #263244;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #1e293b, var(--bg));
  color: var(--text);
}
a { color: var(--brand); text-decoration: none; }
.shell { width: min(1440px, calc(100vw - 20px)); margin: 0 auto; padding: 12px 0 20px; }
.nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.brand { font-size: 18px; font-weight: 800; letter-spacing: -0.03em; }
.card { background: rgba(17, 24, 39, 0.88); border: 1px solid var(--border); border-radius: 12px; padding: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22); }
.grid { display: grid; grid-template-columns: 360px 1fr; gap: 18px; align-items: start; }
.pos-grid { display: grid; grid-template-columns: minmax(210px, 19%) minmax(400px, 1fr) minmax(300px, 30%); gap: 10px; align-items: start; }
.pos-grid > .card { overflow: visible; min-width: 0; }
.admin-grid { display: grid; grid-template-columns: 230px 1fr; gap: 14px; align-items: start; }
.login { max-width: 430px; margin: 12vh auto; }
h1, h2, h3 { margin: 0 0 8px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
p { color: var(--muted); line-height: 1.5; }
label { display: block; margin: 8px 0 4px; color: #cbd5e1; font-size: 13px; }
input, select, textarea, button {
  width: 100%; border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px;
  background: #0b1220; color: var(--text); font: inherit;
}
textarea { min-height: 150px; resize: vertical; }
.fast-input { min-height: 260px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; line-height: 1.45; }
button { cursor: pointer; border: 0; background: linear-gradient(135deg, var(--brand), #2563eb); font-weight: 700; margin-top: 10px; }
button:disabled { cursor: not-allowed; filter: grayscale(1); opacity: .55; }
button.secondary { background: #1f2937; border: 1px solid var(--border); }
button.success { background: linear-gradient(135deg, var(--brand-2), #15803d); }
.chip-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0; }
.chip { width: auto; margin: 0; padding: 5px 9px; border-radius: 999px; background: #162033; border: 1px solid var(--border); font-size: 12px; }
.tabs { display: flex; gap: 7px; margin: 12px 0; }
.tab { width: auto; margin: 0; padding: 9px 12px; background: #101827; border: 1px solid var(--border); }
.tab.active { background: linear-gradient(135deg, #0369a1, #1d4ed8); }
.panel[hidden] { display: none; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.toolbar { display: flex; gap: 10px; align-items: center; }
.toolbar button { width: auto; margin-top: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0; }
.stat { background: #0b1220; border: 1px solid var(--border); border-radius: 10px; padding: 9px; }
.stat span { display: block; color: var(--muted); font-size: 12px; }
.stat strong { display: block; font-size: 16px; margin-top: 3px; }
.clock { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 18px; font-weight: 800; }
.clock.hot { color: var(--danger); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.channel-list label, .dense-check label { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.channel-list input, .dense-check input { width: auto; }
.channel-card { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; background: #0b1220; border: 1px solid var(--border); border-radius: 9px; padding: 7px 9px; margin: 6px 0; font-size: 13px; }
.channel-main { font-weight: 800; }
.channel-code { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; }
.badge { display: inline-flex; border-radius: 999px; padding: 4px 8px; font-size: 11px; border: 1px solid var(--border); color: #cbd5e1; background: #101827; }
.badge.primary { color: #bae6fd; border-color: #0369a1; background: rgba(14, 116, 144, .22); }
.line-preview { display: grid; gap: 6px; margin: 10px 0; max-height: 180px; overflow: auto; }
.line-ok, .line-error { border-radius: 10px; padding: 8px 10px; font-size: 13px; border: 1px solid var(--border); }
.line-ok { background: rgba(34, 197, 94, .09); color: #bbf7d0; }
.line-error { background: rgba(248, 113, 113, .12); color: #fecaca; }
.number-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.number-grid.grid-3d { grid-template-columns: repeat(10, 1fr); max-height: 360px; overflow: auto; }
.number-grid.grid-3d .num-cell { padding: 5px 0; font-size: 11px; }
.picked-wrap { max-height: 220px; }
.bet-type-list { display: flex; flex-wrap: wrap; gap: 8px; }
.bet-type-item { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 10px; background: #101827; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; }
.bet-type-item input { width: auto; margin: 0; }
.picked-wrap table { min-width: 0; }
.point-input { width: 100%; margin: 0; padding: 6px 8px; }
#picked-points td { padding: 6px 10px; }
.num-cell { margin: 0; padding: 6px 0; font-size: 13px; background: #0b1220; border: 1px solid var(--border); border-radius: 7px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.num-cell.selected { background: #0e7490; color: white; }
.num-cell.warn { background: rgba(245, 158, 11, .28); border-color: var(--warn); }
.num-cell.danger { background: rgba(248, 113, 113, .30); border-color: var(--danger); animation: pulse 1s infinite; }
.heatmap { display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px; }
.heat-cell { border: 1px solid var(--border); border-radius: 12px; padding: 9px; background: #0b1220; min-height: 82px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.heat-cell.safe { border-color: #166534; background: rgba(34, 197, 94, .08); }
.heat-cell.warn { border-color: var(--warn); background: rgba(245, 158, 11, .14); }
.heat-cell.danger { border-color: var(--danger); background: rgba(248, 113, 113, .17); animation: pulse 1s infinite; }
.heat-number { font-size: 20px; font-weight: 900; }
.side-menu { display: grid; gap: 8px; position: sticky; top: 14px; }
.side-menu button { margin: 0; text-align: left; background: #101827; border: 1px solid var(--border); }
.side-menu button.active { background: linear-gradient(135deg, #0369a1, #1d4ed8); }
.section[hidden] { display: none; }
.table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: 14px; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--border); font-size: 13px; }
th { color: #cbd5e1; background: #0b1220; position: sticky; top: 0; }
.muted { color: var(--muted); }
.error { color: var(--danger); white-space: pre-wrap; }
.ok { color: var(--brand-2); white-space: pre-wrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
pre { white-space: pre-wrap; background: #0b1220; border: 1px solid var(--border); border-radius: 14px; padding: 14px; max-height: 430px; overflow: auto; }
@media (max-width: 1100px) {
  .pos-grid, .admin-grid { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .pos-grid > .card { overflow: visible; }
  .number-grid.grid-3d { max-height: 300px; }
}
@media (max-width: 900px) {
  .grid, .row, .stat-grid { grid-template-columns: 1fr; }
  .toolbar { flex-wrap: wrap; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  body { font-size: 15px; }
  .shell { width: 100%; max-width: 100%; margin: 0; padding: 10px 12px; }
  .nav { flex-wrap: wrap; gap: 8px; }
  .number-grid { grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .num-cell { padding: 11px 0; font-size: 15px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .bet-type-list { gap: 6px; }
  .bet-type-item { flex: 1 1 45%; }
  th, td { padding: 8px 9px; font-size: 13px; }
  /* member: bảng ít cột -> co vừa khung; admin: cuộn ngang */
  .pos-grid table { min-width: 0; }
  .admin-grid table { min-width: 560px; }
  .admin-grid .card { padding: 12px; }
  .bet-card { flex: 1 1 42%; }
}

/* ===== Redesign UX v20261016-5 ===== */
.card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.card-head h2 { margin: 0; }
.step-badge { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), #2563eb); color: #fff; font-weight: 800; font-size: 13px; flex: none; }
.hint { font-size: 12px; margin: 4px 0 10px; }

/* Bet type -> selectable cards, touch target >= 44px */
.bet-type-cards { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.bet-card { display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 96px; padding: 0 14px; margin: 0; border: 1.5px solid var(--border); border-radius: 12px; background: #0b1220; cursor: pointer; transition: all .12s; flex: 1 1 auto; }
.bet-card input { display: none; }
.bet-card-label { font-weight: 600; font-size: 14px; color: #cbd5e1; }
.bet-card.on { border-color: var(--brand); background: rgba(37, 99, 235, .18); }
.bet-card.on .bet-card-label { color: #bfdbfe; }

/* Smart input row */
.smart-row { display: flex; gap: 8px; margin-bottom: 6px; }
.smart-row input { flex: 1; min-height: 44px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 15px; }
.smart-row button { width: auto; margin: 0; white-space: nowrap; min-height: 44px; }

/* Quick filters -> horizontal scroll chips */
.chip-scroll { display: flex; gap: 7px; overflow-x: auto; padding: 4px 0 8px; margin-bottom: 4px; -webkit-overflow-scrolling: touch; }
.chip-scroll::-webkit-scrollbar { height: 5px; }
.chip-scroll .chip { flex: none; white-space: nowrap; min-height: 36px; }
.danger-chip { color: #fecaca; border-color: rgba(248,113,113,.5); background: rgba(248,113,113,.12); }

/* Range row inline */
.range-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.range-row input { width: auto; flex: 1 1 90px; margin: 0; }
.range-row .arrow { color: var(--muted); }
.range-row .inline-check { display: inline-flex; align-items: center; gap: 5px; margin: 0; width: auto; white-space: nowrap; font-size: 13px; }
.range-row .inline-check input { width: auto; margin: 0; }
.range-row button { width: auto; margin: 0; white-space: nowrap; }

/* Collapsible grid */
.grid-collapse { border: 1px solid var(--border); border-radius: 10px; margin: 10px 0; background: #0b1220; }
.grid-collapse > summary { cursor: pointer; padding: 11px 13px; font-weight: 600; color: #cbd5e1; list-style: none; user-select: none; }
.grid-collapse > summary::-webkit-details-marker { display: none; }
.grid-collapse > summary::before { content: '▸ '; color: var(--brand); }
.grid-collapse[open] > summary::before { content: '▾ '; }
.grid-collapse #number-grid { padding: 0 10px 12px; }

/* Button variants */
button.outline { background: transparent; border: 1.5px solid var(--brand); color: #bfdbfe; margin: 0; width: auto; }
button.ghost { background: #1f2937; border: 1px solid var(--border); color: #cbd5e1; margin: 0; width: auto; }
button.danger-outline { background: transparent; border: 1.5px solid rgba(248,113,113,.55); color: #fecaca; margin-top: 10px; }

/* Sticky bottom bar (chốt bill) */
.sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: rgba(15, 23, 42, .97); border-top: 1px solid var(--border); backdrop-filter: blur(8px); box-shadow: 0 -8px 30px rgba(0,0,0,.35); }
.sticky-info { display: flex; flex-direction: column; line-height: 1.2; }
.sticky-info .muted { font-size: 12px; }
.sticky-info strong { font-size: 20px; color: var(--brand-2); }
.place-btn { margin: 0; margin-left: auto; width: auto; min-width: 180px; min-height: 48px; font-size: 16px; font-weight: 800; background: linear-gradient(135deg, var(--brand-2), #15803d); border-radius: 12px; }
.place-btn:disabled { filter: grayscale(.7); opacity: .5; }


/* ===== Redesign v20261016-6 fixes ===== */
/* Card thở hơn */
.card { padding: 16px; }
.card-head { margin-bottom: 14px; }

/* Bet type cards: gap rộng hơn, dễ bấm */
.bet-type-cards { gap: 10px; margin: 6px 0 10px; }
.bet-card { min-height: 46px; }

/* Smart row: nút + Thêm nổi bật */
.smart-row button.success { background: linear-gradient(135deg, var(--brand-2), #15803d); min-width: 96px; }
.nowrap { white-space: nowrap; }

/* Filter row: chips scroll + nút xoá icon tách riêng */
.filter-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.filter-row .chip-scroll { flex: 1; margin: 0; padding: 2px 0; }
.icon-btn { flex: none; width: 40px; height: 40px; margin: 0; padding: 0; border-radius: 10px; background: #1f2937; border: 1px solid var(--border); font-size: 16px; }
.icon-btn:hover { background: rgba(248,113,113,.18); border-color: rgba(248,113,113,.5); }

/* Grid footer trong details */
.grid-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px 10px; }

/* Sticky bar: nền đậm đục, đổ bóng, không trong suốt đè chữ */
.sticky-bar { background: #0b1220; box-shadow: 0 -10px 30px rgba(0,0,0,.55); border-top: 1px solid #334155; }

/* ===== Footer nav + Modal v20261016-7 ===== */
:root { --footer-h: 58px; --bar-h: 64px; }

/* Sticky bill bar nằm NGAY TRÊN footer nav */
.sticky-bar { bottom: var(--footer-h); }

/* Footer nav icon menu */
.footer-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: var(--footer-h); display: grid; grid-template-columns: repeat(4, 1fr); background: #0b1220; border-top: 1px solid #334155; box-shadow: 0 -4px 20px rgba(0,0,0,.4); }
.fnav { margin: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #cbd5e1; font-size: 11px; font-weight: 600; cursor: pointer; }
.fnav:hover, .fnav:focus { background: rgba(37,99,235,.14); color: #bfdbfe; }
.fnav-ico { font-size: 19px; line-height: 1; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
.modal-overlay[hidden] { display: none; }
.modal-box { width: min(560px, 100%); max-height: 85vh; display: flex; flex-direction: column; background: #111827; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: popIn .16s ease; }
@keyframes slideUp { from { transform: translateY(40px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
@keyframes popIn { from { transform: scale(.96); opacity: .5; } to { transform: scale(1); opacity: 1; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.modal-head h2 { margin: 0; font-size: 17px; }
.modal-body { padding: 14px 16px; overflow: auto; }
.modal-body .kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--border); }
.modal-body .kv span { color: var(--muted); }
.modal-body .kv strong { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

/* Card 1 chỉ còn đồng hồ đóng sổ */
.stat-grid-1 { grid-template-columns: 1fr; }
.stat-grid-1 .stat { text-align: center; }
.stat-grid-1 .clock { font-size: 24px; }

/* ===== Compact v20261016-9 ===== */
/* Header clock */
.header-clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; margin-right: 6px; }
.header-clock .clock { font-size: 18px; }
.tiny { font-size: 11px; }
.tiny-label { font-size: 12px; margin: 2px 0 5px; }

/* Giảm gap giữa 3 card */
.pos-grid { gap: 8px; }
.card { padding: 13px; }
.card-head { margin-bottom: 10px; }
h2 { font-size: 15px; }

/* Đài dạng chips */
.channel-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.channel-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 38px; padding: 0 11px; margin: 0; border: 1.5px solid var(--border); border-radius: 10px; background: #0b1220; color: #cbd5e1; font-size: 13px; cursor: pointer; }
.channel-chip .cc-code { color: var(--muted); font-size: 11px; font-family: ui-monospace, monospace; }
.channel-chip.on { border-color: var(--brand); background: rgba(37,99,235,.18); color: #bfdbfe; }

/* Inline mode select + hint cùng dòng */
.inline-fields { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.mode-select { width: auto; flex: none; min-width: 190px; margin: 0; }
.inline-fields .hint { margin: 0; flex: 1; }
.hint { font-size: 11px; }

/* Ô điểm nhỏ trong smart row */
.pts-input { width: 78px; flex: none; margin: 0; text-align: center; }

/* Card 3 stat phẳng không viền, 4 cột 1 dòng */
.stat-flat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 10px; }
.stat-flat > div { text-align: center; padding: 4px 2px; }
.stat-flat span { display: block; color: var(--muted); font-size: 11px; }
.stat-flat strong { display: block; font-size: 15px; margin-top: 2px; }

/* ===== Force compact rows v20261016-10 ===== */
/* Ngày + Miền luôn nằm ngang 50/50, kể cả mobile */
.pos-grid .row { grid-template-columns: 1fr 1fr !important; gap: 8px; }
/* Stat phơi luôn 4 cột 1 hàng */
.stat-flat { grid-template-columns: repeat(4, 1fr) !important; }
.stat-flat strong { font-size: 14px; }
/* Smart row: điểm + mode + input + nút trên 1 dòng */
.smart-row { flex-wrap: nowrap; align-items: center; }
.smart-row .mode-select { width: auto; flex: none; min-width: 84px; margin: 0; padding: 8px 6px; }
.smart-row .pts-input { width: 64px; }
.smart-row #smart-input { flex: 1; min-width: 0; }
@media (max-width: 420px) {
  .smart-row { flex-wrap: wrap; }
  .smart-row #smart-input { flex: 1 1 100%; order: 3; }
  .smart-row .pts-input { order: 1; }
  .smart-row .mode-select { order: 2; flex: 1; }
  .smart-row button { order: 4; width: 100%; }
}

/* ===== Force single-line rows v20261016-11 ===== */
/* Smart row: luôn 1 dòng [10][điểm][gõ số][+Thêm], không wrap kể cả mobile */
.smart-row { flex-wrap: nowrap !important; align-items: center; gap: 6px; }
.smart-row .pts-input { width: 56px !important; flex: none; }
.smart-row .mode-select { min-width: 72px !important; flex: none; padding: 8px 4px; font-size: 13px; }
.smart-row #smart-input { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; order: 0 !important; }
.smart-row button { width: auto !important; flex: none !important; order: 0 !important; min-width: 0; padding: 8px 12px; }

/* Range row: ép tất cả 1 dòng, không wrap */
.range-row { flex-wrap: nowrap !important; gap: 6px; }
.range-row input { flex: 1 1 0 !important; min-width: 0; width: auto; text-align: center; }
.range-row .arrow { flex: none; }
.range-row .inline-check { flex: none; font-size: 12px; }
.range-row button { flex: none; padding: 8px 12px; }

/* ===== Header + unified bottom bar v20261016-12 ===== */
/* Header 3 vùng 1 hàng */
.nav { align-items: center; margin-bottom: 10px; gap: 8px; }
.nav-left { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.nav-left .brand { font-size: 16px; }
.nav-clock { display: flex; flex-direction: column; align-items: center; line-height: 1.05; flex: 1; text-align: center; }
.nav-clock .clock { font-size: 17px; }
.nav-right { position: relative; }
.menu-dropdown { position: absolute; right: 0; top: 46px; z-index: 70; display: flex; flex-direction: column; min-width: 150px; background: #111827; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.45); overflow: hidden; }
.menu-dropdown[hidden] { display: none; }
.menu-dropdown a, .menu-dropdown button { margin: 0; width: 100%; text-align: left; padding: 11px 14px; background: transparent; border: 0; border-radius: 0; color: var(--text); }
.menu-dropdown a:hover, .menu-dropdown button:hover { background: rgba(37,99,235,.16); }

/* Bet cards: lưới 3 cột, thấp gọn, Đá Chéo full dòng */
.bet-type-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 8px; }
.bet-card { min-height: 38px; min-width: 0; padding: 0 6px; border-radius: 9px; }
.bet-card-label { font-size: 13px; }
.bet-card.wide { grid-column: 1 / -1; }

/* Gap card nhỏ */
.pos-grid { gap: 8px; }

/* Thanh đáy DUY NHẤT: footer-nav có FAB Vào bảng ở giữa */
:root { --footer-h: 60px; }
.portal .shell { padding-bottom: calc(var(--footer-h) + 14px); }
.footer-nav { grid-template-columns: repeat(5, 1fr); align-items: center; height: var(--footer-h); }
.fab-place { grid-column: 3; margin: 0; align-self: center; justify-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 92%; height: 50px; border-radius: 12px; background: linear-gradient(135deg, var(--brand-2), #15803d); color: #fff; font-weight: 800; box-shadow: 0 6px 18px rgba(21,128,61,.45); }
.fab-place:disabled { filter: grayscale(.7); opacity: .55; box-shadow: none; }
.fab-net { font-size: 13px; font-family: ui-monospace, monospace; line-height: 1; }
.fab-label { font-size: 11px; line-height: 1; opacity: .95; }

@media (max-width: 420px) {
  .fab-place { width: 100%; height: 48px; }
  .nav-left .brand { font-size: 15px; }
}

/* Quick-bet popup fields */
#modal-body label { margin-top: 10px; }
#modal-body #qb-val { font-size: 18px; text-align: center; }
#modal-body #qb-add { margin-top: 12px; }

/* Sửa điểm inline trong phơi */
.cart-pts { width: 62px; margin: 0; padding: 4px 6px; text-align: center; font-size: 13px; }
#cart-items td { padding: 5px 7px; }

/* ===== User management gọn v20261016-20 ===== */
.user-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.user-form input { width: auto; flex: 1 1 130px; margin: 0; min-width: 100px; }
.user-form button { width: auto; flex: none; margin: 0; }
.status-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.status-badge.ok { background: rgba(34,197,94,.16); color: #bbf7d0; }
.status-badge.warn { background: rgba(245,158,11,.18); color: #fde68a; }
.status-badge.danger { background: rgba(248,113,113,.18); color: #fecaca; }
.user-actions { white-space: nowrap; }
.user-actions select, .user-actions .sm { width: auto; margin: 0; padding: 5px 8px; font-size: 12px; display: inline-block; }
.user-actions .row-status { min-width: 44px; }

/* ===== Admin mobile fix v20261016-21 ===== */
@media (max-width: 1100px) {
  .admin-grid { gap: 10px; }
  .side-menu { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .side-menu button { white-space: nowrap; }
}

/* ===== Chống tràn trong card v20261016-26 ===== */
.card { overflow: hidden; }                 /* không cho con lòi ra ngoài card */
.card .table-wrap { max-width: 100%; }       /* bảng dài cuộn ngang trong khung */
.smart-row, .range-row, .filter-row, .bet-type-cards, .chip-scroll { max-width: 100%; }
.smart-row #smart-input { min-width: 0; }    /* input co được, không đẩy hàng */

/* Toggle điểm/tiền trong popup đặt số */
.qb-toggle { display: flex; gap: 6px; margin: 4px 0 8px; }
.qb-toggle button { flex: 1; margin: 0; padding: 9px; background: #0b1220; border: 1.5px solid var(--border); color: #cbd5e1; font-size: 13px; }
.qb-toggle button.on { border-color: var(--brand); background: rgba(37,99,235,.18); color: #bfdbfe; }
#qb-conv { color: var(--muted); }

/* ===== Credit summary + user form v20261016-34 ===== */
.credit-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.credit-summary > div { background: #0b1220; border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; }
.credit-summary span { display: block; color: var(--muted); font-size: 11px; }
.credit-summary strong { display: block; font-size: 16px; margin-top: 2px; }
.user-form { align-items: flex-end; }
.user-form .field { display: flex; flex-direction: column; gap: 3px; flex: 1 1 140px; }
.user-form .field label { margin: 0; font-size: 11px; color: var(--muted); }
.user-form .field input { width: 100%; margin: 0; }
@media (max-width: 640px) { .credit-summary { grid-template-columns: 1fr; } }

/* Nút xoá (archive) user */
.danger-sm { width: auto; margin: 0; padding: 5px 8px; font-size: 12px; display: inline-block; background: transparent; border: 1.5px solid rgba(248,113,113,.55); color: #fecaca; }
.danger-sm:hover { background: rgba(248,113,113,.18); }