@import url("https://fonts.googleapis.com/css?family=Pirata+One:400|Oswald:300,400,500|Playfair+Display:500,700|IBM+Plex+Sans:400");
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap");

body {
    font-family: "Playfair Display", sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #000;
}

ul,
ol {
    padding: 0px;
    margin: 0px;
}

a:hover {
    text-decoration: none;
}

/*header*/

.header-root {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 84px;
    position: absolute;
    z-index: 3;
    background-color: #000000cc;
}

.header-root-detail {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.header {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.header-logo {
    width: 80px;
    height: 80px;
    display: flex;
    border-radius: 10px;
}

.header-logo-item {
    transition: all 0.3s;
    opacity: 1;
    animation: logo forwards 0.6s ease-in-out;
}

.header-logo-item:hover {
    margin-top: 5px;
    margin-right: 5px;
    filter: brightness(1.15);
    -webkit-filter: brightness(1.15);
}

.header-logo img {
    width: 80px;
    height: 80px;
    display: flex;
    border: 1px solid #ffffff;
    border-radius: 10px;
}

img {
    cursor: pointer;
}

.header-social {
    width: 196px;
    display: flex;
    flex-direction: column;
}

.header-social ul {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 15px;
    align-items: center;
}

.header-social ul li {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-social ul li a img {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-menu {
    width: calc(100% - 75px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-menu .header-menu-data {
    width: calc(100% - 205px);
    display: flex;
    font-size: 20px;
    width: 100%;
    display: flex;
    flex-direction: row;
    list-style: none;
    gap: 10px;
    align-items: center;
    margin: 0px;
    padding: 0px;
    justify-content: flex-start;
    gap: 24px;
}

.header-menu-data li a {
    width: 100%;
    display: flex;
    color: white;
    font-size: 18px;
}

.header-menu-data li a:hover {
    text-shadow: 0px 0px 24px #e2ce18, 0px 0px 24px #e2ce18;
}

/*Intro*/

.bg-intro {
    width: 100%;
    background: url(../images/bg/BG.jpg) top center no-repeat;
    background-size: 100% 100%;
    min-height: 1000px;
}

.intro-body .container {
    z-index: 2;
}

.bg-effect {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 1;
    top: 0px;
}

.bg-effect video {
    width: 100%;
    height: auto;
}

.intro-body-war {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    position: absolute;
    top: 100px;
    left: 0;
    z-index: 1;
}

.intro-body-war img {
    width: 229px;
}

.intro-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 84px;
}

.intro-body-root {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.intro-logo,
.intro-slogan,
.intro-10phai,
.intro-nap-the {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.intro-slogan img {
    width: 400px;
    cursor: pointer;
}

.intro-10phai img {
    width: 100%;
}

.intro-nap-the-root {
    width: 700px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.bg-menu-item-link {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.button-menu-item-detail {
    width: 50%;
    display: flex;
}

.button-nap {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-left: -52px;
}

.button-link {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 345px;
    padding-right: 5px;
    gap: 7px;
}

.img-kht2-nap-big,
.img-kht2-code-big {
    width: 228px;
    height: 176px;
}

.button-menu-item-detail-sub {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 7px;
}

.button-menu-item-detail-sub {
    width: 450px;
    height: 85px;
}

.button-menu-item-detail-sub a {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 220px;
    height: 85px;
}

.img-kht2-toolbar {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: -187px;
    /*z-index: 2;*/
}

.img-kht2-toolbar img {
    width: 100%;
}

.body-menu-link {
    width: 100%;
    display: flex;
    flex-direction: row;
    /*z-index: 2;*/
    position: relative;
    /*z-index: 3;*/
}

.intro-logo {
    width: 600px;
    height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

.logo-header-intro {
    width: 600px;
    height: 494px;
    position: absolute;
    z-index: 2;
}

.intro-slogan img {
    width: 640px;
    height: 360px;
    position: absolute;
    z-index: 1;
    margin-top: 115px;
}

.intro-nap-the {
    margin-top: 260px;
}

/*End Intro*/
.language-dropdown .dropbtn {
    background-color: #333;
    color: white;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.language-dropdown .dropbtn .flag-icon {
    width: 20px;
    height: 14px;
    margin-right: 5px;
}

.language-dropdown .dropdown-content {
    display: none;
    position: absolute;
    background-color: #333;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.language-dropdown .dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.language-dropdown .dropdown-content a .flag-icon {
    width: 20px;
    height: 14px;
    margin-right: 5px;
}

.language-dropdown .dropdown-content a:hover {
    background-color: #575757;
}

.language-dropdown .show {
    display: block;
}

.arrow.down {
    border: solid white;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    margin-left: 5px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

/* Show Language Selector on Mobile */
.language-selector-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

/*Special*/

.body-wrapper {
    width: 100%;
    background: url(../images/bg/BG.jpg) top center no-repeat;
    background-size: 100% 100%;
    min-height: 2008px;
    position: relative;
    z-index: 3;
}

.item-root {
    width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 50px;
}

.item-header {
    width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.item-header img {
    width: 720px;
    height: auto;
}

.item-body {
    width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    flex-direction: row;
}

.item-detail img {
    width: 762px;
    height: 428px;
    max-width: 100%;
    max-height: auto;
}

/*end*/

/*News*/

.swiper-news {
    width: 100%;
    height: 100%;
    padding: 0px 15px !important;
    padding-bottom: 30px !important;
}

.swiper-news .swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.new-items {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.item-new-nen {
    position: relative;
    width: 100%;
    height: 100%;
}

.new-item-date {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    width: 100%;
    display: flex;
}

.news-item-title {
    width: 100%;
    display: flex;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #ffffff;
    font-size: 16px;
}

.swiper-news .swiper-button-next {
    background: url("../images/icon/img-tarkan-slide-button-next.png") no-repeat
        center;
    background-size: 100% 100%;
    right: -1px;
    top: 41%;
}

.swiper-news .swiper-button-prev {
    background: url("../images/icon/img-tarkan-slide-button-frev.png") no-repeat
        center;
    background-size: 100% 100%;
    left: -1px;
    top: 41%;
}

.swiper-news .swiper-button-next:after,
.swiper-news .swiper-button-prev:after {
    font-size: 0;
    color: none;
    content: "";
}

.swiper-news .swiper-pagination-bullet {
    width: 35px;
    height: 35px;
    background: url("../images/icon/img-tarkan-pagination-unactive.png")
        no-repeat center;
    opacity: 1;
    background-size: 100%;
}

.swiper-news .swiper-pagination-bullet-active {
    width: 35px;
    height: 35px;
    background: url("../images/icon/img-tarkan-pagination-active.png") no-repeat
        center;
    transition: all 0.3s;
    animation: width 0.3s linear forwards;
    background-size: 100%;
}

/*End*/

/*Fea*/

.swiper-featured {
    width: 100%;
    height: 100%;
    padding-bottom: 50px !important;
}

.swiper-featured .swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.new-items-f {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
}

.items-img-f {
    width: calc(100% - 72px);
    position: absolute;
    margin-top: 9px;
    margin-left: 11px;
    height: calc(100% - 21px);
}

.item-new-nen-f {
    position: relative;
    width: 100%;
    height: 100%;
}

.swiper-featured .swiper-button-next {
    background: url("../images/icon/img-tarkan-slide-button-next.png") no-repeat
        center;
    background-size: 100% 100%;
    right: -1px;
    top: 44%;
}

.swiper-featured .swiper-button-prev {
    background: url("../images/icon/img-tarkan-slide-button-frev.png") no-repeat
        center;
    background-size: 100% 100%;
    left: -1px;
    top: 44%;
}

.swiper-featured .swiper-button-next:after,
.swiper-featured .swiper-button-prev:after {
    font-size: 0;
    color: none;
    content: "";
}

.swiper-featured .swiper-pagination-bullet {
    width: 35px;
    height: 35px;
    background: url("../images/icon/img-tarkan-pagination-unactive.png")
        no-repeat center;
    opacity: 1;
    background-size: 100%;
}

.swiper-featured .swiper-pagination-bullet-active {
    width: 35px;
    height: 35px;
    background: url("../images/icon/img-tarkan-pagination-active.png") no-repeat
        center;
    transition: all 0.3s;
    animation: width 0.3s linear forwards;
    background-size: 100%;
}

.swiper-featured .news-item-img {
    padding: 0px 25px;
}

/*end*/
.toggle-icon {
    position: fixed;
    width: 50px;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 9999;
}

/*Character*/

.item-root-character {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-top: 950px;
}

.item-root-character .item-character {
    display: flex;
    z-index: 10;
    margin-top: -250px;
}

.item-root-character .item-character img {
    width: 100%;
    cursor: pointer;
}

.item-character img.active {
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(252, 237, 105, 0.7);
}

.item-character img:hover {
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
}

.character-info {
    display: none;
    position: absolute;
    width: 100%;
}

.active-image {
    width: 1400px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    margin-top: -600px;
}

.info-text {
    font-size: 18px;
    color: #ffffff;
    margin-right: -550px;
}

.read-class-data {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    margin-top: -50px;
    margin-bottom: 50px;
}

.read-class-button {
    background-color: #294a56;
    color: #f2e7b6;
    border: none;
    font-weight: bold;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    z-index: 999;
    margin: auto;
}

.read-class-button:hover {
    background-color: #1c353d;
}

/*End*/

/*Modal Character*/

.modalt {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    top: 0;
    left: 0;
    z-index: 99;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.iframe_modal .wrapper0 {
    position: absolute;
    width: 1019px;
    height: 568px;
}

.iframe_modal .wrapper0 .bg {
    width: 100%;
    height: 100%;
    opacity: 0;
    background-size: 100% 100%;
}

.iframe_modal .wrapper .bg .video_bg {
    width: 273px;
    height: 166px;
    position: absolute;
    background: url("../images/character/video_main_01.png") no-repeat center;
    bottom: 110px;
    right: 180px;
    background-size: 100% 100%;
}

.wrapper .close_s {
    display: block;
    width: 50px;
    height: 52px;
    background: url("../images/logo/close_x.png") no-repeat center;
    background-size: 100%;
    position: absolute;
    top: 50px;
    right: 110px;
    z-index: 2;
}

.iframe_modal .wrapper .bg .video_bg video {
    width: 263px;
    height: 143px;
    position: absolute;
    bottom: 5px;
    left: 5px;
}

/*End*/

/*Footer*/

.footer {
    background: rgba(0, 0, 0, 1);
    padding: 30px 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.footer-body {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}

.footer-left {
    width: calc(100% - 250px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: white;
    font-family: "Oswald";
}

.footer-left .footer-title,
.footer-left .footer-content {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.footer-left .footer-title {
    font-size: 16px;
    font-weight: 500;
}

.footer-right {
    width: 215px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.footer-social {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.footer-right .footer-social .social-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.float-social {
    width: 42px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 490px;
    margin-left: 32px;
    gap: 10px;
}

.float-social .social-icons {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*.dieu-khoan {*/
/*    width: 120px;*/
/*    display: block;*/
/*    font-size: 20px;*/
/*    line-height: 78px;*/
/*    font-family: 'Noto sans', sans-serif;*/
/*    color: #478AFF;*/
/*    !*font-family: "Oswald";*!*/
/*    font-weight: 500;*/
/*    text-decoration: underline;*/
/*}*/
/* Up */
.dieu-khoan {
    width: 100px;
    display: block;
    font-size: 16px;
    line-height: 78px;
    font-family: "Noto sans", sans-serif;
    color: #478aff;
    /*font-family: "Oswald";*/
    font-weight: 500;
    text-decoration: underline;
    text-align: right;
}

.f-img {
    margin-top: 55px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*End*/

.show-pc {
    display: flex;
}

.show-mobile {
    display: none;
}

.header-menu-mobile {
    display: none;
}

.header-menu-mobile-view {
    display: none;
}

/*WAP*/

.float-wrapper {
    position: fixed;
    top: 50%;
    right: 10px;
    width: 259px;
    height: 573px;
    margin-top: -286.5px;
    background: url("../images/title/title-main.png") no-repeat center;
    z-index: 4;
    opacity: 2;
    display: block;
}

.float-wrapper .float-content {
    width: 179px;
    height: 337px;
    position: absolute;
    top: 30px;
    left: 28.5px;
}

.float-wrapper .float-content a {
    display: block;
    width: 202px;
    height: 78px;
    margin: 8px auto 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/*end*/

/*Modal*/

.modal-dialog-centered {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    min-height: calc(100% - 1rem);
}

.modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    box-shadow: none;
    background: no-repeat;
    border: none;
    padding: 0px;
    margin: 0px;
    width: 100%;
}

.iframe-videos {
    width: 100%;
    height: 350px;
}

.modal-footer,
.modal-header {
    border-bottom: 0px;
    border: 0px;
    padding: 0px;
    text-align: right;
}

.btn-close-videos {
    background: url(../images/close.png) no-repeat center;
    color: rgba(255, 0, 0, 0) !important;
}

.items-images-bg {
    background: url(../images/news/news-main.png) top center no-repeat;
    background-size: 100% 100%;
}

.swiper-border {
    position: absolute;
    z-index: 3;
    width: 47.4vw;
    height: 26.67vw;
    background-image: url(../images/news/news-main.png);
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
}

/*end*/

@media screen and (max-width: 1920px) {
    .float-wrapper {
        zoom: 0.85;
    }

    .iframe_modal .wrapper0 {
        width: 1019px;
        height: 568px;
    }

    .bg-intro {
        min-height: 935px;
    }

    /*.news-item-text {*/
    /*    margin-left: -4px;*/
    /*}*/
}

@media screen and (max-width: 1600px) {
    .bg-intro {
        min-height: 678px;
    }

    .float-wrapper {
        zoom: 0.65;
    }

    .item-root-character .item-character {
        margin-top: -350px;
    }

    .active-image {
        width: 1200px;
    }

    .intro-body {
        padding-top: 40px;
    }
}

@media screen and (max-width: 1440px) {
    .intro-body {
        padding-top: 80px;
    }
}

@media screen and (max-width: 1368px) {
    .item-root-character {
        margin-top: 650px;
    }

    .item-root-character .item-character {
        margin-top: -200px;
    }

    .active-image {
        width: 900px;
        margin-top: -400px;
    }

    .item-root-character .item-character {
        width: 10%;
    }
}

@media screen and (max-width: 1360px) {
}

@media screen and (max-width: 1366px) {
    .float-wrapper {
        zoom: 0.55;
    }

    .bg-intro {
        min-height: 678px;
    }

    .logo-header-intro {
        width: 360px;
        height: auto;
    }

    .intro-logo {
        margin-top: 0px;
        height: 220px;
    }

    .intro-slogan img {
        width: 400px;
        height: 225px;
        margin-top: 95px;
    }

    .intro-nap-the {
        margin-top: 200px;
    }
}

@media screen and (max-width: 1280px) {
}

@media screen and (max-width: 1180px) {
    .active-image {
        width: 850px;
    }

    .bg-intro {
        min-height: 0;
    }
}

@media screen and (max-width: 1152px) {
    .intro-body {
        padding-top: 70px;
    }
}

@media screen and (max-width: 1024px) {
    .footer-social {
        zoom: 0.7;
    }

    .bg-intro {
        min-height: 0;
    }

    .intro-logo {
        margin-top: 0px;
    }

    .container {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .header-menu-data li a {
        font-size: 15px;
    }

    .iframe_modal .wrapper0 {
        width: 800px;
        height: 400px;
    }
}

@media screen and (max-width: 932px) {
    .item-root-character {
        margin-top: 550px;
    }

    .intro-body {
        padding-top: 67px;
    }

    .item-root-character .item-character {
        margin-top: -200px;
    }

    .active-image {
        width: 750px;
        margin-top: -350px;
    }
}

@media screen and (max-width: 915px) {
    .intro-body {
        padding-top: 50px;
    }
}

@media screen and (max-width: 912px) {
}

@media screen and (max-width: 896px) {
    .items-img-f {
        width: calc(100% - 70px);
        position: absolute;
        margin-top: 10px;
        margin-left: 10px;
        height: calc(100% - 19px);
    }

    .intro-body {
        padding-top: 40px;
    }
}

@media screen and (max-width: 882px) {
}

@media screen and (max-width: 853px) {
    .dieu-khoan {
        /*display: none;*/
        line-height: 30px;
        font-size: 18px;
    }

    .footer-social {
        gap: 5px;
    }
}

@media screen and (max-width: 844px) {
}

@media screen and (max-width: 820px) {
}

@media screen and (max-width: 812px) {
}

@media screen and (max-width: 800px) {
    .show-pc {
        display: none;
    }

    .show-mobile {
        display: flex;
    }

    .body-wrapper {
        min-height: 1000px;
    }

    .header-menu {
        display: none;
    }

    .container {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .header-menu-mobile {
        display: flex;
        width: calc(100% - 110px);
        height: 62px;
        justify-content: flex-end;
        flex-direction: row;
        justify-content: center;
    }

    .menu-mobile-items {
        display: flex;
        width: 100%;
        justify-content: flex-end;
        gap: 10px;
        flex-direction: row;
        align-items: center;
    }

    .header-logo {
        margin-top: 55px;
    }

    .header-menu-mobile-view {
        display: none;
        width: 100%;
        flex-direction: column;
        background: #0d0d0dba;
        position: absolute;
        padding: 0px 15px;
    }

    .header-menu-mobile-view.active {
        display: flex;
    }

    .item-m-menu-icon {
        display: flex;
        width: 100%;
        flex-direction: row;
        justify-content: flex-end;
        gap: 10px;
    }

    .list-menu-m-item {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 15px;
    }

    .m-item-support-list,
    .m-item-support-list ul,
    .m-item-support-list ul li {
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 5px;
        display: flex;
        text-align: center;
    }

    .m-item-support-list ul li a {
        padding: 10px 0px;
        display: flex;
        width: 100%;
        flex-direction: column;
        font-family: "Playfair Display";
        font-weight: bold;
        cursor: pointer;
        color: white;
        text-align: center;
    }

    .m-item-support-list ul li.line {
        height: 1px;
        background: url(../images/icon/divider.png) top center no-repeat;
        background-size: 100% 100%;
    }

    .m-item-support-list ul li a:hover {
        text-shadow: 0px 0px 24px #e2ce18, 0px 0px 24px #e2ce18;
    }

    .m-item-support {
        padding: 10px 0px;
    }

    .liner {
        width: 60%;
        height: 1px;
        border-bottom: 1px solid #626262;
    }

    .m-menu-icon-item,
    .m-menu-icon-item-tai {
        display: flex;
        cursor: pointer;
        width: 104px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .m-menu-icon-item.active {
        display: none;
    }

    .m-menu-icon-item img {
        width: 40px;
    }

    /* .m-menu-icon-item-tai img {
        width: 104px;
    } */

    .bg-intro {
        background: url(../images/bg/img-tarkan-topbanner-mb.jpg) top center
            no-repeat;
        min-height: 634px;
        background-size: 100% 100%;
    }

    .intro-logo {
        width: 100%;
        margin-top: 100px;
        height: auto;
        height: 220px;
    }

    .logo-header-intro {
        width: 620px;
        height: auto;
    }

    .intro-slogan img {
        zoom: 2;
        margin-top: 550px;
    }

    .button-menu-item-detail {
        width: 100%;
        margin-top: 600px;
    }

    .intro-nap-the-root {
        width: 100%;
    }

    .button-nap {
        justify-content: center;
    }

    .img-kht2-nap-big,
    .img-kht2-code-big {
        width: 150%;
        height: auto;
    }

    /*.item-root {
        margin-top: 0px;
    }*/
    .item-header img {
        width: 100%;
        height: auto;
    }

    .item-header-en img {
        width: 100%;
        height: auto;
    }

    .item-root-special {
        flex-direction: column;
        gap: 15px;
    }

    .footer-body {
        flex-direction: column;
        gap: 10px;
    }

    .footer-left {
        width: 100%;
    }

    .footer-right .footer-social .social-item {
        align-items: flex-start;
    }

    .iframe_modal .wrapper0 {
        width: 360px;
        height: 180px;
    }

    .iframe_modal .wrapper .bg .video_bg {
        width: 115px;
        height: 73px;
        position: absolute;
        bottom: 30px;
        right: 45px;
    }

    .iframe_modal .wrapper .bg .video_bg video {
        width: 106px;
        height: 67px;
        position: absolute;
        bottom: 0px;
        left: 4px;
    }

    .wrapper .close_s {
        display: block;
        width: 50px;
        height: 52px;
        background-size: 50%;
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 2;
    }

    .item-root-character {
        display: grid;
        grid-template-columns: auto auto auto;
        gap: 10px;
    }

    .item-root-character .item-character {
        width: 100%;
        text-align: center;
    }

    .intro-body .container {
        padding-left: 5px;
        padding-right: 5px;
    }

    .intro-slogan-m {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 10px;
        justify-content: center;
        align-items: center;
        margin-top: 200px;
    }

    .m-slogan-play {
        width: 120px;
    }

    .m-slogan {
        width: 100%;
    }

    .item-detail img {
        height: auto;
    }

    .swiper-news .swiper-button-prev {
        left: -5px;
        top: 40%;
    }

    .swiper-news .swiper-button-next {
        right: -5px;
        top: 40%;
    }

    .items-img-f {
        width: calc(100% - 65px);
        position: absolute;
        margin-top: 8px;
        margin-left: 7px;
        height: calc(100% - 15px);
    }

    .m-item-support-list {
        display: none;
    }

    .m-item-support-list.active {
        display: flex;
    }

    .footer-social {
        zoom: 0.9;
    }

    /*Character Mobile*/
    .mb-root-character {
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 10px;
        justify-content: center;
        align-items: center;
        margin-top: 500px;
    }

    .mb-root-character .mb-character {
        display: flex;
        z-index: 10;
    }

    .mb-root-character .mb-character img {
        width: 100%;
        cursor: pointer;
    }

    .mb-character img.active {
        border-radius: 50%;
        box-shadow: 0 0 20px rgba(252, 237, 105, 0.7);
    }

    .mb-character img:hover {
        border-radius: 50%;
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
    }

    .character-info-mb {
        display: none;
        position: absolute;
        width: 100%;
    }

    .f-img {
        display: none;
    }

    .active-image-mb {
        display: none;
        width: 800px;
        height: auto;
        z-index: -1;
        margin-top: -600px;
    }

    .language-selector-mobile {
        display: flex;
    }

    .dropbtn {
        display: flex;
        align-items: center;
        background-color: transparent;
        border: none;
        color: white;
        cursor: pointer;
        font-size: 16px;
    }

    .dropbtn img {
        width: 20px;
        margin-right: 8px;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content a:hover {
        background-color: #f1f1f1;
    }

    .language-dropdown:hover .dropdown-content {
        display: block;
    }

    .language-dropdown {
        position: relative;
        display: inline-block;
    }

    .arrow {
        margin-left: 5px;
    }

    /*End review Mobile*/
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
    html,
    body {
        zoom: 90% !important;
    }
}

@media screen and (max-width: 768px) {
    .intro-slogan img {
        zoom: 1.8;
        margin-top: 550px;
    }

    .button-menu-item-detail {
        width: 100%;
        margin-top: 650px;
    }

    .intro-nap-the {
        margin-top: 40px;
    }

    .active-image-mb {
        width: 750px;
    }
}

@media screen and (max-width: 740px) {
    .active-image-mb {
        width: 720px;
    }
}

@media screen and (max-width: 720px) {
    .active-image-mb {
        width: 700px;
    }
}

@media screen and (max-width: 667px) {
    .intro-logo {
        margin-top: 50px;
    }

    .intro-slogan img {
        zoom: 1.6;
        margin-top: 550px;
    }

    .button-menu-item-detail {
        width: 100%;
        margin-top: 600px;
    }

    .item-root {
        margin-top: 30px;
    }

    .active-image-mb {
        width: 650px;
    }
}

@media screen and (max-width: 653px) {
}

@media screen and (max-width: 540px) {
    .intro-logo {
        zoom: 0.8;
    }

    .intro-slogan img {
        zoom: 1.3;
        margin-top: 550px;
    }

    .button-menu-item-detail {
        width: 100%;
        margin-top: 500px;
    }

    .items-img-f {
        width: calc(100% - 61px);
        position: absolute;
        margin-top: 6px;
        margin-left: 5px;
        height: calc(100% - 11px);
    }

    .swiper-news .swiper-button-prev {
        left: -5px;
        top: 35%;
    }

    .swiper-news .swiper-button-next {
        right: -5px;
        top: 35%;
    }

    .active-image-mb {
        width: 540px;
    }
}

@media screen and (max-width: 480px) {
    .intro-logo {
        zoom: 0.7;
    }

    .logo-header-intro {
        width: 550px;
        margin-top: 150px;
    }

    .intro-slogan img {
        zoom: 1.2;
        margin-top: 600px;
    }

    .img-kht2-nap-big,
    .img-kht2-code-big {
        margin-top: -20px;
    }

    .mb-root-character {
        margin-top: 300px;
    }

    .active-image-mb {
        width: 470px;
        margin-top: -350px;
    }

    .swiper-featured .swiper-button-next {
        top: 38%;
    }

    .swiper-featured .swiper-button-prev {
        top: 38%;
    }
}

@media screen and (max-width: 430px) {
    .intro-logo {
        zoom: 0.5;
    }

    .intro-slogan img {
        zoom: 1;
        margin-top: 600px;
    }

    .button-menu-item-detail {
        zoom: 0.8;
    }

    .items-img-f {
        width: calc(100% - 59px);
        position: absolute;
        margin-top: 4px;
        margin-left: 5px;
        height: calc(100% - 8px);
    }

    .active-image-mb {
        width: 430px;
    }
}

@media screen and (max-width: 414px) {
    .items-img-f {
        width: calc(100% - 58px);
        position: absolute;
        margin-top: 4px;
        margin-left: 4px;
        height: calc(100% - 8px);
    }

    .active-image-mb {
        width: 400px;
    }
}

@media screen and (max-width: 412px) {
}

@media screen and (max-width: 390px) {
    .intro-logo {
        zoom: 0.4;
    }

    .logo-header-intro {
        margin-top: 200px;
    }

    .items-img-f {
        width: calc(100% - 57px);
        position: absolute;
        margin-top: 4px;
        margin-left: 3px;
        height: calc(100% - 7px);
    }

    .button-menu-item-detail {
        margin-top: 480px;
    }

    /*.news-item-text {*/
    /*    width: 317px;*/
    /*    margin-top: -78px;*/
    /*}*/
    .active-image-mb {
        width: 450px;
    }

    .img-kht2-nap-big,
    .img-kht2-code-big {
        width: 100%;
        height: auto;
        margin-left: 50px;
    }

    .swiper-news .swiper-button-prev {
        left: -5px;
        top: 33%;
    }

    .swiper-news .swiper-button-next {
        right: -5px;
        top: 33%;
    }

    .footer-social {
        zoom: 0.8;
    }

    .active-image-mb {
        width: 380px;
    }
}

@media screen and (max-width: 375px) {
    .button-menu-item-detail {
        margin-top: 440px;
    }

    .intro-slogan img {
        zoom: 0.9;
    }

    .active-image-mb {
        width: 370px;
    }
}

@media screen and (max-width: 360px) {
    .items-img-f {
        width: calc(100% - 56px);
        position: absolute;
        margin-top: 3px;
        margin-left: 3px;
        height: calc(100% - 6px);
    }

    .active-image-mb {
        width: 420px;
    }

    .swiper-news .swiper-button-prev {
        left: -5px;
        top: 32%;
    }

    .swiper-news .swiper-button-next {
        right: -5px;
        top: 32%;
    }

    .swiper-featured .swiper-button-next {
        top: 35%;
    }

    .swiper-featured .swiper-button-prev {
        top: 35%;
    }

    .active-image-mb {
        width: 350px;
    }
}

@media screen and (max-width: 320px) {
    .button-menu-item-detail {
        margin-top: 380px;
    }

    .intro-slogan img {
        zoom: 0.8;
    }

    .active-image-mb {
        width: 300px;
        margin-top: -410px;
    }

    .mb-root-character .mb-character {
        margin-top: -150px;
    }
}

@media screen and (max-width: 280px) {
    .intro-slogan img {
        zoom: 0.7;
    }

    .items-img-f {
        width: calc(100% - 54px);
        position: absolute;
        margin-top: 2px;
        margin-left: 2px;
        height: calc(100% - 4px);
    }

    .new-item-date {
        font-size: 10px;
    }

    .news-item-title {
        font-size: 12px;
    }

    .active-image-mb {
        width: 270px;
    }

    .footer-social {
        zoom: 0.8;
    }
}

/* Hover */
.img-kht2-nap-big,
.img-kht2-code-big,
.appstore,
.google,
.pc,
.apk,
.btn-float,
.social-item,
.news-item-img,
.float {
    transition: filter 0.3s ease;
}

.img-kht2-nap-big:hover,
.img-kht2-code-big:hover,
.appstore:hover,
.google:hover,
.pc:hover,
.apk:hover,
.btn-float:hover,
.social-item:hover,
.news-item-img:hover,
.float:hover {
    filter: brightness(1.2);
}

.post-tag {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.post-tag .tag {
    background: rgba(130, 35, 38, 0.1);
    border-radius: 25px;
    color: #822326;
    cursor: pointer;
    display: flex;
    font-size: 15px;
    font-weight: 400;
    padding: 10px;
    text-align: center;
}

.post-tag .tag a {
    color: #a4262a;
    font-size: 15px;
}

.news-item-img {
    width: 100%;
    height: 100%;
    overflow: hidden;
    filter: brightness(1);
}

.items-img {
    width: calc(100% - 8px);
    position: absolute;
    margin-top: 4px;
    margin-left: 3px;
    border-radius: 4px;
}

.items-images-bg1 {
    /*background: url(../images/news/news-main.png) top center no-repeat;*/
    /*background-size: 100% 100%;*/
    /*position: absolute;*/
    /*top: 1px;*/
    /*left: 1px;*/
    /*width: 99%;*/
    /*height: 99%;*/
    /*padding: 5px;*/
    /*border-radius: 15px;*/
    /*z-index: 0;*/
}

/*.item-new-nen1 {*/
/*    !*background: url(../images/news/news-main.png) top center no-repeat;*!*/
/*    !*background-size: 100% 100%;*!*/
/*    !*position: relative;*!*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    !*z-index: 10000;*!*/
/*}*/

/*.item-new-nen1::before {*/
/*    content: url(../images/news/news-main.png);*/
/*    background-size: 100% 100%;*/
/*}*/

.news-item-text {
    padding-left: 20px;
    background: #222121cf;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: calc(100%);
    justify-content: center;
    align-items: flex-start;
    position: absolute;
    bottom: 1px;
    left: 0;
}

.read-class-data {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 50px;
}

.swiper-news .swiper-button-next {
    top: 30%;
    right: -5px;
}

.swiper-news .swiper-button-prev {
    top: 30%;
    left: -5px;
}

.news-item-title {
    max-width: 90%;
}

.news-item-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ffffff;
    font-size: 16px;
    white-space: unset;
    width: unset;
}

.intro-nap-the-new {
    margin-top: 25px;
}

.bg-intro-event .event-container {
    text-align: center;
}

.bg-intro-event .event-container .button-event {
    -webkit-animation: glow 1s ease-in-out infinite alternate;
    -moz-animation: glow 1s ease-in-out infinite alternate;
    animation: glow 0.5s ease-in-out infinite alternate;
    animation-name: glow-yellow;
}

.bg-intro-event .event-container .button-event .image-button {
    width: 100%;
}

.bg-intro-event .button-menu-item-detail {
    margin-top: unset !important;
}

.bg-intro-event {
    min-height: unset !important;
}

.bg-intro-event .event-container {
    max-width: 60%;
}

@media screen and (max-width: 768px) {
    .bg-intro-event .event-container {
        max-width: 80%;
    }
}

.glow-yellow {
    -webkit-animation: glow 1s ease-in-out infinite alternate,
        glow 0.5s ease-in-out infinite alternate;
    -moz-animation: glow 1s ease-in-out infinite alternate,
        glow 0.5s ease-in-out infinite alternate;
    animation: glow 0.5s ease-in-out infinite alternate,
        glow 0.5s ease-in-out infinite alternate;
    animation-name: glow-yellow, brightness;
}

@keyframes glow-yellow {
    from {
        filter: drop-shadow(0 0 2px #ffee5b) drop-shadow(0 0 10px #fcf084)
            drop-shadow(0 0 20px #fcf084) drop-shadow(0 0 30px #fcf084);
    }

    to {
        filter: drop-shadow(0 0 10px #ffee5b) drop-shadow(0 0 20px #fcf084)
            drop-shadow(0 0 30px #fcf084) drop-shadow(0 0 40px #fcf084);
    }
}

@keyframes brightness {
    from {
        filter: brightness(1);
    }

    to {
        filter: brightness(1.75);
    }
}

.bg-intro-event {
    position: relative;
}

.bg-intro-event .intro-body {
    position: absolute;
    bottom: 0;
}