/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    background-color: #e0e5ec; /* Màu nền cho PC (phần dư 2 bên) */
    display: flex;
    justify-content: center; /* Căn giữa app */
    min-height: 100vh;
}

/* Phần quan trọng nhất để cố định kích thước */
.app-container {
    width: 100%;
    max-width: 480px; /* Cố định chiều rộng tối đa */
    background-color: #121212; /* Màu nền app */
    color: white;
    position: relative;
    padding-bottom: 70px; /* Chừa chỗ cho thanh nav dưới */
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    /*overflow-x: hidden;*/
}

/* Header */
.header {
    position: sticky; /* Ghim thanh header */
    top: 0; /* Cố định ở sát mép trên cùng */
    z-index: 999; /* Nổi lên trên tất cả các nội dung khác khi cuộn */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #0b0b0b; /* Màu nền tối giống ảnh */
}

/* Tùy chỉnh kích thước ảnh Logo */
.logo-img {
    height: 35px; /* Bạn có thể tăng giảm tùy theo tỷ lệ ảnh thực tế */
    width: auto;
    display: block;
}

/* Vùng chứa các nút bên phải */
.auth-buttons {
    display: flex;
    align-items: center;
    gap: 8px; /* Tạo khoảng cách đều giữa các nút */
}

/* Tùy chỉnh kích thước ảnh Giftcode */
.giftcode-img {
    height: 42px; /* Chỉnh chiều cao cho cân đối với logo và các nút */
    width: auto;
    cursor: pointer;
    display: block;
    
}

/* Nút Đăng nhập / Đăng ký */
.auth-buttons button {
    padding: 10px 12px;
    border: none;
    border-radius: 10px; /* Bo góc tròn nhiều hơn giống ảnh */
    font-weight: bold;
    font-size: 13px;
    color: white;
    cursor: pointer;
    box-shadow: 0 2px 3px rgba(0,0,0,0.4); /* Thêm bóng đổ nhẹ */
}

/* Hiệu ứng màu Gradient cho nút Đăng Nhập */
.btn-login { 
    background: linear-gradient(to bottom, #d94d4d, #9e2323);
    border: 1px solid #731212;
}

/* Hiệu ứng màu Gradient cho nút Đăng Ký */
.btn-register { 
    background: linear-gradient(to bottom, #2ebd59, #1b853a);
    border: 1px solid #115c26;
}
/* Thông báo chạy */
.marquee {
    background: #1a1a1a;
    color: gold;
    padding: 5px 10px;
    font-size: 14px;
    border-bottom: 1px solid #333;
}

/* --- Banner Slider --- */
.banner-slider {
    width: 100%;
    position: relative;
    overflow: hidden; /* Ẩn các ảnh bị tràn ra ngoài khung */
    border-bottom: 2px solid #333;
    background-color: #000;
}

/* Khung chứa tất cả các ảnh */
.slider-wrapper {
    display: flex;
    width: 100%;
    transition: transform 0.5s ease-in-out; /* Hiệu ứng trượt mượt mà */
}

/* Từng ảnh trong banner */
.slide {
    width: 100%;
    flex-shrink: 0; /* Giữ nguyên kích thước, không bị ép nhỏ */
    object-fit: cover;
    display: block;
    /* Bạn có thể đặt chiều cao cố định để các ảnh đều nhau, ví dụ: */
    height: 160px; 
}

/* Chỉ thị trang (Dots) */
.slider-dots {
    position: absolute;
    bottom: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.dot {
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transition: background-color 0.3s;
}
.dot.active {
    background-color: #ffce00; /* Màu vàng khi đang ở ảnh đó */
}
/* --- Khung chính --- */
.main-content {
    padding: 15px;
}

/* --- Bố cục Lưới Game --- */
.game-grid {
    position: relative; /* Biến lưới thành hệ quy chiếu cho 2 ảnh nền */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px; 
    z-index: 1;
}

/* --- Tùy chỉnh 2 ảnh nền chữ S --- */
.bg-shape {
    position: absolute;
    z-index: -1; 
    pointer-events: none; /* Rất quan trọng: cho phép bấm xuyên qua nền vào nút game */
    width: 103%; /* Phóng to nhẹ để tràn kín viền và rãnh */
}

.bg-left {
    top: -1%; /* Căn sát góc trên cùng của lưới */
    left: -2%;
}

.bg-right {
    bottom: -1px; /* Căn sát góc dưới cùng của lưới */
    right: -2%;
}

/* --- Định dạng cơ bản cho mỗi ô game --- */
.game-item {
    position: relative;
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 1 / 1; /* Ép các ô nhỏ thành hình vuông chuẩn */
    transition: transform 0.2s ease;
}

.game-item:active {
    transform: scale(0.96);
}

/* Định dạng riêng cho ô dài 2 cột (Thể thao, Live Casino) */
.large-span {
    grid-column: span 2;
    aspect-ratio: auto; 
    height: 100%;       
}

/* Cài đặt ảnh lấp đầy ô */
.game-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Định dạng số Jackpot --- */
.jackpot {
    position: absolute;
    color: #ffd700; 
    font-size: 11px;
    font-weight: 800;
    text-shadow: 
        0px 1px 2px #000, 
        0px 2px 5px rgba(0, 0, 0, 0.9);
    width: 100%;
    text-align: center;
    z-index: 2;
}

/* Căn vị trí số */
.ban-ca-jackpot { bottom: 20%; }
.no-hu-jackpot { bottom: 22%; }
.table-jackpot { bottom: 22%; }
.casino-jackpot {
    bottom: 15%;
    text-align: left;
    padding-left: 15px; 
}
/* =========================================
   PHẦN MỞ RỘNG: LIVE CASINO & NỔ HŨ
========================================= */

.extended-section {
    padding: 10px 15px 30px 15px; /* Căn lề đồng bộ với lưới game ở trên */
}

/* --- Tiêu đề các mục --- */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.section-title {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.view-more {
    color: #999;
    font-size: 12px;
    text-decoration: none;
    transition: color 0.2s;
}

.view-more:hover {
    color: #fff;
}

/* --- Các nút Tab (Hit Club, SunWin...) --- */
.tab-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
}

.tab-btn {
    flex: 1; /* Chia đều không gian cho 3 nút */
    background-color: #1a1a1a; /* Màu nền tối cho nút chưa chọn */
    color: #e0e0e0;
    border: 1px solid transparent;
    padding: 10px 0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
}

/* Nút đang được chọn (active) có viền vàng */
.tab-btn.active {
    border-color: #ffce00;
    color: #ffffff;
    background-color: #222; 
}

/* --- Khung chứa ảnh bìa ngang --- */
.banner-container {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    /* Thêm bóng đổ nhẹ để khối hình nổi bật hơn trên nền đen */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); 
}

.banner-container .main-banner {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* Căn chỉnh Logo "LIVE" */
.live-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    height: 22px; /* Có thể tinh chỉnh cho vừa vặn */
    z-index: 2;
    pointer-events: none;
}

/* Căn chỉnh số tiền Nổ Hũ khổng lồ */
.huge-jackpot {
    position: absolute;
    bottom: 12px;
    width: 100%;
    text-align: center;
    color: #ffcc00;
    font-size: 26px; /* Chữ to nổi bật */
    font-weight: 900;
    letter-spacing: 0.5px;
    /* Dùng text-shadow nhiều lớp để tạo hiệu ứng viền 3D (stroke) đỏ đen giống bản gốc */
    text-shadow: 
        -1px -1px 0 #6e0000,
         1px -1px 0 #6e0000,
        -1px  1px 0 #6e0000,
         1px  1px 0 #6e0000,
         0px  3px 4px rgba(0,0,0,0.8);
    z-index: 2;
}
/* =========================================
   KHU VỰC DANH SÁCH GAME CHI TIẾT
========================================= */

.game-list-section {
    padding: 0 15px 30px 15px; /* Khớp lề 2 bên với các khối trên */
}

/* Lưới 3 cột */
.game-list-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* Từng ô chứa Game */
.custom-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease;
    /* Ép tỷ lệ chiều cao để thành hình chữ nhật đứng (khoảng 3:4) giống bản gốc */
    aspect-ratio: 3 / 4; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    background-color: #111; /* Nền dự phòng */
}

.custom-item:active {
    transform: scale(0.96);
}

.custom-item .main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Dải hiển thị số (Top Tag) --- */
.top-tag {
    position: absolute;
    top: 5px;
    left: 5px; /* Thụt vào một chút từ góc trái */
    background: rgba(0, 0, 0, 0.6); /* Nền đen mờ */
    color: #ffce00;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    z-index: 2;
}

/* --- Tùy chỉnh riêng cho Ô Đặc Biệt "Săn Hũ Tiền Tỉ" --- */
.jackpot-special {
    background-color: #7b0d00; /* Đỏ đậm làm nền phụ trợ */
}

/* Ảnh chữ lơ lửng */
.jackpot-special .text-overlay {
    position: absolute;
    width: 80%; /* Chiếm 80% chiều rộng khung */
    bottom: 25px; /* Nổi lên khỏi dải đỏ ở đáy */
    left: 10%; /* Căn giữa */
    z-index: 2;
}

/* Dải số của ô đặc biệt có màu đen đậm hơn */
.dark-tag {
    background: #000;
    border: 1px solid #333;
    left: 8px; /* Căn lề trái rộng hơn một chút */
    top: 8px;
    font-size: 11px;
}

/* Dải màu đỏ dưới cùng ghi chữ Xóc Đĩa */
.bottom-red-strip {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #931400; /* Đỏ sẫm */
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    z-index: 2;
    border-top: 1px solid #b32d19; /* Đường viền highlight nhỏ */
}
/* --- Bottom Navigation --- */
.bottom-nav {
    position: fixed; /* Sửa từ absolute thành fixed để ghim cố định */
    bottom: 0;
    width: 100%;
    max-width: 480px; /* Khóa chiều rộng tối đa khớp với app-container */
    height: 85px; 
    background-color: #1a1a1a;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #333;
    z-index: 999; /* Tăng z-index lên thật cao để đảm bảo luôn nằm đè lên mọi nội dung khi cuộn */
}

/* Định dạng từng nút */
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #b3b3b3; /* Chữ màu xám nhạt */
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Định dạng cho các icon hình ảnh */
.nav-item img {
    width: 38px; /* Chiều rộng chuẩn cho icon */
    height: 38px; /* Giữ icon vuông vắn */
    object-fit: contain; /* Không làm méo ảnh */
    margin-bottom: 4px;
    transition: transform 0.2s ease;
}

/* Hiệu ứng khi bấm vào nút */
.nav-item:active {
    transform: scale(0.9);
}

/* Định dạng riêng cho mục đang được chọn (active) */
.nav-item.active {
    color: #ffffff; /* Chữ sáng lên */
}

/* Hiệu ứng phóng to nhẹ ảnh của mục đang chọn */
.nav-item.active img {
    transform: scale(1.15);
}
/* =========================================
   GIAO DIỆN MODAL ĐĂNG NHẬP & ĐĂNG KÝ
========================================= */

/* Lớp phủ làm tối nền phía sau */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9999; /* Luôn nổi lên trên cùng */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Hộp form chính */
.modal-box {
    background-color: #2b2b2b; /* Màu nền xám đen */
    width: 90%;
    max-width: 400px; /* Độ rộng tối đa */
    border-radius: 12px;
    padding: 20px 25px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    color: #fff;
    font-family: Arial, sans-serif;
}

/* Nút X đóng form */
.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    transition: color 0.2s;
}
.close-modal:hover { color: #d13b3b; }

/* Tiêu đề */
.modal-title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #3c3c3c; /* Đường viền xám dưới tiêu đề */
}

/* Nhóm nhập liệu */
.form-group {
    margin-bottom: 15px;
}
.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: bold;
}
.form-group input {
    width: 100%;
    padding: 12px;
    background-color: #222;
    border: 1px solid #444;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    outline: none;
    transition: border 0.3s ease;
}
/* Đổi màu viền thành đỏ khi đang nhập liệu */
.form-group input:focus {
    border-color: #d13b3b; 
}

/* Icon con mắt ẩn mật khẩu */
.input-icon {
    position: relative;
}
.input-icon i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    cursor: pointer;
}

/* Quên mật khẩu */
.forgot-pwd {
    text-align: right;
    margin-bottom: 15px;
}
.forgot-pwd a, .switch-form a {
    color: #d13b3b; /* Màu chữ đỏ */
    text-decoration: none;
    font-size: 13px;
}

/* Nút Submit */
.btn-submit {
    width: 100%;
    padding: 14px;
    background: linear-gradient(to bottom, #d94d4d, #9e2323); /* Gradient đỏ */
    border: 1px solid #731212;
    border-radius: 8px;
    color: white;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    margin-bottom: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
.btn-submit:active { transform: scale(0.98); }

/* Chuyển đổi form */
.switch-form {
    text-align: center;
    font-size: 13px;
    color: #ccc;
    margin: 0;
}