/* Reset CSS cơ bản */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: #f0f2f5; display: flex; justify-content: center; } /* Giữa màn hình nếu xem trên PC */

/* Khung giả lập mobile */
.app-container {
    width: 100%;
    max-width: 480px;
    background: #f4f6f8;
    min-height: 100vh;
    position: relative;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

/* Header */
.header {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    background: #fff;
    padding: 0 15px; /* Giữ khoảng cách thụt lề 2 bên trái/phải */
    
    /* 1. GHIM CỐ ĐỊNH HEADER KHI CUỘN TRANG */
    position: sticky; /* Ghim vị trí */
    top: 0; /* Ghim ở sát mép trên cùng */
    z-index: 999; /* Đảm bảo header luôn nổi lên trên các nội dung khác */
    box-shadow: 0 2px 5px rgba(0,0,0,0.08); /* Thêm bóng mờ nhẹ để tách biệt với nội dung bên dưới khi cuộn */
    
    /* 2. CHỈNH CHIỀU CAO HEADER THỦ CÔNG */
    height: 65px; /* Tăng/giảm con số này (ví dụ: 50px, 70px) để chỉnh chiều cao của thanh header */
}

/* 3. TÙY CHỈNH LOGO HÌNH ẢNH */
.logo-img {
    display: block;
    /* Tăng/giảm con số này để làm logo to ra hoặc nhỏ lại. 
       Chiều ngang (width) sẽ tự động co giãn cho đúng tỷ lệ ảnh gốc */
    height: 35px; 
}

.header-buttons { 
    display: flex; 
    align-items: center; 
    gap: 10px; /* Khoảng cách giữa các nút */
}

/* 4. TÙY CHỈNH KÍCH THƯỚC NÚT BẤM CHUNG */
.header-buttons button {
    border: none; 
    border-radius: 20px; /* Độ bo góc của nút */
    font-weight: bold; 
    cursor: pointer;
    
    /* THAY ĐỔI 2 THÔNG SỐ NÀY ĐỂ CHỈNH KÍCH THƯỚC NÚT */
    /* padding: [khoảng cách trên/dưới] [khoảng cách trái/phải] */
    padding: 8px 16px; /* Tăng 8px lên 10px để làm nút cao hơn, 16px lên 20px để làm nút dài ra */
    font-size: 14px; /* Tăng giảm cỡ chữ trong nút */
}

/* Nút Đăng nhập */
.btn-login { 
    background-color: #ffffff; 
    border: 1.5px solid #9fb0c7 !important; /* Viền màu xanh xám */
    color: #4b586d; /* Màu chữ xanh xám đậm */
    box-shadow: 0 2px 4px rgba(159, 176, 199, 0.15); /* Bóng mờ nhẹ */
}

/* Nút Đăng ký */
.btn-register { 
    /* Dùng gradient tạo độ chuyển màu đỏ từ trên xuống dưới */
    background: linear-gradient(180deg, #ff4b4b 0%, #d80000 100%); 
    border: none !important; 
    color: #ffffff; 
    box-shadow: 0 3px 6px rgba(216, 0, 0, 0.3); /* Đổ bóng màu đỏ mờ giúp nút nổi lên */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); /* Đổ bóng nhẹ cho chữ để sắc nét hơn */
}
/* Biểu tượng hình người (User icon) */
.user-icon { 
    font-size: 24px; /* Chỉnh kích thước to/nhỏ của icon ở đây */
    color: #999; 
    margin-left: 2px; 
}
/* ================= BANNER SLIDER ================= */
.banner-slider {
    position: relative;
    width: 100%;
    overflow: hidden; /* Cắt đi những phần ảnh bị tràn ra ngoài */
    padding: 10px 15px; /* Tạo lề 2 bên để giống ảnh mẫu */
}

/* Khung dàn ngang tất cả các slide */
.banner-slides {
    display: flex;
    width: 100%;
    transition: transform 0.5s ease-in-out; /* Hiệu ứng lướt mượt mà 0.5 giây */
}

/* Từng slide ảnh */
.slide {
    flex: 0 0 100%; /* Bắt buộc mỗi slide chiếm 100% chiều ngang khung */
}

.slide img {
    width: 100%;
    display: block;
    border-radius: 8px; /* Bo tròn 4 góc của banner */
    object-fit: cover;
}

/* Nút mũi tên Trái / Phải */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4); /* Nền đen trong suốt 40% */
    color: white;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%; /* Làm thành hình tròn */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    font-size: 14px;
}

.slider-btn:hover {
    background: rgba(0, 0, 0, 0.7); /* Đậm lên khi trỏ chuột vào */
}

/* Canh vị trí mũi tên */
.slider-prev { left: 25px; }
.slider-next { right: 25px; }

/* Khu vực dấu chấm tròn */
.slider-dots {
    position: absolute;
    bottom: 20px; /* Nằm cách viền đáy banner 20px */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px; /* Khoảng cách giữa các chấm */
    z-index: 10;
}

/* Từng dấu chấm */
.dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5); /* Chấm màu trắng hơi mờ */
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

/* Dấu chấm của ảnh đang hiển thị (sáng lên) */
.dot.active {
    background: #ffffff; /* Sáng rực 100% */
    transform: scale(1.3); /* To ra một chút tạo điểm nhấn */
}
/* Marquee */
.marquee-container {
    padding: 8px 15px; background: #fff; font-size: 13px; font-weight: 500; color: #333;
    border-bottom: 1px solid #eee; margin-bottom: 5px;
}

/* ================= QUICK ACTIONS (CARD STYLE) ================= */
.quick-actions {
    display: flex; 
    justify-content: space-between; 
    gap: 8px; /* Khoảng cách giữa các thẻ */
    padding: 15px;
    background: transparent; /* Nền trong suốt để tệp với màu trang */
}

/* Khung bọc từng mục (Card) */
.action-card {
    background: #fff;
    border-radius: 12px; /* Bo góc thẻ */
    padding: 8px 5px 6px 5px; /* Căn lề trong thẻ */
    flex: 1; /* Giúp 4 thẻ chia đều chiều ngang */
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06); /* Đổ bóng nhẹ cho thẻ nổi lên */
    text-decoration: none; /* Bỏ gạch chân của thẻ <a> */
}

/* Hình ảnh bạn tải về */
.action-img {
    width: 100%;
    height: 48px; /* Tùy chỉnh độ cao của hình ảnh ở đây */
    object-fit: contain; /* Giữ nguyên tỷ lệ ảnh không bị méo */
    margin-bottom: 8px;
}

/* Nút hình viên thuốc bên dưới ảnh */
.action-btn {
    width: 100%;
    border-radius: 20px;
    padding: 4px 6px 4px 8px;
    color: white;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

/* Icon tròn nằm bên phải nút */
.icon-circle {
    background: #fff;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 9px;
}

/* --- Màu sắc riêng cho từng nút và icon --- */
.btn-pink { background: #ff5e78; }
.btn-pink .icon-circle { color: #ff5e78; }

.btn-green { background: #00d05c; }
.btn-green .icon-circle { color: #00d05c; }

.btn-red { background: #db0000; }
.btn-red .icon-circle { color: #db0000; }

.btn-purple { background: #8800ff; }
.btn-purple .icon-circle { color: #8800ff; font-size: 8px; }

/* ================= THẺ MENU LƯỚT NGANG ================= */
.category-menu-wrapper {
    position: relative;
    background: transparent; /* Nền trong suốt tệp với màu web */
    padding: 10px 0;
    display: flex;
    align-items: center;
}

.category-menu {
    display: flex; 
    overflow-x: auto; 
    padding: 0 15px; /* Lề trái/phải */
    gap: 10px; /* Khoảng cách giữa các chữ */
    font-size: 14px; 
    font-weight: 700; 
    color: #7d8a9a; /* Màu chữ xanh xám */
    scrollbar-width: none; 
    width: 100%;
    align-items: center;
}
.category-menu::-webkit-scrollbar { display: none; } /* Ẩn thanh cuộn */

/* Từng mục trong Menu */
.cat-item { 
    white-space: nowrap; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    padding: 8px 16px; /* Tạo không gian bên trong để bo góc đẹp hơn */
    border-radius: 25px; /* Bo tròn tuyệt đối (viên thuốc) */
    transition: all 0.3s ease;
}

/* Biểu tượng (Icon) to hơn chữ một chút */
.cat-item i {
    font-size: 16px;
}

/* Trạng thái Đang Chọn (Active) - Giống nút "Live" trong hình */
.cat-item.active {
    background: #ffffff; /* Nền trắng */
    color: #69788d; /* Giữ màu chữ xám đậm một chút */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Đổ bóng tạo cảm giác lồi lên */
}

/* Mũi tên góc phải báo hiệu lướt */
.scroll-arrow {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    /* Làm nền gradient mờ dần để chữ bị che lấp trông tự nhiên */
    background: linear-gradient(to right, rgba(244,246,248,0), rgba(244,246,248,1) 40%); 
    padding: 15px 10px 15px 25px;
    color: #7d8a9a;
    pointer-events: none; /* Tránh cản trở khi bấm vào các mục bên dưới */
    font-size: 16px;
}
/* ================= JACKPOT SECTION ================= */
.jackpot-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 15px;
}

/* Phần chóp nhô lên cắt hình thang */
.jackpot-top {
    background: #eb2d32; /* Đỏ đậm */
    color: white;
    padding: 6px 30px;
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    /* Dùng clip-path để tạo hình thang vát 2 góc */
    clip-path: polygon(15% 0, 85% 0, 100% 100%, 0% 100%); 
    margin-bottom: -1px; /* Kéo xích xuống 1 chút để liền mạch với phần thân */
    z-index: 2;
}

/* Phần thân màu đỏ chứa số */
.jackpot-bottom {
    background: #eb2d32;
    width: 100%;
    border-radius: 8px;
    padding: 15px 10px;
    box-shadow: 0 4px 10px rgba(235, 45, 50, 0.4);
    display: flex;
    justify-content: center;
    z-index: 1;
}

/* Khu vực chứa các thẻ số */
.jackpot-numbers {
    display: flex; 
    align-items: flex-end; /* Ép dấu phẩy nằm dưới cùng */
    gap: 2px; 
}

/* Từng ô số */
.jackpot-numbers .digit {
    /* Tạo dải màu gradient từ đỏ nhạt -> trắng -> đỏ nhạt giống ảnh */
    background: linear-gradient(180deg, #f07b7e 0%, #ffc4c5 50%, #f07b7e 100%);
    color: #ffffff; /* Số màu trắng */
    padding: 6px 8px;
    font-size: 24px; 
    font-weight: 900; 
    border-radius: 3px; 
    border: 1.5px solid #ffffff; /* Viền trắng mảnh */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3); /* Tạo bóng cho chữ sắc nét */
    line-height: 1;
}

/* Dấu phẩy / Dấu chấm phân cách */
.jackpot-numbers .separator {
    color: white;
    font-size: 20px;
    font-weight: bold;
    margin: 0 1px;
    line-height: 1;
    padding-bottom: 2px;
}
.jackpot-title { font-size: 22px; font-weight: 900; margin-bottom: 10px; letter-spacing: 2px; }
.jackpot-numbers { display: flex; justify-content: center; gap: 3px; }
.jackpot-numbers span {
    background: #ff8a80; padding: 5px 6px; font-size: 22px; 
    font-weight: 900; border-radius: 4px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

/* ================= GAME GRID SECTION ================= */
.section-title { 
    padding: 10px 15px; 
    font-weight: 800; 
    color: #2c3e50; /* Màu chữ xám đen giống bản gốc */
    font-size: 15px; 
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Icon 6 dấu chấm ở tiêu đề */
.title-icon {
    color: #94a3b8; 
    font-size: 14px;
}

.game-grid {
    display: grid; 
    grid-template-columns: repeat(3, 1fr); /* Ép luôn luôn có 3 cột */
    gap: 8px; /* Khoảng cách giữa các ảnh (có thể thu nhỏ thành 6px nếu muốn sát hơn) */
    padding: 0 15px 20px;
}

/* Từng thẻ game */
.game-card {
    display: block; 
    border-radius: 10px; /* Bo góc mượt mà */
    overflow: hidden; /* Cắt những phần ảnh bị lồi ra khỏi viền bo góc */
    background: #fff; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.06); /* Đổ bóng cực nhẹ giúp ảnh nổi lên */
    text-decoration: none;
    transition: transform 0.1s ease; /* Thời gian hiệu ứng bấm */
}

/* Hiệu ứng lún xuống khi người dùng bấm vào (chỉ hoạt động khi click) */
.game-card:active {
    transform: scale(0.95); 
}

/* Đảm bảo hình ảnh lấp đầy thẻ */
.game-card img { 
    width: 100%; 
    height: 100%; 
    display: block; 
    object-fit: cover; /* Giữ tỷ lệ ảnh không bị méo */
}
/* ================= BOTTOM NAVIGATION (NOTCH STYLE) ================= */
.bottom-nav {
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    max-width: 480px; 
    height: 70px; /* Chiều cao cố định */
    display: flex; 
    justify-content: space-around; 
    align-items: flex-end; /* Đẩy các chữ xuống đáy */
    padding-bottom: 8px; /* Khoảng cách từ chữ tới viền đáy */
    z-index: 100;
    background: transparent; /* Nền trong suốt để hiển thị SVG */
}

/* Khung SVG tạo hình vát cong đổ bóng */
.nav-svg-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    filter: drop-shadow(0 -2px 6px rgba(0,0,0,0.06)); /* Đổ bóng cho nguyên mảng cong */
}

/* Các mục menu thường */
.nav-item { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    color: #7d8a9a; /* Màu xanh xám nhạt */
    gap: 4px; 
    cursor: pointer; 
    width: 60px;
    font-size: 10px;
    font-weight: 700;
}
.nav-item i { font-size: 20px; }

/* Trạng thái đang chọn (Active) */
.nav-item.active { color: #f33535; }

/* Khung bọc riêng cho nút trung tâm */
.center-wrapper {
    position: relative;
    width: 70px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Nút lồi BÓNG ĐÁ */
.center-red-btn {
    position: absolute;
    top: -22px; /* Kéo nút trồi lên trên thanh nav */
    left: 50%;
    transform: translateX(-50%);
    width: 52px; 
    height: 52px; 
    border-radius: 50%; 
    /* Gradient xoay tâm: đen ở giữa, tỏa ra viền đỏ */
    background: radial-gradient(circle, #220000 10%, #d50000 70%, #ff1a1a 100%);
    color: white;
    display: flex; 
    justify-content: center; 
    align-items: center;
    font-size: 10px; 
    font-weight: 900; 
    text-align: center;
    box-shadow: 0 4px 10px rgba(213, 0, 0, 0.4); 
    border: 3px solid #f4f6f8; /* Viền tiệp với màu nền trang app */
}

/* Chữ LIVE BÓNG ĐÁ nằm dưới nút đỏ */
.center-text {
    font-size: 10px;
    color: #7d8a9a;
    font-weight: 700;
    white-space: nowrap;
}

/* ================= NÚT CHAT NỔI (FLOATING CHAT) ================= */
.floating-chat {
    position: fixed;
    bottom: 85px; /* Nằm cách thanh nav một đoạn */
    right: 15px; /* Cách lề phải */
    width: 48px;
    height: 48px;
    background: #ef4444; /* Màu đỏ */
    border-radius: 50%; /* Hình tròn */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    z-index: 90;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.floating-chat:active { transform: scale(0.9); }
/* ================= MODAL & FORM STYLES ================= */
/* ================= CẬP NHẬT: MODAL BỊ TRÀN MÀN HÌNH ================= */
.modal-overlay {
    position: fixed; /* Đổi thành fixed để luôn nổi lên trên cùng ngay cả khi cuộn chuột */
    top: 0; left: 0; 
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    display: none; 
    overflow-y: auto;
}

.modal-content {
    background: #f4f6f8;
    min-height: 100%;
    position: relative;
    padding-bottom: 30px;
    
    /* 3 Dòng thêm mới quan trọng nhất để giữ form ở giao diện Mobile */
    max-width: 480px;  /* Giới hạn chiều rộng đúng bằng khung app-container */
    margin: 0 auto;    /* Tự động căn giữa màn hình PC */
    box-shadow: 0 0 20px rgba(0,0,0,0.2); /* Thêm bóng đổ để tách biệt với viền đen */
}

.modal-header {
    background: #fff;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
}
.modal-logo { font-size: 24px; font-weight: 900; color: #b8860b; }
.modal-logo span { color: #e53935; }
.close-modal { font-size: 20px; color: #666; cursor: pointer; padding: 5px; }

.modal-banner img { width: 100%; display: block; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;}

.modal-body { padding: 20px 15px; }
.modal-title { text-align: center; color: #4b586d; margin-bottom: 20px; font-size: 18px; }

/* Các thành phần Form */
.form-group { margin-bottom: 15px; }
.form-label { font-size: 12px; font-weight: 600; color: #4b586d; margin-bottom: 6px; display: block; margin-left: 5px; }
.form-label span { color: #e53935; } /* Dấu sao đỏ */

.input-wrapper {
    background: #fff;
    border-radius: 25px;
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border: 1px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.input-wrapper:focus-within { border: 1px solid #e53935; } /* Đổi màu viền khi đang nhập */
.input-wrapper i { color: #888; font-size: 16px; margin-right: 10px; width: 20px; text-align: center;}
.input-wrapper input {
    border: none; outline: none; flex: 1; font-size: 14px; color: #333; background: transparent;
}
.toggle-pw { margin-left: auto; margin-right: 0 !important; cursor: pointer; }
.phone-prefix { font-size: 14px; font-weight: bold; color: #333; margin-right: 10px; border-right: 1px solid #ccc; padding-right: 10px; }

.form-hint { font-size: 10px; color: #666; margin-top: 5px; margin-left: 10px; line-height: 1.3;}

/* Checkbox */
.form-checkbox { display: flex; align-items: center; gap: 8px; margin: 15px 0 20px 5px; font-size: 13px; color: #666; }
.form-checkbox label span { color: #e53935; font-weight: 600; cursor: pointer;}

/* Nút Submit đỏ */
.btn-submit {
    width: 100%;
    background: linear-gradient(180deg, #ff4b4b 0%, #d80000 100%);
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 25px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(216,0,0,0.3);
    margin-bottom: 15px;
}

/* Nút Đăng ký màu trắng (trong form Đăng nhập) */
.btn-switch-modal {
    width: 100%;
    background: #fff;
    color: #4b586d;
    border: 1px solid #ccc;
    padding: 12px;
    border-radius: 25px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

/* Hộp Cloudflare giả lập */
.cloudflare-box {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.cf-left { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: bold; }
.cf-right { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; color: #333;}
.cf-right small { font-size: 9px; color: #888; }
/* Dòng này cực kỳ quan trọng để JS gọi form hiện lên */
.modal-overlay.show { display: block !important; }