/* Giao diện ABX Cloud (tách từ <style> trong index.html). Giữ nguyên thứ tự quy tắc. */
html {
    scrollbar-gutter: stable;
    overflow-y: scroll;
}
body {
    background-color: #0b0f19;
    color: #f1f5f9;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    letter-spacing: 0;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
input, select, textarea, button {
    font-family: inherit;
}
.font-mono {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #1e293b;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 9999px;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.tab-btn {
    position: relative;
    font-weight: 700;
    font-size: 13px;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.tab-btn:hover {
    background-color: rgba(255, 255, 255, 0.06);
}
.tab-active {
    color: #3b82f6 !important;
    font-weight: 700 !important;
}
.tab-active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 10px;
    right: 10px;
    height: 3.5px;
    background: #1877f2;
    border-radius: 9999px;
    box-shadow: 0 2px 6px rgba(24, 119, 242, 0.5);
}

/* Facebook Circular Buttons */
.fb-circle-btn {
    width: 38px;
    height: 38px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background-color: #1e293b;
    color: #f1f5f9;
}
.fb-circle-btn:hover {
    background-color: #334155;
    transform: translateY(-1px);
}
html:not(.dark) .fb-circle-btn {
    background-color: #e4e6eb !important;
    border-color: transparent !important;
    color: #050505 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
html:not(.dark) .fb-circle-btn:hover {
    background-color: #d8dadf !important;
    color: #050505 !important;
}

/* Smooth UI transitions */
body, header, footer, main, section, div, input, select, textarea, button, table, tr, td, th {
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================
   FACEBOOK LIGHT MODE THEME OVERRIDES
   ========================================== */
html:not(.dark) body {
    background-color: #f0f2f5 !important;
    color: #050505 !important;
}
html:not(.dark) header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e4e6eb !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
html:not(.dark) footer {
    background-color: #ffffff !important;
    border-top: 1px solid #e4e6eb !important;
    color: #65676b !important;
}

/* Facebook Card & Container Boxes */
html:not(.dark) .bg-\[\#131c2e\],
html:not(.dark) .bg-\[\#0f172a\] {
    background-color: #ffffff !important;
    border-color: #e4e6eb !important;
    color: #050505 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}
html:not(.dark) .bg-\[\#1e293b\],
html:not(.dark) .bg-slate-900\/60,
html:not(.dark) .bg-slate-900\/90,
html:not(.dark) .bg-slate-900 {
    background-color: #f0f2f5 !important;
    border-color: #e4e6eb !important;
    color: #050505 !important;
}
html:not(.dark) .bg-slate-800\/80,
html:not(.dark) .bg-slate-800\/60,
html:not(.dark) .bg-slate-800 {
    background-color: #e4e6eb !important;
    color: #050505 !important;
    border-color: #ced0d4 !important;
}
html:not(.dark) .bg-slate-800:hover,
html:not(.dark) .hover\:bg-slate-700:hover {
    background-color: #d8dadf !important;
    color: #050505 !important;
}

/* Borders */
html:not(.dark) .border-slate-800,
html:not(.dark) .border-slate-700,
html:not(.dark) .border-slate-700\/60,
html:not(.dark) .border-slate-700\/80 {
    border-color: #e4e6eb !important;
}
html:not(.dark) .divide-slate-800 > :not([hidden]) ~ :not([hidden]) {
    border-color: #e4e6eb !important;
}

/* Facebook Typography */
html:not(.dark) .text-slate-100,
html:not(.dark) .text-slate-200 {
    color: #050505 !important;
}
html:not(.dark) .text-slate-300,
html:not(.dark) .text-slate-400 {
    color: #65676b !important;
}
html:not(.dark) .text-slate-500 {
    color: #8a8d91 !important;
}

/* Headings & Text that were text-white turn dark in light mode, EXCEPT on buttons/badges/brand logo */
html:not(.dark) h1.text-white,
html:not(.dark) h2.text-white,
html:not(.dark) h3.text-white,
html:not(.dark) h4.text-white,
html:not(.dark) h5.text-white,
html:not(.dark) h6.text-white,
html:not(.dark) p.text-white,
html:not(.dark) span.text-white:not(.brand-logo-text):not(.preserve-white),
html:not(.dark) div.text-white:not(.preserve-white) {
    color: #050505 !important;
}

/* Buttons, Brand Logo & Explicit White Elements keep clean WHITE text */
html:not(.dark) button.text-white,
html:not(.dark) button .text-white,
html:not(.dark) button[class*="bg-[#1877f2]"],
html:not(.dark) button[class*="bg-[#1877f2]"] *,
html:not(.dark) button.bg-emerald-600,
html:not(.dark) button.bg-emerald-600 *,
html:not(.dark) button.bg-rose-600,
html:not(.dark) button.bg-rose-600 *,
html:not(.dark) .brand-logo-text,
html:not(.dark) .preserve-white {
    color: #ffffff !important;
}

/* Facebook Primary Blue Buttons (Bảo đảm 100% màu xanh Facebook, không bị đè bởi bất kỳ rule nào) */
.btn-fb-primary,
html:not(.dark) .btn-fb-primary,
button[class*="bg-[#1877f2]"],
html:not(.dark) button[class*="bg-[#1877f2]"] {
    background-color: #1877f2 !important;
    color: #ffffff !important;
    border-color: transparent !important;
}
.btn-fb-primary:hover,
html:not(.dark) .btn-fb-primary:hover,
button[class*="bg-[#1877f2]"]:hover,
html:not(.dark) button[class*="bg-[#1877f2]"]:hover {
    background-color: #166fe5 !important;
    color: #ffffff !important;
}
.btn-fb-primary *,
html:not(.dark) .btn-fb-primary * {
    color: #ffffff !important;
}

/* Tag thể loại góc trên ảnh bìa (Luôn có chữ trắng tinh, nền kính tối nổi bật trên mọi ảnh) */
.game-tag-badge,
html:not(.dark) .game-tag-badge,
span.game-tag-badge,
html:not(.dark) span.game-tag-badge {
    color: #ffffff !important;
    background-color: rgba(15, 23, 42, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* Ảnh bìa Game sáng rõ nguyên bản, không bị làm tối */
.game-card img {
    filter: none !important;
    opacity: 1 !important;
}

/* High contrast semantic colors & badges in Light Mode */
html:not(.dark) .text-emerald-400 {
    color: #059669 !important;
}
html:not(.dark) .text-emerald-300 {
    color: #047857 !important;
}
html:not(.dark) .text-amber-400 {
    color: #d97706 !important;
}
html:not(.dark) .text-rose-400 {
    color: #e11d48 !important;
}
html:not(.dark) .text-rose-300 {
    color: #b91c1c !important;
}
html:not(.dark) .bg-rose-500\/20 {
    background-color: #fee2e2 !important;
}
html:not(.dark) .border-rose-500\/30 {
    border-color: #fca5a5 !important;
}
html:not(.dark) .text-blue-400 {
    color: #1877f2 !important;
}
html:not(.dark) #modal-pricing-qr .bg-\[\#1e293b\] {
    background-color: #ffffff !important;
    border-color: #e4e6eb !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
html:not(.dark) #modal-plans-list > div {
    background-color: #ffffff !important;
    border-color: #e4e6eb !important;
}
html:not(.dark) #modal-plans-list > div:hover {
    background-color: #f7f8fa !important;
    border-color: #cbd5e1 !important;
}
html:not(.dark) #modal-plans-list > div[class*="bg-blue-600"] {
    background-color: #ebf5ff !important;
    border-color: #1877f2 !important;
}

/* Facebook Brand Blue */
html:not(.dark) .bg-indigo-600 {
    background-color: #1877f2 !important;
}
html:not(.dark) .hover\:bg-indigo-500:hover,
html:not(.dark) .bg-indigo-600:hover {
    background-color: #166fe5 !important;
}
html:not(.dark) .text-indigo-400,
html:not(.dark) .text-indigo-300 {
    color: #1877f2 !important;
}
html:not(.dark) .tab-btn:hover {
    background-color: #f0f2f5 !important;
    color: #050505 !important;
}
html:not(.dark) .tab-active {
    color: #1877f2 !important;
}
html:not(.dark) .tab-active::after {
    background: #1877f2 !important;
}

/* Tag Filters in Light Mode */
html:not(.dark) .tag-btn:not(.active-tag) {
    background-color: #e4e6eb !important;
    color: #050505 !important;
    font-weight: 700 !important;
}
html:not(.dark) .tag-btn:not(.active-tag):hover {
    background-color: #d8dadf !important;
}
html:not(.dark) .tag-btn.active-tag {
    background-color: #1877f2 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(24, 119, 242, 0.35) !important;
}

/* Facebook Input & Controls */
html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
    background-color: #f0f2f5 !important;
    color: #050505 !important;
    border-color: #ced0d4 !important;
}
html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
    color: #8a8d91 !important;
}
html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus {
    background-color: #ffffff !important;
    border-color: #1877f2 !important;
    box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.25) !important;
}

/* Game Card Hover Effect in Light Mode */
.game-card {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease;
}
.game-card:hover {
    transform: translateY(-4px);
}
html:not(.dark) .game-card {
    background-color: #ffffff !important;
    border: 1px solid #e4e6eb !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.03) !important;
}
html:not(.dark) .game-card:hover {
    border-color: #1877f2 !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

/* Tables in Light Mode */
html:not(.dark) table thead tr {
    background-color: #f0f2f5 !important;
    border-color: #ced0d4 !important;
    color: #65676b !important;
}
html:not(.dark) table thead th {
    color: #65676b !important;
}
html:not(.dark) tr.hover\:bg-slate-800\/40:hover {
    background-color: #e4e6eb/50 !important;
}

/* Scrollbar in Light Mode */
html:not(.dark) .custom-scrollbar::-webkit-scrollbar-track {
    background: #f0f2f5 !important;
}
html:not(.dark) .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #ced0d4 !important;
}

/* Modals in Facebook Light Mode */
html:not(.dark) #modal-auth > div,
html:not(.dark) #modal-change-password > div,
html:not(.dark) #modal-pricing-qr > div,
html:not(.dark) #modal-custom-dialog > div,
html:not(.dark) #modal-admin-license > div {
    background-color: #ffffff !important;
    border-color: #e4e6eb !important;
    box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1) !important;
}
html:not(.dark) #dialog-btn-cancel {
    background-color: #e4e6eb !important;
    color: #050505 !important;
}
html:not(.dark) #dialog-btn-cancel:hover {
    background-color: #d8dadf !important;
}

.btn-lic-quick {
    background-color: #f1f5f9;
    color: #1e293b;
    border-color: #cbd5e1;
    cursor: pointer;
}
.btn-lic-quick:hover, .btn-lic-quick.active {
    background-color: #1877f2 !important;
    color: #ffffff !important;
    border-color: #1877f2 !important;
}
html.dark .btn-lic-quick {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #334155;
}
html.dark .btn-lic-quick:hover, html.dark .btn-lic-quick.active {
    background-color: #1877f2 !important;
    color: #ffffff !important;
    border-color: #1877f2 !important;
}

/* ==========================================
   HỆ THỐNG NÚT TÁC VỤ CÔNG THÁI HỌC (ADMIN TABLE)
   ========================================== */
/* 1. Nút chính: + Gia hạn / Tùy chỉnh (High Contrast, Facebook Blue) */
.btn-action-extend {
    background-color: #1877f2 !important;
    color: #ffffff !important;
    border: 1px solid #166fe5 !important;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(24, 119, 242, 0.25);
    transition: all 0.15s ease;
}
.btn-action-extend:hover {
    background-color: #166fe5 !important;
    box-shadow: 0 2px 4px rgba(24, 119, 242, 0.35);
    transform: translateY(-0.5px);
}
.btn-action-extend * {
    color: #ffffff !important;
}

/* 2. Nút nhanh: +7d, +30d (Clean slate, high legibility) */
.btn-action-quick {
    background-color: #f0f2f5 !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-action-quick:hover {
    background-color: #e2e8f0 !important;
    border-color: #94a3b8 !important;
    color: #1877f2 !important;
}
html.dark .btn-action-quick {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}
html.dark .btn-action-quick:hover {
    background-color: #334155 !important;
    color: #38bdf8 !important;
}

/* 3. Nút an toàn: Reset Mật Khẩu (Warm Amber) */
.btn-action-reset {
    background-color: #fff7ed !important;
    color: #c2410c !important;
    border: 1px solid #fed7aa !important;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-action-reset:hover {
    background-color: #ffedd5 !important;
    border-color: #fdba74 !important;
}
html.dark .btn-action-reset {
    background-color: rgba(234, 88, 12, 0.15) !important;
    color: #fb923c !important;
    border-color: rgba(234, 88, 12, 0.3) !important;
}
html.dark .btn-action-reset:hover {
    background-color: rgba(234, 88, 12, 0.25) !important;
}

/* 4. Nút Khóa / Mở khóa (Cố định chiều rộng 72px để tránh xô lệch bảng khi đổi trạng thái) */
.btn-action-block {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-action-block:hover {
    background-color: #fee2e2 !important;
}
html.dark .btn-action-block {
    background-color: rgba(225, 29, 72, 0.15) !important;
    color: #fb7185 !important;
    border-color: rgba(225, 29, 72, 0.3) !important;
}
.btn-action-unblock {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    background-color: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-action-unblock:hover {
    background-color: #d1fae5 !important;
}
html.dark .btn-action-unblock {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

/* Khi hiển thị trên Mobile Card view thì full-width */
#admin-users-mobile-list .btn-action-block,
#admin-users-mobile-list .btn-action-unblock {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* 5. Cột Hạn Sử Dụng: Interactive License Card */
.license-interactive-card {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px dashed transparent;
    transition: all 0.2s ease;
    cursor: pointer;
}
.license-interactive-card:hover {
    background-color: #f0f2f5;
    border-color: #1877f2;
}
html.dark .license-interactive-card:hover {
    background-color: #1e293b;
    border-color: #3b82f6;
}

/* 6. Nút chọn mốc ngày trong Modal Gia Hạn */
.btn-lic-quick {
    background-color: #f0f2f5 !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-lic-quick:hover {
    background-color: #e2e8f0 !important;
    border-color: #1877f2 !important;
    color: #1877f2 !important;
}
.btn-lic-quick.active {
    background-color: #1877f2 !important;
    color: #ffffff !important;
    border-color: #166fe5 !important;
    box-shadow: 0 1px 3px rgba(24, 119, 242, 0.35);
}
html.dark .btn-lic-quick {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}
html.dark .btn-lic-quick:hover {
    background-color: #334155 !important;
    color: #38bdf8 !important;
    border-color: #38bdf8 !important;
}
html.dark .btn-lic-quick.active {
    background-color: #1877f2 !important;
    color: #ffffff !important;
    border-color: #166fe5 !important;
}
/* ==========================================
   CHỐNG NHẤP NHÁY ĐĂNG NHẬP (ANTI-FOUC GUARD KHI F5)
   ========================================== */
html.is-auth-logged #auth-unlogged {
    display: none !important;
}
html.is-auth-logged #auth-logged {
    display: flex !important;
}
html.is-auth-unlogged #auth-unlogged {
    display: flex !important;
}
html.is-auth-unlogged #auth-logged {
    display: none !important;
}
html.is-role-admin #tab-btn-admin {
    display: flex !important;
}

/* ==========================================
   ADMIN TAB HIGH CONTRAST (LIGHT MODE)
   ========================================== */
html:not(.dark) #tab-btn-admin {
    color: #050505 !important;
    font-weight: 700 !important;
}
html:not(.dark) #tab-btn-admin.tab-active {
    color: #1877f2 !important;
    font-weight: 800 !important;
}
html:not(.dark) #tab-btn-admin:hover {
    background-color: #f0f2f5 !important;
    color: #1877f2 !important;
}

html:not(.dark) #tab-admin h3 {
    color: #050505 !important;
}
html:not(.dark) #tab-admin h4 {
    color: #050505 !important;
}
html:not(.dark) #tab-admin p {
    color: #65676b !important;
}

/* Table Headers in Light Mode */
html:not(.dark) table thead tr {
    background-color: #f0f2f5 !important;
    border-bottom: 2px solid #e4e6eb !important;
}
html:not(.dark) table thead th {
    color: #050505 !important;
    font-weight: 800 !important;
    font-size: 12px !important;
}
html:not(.dark) #admin-users-tbody tr {
    border-color: #e4e6eb !important;
}
html:not(.dark) #admin-users-tbody tr:hover {
    background-color: #f7f8fa !important;
}
html:not(.dark) #admin-users-tbody td {
    color: #050505 !important;
}
html:not(.dark) #admin-users-tbody td:first-child {
    color: #050505 !important;
    font-weight: 800 !important;
}
/* High-Contrast Max Bots Button */
.btn-max-bots {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1.5px solid #94a3b8 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
.btn-max-bots span,
.btn-max-bots * {
    color: #0f172a !important;
    font-weight: 900 !important;
}
.btn-max-bots:hover {
    background-color: #1877f2 !important;
    border-color: #1877f2 !important;
    box-shadow: 0 2px 6px rgba(24, 119, 242, 0.35) !important;
}
.btn-max-bots:hover span,
.btn-max-bots:hover * {
    color: #ffffff !important;
}

html.dark .btn-max-bots {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #475569 !important;
}
html.dark .btn-max-bots span,
html.dark .btn-max-bots * {
    color: #f8fafc !important;
    font-weight: 900 !important;
}
html.dark .btn-max-bots:hover {
    background-color: #1877f2 !important;
    border-color: #1877f2 !important;
}
html.dark .btn-max-bots:hover span,
html.dark .btn-max-bots:hover * {
    color: #ffffff !important;
}

/* Quick Action Buttons - High Contrast Solid & Crisp */
.btn-quick-day {
    background-color: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}
.btn-quick-day:hover {
    background-color: #4f46e5;
    color: #ffffff;
}
.btn-quick-reset {
    background-color: rgba(217, 119, 6, 0.2);
    color: #fcd34d;
}
.btn-quick-reset:hover {
    background-color: #d97706;
    color: #ffffff;
}
.btn-quick-block {
    background-color: rgba(225, 29, 72, 0.2);
    color: #fda4af;
}
.btn-quick-block:hover {
    background-color: #e11d48;
    color: #ffffff;
}
.btn-quick-unblock {
    background-color: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}
.btn-quick-unblock:hover {
    background-color: #10b981;
    color: #ffffff;
}

html:not(.dark) .btn-quick-day {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
    border: 1px solid #7dd3fc !important;
    font-weight: 800 !important;
}
html:not(.dark) .btn-quick-day:hover {
    background-color: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}
html:not(.dark) .btn-quick-reset {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fcd34d !important;
    font-weight: 800 !important;
}
html:not(.dark) .btn-quick-reset:hover {
    background-color: #d97706 !important;
    color: #ffffff !important;
    border-color: #d97706 !important;
}
html:not(.dark) .btn-quick-block {
    background-color: #ffe4e6 !important;
    color: #9f1239 !important;
    border: 1px solid #fda4af !important;
    font-weight: 800 !important;
}
html:not(.dark) .btn-quick-block:hover {
    background-color: #e11d48 !important;
    color: #ffffff !important;
    border-color: #e11d48 !important;
}
html:not(.dark) .btn-quick-unblock {
    background-color: #dcfce7 !important;
    color: #166534 !important;
    border: 1px solid #86efac !important;
    font-weight: 800 !important;
}
html:not(.dark) .btn-quick-unblock:hover {
    background-color: #16a34a !important;
    color: #ffffff !important;
    border-color: #16a34a !important;
}
html:not(.dark) .btn-quick-block {
    background-color: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fca5a5 !important;
}
html:not(.dark) .btn-quick-block:hover {
    background-color: #e11d48 !important;
    color: #ffffff !important;
    border-color: #e11d48 !important;
}
html:not(.dark) .btn-quick-unblock {
    background-color: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #86efac !important;
}
html:not(.dark) .btn-quick-unblock:hover {
    background-color: #16a34a !important;
    color: #ffffff !important;
    border-color: #16a34a !important;
}

/* Role & Status Badges in Light Mode */
html:not(.dark) .bg-slate-700 {
    background-color: #e4e6eb !important;
    color: #050505 !important;
    border: 1px solid #ced0d4 !important;
}
html:not(.dark) .bg-amber-500\/20 {
    background-color: #fef3c7 !important;
    border-color: #fde68a !important;
}
html:not(.dark) .text-amber-500 {
    color: #b45309 !important;
}
html:not(.dark) .bg-emerald-500\/20 {
    background-color: #dcfce7 !important;
    border-color: #86efac !important;
}
html:not(.dark) .text-emerald-500 {
    color: #15803d !important;
}
html:not(.dark) .bg-rose-500\/20 {
    background-color: #fee2e2 !important;
    border-color: #fca5a5 !important;
}
html:not(.dark) .text-rose-500 {
    color: #b91c1c !important;
}

/* ===== Tường camera (QT-07 §3.22): mỗi selector viết riêng, không gộp ===== */
.wall-stage { display: grid; gap: 8px; justify-content: center; align-content: start; width: 100%; }
.wall-tile { position: relative; background: #000000; border: 2px solid #ced0d4; border-radius: 12px; overflow: hidden; width: var(--tile-w, 100%); aspect-ratio: 16 / 9; }
.wall-tile.wall-active { border-color: #42b72a; box-shadow: 0 0 0 3px rgba(66, 183, 42, 0.6), 0 6px 18px rgba(66, 183, 42, 0.3); }
.wall-single .wall-tile.wall-active { box-shadow: none; border-color: #ced0d4; }
.wall-tile.wall-tile-empty { background: #ffffff; border: 2px dashed #ced0d4; box-shadow: none; min-height: 240px; }
.wall-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; text-align: center; color: #050505; }
.wall-empty-title { font-size: 15px; font-weight: 800; color: #050505; }
.wall-empty-sub { font-size: 12px; color: #65676b; }
.wall-empty-add { min-height: 44px; padding: 0 20px; border-radius: 10px; background: #1877f2; color: #ffffff !important; font-weight: 800; border: 0; cursor: pointer; }
.wall-empty-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.wall-empty-reopen { min-height: 44px; padding: 0 14px; border-radius: 10px; background: #e4e6eb; color: #050505; font-weight: 700; font-size: 13px; border: 0; cursor: pointer; }
html.dark .wall-tile.wall-tile-empty { background: transparent; border-color: #334155; }
html.dark .wall-empty, html.dark .wall-empty-title { color: #e2e8f0; }
html.dark .wall-empty-sub { color: #94a3b8; }
html.dark .wall-empty-reopen { background: #1e293b; color: #e2e8f0; }
#studio-all-closed-title { display: none; font-weight: 800; }
.wall-all-closed #studio-head-info > div { display: none; }
.wall-all-closed #studio-all-closed-title { display: inline; }
.wall-all-closed #studio-head-actions { display: none !important; }
.wall-slot { position: absolute; inset: 0; z-index: 1; }
.wall-slot > #studio-canvas-container { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
.wall-canvas { width: 100%; height: 100%; object-fit: contain; display: block; background: #000000; }
.wall-shield { position: absolute; inset: 0; z-index: 5; cursor: pointer; }
.wall-active .wall-shield { display: none; }
.wall-hud { position: absolute; left: 0; right: 0; top: 0; z-index: 6; display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: rgba(0, 0, 0, 0.55); color: #ffffff !important; font-size: 11px; font-weight: 700; pointer-events: none; }
.wall-hud span { color: #ffffff !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wall-hud .wall-hud-name { flex: 1 1 auto; min-width: 0; }
.wall-hud .wall-hud-res, html:not(.dark) .wall-hud .wall-hud-res { pointer-events: auto; flex: 0 0 auto; -webkit-appearance: none; appearance: none; background-color: rgba(0, 0, 0, 0.55) !important; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='white'/></svg>"); background-repeat: no-repeat; background-position: right 5px center; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; border-radius: 6px; font-size: 11px; font-weight: 700; line-height: 1; padding: 0 18px 0 6px; min-height: 24px; height: 24px; background-size: 8px 5px; cursor: pointer; }
.wall-hud .wall-hud-res:hover, .wall-hud .wall-hud-res:focus, html:not(.dark) .wall-hud .wall-hud-res:hover, html:not(.dark) .wall-hud .wall-hud-res:focus { background-color: #1877f2 !important; border-color: #1877f2 !important; box-shadow: none !important; }
.wall-hud .wall-hud-res option { color: #050505; background: #ffffff; }
@media (pointer: coarse), (max-width: 1023px) { .wall-hud .wall-hud-res { min-height: 32px; height: 32px; } }
.wall-hud .wall-hud-state[data-tone="on"] { color: #4ade80 !important; font-weight: 800; }
.wall-hud .wall-hud-state[data-tone="off"] { color: #f87171 !important; font-weight: 800; }
.wall-hud .wall-hud-pnl-pos { color: #86efac !important; }
.wall-hud .wall-hud-pnl-neg { color: #fca5a5 !important; }
.wall-zoom { position: absolute; right: 0; bottom: 0; z-index: 7; min-width: 44px; min-height: 44px; border-radius: 10px 0 0 0; background: rgba(0, 0, 0, 0.6); color: #ffffff !important; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.wall-zoom svg { width: 18px; height: 18px; }
.wall-zoom:hover { background: #1877f2; }
.wall-close { position: absolute; right: 0; top: 0; z-index: 7; min-width: 44px; min-height: 44px; border-radius: 0; background: transparent; color: #ffffff !important; font-weight: 800; border: 0; cursor: pointer; }
.wall-hud { padding-right: 96px; min-height: 44px; box-sizing: border-box; }
.wall-cam { position: absolute; right: 44px; top: 0; z-index: 7; min-width: 44px; min-height: 44px; background: transparent; color: #ffffff !important; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.wall-cam svg { width: 18px; height: 18px; opacity: 0.85; }
.wall-cam:hover { background: #1877f2; }
.wall-cam.wall-cam-on { background: #16a34a; }
.wall-cam.wall-cam-on svg { opacity: 1; }
.wall-cam.wall-cam-pending { opacity: 0.6; cursor: wait; }
@media (pointer: fine) and (min-width: 1024px) { .wall-close, .wall-zoom, .wall-cam { min-width: 32px; min-height: 32px; } .wall-cam { right: 32px; } .wall-zoom svg { width: 16px; height: 16px; } .wall-cam svg { width: 16px; height: 16px; } .wall-hud { padding-right: 72px; min-height: 32px; } }
.wall-overlay-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 12; min-height: 44px; padding: 0 18px; border-radius: 12px; background: #1877f2; color: #ffffff !important; font-weight: 800; border: 0; cursor: pointer; }
.wall-start-dim::after { content: ''; position: absolute; inset: 0; z-index: 11; background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); pointer-events: none; }
.wall-start-dim .wall-close, .wall-start-dim .wall-zoom, .wall-start-dim .wall-hud { z-index: 12; }
.wall-layout-btn { background: transparent; color: #050505; }
.wall-layout-btn[aria-pressed="true"] { background: #1877f2; color: #ffffff; }
html.dark .wall-layout-btn { color: #e2e8f0; }
html.dark .wall-layout-btn[aria-pressed="true"] { color: #ffffff; }
/* Nút bật/tắt khay (QT-07 §3.22): tắt = xám ▾, bật = nền xanh nhạt + viền/chữ #1877f2 + ▴ */
.wall-toggle-btn::after { content: "▾"; font-size: 11px; margin-left: 2px; }
.wall-toggle-btn[aria-pressed="true"], .wall-toggle-btn[aria-expanded="true"] { background: #e7f3ff !important; color: #1877f2 !important; border-color: #1877f2 !important; }
.wall-toggle-btn[aria-pressed="true"]::after, .wall-toggle-btn[aria-expanded="true"]::after { content: "▴"; }
html.dark .wall-toggle-btn[aria-pressed="true"], html.dark .wall-toggle-btn[aria-expanded="true"] { background: #1b3a5e !important; color: #8ab4f8 !important; border-color: #8ab4f8 !important; }
/* ===== Chế độ «Tất cả» (QT-07 §3.23): mỗi selector viết riêng, không gộp nút với huy hiệu ===== */
.matrix-chip { background: #e4e6eb; color: #050505; border: 1px solid #ced0d4; border-radius: 9999px; padding: 0 14px; min-height: 44px; font-size: 12px; font-weight: 700; cursor: pointer; }
html.dark .matrix-chip { background: #1e293b; color: #e2e8f0; border-color: #334155; }
.matrix-chip.is-active { background: #1877f2; color: #ffffff; border-color: #1877f2; }
.matrix-tile { transition: box-shadow .3s, border-color .3s; }
.matrix-tile.matrix-flash { box-shadow: 0 0 0 3px #1877f2; border-color: #1877f2; }
.matrix-select { min-height: 44px; border-radius: 12px; padding: 0 10px; font-size: 12px; font-weight: 700; background: #e4e6eb; color: #050505; border: 1px solid #ced0d4; }
html.dark .matrix-select { background: #1e293b; color: #e2e8f0; border-color: #334155; }
#matrix-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
#matrix-grid[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
    #matrix-grid[data-cols="auto"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    #matrix-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #matrix-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #matrix-grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    #matrix-grid[data-cols="auto"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
    #matrix-grid[data-cols="auto"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
#view-single-table-studio.wall-overview-on #wall-drawer { display: none; }
#view-single-table-studio.wall-overview-on #wall-stage { display: none; }
#view-single-table-studio.wall-overview-on #wall-pager { display: none; }
#view-single-table-studio.wall-overview-on #wall-tools { display: none; }
@media (min-width: 1024px) {
    #view-single-table-studio.wall-overview-on #wall-main-col { grid-column: 1 / -1 !important; }
}
/* Toàn màn hình (nút ⛶): phần tử bọc thanh công cụ + vùng hình */
#wall-fs-wrap:fullscreen { background: #000000; width: 100vw; height: 100vh; padding: 8px; box-sizing: border-box; overflow: auto; }
#wall-fs-wrap.wall-fake-fs { background: #000000; position: fixed; inset: 0; z-index: 60; width: 100vw; height: 100vh; padding: 8px; box-sizing: border-box; overflow: auto; }
#wall-fs-wrap:fullscreen #wall-toolbar-right { display: none; }
#wall-fs-wrap.wall-fake-fs #wall-toolbar-right { display: none; }
#wall-fs-btn[aria-pressed="true"] { background: #1877f2 !important; color: #ffffff !important; border-color: #1877f2 !important; }
#wall-fs-wrap:fullscreen #wall-head-slot, #wall-fs-wrap.wall-fake-fs #wall-head-slot, #wall-fs-wrap:fullscreen #wall-head-slot #studio-table-title, #wall-fs-wrap.wall-fake-fs #wall-head-slot #studio-table-title, #wall-fs-wrap:fullscreen #wall-page-label, #wall-fs-wrap.wall-fake-fs #wall-page-label { color: #ffffff !important; }
/* Thanh 4 bước bắt đầu (QT-07 §3.24): xong = xanh lá, hiện tại = xanh dương, chưa tới = xám; chữ trắng được giữ bằng .preserve-white trong JS */
.wall-step { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #65676b; }
.wall-step-n { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 9999px; background: #e4e6eb; color: #65676b; font-size: 11px; font-weight: 800; }
.wall-step-sep { color: #8a8d91; font-size: 12px; }
.wall-step.is-done { color: #050505; }
.wall-step.is-done .wall-step-n { background: #42b72a; color: #ffffff !important; }
.wall-step.is-now { color: #1877f2; }
.wall-step.is-now .wall-step-n { background: #1877f2; color: #ffffff !important; }
html.dark .wall-step.is-done { color: #e2e8f0; }
.wall-tab-btn { background: transparent; color: #050505; }
.wall-tab-btn[aria-selected="true"] { background: #1877f2; color: #ffffff; }
html.dark .wall-tab-btn { color: #e2e8f0; }
html.dark .wall-tab-btn[aria-selected="true"] { color: #ffffff; }
.wall-tab-hide { display: none !important; }
body.wall-compact .wall-slogan { display: none; }
body.wall-compact header { padding-top: 4px; padding-bottom: 4px; }
body.wall-compact #tables-summary-bar { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
body.wall-compact #tables-summary-bar > div,
body.wall-compact #tables-summary-bar > button { display: flex; align-items: baseline; gap: 6px; padding: 2px 10px; border-width: 0; box-shadow: none; background: transparent; min-height: 0; }
body.wall-compact #tables-summary-bar .text-lg, body.wall-compact #tables-summary-bar .sm\:text-xl { font-size: 13px; }
body.wall-compact #tables-summary-bar .text-\[11px\] { font-size: 11px; }
@media (min-width: 1024px) {
    #tables-layout.wall-list-closed { grid-template-columns: minmax(0, 1fr) !important; }
    #tables-layout.wall-list-closed #tables-bot-list { display: none; }
    #view-single-table-studio.wall-drawer-collapsed { grid-template-columns: minmax(0, 1fr) 48px !important; }
    #view-single-table-studio.wall-drawer-collapsed > .grid { grid-template-columns: minmax(0, 1fr) 48px !important; }
    .wall-drawer-collapsed #wall-main-col, .wall-drawer-collapsed #wall-drawer { grid-column: auto !important; }
    .wall-drawer-collapsed #wall-drawer > *:not(#wall-drawer-head) { display: none !important; }
    .wall-drawer-collapsed #wall-drawer-head [role="tablist"] { display: none; }
    .wall-drawer-collapsed #wall-slim { display: flex !important; }
}
/* Lớp phủ tối đặt trên ảnh (QT-07 §3.24): không dùng bg-slate-900* vì giao diện sáng đổi các lớp đó sang nền xám nhạt */
.overlay-dark { background-color: rgba(15, 23, 42, 0.85) !important; border: 1px solid #475569 !important; }
#btn-goto-cockpit:disabled { opacity: .65; cursor: not-allowed; }
#btn-goto-cockpit:disabled:hover { background-color: #1877f2 !important; }
.ui-icon { width: 16px; height: 16px; flex-shrink: 0; }
.wall-add-tile { width: var(--tile-w, 100%); aspect-ratio: 16 / 9; border: 2px dashed #ced0d4; border-radius: 12px; background: transparent; color: #1877f2; font-weight: 700; font-size: 13px; cursor: pointer; min-height: 44px; }
.wall-add-tile:hover { background: rgba(24, 119, 242, 0.06); }
html.dark .wall-add-tile { border-color: #334155; }
/* Đầu trang một hàng (QT-07 §3.24): ở mọi tab khi rộng >= 1280px */
/* Thanh tổng dời lên đầu trang (≥1760px, tab Bàn cược): 4 chip một dòng giữa tab và cụm tài khoản */
#header-summary-slot { display: none; }
body.wall-summary-in-header #header-summary-slot { display: flex; order: 2; flex: 1 1 auto; min-width: 0; justify-content: center; overflow: hidden; }
body.wall-summary-in-header #header-tabs { flex: 0 0 auto !important; width: auto !important; }
body.wall-summary-in-header #header-summary-slot #tables-summary-bar { flex-wrap: nowrap; gap: 4px 10px; white-space: nowrap; }
body.wall-summary-in-header #tables-summary-bar > button, body.wall-summary-in-header #sum-winrate-sub { display: none !important; }
body.wall-compact footer { display: none; }
body.wall-compact #tab-tables > * + * { margin-top: 8px !important; }
body.wall-compact main { padding-top: 6px; padding-bottom: 8px; }
body.wall-compact #tables-main-col > * + * { margin-top: 8px !important; }
body.wall-compact #wall-fs-wrap > #wall-toolbar ~ * { margin-top: 8px !important; }
body.wall-compact #wall-drawer > * + * { margin-top: 8px !important; }
@media (min-width: 1024px) and (pointer: fine) {
    #wall-toolbar button, #wall-drawer-head .wall-tab-btn, #wall-drawer-head #wall-drawer-toggle { min-height: 32px !important; }
    #wall-toolbar .wall-layout-btn, #wall-toolbar #wall-fs-btn, #wall-drawer-head #wall-drawer-toggle { min-width: 36px !important; }
    #btn-studio-stop-bot, #btn-toggle-main-bot, #studio-countdown-badge, #studio-bot-switch { min-height: 32px; border-radius: 12px; }
    #wall-layout-group, #wall-drawer-head [role="tablist"] { height: 40px; box-sizing: border-box; align-items: center; }
    #wall-drawer-head { padding-bottom: 0; }
    /* Cỡ nút bằng chuột: phụ 32px, chính 40px (cảm ứng và <1024px giữ 44px) */
    #wall-tools button, #wall-tools select, #wall-remote-row button, #wall-remote-row input { min-height: 32px !important; }
}
@media (max-width: 1023px), (pointer: coarse) {
    #btn-toggle-main-bot, #btn-studio-stop-bot { min-height: 44px; }
}
@media (min-width: 1024px) and (pointer: fine) {
    #btn-toggle-main-bot, #btn-studio-stop-bot { min-height: 40px !important; padding-left: 16px; padding-right: 16px; font-size: 13px; }
}
/* Nút Dừng bot của bàn: nhỏ gọn, không lấn át nút Bắt đầu cược */
#btn-studio-stop-bot { min-height: 28px !important; padding: 2px 10px !important; font-size: 12px !important; border-radius: 8px !important; box-shadow: none !important; }
@media (max-width: 1023px), (pointer: coarse) { #btn-studio-stop-bot { min-height: 44px !important; } }
/* Nút Bắt đầu cược cùng chiều cao với đồng hồ đếm ngược */
#btn-toggle-main-bot, #studio-countdown-badge { box-sizing: border-box; min-height: 32px !important; height: 32px; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 13px; }
@media (max-width: 1023px), (pointer: coarse) { #btn-toggle-main-bot, #studio-countdown-badge { min-height: 44px !important; height: 44px; } }
/* Máy tính dùng chuột: nút chính + đồng hồ cao 40px (QT-07 §3.24), vẫn cùng chiều cao */
@media (min-width: 1024px) and (pointer: fine) { #btn-toggle-main-bot, #studio-countdown-badge { min-height: 40px !important; height: 40px; } }

@media (min-width: 1024px) and (pointer: fine) {
    #wall-remote-row .btn-fb-primary { min-height: 40px !important; }
}
@media (min-width: 1400px) {
    body.wall-head-merged #studio-head { display: none; }
    body.wall-head-merged #wall-head-slot { display: flex; }
    body.wall-head-merged .wall-btn-text { display: none; }
    body.wall-head-merged .wall-toggle-text { display: none; }
    body.wall-head-merged #wall-list-btn { padding-left: 8px; padding-right: 8px; }
    body.wall-head-merged #studio-mode-badge { display: none !important; }
    body.wall-head-merged #studio-game-badge { display: none !important; }
    body.wall-head-merged #studio-head-icon { display: none; }
    body.wall-head-merged #studio-table-title { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    body.wall-actions-in-drawer #wall-actions-slot { display: flex; }
    #wall-fs-wrap:fullscreen #studio-head-actions, #wall-fs-wrap.wall-fake-fs #studio-head-actions { display: none; }
}
/* Chữ «Danh sách bàn» chỉ hiện khi thanh còn chỗ (≥1680px); dưới đó chỉ icon + màu + ▾/▴ để thanh không xuống 2 dòng */
@media (min-width: 1680px) {
    body.wall-head-merged .wall-toggle-text { display: inline; }
    body.wall-head-merged #wall-list-btn { padding-left: 12px; padding-right: 12px; }
}
@media (min-width: 1280px) {
    #view-single-table-studio:not(.wall-drawer-collapsed):not(.wall-overview-on) > .grid { grid-template-columns: minmax(0, 1fr) clamp(380px, 26vw, 460px) !important; }
    #view-single-table-studio:not(.wall-drawer-collapsed):not(.wall-overview-on) #wall-main-col,
    #view-single-table-studio:not(.wall-drawer-collapsed):not(.wall-overview-on) #wall-drawer { grid-column: auto !important; }
}
body.wall-compact-row header { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; }
body.wall-compact-row #header-top { display: contents; }
body.wall-compact-row #header-brand { order: 1; }
body.wall-compact-row #header-tabs { order: 2; flex: 1 1 auto; min-width: 0; margin-top: 0; border-top: 0; padding-top: 0; }
body.wall-compact-row #header-actions { order: 3; flex-wrap: nowrap; }
body.wall-compact-row #header-brand { flex-shrink: 0; white-space: nowrap; }
body.wall-compact-row #header-actions { flex-shrink: 0; white-space: nowrap; }
body.wall-compact-row #header-actions * { white-space: nowrap; }
body.wall-compact-row #header-tabs { flex-wrap: nowrap; overflow-x: auto; }
body.wall-compact-row #header-tabs > button { flex-shrink: 0; white-space: nowrap; }
body.wall-compact-row #header-username { max-width: 120px; }
body.wall-compact-row #header-brand .rounded-full { display: none; }
body.wall-compact-row #ws-text { display: none; }
body.wall-compact-row #auth-logged { flex-wrap: nowrap; }
body.wall-compact-row #studio-head { padding: 6px 12px; border-radius: 12px; }
body.wall-compact-row #studio-head-icon { display: none; }
/* Điện thoại/máy tính bảng: ô nhập >= 16px để iOS không tự phóng to khi chạm vào ô */
@media (max-width: 1023px) {
    input, select, textarea { font-size: 16px !important; }
}

/* Thẻ «Chiến lược & Chuỗi tiền»: khoảng cách thoáng, dễ nhìn */
#bet-strategy-card { padding: 14px !important; }
#bet-strategy-card, #bet-strategy-card > #strategy-form-fieldset { --gap: 8px; }
#bet-strategy-card > * + * { margin-top: 12px !important; }
#bet-strategy-card #strategy-form-fieldset > * + * { margin-top: 12px !important; }
#bet-strategy-card > :first-child { padding-bottom: 4px; }
#bet-strategy-card .grid > .rounded-xl.px-3.py-2 { padding: 8px 12px; }
#bet-strategy-card .grid > .rounded-xl.px-3.py-2 .font-mono { font-size: 14px; line-height: 1.3; }
#bet-strategy-card label { margin-bottom: 4px !important; }
#bet-strategy-card select, #bet-strategy-card input:not([type="checkbox"]):not([type="radio"]) { min-height: 38px !important; padding-top: 4px; padding-bottom: 4px; }
#bet-strategy-card textarea { padding: 8px 10px !important; }
#bet-strategy-card #strategy-edit-btn { align-self: flex-start; min-height: 28px !important; padding: 2px 10px !important; }
#bet-strategy-card #strategy-form-fieldset .border-t { padding-top: 8px !important; }
#bet-strategy-card #btn-save-strategy, #bet-strategy-card #btn-bet-run { min-height: 42px !important; padding-top: 6px !important; padding-bottom: 6px !important; }
#bet-strategy-card #btn-bet-actions { gap: 6px; }
/* Cấu hình chiến lược tự lưu nên không cần nút Lưu */
#btn-save-strategy { display: none !important; }
/* Cụm Bot / Dừng / đồng hồ / Bắt đầu cược trong ngăn phải: các dòng xuống hàng sát nhau hơn (giữ nguyên khoảng cách phía trên) */
body.wall-actions-in-drawer #wall-actions-slot { row-gap: 4px; }

/* ===== Điện thoại: thanh điều khiển dưới ô + tờ phủ chi tiết (QT-07 §3.26): mỗi selector viết riêng, không gộp ===== */
.wall-bar { display: none; }
#wall-sheet-backdrop { display: none; }
#wall-sheet-head { display: none; }
@media (max-width: 1023px) {
    .wall-tile:not(.wall-tile-empty) { box-sizing: content-box; width: calc(var(--tile-w, 100%) - 4px); padding-bottom: 56px; }
    .wall-tile:not(.wall-tile-empty) .wall-slot { bottom: 56px; }
    .wall-tile:not(.wall-tile-empty) .wall-shield { bottom: 56px; }
    .wall-tile:not(.wall-tile-empty) .wall-zoom { bottom: 56px; }
    .wall-tile:not(.wall-tile-empty) .wall-overlay-btn { top: calc(50% - 28px); }
    .wall-tile:not(.wall-tile-empty).wall-start-dim::after { bottom: 56px; }
    .wall-bar { display: flex; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; z-index: 13; align-items: center; gap: 8px; padding: 0 8px; box-sizing: border-box; background: #ffffff; border-top: 1px solid #e4e6eb; }
    .wall-bar-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; line-height: 1.25; }
    .wall-bar-state { font-size: 12px; font-weight: 800; color: #050505; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .wall-bar-state[data-tone="on"] { color: #15803d; }
    .wall-bar-state[data-tone="off"] { color: #b91c1c; }
    .wall-bar-sub { font-size: 12px; font-weight: 600; color: #65676b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .wall-bar-run { flex: 0 0 auto; min-width: 104px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; font-size: 13px; font-weight: 800; color: #ffffff !important; cursor: pointer; }
    .wall-bar-run.is-start { background: #42b72a; }
    .wall-bar-run.is-stop { background: #e11d48; }
    .wall-bar-run.is-pick { background: #1877f2; }
    .wall-bar-run:disabled { opacity: 0.6; cursor: not-allowed; }
    .wall-bar-more { flex: 0 0 auto; min-width: 44px; min-height: 44px; border: 0; border-radius: 10px; background: #e4e6eb; color: #050505; font-size: 18px; cursor: pointer; }
    html.dark .wall-bar { background: #131c2e; border-top-color: #334155; }
    html.dark .wall-bar-state { color: #e2e8f0; }
    html.dark .wall-bar-state[data-tone="on"] { color: #4ade80; }
    html.dark .wall-bar-state[data-tone="off"] { color: #f87171; }
    html.dark .wall-bar-sub { color: #94a3b8; }
    html.dark .wall-bar-more { background: #1e293b; color: #e2e8f0; }
    /* Ngăn điều khiển trở thành tờ phủ nửa dưới màn hình, ẩn cho tới khi bấm ⚙ */
    #wall-drawer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; max-height: 78vh; max-height: 78dvh; overflow-y: auto; box-sizing: border-box; padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); background: #f0f2f5; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25); transform: translateY(105%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s; }
    html.dark #wall-drawer { background: #0b0f19; }
    body.wall-sheet-open #wall-drawer { transform: none; visibility: visible; transition: transform 0.2s ease; }
    #wall-sheet-backdrop { position: fixed; inset: 0; z-index: 65; background: rgba(0, 0, 0, 0.45); }
    body.wall-sheet-open #wall-sheet-backdrop { display: block; }
    #wall-sheet-head { display: flex; }
    #wall-drawer-toggle { display: none !important; }
}