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

body {
    background-color: #f5f5f5;
    color: #333;
}

/* Các lớp tiện ích ẩn/hiện theo thiết bị */
.mobile-only { display: none !important; }
.pc-only { display: block; }

/* ========================================================
   KHU VỰC ĐIỀU CHỈNH THỦ CÔNG (Tùy chỉnh kích thước, vị trí)
   ======================================================== */
:root {
    /* Header (Top) */
    --header-padding: 15px 20%; 
    --logo-height: 85px;       
    --slogan-height: 28px;     
    --slogan-margin-left: 5px; 
    --slogan-margin-top: 5px;  
    --star-width: 32px;        
    --star-height: 22px;       
    --star-margin-left: 8px;   
    --btn-gap: 12px;           
    --btn-padding: 11px 20px;   
    --btn-font-size: 13px;     
    --clock-gap: 8px;          

    /* Thanh Menu Navigation PC */
    --nav-bg-color: #ff6a00;      
    --nav-padding-y: 5px;        
    --nav-padding-right: 21%;      
    --nav-item-gap: 30px;         
    --nav-icon-size: 60px;        
    --nav-icon-spacing: 6px;      
    --nav-font-size: 13px;        
    --nav-text-color: #ffffff;    
    --nav-text-active: #ffcc00;  
     
    /* Kích thước Banner */
    --banner-height-pc: 350px;      /* Chiều cao banner trên máy tính */
    --banner-height-mobile: 150px;  /* Chiều cao banner trên điện thoại */

    /* ========================================================
       Biến điều chỉnh cho phần Tính Năng Vượt Trội (PC)
       ======================================================== */
    --feature-title-color: #f36c00;    /* Màu cam cho các tiêu đề tính năng */
    --feature-text-color: #666666;     /* Màu xám cho chữ miêu tả nhỏ */
    --feature-decor-width: 50%;        /* Chiều ngang của thanh họa tiết tiêu đề */
    --feature-icon-size: 45px; /* Điều chỉnh độ to nhỏ của icon FontAwesome */

    /* ========================================================
       Biến điều chỉnh cho phần Đa Dạng Thể Loại (Game Grid)
       ======================================================== */
    --game-grid-gap: 15px;         /* Khoảng cách giữa các thẻ game */
    --game-border-color: #ff6a00;  /* Màu viền bao quanh thẻ game */
    --game-border-radius: 12px;    /* Độ bo góc của thẻ */
    /* ========================================================
       Biến điều chỉnh cho phần Top Game
       ======================================================== */
    --topgame-grid-gap: 15px;      /* Khoảng cách giữa các thẻ top game */
    --topgame-border-color: #ff6a00; /* Màu viền thẻ */
    --topgame-text-color: #ff6a00;   /* Màu chữ nút CHƠI NGAY */
}

/* ========================================================
   1. GIAO DIỆN HEADER (PC)
   ======================================================== */
.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--header-padding);
    background-image: url('images/header\ pc.gif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.logo {
    display: flex;
    align-items: center;
}

.logo-img {
    height: var(--logo-height);
    width: auto;
}

.slogan-img {
    height: var(--slogan-height);
    width: auto;
    margin-left: var(--slogan-margin-left);
    margin-top: var(--slogan-margin-top);
}

.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--clock-gap); 
}

.clock-display {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.auth-buttons {
    display: flex;
    gap: var(--btn-gap);
    align-items: center;
}

.btn {
    padding: var(--btn-padding);
    border: none;
    border-radius: 20px;
    font-weight: bold;
    font-size: var(--btn-font-size);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15); 
}

.btn-login { 
    background: linear-gradient(to bottom, #ff9b00, #ff5e00);
    color: white; 
}

.btn-register, .btn-trial { 
    background: linear-gradient(to bottom, #ffe8cc, #ffcba4);
    color: #cc4400; 
    border: 1px solid #ffa570;
}

.star-icon {
    width: var(--star-width);
    height: var(--star-height);
    margin-left: var(--star-margin-left);
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ========================================================
   2. THANH MENU (PC)
   ======================================================== */
.main-nav {
    background-color: var(--nav-bg-color);
    padding: var(--nav-padding-y) 0; 
}

.main-nav ul {
    list-style: none;
    display: flex;
    justify-content: flex-end;
    padding-right: var(--nav-padding-right);
    gap: var(--nav-item-gap);
    align-items: center;
}

.main-nav a {
    text-decoration: none;
    color: var(--nav-text-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--nav-font-size);
    transition: color 0.2s ease-in-out;
}

.main-nav img.nav-icon {
    width: var(--nav-icon-size);
    height: var(--nav-icon-size);
    margin-bottom: var(--nav-icon-spacing);
    border-radius: 50%;
    object-fit: contain;
}

.main-nav a:hover, 
.main-nav a.active {
    color: var(--nav-text-active);
}

/* ========================================================
   3. BANNER SLIDER & TÍNH NĂNG CHUNG
   ======================================================== */
.banner-slider {
    width: 100%;
    height: var(--banner-height-pc);
    position: relative;
    overflow: hidden; /* Cắt đi những ảnh đang nằm ngoài khung hình */
    background-color: #f5f5f5;
}

.slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out; /* Hiệu ứng lướt ngang mượt mà 0.5 giây */
}

.slide-img {
    min-width: 100%; /* Ép mỗi ảnh phải rộng đúng bằng 100% màn hình */
    height: 100%;
    object-fit: cover; /* Tự động cắt cúp ảnh cho vừa khung hình mà không bị méo */
    /* object-fit: fill; (Dùng dòng này thay thế nếu bạn muốn ép ảnh hiển thị toàn bộ dù bị méo) */
}

/* ========================================================
   TÍNH NĂNG NỔI BẬT (CHỈ HIỂN THỊ PC)
   ======================================================== */
.features-section {
    padding: 40px 5%;
    /* Thêm ảnh nền cho phần tính năng */
    background-image: url('images/nentinhtnag.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    margin-top: 0;
}

.section-title {
    text-align: center;
    margin-bottom: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Định dạng họa tiết trang trí phía trên */
.title-decor {
    width: var(--feature-decor-width);
    max-width: 600px;
    margin-bottom: 5px; /* Khoảng cách từ họa tiết xuống chữ "Những Tính Năng..." */
    object-fit: contain;
}

.section-title h3 {
    color: var(--feature-title-color);
    font-size: 24px;
    font-weight: bold;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

/* Định dạng chung cho icon FontAwesome trong phần tính năng */
.feature-fa-icon {
    font-size: var(--feature-icon-size);
    flex-shrink: 0; 
    margin-top: 5px; /* Hạ icon xuống một chút cho ngang hàng với tiêu đề */
}

/* Tạo hiệu ứng dải màu (gradient) cho từng icon giống với bản gốc */
.icon-color-1 {
    /* Màu vàng kim cho huy chương Thương hiệu uy tín */
    background: linear-gradient(135deg, #f1c40f, #d35400);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.icon-color-2 {
    /* Màu rực rỡ cho khối lập phương Sản phẩm đa dạng */
    background: linear-gradient(135deg, #ff0080, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.icon-color-3 {
    /* Màu cam/vàng cho khiên An toàn bảo mật */
    background: linear-gradient(135deg, #f39c12, #e67e22);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.icon-color-4 {
    /* Màu đỏ/cam cho mũi tên Giao dịch nhanh chóng */
    background: linear-gradient(135deg, #e74c3c, #f1c40f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* ========================================================
   ĐA DẠNG THỂ LOẠI (CHỈ HIỂN THỊ PC)
   ======================================================== */
.game-categories-section {
    padding: 20px 5% 50px 5%;
}

.game-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--game-grid-gap);
    max-width: 1200px;
    margin: 0 auto;
}

/* 
   Khung của từng thẻ game sử dụng kỹ thuật Sprite Ảnh (Kéo ảnh lên khi Hover).
   Vì ảnh gốc chứa cả 2 phần (trên/dưới), ta sẽ nhân đôi chiều cao ảnh lên 200%.
*/
.game-card {
    position: relative;
    display: block;
    width: 100%;
    /* Tỷ lệ khung hình chuẩn cho thẻ game. Có thể điều chỉnh con số 125% này nếu ảnh bị lùn/cao */
    padding-top: 125%; 
    
    border-radius: var(--game-border-radius);
    outline: none; 
    
    /* Thiết lập nền */
    background-size: 100% 200%; /* Ép chiều cao ảnh nền gấp đôi thẻ chứa nó */
    background-position: top center; /* Mặc định hiển thị nửa trên của ảnh */
    background-repeat: no-repeat;
    
    /* Không cần viền và box-shadow vì viền đã có sẵn trong ảnh của bạn */
    border: none;
    box-shadow: none;
    
    transition: background-position 0.2s ease-in-out; /* Hiệu ứng kéo ảnh mượt mà */
}

/* HIỆU ỨNG RÊ CHUỘT (HOVER): Kéo background đẩy lên để lộ nửa dưới của ảnh */
.game-card:hover {
    background-position: bottom center; 
}

/* Ẩn chữ đi (chỉ dùng cho SEO và bộ đọc màn hình vì chữ đã có sẵn trên ảnh) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
/* ========================================================
   TOP GAME (CHỈ HIỂN THỊ PC)
   ======================================================== */
.top-game-section {
    padding: 20px 5% 50px 5%;
}

.top-game-grid {
    display: grid;
    /* Lưới 6 cột như hình gốc */
    grid-template-columns: repeat(6, 1fr);
    gap: var(--topgame-grid-gap);
    max-width: 1200px;
    margin: 0 auto;
}

/* Khung của từng thẻ Top Game */
.top-game-card {
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid var(--topgame-border-color);
    border-radius: 8px; /* Bo góc nhẹ */
    padding: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hiệu ứng nổi lên khi rê chuột vào thẻ */
.top-game-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Định dạng hình ảnh game (hình vuông bên trái) */
.top-game-img {
    width: 90px; /* Kích thước ảnh */
    height: 90px;
    border-radius: 6px;
    object-fit: cover;
    margin-right:5px; /* Khoảng cách từ ảnh đến chữ */
}

/* Khu vực thông tin (tên nhà cung cấp và nút chơi) */
.top-game-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Tên nhà cung cấp (PG, JL, FC...) */
.provider {
    font-weight: bold;
    font-size:25px;
    color: #333;
    margin-bottom: 5px;
}

/* Nút "CHƠI NGAY" */
.play-now-btn {
    display: inline-block;
    background-color: var(--topgame-text-color);
    color: white;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 12px;
    text-align: center;
    /* Hiệu ứng chuyển màu nhẹ khi hover vào nút */
    transition: background-color 0.2s ease; 
}

.play-now-btn:hover {
    background-color: #e65c00; /* Màu cam đậm hơn một chút */
}
/* ========================================================
   TẢI APP SECTION (CHỈ HIỂN THỊ PC)
   ======================================================== */
.download-app-section {
    padding: 30px 5% 60px 5%;
    background-color: #ffffff; /* Nền trắng như bản gốc */
    border-top: 1px solid #eee; /* Đường viền mờ phân cách bên trên (tùy chọn) */
}

.app-content-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 50px; /* Khoảng cách giữa cột chữ và cột hình */
}

/* --- CỘT TRÁI (Tiêu đề + Nút) --- */
.app-left-col {
    display: flex;
    flex-direction: column;
    align-items: center; /* Căn giữa các phần tử trong cột trái */
    flex: 1; /* Chiếm 1 nửa không gian */
    max-width: 500px;
}

/* Ảnh Tiêu đề */
.app-title-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    margin-bottom: 40px; /* Khoảng cách từ tiêu đề xuống 2 nút tải */
}

/* Cụm 2 nút tải */
.app-buttons {
    display: flex;
    gap: 30px; /* Khoảng cách giữa nút iOS và nút Android */
    justify-content: center;
}

.app-download-btn {
    display: block;
    transition: transform 0.2s ease; /* Hiệu ứng nảy nhẹ khi rê chuột */
}

.app-download-btn:hover {
    transform: translateY(-5px);
}

.btn-img {
    width: 180px; /* Chiều rộng nút tải - điều chỉnh cho vừa mắt */
    height: auto;
    object-fit: contain;
}

/* --- CỘT PHẢI (Hình Mockup Cầu thủ + Điện thoại) --- */
.app-right-col {
    flex: 1; /* Chiếm 1 nửa không gian */
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Căn đáy hình ảnh cho bằng phẳng */
}

.app-mockup-img {
    width: 100%;
    max-width: 550px; /* Giới hạn kích thước để hình không quá to */
    height: auto;
    object-fit: contain;
}
/* ========================================================
   4. GIAO DIỆN ĐIỆN THOẠI (MOBILE RESPONSIVE)
   ======================================================== */
@media (max-width: 768px) {
    .pc-only { display: none !important; }
    .mobile-only { display: flex !important; }

    /* Header Mobile */
    .top-header {
        justify-content: space-between;
        padding: 10px 15px;
        background-image: url('images/header\ mobile.gif');
        background-size: cover;
        background-position: center;
    }

    .logo-img { max-height: 50px; }

    .mobile-auth-buttons {
        display: flex;
        justify-content: space-around;
        padding: 10px;
        background-color: #fff;
    }

    .mobile-auth-buttons .btn {
        width: 45%;
        padding: 10px;
    }

    /* Banner Mobile */
    .banner-slider { 
        height: var(--banner-height-mobile); 
    }
    .banner h2 { font-size: 24px; }

    /* Tính năng Mobile (Chuyển thành 1 cột) */
    .features-grid { grid-template-columns: 1fr; }

    
    /* ========================================================
       THANH MENU DANH MỤC (MOBILE ONLY)
       ======================================================== */
    .mobile-category-menu {
        display: flex !important;
        align-items: center;
        /* Đổi màu nền sang dải màu kem ấm giống hệt bản gốc */
        background-color: #fffaf0; 
        padding: 12px 0; /* Thu gọn khoảng cách trên dưới */
        border-bottom: 1px solid #f2ece1;
    }

    /* Mũi tên điều hướng 2 bên */
    .scroll-btn {
        background: none;
        border: none;
        /* Đổi màu mũi tên sang cam nhạt thanh mảnh hơn */
        color: #ffad66; 
        font-size: 16px;
        padding: 0 10px;
        cursor: pointer;
        outline: none;
        flex-shrink: 0; 
    }

    /* Khung chứa các icon trượt */
    .category-scroll-container {
        display: flex;
        overflow-x: auto; 
        scroll-behavior: smooth;
        /* Thu hẹp khoảng cách giữa các icon lại một chút để hiển thị đủ 5 mục như hình */
        gap: 16px; 
        padding: 0 5px;
        flex-grow: 1;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .category-scroll-container::-webkit-scrollbar {
        display: none;
    }

    /* Từng mục danh mục */
    .category-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        flex-shrink: 0; 
    }

    /* Vùng chứa icon */
    .icon-wrapper {
        /* Chỉnh lại kích thước chuẩn để không bị quá to */
        width: 68px; 
        height: 68px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 6px;
    }

    .icon-wrapper img {
        width: 100%; 
        height: 100%;
        object-fit: contain;
    }

    /* Chữ dưới icon */
    .category-item span {
        font-size: 11px;
        /* Màu xám nhẹ hơn cho các mục chưa chọn */
        color: #888888; 
        font-weight: 500; /* Giảm độ đậm của chữ xuống một chút */
        white-space: nowrap;
    }

    /* Trạng thái được chọn (Màu cam) */
    .category-item.active span {
        color: #ff6a00;
        font-weight: bold; /* Chỉ in đậm mục đang được chọn */
    }
    /* ========================================================
       LƯỚI GAME (MOBILE ONLY)
       ======================================================== */
    .mobile-game-grid-section {
        display: block !important;
        padding: 10px;
        background-color: #fffaf0; /* Cùng màu nền với thanh menu trượt */
        /* Tạo khoảng trống phía dưới để không bị thanh điều hướng dưới cùng che mất */
        padding-bottom: 70px; 
    }

    .m-game-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Chia thành 3 cột đều nhau */
        gap: 8px; /* Khoảng cách giữa các thẻ game */
    }

    .m-game-card {
        display: flex;
        flex-direction: column;
        text-decoration: none;
        border-radius: 8px;
        overflow: hidden; /* Bo góc mượt mà */
        border: 1px solid #ff6a00; /* Viền màu cam */
        background-color: #fff;
    }

    .m-game-img {
        width: 100%;
        height: auto;
        /* Giữ tỷ lệ hình vuông cho ảnh */
        aspect-ratio: 1 / 1; 
        object-fit: cover;
        display: block;
    }

    .m-game-name {
        background: #ff6a00; /* Nền cam đậm */
        color: #fff;
        text-align: center;
        font-size: 11px;
        font-weight: bold;
        padding: 5px 2px;
        /* Ngăn chữ bị tràn ra ngoài nếu tên game quá dài */
        white-space: nowrap; 
        overflow: hidden;
        text-overflow: ellipsis; 
    }
    /* ========================================================
       TẢI APP SECTION (MOBILE ONLY)
       ======================================================== */
    .m-download-app-section {
        display: block !important;
        background-color: #fdfbf7; /* Nền trắng kem đồng nhất với giao diện mobile */
        padding: 20px 10px;
        /* Tạo khoảng cách phía dưới để không bị thanh menu đáy che mất */
        padding-bottom: 80px; 
    }

    .m-app-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* --- Cột Trái: Hình Cầu thủ --- */
    .m-app-left {
        width: 38%; /* Chiếm khoảng gần 40% màn hình */
        display: flex;
        align-items: flex-end;
    }

    .m-player-img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* --- Cột Phải: Các Nút Tải và Chữ --- */
    .m-app-right {
        width: 60%;
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* Căn toàn bộ nội dung sang phải giống bản gốc */
    }

    /* Tiêu đề TẢI APP */
    .m-app-title {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
    }

    .m-download-icon {
        width: 32px; /* Kích thước icon mũi tên tải xuống */
        height: auto;
        margin-right: 6px;
    }

    .m-app-title h2 {
        color: #ff6a00;
        font-size: 26px;
        font-weight: bold;
    }

    /* Hàng chứa 2 nút tải */
    .m-app-buttons {
        display: flex;
        gap: 8px; /* Khoảng cách giữa 2 nút */
        margin-bottom: 15px;
        justify-content: flex-end;
        width: 100%;
    }

    .m-download-link {
        display: block;
        width: 28%; /* Hai nút bằng nhau */
        transition: transform 0.2s ease;
    }

    .m-download-link:active {
        transform: scale(0.95); /* Hiệu ứng lún xuống khi bấm vào trên điện thoại */
    }

    .m-btn-img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* Phần chữ Đại Sứ Thương Hiệu */
    .m-app-info {
        text-align: right;
        color: #ff6a00; /* Chữ màu cam toàn bộ */
    }

    .m-app-info .title-ds {
        font-weight: bold;
        font-size: 15px;
        margin-bottom: 3px;
    }

    .m-app-info .name-ds {
        font-size: 15px;
        margin-bottom: 3px;
    }

    .m-app-info .year-ds {
        font-size: 13px;
    }
    /* ========================================================
       BOTTOM NAVIGATION MENU (MOBILE)
       ======================================================== */
    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #ffffff;
        display: flex;
        justify-content: space-around;
        padding: 6px 0;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    /* Định dạng chung cho mỗi ô danh mục */
    .bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: #555555;
        width: 20%; /* Chia đều 5 mục */
    }

    /* Vòng tròn nền xám chứa icon miễn phí */
    .nav-icon-bg {
        width: 36px;
        height: 36px;
        background-color: #f2f2f2;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 4px;
    }

    .nav-icon-bg i {
        font-size: 20px;
        color: #222222; /* Icon chưa chọn có màu đen xám */
        transition: color 0.2s;
    }

    /* Định dạng riêng cho icon ảnh (Giới thiệu bạn) */
    .custom-nav-img {
        height: 40px; /* Cao hơn một chút để không che mất huy hiệu +38K */
        width: auto;
        object-fit: contain;
        margin-bottom: 0px; 
    }

    /* Chữ tiêu đề bên dưới */
    .bottom-nav-item span {
        font-size: 10px;
        font-weight: bold;
        text-transform: uppercase;
        text-align: center;
        transition: color 0.2s;
    }

    /* Trạng thái đang chọn (Màu cam) */
    .bottom-nav-item.active .nav-icon-bg i,
    .bottom-nav-item.active span {
        color: #ff6a00;
    }
}
/* ========================================================
   POPUP MODAL (ĐĂNG NHẬP & ĐĂNG KÝ)
   ======================================================== */
/* Nền đen mờ phủ toàn màn hình */
.modal {
    display: none; /* Ẩn mặc định, bật bằng JS */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

/* Khung modal chung */
.modal-content {
    background-color: #fff;
    position: relative;
    border-radius: 20px; /* Bo góc to hơn giống bản gốc */
    box-shadow: 0 5px 25px rgba(0,0,0,0.4);
    animation: modalFadeIn 0.3s ease;
    overflow: hidden;
}

@keyframes modalFadeIn {
    from {transform: translateY(-30px); opacity: 0;}
    to {transform: translateY(0); opacity: 1;}
}

/* Kích thước riêng */
.login-content { width: 90%; max-width: 420px; }
.register-content { width: 90%; max-width: 650px; }

/* Nút tắt X (Sửa thành hình tròn đen viền trắng) */
.close-modal {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 28px;
    height: 28px;
    background-color: #333;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Header Modal */
.modal-header {
    background: #ffcc66;
    padding: 25px 0 15px 0;
    text-align: center;
    border-bottom: none; 
}
.modal-logo { max-height: 60px; }

/* Body Modal (Thêm hiệu ứng nền tỏa sáng nhẹ) */
.modal-body {
    padding: 25px 30px;
    background: radial-gradient(circle at center, #ffffff 0%, #fff6e5 100%);
}

/* --- Form Đăng Nhập --- */
.input-group {
    position: relative;
    margin-bottom: 15px;
}

.input-group input {
    width: 100%;
    padding: 14px 40px 14px 50px; /* Chừa không gian bên trái cho icon và vạch dọc */
    border: 2px solid #ffcc99; /* Viền cam dày hơn */
    border-radius: 30px; /* Bo góc tròn hẳn dạng viên thuốc */
    font-size: 14px;
    outline: none;
    background-color: #fff;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

.input-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
}

/* Vạch dọc phân cách giữa icon và chữ */
.input-group::after {
    content: '';
    position: absolute;
    left: 45px;
    top: 20%;
    height: 60%;
    width: 1px;
    background-color: #ddd;
}

.toggle-pw, .refresh-captcha {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #999;
}

.remember-me {
    text-align: center;
    font-size: 13px;
    margin-bottom: 15px;
    color: #555;
}

/* Nút submit lớn */
.btn-submit-modal {
    width: 100%;
    padding: 14px;
    background: linear-gradient(to bottom, #ff9b00, #ff5e00);
    color: white;
    border: none;
    border-radius: 30px; /* Bo góc tròn hẳn */
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    margin-bottom: 15px;
}

.warning-text {
    font-size: 12px;
    color: #666;
    text-align: center;
    margin-bottom: 15px;
}

/* Nút lấy lại mật khẩu */
.recover-buttons {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 15px;
}

.btn-recover {
    flex: 1;
    background: white;
    border: 2px solid #ffcc99;
    color: #ff6a00;
    padding: 10px 8px;
    border-radius: 30px; /* Bo góc tròn hẳn */
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
}

/* Box Link & App */
.link-info-box {
    background: white;
    border: 2px solid #ffcc99;
    border-radius: 20px; /* Bo góc mềm mại */
    padding: 10px;
    text-align: center;
    margin-bottom: 15px;
}

.link-info-box p { font-size: 11px; color: #d32f2f; margin-top: 5px; line-height: 1.3;}

.app-download-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px solid #ffcc99;
    border-radius: 20px; /* Bo góc mềm mại */
    padding: 8px 15px;
    background: white;
}

.app-dl-item {
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background: #ffb300;
    padding: 8px 12px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.app-dl-item i { font-size: 24px; margin-bottom: 3px; }
.app-dl-center { text-align: center; color: #ff6a00; }
.app-dl-center strong { font-size: 16px; }
.app-dl-center p { font-size: 11px; font-weight: bold; margin:0;}

/* Nút footer mobile */
.mobile-footer-buttons {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}
.btn-m-footer {
    flex: 1;
    padding: 12px;
    border: 2px solid #ffcc99;
    background: #fff3e0;
    color: #ff6a00;
    font-weight: bold;
    border-radius: 30px;
    font-size: 12px;
}

/* --- Form Đăng Ký --- */
.reg-grid {
    display: flex;
    gap: 20px;
}
.reg-col { flex: 1; }

.reg-input-wrap { margin-bottom: 12px; }
.reg-input-wrap label {
    display: block;
    font-size: 13px;
    font-weight: bold;
    color: #555;
    margin-bottom: 5px;
}

/* Đổi ngôi sao bắt buộc sang màu cam */
.req { color: #ff6a00; font-size: 12px; margin-right: 2px;}

.reg-input {
    width: 100%;
    padding: 12px 15px; /* Tăng độ dày cho ô nhập giống hình gốc */
    border: 2px solid #ffcc99; /* Viền cam đậm hơn */
    border-radius: 30px; /* Bo góc dạng viên thuốc */
    font-size: 14px;
    outline: none;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

.hint-text {
    display: block;
    font-size: 10px;
    color: #888;
    margin-top: 4px;
    padding-left: 10px;
}
.pw-wrap { position: relative; }
.pw-wrap .toggle-pw {
    position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: #999;
}

/* Khung chứa mã xác minh gộp chung */
.captcha-flex { 
    position: relative; 
    width: 100%;
}

/* Hình ảnh Captcha nằm bên trong ô input */
.captcha-img-box {
    position: absolute;
    right: 5px;
    top: 5px;
    bottom: 5px;
    background: url('images/header\ pc.gif') #e4d8b8; /* Giả lập nền nhiễu captcha */
    color: #333;
    padding: 0 15px;
    border-radius: 25px; /* Bo tròn theo góc ô input */
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 3px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.agreement { font-size: 13px; text-align: center; margin: 15px 0; color: #333;}
.agreement a { color: #ff6a00; text-decoration: underline; }

/* Responsive Mobile Modal */
@media (max-width: 768px) {
    /* Đảm bảo Form Đăng ký Mobile xếp dọc, không bị lỗi ngang */
    .register-mobile-view.mobile-only {
        display: block !important; 
    }

    .modal-content { width: 95%; height: auto; max-height: 90vh; overflow-y: auto;}
    
    /* Xóa nút X dạng tròn, làm giống hình 2 trên mobile */
    .close-modal {
        background: transparent;
        color: #333;
        border: none;
        box-shadow: none;
        top: 5px;
        right: 15px;
        font-size: 32px;
    }
}