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

/* Style cho phần nền bên ngoài trên màn hình máy tính */
body {
    background-color: #333333; 
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center; 
    min-height: 100vh;
    overflow-x: hidden; /* THÊM VÀO ĐÂY: Ngăn cuộn ngang cho toàn trang */
}

/* Style cho khung giao diện chính (giao diện điện thoại) */
.app-container {
    width: 100%;
    max-width: 480px; 
    background-color: #ffffff; 
    min-height: 100vh; 
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.8); 
    position: relative;
    padding-bottom: 70px; /* THÊM VÀO ĐÂY: Tránh bị thanh menu dưới cùng che mất nội dung */
    /* ĐÃ XÓA: overflow-x: hidden; ở đây */
}
/* --- Style cho thanh Header --- */
.main-header {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    padding: 10px 15px;
    width: 100%;
    
    /* Dải màu chuyển từ vàng nhạt -> xanh dương nhạt -> xanh dương đậm hơn một chút */
    background: linear-gradient(to right, #fef4e2 0%, #c6ebff 50%, #9be2ff 100%);
    
    /* CÁC THUỘC TÍNH MỚI ĐỂ GHIM HEADER */
    position: sticky; 
    top: 0; 
    z-index: 999; /* Tăng z-index lên mức cao để đảm bảo header luôn đè lên banner và lưới game khi cuộn */
}

/* --- Style cho Logo --- */
.header-left .logo-img {
    height: 32px; /* Điều chỉnh chiều cao logo cho phù hợp */
    width: auto;
    object-fit: contain;
}

/* --- Style cho cụm bên phải (Nút + Icon) --- */
.header-right {
    display: flex;
    align-items: center;
    gap: 8px; /* Khoảng cách giữa các nút và icon */
}

/* --- Style chung cho nút bấm --- */
.btn {
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 20px; /* Bo tròn viền nút */
    cursor: pointer;
    border: none;
}

/* Nút Đăng Ký (có thể chỉnh màu nền khác nếu muốn) */
.btn-outline {
    background-color: #00b4f5; 
    color: #ffffff;
}

/* Nút Đăng Nhập */
.btn-solid {
    background-color: #00b4f5;
    color: #ffffff;
}

/* Hiệu ứng hover cơ bản cho nút */
.btn:hover {
    opacity: 0.9;
}

/* --- Style cho icon ngôi sao/cờ --- */
.star-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%; /* Làm tròn ảnh nếu ảnh tải về là hình vuông */
    object-fit: cover;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Tạo bóng đổ nhẹ cho icon nổi lên */
}
/* --- Style cho Banner Slider --- */
.banner-slider {
    width: 100%;
    /* Nếu header ở trên dùng position: absolute, bạn cần đẩy banner xuống một khoảng bằng chiều cao header. 
       Ví dụ: margin-top: 50px; (Tùy chỉnh con số này cho khớp) */
    position: relative;
}

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

/* --- Style cho dấu chấm phân trang (Pagination) giống bản gốc --- */
.banner-slider .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.5); /* Màu trắng trong suốt */
    opacity: 1;
    width: 6px;
    height: 6px;
    transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */
}

.banner-slider .swiper-pagination-bullet-active {
    background: #ffffff; /* Màu trắng sáng khi đang ở slide đó */
    width: 8px; /* Kích thước to hơn một chút */
    height: 8px;
    border-radius: 10px;
}
/* --- Style cho Thanh Chức Năng --- */
.feature-bar {
    display: flex;
    justify-content: space-around; /* Căn đều khoảng cách giữa 5 mục */
    align-items: center;
    padding: 15px 10px;
    background-color: #ffffff; /* Nền trắng */
    border-bottom: 1px solid #f0f0f0; /* Đường gạch mờ ở dưới nếu cần */
}

/* --- Style cho từng mục --- */
.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none; /* Bỏ gạch chân của thẻ a */
    gap: 8px; /* Khoảng cách giữa icon và chữ */
}

/* --- Khung bọc icon để định vị badge --- */
.icon-wrapper {
    position: relative; /* Quan trọng: để thẻ badge đỏ có thể định vị theo khung này */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- Hình ảnh Icon --- */
.icon-wrapper img {
    width: 42px; /* Điều chỉnh kích thước icon cho phù hợp */
    height: 42px;
    object-fit: contain;
}

/* --- Chữ bên dưới icon --- */
.feature-text {
    font-size: 13px;
    color: #00b4f5; /* Màu chữ xanh dương giống icon */
    font-family: 'Times New Roman', serif; /* Font chữ có chân (serif) giống bản gốc, hoặc bạn có thể đổi thành sans-serif */
}

/* --- Nút thông báo đỏ (Badge +188K) --- */
.badge {
    position: absolute;
    top: -5px; /* Kéo lên góc trên */
    right: -20px; /* Đẩy lệch sang phải một chút */
    background-color: #ff0000;
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 5px;
    /* Bo góc: Trên trái, Trên phải, Dưới phải, Dưới trái (để lại 1 góc vuông giống đuôi mây) */
    border-radius: 10px 10px 10px 0; 
    border: 1px solid #ffffff; /* Viền trắng mảnh cho nổi bật */
    white-space: nowrap; /* Không cho rớt dòng */
    z-index: 2;
}
/* --- Bố cục chính (chia hai cột) --- */
.main-layout {
    display: flex;
    align-items: flex-start;
    background-color: #f7f9fa; /* Màu nền xám nhạt cho toàn bộ khu vực dưới */
    height: calc(100vh - 250px); /* Tùy chỉnh chiều cao để có thể cuộn, trừ đi header và banner */
    overflow: hidden;
}

/* --- Menu Sidebar bên trái --- */
.sidebar-menu {
    width: 80px; /* Độ rộng cố định cho menu trái */
    background-color: #ffffff;
    height: 100%;
    overflow-y: auto; /* Cho phép cuộn dọc nếu menu quá dài */
    display: flex;
    flex-direction: column;
    padding-top: 5px;
}

/* Ẩn thanh cuộn của sidebar để giao diện gọn gàng hơn */
.sidebar-menu::-webkit-scrollbar {
    display: none;
}

.sidebar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 5px;
    color: #00b4f5; /* Màu xanh mặc định */
    text-decoration: none;
    font-size: 11px;
    gap: 5px;
    border-radius: 0 25px 25px 0; /* Bo góc nhọn bên phải giống ảnh gốc */
    margin-right: 5px;
    margin-bottom: 2px;
}

.sidebar-item i {
    font-size: 20px;
}

/* Trạng thái được chọn (Active) */
.sidebar-item.active {
    background-color: #00b4f5;
    color: #ffffff;
}

/* --- Lưới Game bên phải --- */
.game-grid {
    flex: 1; /* Chiếm toàn bộ không gian còn lại */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Luôn chia thành 3 cột bằng nhau */
    gap: 8px; /* Khoảng cách giữa các thẻ game */
    padding: 10px;
    height: 100%;
    overflow-y: auto; /* Cho phép cuộn dọc danh sách game */
}

/* --- Thẻ Game (Card) --- */
.game-card {
    background-color: #ffffff;
    border: 1px solid #cceeff; /* Viền xanh nhạt */
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.game-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px;
    color: #888;
}

.game-card-header .provider {
    font-weight: bold;
    font-size: 11px;
    color: #000;
}

.game-card-header i {
    font-size: 12px;
    color: #ccc;
    cursor: pointer;
}

.game-card-body {
    padding: 0 5px 5px 5px;
    display: flex;
    justify-content: center;
}

.game-card-body img {
    width: 100%;
    aspect-ratio: 1 / 1; /* Giữ khung ảnh game là hình vuông */
    object-fit: cover;
    border-radius: 5px;
}

.game-card-footer {
    background-color: #00b4f5;
    color: #ffffff;
    font-size: 10px;
    text-align: center;
    padding: 4px;
    white-space: nowrap; /* Không cho rớt dòng */
    overflow: hidden; /* Cắt phần chữ thừa */
    text-overflow: ellipsis; /* Hiện dấu 3 chấm (...) nếu chữ quá dài */
}
/* --- Style cho khu vực Đại Sứ Thương Hiệu --- */
.ambassador-section {
    background-color: #ffffff; /* Nền trắng để hòa trộn với viền mờ của ảnh */
    margin-top: 10px; /* Tạo khoảng cách một chút với phần lưới game ở trên */
    position: relative;
    width: 100%;
}

.ambassador-image img {
    width: 100%;
    height: auto;
    display: block; /* Loại bỏ khoảng trống thừa dưới thẻ img */
}

/* --- Style cho thanh Tiêu đề --- */
.ambassador-title-bar {
    display: flex;
    align-items: center;
    padding: 0 0 20px 0; /* Đệm cách lề dưới 20px */
    background-color: #ffffff;
}

/* Biểu tượng màu xanh bo cong ở cạnh trái */
.title-icon {
    background-color: #00b4f5;
    color: #ffffff;
    width: 32px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Bo góc: Trên trái(0), Trên phải(50%), Dưới phải(50%), Dưới trái(0) */
    border-radius: 0 50% 50% 0; 
    margin-right: 15px; /* Cách chữ tiêu đề một khoảng */
    box-shadow: 2px 2px 5px rgba(0, 180, 245, 0.3); /* Hiệu ứng bóng đổ nhẹ màu xanh */
}

/* Tinh chỉnh icon mũi tên (play) cho cân đối */
.title-icon i {
    font-size: 14px;
    margin-left: -5px; /* Kéo mũi tên lùi lại một chút cho đẹp */
}

/* Chữ "Đại Sứ Thương Hiệu" */
.ambassador-title-bar h3 {
    color: #00b4f5;
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
/* --- Style cho toàn bộ khu vực Tin Tức --- */
.news-section {
    padding: 15px;
    background-color: #ffffff;
    margin-bottom: 20px;
}

/* --- Style cho thanh Tiêu đề Tin Tức --- */
.news-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    gap: 8px;
}

/* Thẻ "Tin Tức" nền xanh */
.news-badge {
    background-color: #00b4f5;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
}

.news-title-main {
    color: #00b4f5;
    font-size: 16px;
    font-weight: bold;
    margin: 0;
}

/* --- Style cho danh sách bài viết --- */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Khoảng cách giữa các thẻ bài viết */
}

/* --- Style cho từng Thẻ Bài Viết (Card) --- */
.news-card {
    display: flex;
    justify-content: space-between;
    border: 1px solid #00b4f5; /* Viền xanh đặc trưng giống bản gốc */
    border-radius: 8px;
    padding: 10px;
    background-color: #ffffff;
    align-items: center;
}

/* Cột nội dung bên trái */
.news-content {
    flex: 1;
    padding-right: 12px;
}

.news-title {
    font-size: 14px;
    color: #333333; 
    margin-bottom: 4px;
}

/* Style cho icon bắt tay */
.news-title i {
    color: #00b4f5;
    font-size: 12px;
    margin: 0 4px;
}

/* Đoạn text mô tả */
.news-desc {
    font-size: 11px;
    color: #666666; /* Màu xám nhạt */
    line-height: 1.4;
    margin: 0;
}

/* Chữ màu xanh nổi bật */
.highlight {
    color: #00b4f5;
    font-weight: bold;
}

/* Nút "xem thêm" */
.read-more {
    color: #00b4f5;
    text-decoration: underline;
}

/* Cột ảnh bên phải */
.news-thumb {
    width: 110px; /* Khóa cứng chiều rộng của ảnh */
    flex-shrink: 0; /* Không cho cột ảnh bị bóp nhỏ lại khi chữ quá dài */
}

.news-thumb img {
    width: 100%;
    height: 70px; /* Chiều cao cố định để 3 khung ảnh đều tăm tắp */
    object-fit: cover; /* Đảm bảo ảnh tự cắt cho vừa khung, không bị méo */
    border-radius: 4px;
}
/* --- Style cho Thanh Điều Hướng Dưới Cùng --- */
.bottom-nav {
    position: fixed; /* Ghim cố định trên màn hình */
    bottom: 0;
    
    /* Căn giữa và giới hạn kích thước khớp với khung app-container */
    width: 100%;
    max-width: 480px; 
    
    /* Nếu bạn có ảnh nền rực rỡ chứa sẵn lồng đèn, hãy dùng dòng này: */
    background-image: url('hinh_nen_footer.jpg'); 
    background-size: cover;
    background-position: center;
    /* Nếu chưa có ảnh nền, dùng tạm dải màu gradient này: */
    background: linear-gradient(to right, #fdf1d9, #c3ebff, #a9e4ff, #fdf1d9);
    
    display: flex;
    justify-content: space-around; /* Chia đều 5 mục */
    align-items: center;
    padding: 8px 5px 12px 5px; /* Khoảng trống trên dưới */
    z-index: 100; /* Đảm bảo menu luôn nổi lên trên cùng, không bị che khuất */
    
    /* Tạo viền mờ hoặc bóng đổ phía trên để tách biệt với nội dung cuộn */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); 
}

/* --- Style cho từng nút bấm --- */
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    gap: 4px; /* Khoảng cách giữa icon và chữ */
    flex: 1; /* Chia đều không gian */
}

/* --- Thay thế style của img bằng style cho icon Font Awesome --- */
.nav-item i {
    font-size: 22px; /* Kích thước của icon */
    color: #0099cc; /* Màu xanh nước biển đồng bộ với chữ */
    margin-bottom: 2px;
    
    /* Tạo hiệu ứng bóng đổ nhẹ cho icon giống hình ảnh gốc */
    filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.1)); 
    transition: all 0.3s ease; /* Hiệu ứng mượt mà nếu sau này làm chức năng hover/active */
}

/* (Tuỳ chọn) Hiệu ứng khi người dùng đang ở trang đó (Active) */
.nav-item.active i, 
.nav-item.active span {
    color: #ff9900; /* Đổi sang màu cam/vàng khi được chọn */
}

/* --- Chữ bên dưới icon --- */
.nav-item span {
    font-size: 11px;
    font-weight: bold;
    color: #0099cc; /* Màu chữ xanh nước biển */
    font-family: 'Times New Roman', serif;
    text-align: center;
}
/* ================= STYLE CHO MODAL (POPUP) ================= */
/* Khung nền mờ phủ toàn màn hình */
.modal {
    display: none; /* Ẩn đi mặc định, chỉ hiện khi được gọi bằng JS */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Nền đen mờ 60% */
    align-items: center; /* Căn giữa dọc */
    justify-content: center; /* Căn giữa ngang */
    padding: 15px;
}

/* Hộp nội dung popup */
.modal-content {
    background-color: #f6faff; /* Màu nền xanh nhạt giống bản gốc */
    width: 100%;
    max-width: 420px;
    border-radius: 12px;
    padding: 20px;
    position: relative;
    max-height: 90vh; /* Không vượt quá 90% chiều cao màn hình */
    overflow-y: auto; /* Có thanh cuộn nếu màn hình quá nhỏ */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Nút X đóng popup */
.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #00b4f5;
    font-size: 28px;
    font-weight: normal;
    cursor: pointer;
    z-index: 10;
}

.close-btn:hover {
    color: #ff0000;
}

/* Phần Header trong modal */
.modal-header-top {
    text-align: center;
    margin-bottom: 15px;
}

.modal-logo {
    height: 45px;
    margin-bottom: 10px;
}

.slogan-blue {
    color: #26a5e4;
    font-size: 16px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.slogan-sub {
    color: #26a5e4;
    font-size: 13px;
    margin-bottom: 10px;
}

.modal-ambassadors {
    width: 100%;
    height: auto;
}

/* --- Form Inputs --- */
.modal-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.input-group {
    position: relative;
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #cbe4f7;
    border-radius: 8px;
    padding: 8px 12px;
}

.input-group i {
    color: #4da6ff;
    font-size: 16px;
    width: 25px;
    text-align: center;
}

.input-group input {
    border: none;
    outline: none;
    width: 100%;
    padding: 5px 10px;
    font-size: 14px;
    color: #333;
    background: transparent;
}

.input-group input::placeholder {
    color: #aeb4b9;
}

/* Nút ẩn/hiện mật khẩu */
.toggle-pw {
    color: #b0b0b0 !important;
    cursor: pointer;
}

/* Cụm số điện thoại (+84) */
.phone-group .country-code {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-right: 10px;
    border-right: 1px solid #ddd;
    color: #555;
    font-size: 14px;
}

.country-code img {
    width: 20px;
    border-radius: 2px;
}

/* Checkbox */
.checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #555;
}

.checkbox-group.center {
    justify-content: center;
}

.checkbox-group a {
    color: #00b4f5;
    text-decoration: none;
}

/* Nút Submit Đăng ký / Đăng nhập */
.btn-submit {
    background: linear-gradient(to right, #34bcf6, #219def);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
    text-transform: uppercase;
}

.btn-submit:hover {
    opacity: 0.9;
}

/* --- Banner cảnh báo (chỉ có ở Đăng Nhập) --- */
.warning-banner {
    display: flex;
    border: 1px solid #99d6ff;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 5px;
}

.wb-left {
    background: #e6f5ff;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #99d6ff;
    width: 35%;
}

.wb-left img {
    width: 50px;
    margin-bottom: 5px;
}

.wb-left span {
    font-size: 10px;
    font-weight: bold;
    color: #0088cc;
    text-align: center;
}

.wb-right {
    padding: 10px;
    font-size: 10px;
    width: 65%;
}

.wb-right strong {
    color: #0088cc;
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
}

.wb-right p {
    color: #ff3300;
    line-height: 1.3;
}