@media only screen and (max-width:1590px) {
    .wrap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        font-family: alex;
        position: relative;
        margin: 0 auto;
    }

    .main_nav {
        width: 100%;
        height: 8vw;
        z-index: 3;
    }

    .main_nav ul li a {
        color: #44442e;
        font-size: 2vw;
        font-family: alex;
        width: 12.6vw;
        height: 5.912vw;
        margin: 0 1vw;
    }

    .header {
        width: 100%;
        height: 49vw;
        z-index: 2;
    }

    .header_class {
        left: 12%;
        top: -3%;
        width: 81.4vw;
        height: 59.12vw;
    }

    .header_logo {
        width: 22vw;
        top: 1vw;
        left: 0vw;
        z-index: 3;
    }

    .header .btn_play {
        width: 7vw;
        height: 7vw;
        top: 40%;
        left: 45%;
        animation: scale 1s alternate infinite linear;
    }

    .header_box {
        width: 57vw;
        height: 15.1vw;
        left: 50%;
        bottom: 10%;
        transform: translateX(-50%);
    }

    .box_icon {
        width: 11.4vw;
        height: 10.38vw;
    }

    .box_regist {
        width: 11.4vw;
        height: 10.38vw;
    }

    .box_adnxu {
        width: 11.4vw;
        height: 10.38vw;
    }

    .box_appstore {
        width: 11.64vw;
        height: 2.64vw;
    }

    .box_android {
        width: 11.64vw;
        height: 2.64vw;
    }

    .box_apk {
        width: 11.64vw;
        height: 2.64vw;
    }

    .box_ldplay {
        width: 11.64vw;
        height: 2.64vw;
    }

    .content {
        width: 100%;
        height: auto;
    }

    .news_section {
        width: 100%;
        height: 66vw;
    }

    .ns_title {
        width: 62.7vw;
        height: 11.03vw;
        margin: 0 auto;
        z-index: 3;
    }

    .ns_box {
        width: 88.22vw;
        height: 38.7vw;
        margin: 0 auto;
        z-index: 2;
        padding: 5.1vw 3.7vw 3.8vw 3.7vw;
    }

    .ns_slide {
        width: 31.133vw;
        height: 30vw;
    }

    .news_slider {
        width: 31.133vw;
        height: 30vw;
    }

    .khung_slide {
        top: 5.3vw;
        left: 4.1vw;
        width: 30.504vw;
        z-index: 3;
        pointer-events: none;
    }

    .ns_news_board {
        width: 100%;
        height: 29.7vw;
        margin-left: 1.3vw;
    }

    .btn_more_info {
        width: 2vw;
        height: 2vw;
        top: 0.2vw;
        right: 1.5vw;
    }

    .ns_nb_header ul li.active_n_h {
        background-size: cover;
        width: 9.623vw;
        height: 2.14vw;
        color: #FBE0C0;
    }

    .ns_nb_header ul li:hover {
        background-size: cover;
        width: 9.623vw;
        height: 2.14vw;
        color: #FBE0C0;
    }

    .ns_nb_header ul li {
        height: 2.14vw;
        width: 9.623vw;
        color: white;
        font-size: 1.3vw;
        cursor: pointer;
    }

    .ns_nb_content ul li {
        width: 100%;
        font-size: 1.4vw;
        transition: all .3s;
        margin: 1.5vw 0;
    }

    .ns_nb_content ul li .ns_nb_content_descr {
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        display: -webkit-box;
        width: 37vw;
        height: 3.2vw;
        position: relative;
        padding-left: 1.5vw;
    }

    .ns_nb_content ul li .ns_nb_content_descr::before {
        content: "";
        background-size: cover;
        background-position: center;
        width: 1.4vw;
        height: 1.6vw;
        position: absolute;
        top: 0.2vw;
        left: 0;
    }

    .ns_nb_content ul li .ns_nb_content_descr::after {
        content: "";
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 0.05vw;
        position: absolute;
        top: 3.1vw;
        left: 0;
    }

    .character_section {
        width: 100%;
        height: 67.5vw;
        position: relative;
    }

    .cs_title {
        width: 75.5vw;
        margin: 0 auto;
    }

    .cc_content_left ul {
        position: absolute;
        z-index: 2;
        top: 4vw;
        left: 13vw;
    }

    .cc_content_left ul li {
        display: none;
        width: 36.23vw;
    }

    .cc_content_khung ul li {
        display: none;
        width: 38.05vw;
    }

    .cc_content_khung ul {
        position: absolute;
        top: 2.25vw;
        left: 49.5vw;
        z-index: 1;
    }

    .cc_content_right ul li:nth-child(1) {
        position: absolute;
        top: 4.7vw;
        left: 47.2vw;
        z-index: 2;
    }

    .cc_content_right ul li:nth-child(2) {
        position: absolute;
        top: 4.8vw;
        left: 52.1vw;
        z-index: 2;
    }

    .cc_content_right ul li:nth-child(3) {
        position: absolute;
        top: 4.3vw;
        left: 48vw;
        z-index: 2;
    }

    .cc_content_right ul li {
        display: none;
        width: 40.41vw;
    }

    .char_btn_next {
        width: 6.3vw;
        height: 5.4vw;
        top: 20vw;
        right: 5vw;
        z-index: 6;
        cursor: pointer;
        animation: scale 1s alternate infinite linear;
    }

    .char_btn_prev {
        width: 6.3vw;
        height: 5.4vw;
        top: 20vw;
        left: 5vw;
        z-index: 6;
        cursor: pointer;
        animation: scale 1s alternate infinite linear;
    }

    .screenshot_section {
        position: relative;
        width: 100%;
        height: 76vw;
    }

    .ss_title {
        width: 73.585vw;
        margin: 0 auto;
    }

    .ss_slider {
        width: 68.302vw;
        height: 34.592vw;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
        list-style: none;
        padding: 0;
        margin-top: 4.4vw;
    }

    .bg_ss_slider {
        width: 77.659vw;
        top: 10.6vw;
        left: 11vw;
        z-index: 3;
    }

    .screenshot_section .swiper-container-horizontal>.swiper-pagination-bullets,
    .swiper-pagination-custom,
    .swiper-pagination-fraction {
        bottom: 23vw;
        left: 0;
        width: 100%;
    }

    .screenshot_section .swiper-pagination-bullet {
        width: 2vw;
        height: 2vw;
        display: inline-block;
        border-radius: 100%;
        opacity: 1;
        box-shadow: inset 0px 0px 2px 0px #ff5c5c;
    }

    .screenshot_section .swiper-pagination-bullet-active {
        opacity: 1;
        background: #000;
        box-shadow: 0px 0px 3px 1px #000;
    }

    .footer-section .infomation {
        flex: 3;
    }

    .footer-section {
        position: relative;
        z-index: 4;
        padding: 1.5vw 0vw;
    }

    .footer-section p {
        font-weight: 400;
        font-size: 15px;
        margin-bottom: 0;
        color: white;
    }

    @keyframes updown {
        from {
            transform: translateY(-1vw);
        }

        to {
            transform: translateY(1vw);
        }
    }
}


@media only screen and (max-width:1024px) {

    #downloadModal .modal-content {
        background-size: cover;
        background-position: center;
        width: 64.26vw;
        height: 45.5vw;
        border: unset;
        border-radius: unset;
        position: relative;
    }

    #downloadModal .modal-dialog {
        max-width: 64.26vw;
        position: relative;
        top: 50%;
        transform: translate(0%, -65%);
    }

    #downloadModal .close {
        background-size: cover;
        background-position: center;
        position: absolute;
        top: 5.8vw;
        right: -0.8vw;
        width: 5vw;
        height: 5vw;
    }

    .desktop {
        display: none;
    }

    .mobile {
        display: flex;
    }

    .mobile_nav {
        background: url('../images/bg_header_nav.jpg') no-repeat;
        width: 100%;
        height: 8.04vw;
        z-index: 5;
        justify-content: flex-start !important;
    }

    .btn_menu {
        background: url('../images/btn_menu.png') no-repeat;
        width: 6vw;
        height: 6vw;
        margin-right: 1.5vw;
    }

    .btn_fb {
        background: url('../images/btn_fb_mb.png') no-repeat;
        width: 6vw;
        height: 6vw;
        margin-right: 1.5vw;
    }

    .btn_mb_nav {
        flex: 1;
        justify-content: flex-end !important;
    }

    .btn_mb_nav li {
        width: 23vw;
        height: 7vw;
    }

    .btn_mb_nav li a {}

    .btn_mb_nav li img {
        width: 100%;
    }

    .header_logo_mb {
        width: 17vw;
        top: 2vw;
        left: 3vw;
        z-index: 5;
    }

    .header_logo_mb img {
        width: 100%;
    }

    .btn_mb_nav li a:hover img {
        filter: brightness(1.15) drop-shadow(1px 2px 3px rgb(255, 197, 109));
    }

    .mb_menu {
        width: 100%;
        position: absolute;
        flex-direction: column;
        top: 8vw;
        transform: translateX(-100%);
        background-color: #6c584a;
        z-index: 4;
        transition: all .4s;
    }

    .mb_menu.open {
        transform: translateX(0%);
    }

    .mb_menu li {
        width: 100%;
        border-bottom: 0.1vw solid #FBE0C0;
    }

    .mb_menu li a {
        font-size: 3vw;
        width: 100%;
        height: 10vw;
        color: white;
    }

    .mb_menu li:hover a {
        color: #FBE0C0;
    }

    .mb_menu li:hover {
        background-color: #55453a;
    }

    .header {
        width: 100%;
        height: 72.26vw;
        z-index: 2;
    }

    .header_class {
        left: 8%;
        top: -2%;
        width: 90.4vw;
        height: 59.12vw;
    }

    .header_box {
        width: 78.711vw;
        height: 27.73vw;
        left: 50%;
        bottom: 3%;
        transform: translateX(-50%);
    }

    .box_adnxu {
        width: 16.04vw;
        height: 15vw;
    }

    .box_regist {
        width: 16.04vw;
        height: 15vw;
    }

    .box_icon {
        width: 16.04vw;
        height: 15vw;
    }

    .box_apk {
        width: 15.523vw;
        height: 3.6vw;
    }

    .box_android {
        width: 15.532vw;
        height: 3.6vw;
    }

    .box_appstore {
        width: 15.523vw;
        height: 3.6vw;
    }

    .box_ldplay {
        width: 15.523vw;
        height: 3.6vw;
    }

    .news_section {
        background: url('../images/bg_3_mb.png') no-repeat;
        width: 100%;
        height: 133vw;
    }

    .ns_box {
        background: url(../images/tintuc_board_mb.png) no-repeat;
        width: 81vw;
        height: 110vw;
        margin: 0 auto;
        z-index: 2;
        flex-direction: column;
    }

    .ns_slide {
        width: 100%;
        height: auto;
    }

    .news_slider {
        width: 70.233vw;
        height: 56vw;
    }

    .ns_slide .news_frame a {
        width: 70.233vw;
        height: 56vw;
    }

    .ns_slide .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;     
        /* object-fit: fill; */
    }

    .ns_news_board {
        width: 100%;
        height: 35.755vw;
        margin-left: 0;
        margin-top: 2vw;
    }

    .btn_more_info {
        width: 3.5vw;
        height: 3.5vw;
        top: 0.5vw;
        right: 1.5vw;
    }

    .ns_nb_header ul {
        width: 100%;
        background-color: #9e988ead;
        border-top: 1px solid #dad6d0;
        padding-right: 5vw;
    }

    .ns_nb_header ul li {
        height: 4.14vw;
        width: 18.623vw;
        color: white;
        font-size: 2.5vw;
        cursor: pointer;
        margin: 0 0.5vw;
    }

    .ns_nb_header ul li.active_n_h {
        background-size: cover;
        width: 18.623vw;
        height: 4.14vw;
        color: #FBE0C0;
    }

    .ns_nb_header ul li:hover {
        background-size: cover;
        width: 18.623vw;
        height: 4.14vw;
        color: #FBE0C0;
    }

    .ns_nb_content ul li {
        width: 100%;
        font-size: 2.3vw;
        transition: all .3s;
        position: relative;
    }

    .ns_nb_content ul li::after {
        content: "";
        background: url('../images/under_line_news.png') no-repeat;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 0.05vw;
        position: absolute;
        top: 5.1vw;
        left: 1vw;
    }

    .ns_nb_content ul li .ns_nb_content_descr::before {
        content: "";
        background-size: cover;
        background-position: center;
        width: 2vw;
        height: 2.2vw;
        position: absolute;
        top: 0.5vw;
        left: 0;
    }

    .ns_nb_content ul li .ns_nb_content_descr {
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        display: -webkit-box;
        width: 54vw;
        height: 4.2vw;
        position: relative;
        padding-left: 3vw;
    }

    .ns_nb_content ul li .ns_nb_content_descr::after {
        content: unset;
        background: url('../images/under_line_news.png') no-repeat;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 1px;
        position: absolute;
        top: 49px;
        left: 0;
    }

    .ns_title {
        width: 65.7vw;
        height: 11.03vw;
        margin: 0 auto;
        z-index: 3;
    }

    .ns_nb_content ul li:hover {
        transform: translateX(1vw);
    }

    @keyframes fadedown {
        0% {
            transform: translateY(0);
            opacity: 1;
        }

        100% {
            transform: translateY(1vw);
            opacity: 0;
        }
    }

    @keyframes fadeup {
        0% {
            transform: translateY(1vw);
            opacity: 0;
        }

        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .cs_title {
        width: 94.585vw;
        margin: 0 auto;
    }

    .ss_title {
        width: 94.585vw;
        margin: 0 auto;
    }

    .cc_content_mobile_slide {
        width: 66vw;
        height: 66vw;
    }

    .character_section {
        width: 100%;
        height: 88.239vw;
        position: relative;
    }

    .screenshot_section {
        position: relative;
        width: 100%;
        height: 99vw;
    }

    .bg_ss_slider {
        width: 94.736vw;
        top: 15.6vw;
        left: 9vw;
        z-index: 3;
    }

    .ss_slider {
        width: 81.302vw;
        height: 41.592vw;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
        list-style: none;
        padding: 0;
        margin-top: 12.4vw;
    }

    .bg_ss_slider {
        width: 92.736vw;
        top: 20.6vw;
        left: 4vw;
        z-index: 3;
    }

    .screenshot_section .swiper-container-horizontal>.swiper-pagination-bullets,
    .swiper-pagination-custom,
    .swiper-pagination-fraction {
        bottom: 28vw;
        left: 0;
        width: 100%;
    }

    .footer-section p {
        font-weight: 400;
        font-size: 1.5vw;
        margin-bottom: 0;
        color: white;
    }

    /* -----------------RANKING_SECTION RESPONSIVE------------------- */
    
    .ranking_section {
        width: 100%;
        min-height: 120vw;
        padding-bottom: 10vw;
    }

    .rs_title {
        width: 94.585vw;
        margin: 0 auto;
        padding-top: 3vw;
    }

    .ranking_section .container {
        max-width: 95vw;
        margin-top: 5vw;
    }

    .ranking_section .server-select {
        width: 80vw;
    }

    .ranking_section .custom-select {
        padding: 2vw 4vw;
        font-size: 3.5vw;
        border-width: 0.5vw;
    }

    .ranking_section .headerBXH {
        max-width: 80vw;
        margin-bottom: 3vw;
    }

    .ranking_section iframe {
        min-height: 80vw;
        border-width: 0.5vw;
    }

}

@media only screen and (max-width: 568px) {
    #downloadModal .modal-dialog {
        max-width: 64.26vw;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -65%);
    }
}