/* Reset CSS cơ bản */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #e2e2e2;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    font-family: sans-serif;
}

/* Khung chính của ứng dụng */
.app-container {
    width: 100%;
    max-width: 480px; 
    background-color: #ffffff;
    min-height: 100vh;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    padding-bottom: 70px;
}

/* Thanh Top Header chứa Logo và Icon */
.top-header {
    position: sticky;
    top:0;
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    padding: 5px 15px; 
    height: 70px; 
    
    /* Thiết lập ảnh nền */
    background-image: url('images/header.jfif'); /* Đổi sang đuôi .png hoặc .jpg nếu LDPlayer không hỗ trợ .avif */
    background-size: 100% 100%; 
    background-position: center;
    background-repeat: no-repeat;
    
   
    
}

/* Định dạng kích thước cho các icon trái/phải */
.header-icon {
    width: 60px; 
    height: auto;
    object-fit: contain;
    cursor: pointer;
}

/* Định dạng kích thước cho Logo ở giữa */
.header-logo {
    height: 45px; 
    width: auto;
    object-fit: contain;
}
/* CSS cho Banner Swiper */
.banner-swiper {
    width: 100%;
    height: auto;
    position: relative; /* Giữ phân trang nằm đè lên ảnh */
}

.banner-swiper .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Tùy chỉnh dấu chấm phân trang giống hình gốc */
.banner-swiper .swiper-pagination-bullet {
    background: transparent;
    border: 1px solid #ccc;
    opacity: 0.8;
    width: 8px;
    height: 8px;
    transition: all 0.3s ease;
}

/* Hiệu ứng kéo dài viên thuốc cho dấu chấm đang active */
.banner-swiper .swiper-pagination-bullet-active {
    background: transparent;
    border: 1.5px solid #666;
    opacity: 1;
    width: 20px; 
    border-radius: 10px;
}
/* Thanh Công Cụ (Chứa Nút Đăng ký & Menu ngang) */
.action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 10px;
    background-color: #ffffff;
}

/* Cụm Nút Đăng Ký / Đăng Nhập (Hiệu ứng viên thuốc) */
.auth-toggle {
    display: flex;
    align-items: center;
    background-color: #4CAF50; /* Màu nền xanh lá */
    border-radius: 35px; /* Bo cong tròn */
    padding: 1px;
    border: 1px solid #4CAF50;
}

.btn-reg {
    background-color: #ffffff;
    color: #4CAF50;
    border: none;
    border-radius: 20px;
    padding: 12px 14px;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 1px 0 3px rgba(0,0,0,0.1);
}

.btn-login {
    background-color: transparent;
    color: #ffffff;
    border: none;
    padding: 8px 14px;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
}

/* Cụm Menu Nhanh 4 Icon */
.quick-menu {
    display: flex;
    gap: 12px; /* Khoảng cách giữa các icon */
}

.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11px;
    font-weight: bold;
    color: #444;
    position: relative;
    cursor: pointer;
    gap: 5px; /* Khoảng cách từ ảnh đến chữ */
}

.menu-item img {
    width: 48px; /* Tùy chỉnh kích thước ảnh icon */
    height: 38px;
    object-fit: contain;
}

/* Nhãn dán 88% (Badge) */
.badge {
    position: absolute;
    top: -6px;
    right: -12px;
    background-color: #00c800; /* Màu nền xanh sáng */
    color: #ffffff;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: bold;
    z-index: 2;
}
/* --- Thanh Menu Vuốt Ngang --- */
.scrollable-menu {
    display: flex;
    overflow-x: auto; /* Cho phép cuộn ngang */
    gap: 15px; /* Khoảng cách giữa các mục */
    padding: 10px 15px;
    background-color: #ffffff;
    
    /* Ẩn thanh cuộn mặc định của trình duyệt để nhìn đẹp như app */
    scrollbar-width: none; /* Dành cho Firefox */
    -ms-overflow-style: none;  /* Dành cho IE/Edge */
}

/* Ẩn thanh cuộn trên Chrome, Safari */
.scrollable-menu::-webkit-scrollbar {
    display: none; 
}

.scroll-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0; /* Ngăn không cho mục bị ép nhỏ lại */
    min-width: 60px; /* Độ rộng tối thiểu của mỗi mục */
    cursor: pointer;
    position: relative;
}

.scroll-item img {
    width: 65px; /* Kích thước ảnh icon */
    height: 65px;
    object-fit: contain;
    margin-bottom: 5px;
}

.scroll-item span {
    font-size: 13px;
    font-weight: bold;
    color: #444; /* Màu chữ mặc định */
}

/* --- Trạng thái đang chọn (Active) --- */
.scroll-item.active span {
    color: #2e7d32; /* Màu chữ xanh lá */
}

/* Tạo dấu gạch ngang màu xanh dưới chữ của mục đang chọn */
.scroll-item.active::after {
    content: '';
    position: absolute;
    bottom: -5px; /* Khoảng cách từ chữ xuống đường gạch */
    width: 20px; /* Độ dài của đường gạch ngang */
    height: 3px;
    background-color: #2e7d32; /* Màu xanh lá */
    border-radius: 2px;
}
/* --- Lưới Danh Sách Game (Tối giản) --- */
.game-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Chia đều 3 cột ngang */
    gap: 12px; /* Khoảng cách giữa các ảnh */
    padding: 15px;
    background-color: #ffffff; /* Hoặc #f5f5f5 tùy ý thích của bạn */
}

/* Khung chứa từng ảnh */
.game-card {
    width: 100%;
    cursor: pointer; /* Đổi con trỏ thành bàn tay khi di chuột vào ảnh */
    /* Thêm hiệu ứng ấn xuống nhẹ khi click */
    transition: transform 0.1s ease;
}

.game-card:active {
    transform: scale(0.95); /* Thu nhỏ ảnh lại 5% khi người dùng bấm vào */
}

/* Định dạng cho ảnh tự co giãn vừa cột */
.game-card img {
    width: 100%; /* Ảnh sẽ tự dàn kín chiều ngang của cột */
    height: auto; /* Chiều cao tự động để không bị méo hình */
    display: block; /* Loại bỏ khoảng trắng thừa mặc định dưới đáy ảnh của trình duyệt */
}
/* --- Thanh Điều Hướng Dưới Cùng (Bottom Navigation) --- */
.bottom-nav {
    position: fixed; /* Ghim cố định xuống đáy màn hình */
    bottom: 0;
    width: 100%;
    max-width: 480px; /* Khớp đúng bằng chiều rộng của app-container */
    display: flex;
    justify-content: space-around; /* Căn đều khoảng cách 5 nút */
    align-items: center;
    padding: 8px 5px;
    background-color: #ffffff; /* Nền dự phòng nếu ảnh bị lỗi */
    z-index: 90; /* Đảm bảo luôn nằm nổi lên trên cùng */
    
    /* Bo tròn 2 góc trên cùng giống trong ảnh */
    border-top-left-radius: 15px; 
    border-top-right-radius: 15px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05); /* Bóng mờ phía trên */
}

/* Định dạng từng nút bấm trong menu */
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: relative;
    gap: 4px; /* Khoảng cách từ icon xuống chữ */
}

/* Định dạng Icon */
.nav-item img {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

/* Định dạng Chữ */
.nav-item span {
    font-size: 11px;
    color: #777; /* Màu xám mặc định cho các mục chưa chọn */
    font-weight: bold;
}

/* --- Trạng thái Đang Chọn (Active) --- */
.nav-item.active span {
    color: #2e7d32; /* Đổi màu chữ sang xanh lá */
}

/* Tạo gạch ngang xanh lá dưới chữ cho mục đang chọn */
.nav-item.active::after {
    content: '';
    position: absolute;
    bottom: -4px; /* Khoảng cách từ đáy chữ xuống vạch kẻ */
    width: 14px;
    height: 2.5px;
    background-color: #2e7d32;
    border-radius: 2px;
}

/* --- Màn hình Đăng Nhập / Đăng Ký --- */
.auth-modal {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px; /* Khớp với app-container */
    height: 100vh;
    background-color: #f9fcf3; /* Màu nền xanh lá nhạt */
    z-index: 9999;
    display: none; /* Ẩn mặc định */
    overflow-y: auto;
}

.auth-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    color: #4CAF50;
}

.auth-header i {
    font-size: 20px;
    cursor: pointer;
    color: #666;
}

.auth-header h1 {
    font-size: 26px;
    font-weight: 900;
}

.auth-banner-wrap {
    padding: 0 15px;
}

.auth-banner-wrap img {
    width: 100%;
    border-radius: 10px;
}

/* Tabs Đăng Nhập / Đăng Ký */
.auth-tabs {
    display: flex;
    margin: 15px;
    background: #666;
    border-radius: 25px;
    overflow: hidden;
}

.tab-btn {
    flex: 1;
    padding: 12px 0;
    border: none;
    background: transparent;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}

.tab-btn.active {
    background: #4CAF50;
    border-radius: 25px;
}

/* Form Input */
.auth-form {
    padding: 0 15px 30px;
}

.input-group {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #4CAF50;
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 12px;
}

.input-group input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    padding-left: 5px;
}

.icon-left {
    color: #4CAF50;
    margin-right: 5px;
}

.icon-right {
    color: #999;
    cursor: pointer;
}

.required-star {
    color: red;
    margin-right: 5px;
}

/* Input Số Điện Thoại có cờ VN */
.phone-group {
    padding-left: 0; 
}

.phone-prefix {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 12px;
    border-right: 1px solid #ddd;
    margin-right: 10px;
    color: #888;
}

.phone-prefix img {
    width: 20px;
}

/* Độ mạnh mật khẩu */
.password-strength {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    margin-bottom: 15px;
    color: #444;
}

.strength-bar {
    width: 30px;
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
}

.note-text {
    font-size: 12px;
    color: #0011ff;
    text-shadow: 0 0 2px rgba(0,255,0,0.5);
    margin-bottom: 15px;
}

/* Checkbox */
.remember-group {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 20px;
}

.terms-group label span {
    color: #4CAF50;
}

/* Nút Submit chính */
.btn-submit {
    width: 100%;
    padding: 14px;
    border: none;
    background: #4CAF50;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    border-radius: 25px;
    cursor: pointer;
}