body {
  font-family: Arial, sans-serif;
  background: #111;
  color: #fff;
  padding: 20px;
}

.channel-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
margin: 0 auto;
max-width: 900px;
}

.channel {
flex: 1 1 100%;
max-width: 100%;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
border-radius: 12px;
overflow: hidden;
position: relative;
background: #111;
margin: 10px;
}

.channel h2 {
text-align: center;
color: #FFD700;
font-size: 20px;
margin-top: 10px;
}
.tab-btn {
  padding: 10px 20px;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
}
.tab-btn:hover {
  background-color: #444;
}
.tab-btn.active {
  background-color: #0ea5e9; /* màu xanh dương */
  color: white;
}
.video-wrapper {
position: relative;
width: 100%;
height: auto;
}

video {
width: 100%;
height: auto;
border-radius: 0;
}

.live-badge {
position: absolute;
top: 8px;
left: 8px;
background-color: red;
color: white;
font-weight: bold;
padding: 4px 8px;
border-radius: 5px;
font-size: 12px;
z-index: 10;
}

.live-time {
position: absolute;
top: 8px;
right: 8px;
background-color: rgba(0, 0, 0, 0.6);
color: white;
padding: 4px 8px;
font-size: 12px;
border-radius: 5px;
z-index: 10;
}

.volume-icon {
position: absolute;
bottom: 8px;
right: 8px;
z-index: 10;
cursor: pointer;
}

.loading-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0,0,0,0.6);
color: white;
padding: 10px 20px;
font-size: 14px;
border-radius: 10px;
display: none;
z-index: 20;
}

/* Responsive cho mobile */
@media (max-width: 768px) {
.channel {
max-width: 100%;
}

h1 {
font-size: 18px;
padding: 10px;
}

.channel h2 {
font-size: 16px;
}

#channelSelect {
font-size: 16px;
padding: 8px 12px;
width: 80%;
max-width: 300px;
}

.live-badge, .live-time {
font-size: 10px;
padding: 3px 6px;
}

.volume-icon svg {
width: 20px;
height: 20px;
}
}

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

@media (max-width: 768px) {
  .channel {
    max-width: 100%;
  }
}.volume-icon {
position: absolute;
bottom: 10px;
right: 10px;
background-color: rgba(0,0,0,0.5);
padding: 6px;
border-radius: 50%;
cursor: pointer;
z-index: 10;
transition: background-color 0.3s;
}
.volume-icon:hover {
background-color: rgba(255, 255, 255, 0.2);
}
/* Bảng Caro (Big Road) */
button {
padding: 10px 15px;
font-size: 16px;
background: #333;
color: white;
border: none;
border-radius: 5px;
margin-bottom: 20px;
cursor: pointer;
}

.style-one span {
display: inline-block;
padding: 6px 10px;
margin: 3px;
border-radius: 4px;
font-weight: bold;
}

.B { background-color: red; color: white; }
.P { background-color: blue; color: white; }
.T { background-color: gray; color: white; }

/* 🧩 Bảng caro - style-two */
.style-two {
display: grid;
grid-auto-flow: column;           /* mỗi cột theo chiều dọc */
grid-template-rows: repeat(6, 1fr); /* 6 hàng cố định */
gap: 4px;
padding: 10px;
background: #eee;
border: 1px solid #ccc;
width: max-content;
}

.cell {
width: 30px;
height: 30px;
border: 1px solid #999;     /* 👉 border để thấy rõ "ô" */
text-align: center;
line-height: 30px;
font-weight: bold;
font-size: 14px;
border-radius: 4px;
background-color: white;
}

.cell.B { background-color: #e74c3c; color: white; }
.cell.P { background-color: #3498db; color: white; }
.cell.T { background-color: #7f8c8d; color: white; }
.style-two {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(6, 1fr);
gap: 4px;
padding: 10px;
background: #eee;
border: 1px solid #ccc;
width: max-content;
overflow-x: auto;       /* ✅ Cho phép cuộn ngang nếu dài */
}

#board {
overflow-x: auto;       /* ✅ Bọc ngoài cũng nên có */
max-width: 100%;        /* ✅ Giới hạn trong khung trình duyệt */
}
#board::-webkit-scrollbar {
height: 6px;
}
#board::-webkit-scrollbar-thumb {
background: #aaa;
border-radius: 3px;
}
.live-progress-bar {
position: absolute;
bottom: 0;
left: 0;
height: 4px;
width: 100%;
background: linear-gradient(to right, red 50%, transparent 50%);
background-size: 200% 100%;
z-index: 5;
}
/* đặt cược */
.chip-container {
margin-top: 20px;
/* Updated styles for horizontal scroll */
display: flex;
align-items: center;
overflow-x: auto;
white-space: nowrap;
justify-content: flex-start; /* Align items to start */
gap: 15px; /* Adjust gap as needed */
flex-wrap: nowrap; /* Ensure no wrapping */
padding: 10px; /* Add some padding */
}

.chip {
width: 60px; /* Reduced size */
height: 60px; /* Reduced size */
cursor: pointer;
transition: transform 0.2s ease;
}

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

.chip.selected {
outline: 3px solid yellow;
border-radius: 50%;
}

.chip-max-btn { /* Add specific size */
  width: 60px;
  height: 60px;
  cursor: pointer;
}

.bet-area button {
padding: 10px 20px;
margin: 5px;
background: #444;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
}
/*đặt cược */
/* .betting-board {
display: flex;
justify-content: center;
align-items: center;
margin: 20px auto;
max-width: 500px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.bet-option {
flex: 1;
text-align: center;
padding: 20px 0;
font-size: 20px;
font-weight: bold;
color: white;
cursor: pointer;
transition: background 0.3s;
}

.bet-option:hover {
filter: brightness(1.1);
}

.meron {
background-color: #c62828;
}

.draw {
background-color: #2e7d32;
}

.wala {
background-color: #1565c0;
}

#current-bet-info {
text-align: center;
margin-top: 10px;
font-size: 18px;
} */