/* ================= CÀI ĐẶT CƠ BẢN ================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}
body {
    background-color: #433e3e; /* Đổi màu nền ngoài (nền máy tính) thành xám nâu giống ảnh mẫu */
    color: #fff;
    display: flex;
    justify-content: center;
    min-height: 100vh;
}
.app-container {
    width: 100%;
    max-width: 480px; 
    background-color: #242424;
    min-height: 100vh;
    padding-bottom: 60px; 
    position: relative;
    box-shadow: 0 0 30px rgba(0,0,0,0.8); /* Tăng độ đậm của bóng đổ để tách biệt rõ khung app với nền máy tính */
    overflow-x: hidden;
}

/* ================= 1. HEADER ================= */
        .header {
            display: flex; 
            justify-content: space-between; 
            align-items: center;
            padding: 10px 15px; /* Tăng khoảng cách 2 bên lề */
            background: linear-gradient(90deg, #5b1515, #a32222);
            /* Nếu bản gốc phần này dính liền với banner ảnh thì bạn có thể đổi background thành: transparent; và chỉnh CSS để nó đè lên ảnh banner */
        }

        /* Chỉnh kích thước Logo lớn hơn */
        .header img.logo { 
            height: 45px; /* Tăng từ 30px lên 45px (bạn có thể tự tăng giảm số này) */
            object-fit: contain;
        }

        /* Vẽ thanh 3 gạch giống bản gốc (Không có hộp nền) */
        .menu-icon { 
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 28px; 
            height: 20px; 
            cursor: pointer; 
            background: transparent; /* Đảm bảo không có nền */
        }
        .menu-icon span {
            display: block;
            height: 4px; /* Độ dày của gạch */
            width: 100%;
            background-color: #fff; /* Màu trắng */
            border-radius: 2px; /* Bo góc nhẹ cho vạch kẻ */
        }

        /* CSS cho icon tải app bằng hình ảnh */
        .download-icon {
            width: 35px; /* Kích thước tương đương icon vàng bản gốc */
            height: 35px;
            cursor: pointer;
            border-radius: 50%; /* Nếu icon là hình tròn */
        }

/* ================= 2. BANNER ================= */
        .banner {
            width: 100%;
            overflow: hidden; /* Cắt bỏ phần ảnh bị tràn ra ngoài màn hình */
            position: relative;
        }

        .banner-track {
            display: flex;
            flex-wrap: nowrap; /* Bắt buộc các ảnh phải nằm trên 1 đường thẳng ngang */
            width: 100%;
            transition: transform 0.5s ease-in-out;
        }

        .banner-track img {
            flex: 0 0 100%; /* Bắt mỗi ảnh chiếm chính xác 100% chiều rộng hiển thị */
            width: 100%;
            display: block;
            object-fit: cover;
        }
/* ================= 3. THÔNG BÁO ================= */
.announcement {
    background-color: #111;
    padding: 5px 10px;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #f7d046;
    border-bottom: 1px solid #333;
}

/* ================= 4. NÚT ĐĂNG NHẬP / ĐĂNG KÝ ================= */
.auth-buttons {
    display: flex;
    background-color: #242424;
}
.auth-buttons button {
    flex: 1;
    padding: 12px;
    border: none;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}
.btn-login {
    background-color: #333;
    color: #f7d046;
    border-right: 1px solid #111;
}
.btn-register {
    background-color: #f7d046;
    color: #111;
    position: relative;
}
.badge {
    position: absolute;
    top: -5px;
    right: 10px;
    background-color: red;
    color: white;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 3px;
    animation: blink 1s infinite alternate;
}
@keyframes blink {
    from { opacity: 1; }
    to { opacity: 0.7; transform: scale(1.05); }
}

/* ================= 5. MENU DANH MỤC ================= */
        .main-menu {
            display: flex; /* Đổi từ grid sang flex để xếp ngang */
            flex-wrap: nowrap; /* Bắt buộc các ô phải nằm trên 1 hàng, không được rớt dòng */
            overflow-x: auto; /* Cho phép vuốt cuộn ngang phần bị tràn */
            gap: 6px;
            padding: 12px 10px;
            background-color: #242424; 
            
            /* Các lệnh giúp vuốt mượt mà trên điện thoại và ẩn thanh cuộn xấu xí */
            -webkit-overflow-scrolling: touch; 
            scrollbar-width: none; /* Ẩn cuộn trên Firefox */
            -ms-overflow-style: none; /* Ẩn cuộn trên IE/Edge */
        }

        /* Ẩn thanh cuộn ngang trên Chrome, Safari */
        .main-menu::-webkit-scrollbar {
            display: none; 
        }
        
        .menu-item {
            /* Tính toán kích thước: Ép mỗi ô chiếm đúng 1/5 chiều rộng màn hình (trừ đi 4 khoảng trống gap 6px) */
            flex: 0 0 calc((100% - 24px) / 5); 
            
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border: 1px solid #f7d046;
            border-radius: 12px;
            padding: 10px 0;
            background: linear-gradient(to bottom, #3a3a3a, #050505);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .menu-item img {
            width: 30px; 
            height: 30px;
            margin-bottom: 5px;
            object-fit: contain; 
        }

        .menu-item span {
            font-size: 10px;
            font-weight: bold; 
            color: #fff;
            text-transform: uppercase;
            white-space: nowrap; /* Chống rớt dòng chữ nếu tên game quá dài */
        }

        .menu-item.active {
            box-shadow: 0 0 6px rgba(247, 208, 70, 0.4); 
        }
        
        .menu-item.active span { 
            color: #f7d046; 
        }
/* ================= 6. DANH SÁCH GAME ================= */
        .game-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px 8px; /* gap: [Khoảng cách hàng trên dưới] [Khoảng cách cột trái phải] */
            padding: 10px 10px 20px 10px;
        }

        .game-card {
            background-color: transparent; /* Xóa nền đen cũ để chữ nằm trên nền gốc */
            border: none;
            text-align: center;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: transform 0.2s ease;
        }

        .game-card:hover {
            transform: scale(1.05); /* Hiệu ứng phóng to nhẹ khi di chuột/chạm vào game */
        }

        .game-card img {
            width: 100%;
            aspect-ratio: 1 / 1; /* Ép tất cả các ảnh game thành hình vuông đều nhau */
            object-fit: cover;
            border-radius: 12px; /* Bo góc tròn giống ảnh gốc */
            border: 1px solid #f7d046; /* Thêm viền vàng mỏng bao quanh ảnh */
            background-color: #fff8dc; /* Màu nền vàng nhạt phòng trường hợp ảnh PNG trong suốt */
            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .game-card .title {
            font-size: 11px;
            font-weight: bold;
            margin-top: 6px;
            color: #fff;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; /* Tự động thêm "..." nếu tên game quá dài */
        }
/* ================= 7. THÔNG TIN THÊM (BẰNG HÌNH ẢNH) ================= */
        .footer-info-image {
            background-color: #000000; /* Nền đen tuyền để tệp với màu nền của tấm ảnh */
            padding: 20px 15px 20px 15px; /* Padding dưới 80px để chừa chỗ cho thanh menu cuối cùng (bottom-nav) không đè lên ảnh */
            border-top: 1px solid #333;
            display: flex;
            justify-content: center;
        }

        .footer-info-image img {
            width: 100%; /* Ảnh sẽ tự động co giãn vừa khít chiều ngang điện thoại */
            max-width: 400px; /* Giới hạn kích thước tối đa để ảnh không bị mờ */
            height: auto;
            object-fit: contain;
        }
/* ================= 8. FOOTER NAVBAR ================= */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 50%; 
            transform: translateX(-50%); 
            width: 100%;
            max-width: 480px;
            /* Tạo hiệu ứng nền đen đổ bóng 3D giống ảnh gốc */
            background: linear-gradient(to bottom, #303030 0%, #151515 40%, #000000 100%);
            display: flex;
            justify-content: space-around;
            padding: 8px 0 10px 0; /* Căn chỉnh lại lề trên dưới cho cân đối */
            border-top: 1px solid #111;
            z-index: 100;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5); /* Thêm bóng đổ nhẹ hắt lên trên */
        }

        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #fff; /* Màu chữ trắng sắc nét */
            font-size: 10px;
            font-weight: bold; /* Làm đậm chữ giống bản gốc */
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .nav-item img {
            width: 24px; /* Kích thước icon */
            height: 24px;
            margin-bottom: 4px;
            object-fit: contain;
            opacity: 1; /* Hiển thị rõ 100% không làm mờ */
        }

        /* Trạng thái Active (Đang chọn) */
        .nav-item.active { 
            color: #ffd400; /* Màu vàng sáng cho chữ */
        }
        /* ================= 9. MODAL ĐĂNG NHẬP / ĐĂNG KÝ ================= */
.modal {
    display: none; /* Ẩn đi mặc định */
    position: fixed;
    z-index: 999; /* Đảm bảo nổi lên trên cùng */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Nền mờ tối */
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #222;
    width: 90%;
    max-width: 400px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    padding-bottom: 20px;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #888;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
}
.close-btn:hover { color: #fff; }

.modal-header {
    background-color: #0b0b0b;
    text-align: center;
    padding: 20px 0 10px 0;
}
.modal-logo { height: 40px; margin-bottom: 10px; }
.slogan { color: #f7d046; font-size: 14px; text-transform: uppercase; margin-bottom: 15px; }

/* Tabs (Đăng nhập / Đăng ký) */
.auth-tabs {
    display: flex;
    background-color: #0b0b0b;
    border-bottom: 2px solid #333;
}
.tab {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    color: #666;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    position: relative;
}
.tab.active {
    color: #fff;
    border-bottom: 2px solid #f7d046;
}
/* Hiệu ứng mũi tên vàng ở tab đang chọn */
.tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #f7d046;
}

/* Nội dung form */
.form-content { display: none; padding: 20px; background-color: #333; }
.form-content.active { display: block; }

/* Ô nhập Đăng nhập */
.input-box.login-input {
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.input-box.login-input i { color: #d68925; margin-right: 10px; font-size: 16px; width: 20px;}
.input-box.login-input input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 14px;
    color: #d68925;
}
.input-box.login-input input::placeholder { color: #d68925; }
.forgot-pw { font-size: 12px; color: #d68925; cursor: pointer; display: flex; align-items: center; gap: 5px; }

/* Ô nhập Đăng ký */
.input-group { margin-bottom: 12px; }
.input-group label {
    display: block;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 5px;
}
.input-group label i { color: #f7d046; margin-right: 5px; font-size: 10px; }
.input-group input, .input-wrapper input {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: none;
    outline: none;
}
.input-wrapper { position: relative; }
.pw-icon { position: absolute; right: 10px; top: 10px; color: #f7d046; }
.hint { font-size: 10px; color: #aaa; margin-top: 4px; }

/* Nút Submit (Trạng thái sáng - mặc định) */
.submit-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 5px;
    background: linear-gradient(to bottom, #f7d046, #d68925);
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    margin-top: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Nút Submit (Trạng thái tối màu - khi chưa nhập đủ) */
.submit-btn:disabled {
    background: #acb480; /* Nền xám tối */
    color: #888; /* Chữ mờ đi */
    cursor: not-allowed; /* Đổi con trỏ chuột thành dấu cấm */
    box-shadow: none;
}