/* Reset cơ bản và Box Sizing */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    /* Đảm bảo nền màu xanh dương cho phần không gian ngoài landing-page (nếu cần) */
    background-color: #0d47a1; /* Một màu xanh dương đậm làm ví dụ */
    font-family: sans-serif; /* Thay bằng font chữ phù hợp */
    overflow: hidden;
}

/* Container chính của trang */
.landing-page {
    position: relative;
    /* Sử dụng hình nền có con tàu và biển */
    background-image: url('assets/BG.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px; /* Khoảng trống cho phần icon */
    overflow: hidden;
}

/* Phần Header - Chỉ chứa các icon mạng xã hội/hỗ trợ */
.header {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 1200px; /* Giới hạn chiều rộng trên desktop */
    margin: 0 auto;
    padding: 10px 20px;
    z-index: 10;
}

.social-icons {
    display: flex;
    gap: 15px; /* Khoảng cách giữa các icon */
    position: absolute; /* Vị trí tuyệt đối */
    top: 10px;
    right: 20px;
}

.icon-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: white;
    font-size: 10px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.icon {
    /*width: 40px;
    height: 40px;*/
}

.icon-text {
    margin-top: 5px;
    display: block; /* Hiển thị text trên desktop */
}

/* Nội dung chính */
.main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /*width: 90%;*/
    max-width: 800px; /* Giới hạn chiều rộng nội dung chính */
    padding: 0 10px;
}

.game-logo {
    max-width: 400px;
    height: auto;
    /*margin-bottom: 10px;*/
    z-index: 9999;
}

.slogan {
    /*width: 80%;*/
    max-width: 500px;
    height: auto;
    margin-bottom: 20px;
    margin-top: -40px;
    z-index: 9999;
}

.hero-image-container {
    width: 100%;
    max-width: 700px; /* Kích thước tối đa cho trang trí chính */
    scale: 0.7;
    position: fixed;
    top: 50%;
    transform: translateY(-45%);
}

.hero-decoration {
    width: 100%;
    height: auto;
    /* Hiệu ứng trôi nổi nhẹ hoặc bóng đổ nếu muốn */
}

/* Nút Tải ứng dụng và Web */
.action-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    width: 100%;
}

.button-link {
    display: inline-block;
    /*width: 48%;*/
    /*max-width: 300px;*/
    transition: transform 0.2s;
}

.button-link:hover {
    transform: scale(1.05);
}

.button-img {
    width: 100%;
    height: auto;
}

/* Ẩn/Hiện các thành phần theo thiết bị */
.desktop-only { display: flex; }
.mobile-only { display: none; }

@media (min-width: 712px) {
    .icon {
        width: 100%!important
    }
    .social-icons {
        right: 10px!important;
        gap: 20px!important;
    }
    /*.button-link {
        max-width: 500px!important
    }*/
}
/* --- MEDIA QUERY CHO MOBILE --- */
@media (max-width: 768px) {
    .landing-page {
        /* Đổi sang background-color hoặc điều chỉnh background-position/size cho mobile nếu cần */
        background-color: #0d47a1; 
        background-position: center bottom; 
        padding-top: 0;
    }

    .social-icons {
        flex-direction: column-reverse; /* Xếp icon dọc */
        gap: 5px;
        top: 20px;
        right: -25px;
    }
    
    .icon {
        width: 50%
    }
    
    .icon-text {
        font-size: 8px; /* Font chữ nhỏ hơn trên mobile */
    }

    .main-content {
        padding-top: 10px;
    }
    
    .game-logo {
        width: 50%;
        max-width: 300px;
    }
    
    .slogan {
        width: 70%;
        max-width: 350px;
        margin-top: -20px;
    }
    
    .hero-image-container {
        scale: 0.9;
    }

    /* Đổi vị trí nút Tải/Web theo hình mobile */
    .action-buttons {
        flex-direction: column; /* Xếp các nút dọc */
        gap: 10px;
        margin-top: 10px;
    }
    
    .button-link {
        width: 80%; /* Nút rộng hơn trên mobile */
        max-width: 350px;
    }

    /* Đảo ngược ẩn/hiện cho mobile */
    .desktop-only { display: none; }
    .mobile-only { 
        display: flex;
        flex-direction: column; /* Xếp nút Tải và nút Web dọc theo hình mobile */
        align-items: center;
        width: 100%;
        padding-bottom: 20px;
    }

    /* Điều chỉnh các nút trên mobile để khớp với hình ảnh */
    .download-app-mobile { order: 1; margin-bottom: 10px; }
    .web-version-mobile { order: 2; }
}

/* Điều chỉnh lại vị trí nút Tải/Web theo hình PC (nếu cần bố cục 3 nút ngang) */
/* Tuy nhiên, dựa trên hình "Landing page pc.jpg", hai nút "DOWNLOAD APP NOW" và "PLAY WEB VERSION QUICKLY" nằm hai bên của "TREASURE ISLAND" */
/* Vì phần trang trí chính đã bao gồm "TREASURE ISLAND" nên ta sẽ bố cục lại action-buttons cho PC */

@media (min-width: 769px) {
    .main-content {
        max-width: 1200px;
    }
    
    .hero-image-container {
        max-width: 1000px;
        transform: translateY(-60%);
    }
    
    .action-buttons.desktop-only {
        /* Bố cục 2 nút 2 bên trên desktop */
        position: absolute;
        bottom: 0px; /* Đặt phía dưới phần trang trí chính */
        left: 45%;
        transform: translateX(-50%);
        width: 1650px;
        justify-content: space-between;
        gap: 0;
    }
    
    .button-link.download-app {
        position: absolute;
        left: 0;
        bottom: 0;
        /*width: 250px;*/
        margin-right: auto;
    }
    
    .button-link.web-version {
        position: absolute;
        right: 0;
        bottom: 0;
        /*width: 250px;*/
        margin-left: auto;
    }

    .hero-decoration {
        /* Canh chỉnh vị trí hero để khớp với ảnh gốc */
        margin-top: -50px; 
    }
}
@media (max-width: 768px) and (max-height: 736px) {
    .button-link {
        width: 60%
    }
}

@media (max-width: 540px) and (max-height: 720px) and (aspect-ratio: 6/8) {
    .hero-image-container {
        scale: 0.7;
    }
}

#chat-widget-minimized {
    display: none!important
}