@import url('fonts/fonts.css');
body {
    font-family: 'Roboto Condensed', sans-serif;
    background: url(images/bg_body.png) no-repeat center center/cover;
    height: 1000px;
    min-height: 1000px;
}
*{
    outline: none;
    box-sizing: border-box;
}
.wrapper-bg{
    background: url(images/bg_body_inner.png) no-repeat top center;
}
.uk-container {
    max-width: 1152px;
}
.headerPC {
    padding: 10px 0;
}
.main-header a {
    padding: 0 35px;
    font-size: 20px;
    color: #1a1a1a;
    display: flex;
    align-items: flex-end;
    line-height: 18px;
}
.main-header a img{
    margin-right: 6px;
}
.main-header a:hover{
    color: #febd52;
    text-decoration: none;
}
.logo {
    position: absolute;
    top: 17px;
    right: 27px;
    z-index: 99999999;
}
main#site-main {
    padding-top: 26px;
}
.main-slider-inner {
    max-width: 961px;
    margin: auto;
    padding: 14px;
    position: relative;
    background: url(images/slider_bg.png) no-repeat center center;
    background-size: 100% 100%;
    box-sizing: border-box;
}
img.main-slider-before {
    position: absolute;
    top: -14px;
    left: -57px;
    z-index: 333;
}
img.main-slider-after {
    position: absolute;
    bottom: -26px;
    right: -74px;
    z-index: 333;
}
.main-slider ul.slick-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 4444;
    list-style: none;
    padding: 0;
    margin: 0;
}
.main-slider ul.slick-dots li{
    margin: 0 20px;
}
.main-slider ul.slick-dots li button{
    width: 27px;
    height: 27px;
    font-size: 0;
    background: url(images/dot.png) no-repeat center center/contain;
    padding: 0;
    border: none;
    cursor: pointer;
}
.main-slider ul.slick-dots li.slick-active button{
    background: url(images/dot_hover.png) no-repeat center center/contain;
}
img.core-values__arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}
.core-values__arrow--left{
    left: -84px;
}
.core-values__arrow--right{
    right: -84px;
}
#thele{
    margin-top: 25px;
}
.thele-inner{
    max-width: 1115px;
    margin: auto;
    /*background: url(images/bg_thele.png) no-repeat center center;*/
    /*background-size: 100% 100%;*/
    position: relative;
}
.thele-inner:before{
    content: '';
    display: inline-block;
    width: 1115px;
    max-width: 100%;
    height: 135px;
    background: url(images/bg_thele.png) no-repeat center center;
    background-size: 100% 100%;
    position: absolute;
    top: 18px;
    left: 0;
}
.thele-inner .uk-flex{
    position: relative;
    z-index: 333;
    padding: 0 105px;
}
.btn-thele{
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 4444;
}
.thele-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.thele-item-thumb {
    position: relative;
}
.thele-item-thumb img:not(.thele_bg_item){
    position: absolute;
    left: var(--left);
    top: var(--top);
}
@keyframes xoayvong {
    from{
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
    }
    to{
        -webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -o-transform:rotate(360deg);
    }
}
.thele_bg_item{
    animation: xoayvong 7s linear 0s infinite;
    -webkit-animation: xoayvong 7s linear 0s infinite;
    -moz-animation: xoayvong 7s linear 0s infinite;
    -o-animation: xoayvong 7s linear 0s infinite; 
}
.thele-baodanh-button{
    position: relative;
}
.bg_button_baodanh{
    animation: xoayvong 7s linear 0s infinite;
    -webkit-animation: xoayvong 7s linear 0s infinite;
    -moz-animation: xoayvong 7s linear 0s infinite;
    -o-animation: xoayvong 7s linear 0s infinite; 
}
.text_button_baodanh{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.thele-item-tit{
    color: #FFF;
    font-size: 18px;
    letter-spacing: -0.01em;
    margin: 4px 0 0;
}
.hf1 img{
    transition: all .2s ease;
}
.hf1:hover img{
    filter: brightness(120%);
}
.hf2 img{
    transition: all .2s ease;
}
.hf2:hover img{
    filter: brightness(110%);
}
#baodanh_total{
    margin-top: 9px;
    margin-bottom: 20px;
}
#baodanh_total h4{
    font-weight: bold;
    font-size: 28px;
    line-height: 37px;
    color: #997757;
}
#baodanh_total h4 span{
    font-size: 37px;
    color: #ad3429;
}
.character-inner{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 110px;
    padding-right: 55px;
    background: url(images/bg_char.png) no-repeat center center;
    background-size: 100% 100%;
        display: flex;
    justify-content: space-between;
}
.character-left{
    width: calc(100% - 490px);
    max-width: 430px;
}
.character-right{
    width: 490px;
}
.character-left-row-top{
    margin-bottom: 5px;
}
.uk-modal.uk-open{
    z-index: 6666;
    background: rgba(0,0,0,.91);
}
.uk-modal-dialog{
    background: #e0ebed;
    border-radius: 10px;
    width: 100%;
    max-width: 959px !important;
    border: 2px solid #96bfdd;
}
.uk-modal-dialog h3{
    font-weight: bold;
    font-size: 30px;
    color: #3b3b3b;
    margin-bottom: 36px;
}
.uk-modal-dialog p{
    font-size: 32px;
    color: #3b3b3b;
    margin-bottom: 20px;
}
.uk-modal-dialog p b{
    color: #694c2d;
}
.uk-tooltip{
    width: 400px;
    max-width: 400px;
    background: #e0ebed;
    border-radius: 10px;
    border: 2px solid #96bfdd;
    text-align: center;
}
.uk-tooltip-inner h3{
    font-weight: bold;
    font-size: 28px;
    color: #3b3b3b;
    margin-bottom: 10px;
}
.uk-tooltip-inner ul{
    list-style: none;
    margin-top: 0;
}
.uk-tooltip-inner ul li{
    font-size: 25px;
    line-height: 27px;
    color: #3b3b3b;
    margin-bottom: 5px;
}
.thele-item{
    cursor: pointer;
}
#fixed-nav{
    position: fixed;
    top: 250px;
    right: 90px;
    width: 149px;
    height: 359px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url(images/bg_nav_fixed.png) no-repeat center center/contain;
    padding-top: 20px;
    z-index: 5555;
}
#fixed-nav a{
    margin-bottom: 5px;
}
#fixed-nav .download_apk{
    margin-bottom: 20px;
}
@media (max-width:  1100px){
    html,body{
        overflow-x: hidden;
    }
    #fixed-nav{
        display: none !important;
    }
    .uk-container {
        padding-left: 0px;
        padding-right: 0px;
    }
    .core-values__arrow--right {
        right: 0;
    }
    .core-values__arrow--left {
        left: 0;
    }
    /*.main-slider-wrap{
        display: none;
    }*/
    .logo{
        top: 110px;
        right: 50%;
        transform: translateX(50%);
    }
    main#site-main {
        padding-top: 120px;
    }
    .headerPC{
        display: none;
    }
    .headerMB{
        display: flex !important;
        padding: 0 18px;
        height: 102px;
    }
    .btn_humburgur_close {
        display: none;
    }
    span.menu-humburgur-icon img {
        transition: all .2s ease;
    }
    #header {
        position: relative;
    }
    .menu-main-moile {
        position: absolute;
        top: 100%;
        width: 100%;
        background: rgba(0, 0, 0, 0.93);
        z-index: 222222222;
        padding: 25px 0;
    }
    span.menu-humburgur-icon.open .btn_humburgur_normal {
        display: none;
    }
    span.menu-humburgur-icon.open .btn_humburgur_close {
        display: block;
    }
    a.app_icon {
        position: relative;
        top: 18px;
        z-index: 222222223;
        display: block;
    }
    a.button_account_mb {
        margin-left: 10px;
        margin-right: 25px;
    }
    .menu-main-moile-content ul{
        list-style: none;
        padding-left: 0;
    }
    .menu-main-moile-content li a{
        color: #e0effe;
        font-size: 25px;
        line-height: 53px;
    }
    #thele,#baodanh_total,#character{
        display: none;
    }
    #characterMB{
        display: block !important;
        padding-left: 18px;
        padding-right: 18px;
        
    }
    .characterMB-inner{
        padding: 7px;
        background: rgba(255, 255, 255, 0.4);
        max-width: 720px;
            margin: auto;
    }
    .main-slider-wrap {
        padding-bottom: 95px;
    }
    .characterMB-tit {
        margin-bottom: 15px;
    }
    .characterMB-thumb-slider-item {
        padding: 0 7px;
        filter: grayscale(1);
    }
    .characterMB-thumb-slider {
        margin: 0 -7px 7px;
    }
    .characterMB-thumb-slider-item.slick-current.slick-active{
         filter: none;
    }
    #baodanhMB{
        display: block !important;
        padding-top: 25px;
    }
    /*a.btn_thele_mb {
        margin-left: 45px;
        margin-right: 30px;
    }*/
    .baodanhMB-inner{
        position: relative;
        max-width: 750px;
        margin: auto;
        padding-left: 45px;
            padding-right: 50px;
    }
    .baodanhMB-inner .uk-flex {
        position: relative;
    }
    .baodanhMB-inner:before {
        content: '';
        display: inline-block;
        width: 100%;
        max-width: 750px;
        height: 134px;
        background: url(images/bg_baodanh_mb.png) no-repeat center center;
        background-size: 100% 100%;
        position: absolute;
        top: 33px;
        left: 50%;
        transform: translateX(-50%);
    }
    .baodanhMB-count{
        text-align: center;
        margin-top: 30px;
    }
    a.btn_thele_mb {
        margin-top: 30px;
    }
    .baodanhMB-count p {
        font-size: 28px;
        color: #FFF;
        line-height: 27px;
        margin-bottom: 8px;
    }
    .baodanhMB-count p span{
        font-size: 37px;
        color: #ad3429;
        font-weight: bold;
    }
    .baodanhMB-count h4{
        font-size: 22px;
        line-height: 27px;
        color: #FFF;
        margin: 0;
    }
    .baodanhMB-count h4 span{
        text-decoration: underline;
    }
    .uk-modal-dialog{
        max-width: 730px;
    }
    .uk-tooltip-inner h3{
        font-size: 37px;
    }
    .uk-tooltip-inner ul li{
        font-size: 33px;
    }
    .uk-tooltip{
        width: 525px;
            max-width: 525px;
    }
    body{
        height: var(--window-height);
        min-height: var(--window-height);
    }
    .characterMB-thumb-slider{
        padding: 0 100px;
    }
    .characterMB-thumb-slider .slick-arrow {
        font-size: 0;
        border: none;
        outline: none;
        width: 74px;
        height: 74px;
        background: url(images/icon_prev.png) no-repeat center center/contain;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .characterMB-thumb-slider button.slick-prev.slick-arrow{
        left: 0;
    }
    .characterMB-thumb-slider button.slick-next.slick-arrow{
        right: 0;
        background: url(images/icon_next.png) no-repeat center center/contain;
    }
}
.show-mb{
    display: none;
}
@media (max-width:  750px){
    a.button_account_mb {
        margin-left: 1.333vw;
        margin-right: 3.333vw;
    }
    .menu-main-moile{
        padding: 3.333vw 0;
    }
    .headerMB{
        padding: 0 2.400vw;
        height: 13.600vw;
    }
    .menu-humburgur-icon img{
        max-width: 9.067vw;
    }
    .button_account_mb img,.button_download_mb img{
        max-width: 26.400vw;
    }
    .app_icon img{
        max-width: 16.133vw;
    }
    main#site-main {
        padding-top: 16vw;
    }
    a.app_icon{
        top: 2.400vw;
    }
    .logo {
        top: 14.667vw;
    }
    .logo img{
        max-width: 41.333vw;
    }
    .menu-main-moile-content li a{
        color: #e0effe;
        font-size: 3.333vw;
        line-height: 7.067vw;
    }
    .show-mb{
        display: inline-block;
    }
    .hide-mb{
        display: none;
    }
    img.main-slider-after{
        right: 0;
        bottom: -3.200vw;
        max-width: 76.267vw;
    }
    img.main-slider-before{
        left: 0;
        top: -1.467vw;
        max-width: 22.133vw;
    }
    img.core-values__arrow{
        max-width: 9.867vw;
    }
    .core-values__arrow--left {
        left: 1.467vw;
    }
    .core-values__arrow--right {
        right: 1.467vw;
    }
    .main-slider-wrap {
        padding-bottom: 12.667vw;
    }
    .main-slider ul.slick-dots{
        bottom: -10.667vw;
    }
    .main-slider ul.slick-dots li button{
        width: 4.267vw;
        height: 4.267vw;
        background-image: url(images/dot_mb.png);
    }
    .main-slider ul.slick-dots li.slick-active button{
        width: 5.200vw;
        height: 5.200vw;
        background-image: url(images/dot_hover_mb.png);
    }
    .main-slider ul.slick-dots li {
        margin: 0 1.867vw;
    }
    .baodanhMB-inner{
        padding-left: 6vw;
        padding-right: 6.667vw;
    }
    img.bg_button_baodanh {
        max-width: 22vw;
    }
    .text_button_baodanh{
        max-width: 10.667vw;
    }
    .btn_thele_mb img{
        max-width: 29.200vw;
    }
    a.btn_thele_mb,.baodanhMB-count {
        margin-top: 4vw;
    }
    .baodanhMB-inner:before{
        height: 17.867vw;
        top: 4.400vw;
    }
    .baodanhMB-count p span{
        font-size: 4.933vw;
    }
    .baodanhMB-count p {
        font-size: 3.733vw;
        color: #FFF;
        line-height: 3.600vw;
        margin-bottom: 1.067vw;
    }

    .baodanhMB-count h4{
        font-size: 2.933vw;
        line-height: 3.600vw;
    }
    .uk-tooltip-inner h3 {
        font-size: 4.933vw;
    }
    .uk-tooltip-inner ul li {
        font-size: 4.400vw;
    }
    .uk-tooltip {
        width: 70vw;
        max-width: 70vw;
    }
    .uk-modal.uk-open {
        z-index: 99999999;
    }
    .uk-modal-dialog h3{
        font-size: 4vw;
        margin-bottom: 4.800vw;
    }
    .uk-modal-dialog p {
        font-size: 4.267vw;
        color: #3b3b3b;
        margin-bottom: 2.667vw;
    }
    .uk-modal-dialog img {
        max-width: 22vw;
    }
    .uk-modal-body {
        padding: 4vw;
    }
    .characterMB-tit{
        margin-bottom: 2vw;
    }
    .characterMB-tit img{
        max-width: 33.467vw;
    }
    .characterMB-thumb-slider {
        margin: 0 -0.933vw 0.933vw;
        padding: 0 13.333vw;
    }
    .characterMB-thumb-slider-item{
        padding: 0 0.933vw;
    }
    #characterMB {
        padding-left: 2.4vw;
        padding-right: 2.4vw;
    }
    #baodanhMB{
        padding-top: 3.333vw;
    }
    .wrapper-bg{
        background: none;
    }
    body{
        background-image: url(images/bg_body_mb.jpg);
    }
    section#baodanhMB {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .main-slider-wrapMB{
        display: block !important;
    }
    .characterMB-thumb-slider .slick-arrow {
        font-size: 0;
        border: none;
        outline: none;
        width: 9.867vw;
        height: 9.867vw;
        background: url(images/icon_prev.png) no-repeat center center/contain;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .characterMB-thumb-slider button.slick-prev.slick-arrow{
        left: 0;
    }
    .characterMB-thumb-slider button.slick-next.slick-arrow{
        right: 0;
        background: url(images/icon_next.png) no-repeat center center/contain;
    }
}
a.char-thumb {
    filter: grayscale(1);
    transition: all .2s ease;
}
a.char-thumb.active {
    filter: none;
}
a.char-thumb:hover{
    filter: none;
}

form#frm-baodanh button {
    border: 0;
    outline: none;
    padding: 0;
    cursor: pointer;
    background: none;
}
form#frm-baodanh button:hover{
    opacity: .8;
}
#modal-baodanh .uk-modal-dialog{
    max-width: 779px !important;
}
#modal-baodanh .uk-modal-body {
    padding: 28px 20px 48px;
}
form#frm-baodanh input{
    width: 100%;
    border:  1px solid #c8e5ea;
    text-align: center;
    height: 78px;
    margin-bottom: 55px;
    font-size: 32.86px;
    
}
form#frm-baodanh input::placeholder{
    color: #b1b1b1;
}

.main-slider button.slick-arrow{
    width: 74px;
    height: 74px;
    outline: none;
    border: none;
    padding: 0;
    background: url(images/icon_prev.png) no-repeat center center/cover;
    cursor: pointer;
    font-size: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 3333;
}
.main-slider button.slick-arrow.slick-prev{
    left: -97px;
}
.main-slider button.slick-next{
    background: url(images/icon_next.png) no-repeat center center/cover;
    right: -97px;
}
@media (max-width: 750px){
    #modal-baodanh .uk-modal-dialog img {
        max-width: 100%;
    }
    form#frm-baodanh input{
        height: 38px;
        font-size: 18px;
        margin-bottom: 25px;
    }

    .main-slider button.slick-arrow{
        width: 9.867vw;
        height: 9.867vw;
    }
    .main-slider button.slick-arrow.slick-prev{
        left: 0;
    }
    .main-slider button.slick-next{
        right: 0;
    }
}