@media only screen and (max-width:1590px) {
    .wrap {
        width: 100%;
        background-color: #003942;
        height: 100%;
        overflow: hidden;
        font-family 'Bai Jamjuree', sans-serif;
        position: relative;
        margin: 0 auto;
    }

    .main_nav {
        width: 100%;
        height: 6.04vw;
        padding-bottom: 0.4vw;
        z-index: 3;
    }

    .main_nav ul li a {
        color: #f1f2d3;
        /* font-size: 2vw; */
        font-family 'Bai Jamjuree', sans-serif;
        width: 12.6vw;
        height: 5.912vw;
        margin: 0 1vw;
    }

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

    .header_class {
        /* left: 16%;
        top: -3%;
        width: 81.4vw; */
        /* height: 59.12vw; */

        width: 100%;
    }

    .header_logo {
        width: 31vw;
        top: -6vw;
        left: 1vw;
        z-index: 3;
    }

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

    .header_box {
        width: 63.711vw;
        height: 15.73vw;
        left: 50%;
        /* bottom: 10%; */
        transform: translateX(-50%) scale(1);
        zoom: 1.0;
        /* transform: scale(1); */
        /* top: 170px; */
    }

    .box_icon {
        width: 13.46vw;
        height: 13.46vw;
    }

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

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

    .box_appstore {
        width: 13.523vw;
        height: 4.72vw;
    }

    .box_android {
        width: 13.523vw;
        height: 4.72vw;
    }

    .box_apk {
        width: 13.523vw;
        height: 4.72vw;
    }

    .content {
        width: 100%;
        height: 178.5vw;
        /* padding-top: 3vw; */
    }

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

    .ns_box {
        width: 83.72vw;
        height: 28.43vw;
        margin: 0 auto;
        z-index: 2;
        transform: translateY(-4vw);
        padding-top: 3vw;
    }

    .ns_slide {
        width: 37.233vw;
        height: 20.755vw;
    }

    .news_slider {
        width: 36.667vw;
        height: 20.315vw;
    }

    .ns_news_board {
        width: 38.491vw;
        height: 20.755vw;
        margin-left: 1.3vw;
    }

    .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%;
        /* height: 2.52vw; */
        /* font-size: 1.5vw; */
        border-bottom: 0.15vw solid #A09C93;
        transition: all .3s;
        padding: 5px 0;
    }

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

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

    .btn_moreinfo{
        justify-content: flex-end !important;
        margin: 0.3vw 0;
    }
    
    .btn_moreinfo a{
        /* font-size: 1.3vw; */
        color: #424242;
    }

    .character_section {
        width: 100%;
        height: 68.239vw;
        position: relative;
        margin-top: 1vw;
    }

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

    .hp-list {
        flex-direction: column;
        margin-left: 6vw;
        position: relative;
        z-index: 3;
    }

    .hp-list li {
        width: 10.19vw;
        height: 11.01vw;
        position: relative;
    }

    .hp-list li a {
        width: 10.19vw;
        height: 11.01vw;
        margin: 1vw 0;
    }

    .hp-list li.item-1.active a {
        width: 10.19vw;
        height: 11.01vw;
    }

    .hp-list li.item-1:hover a {
        width: 10.19vw;
        height: 11.01vw;
    }

    .hp-list li.item-2.active a {
        width: 10.19vw;
        height: 11.01vw;
    }

    .hp-list li.item-2:hover a {
        width: 10.19vw;
        height: 11.01vw;
    }

    .hp-list li.item-3.active a {
        width: 10.19vw;
        height: 11.01vw;
    }

    .hp-list li.item-3:hover a {
        width: 10.19vw;
        height: 11.01vw;
    }

    .hp-list li.item-4.active a {
        width: 10.19vw;
        height: 11.01vw;
    }

    .hp-list li.item-4:hover a {
        width: 10.19vw;
        height: 11.01vw;
    }

    .hp-list li.item-5.active a {
        width: 10.19vw;
        height: 11.01vw;
    }

    .hp-list li.item-5:hover a {
        width: 10.19vw;
        height: 11.01vw;
    }

    .hp-list li::after {
        content: "";
        position: absolute;
        background-size: cover;
        width: 0.3vw;
        height: 3.65vw;
        bottom: -2.2vw;
        left: 4.95vw;
    }

    .persion-img {
        top: -25vw;
        left: 6vw;
        width: 52.202vw;
        animation: updown 1.5s infinite alternate linear;
    }

    .mp-item p {
        text-align: center;
        bottom: -35.5vw;
        right: 1vw;
        /* font-size: 2.3vw; */
        font-family: 'Bai Jamjuree';
        font-style: italic;
        z-index: 3;
        margin-bottom: 1vw;
        display: none;
    }

    .mp-tl {
        width: 14.655vw;
        height: 4.717vw;
        top: -11.5vw;
        right: 14.9vw;
    }

    .mp-tv {
        width: 14.655vw;
        height: 4.717vw;
        top: -4.717vw;
        right: 12.5vw;
    }

    .mp-dm {
        width: 14.655vw;
        height: 4.717vw;
        top: -11.5vw;
        right: 14.9vw;
    }

    .mp-5d {
        width: 14.655vw;
        height: 4.717vw;
        top: -4.717vw;
        right: 12.5vw;
    }

    .mp-mg {
        width: 14.655vw;
        height: 4.717vw;
        top: 2vw;
        right: 12.8vw;
    }

    .mp-bd {
        width: 14.655vw;
        height: 4.717vw;
        top: 2vw;
        right: 12.8vw;
    }

    .mp-nm {
        width: 14.655vw;
        height: 4.717vw;
        top: -11.5vw;
        right: 14.9vw;
    }

    .mp-ty {
        width: 14.655vw;
        height: 4.717vw;
        top: -4.717vw;
        right: 12.5vw;
    }

    .mp-hs {
        width: 14.655vw;
        height: 4.717vw;
        top: 2vw;
        right: 12.8vw;
    }

    .mp-td {
        width: 14.655vw;
        height: 4.717vw;
        top: 2vw;
        right: 12.8vw;
    }

    .mp-cb {
        width: 14.655vw;
        height: 4.717vw;
        top: -11.5vw;
        right: 14.9vw;
    }

    .mp-tn {
        width: 14.655vw;
        height: 4.717vw;
        top: -4.717vw;
        right: 12.5vw;
    }

    .mp-vd {
        width: 14.655vw;
        height: 4.717vw;
        top: -11.5vw;
        right: 14.9vw;
    }

    .mp-cl {
        width: 14.655vw;
        height: 4.717vw;
        top: -4.717vw;
        right: 12.5vw;
    }

    .bg-mp {
        width: 47.17vw;
        top: 11.5vw;
        left: 26.4vw;
    }

    .screenshot_section {
        position: relative;
        width: 100%;
        margin-top: 5vw;
    }

    .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: 87.736vw;
        top: 8.6vw;
        left: 12vw;
        z-index: 3;
    }

    .ss_slider .swiper-button-prev,
    .swiper-container-rtl .swiper-button-next {
        left: 3vw;
        right: auto;
        width: 5.1vw;
        height: 5.346vw;
    }

    .ss_slider .swiper-button-next,
    .swiper-container-rtl .swiper-button-prev {
        right: 3vw;
        left: auto;
        width: 5.1vw;
        height: 5.346vw;
    }

    .ss_slider .swiper-button-next:after,
    .swiper-container-rtl .swiper-button-prev:after {
        content: '';
        background: url('../images/btn_next.png') no-repeat;
        background-size: cover;
        background-position: center;
        width: 5.1vw;
        height: 5.346vw;
    }

    .ss_slider .swiper-button-prev:after,
    .swiper-container-rtl .swiper-button-next:after {
        content: '';
        background: url('../images/btn_prev.png') no-repeat;
        background-size: cover;
        background-position: center;
        width: 5.1vw;
        height: 5.346vw;
    }

    .footer-section .infomation {
        flex: 3;
        font-family 'Bai Jamjuree', sans-serif;
    }

    .footer-section {
        /* background-color: #105864; */
        position: relative;
        z-index: 4;
        padding: 1.5vw 0vw;
        background-image: linear-gradient(transparent, #3d5f54);
    }

    .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) {

    .desktop {
        display: none;
    }

    .mobile {
        display: flex;
    }

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

    .btn_menu {
        background: url('../images/btn_menu.png') no-repeat;
        width: 7vw;
        height: 7vw;
        margin-left: 1vw;
    }

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

    .btn_mb_nav li {
        width: 16vw;
        height: 5vw;
        margin: 0 6vw;
    }

    .btn_mb_nav li a {}

    .btn_mb_nav li img {
        width: 100%;
    }

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

    #downloadModal .modal-content {
        background: url(../images/bg_modal_download.png) no-repeat;
        background-size: cover;
        background-position: center;
        width: 64.26vw;
        height: 30.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: url(../images/back.png) no-repeat;
        background-size: cover;
        background-position: center;
        position: absolute;
        top: 1.5vw;
        right: -1vw;
        width: 9vw;
        height: 6vw;
    }

    .mb_menu {
        width: 100%;
        position: absolute;
        flex-direction: column;
        top: 14vw;
        transform: translateX(-100%);
        background-color: #003942;
        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: #4c767c;
    }

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

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

    .header_box {
        width: 65.711vw;
        height: 15.73vw;
        left: 50%;
        bottom: 10%;
        transform: translateX(-50%) scale(1.7);
        /* zoom: 1.7; */
        /* transform: scale(1.7); */
        /* bottom: -30px; */
    }

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

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

    .box_icon {
        width: 14vw;
        height: 14vw;
    }

    .box_apk {
        width: 14.523vw;
        height: 4.72vw;
    }

    .box_android {
        width: 14.523vw;
        height: 4.72vw;
    }

    .box_appstore {
        width: 14.523vw;
        height: 4.72vw;
    }

    .content {
        background: url('../images/bg_content_mb.jpg') no-repeat;
        width: 100%;
        height: 276.5vw;
        /* padding-top: 5vw; */
    }

    .ns_box {
        background: url('../images/tintuc_board_mb.png') no-repeat;
        width: 86.72vw;
        height: 96.43vw;
        margin: 0 auto;
        z-index: 2;
        transform: translateY(-4vw);
        padding-top: 6vw;
        flex-direction: column;
    }

    .ns_slide {
        width: 78.233vw;
        height: 43.755vw;
    }

    .news_slider {
        width: 77.1vw;
        height: 42.6vw;
    }

    .ns_news_board {
        width: 78.491vw;
        height: 41.755vw;
        margin-left: 0;
        margin-top: 2vw;
    }

    .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: 3vw;
        /* height: 5vw; */
        /* font-size: 2.5vw; */
        border-bottom: 0.2vw solid #A09C93;
        transition: all .3s;
        padding: 5px 0;
    }

    .ns_nb_content ul li .ns_nb_content_descr::before {
        content: "";
        background-size: cover;
        background-position: center;
        width: 1.5vw;
        height: 1.8vw;
        position: absolute;
        top: 1.4vw;
        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: 63vw;
        position: relative;
        padding-left: 2vw;
    }

    .ns_title {
        width: 47.23vw;
        height: 6.73vw;
        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;
        }
    }

    .btn_moreinfo{
        justify-content: flex-end !important;
        margin: 0.5vw 0;
    }
    
    .btn_moreinfo a{
        /* font-size: 2.2vw; */
        color: #424242;
    }

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

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

    .hp-list li {
        width: 12.19vw;
        height: 13.01vw;
        position: relative;
    }

    .hp-list li a {
        width: 12.19vw;
        height: 13.01vw;
        margin: 1vw 0;
    }

    .hp-list li.item-1.active a {
        width: 12.19vw;
        height: 13.01vw;
    }

    .hp-list li.item-1:hover a {
        width: 12.19vw;
        height: 13.01vw;
    }

    .hp-list li.item-2.active a {
        width: 12.19vw;
        height: 13.01vw;
    }

    .hp-list li.item-2:hover a {
        width: 12.19vw;
        height: 13.01vw;
    }

    .hp-list li.item-3.active a {
        width: 12.19vw;
        height: 13.01vw;
    }

    .hp-list li.item-3:hover a {
        width: 12.19vw;
        height: 13.01vw;
    }

    .hp-list li.item-4.active a {
        width: 12.19vw;
        height: 13.01vw;
    }

    .hp-list li.item-4:hover a {
        width: 12.19vw;
        height: 13.01vw;
    }

    .hp-list li.item-5.active a {
        width: 12.19vw;
        height: 13.01vw;
    }

    .hp-list li.item-5:hover a {
        width: 12.19vw;
        height: 13.01vw;
    }

    .hp-list li::after {
        content: "";
        position: absolute;
        background-size: cover;
        width: 0.4vw;
        height: 5vw;
        bottom: -2.8vw;
        left: 5.9vw;
    }

    .character_section {
        width: 100%;
        height: 80.239vw;
        position: relative;
        margin-top: 1vw;
    }

    .bg-mp {
        width: 53.17vw;
        top: 11.5vw;
        left: 24.4vw;
    }

    .persion-img {
        top: -31vw;
        left: 4vw;
        width: 56.202vw;
        animation: updown 1.5s infinite alternate linear;
    }

    .mp-tl {
        width: 16.655vw;
        height: 5vw;
        top: -16.7vw;
        right: 9.3vw;
    }

    .mp-tv {
        width: 16.655vw;
        height: 5vw;
        top: -9.7vw;
        right: 6.8vw;
    }

    .mp-dm {
        width: 16.655vw;
        height: 5vw;
        top: -16.7vw;
        right: 9.3vw;
    }

    .mp-5d {
        width: 16.655vw;
        height: 5vw;
        top: -9.7vw;
        right: 6.8vw;
    }

    .mp-mg {
        width: 16.655vw;
        height: 5vw;
        top: -3.2vw;
        right: 6.9vw;
    }

    .mp-bd {
        width: 16.655vw;
        height: 5vw;
        top: -3.2vw;
        right: 6.9vw;
    }

    .mp-nm {
        width: 16.655vw;
        height: 5vw;
        top: -16.7vw;
        right: 9.3vw;
    }

    .mp-ty {
        width: 16.655vw;
        height: 5vw;
        top: -9.7vw;
        right: 6.8vw;
    }

    .mp-hs {
        width: 16.655vw;
        height: 5vw;
        top: -3.2vw;
        right: 6.9vw;
    }
    
    .mp-td {
        width: 16.655vw;
        height: 5vw;
        top: -3.2vw;
        right: 6.9vw;
    }

    .mp-cb {
        width: 16.655vw;
        height: 5vw;
        top: -16.7vw;
        right: 9.3vw;
    }

    .mp-tn {
        width: 16.655vw;
        height: 5vw;
        top: -9.7vw;
        right: 6.8vw;
    }

    .mp-vd {
        width: 16.655vw;
        height: 5vw;
        top: -16.7vw;
        right: 9.3vw;
    }

    .mp-cl {
        width: 16.655vw;
        height: 5vw;
        top: -9.7vw;
        right: 6.8vw;
    }

    .mp-item p {
        text-align: center;
        bottom: -35.5vw;
        right: 1vw;
        /* font-size: 2.5vw; */
        font-family: 'Bai Jamjuree';
        font-style: italic;
        z-index: 3;
        margin-bottom: 1vw;
        display: none;
    }

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

    .ss_slider {
        width: 77.302vw;
        height: 38.592vw;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
        list-style: none;
        padding: 0;
        margin-top: 9.4vw;
    }

    .ss_slider .swiper-button-next,
    .swiper-button-prev {
        top: 65%;
    }

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

}

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