* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

html {
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    position: fixed;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    touch-action: none;
}

body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overscroll-behavior: none;
}

#gamePanel {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: fixed;
    padding: 0;
    margin: 0;
}

#adminPanel {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#editPlayerModal,
#playerManagementModal,
#playerHistoryModal {
    z-index: 10000 !important;
}

#editPlayerModal .modal-content,
#playerManagementModal .modal-content,
#playerHistoryModal .modal-content {
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.modal-content {
    background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%);
    padding: 30px;
    border-radius: 15px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.login-logo-container {
    margin-bottom: 20px;
    text-align: center;
}

.login-logo {
    width: 120px;
    height: 120px;
    object-fit: contain;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}

.modal-content h2 {
    margin-bottom: 20px;
    color: #667eea;
    text-shadow: none;
}

.modal-content input {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    color: #1f2937;
    font-size: 16px;
}

.modal-content button {
    width: 100%;
    padding: 12px;
    margin-top: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    transition: transform 0.2s;
}

.modal-content button:active {
    transform: scale(0.95);
}

.error-msg {
    color: #dc2626;
    margin-top: 10px;
    font-size: 14px;
}

.header {
    background: #16213e;
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #444;
    flex-shrink: 0;
    height: 45px;
}

.header h1 {
    font-size: 16px;
}

.header button {
    padding: 6px 10px;
    font-size: 12px;
    transition: all 0.2s;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: white;
    font-weight: bold;
}

.header button:hover {
    transform: scale(1.08);
}

.header button:active {
    transform: scale(1.25);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.6), 0 5px 15px rgba(0, 0, 0, 0.4);
    animation: buttonShake 0.3s ease-out;
    z-index: 100;
    position: relative;
}

.player-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.balance {
    color: #ffd700;
    font-size: 18px;
    font-weight: bold;
    margin-top: 5px;
}

.menu-btn {
    background: #444;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 20px;
    cursor: pointer;
}

.video-section {
    height: 40vh;
    background: #111;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    margin: 0;
    padding: 0;
}

.camera-section {
    height: 30vh;
    background: #000 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="50" y="50" text-anchor="middle" dy="0.3em" fill="%23666" font-size="12" font-family="Arial">📹 Vùng Phát Video</text></svg>') center/200px no-repeat;
    position: relative;
    overflow: hidden;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#adminCamera {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex: 1;
}

#adminVideo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    flex: 1;
}

.video-scrubber-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
    padding: 10px 15px;
    z-index: 50;
    transition: opacity 0.3s ease;
}

.video-scrubber-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.video-time-info {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.video-progress-container {
    width: 100%;
    height: 12px;
    background: rgba(255,255,255,0.3);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
}

.video-progress-bar {
    height: 100%;
    background: #ffd700;
    border-radius: 6px;
    width: 0%;
    transition: width 0.1s linear;
    box-shadow: 0 0 10px rgba(255,215,0,0.8);
    position: relative;
}

.video-progress-bar::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: #ffd700;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(255,215,0,0.9), 0 2px 8px rgba(0,0,0,0.5);
    border: 3px solid #fff;
    cursor: grab;
    transition: transform 0.2s ease;
}

.video-progress-bar:active::after {
    cursor: grabbing;
    transform: translateY(-50%) scale(1.2);
}

.video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    font-size: 20px;
    color: #888;
}

.player-link-compact {
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    z-index: 10;
    display: flex;
    gap: 5px;
    align-items: center;
    background: rgba(0, 0, 0, 0.7);
    padding: 5px;
    border-radius: 5px;
}

.player-link-compact input {
    flex: 1;
    padding: 6px 8px;
    background: #1a1a2e;
    border: 1px solid #4CAF50;
    border-radius: 4px;
    color: #fff;
    font-size: 11px;
}

.player-link-compact button {
    padding: 6px 12px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.player-link-compact #copyMessage {
    display: none;
    position: absolute;
    top: -25px;
    right: 0;
    background: #4CAF50;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
}

.timer-overlay {
    position: fixed;
    top: 65px;
    right: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: transparent;
    z-index: 999;
    pointer-events: auto;
    cursor: move;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.timer-overlay-message {
    font-size: 28px;
    font-weight: bold;
    color: #f4ff05;
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.9), 0 0 30px rgb(236, 255, 26, 0.8), 2px 2px 6px rgba(0, 0, 0, 1);
    margin-bottom: 15px;
    animation: pulse 1s infinite;
    background: rgba(0, 0, 0, 0.4);
    padding: 8px 20px;
    border-radius: 8px;
}

.timer-overlay-countdown {
    font-size: 60px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 25px rgba(0, 0, 0, 0.9), 0 0 40px rgba(255, 255, 255, 0.8), 3px 3px 8px rgba(0, 0, 0, 1);
    animation: scaleIn 0.5s ease-out;
    background: rgba(0, 0, 0, 0.4);
    padding: 8px 30px;
    border-radius: 12px;
}

.timer-overlay.closed .timer-overlay-message {
    color: #ff4444;
    text-shadow: 0 0 20px rgba(255, 68, 68, 0.8);
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

@keyframes scaleIn {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.camera-controls {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    gap: 3px;
    z-index: 10;
}

.camera-controls button {
    padding: 3px 6px;
    background: rgba(102, 126, 234, 0.8);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 9px;
}

.betting-section {
    height: 60vh;
    background: radial-gradient(circle at top, #1a1a2e, #000);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
    position: relative;
}

.last-result {
    text-align: center;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 10px;
    font-size: 20px;
    font-weight: bold;
}

.last-result.win {
    background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
}

.last-result.lose {
    background: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%);
}

.betting-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.bet-area {
    background: linear-gradient(135deg, #2a2a3e 0%, #16213e 100%);
    border: 3px solid #444;
    border-radius: 15px;
    padding: 30px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bet-area.selected {
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.tai-area { border-color: #ff6b6b; }
.xiu-area { border-color: #4ecdc4; }
.chan-area { border-color: #ffd93d; }
.le-area { border-color: #a8e6cf; }

.bet-label {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.bet-amount {
    font-size: 18px;
    color: #ffd700;
}

.chips-section {
    margin-bottom: 20px;
}

.chips-section h4 {
    margin-bottom: 10px;
    color: #ffd700;
}

.chips-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

/* CHIP BASE - Kích thước 42px - Giống 100% Chip Poker */
.chip {
    width: 42px !important;
    height: 42px !important;
    position: relative;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,0.6));
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.chip:active {
    transform: scale(0.9);
}

/* ===== HOA VĂN LỚP NGOÀI - Các thanh trắng nằm ngoài viền ===== */
.chip::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: 2;
    background:
        conic-gradient(
            white 0deg 10deg,
            transparent 10deg 26deg,
            white 26deg 36deg,
            transparent 36deg 52deg,
            white 52deg 62deg,
            transparent 62deg 78deg,
            white 78deg 88deg,
            transparent 88deg 104deg,
            white 104deg 114deg,
            transparent 114deg 130deg,
            white 130deg 140deg,
            transparent 140deg 156deg,
            white 156deg 166deg,
            transparent 166deg 182deg,
            white 182deg 192deg,
            transparent 192deg 208deg,
            white 208deg 218deg,
            transparent 218deg 234deg,
            white 234deg 244deg,
            transparent 244deg 260deg,
            white 260deg 270deg,
            transparent 270deg 286deg,
            white 286deg 296deg,
            transparent 296deg 312deg,
            white 312deg 322deg,
            transparent 322deg 338deg,
            white 338deg 348deg,
            transparent 348deg 360deg
        );
}

/* ===== VÒNG ĐEN NGUYÊN VẸN - Nằm bên TRONG chip - LỚN HƠN ===== */
.chip::after {
    content: "";
    position: absolute;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    border: 1px solid #000;
    background: transparent;
    box-sizing: border-box;
    z-index: 3;
    pointer-events: none;
}

/* VÒNG TRẮNG GIỮA - Căn giữa hoàn hảo với CHỮ LỚN HƠN */
.chip span {
    width: 68% !important;
    height: 68% !important;
    background: #fff;
    border-radius: 50%;
    border: 1.5px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5px !important;
    font-weight: 900;
    z-index: 3;
    box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
    color: #000;
    text-align: center;
    line-height: 1;
}

/* MÀU CHIP */
.chip20 {
    background: radial-gradient(circle at 40% 30%, #ffdb7b, #bb7c03);
}

.chip50 {
    background: radial-gradient(circle at 40% 30%, #90d25b, #3c7a10);
}

.chip100 {
    background: radial-gradient(circle at 40% 30%, #7ce4d3, #2aa598);
}

.chip500 {
    background: radial-gradient(circle at 40% 30%, #73ccff, #1977b9);
}

.chip1k {
    background: radial-gradient(circle at 40% 30%, #cedcf2, #345b96);
}

.action-buttons {
    display: flex;
    gap: 10px;
}

.clear-btn {
    flex: 1;
    padding: 15px;
    background: #ff6b6b;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}

.side-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 300px;
    height: 100%;
    background: #16213e;
    transition: right 0.3s;
    z-index: 999;
    padding: 20px;
}

.side-menu.open {
    right: 0;
}

.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #444;
}

.side-menu button {
    width: 100%;
    padding: 15px;
    margin: 10px 0;
    background: #2a2a3e;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    text-align: left;
    transition: all 0.15s;
}

.side-menu button:active {
    transform: scale(1.05);
    background: #3a3a5e;
    box-shadow: 0 0 15px rgba(102, 126, 234, 0.6);
}

.admin-controls {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: #e8eaf6;
    -webkit-overflow-scrolling: touch;
    padding: 5px;
    color: #212121;
}

.control-tabs {
    display: flex;
    background: #c5cae9;
    border-bottom: 2px solid #5c6bc0;
}

.tab-btn {
    flex: 1;
    padding: 12px 8px;
    background: transparent;
    color: #424242;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.15s;
}

.tab-btn:active {
    transform: scale(1.05);
    background: #7986cb;
}

.tab-btn.active {
    background: #5c6bc0;
    color: #fff;
    border-bottom: 3px solid #3f51b5;
}

.tab-content {
    display: none;
    padding: 8px;
    padding-bottom: 80px;
    max-height: calc(100vh - 340px);
    overflow-y: auto;
    background: #f5f5f5;
    color: #212121;
}

.tab-content.active {
    display: block;
}

.bet-control-section {
    margin-bottom: 15px;
    background: rgba(76, 175, 80, 0.1);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #4CAF50;
}

.bet-control-section h3 {
    margin-bottom: 8px;
    color: #4CAF50;
    font-size: 14px;
    text-align: center;
}

.bet-action-buttons {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 8px;
}

.bet-action-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 8px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.bet-action-btn.approve-btn {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
}

.bet-action-btn.approve-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(76, 175, 80, 0.4);
}

.bet-action-btn.approve-btn:active {
    transform: scale(1.08);
    box-shadow: 0 0 25px rgba(76, 175, 80, 1), 0 0 40px rgba(76, 175, 80, 0.8);
    filter: brightness(1.2);
}

.bet-action-btn.cancel-btn {
    background: linear-gradient(135deg, #f44336 0%, #e53935 100%);
    color: white;
}

.bet-action-btn.cancel-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(244, 67, 54, 0.4);
}

.bet-action-btn.cancel-btn:active {
    transform: scale(1.08);
    box-shadow: 0 0 25px rgba(244, 67, 54, 1), 0 0 40px rgba(244, 67, 54, 0.8);
    filter: brightness(1.2);
}

.result-controls {
    margin-bottom: 4px;
}

.number-grid {
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin: 2px 0;
}

.number-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0px;
}

.number-row:last-child {
    grid-template-columns: repeat(4, 1fr);
}

.number-cell {
    padding: 6px 4px;
    font-size: 13px;
    font-weight: bold;
    border: 2px solid #9fa8da;
    border-radius: 6px;
    background: linear-gradient(135deg, #ffffff 0%, #e8eaf6 100%);
    color: #1a237e;
    cursor: pointer;
    transition: all 0.15s;
    min-height: 32px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.number-cell:hover {
    border-color: #5c6bc0;
    transform: scale(1.05);
}

.number-cell.selected,
.number-cell.dice-strategy-selected {
    background: linear-gradient(135deg, #5c6bc0 0%, #3f51b5 100%);
    color: #fff;
    border-color: #3f51b5;
    box-shadow: 0 0 30px rgba(92, 107, 192, 1), 0 6px 20px rgba(0, 0, 0, 0.3);
    transform: scale(1.5);
    font-size: 20px !important;
    z-index: 100;
    position: relative;
    animation: numberPulse 0.3s ease-out;
}

@keyframes numberPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.6); }
    100% { transform: scale(1.5); }
}

.num-bet-amount {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff9800;
    color: #fff;
    font-size: 11px;
    padding: 2px 5px;
    border-radius: 4px;
    font-weight: bold;
    white-space: nowrap;
    z-index: 10;
    border: 1px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.number-cell.xiu-type {
    border-color: #26c6da;
    background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%);
}

.number-cell.tai-type {
    border-color: #ef5350;
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
}

.announce-btn {
    width: 100%;
    padding: 10px;
    margin-top: 8px;
    margin-bottom: 0;
    font-size: 15px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #5c6bc0 0%, #3f51b5 100%);
    color: #fff;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 4px 10px rgba(92, 107, 192, 0.4);
    min-height: 42px;
}

.announce-btn:disabled {
    background: #444;
    cursor: not-allowed;
    opacity: 0.5;
}

.announce-btn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.announce-btn:not(:disabled):active {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(92, 107, 192, 1), 0 0 40px rgba(92, 107, 192, 0.8);
    filter: brightness(1.2);
}

.result-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.result-btn {
    padding: 10px;
    font-size: 13px;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.result-btn:active {
    transform: scale(1.08);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    filter: brightness(1.2);
}

.tai-btn {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    color: #fff;
    border: 3px solid #FFD700;
}

.xiu-btn {
    background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
    color: #fff;
    border: 3px solid #FFD700;
}

.chan-btn {
    background: linear-gradient(135deg, #ffd93d 0%, #f6d365 100%);
    color: #000;
    border: 3px solid #FFD700;
}

.le-btn {
    background: linear-gradient(135deg, #a8e6cf 0%, #77dd77 100%);
    color: #000;
    border: 3px solid #FFD700;
}

.bets-list {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 8px;
}

.bets-list h3 {
    font-size: 12px;
    margin-bottom: 5px;
    color: #1a237e;
    font-weight: 600;
}

.bet-item {
    background: #ffffff;
    padding: 12px;
    margin: 8px 0;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border-left: 4px solid #5c6bc0;
}

.bet-info {
    flex: 1;
    color: #212121;
}

.bet-actions button {
    padding: 5px 10px;
    margin-left: 3px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 10px;
}

.approve-btn {
    background: #56ab2f;
    color: #fff;
}

.cancel-btn {
    background: #ff6b6b;
    color: #fff;
}

.create-player-section {
    background: #ffffff;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.create-player-section h3 {
    font-size: 15px;
    margin-bottom: 10px;
    color: #1a237e;
    font-weight: 600;
}

.create-player-section input {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    background: #f5f5f5;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    color: #333;
    font-size: 14px;
}

.create-player-section button {
    width: 100%;
    padding: 14px;
    margin-top: 10px;
    background: linear-gradient(135deg, #5c6bc0 0%, #3f51b5 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 3px 8px rgba(92, 107, 192, 0.4);
    transition: all 0.15s;
}

.create-player-section button:active {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(92, 107, 192, 1), 0 0 40px rgba(92, 107, 192, 0.8);
    filter: brightness(1.2);
}

.transaction-section {
    background: #ffffff;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.transaction-section h3 {
    font-size: 15px;
    margin-bottom: 10px;
    color: #1a237e;
    font-weight: 600;
}

.transaction-section input,
.transaction-section select {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    background: #f5f5f5;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    color: #333;
    font-size: 14px;
}

.transaction-section select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.transaction-section button {
    width: 100%;
    padding: 14px;
    margin-top: 10px;
    background: linear-gradient(135deg, #5c6bc0 0%, #3f51b5 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 3px 8px rgba(92, 107, 192, 0.4);
    transition: all 0.15s;
}

.transaction-section button:active {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(92, 107, 192, 1), 0 0 40px rgba(92, 107, 192, 0.8);
    filter: brightness(1.2);
}

.history-list {
    max-height: 250px;
    overflow-y: auto;
}

.history-item {
    background: transparent;
    padding: 8px;
    margin: 6px 0;
    border-radius: 8px;
    font-size: 14px;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.history-item * {
    color: #fff !important;
}

.history-item.win {
    border-left: 4px solid #56ab2f;
}

.history-item.lose {
    border-left: 4px solid #ff6b6b;
}

@media (max-width: 600px) {
    .betting-table {
        grid-template-columns: 1fr;
    }
    
    .chips-container {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .result-buttons {
        grid-template-columns: 1fr;
    }
}

.stats-dashboard {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 6px;
    background: #ffffff;
    border-radius: 8px;
    margin-bottom: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-card {
    background: linear-gradient(135deg, #5c6bc0 0%, #3f51b5 100%);
    padding: 3px 6px;
    border-radius: 6px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.stat-card-large {
    padding: 4px 8px;
}

.stat-card h3 {
    font-size: 10px;
    margin-bottom: 2px;
    opacity: 0.95;
    color: #fff;
}

.stat-value {
    font-size: 14px;
    font-weight: bold;
    color: #ffd54f;
}

.timer-section {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 3px;
    background: rgba(0, 0, 0, 0.9);
    padding: 3px 6px;
    border-radius: 4px;
    border: 1px solid #4CAF50;
    flex-wrap: wrap;
    max-width: 140px;
}

.timer-control-btn {
    padding: 3px 6px;
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 9px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s;
}

.timer-control-btn:active {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.8);
    filter: brightness(1.2);
}

.timer-control-btn.active-betting-btn {
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
    color: #000;
    transform: scale(1.3);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.9), 
                0 0 40px rgba(255, 255, 255, 0.7),
                0 0 60px rgba(255, 255, 255, 0.5);
    animation: glow-pulse-btn 1.5s ease-in-out infinite;
    font-size: 11px;
    padding: 5px 8px;
    z-index: 10;
}

@keyframes glow-pulse-btn {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.9), 
                    0 0 40px rgba(255, 255, 255, 0.7),
                    0 0 60px rgba(255, 255, 255, 0.5);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 255, 255, 1), 
                    0 0 60px rgba(255, 255, 255, 0.9),
                    0 0 90px rgba(255, 255, 255, 0.7);
    }
}

.timer-display {
    font-size: 12px;
    font-weight: bold;
    color: #ffd700;
    min-width: 24px;
    text-align: center;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.timer-display.warning {
    color: #ff6b6b;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.phase-display {
    font-size: 9px;
    font-weight: bold;
    color: #888;
    text-align: center;
    padding: 2px 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    width: 100%;
}

.phase-display.waiting {
    color: #FFA500;
    background: rgba(255, 165, 0, 0.2);
}

.phase-display.betting {
    color: #4CAF50;
    background: rgba(76, 175, 80, 0.2);
    animation: pulse 1s infinite;
}

.player-timer {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 28px;
    font-weight: bold;
    color: #ffd700;
    z-index: 100;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.player-timer.warning {
    color: #ff6b6b;
    animation: pulse 1s infinite;
}

.player-timer-top-left {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.7);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 20px;
    font-weight: bold;
    color: #ffd700;
    z-index: 10;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.player-timer-top-left.warning {
    color: #ff6b6b;
    animation: pulse 1s infinite;
}

.player-timer-top-right {
    position: absolute;
    top: 35px;
    right: 8px;
    background: rgb(0, 1, 14, 0.7);
    padding: 8px 15px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: #ffd700;
    z-index: 10;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
    border: 2px solid #ffd700;
}

.player-timer-top-right.warning {
    color: #ff6b6b;
    animation: pulse 1s infinite;
}

.betting-status-top-left {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 11px;
    height: 11px;
    background: rgba(0, 0, 0, 0.85);
    border-radius: 2px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
    overflow: hidden;
}

.betting-status-top-right {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.85);
    padding: 8px 15px;
    border-radius: 10px;
    z-index: 10;
    text-align: center;
    line-height: 1.2;
    border: 2px solid rgba(0, 255, 0, 0.5);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
    min-width: 100px;
}

.online-users {
    background: #ffffff;
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 8px;
    max-height: 60px;
    overflow-y: auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.online-users-top {
    background: rgba(0, 0, 0, 0.7);
    padding: 6px 10px;
    border-radius: 8px;
    margin-bottom: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    gap: 8px;
    align-items: center;
    min-height: 35px;
}

.online-user {
    background: #e3f2fd;
    padding: 6px 12px;
    margin: 4px;
    border-radius: 6px;
    display: inline-block;
    font-size: 12px;
    color: #1565c0;
    border: 1px solid #90caf9;
}

.control-buttons-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 2px;
    padding: 2px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.status-info {
    display: flex;
    align-items: center;
    gap: 3px;
}

.action-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.control-btn-row {
    padding: 6px 10px;
    font-size: 11px;
    font-weight: bold;
    border: 2px solid;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
    white-space: nowrap;
    z-index: 60;
}

.control-btn-row.open-btn {
    background: linear-gradient(135deg, #c8e6c9 0%, #a5d6a7 100%);
    color: #1b5e20;
    border-color: #66bb6a;
}

.control-btn-row.open-btn:active,
.control-btn-row.open-btn.button-activated {
    background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
    color: #fff;
    border-color: #2e7d32;
    box-shadow: 0 0 30px rgba(76, 175, 80, 1), 0 6px 20px rgba(76, 175, 80, 0.6);
    transform: scale(1.15);
    z-index: 100;
    position: relative;
}

.control-btn-row.open-btn.betting-active {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #000;
    border-color: #ffd700;
    animation: golden-pulse-zoom 1s ease-in-out infinite;
    z-index: 100;
    position: relative;
}

@keyframes golden-pulse-zoom {
    0%, 100% {
        transform: scale(1.1);
        box-shadow: 0 0 20px rgba(255, 215, 0, 1), 
                    0 0 30px rgba(255, 215, 0, 0.8),
                    0 0 40px rgba(255, 215, 0, 0.6);
    }
    50% {
        transform: scale(1.25);
        box-shadow: 0 0 40px rgba(255, 215, 0, 1), 
                    0 0 60px rgba(255, 215, 0, 1),
                    0 0 80px rgba(255, 215, 0, 0.8),
                    0 0 100px rgba(255, 215, 0, 0.6);
    }
}

.control-btn-row.close-btn {
    background: linear-gradient(135deg, #ffcdd2 0%, #ef9a9a 100%);
    color: #b71c1c;
    border-color: #ef5350;
}

.control-btn-row.close-btn:active,
.control-btn-row.close-btn.button-activated {
    background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
    color: #fff;
    border-color: #c62828;
    box-shadow: 0 0 30px rgba(244, 67, 54, 1), 0 6px 20px rgba(244, 67, 54, 0.6);
    transform: scale(1.15);
    z-index: 100;
    position: relative;
}

.control-btn-row.close-btn.stop-active {
    background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
    color: #fff;
    border-color: #c62828;
    animation: red-pulse-zoom 1s ease-in-out infinite;
    z-index: 100;
    position: relative;
}

@keyframes red-pulse-zoom {
    0%, 100% {
        transform: scale(1.1);
        box-shadow: 0 0 20px rgba(244, 67, 54, 1), 
                    0 0 30px rgba(244, 67, 54, 0.8),
                    0 0 40px rgba(244, 67, 54, 0.6);
    }
    50% {
        transform: scale(1.25);
        box-shadow: 0 0 40px rgba(244, 67, 54, 1), 
                    0 0 60px rgba(244, 67, 54, 1),
                    0 0 80px rgba(244, 67, 54, 0.8),
                    0 0 100px rgba(244, 67, 54, 0.6);
    }
}

.control-btn-row.announce-btn {
    background: linear-gradient(135deg, #fff9c4 0%, #fff59d 100%);
    color: #f57f17;
    border-color: #fbc02d;
}

.control-btn-row.announce-btn:active,
.control-btn-row.announce-btn.button-activated {
    background: linear-gradient(135deg, #fbc02d 0%, #f9a825 100%);
    color: #fff;
    border-color: #f57f17;
    box-shadow: 0 0 30px rgba(251, 192, 45, 1), 0 6px 20px rgba(251, 192, 45, 0.6);
    transform: scale(1.15);
    z-index: 100;
    position: relative;
}

.control-btn-row.announce-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: linear-gradient(135deg, #e0e0e0 0%, #bdbdbd 100%);
    color: #757575;
    border-color: #9e9e9e;
}


.special-action-btn.announce-ready {
    background: #f44336 !important;
    color: #fff !important;
    border-color: #fff !important;
    animation: announce-pulse 1s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(244, 67, 54, 1), 0 0 30px rgba(244, 67, 54, 0.8);
    transform: scale(1.1);
}

@keyframes announce-pulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(244, 67, 54, 1), 0 0 30px rgba(244, 67, 54, 0.8);
        transform: scale(1.1);
    }
    50% {
        box-shadow: 0 0 30px rgba(244, 67, 54, 1), 0 0 50px rgba(244, 67, 54, 1);
        transform: scale(1.15);
    }
}

.control-btn-row.refund-btn {
    background: linear-gradient(135deg, #ffe0b2 0%, #ffcc80 100%);
    color: #e65100;
    border-color: #ffb74d;
}

.control-btn-row.refund-btn:active,
.control-btn-row.refund-btn.button-activated {
    background: linear-gradient(135deg, #ffb74d 0%, #ff9800 100%);
    color: #fff;
    border-color: #e65100;
    box-shadow: 0 0 30px rgba(255, 152, 0, 1), 0 6px 20px rgba(255, 152, 0, 0.6);
    transform: scale(1.15);
    z-index: 100;
    position: relative;
}

.betting-status-inline {
    background: rgba(0, 0, 0, 0.85);
    padding: 6px 10px;
    border-radius: 6px;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    color: #00ff00;
    text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00;
    border: 2px solid rgba(0, 255, 0, 0.5);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
}

.online-count-inline {
    background: rgba(0, 0, 0, 0.85);
    padding: 1px 4px;
    border-radius: 3px;
    text-align: center;
    font-size: 9px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 5px rgba(255,255,255,0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    white-space: nowrap;
}

.online-balance-inline {
    background: transparent;
    padding: 1px 4px;
    border-radius: 3px;
    text-align: center;
    font-size: 9px;
    font-weight: bold;
    color: #000;
    text-shadow: none;
    border: none;
    white-space: nowrap;
}

.special-action-btn {
    cursor: pointer;
    transition: all 0.2s;
    pointer-events: auto;
}

.special-action-btn:active {
    transform: scale(1.15);
    box-shadow: 0 0 30px rgba(255, 193, 7, 1), 0 6px 20px rgba(255, 193, 7, 0.6);
}

.special-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #e0e0e0 !important;
    color: #757575 !important;
    border-color: #9e9e9e !important;
}

/* Trang người chơi - Đảm bảo chiếm toàn màn hình */
#gamePanel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: #000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.player-page {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

.video-section-fullscreen {
    height: 280px;
    max-height: 280px;
    min-height: 280px;
    flex-shrink: 0;
    width: 100vw;
    max-width: 100vw;
    position: relative;
    background: #000;
    flex-shrink: 0;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    left: 0;
    right: 0;
}

#playerVideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 1;
    image-rendering: auto;
    image-rendering: -webkit-optimize-contrast;
    will-change: contents;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    margin: 0;
    padding: 0;
}

#playerVideo.video-file-mode {
    object-fit: contain;
    background: #000;
}

#playerCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 1;
    image-rendering: auto;
    image-rendering: -webkit-optimize-contrast;
    will-change: contents;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    margin: 0;
    padding: 0;
}

#playerCanvas.video-file-mode {
    object-fit: contain;
    border-top: 4px solid #0066ff;
    border-bottom: 4px solid #0066ff;
    box-shadow: 0 -2px 15px rgba(0, 102, 255, 0.6), 0 2px 15px rgba(0, 102, 255, 0.6);
    box-sizing: border-box;
}

.player-header {
    padding: 10px 15px;
    background: #0f1419;
    border-bottom: 2px solid #ffd700;
}

.header-top-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 8px;
}

.header-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.header-btn:active {
    transform: scale(0.95);
}

.bottom-nav-buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background: #0f1419;
    border-top: 2px solid #ffd700;
    z-index: 100;
}

.bottom-nav-btn {
    flex: 1;
    background: #16213e;
    color: #fff;
    border: none;
    padding: 8px 0;
    font-size: 20px;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.bottom-nav-btn span {
    font-size: 11px;
    font-weight: 600;
}

.bottom-nav-btn:active {
    background: #667eea;
}

.bottom-nav-btn:first-child {
    border-right: 1px solid #ffd700;
}

.player-info-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dice-logo {
    font-size: 24px;
    animation: rotateDice 3s infinite;
}

@keyframes rotateDice {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(90deg); }
    50% { transform: rotate(180deg); }
    75% { transform: rotate(270deg); }
}

.player-name-small {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}

.balance-display {
    font-size: 18px;
    font-weight: bold;
    color: #ffd700;
}

.video-section-compact {
    flex: 1;
    position: relative;
    overflow: hidden;
    max-height: calc(40vh - 60px);
}

.video-section-compact video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.live-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
}

.live-dot {
    width: 2.7px;
    height: 2.7px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(255, 215, 0, 1), 0 0 7px rgba(255, 215, 0, 0.8), 0 0 10px rgba(255, 165, 0, 0.6);
    animation: pulseLiveDotGold 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes pulseLiveDotGold {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 215, 0, 1), 0 0 20px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 165, 0, 0.6);
    }
    50% {
        transform: scale(5);
        box-shadow: 0 0 25px rgba(255, 215, 0, 1), 0 0 50px rgba(255, 215, 0, 0.9), 0 0 75px rgba(255, 165, 0, 0.7), 0 0 100px rgba(255, 140, 0, 0.5);
        filter: brightness(1.5);
    }
}

.live-text {
    color: white;
    font-size: 9px;
    font-weight: bold;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 5px rgba(255, 215, 0, 0.5);
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.balance-indicator {
    position: absolute;
    top: 5px;
    right: 8px;
    background: rgba(0, 0, 0, 0.8);
    color: #ffd700;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
    z-index: 10;
}


.refund-notification {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #000;
    padding: 15px 30px;
    border-radius: 10px;
    font-size: 20px;
    font-weight: bold;
    z-index: 10000;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.8), 0 0 40px rgba(255, 165, 0, 0.6);
    animation: slideUpAndFade 3s forwards;
    text-align: center;
}

@keyframes slideUpAndFade {
    0% {
        bottom: -100px;
        opacity: 0;
    }
    20% {
        bottom: 50%;
        opacity: 1;
        transform: translate(-50%, 50%);
    }
    80% {
        bottom: 50%;
        opacity: 1;
        transform: translate(-50%, 50%);
    }
    100% {
        bottom: 150%;
        opacity: 0;
        transform: translate(-50%, -50%);
    }
}

.mic-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px;
    border-radius: 50%;
    font-size: 20px;
    z-index: 10;
}

.mic-indicator.active {
    background: rgba(76, 175, 80, 0.9);
    animation: micPulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes micPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.blinking-dots {
    animation: blink 1.5s infinite;
    font-weight: bold;
}

.video-placeholder-compact {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a2e;
    color: #888;
    font-size: 16px;
}

.betting-message {
    padding: 12px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    display: none;
    animation: pulse 1.5s infinite;
}

.last-result-compact {
    padding: 8px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    background: #0f1419;
    min-height: 40px;
}

.betting-section-main {
    height: 60vh;
    max-height: 60vh;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px;
    padding-bottom: 4px;
    gap: 0;
    background: #ffffff;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

.taixiu-row {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    margin: 0 0 0.2px 0;
    gap: 3px;
    padding: 0 8px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.range-row {
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 2px 0;
    gap: 4px;
}

.range-box {
    flex: 1;
    text-align: center;
    font-size: 12px;
    padding: 5px;
    border-radius: 6px;
    font-weight: bold;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid;
}

.range-xiu-box {
    background: #0066ff;
    color: #fff;
    border-color: #0044cc;
}

.range-tai-box {
    background: #ff6600;
    color: #fff;
    border-color: #cc4400;
}

.range-box.result-blinking {
    animation: result-blink 0.5s ease-in-out infinite;
}


.xiu-box, .tai-box {
    flex: 1;
    text-align: center;
    font-size: 16px;
    padding: 10px 8px;
    border-radius: 8px;
    font-weight: bold;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.15s;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 3px solid #0066ff;
    box-shadow: 0 0 12px rgba(0, 102, 255, 0.5);
}

.xiu-box {
    background: #001a66;
    color: #FFD700;
    position: relative;
    box-shadow: 0 0 15px rgba(0, 26, 102, 0.7);
}

.tai-box {
    background: #660000;
    color: #FFD700;
    position: relative;
    box-shadow: 0 0 15px rgba(102, 0, 0, 0.7);
}

.tai-box::before,
.xiu-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: none;
    background: 
        linear-gradient(to right, #FFD700 0%, #FFD700 100%) top 5px left 5px / 18px 3px no-repeat,
        linear-gradient(to bottom, #FFD700 0%, #FFD700 100%) top 5px left 5px / 3px 18px no-repeat,
        linear-gradient(to left, #FFD700 0%, #FFD700 100%) top 5px right 5px / 18px 3px no-repeat,
        linear-gradient(to bottom, #FFD700 0%, #FFD700 100%) top 5px right 5px / 3px 18px no-repeat,
        linear-gradient(to right, #FFD700 0%, #FFD700 100%) bottom 5px left 5px / 18px 3px no-repeat,
        linear-gradient(to top, #FFD700 0%, #FFD700 100%) bottom 5px left 5px / 3px 18px no-repeat,
        linear-gradient(to left, #FFD700 0%, #FFD700 100%) bottom 5px right 5px / 18px 3px no-repeat,
        linear-gradient(to top, #FFD700 0%, #FFD700 100%) bottom 5px right 5px / 3px 18px no-repeat;
    pointer-events: none;
    z-index: 2;
}

.tai-box > *,
.xiu-box > * {
    position: relative;
    z-index: 1;
}

.xiu-box:active {
    transform: scale(1.08);
    border: 4px solid #0088ff;
    box-shadow: 0 0 25px rgba(0, 136, 255, 1), 0 0 40px rgba(0, 136, 255, 0.8);
    filter: brightness(1.3);
}

.tai-box:active {
    transform: scale(1.08);
    border: 4px solid #ff0033;
    box-shadow: 0 0 25px rgba(255, 0, 51, 1), 0 0 40px rgba(255, 0, 51, 0.8);
    filter: brightness(1.3);
}

.xiu-box.selected {
    background: #003ec9;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.9), 0 0 40px rgba(255, 215, 0, 0.6);
    border: 3px solid #ffd700;
    filter: brightness(1.2);
}

.tai-box.selected {
    background: #c90000;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.9), 0 0 40px rgba(255, 215, 0, 0.6);
    border: 3px solid #ffd700;
    filter: brightness(1.2);
}

.bet-odds {
    font-size: 14px;
    opacity: 0.9;
}

.dice-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 3px;
    width: 80%;
    margin: 4px 0;
}

.dice-item {
    background: #222;
    border: 1px solid #555;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
    padding: 2px;
    cursor: pointer;
    transition: all 0.3s;
}

.dice-item.selected {
    background: #ffd700;
    transform: scale(1.1);
}

.number-bet-section {
    width: 98%;
    margin: 0 0 0.2px 0;
}

.number-grid-with-dice-and-even-odd {
    display: flex;
    align-items: flex-start;
    gap: 1px;
    width: 100%;
    justify-content: space-between;
    padding: 3px;
    box-sizing: border-box;
}

.number-grid-with-dice {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: stretch;
    flex: 1;
    margin-bottom: 0;
    padding-bottom: 0;
}

.number-row-tai,
.number-row-xiu {
    display: flex;
    gap: 1px;
    width: 100%;
    justify-content: center;
}

.num-box {
    background: #fff;
    border: 2px solid #0066ff;
    border-radius: 3px;
    color: #000;
    text-align: center;
    padding: 2px 5px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    box-shadow: 0 0 8px rgba(0, 102, 255, 0.4);
}

.num-box:active {
    transform: scale(1.1);
    border: 3px solid #FFD700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 1), 0 0 30px rgba(255, 215, 0, 0.8);
    filter: brightness(1.2);
}

.num-box.selected {
    background: #fff5cc;
    border: 2px solid #ffd700;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.9);
}

.num-box .dice {
    font-size: 11px;
    letter-spacing: 0px;
    color: #000;
}

.num-box p {
    font-size: 16px;
    font-weight: 900;
    color: #000;
    margin-top: 0px;
    margin-bottom: 0;
}

.num-box .num-rate {
    font-size: 10px;
    color: #000;
    font-weight: bold;
    margin-top: 1px;
}

.num-box .bet-amount-display {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    color: #000;
    background: #fff;
    font-weight: bold;
    white-space: nowrap;
    padding: 1px 4px;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    z-index: 10;
}

.number-grid-full {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    gap: 2px;
    width: 95%;
    margin: 4px 0;
}

.num-item {
    background: #111;
    border: 1px solid #444;
    border-radius: 3px;
    text-align: center;
    font-size: 11px;
    padding: 2px 0;
    cursor: pointer;
    transition: all 0.3s;
}

.num-item.selected {
    background: #ffd700;
    color: #000;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.9);
}

.even-odd-row {
    display: flex;
    justify-content: space-around;
    width: 85%;
    margin: 2px 0;
    gap: 4px;
}

.chan-box, .le-box {
    flex: 1;
    text-align: center;
    background: #00aa00;
    border-radius: 6px;
    border: 1.5px solid #00cc00;
    font-size: 10px;
    padding: 2px;
    line-height: 1.1;
    cursor: pointer;
    transition: all 0.3s;
}

.chan-box {
    border-color: #00cc00;
}

.le-box {
    border-color: #00dd00;
}

.chan-box.selected {
    background: #00dd00;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.9);
    border: 2px solid #ffd700;
}

.le-box.selected {
    background: #00dd00;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.9);
    border: 2px solid #ffd700;
}

.betting-active {
    /* Không có hiệu ứng chớp - chỉ hiển thị bình thường */
}

.dice-icons-row-bottom {
    display: flex;
}

.chan-dice-column,
.le-dice-column {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    flex-shrink: 0;
}

.dice-column-left,
.dice-column-right {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    margin-top: 2px;
}

.dice-icon-btn {
    width: 8mm;
    height: 8mm;
    border-radius: 20%;
    border: 0.01mm solid #00CED1;
    background: #FFFFFF;
    display: grid;
    grid-template-areas:
        "a . c"
        "e g f"
        "d . b";
    padding: 1.5px;
    cursor: pointer;
    transition: all 0.3s;
    gap: 0;
    position: relative;
    box-shadow: 
        0 3px 0 #c8dde5,
        0 5px 10px rgba(0,0,0,0.2),
        inset 0 2px 6px rgba(255,255,255,0.9),
        inset 0 -2px 6px rgba(0,0,0,0.08),
        0 0 8px rgba(200,230,240,0.4);
}

.dice-icon-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

.dice-icon-btn:active {
    transform: scale(1.22) !important;
    transition: transform 0.1s ease;
}

.dice-icon-btn.selected {
    border: 0.01mm solid #00CED1;
    background: #FFFFFF;
    box-shadow: 
        0 4px 0 #c8dde5,
        0 6px 12px rgba(0,206,209,0.5),
        inset 0 2px 6px rgba(255,255,255,0.9),
        inset 0 -2px 6px rgba(0,0,0,0.08),
        0 0 12px rgba(0,206,209,0.6);
    transform: scale(1.0) !important;
    z-index: 100;
    position: relative;
    transition: all 0.2s ease;
}

.dice-icon-btn .dot {
    width: 1.8mm;
    height: 1.8mm;
    background: #000;
    border-radius: 50%;
    display: block;
    align-self: center;
    justify-self: center;
}

.dice-icon-btn .dice-rate {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 7px;
    font-weight: bold;
    color: #333;
    text-align: center;
    background: rgba(255, 255, 255, 0.85);
    padding: 1px 0;
    border-radius: 0 0 3px 3px;
    z-index: 1;
}

.dice-icon-btn .dice-number {
    position: absolute;
    top: 1px;
    right: 2px;
    font-size: 8px;
    font-weight: bold;
    color: #fff;
    text-shadow: 
        0 1px 2px rgba(0,0,0,0.8),
        0 0 3px rgba(0,0,0,0.5);
    z-index: 2;
    pointer-events: none;
}

/* Wrapper cho các nút cược mặt xúc xắc */
.dice-bet-wrapper-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    position: relative;
}

.dice-bet-wrapper-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    position: relative;
}

/* Thông tin cược bên trái (cho mặt 1,2,3) */
.dice-bet-info-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 20px;
}

/* Thông tin cược bên phải (cho mặt 4,5,6) */
.dice-bet-info-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 20px;
}

/* Tỷ lệ cược */
.dice-odds-left,
.dice-odds-right {
    font-size: 7px;
    font-weight: bold;
    color: #000;
    background: rgba(255, 255, 255, 0.9);
    padding: 0px 2px;
    border-radius: 2px;
    white-space: nowrap;
}

/* Số tiền đặt cược */
.dice-amount-left,
.dice-amount-right {
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    background: #ff6b00;
    padding: 2px 4px;
    border-radius: 3px;
    border: 1px solid #cc5500;
    white-space: nowrap;
    box-shadow: 0 0 5px rgba(255, 107, 0, 0.6);
}

/* Mặt 1 và mặt 4 có chấm màu đỏ đậm */
.dice-1 .dot {
    background: #cc0000 !important;
}

.dice-4 .dot {
    background: #cc0000 !important;
}

/* Mặt 1 - 1 chấm ở giữa */
.dice-1 .dot:nth-child(1) {
    grid-area: g;
}

/* Mặt 2 - 2 chấm chéo (góc trên trái và góc dưới phải) */
.dice-2 .dot:nth-child(1) {
    grid-area: a;
}
.dice-2 .dot:nth-child(2) {
    grid-area: b;
}

/* Mặt 3 - 3 chấm chéo (góc trên trái, giữa, góc dưới phải) */
.dice-3 .dot:nth-child(1) {
    grid-area: a;
}
.dice-3 .dot:nth-child(2) {
    grid-area: g;
}
.dice-3 .dot:nth-child(3) {
    grid-area: b;
}

/* Mặt 4 - 4 chấm ở 4 góc */
.dice-4 .dot:nth-child(1) {
    grid-area: a;
}
.dice-4 .dot:nth-child(2) {
    grid-area: c;
}
.dice-4 .dot:nth-child(3) {
    grid-area: d;
}
.dice-4 .dot:nth-child(4) {
    grid-area: b;
}

/* Mặt 5 - 5 chấm (4 góc + 1 ở giữa) */
.dice-5 .dot:nth-child(1) {
    grid-area: a;
}
.dice-5 .dot:nth-child(2) {
    grid-area: c;
}
.dice-5 .dot:nth-child(3) {
    grid-area: g;
}
.dice-5 .dot:nth-child(4) {
    grid-area: d;
}
.dice-5 .dot:nth-child(5) {
    grid-area: b;
}

/* Mặt 6 - 6 chấm (3 bên trái, 3 bên phải) */
.dice-6 .dot:nth-child(1) {
    grid-area: a;
}
.dice-6 .dot:nth-child(2) {
    grid-area: c;
}
.dice-6 .dot:nth-child(3) {
    grid-area: e;
}
.dice-6 .dot:nth-child(4) {
    grid-area: f;
}
.dice-6 .dot:nth-child(5) {
    grid-area: d;
}
.dice-6 .dot:nth-child(6) {
    grid-area: b;
}

.chan-box-fixed, .le-box-fixed {
    width: 14mm;
    height: 10.5mm;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 102, 204, 0.3);
    border: 2px solid #0080cc;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.15s;
    font-weight: bold;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(0, 128, 204, 0.7);
    position: relative;
}

.chan-box-fixed:active, .le-box-fixed:active {
    transform: scale(1.08);
    border: 4px solid #FFD700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 1), 0 0 35px rgba(255, 215, 0, 0.8);
    filter: brightness(1.3);
}

.chan-box-fixed {
    margin-left: 0;
    margin-top: 0;
}

.le-box-fixed {
    margin-right: 0;
    margin-top: 0;
}

.chan-box-fixed .bet-label,
.le-box-fixed .bet-label {
    font-size: 13px;
    color: #000;
    font-weight: bold;
    margin-bottom: 1px;
}

.chan-box-fixed .bet-odds,
.le-box-fixed .bet-odds {
    font-size: 10px;
    color: #000;
    font-weight: normal;
}

.chan-box-fixed .bet-amount-display,
.le-box-fixed .bet-amount-display {
    color: #000;
    font-size: 8px;
    white-space: nowrap;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.95);
    padding: 2px 4px;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 10;
}

.chan-box-fixed.selected {
    background: rgba(255, 215, 0, 0.3);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.9);
    border: 3px solid #ffd700;
    filter: brightness(1.3);
}

.le-box-fixed.selected {
    background: rgba(255, 215, 0, 0.3);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.9);
    border: 3px solid #ffd700;
    filter: brightness(1.3);
}

@keyframes glow-betting {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.5);
        filter: brightness(1.2);
    }
    50% {
        box-shadow: 0 0 35px rgba(255, 215, 0, 1), 0 0 60px rgba(255, 215, 0, 0.8);
        filter: brightness(1.3);
    }
}

.result-blinking {
    animation: result-blink 0.5s ease-in-out infinite;
    font-weight: 900 !important;
}

.num-box.result-blinking {
    animation: result-blink-number 0.5s ease-in-out infinite;
    font-weight: 900 !important;
    z-index: 1000;
    position: relative;
}

.num-box.result-blinking p {
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #000 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

@keyframes result-blink {
    0%, 100% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 1), 0 0 50px rgba(255, 215, 0, 0.8);
        border-color: #ffd700;
        transform: scale(1.1);
        filter: brightness(1.5);
    }
    50% {
        box-shadow: 0 0 50px rgba(255, 215, 0, 1), 0 0 80px rgba(255, 215, 0, 1);
        border-color: #ffff00;
        transform: scale(1.15);
        filter: brightness(1.8);
    }
}

@keyframes result-blink-number {
    0%, 100% {
        box-shadow: 0 0 50px rgba(255, 215, 0, 1), 0 0 80px rgba(255, 215, 0, 1);
        border-color: #ffd700;
        transform: scale(2.2);
        filter: brightness(2.5);
        background: #fff5cc !important;
    }
    50% {
        box-shadow: 0 0 70px rgba(255, 215, 0, 1), 0 0 120px rgba(255, 215, 0, 1);
        border-color: #ffff00;
        transform: scale(2.5);
        filter: brightness(3);
        background: #ffffcc !important;
    }
}

/* Xí ngầu KHÔNG dùng result-blinking, chỉ dùng winning-dice */
/* .dice-icon-btn.result-blinking đã bị xóa để tránh phóng to */

.betting-disabled {
    cursor: not-allowed !important;    /* KHÔNG CHO CLICK */
    pointer-events: none !important;   /* KHÔNG CHO TƯƠNG TÁC */
    /* GIỮ NGUYÊN MÀU SẮC - KHÔNG LÀM MỜ */
}

/* Đảm bảo roadmap (lịch sử) KHÔNG bị ảnh hưởng khi ngưng cược */
.roadmap-container-bottom,
.roadmap-grid,
.roadmap-cell {
    opacity: 1 !important;
    filter: none !important;
}

.bet-table-traditional {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
}

.bet-row-top,
.bet-row-bottom {
    flex: 1;
    display: flex;
    gap: 4px;
}

.bet-cell {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    padding: 8px;
    min-width: 70px;
}

.bet-cell.selected {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(255, 215, 0, 1), 0 0 50px rgba(255, 215, 0, 0.8);
    border-width: 4px;
}

.bet-cell.has-bet {
    animation: bet-glow 1.5s ease-in-out infinite;
}

@keyframes bet-glow {
    0%, 100% {
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.8), 0 0 40px rgba(255, 215, 0, 0.5);
    }
    50% {
        box-shadow: 0 0 40px rgba(255, 215, 0, 1), 0 0 70px rgba(255, 215, 0, 0.8);
    }
}

.bet-cell:active {
    transform: scale(0.95);
}

.xiu-cell {
    background: #FFFFFF;
    border: 2px solid #ddd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.xiu-cell .bet-label {
    color: #000;
    text-shadow: none;
}

.tai-cell {
    background: #ff0000;
    border: 2px solid #cc0000;
    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.3);
}

.chan-cell {
    background: #FFFFFF;
    border: 2px solid #ddd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.chan-cell .bet-label {
    color: #000;
    text-shadow: none;
}

.le-cell {
    background: #00cc00;
    border: 2px solid #009900;
    box-shadow: 0 2px 8px rgba(0, 204, 0, 0.3);
}

.bet-label {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(255, 255, 255, 0.3);
    margin-bottom: 4px;
}

.tai-box .bet-label,
.xiu-box .bet-label {
    color: #FFD700 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.chan-cell .bet-label {
    color: #000;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.6);
}

.bet-numbers-top,
.bet-numbers-bottom {
    flex: 3;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0px;
}

.dice-numbers-container {
    flex: 3;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.dice-row {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0px;
}

.dice-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 2px solid #ddd;
    border-radius: 8px;
    color: #000;
    font-size: 32px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    text-shadow: none;
}

.dice-cell:hover {
    background: #f0f0f0;
    transform: scale(1.05);
}

.dice-cell.selected {
    background: #e0e0e0;
    border-color: #999;
    transform: scale(1.1);
}

.dice-cell:active {
    transform: scale(0.95);
}

.num-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 2px solid #ddd;
    border-radius: 6px;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    text-shadow: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.num-cell:hover {
    background: #f0f0f0;
    border-color: #999;
}

.num-cell.selected {
    background: #e0e0e0;
    border-color: #999;
    transform: scale(1.1);
}

.num-cell:active {
    transform: scale(0.9);
}

/* PHẦN LỊCH SỬ T/X - NẰM SAU HÀNG CHÍP */
.roadmap-container-bottom {
    position: relative;
    width: 100%;
    background-color: #ffffff;
    background-image: repeating-linear-gradient(
        0deg,
        #87CEEB 0px,
        #87CEEB 1px,
        transparent 1px,
        transparent 20px
    ),
    repeating-linear-gradient(
        90deg,
        #87CEEB 0px,
        #87CEEB 1px,
        transparent 1px,
        transparent 20px
    );
    background-size: 20px 20px;
    padding: 5px 16.2mm 5px 0;
    z-index: 5;
    min-height: 70px;
    max-height: 250px;
    height: auto;
    box-sizing: border-box;
    border: 5px solid transparent;
    border-image: repeating-linear-gradient(
        45deg,
        #FFD700 0px,
        #FFD700 10px,
        #FF6B6B 10px,
        #FF6B6B 20px,
        #4ECDC4 20px,
        #4ECDC4 30px,
        #95E1D3 30px,
        #95E1D3 40px
    ) 5;
    margin-top: calc(4mm - 2mm);
    flex-shrink: 0;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6), 0 0 30px rgba(255, 107, 107, 0.4);
    overflow-y: auto;
    display: flex;
    gap: 5px;
}

.roadmap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 20px);
    grid-auto-rows: 20px;
    grid-template-rows: repeat(10, 20px);
    gap: 0px;
    max-height: 100%;
    overflow-x: auto;
    overflow-y: auto;
    padding: 0px;
    direction: ltr;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    flex: 1;
}

/* 3 Ô LỊCH SỬ BÊN PHẢI - GRID 3 CỘT */
.roadmap-history-sidebar {
    display: grid;
    grid-template-columns: repeat(3, 22px);
    grid-auto-flow: row;
    gap: 2px;
    width: 75px;
    flex-shrink: 0;
    padding: 5px;
    overflow-y: auto;
    max-height: 100%;
    align-content: start;
    background: rgba(255, 255, 255, 0.1);
}

.dice-history-cell {
    width: 20px;
    height: 20px;
    background: white;
    border: 2px solid #333;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    margin: 0;
}

.dice-history-cell .dot-mini {
    width: 4px;
    height: 4px;
    background: #000;
    border-radius: 50%;
    position: absolute;
}

/* Dot positions for dice */
.dice-history-cell.dice-1 .dot-mini:nth-child(1) { 
    top: 50%; left: 50%; transform: translate(-50%, -50%); 
}

.dice-history-cell.dice-2 .dot-mini:nth-child(1) { top: 4px; left: 4px; }
.dice-history-cell.dice-2 .dot-mini:nth-child(2) { bottom: 4px; right: 4px; }

.dice-history-cell.dice-3 .dot-mini:nth-child(1) { top: 4px; left: 4px; }
.dice-history-cell.dice-3 .dot-mini:nth-child(2) { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.dice-history-cell.dice-3 .dot-mini:nth-child(3) { bottom: 4px; right: 4px; }

.dice-history-cell.dice-4 .dot-mini:nth-child(1) { top: 4px; left: 4px; }
.dice-history-cell.dice-4 .dot-mini:nth-child(2) { top: 4px; right: 4px; }
.dice-history-cell.dice-4 .dot-mini:nth-child(3) { bottom: 4px; left: 4px; }
.dice-history-cell.dice-4 .dot-mini:nth-child(4) { bottom: 4px; right: 4px; }

.dice-history-cell.dice-5 .dot-mini:nth-child(1) { top: 4px; left: 4px; }
.dice-history-cell.dice-5 .dot-mini:nth-child(2) { top: 4px; right: 4px; }
.dice-history-cell.dice-5 .dot-mini:nth-child(3) { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.dice-history-cell.dice-5 .dot-mini:nth-child(4) { bottom: 4px; left: 4px; }
.dice-history-cell.dice-5 .dot-mini:nth-child(5) { bottom: 4px; right: 4px; }

.dice-history-cell.dice-6 .dot-mini:nth-child(1) { top: 4px; left: 4px; }
.dice-history-cell.dice-6 .dot-mini:nth-child(2) { top: 50%; left: 4px; transform: translateY(-50%); }
.dice-history-cell.dice-6 .dot-mini:nth-child(3) { bottom: 4px; left: 4px; }
.dice-history-cell.dice-6 .dot-mini:nth-child(4) { top: 4px; right: 4px; }
.dice-history-cell.dice-6 .dot-mini:nth-child(5) { top: 50%; right: 4px; transform: translateY(-50%); }
.dice-history-cell.dice-6 .dot-mini:nth-child(6) { bottom: 4px; right: 4px; }

.roadmap-cell {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    margin: 2px auto;
    background: transparent;
    position: relative;
    color: #000000;
}

/* TÀI (11-18) - NỀN ĐỎ ĐẬM CÓ CHỮ */
.roadmap-cell.tai {
    background: #8B0000;
    color: #ffffff;
    border: none;
    z-index: 1;
}

/* XỈU (3-10) - NỀN XANH ĐẬM CÓ CHỮ */
.roadmap-cell.xiu {
    background: #0000ff;
    color: #ffffff;
    border: none;
    z-index: 1;
}

.betting-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 5px;
    flex: 0.6;
}

.bet-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 2px solid transparent;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    min-height: 55px;
}

.bet-btn.selected {
    border-color: #ffd700;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.8), 0 4px 15px rgba(0, 0, 0, 0.3);
}

.bet-btn:active {
    /* Không phóng to, chỉ sáng lên */
}

.tai-btn {
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
    border: 3px solid #ffff00;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.2);
}

.xiu-btn {
    background: linear-gradient(135deg, #00ff00 0%, #00cc00 100%);
    border: 3px solid #ffff00;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.2);
}

.chan-btn {
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
    border: 3px solid #ff0000;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.2);
    color: #000;
}

.le-btn {
    background: linear-gradient(135deg, #0088ff 0%, #0066cc 100%);
    border: 3px solid #ffff00;
    box-shadow: 0 0 20px rgba(0, 136, 255, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.2);
}

.bet-name {
    font-size: 32px;
    font-weight: bold;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
}

.bet-amount-display {
    font-size: 9px;
    color: #000;
    background: rgba(255, 255, 255, 0.95);
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: bold;
    text-shadow: none;
    white-space: nowrap;
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.tai-box .bet-amount-display,
.xiu-box .bet-amount-display {
    color: #000;
    background: rgba(255, 255, 255, 0.95);
    text-shadow: none;
    font-size: 9px;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 3px;
    right: 3px;
}

.chips-row {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding: 5px 0;
    -webkit-overflow-scrolling: touch;
}

.chip-btn {
    flex-shrink: 0;
    min-width: 48px;
    padding: 8px 5px;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}

.chip-btn:active {
    transform: scale(0.92);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.clear-all-btn {
    padding: 10px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}

.clear-all-btn:active {
    transform: scale(0.95);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.float-btn {
    position: fixed;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 100;
    transition: transform 0.2s;
}

.float-btn:active {
    transform: scale(0.9);
}

.history-btn {
    bottom: 80px;
    right: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.logout-btn {
    bottom: 15px;
    right: 15px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    color: #fff;
}

.player-card {
    background: #2a2a3e;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    border: 2px solid #444;
}

.player-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #444;
}

.player-balance {
    color: #ffd700;
    font-size: 16px;
    font-weight: bold;
}

.player-credentials {
    background: #1a1a2e;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.credential-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.credential-item:last-child {
    margin-bottom: 0;
}

.credential-item span {
    min-width: 80px;
    color: #888;
    font-size: 14px;
}

.credential-item input {
    flex: 1;
    padding: 8px 12px;
    background: #0f0f1e;
    border: 1px solid #444;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
}

.copy-btn {
    padding: 8px 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    transition: transform 0.2s;
}

.copy-btn:hover {
    transform: scale(1.05);
}

.copy-btn:active {
    transform: scale(0.95);
}

.player-actions {
    display: flex;
    gap: 10px;
}

.action-btn {
    flex: 1;
    padding: 10px;
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    border: none;
    border-radius: 8px;
    color: #000;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s;
}

.action-btn:active {
    transform: scale(0.95);
}

@keyframes fadeOut {
    0% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes bounceIn {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

/* Giao diện bàn cược mới - giống mẫu */
.bet-area-table {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px;
    background: #145a32;
    border-radius: 10px;
}

.side-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
    padding: 10px 5px;
    min-height: 100px;
}

.side-btn.selected {
    transform: scale(1.08);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.9);
    border: 3px solid #ffd700;
}


.xiu-side {
    background-color: #1e3799;
}

.tai-side {
    background-color: #b71540;
}

.numbers-area {
    flex: 3;
    background: #1e8449;
    border-radius: 8px;
    padding: 8px;
}

.pair-row {
    display: flex;
    justify-content: space-around;
    margin-bottom: 6px;
}

.pair-row:last-child {
    margin-bottom: 0;
}

.num-btn {
    flex: 1;
    margin: 2px;
    padding: 8px 4px;
    background: #196f3d;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.num-btn:active {
    transform: scale(0.95);
}

.num-btn.selected {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
    color: #000;
    font-weight: bold;
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.9);
    border: 2px solid #ffed4e;
}

.chan-wide, .le-wide {
    flex: 1;
}

.bet-amount-mini {
    font-size: 10px;
    color: #ffd700;
    margin-top: 2px;
}

.chip-bar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    padding: 6px;
    margin-top: 2px;
    margin-bottom: 2px;
    z-index: 100;
    position: relative;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 6px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.chip-bar::-webkit-scrollbar {
    height: 4px;
}

.chip-bar::-webkit-scrollbar-track {
    background: transparent;
}

.chip-bar::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #ffd700, #ff8c00);
    border-radius: 10px;
}

.chip-row {
    display: flex;
    flex-direction: row;
    gap: 5px;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: nowrap;
}

.chip-row-extra {
    margin-top: 0px;
    animation: slideDown 0.3s ease-out;
}

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

.modal-chip-grid .chip {
    font-size: 10px !important;
}

.chip-modal.chip-selected {
    transform: translateY(-5px) !important;
    box-shadow: 0 0 40px rgba(255, 215, 0, 1), 0 0 60px rgba(255, 215, 0, 0.8) !important;
    border: 3px solid #ffd700 !important;
    filter: brightness(1.5) !important;
    z-index: 100;
}

/* Vòng tròn cho modal chip lớn hơn */
.chip-modal .chip-selection-ring {
    width: 70px;
    height: 70px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    mask: radial-gradient(transparent 30px, black 30px);
    -webkit-mask: radial-gradient(transparent 30px, black 30px);
}

/* Định nghĩa chip cũ đã được thay thế bằng định nghĩa mới ở dòng 544 với họa tiết poker conic-gradient */

/* Chip colors - giống 100% code mẫu với radial-gradient */
.chip-10k { 
    --color: #E67E22; 
    --dark: #A04000; 
    background: radial-gradient(circle at 40% 30%, #ffdb7b, #bb7c03) !important;
}
.chip-20k { 
    --color: #F39C12; 
    --dark: #CA6F1E; 
    background: radial-gradient(circle at 40% 30%, #ffdb7b, #bb7c03) !important;
}
.chip-30k { 
    --color: #27AE60; 
    --dark: #186A3B; 
    background: radial-gradient(circle at 40% 30%, #90d25b, #3c7a10) !important;
}
.chip-50k { 
    --color: #82B74B; 
    --dark: #4D7C0F; 
    background: radial-gradient(circle at 40% 30%, #90d25b, #3c7a10) !important;
}
.chip-100k { 
    --color: #17A2B8; 
    --dark: #117A8B; 
    background: radial-gradient(circle at 40% 30%, #7ce4d3, #2aa598) !important;
}
.chip-200k { 
    --color: #8E44AD; 
    --dark: #5B2C6F; 
    background: radial-gradient(circle at 40% 30%, #cedcf2, #345b96) !important;
}
.chip-500k { 
    --color: #3498DB; 
    --dark: #1F618D; 
    background: radial-gradient(circle at 40% 30%, #73ccff, #1977b9) !important;
}
.chip-1m { 
    --color: #154360; 
    --dark: #0B2838; 
    background: radial-gradient(circle at 40% 30%, #cedcf2, #345b96) !important;
}
.chip-2m { 
    --color: #2C3E50; 
    --dark: #17202A; 
    background: radial-gradient(circle at 40% 30%, #cedcf2, #345b96) !important;
}
.chip-3m { 
    --color: #E74C3C; 
    --dark: #943126; 
    background: radial-gradient(circle at 40% 30%, #ff9999, #cc0000) !important;
}
.chip-4m { 
    --color: #16A085; 
    --dark: #0E6251; 
    background: radial-gradient(circle at 40% 30%, #7ce4d3, #2aa598) !important;
}
.chip-5m { 
    --color: #F39C12; 
    --dark: #7E5109; 
    background: radial-gradient(circle at 40% 30%, #ffdb7b, #bb7c03) !important;
}
.chip-10m { 
    --color: #27AE60; 
    --dark: #186A3B; 
    background: radial-gradient(circle at 40% 30%, #90d25b, #3c7a10) !important;
}
.chip-custom { 
    --color: #00ff00; 
    --dark: #008800; 
}
.chip-custom span {
    font-size: 18px;
    font-weight: 900;
}

.chip:hover {
    transform: scale(1.05);
}

.chip-selected {
    transform: scale(1.1) !important;
    z-index: 100 !important;
    transition: all 0.3s ease !important;
}

/* Vòng tròn vàng xoay khi chip được chọn */
.chip-selection-ring {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-image: 
        conic-gradient(
            from 0deg,
            #FFD700 0deg 36deg,
            transparent 36deg 72deg,
            #FFD700 72deg 108deg,
            transparent 108deg 144deg,
            #FFD700 144deg 180deg,
            transparent 180deg 216deg,
            #FFD700 216deg 252deg,
            transparent 252deg 288deg,
            #FFD700 288deg 324deg,
            transparent 324deg 360deg
        );
    mask: radial-gradient(transparent 21px, black 21px);
    -webkit-mask: radial-gradient(transparent 21px, black 21px);
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.3s ease;
}

.chip-selected .chip-selection-ring {
    opacity: 1;
    animation: spinRingSelected 2.5s linear infinite;
}

@keyframes spinRingSelected {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes spinRing {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.action-buttons-row {
    margin: 0px 0 0px 0;
    display: flex;
    justify-content: center;
    gap: 12px;
    width: 95%;
    position: relative;
    z-index: 10;
}

.action-buttons-row button {
    width: 35%;
    padding: 6px 8px;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    color: white;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.bet-action-btn {
    background: linear-gradient(to bottom, #008800, #004d00);
    border: 2px solid #00cc00;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.bet-action-btn:active {
    transform: scale(0.95);
}

.cancel-action-btn {
    background: linear-gradient(to bottom, #cc0000, #800000);
    border: 2px solid #ff0000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.cancel-action-btn:active {
    transform: scale(0.95);
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.6);
}

.audio-enable-btn {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    color: white;
    padding: 18px 40px;
    border-radius: 30px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 8px 30px rgba(255, 107, 107, 0.8);
    animation: audioButtonPulse 1.5s infinite;
    border: 3px solid rgba(255, 255, 255, 0.5);
}

@keyframes audioButtonPulse {
    0%, 100% {
        transform: translateX(-50%) scale(1);
        box-shadow: 0 8px 30px rgba(255, 107, 107, 0.8);
    }
    50% {
        transform: translateX(-50%) scale(1.1);
        box-shadow: 0 12px 40px rgba(255, 107, 107, 1);
    }
}

.pip-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    z-index: 100;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    transition: all 0.3s;
}

.pip-button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.pip-button:active {
    transform: scale(0.95);
}

.history-section-player {
    position: fixed;
    bottom: 10px;
    right: 20px;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(0, 3, 188, 0.95) 100%);
    padding: 8px;
    border-radius: 8px;
    border: 2px solid rgba(255, 215, 0, 0.3);
    z-index: 150;
    max-width: 60px;
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.history-header h4 {
    color: #ffd700;
    font-size: 12px;
    margin: 0;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.backup-history-btn {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4);
}

.backup-history-btn:active {
    transform: scale(0.95);
}

.history-box-mini {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #ffd700;
    border-radius: 6px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 120px;
    align-items: center;
    justify-content: flex-start;
}

.result-mini {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    line-height: 14px;
    color: white;
}

.result-mini.tai {
    background: #a30000;
}

.result-mini.xiu {
    background: #0033a3;
}

.info-btn-floating {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.5);
    z-index: 200;
    transition: transform 0.2s;
}

.info-btn-floating:active {
    transform: scale(0.9);
}

.video-mute-btn-below-balance {
    position: absolute;
    top: calc(50px - 5mm);
    right: 5px;
    width: 3mm;
    height: 3mm;
    min-width: 30px;
    min-height: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 3px solid #1e90ff;
    font-size: 14px;
    cursor: pointer;
    z-index: 25;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.video-mute-btn-below-balance::before {
    display: none;
}

.video-mute-btn-below-balance:hover {
    background: rgba(0, 0, 0, 0.8);
    border-color: #4169e1;
}

.video-mute-btn-below-balance:active {
    transform: scale(0.9);
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #4CAF50;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(26px);
}

.info-panel {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 280px;
    background: rgba(26, 26, 46, 0.98);
    border-top-left-radius: 20px;
    z-index: 300;
    box-shadow: -4px -4px 20px rgba(0, 0, 0, 0.5);
    animation: slideInUp 0.3s ease-out;
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.info-panel-content {
    padding: 20px;
    position: relative;
}

.close-info-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    color: #fff;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 5px 10px;
}

.info-panel h3 {
    color: #ffd700;
    margin-bottom: 15px;
    font-size: 18px;
}

.info-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    color: #fff;
}

.info-item span {
    color: #aaa;
}

.info-item strong {
    color: #ffd700;
}

.info-panel hr {
    border: none;
    border-top: 1px solid #444;
    margin: 15px 0;
}

.info-panel-btn {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
}

.info-panel-btn:active {
    transform: scale(0.95);
}

.info-panel-btn.logout-style {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
}

.info-panel-btn.settings-btn-clear {
    background: none;
    border: none;
    width: 10mm;
    height: 10mm;
    min-width: 10mm;
    min-height: 10mm;
    max-width: 10mm;
    max-height: 10mm;
    padding: 0;
    margin: 8px 0;
    font-size: 10mm;
    line-height: 10mm;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    position: absolute;
    right: 10px;
}

.info-panel-btn.settings-btn-clear:active {
    opacity: 0;
}

.last-result-overlay {
    position: absolute;
    bottom: 4px;
    left: 10px;
    right: 10px;
    padding: 3px 5px;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    color: #000;
    background: transparent;
    border-radius: 5px;
    min-height: 20px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.dice-result-display {
    display: inline-flex;
    gap: 3px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.dice-result-display.animate-pulse {
    animation: diceResultPulse 1.5s ease-in-out;
}

@keyframes diceResultPulse {
    0% {
        transform: scale(1);
    }
    15% {
        transform: scale(1.1);
    }
    30% {
        transform: scale(1);
    }
    45% {
        transform: scale(1.1);
    }
    60% {
        transform: scale(1);
    }
    75% {
        transform: scale(1.1);
    }
    90%, 100% {
        transform: scale(1);
    }
}

.dice-result-item {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 3px;
    background: linear-gradient(145deg, #f5fafb, #e8f4f8, #ddeef3);
    border: 1px solid rgba(200, 230, 240, 0.6);
    box-shadow: 
        0 3px 0 #c8dde5,
        0 4px 8px rgba(0,0,0,0.2),
        inset 0 1px 3px rgba(255,255,255,0.9),
        inset 0 -1px 3px rgba(0,0,0,0.08),
        0 0 8px rgba(200, 230, 240, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
}

.dice-result-item .dot-white {
    width: 4px;
    height: 4px;
    background: #000;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    position: absolute;
}

/* Mặt 1 chấm - chấm ở giữa */
.dice-result-item.face-1 .dot-white:nth-child(1) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Mặt 2 chấm - chéo trái trên và phải dưới */
.dice-result-item.face-2 .dot-white:nth-child(1) {
    top: 3px;
    left: 3px;
}
.dice-result-item.face-2 .dot-white:nth-child(2) {
    bottom: 3px;
    right: 3px;
}

/* Mặt 3 chấm - chéo từ trái trên, giữa, phải dưới */
.dice-result-item.face-3 .dot-white:nth-child(1) {
    top: 3px;
    left: 3px;
}
.dice-result-item.face-3 .dot-white:nth-child(2) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.dice-result-item.face-3 .dot-white:nth-child(3) {
    bottom: 3px;
    right: 3px;
}

/* Mặt 4 chấm - 4 góc */
.dice-result-item.face-4 .dot-white:nth-child(1) {
    top: 3px;
    left: 3px;
}
.dice-result-item.face-4 .dot-white:nth-child(2) {
    top: 3px;
    right: 3px;
}
.dice-result-item.face-4 .dot-white:nth-child(3) {
    bottom: 3px;
    left: 3px;
}
.dice-result-item.face-4 .dot-white:nth-child(4) {
    bottom: 3px;
    right: 3px;
}

/* Mặt 5 chấm - 4 góc + 1 giữa */
.dice-result-item.face-5 .dot-white:nth-child(1) {
    top: 3px;
    left: 3px;
}
.dice-result-item.face-5 .dot-white:nth-child(2) {
    top: 3px;
    right: 3px;
}
.dice-result-item.face-5 .dot-white:nth-child(3) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.dice-result-item.face-5 .dot-white:nth-child(4) {
    bottom: 3px;
    left: 3px;
}
.dice-result-item.face-5 .dot-white:nth-child(5) {
    bottom: 3px;
    right: 3px;
}

/* Mặt 6 chấm - 3 bên trái + 3 bên phải */
.dice-result-item.face-6 .dot-white:nth-child(1) {
    top: 3px;
    left: 3px;
}
.dice-result-item.face-6 .dot-white:nth-child(2) {
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
}
.dice-result-item.face-6 .dot-white:nth-child(3) {
    bottom: 3px;
    left: 3px;
}
.dice-result-item.face-6 .dot-white:nth-child(4) {
    top: 3px;
    right: 3px;
}
.dice-result-item.face-6 .dot-white:nth-child(5) {
    top: 50%;
    right: 3px;
    transform: translateY(-50%);
}
.dice-result-item.face-6 .dot-white:nth-child(6) {
    bottom: 3px;
    right: 3px;
}

.open-betting-btn {
    position: absolute;
    top: 5px;
    right: 200px;
    padding: 4px 6px;
    font-size: 11px;
    font-weight: bold;
    border: 2px solid #66bb6a;
    border-radius: 6px;
    background: linear-gradient(135deg, #c8e6c9 0%, #a5d6a7 100%);
    color: #1b5e20;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 28px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 50;
    pointer-events: auto;
}

.open-betting-btn:hover {
    border-color: #4caf50;
    transform: scale(1.08);
}

.open-betting-btn:active {
    background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
    color: #fff;
    border-color: #2e7d32;
    box-shadow: 0 0 30px rgba(76, 175, 80, 1), 0 6px 20px rgba(76, 175, 80, 0.6);
    transform: scale(1.35);
    animation: buttonShake 0.3s ease-out;
    z-index: 100;
    position: relative;
}

.close-betting-btn {
    position: absolute;
    top: 5px;
    right: 133px;
    padding: 4px 6px;
    font-size: 11px;
    font-weight: bold;
    border: 2px solid #ef5350;
    border-radius: 6px;
    background: linear-gradient(135deg, #ffcdd2 0%, #ef9a9a 100%);
    color: #b71c1c;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 28px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 50;
    pointer-events: auto;
}

.close-betting-btn:hover {
    border-color: #f44336;
    transform: scale(1.08);
}

.close-betting-btn:active {
    background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
    color: #fff;
    border-color: #c62828;
    box-shadow: 0 0 30px rgba(244, 67, 54, 1), 0 6px 20px rgba(244, 67, 54, 0.6);
    transform: scale(1.35);
    animation: buttonShake 0.3s ease-out;
    z-index: 100;
    position: relative;
}

.announce-button {
    position: absolute;
    top: 5px;
    right: 68px;
    padding: 4px 6px;
    font-size: 11px;
    font-weight: bold;
    border: 2px solid #66bb6a;
    border-radius: 6px;
    background: linear-gradient(135deg, #c8e6c9 0%, #a5d6a7 100%);
    color: #1b5e20;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 28px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 50;
    pointer-events: auto;
}

.announce-button:hover:not(:disabled) {
    border-color: #4caf50;
    transform: scale(1.08);
}

.announce-button:active:not(:disabled) {
    background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
    color: #fff;
    border-color: #2e7d32;
    box-shadow: 0 0 30px rgba(76, 175, 80, 1), 0 6px 20px rgba(76, 175, 80, 0.6);
    transform: scale(1.35);
    animation: buttonShake 0.3s ease-out;
    z-index: 100;
    position: relative;
}

.announce-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: linear-gradient(135deg, #e0e0e0 0%, #bdbdbd 100%);
    color: #757575;
    border-color: #9e9e9e;
}

.refund-button {
    position: absolute;
    top: 5px;
    right: 3px;
    padding: 4px 6px;
    font-size: 11px;
    font-weight: bold;
    border: 2px solid #ffb74d;
    border-radius: 6px;
    background: linear-gradient(135deg, #ffe0b2 0%, #ffcc80 100%);
    color: #e65100;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 28px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 50;
    pointer-events: auto;
}

.refund-button:hover {
    border-color: #ff9800;
    transform: scale(1.08);
}

.refund-button:active {
    background: linear-gradient(135deg, #ffb74d 0%, #ff9800 100%);
    color: #fff;
    border-color: #e65100;
    box-shadow: 0 0 30px rgba(255, 152, 0, 1), 0 6px 20px rgba(255, 152, 0, 0.6);
    transform: scale(1.35);
    animation: buttonShake 0.3s ease-out;
    z-index: 100;
    position: relative;
}

.button-activated {
    animation: buttonFlash 0.3s ease-out !important;
}

@keyframes buttonFlash {
    0% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 1), 0 0 40px rgba(255, 215, 0, 0.8);
        transform: scale(1.1);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 1), 0 0 60px rgba(255, 215, 0, 1);
        transform: scale(1.15);
    }
    100% {
        box-shadow: 0 3px 8px rgba(255, 152, 0, 0.4);
        transform: scale(1);
    }
}

@keyframes buttonShake {
    0%, 100% { 
        transform: scale(1.35) translateX(0) rotate(0deg); 
    }
    25% { 
        transform: scale(1.35) translateX(-2px) rotate(-1deg); 
    }
    50% { 
        transform: scale(1.35) translateX(2px) rotate(1deg); 
    }
    75% { 
        transform: scale(1.35) translateX(-1px) rotate(-0.5deg); 
    }
}

.fullscreen-view {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #1a1a2e 0%, #0003bc 100%);
    z-index: 9999;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.fullscreen-view.active {
    display: flex;
}

.fullscreen-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.fullscreen-header h2 {
    color: #fff;
    font-size: 20px;
    margin: 0;
    font-weight: bold;
}

.fullscreen-close-btn {
    background: #f44336;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
}

.fullscreen-close-btn:active {
    transform: scale(0.95);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.fullscreen-content {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    -webkit-overflow-scrolling: touch;
}

.fullscreen-content::-webkit-scrollbar {
    width: 8px;
}

.fullscreen-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.fullscreen-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.fullscreen-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutToRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.fullscreen-view.active {
    animation: slideInFromRight 0.3s ease-out;
}

.fullscreen-view.closing {
    animation: slideOutToRight 0.3s ease-out;
}

/* 3 Hình chữ nhật chứa xúc xắc giống nhau */
.dice-triple-container {
    display: none;
}

.dice-triple-center-container {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    justify-content: center;
    position: relative;
    max-width: 100%;
    overflow: visible;
    padding: 0 2px;
}

.bao-indicator {
    position: absolute;
    top: calc(50% + 3mm);
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.95);
    border: 4px solid #ffd700;
    border-radius: 12px;
    padding: 10px 15px;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 0 50px rgba(255, 215, 0, 0.5);
    animation: baoGlow 1.5s ease-in-out infinite;
}

@keyframes baoGlow {
    0%, 100% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 0 50px rgba(255, 215, 0, 0.5);
        border-color: #ffd700;
    }
    50% {
        box-shadow: 0 0 40px rgba(255, 215, 0, 1), 0 0 70px rgba(255, 215, 0, 0.7);
        border-color: #ffed4e;
    }
}

.bao-dice-container {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.bao-dice {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid #333;
    background: #fff;
    display: grid;
    grid-template-areas:
        "a . c"
        "e g f"
        "d . b";
    padding: 4px;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
    animation: baoDicePulse 1s ease-in-out infinite;
}

@keyframes baoDicePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 25px rgba(255, 215, 0, 1);
    }
}

.bao-dice .dot {
    width: 7px;
    height: 7px;
    background: #ff0000;
    border-radius: 50%;
    display: block;
    align-self: center;
    justify-self: center;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.8);
}

.bao-text {
    font-size: 20px;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.5);
    animation: baoTextPulse 1s ease-in-out infinite;
}

@keyframes baoTextPulse {
    0%, 100% {
        transform: scale(1);
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.5);
    }
    50% {
        transform: scale(1.15);
        text-shadow: 0 0 15px rgba(255, 215, 0, 1), 0 0 30px rgba(255, 215, 0, 0.7);
    }
}

.dice-triple-row {
    display: flex;
    gap: 3px;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    flex-wrap: nowrap;
}

.dice-triple-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #ffd700;
    border-radius: 6px;
    padding: 4px 6px;
    min-height: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    flex: 1;
    min-width: 0;
    max-width: calc(33.333% - 2px);
}

.dice-triple-box:hover {
    background: rgba(255, 215, 0, 0.2);
    border-color: #ffed4e;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}

.dice-triple-box.selected {
    background: rgba(255, 215, 0, 0.3);
    border: 3px solid #ffed4e;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
}

.triple-dice-group {
    display: flex;
    gap: 2px;
}

.triple-odds {
    font-size: 9px;
    color: #ffd700;
    font-weight: bold;
    margin-top: 2px;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

.dice-small {
    width: 18px;
    height: 18px;
    border-radius: 20%;
    border: 0.01mm solid #00CED1;
    background: #FFFFFF;
    display: grid;
    grid-template-areas:
        "a . c"
        "e g f"
        "d . b";
    padding: 2px;
    box-sizing: border-box;
    position: relative;
    box-shadow: 
        0 2px 0 #c8dde5,
        0 3px 5px rgba(0,0,0,0.2),
        inset 0 1px 2px rgba(255,255,255,0.9),
        inset 0 -1px 2px rgba(0,0,0,0.08),
        0 0 5px rgba(200,230,240,0.4);
    transform: translateY(-0.5px);
}

.dice-small .dot {
    width: 3px;
    height: 3px;
    background: #000;
    border-radius: 50%;
    display: block;
    align-self: center;
    justify-self: center;
}

/* Mặt 1 và mặt 4 của xúc xắc nhỏ cũng có màu đỏ đậm */
.dice-small.dice-1 .dot {
    background: #cc0000 !important;
}

.dice-small.dice-4 .dot {
    background: #cc0000 !important;
}

/* Làm sáng chấm của xúc xắc được chọn */
.dice-small.dice-highlighted .dot {
    background: #ffd700 !important;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.9);
    animation: dicePulse 1s ease-in-out infinite;
}

@keyframes dicePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.005);
        opacity: 0.95;
    }
}

@keyframes oceanShimmer {
    0%, 100% {
        box-shadow: 
            0 4px 0 #17a2b8,
            0 6px 12px rgba(0,206,209,0.8),
            inset 0 2px 6px rgba(255,255,255,0.9),
            inset 0 -2px 6px rgba(0,206,209,0.3),
            0 0 25px rgba(0,206,209,1),
            0 0 35px rgba(32,178,170,0.8);
    }
    50% {
        box-shadow: 
            0 4px 0 #20B2AA,
            0 6px 12px rgba(0,206,209,1),
            inset 0 2px 6px rgba(255,255,255,1),
            inset 0 -2px 6px rgba(0,206,209,0.4),
            0 0 30px rgba(72,209,204,1),
            0 0 45px rgba(32,178,170,1),
            0 0 55px rgba(0,206,209,0.6);
    }
}

@keyframes yellowFlash {
    0%, 100% {
        background: #FFFFFF;
        box-shadow: 
            0 4px 0 #c8dde5,
            0 6px 12px rgba(0,0,0,0.2),
            inset 0 2px 6px rgba(255,255,255,0.9),
            inset 0 -2px 6px rgba(0,0,0,0.08),
            0 0 8px rgba(200,230,240,0.4);
    }
    50% {
        background: #FFD700;
        box-shadow: 
            0 4px 0 #FFA500,
            0 6px 15px rgba(255,215,0,0.8),
            inset 0 2px 6px rgba(255,255,255,0.9),
            inset 0 -2px 6px rgba(255,165,0,0.3),
            0 0 25px rgba(255,215,0,1),
            0 0 35px rgba(255,215,0,0.6);
    }
}

.dice-icon-btn.winning-dice {
    animation: yellowFlash 0.6s ease-in-out infinite;
}

/* Hiệu ứng chớp nháy cho nút Tài/Xỉu/Chẵn/Lẻ khi trúng */
@keyframes resultBlink {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(255, 215, 0, 0.5);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 30px rgba(255, 215, 0, 1), 0 0 50px rgba(255, 215, 0, 0.8);
        filter: brightness(1.3);
    }
}

.xiu-box.result-winning,
.tai-box.result-winning,
.chan-box-fixed.result-winning,
.le-box-fixed.result-winning {
    animation: resultBlink 0.8s ease-in-out infinite;
    border: 3px solid #FFD700 !important;
}

/* Hiệu ứng phóng to 5 lần cho nút số khi trúng - Giữ 1 giây */
@keyframes numberMagnify5x {
    0% {
        transform: scale(1);
    }
    10% {
        transform: scale(5);
        box-shadow: 0 0 50px rgba(255, 215, 0, 1), 0 0 80px rgba(255, 215, 0, 0.9), 0 0 120px rgba(255, 165, 0, 0.7);
        filter: brightness(1.8);
    }
    90% {
        transform: scale(5);
        box-shadow: 0 0 50px rgba(255, 215, 0, 1), 0 0 80px rgba(255, 215, 0, 0.9), 0 0 120px rgba(255, 165, 0, 0.7);
        filter: brightness(1.8);
    }
    100% {
        transform: scale(1);
    }
}

.num-box.number-winning {
    animation: numberMagnify5x 1.2s ease-in-out;
    border: 3px solid #FFD700 !important;
    z-index: 999;
    position: relative;
}

/* Container bên phải cho xúc xắc 4-5-6 */
.dice-triple-container-right {
    display: none;
}

/* Nhãn cho hàng xúc xắc trong admin */
.dice-row-label {
    min-width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border: 2px solid #ff8c00;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    color: #000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Tối ưu hóa cho màn hình điện thoại nhỏ */
@media (max-width: 400px) {
    .number-grid-with-dice-and-even-odd {
        padding: 2px 1px;
        gap: 1px;
    }
    
    .chan-box-fixed, .le-box-fixed {
        width: 13mm;
        height: 10mm;
    }
    
    .chan-box-fixed .bet-label,
    .le-box-fixed .bet-label {
        font-size: 12px;
    }
    
    .chan-box-fixed .bet-odds,
    .le-box-fixed .bet-odds {
        font-size: 9px;
    }
    
    .dice-icon-btn {
        width: 7.5mm;
        height: 7.5mm;
    }
    
    .dice-icon-btn .dot {
        width: 1.6mm;
        height: 1.6mm;
    }
    
    .num-box {
        padding: 2px 4px;
    }
    
    .num-box p {
        font-size: 14px;
    }
    
    .num-box .num-rate {
        font-size: 9px;
    }
}

/* Tối ưu hóa cho màn hình điện thoại rất nhỏ */
@media (max-width: 360px) {
    .number-grid-with-dice-and-even-odd {
        padding: 1px 0;
        gap: 0px;
    }
    
    .chan-box-fixed, .le-box-fixed {
        width: 12mm;
        height: 9.5mm;
    }
    
    .chan-box-fixed .bet-label,
    .le-box-fixed .bet-label {
        font-size: 11px;
    }
    
    .chan-box-fixed .bet-odds,
    .le-box-fixed .bet-odds {
        font-size: 8px;
    }
    
    .dice-icon-btn {
        width: 7mm;
        height: 7mm;
    }
    
    .dice-icon-btn .dot {
        width: 1.4mm;
        height: 1.4mm;
    }
    
    .num-box {
        padding: 1px 3px;
    }
    
    .num-box p {
        font-size: 13px;
    }
    
    .num-box .num-rate {
        font-size: 8px;
    }
    
    .number-row-tai,
    .number-row-xiu {
        gap: 0px;
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 0, 0, 1);
        transform: scale(1.2);
    }
    100% {
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
        transform: scale(1);
    }
}

/* Hiệu ứng phóng to số giây video - lớn hơn 50% với chớp đỏ */
@keyframes videoSecondPulse {
    0% {
        transform: scale(1);
        color: #ffd700;
    }
    50% {
        transform: scale(1.50);
        color: #ff4444;
    }
    100% {
        transform: scale(1);
        color: #ffd700;
    }
}

.video-time-seconds {
    display: inline-block;
    transition: transform 0.15s ease-out, color 0.15s ease-out;
}

.video-time-seconds.pulse-animation {
    animation: videoSecondPulse 0.3s ease-out;
}

/* Hiệu ứng cho icon đồng hồ */
@keyframes videoIconPulse {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 0px rgba(255, 68, 68, 0));
    }
    50% {
        transform: scale(1.50);
        filter: drop-shadow(0 0 8px rgba(255, 68, 68, 0.9));
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0px rgba(255, 68, 68, 0));
    }
}

.video-time-icon {
    display: inline-block;
    transition: transform 0.15s ease-out, filter 0.15s ease-out;
}

.video-time-icon.pulse-animation {
    animation: videoIconPulse 0.3s ease-out;
}

/* Cảnh báo khi video bị trục trặc - số giây ngưng chạy */
#liveVideoTimeDisplay.video-frozen {
    border-color: #ff4444 !important;
    background: rgba(255, 0, 0, 0.3) !important;
    animation: warningBlink 1s ease-in-out infinite;
}

#liveVideoTimeDisplay.video-frozen #liveVideoTime {
    color: #ff4444 !important;
}

@keyframes warningBlink {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 10px rgba(255, 68, 68, 0.8);
    }
    50% {
        opacity: 0.7;
        box-shadow: 0 0 20px rgba(255, 68, 68, 1);
    }
}

/* Preview thumbnail trên seekbar */
#seekbarPreview {
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.95);
    border: 3px solid #ffd700;
    border-radius: 8px;
    padding: 5px;
    display: none;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.8);
    pointer-events: none;
}

#seekbarPreview canvas {
    display: block;
    width: 160px;
    height: 90px;
    border-radius: 4px;
}

#seekbarPreview .preview-time {
    text-align: center;
    color: #ffd700;
    font-size: 12px;
    font-weight: bold;
    margin-top: 5px;
    text-shadow: 0 0 5px rgba(0,0,0,0.8);
}

/* Hiệu ứng phồng lên cho tất cả button khi nhấn */
button:active {
    transform: scale(1.05) !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6) !important;
    transition: all 0.1s ease-out !important;
}

/* Hiệu ứng đặc biệt cho các nút điều khiển chính */
#playPauseBtn:active,
.seek-step-btn:active {
    transform: scale(1.15) !important;
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.8) !important;
}

.number-cell:active,
.dice-icon-btn:active {
    transform: scale(1.1) !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8) !important;
}

/* Casino Marquee - Dòng chữ chạy ngang */
.casino-marquee-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
}

.casino-marquee {
    display: flex;
    white-space: nowrap;
    animation: marqueeScroll 20s linear infinite;
    font-size: 28px;
    font-weight: bold;
}

.marquee-text {
    display: inline-block;
    padding: 0 50px;
    background: linear-gradient(90deg, 
        #FFD700 0%, 
        #FFFFFF 25%, 
        #FFD700 50%, 
        #FFFFFF 75%, 
        #FFD700 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: textShine 3s linear infinite;
    text-shadow: 
        0 0 10px rgba(255, 215, 0, 0.8),
        0 0 20px rgba(255, 215, 0, 0.6),
        0 0 30px rgba(255, 215, 0, 0.4);
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
}

@keyframes marqueeScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes textShine {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* Responsive cho mobile */
@media (max-width: 768px) {
    .casino-marquee {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .casino-marquee {
        font-size: 16px;
    }
}

/* Golden Glowing Betting Status Animation */
.golden-betting-status {
    background: linear-gradient(90deg, 
        #FFD700 0%, 
        #FFFFFF 25%, 
        #FFD700 50%, 
        #FFFFFF 75%, 
        #FFD700 100%
    ) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: goldenGlow 2s linear infinite, goldenPulse 1.5s ease-in-out infinite !important;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.9)) 
            drop-shadow(0 0 25px rgba(255, 215, 0, 0.7)) 
            drop-shadow(0 0 35px rgba(255, 215, 0, 0.5)) !important;
    font-weight: bold !important;
    font-size: 16px !important;
    letter-spacing: 1px !important;
}

@keyframes goldenGlow {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

@keyframes goldenPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.9)) 
                drop-shadow(0 0 25px rgba(255, 215, 0, 0.7)) 
                drop-shadow(0 0 35px rgba(255, 215, 0, 0.5));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1)) 
                drop-shadow(0 0 35px rgba(255, 215, 0, 0.9)) 
                drop-shadow(0 0 50px rgba(255, 215, 0, 0.7));
    }
}

.bottom-boxes-container {
    position: absolute;
    bottom: 42px;
    left: 0px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 3px;
    background: transparent;
    z-index: 25;
    gap: 2px;
    border-radius: 0;
    width: fit-content;
}

.bottom-box {
    background: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(96, 165, 250, 0.6);
    border-radius: 6px;
    padding: 2px 4px;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    width: 40px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 
                0 0 30px rgba(255, 255, 255, 0.7),
                0 0 45px rgba(255, 255, 255, 0.5),
                inset 0 0 15px rgba(96, 165, 250, 0.4);
}

.bottom-box:first-child {
    border-radius: 6px;
}

.bottom-box:last-child {
    border-radius: 6px;
}

.bottom-box:hover {
    background: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.8), 
                0 0 30px rgba(59, 130, 246, 0.6),
                inset 0 0 15px rgba(59, 130, 246, 0.4);
}

.bottom-box.active {
    color: #ff0000 !important;
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.8), 
                0 0 30px rgba(255, 0, 0, 0.6),
                inset 0 0 15px rgba(59, 130, 246, 0.4);
    font-weight: bold;
}

@keyframes blueGlow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(59, 130, 246, 0.6), 
                    0 0 20px rgba(59, 130, 246, 0.4),
                    inset 0 0 10px rgba(59, 130, 246, 0.3);
    }
    50% {
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.8), 
                    0 0 30px rgba(59, 130, 246, 0.6),
                    inset 0 0 15px rgba(59, 130, 246, 0.5);
    }
}

.admin-page button:active {
    transform: scale(1.1);
    transition: transform 0.1s ease;
}

/* Tắt highlight mặc định trên iOS */
body.admin-page .dice-icon-btn {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Admin Dice Selection - Màu xanh dương và phóng lên khi bấm hoặc được chọn */
body.admin-page .dice-icon-btn.dice-1:active,
body.admin-page .dice-icon-btn.dice-2:active,
body.admin-page .dice-icon-btn.dice-3:active,
body.admin-page .dice-icon-btn.dice-4:active,
body.admin-page .dice-icon-btn.dice-5:active,
body.admin-page .dice-icon-btn.dice-6:active,
body.admin-page .dice-icon-btn.dice-pressed,
body.admin-page .dice-icon-btn.selected {
    background: linear-gradient(145deg, #3b82f6, #60a5fa) !important;
    transform: scale(1.35) translateY(-8px) !important;
    box-shadow: 
        0 8px 0 #2563eb !important,
        0 12px 24px rgba(59, 130, 246, 0.7) !important,
        inset 0 3px 10px rgba(255,255,255,0.95) !important,
        inset 0 -3px 10px rgba(0,0,0,0.15) !important,
        0 0 25px rgba(59, 130, 246, 0.9) !important;
    transition: all 0.12s ease !important;
    z-index: 999 !important;
}

/* Bên trong (các chấm) giữ nguyên màu gốc khi phóng lên */

/* ========== HIỆU ỨNG PHÓNG LÊN CHO TẤT CẢ BUTTON TRONG ADMIN ========== */

/* Tất cả button trong admin có hiệu ứng phóng lên khi bấm */
body.admin-page button:active,
body.admin-page button.btn-pressed {
    transform: scale(1.15) !important;
    filter: brightness(1.2) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
    transition: all 0.1s ease !important;
}

/* Button trong modal cũng có hiệu ứng tương tự */
.modal button:active,
.modal button.btn-pressed {
    transform: scale(1.15) !important;
    filter: brightness(1.2) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
    transition: all 0.1s ease !important;
}

/* ========== ANIMATIONS CHO BET NOTIFICATION ========== */
@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

/* ========== AUTO MODE DICE BUTTONS ========== */
.auto-dice-btn {
    width: 7mm;
    height: 7mm;
    border-radius: 18%;
    border: 0.5mm solid rgba(255,215,0,0.6);
    background: rgba(255,255,255,0.95);
    display: grid;
    grid-template-areas:
        "a . c"
        "e g f"
        "d . b";
    padding: 2px;
    transition: all 0.3s;
    gap: 0;
    position: relative;
    box-shadow: 
        0 3px 0 rgba(200,180,0,0.4),
        0 4px 8px rgba(0,0,0,0.15),
        inset 0 2px 4px rgba(255,255,255,0.9),
        inset 0 -2px 4px rgba(0,0,0,0.05),
        0 0 6px rgba(255,215,0,0.3);
    opacity: 0.4;
}

.auto-dice-btn .dot {
    width: 1.8mm;
    height: 1.8mm;
    background: #000;
    border-radius: 50%;
    display: block;
    align-self: center;
    justify-self: center;
}

.auto-dice-btn.active {
    opacity: 1;
    border: 0.5mm solid #FFD700;
    background: linear-gradient(145deg, #FFF, #FFF9E6);
    box-shadow: 
        0 4px 0 #DAA520,
        0 6px 12px rgba(255,215,0,0.5),
        inset 0 2px 6px rgba(255,255,255,1),
        inset 0 -2px 6px rgba(218,165,32,0.1),
        0 0 15px rgba(255,215,0,0.8);
    transform: scale(1.1);
    z-index: 10;
}

/* Dice color patterns cho AUTO MODE */
.auto-dice-btn.auto-dice-1 .dot { grid-area: g; }
.auto-dice-btn.auto-dice-2 .dot:nth-child(1) { grid-area: a; }
.auto-dice-btn.auto-dice-2 .dot:nth-child(2) { grid-area: b; }
.auto-dice-btn.auto-dice-3 .dot:nth-child(1) { grid-area: a; }
.auto-dice-btn.auto-dice-3 .dot:nth-child(2) { grid-area: g; }
.auto-dice-btn.auto-dice-3 .dot:nth-child(3) { grid-area: b; }
.auto-dice-btn.auto-dice-4 .dot:nth-child(1) { grid-area: a; }
.auto-dice-btn.auto-dice-4 .dot:nth-child(2) { grid-area: c; }
.auto-dice-btn.auto-dice-4 .dot:nth-child(3) { grid-area: d; }
.auto-dice-btn.auto-dice-4 .dot:nth-child(4) { grid-area: b; }
.auto-dice-btn.auto-dice-5 .dot:nth-child(1) { grid-area: a; }
.auto-dice-btn.auto-dice-5 .dot:nth-child(2) { grid-area: c; }
.auto-dice-btn.auto-dice-5 .dot:nth-child(3) { grid-area: g; }
.auto-dice-btn.auto-dice-5 .dot:nth-child(4) { grid-area: d; }
.auto-dice-btn.auto-dice-5 .dot:nth-child(5) { grid-area: b; }
.auto-dice-btn.auto-dice-6 .dot:nth-child(1) { grid-area: a; }
.auto-dice-btn.auto-dice-6 .dot:nth-child(2) { grid-area: c; }
.auto-dice-btn.auto-dice-6 .dot:nth-child(3) { grid-area: e; }
.auto-dice-btn.auto-dice-6 .dot:nth-child(4) { grid-area: f; }
.auto-dice-btn.auto-dice-6 .dot:nth-child(5) { grid-area: d; }
.auto-dice-btn.auto-dice-6 .dot:nth-child(6) { grid-area: b; }

@media (max-width: 400px) {
    .chip {
        width: 38px !important;
        height: 38px !important;
        font-size: 8px !important;
    }
    
    .chip::after {
        width: 72% !important;
        height: 72% !important;
        border: 2.5px solid #000 !important;
    }
    
    .chip span {
        width: 58% !important;
        height: 58% !important;
        font-size: 11px !important;
        border: 1.5px solid black !important;
    }
    
    .chip span::before {
        width: 14px;
        height: 14px;
    }
    
    .chip-selected {
        transform: scale(1.1) !important;
    }
    
    .chip-selection-ring {
        width: 48px !important;
        height: 48px !important;
        mask: radial-gradient(transparent 19px, black 19px) !important;
        -webkit-mask: radial-gradient(transparent 19px, black 19px) !important;
    }
    
    .chip-row {
        gap: 4px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px;
    }
    
    .chip-bar {
        gap: 4px;
        padding: 4px;
        overflow-x: auto;
    }
    
    .taixiu-row {
        padding: 0 5px;
        gap: 2px;
    }
    
    .xiu-box, .tai-box {
        padding: 9px 5px;
        font-size: 15px;
        border: 2.5px solid #0066ff;
        min-height: 58px;
    }
    
    .tai-box {
        border: 2.5px solid #ff0033;
    }
    
    .bet-label {
        font-size: 15px;
    }
    
    .bet-odds {
        font-size: 13px;
    }
}

@media (max-width: 360px) {
    .chip {
        width: 36px !important;
        height: 36px !important;
        font-size: 7px !important;
    }
    
    .chip::after {
        width: 72% !important;
        height: 72% !important;
        border: 2.5px solid #000 !important;
    }
    
    .chip span {
        width: 58% !important;
        height: 58% !important;
        font-size: 10px !important;
        border: 1.5px solid black !important;
    }
    
    .chip span::before {
        width: 12px;
        height: 12px;
    }
    
    .chip-selected {
        transform: scale(1.1) !important;
    }
    
    .chip-selection-ring {
        width: 46px !important;
        height: 46px !important;
        mask: radial-gradient(transparent 18px, black 18px) !important;
        -webkit-mask: radial-gradient(transparent 18px, black 18px) !important;
    }
    
    .chip-row {
        gap: 3px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px;
    }
    
    .taixiu-row {
        padding: 0 4px;
        gap: 2px;
    }
    
    .xiu-box, .tai-box {
        padding: 8px 4px;
        font-size: 14px;
        border: 2px solid #0066ff;
        min-height: 55px;
    }
    
    .tai-box {
        border: 2px solid #ff0033;
    }
    
    .bet-label {
        font-size: 14px;
    }
    
    .bet-odds {
        font-size: 12px;
    }
}