@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700;800;900&display=swap');
/* ===== RESET CSS ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ===== BASE (font, màu, v.v.) ===== */
:root {
    --primary-color: #0066ff;
    --secondary-color: #f2f2f2;
    --text-color: #fff;
    --font-base: "Roboto", sans-serif;
    --max-width: 1200px;
}

body {
    background: url("images/bg-dt.webp") #000 no-repeat;
    font-family: var(--font-base);
    font-size: 16px;
    color: var(--text-color);
    line-height: 1.6;
    min-height: 100vh;
    padding-left: 15px;
    padding-right: 15px;
}

/* ===== LAYOUT ===== */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
}

header, footer {
    /*padding: 20px 0;*/
}

main {
    /*padding: 40px 0;*/
}

/* ===== COMPONENTS ===== */
h1, h2, h3 {
    margin-bottom: 1em;
}

a {
    color: var(--primary-color);
    text-decoration: none;
}

button {
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #004bcc;
}

img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}
.social .social-list {
    list-style: none;
    position: fixed;
    top: 15px;
    left: 15px;
}
.social .social-list li:nth-child(1) {
    margin-bottom: 5px;
}
.social .social-list li:nth-child(3) {
    position: fixed;
    top: 15px;
    right: 15px;
}
.social .social-list li a img {
    width: 180px;
}
header .logo {
    padding-top: 15px;
    text-align: center;
}
header .logo img {
    width: 636px;
}
header .slogan {
    text-align: center;
    margin-top: 5px;
}
header .slogan img {
    width: 934px;
}
header .slogan.mb{
    display: none;
}
header .slogan.mb img {
    width: 768px;
}
.swiper {
    width: 650px;
}
.swiper-slide {
    text-align: center;
}
.swiper-slide img {
    width: 650px;
}
.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: -8px;
}
.swiper-pagination-bullet {
    background: white;
}
.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
}
#section-2 {
    margin-top: 30px;
    margin-bottom: 30px;
}
.game-info .app-info {
    margin-bottom: 30px;
}
.game-info .app-info .download {
    display: flex;
    flex-flow: row;
    display: none;
}
.game-info .app-info .download > div {
    flex: 1;
}
.game-info .app-info .download .ios .link {
    text-align: right;
}
.game-info .app-info .download .ios .android {
    text-align: left;
}
.game-info .app-info .download img {
    width: 250px;
}
.game-info .app-info .web-play .link {
    text-align: center;
    margin-bottom: 5px;
}
.game-info .app-info .web-play .link img {
    width: 380px;
}
.game-info .app-info .web-play .text {
    text-align: center;
}
.game-info .app-info .web-play .text img {
    width: 600px;
}
.game-info .access-tutorial .text {
    text-align: center;
    margin-bottom: 15px;
}
.game-info .access-tutorial .text img {
    width: 985px;
}
.game-info .access-tutorial .step {
    text-align: center;
}
.game-info .access-tutorial .step img {
    width: 1200px;
}
#section-3 .content h1.title-highlight {
    font-family: 'Oswald', 'Compacta', 'Haettenschweiler', sans-serif;
    font-size: 32px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.4;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* đổ bóng nhẹ */
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 50%, #333333 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
#section-3 .content h1.title-highlight .ok88 {
    font-family: 'Oswald', 'Compacta', 'Haettenschweiler', sans-serif;
    background: linear-gradient(90deg, #FFD700 0%, #FFB800 50%, #FFA500 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* đổ bóng riêng cho OK88 */
}
#section-3 h2 {
    font-family: 'Oswald', 'Compacta', 'Haettenschweiler', sans-serif;
    font-size: 26px;
    font-weight: 900;
    text-transform: capitalize;
    text-align: left;
    line-height: 1.4;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* đổ bóng nhẹ */
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 50%, #333333 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
#section-3 h3 {
    font-family: 'Oswald', 'Compacta', 'Haettenschweiler', sans-serif;
    font-size: 22px;
    font-weight: 900;
    text-transform: capitalize;
    text-align: left;
    line-height: 1.4;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* đổ bóng nhẹ */
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 50%, #333333 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
#section-3 .content figure {
    margin-bottom: 15px;
    margin-top: 15px;
}
#section-3 .content figcaption {
    font-size: 14px;
    text-align: center;
}
footer .info {
    display: flex;
    flex-flow: row;
    gap: 15px;
}
footer .info .logo {
    flex: 3;
}
footer .info .logo img {
    width: 300px;
}
footer .info .menu {
    flex: 2;
}
footer .info .menu .title {
    font-family: 'Oswald', 'Compacta', 'Haettenschweiler', sans-serif;
    font-size: 22px;
    font-weight: 900;
    text-transform: capitalize;
    text-align: left;
    line-height: 1.4;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* đổ bóng nhẹ */
    background: linear-gradient(90deg, #FFD700 0%, #FFB800 50%, #FFA500 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
footer .info .menu ul {
    list-style: none;
}
footer .info .menu ul li a{
    color: white;
}
footer .info .menu {
    flex: 2;
}
footer .info .dmca-logo {
    flex: 1;
}
footer .info .dmca-logo img {
    width: 120px;
}
/*Bổ sung DCMA*/
.dmca-logo img{
    filter: invert(42%) sepia(100%) saturate(800%) hue-rotate(90deg);
}
footer {
    position: relative;
    margin-top: 50px;
    padding-top: 50px;
}
footer::before {
    position: absolute;
    content: '';
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url("images/line.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 4px;
    margin: 0 auto;
}
footer .copy-right {
    border-top: white 1px solid;
    margin-top: 30px;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
    color: #bababa;
}
.mb {
    display: none;
}
#section-stream {
    margin-top: 30px;
}
#section-stream .stream-wrapper {
    text-align: center;
}
#section-stream .stream-wrapper iframe {
    width: 600px;
    height: 262px;
    border: 4px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to right, #f7c400, #ffe259, #ff9e00);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 1400px) {
    .social .social-list li a img {
        width: 150px;
    }
    header .logo img {
        width: 550px;
    }
    header .slogan img {
        width: 800px;
    }
    .swiper-slide img {
        width: 600px;
    }
    .swiper-horizontal>.swiper-pagination-bullets,
    .swiper-pagination-bullets.swiper-pagination-horizontal,
    .swiper-pagination-custom,
    .swiper-pagination-fraction {
        bottom: -7px;
    }
    .game-info .app-info .web-play .link img {
        width: 330px;
    }
    .game-info .app-info .web-play .text img {
        width: 500px;
    }
    .game-info .access-tutorial .text img {
        width: 900px;
    }
    .game-info .access-tutorial .step img {
        width: 900px;
    }
}

@media (max-width: 1200px) {
    .social .social-list li a img {
        width: 120px;
    }
    header .logo img {
        width: 500px;
    }
    header .slogan img {
        width: 700px;
    }
    .swiper-slide img {
        width: 500px;
    }
    .swiper-horizontal>.swiper-pagination-bullets,
    .swiper-pagination-bullets.swiper-pagination-horizontal,
    .swiper-pagination-custom,
    .swiper-pagination-fraction {
        bottom: -6px;
    }
    .game-info .app-info .web-play .link img {
        width: 320px;
    }
    .game-info .app-info .web-play .text img {
        width: 400px;
    }
    .game-info .access-tutorial .text img {
        width: 800px;
    }
    .game-info .access-tutorial .step img {
        width: 800px;
    }
}

@media (max-width: 991px) {
    .game-info .app-info .download {
        display: flex;
        margin-bottom: 15px;
    }
    .game-info .access-tutorial .text img {
        width: 600px;
    }
    #section-3 .content h1.title-highlight {
        font-size: 28px;
    }
    #section-3 .content {
        font-size: 14px;
    }
    #section-3 h2 {
        font-size: 22px;
    }
    #section-3 h3 {
        font-size: 18px;
    }
    footer .info .menu {
        font-size: 14px;
    }
    footer .info .menu .title {
        font-size: 18px;
    }
    footer .copy-right {
        font-size: 12px;
    }
    header .slogan {
        display: none;
    }
    header .slogan.mb {
        display: block;
    }
    header .slogan.mb img {
        width: 530px;
    }
    .game-info .app-info .web-play .text {
        display: none;
    }
    #section-stream {
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    footer .info .logo img {
        width: 260px;
    }
    .swiper {
        width: 100%;
    }
    .swiper-slide img {
        width: 100%;
    }
    header .logo {
        padding-top: 30px;
    }
    header .logo img {
        width: 340px;
    }
    .swiper-slide img {
        width: 500px;
    }
    .game-info .app-info .download img {
        width: 200px;
    }
    .game-info .app-info .web-play .link img {
        width: 280px;
    }
    .social .social-list li a img {
        width: 80px;
    }
    .game-info .access-tutorial .step img {
        display: none;
    }
    .game-info .access-tutorial .step img.mb {
        display: block;
    }
    #section-3 .content h1.title-highlight {
        font-size: 24px;
    }
    #section-3 h2 {
        font-size: 20px;
    }
    #section-3 h3 {
        font-size: 18px;
    }
    #section-3 .content ul,
    #section-3 .content ol{
        list-style: none;
    }
    footer .info {
        display: flex;
        flex-flow: column;
        gap: 15px;
    }
    footer .info .logo {
        text-align: center;
    }
    footer .info .dmca-logo img {
        width: 100px;
    }
    #section-stream .stream-wrapper iframe {
        width: 400px;
        height: 175px;
    }
}
@media (max-width: 441px) {
    #section-stream .stream-wrapper iframe {
        width: 300px;
        height: 131px;
    }
}