@font-face {
    font-family: Albeta;
    src: url("../../vendors/fonts/UTM-Alberta-Heavy.otf") format("opentype"),
        url("../../vendors/fonts/UTM-Alberta-Heavy.eot") format("embedded-opentype"),
        url("../../vendors/fonts/UTM-Alberta-Heavy.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Alex;
    src: url("../../vendors/fonts/AnyConv.com__UTM\ Alexander.otf") format("opentype"),
        url("../../vendors/fonts/AnyConv.com__UTM\ Alexander.eot") format("embedded-opentype"),
        url("../../vendors/fonts/AnyConv.com__UTM\ Alexander.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
}

html {
    font-family: Alex;
    text-rendering: optimizeLegibility;
    font-size: 10px;
}

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    background-color: #1f0a00 !important;
}

.text-center {
    text-align: center;
}

.desktop {
    display: block;
}

.flex {
    display: flex;
}

.mobile {
    display: none;
}

.flex.center {
    justify-content: center;
    align-items: center;
}

ul,
li {
    list-style: none;
}

ul {
    margin-bottom: 0px !important;
}

a {
    text-decoration: none !important;
}

.background {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.pa {
    position: absolute;
}

.pr {
    position: relative;
}

.sticky-menu {
    position: sticky;
    top: 50px;
}

.form-group {
    margin-bottom: 10px !important;
}

.flower {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    pointer-events: none;
}

.snowfall-flakes {
    -webkit-animation: sakura 1s linear 0s infinite;
    animation: sakura 1s linear 0s infinite
}

div:where(.swal2-container) div:where(.swal2-popup){
    font-size: 1.5rem !important;
}

/* ---------------------------------------- */

/* -----------------MODAL------------------- */

/* ---------------------------------------- */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
    padding-right: 0px !important;
}

.modal {
    padding-right: 0px !important;
}

.modal-content {
    background-color: transparent !important;
    border: none !important;
}

.modal-body {
    padding: 0px !important;
}

.modal-dialog {
    max-width: unset !important;
}

@media (min-width: 576px) {
    .modal-dialog-centered {
        min-height: calc(100% - 0rem);
    }
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 500px;
        margin: 0 auto;
    }
}

/* -----------------MODAL_THE_LE------------------- */

.modal_thele {
    background: url("../images/ld_tgtc/bg-modal__rules.png") no-repeat;
    width: 1255px !important;
    height: 800px !important;
    margin: 0 auto;
}

.modal_thele .modal-body {
    flex-direction: column;
    padding: 40px 40px 50px 40px !important;
}

.modal_thele .close {
    background: url("../images/ld_tgtc/btn-close.png") no-repeat;
    background-size: cover;
    background-position: center;
    width: 80px;
    height: 80px;
    top: 0px;
    right: -30px;
    z-index: 1;
}

.modal_thele .content_thele {
    width: 100%;
    height: 700px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 10px;
}

.modal_thele label {
    font-size: 30px;
    font-family: Alex;
    margin-bottom: 10px;
    color: #196139;
}

.modal_thele p {
    font-size: 20px;
    font-family: Alex;
    margin-bottom: 10px;
    color: #196139;
}

.rule_img {
    width: 100%;
}

.rule_img img {
    width: 33%;
}

.modal_thele img {
    max-width: 100%;
}

.content_thele::-webkit-scrollbar {
    width: 6px;
}

.content_thele::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(179, 146, 76, 0.3);
    border-radius: 10px;
}

.content_thele::-webkit-scrollbar-thumb {
    background-color: rgb(57, 129, 63);
    border-radius: 10px;
}

@media only screen and (max-width: 1400px){
    .modal_thele {
        background: url(../images/ld_tgtc/bg-modal__rules.png) no-repeat;
        width: 90vw !important;
        height: 57.5vw !important;
        margin: 0 auto;
    }

    .modal_thele .close {
        background: url(../images/ld_tgtc/btn-close.png) no-repeat;
        background-size: cover;
        background-position: center;
        width: 6vw;
        height: 6vw;
        top: 0px;
        right: -2vw;
        z-index: 1;
    }

    .modal_thele .content_thele {
        width: 100%;
        height: 50vw;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 1vw;
    }

    .modal_thele .modal-body {
        flex-direction: column;
        padding: 3vw 3vw 4vw 4vw !important;
    }
}

@media only screen and (max-width: 767px){
    .modal_thele label {
        font-size: 20px;
        font-family: Alex;
        margin-bottom: 10px;
        color: #196139;
    }

    .modal_thele p {
        font-size: 15px;
        font-family: Alex;
        margin-bottom: 10px;
        color: #196139;
    }

    .content_thele::-webkit-scrollbar {
        width: 1vw;
    }
    
    .content_thele::-webkit-scrollbar-track {
        box-shadow: inset 0 0 0.8vw rgba(179, 146, 76, 0.3);
        border-radius: 1vw;
    }
    
    .content_thele::-webkit-scrollbar-thumb {
        background-color: rgb(57, 129, 63);
        border-radius: 1vw;
    }

}


/* -----------------MODAL_LOGIN------------------- */

.modal_login {
    background: url("../images/ld_tgtc/bg-login__modal.png") no-repeat;
    width: 1302px !important;
    height: 829px !important;
    margin: 0 auto;
}

.modal_login .close {
    background: url("../images/ld_tgtc/btn-close.png") no-repeat;
    background-size: cover;
    background-position: center;
    width: 114px;
    height: 114px;
    top: -10px;
    right: -40px;
}

.modal_login .modal-body {
    flex-direction: column;
    padding: 255px 55px 85px 55px !important;
}

.modal_login .modal-body input {
    background-color: #076342;
    width: 920px;
    height: 80px;
    padding: 0 15px;
    border-radius: 5px;
    font-size: 25px;
    color: #fff;
    margin: 15px auto;
    position: relative;
    z-index: 2;
    font-family: Alex;
    border: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: #bdb62d;
    -webkit-box-shadow: inset 0px 0px 12px 2px #076342;
    transition: background-color 5000s ease-in-out 0s;
}

.modal_login .modal-body input::placeholder {
    color: #ffffffcb;
}

.modal_login .modal-body input:focus {
    outline: none;
}

.modal_login .forget_pass {
    justify-content: flex-end !important;
    width: 100%;
    padding-right: 135px;
}

.modal_login .forget_pass a {
    color: #024531;
    font-family: Alex;
    font-size: 20px;
}

.modal_login .forget_pass a:hover {
    color: #095e44;
    filter: brightness(1.15);
}

.modal_login .group_btn_login a:hover {
    filter: brightness(1.15);
}

.modal_login .group_btn_login a {
    background: url("../images/ld_tgtc/header-bg__btn.png") no-repeat;
    width: 356px;
    height: 136px;
}

.modal_login .group_btn_login a {
    color: #fff;
    font-family: Alex;
    font-size: 30px;
}

.modal_login .form-group label {
    margin-bottom: 0;
    background: -webkit-linear-gradient(rgba(255, 204, 0, 1),
            rgba(255, 255, 153, 1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: Alex;
    font-size: 25px;
    text-transform: uppercase;
    width: 150px;
}

.modal_login .form-group select {
    background-color: rgba(32, 32, 32, 0.808);
    border: 1px solid #1c181a;
    color: #e6e6e6;
    font-family: Alex;
    font-size: 35px;
    flex: 1;
    padding: 15px 20px;
    margin: 15px 0;
}

.modal_login .form-group select:focus {
    outline: none;
}

.group_select_server {
    margin-top: 30px;
}

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

    .modal_login {
        background: url(../images/ld_tgtc/bg-login__modal.png) no-repeat;
        width: 93vw !important;
        height: 59vw !important;
        margin: 0 auto;
    }

    .modal_login .close {
        background: url(../images/ld_tgtc/btn-close.png) no-repeat;
        background-size: cover;
        background-position: center;
        width: 8vw;
        height: 8vw;
        top: -1vw;
        right: -3vw;
    }

    .modal_login .modal-body input {
        background-color: #076342;
        width: 67vw;
        height: 6vw;
        padding: 0 1vw;
        border-radius: 0.5vw;
        font-size: 2.5vw;
        color: #fff;
        margin: 1vw auto;
        position: relative;
        z-index: 2;
        font-family: Alex;
        border: none;
    }

    .modal_login .forget_pass {
        justify-content: flex-end !important;
        width: 100%;
        padding-right: 9vw;
    }

    .modal_login .forget_pass a {
        color: #024531;
        font-family: Alex;
        font-size: 2vw;
    }

    .modal_login .group_btn_login a {
        background: url(../images/ld_tgtc/header-bg__btn.png) no-repeat;
        width: 25.5vw;
        height: 10vw;
    }

    .modal_login .modal-body {
        flex-direction: column;
        padding: 17vw 5vw 8vw 5vw !important;
    }

    .modal_login .group_btn_login a {
        color: #fff;
        font-family: Alex;
        font-size: 2.5vw;
    }

    .modal_login .form-group select {
        background-color: rgba(32, 32, 32, 0.808);
        border: 1px solid #1c181a;
        color: #e6e6e6;
        font-family: Alex;
        font-size: 2.5vw;
        flex: 1;
        padding: 1vw 1.5vw;
        margin: 1.5vw 0;
    }

    .group_select_server {
        margin-top: 2vw;
    }

    .form-group {
        margin-bottom: 1vw !important;
    }
    
}

@media only screen and (max-width: 767px){
    .modal_login .modal-body input {
        background-color: #076342;
        width: 73vw;
        height: 8vw;
        padding: 0 1vw;
        border-radius: 0.5vw;
        font-size: 3.5vw;
        color: #fff;
        margin: 1vw auto;
        position: relative;
        z-index: 2;
        font-family: Alex;
        border: none;
    }

    .modal_login .forget_pass a {
        color: #024531;
        font-family: Alex;
        font-size: 2.5vw;
    }

    .modal_login .form-group select {
        background-color: rgba(32, 32, 32, 0.808);
        border: 1px solid #1c181a;
        color: #e6e6e6;
        font-family: Alex;
        font-size: 3vw;
        flex: 1;
        padding: 1vw 1.5vw;
        margin: 1.5vw 0;
    }
}

/* -----------------MODAL_HISTORY------------------- */

.modal_history {
    background: url("../images/ld_tgtc/bg-modal__rules.png") no-repeat;
    width: 1255px !important;
    height: 800px !important;
    margin: 0 auto;
}

.modal_history .modal-body {}

.modal_history .modal-body {
    flex-direction: column;
    padding: 40px 40px 50px 40px !important;
}

.modal_history .close {
    background: url("../images/ld_tgtc/btn-close.png") no-repeat;
    background-size: cover;
    background-position: center;
    width: 80px;
    height: 80px;
    top: 0px;
    right: -30px;
    z-index: 1;
}

.modal_history h1 {
    color: #024531;
    font-family: Alex;
    font-size: 30px;
    margin-bottom: 10px;
}

.modal_history label {
    color: #fff;
    font-family: Alex;
    font-size: 25px;
    margin-bottom: 0;
    background-color: #076342;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    padding: 15px 10px;
}

.history-board{
    height: 650px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.history-board::-webkit-scrollbar {
    width: 6px;
}

.history-board::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(179, 146, 76, 0.3);
    border-radius: 10px;
}

.history-board::-webkit-scrollbar-thumb {
    background-color: rgb(57, 129, 63);
    border-radius: 10px;
}

.history_1 {
    flex: 1;
}

.history_1 ul li {
    font-size: 20px;
    color: #000;
    background-color: rgb(7, 99, 66, 0.3);
    font-family: Alex;
    font-size: 20px;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    padding: 15px 10px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.history_2 ul li {
    font-size: 20px;
    color: #000;
    background-color: rgb(7, 99, 66, 0.3);
    font-family: Alex;
    font-size: 20px;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    padding: 15px 10px;
    border-bottom: 1px solid #fff;
}

.history_1 label {
    border-right: 1px solid #fff;
    border-top-left-radius: 5px;
}

.history_2 label {
    border-top-right-radius: 5px;
}

.history_2 {
    flex: 1;
}

@media only screen and (max-width: 1400px){
    .modal_history {
        background: url(../images/ld_tgtc/bg-modal__rules.png) no-repeat;
        width: 90vw !important;
        height: 57vw !important;
        margin: 0 auto;
    }

    .modal_history .close {
        background: url(../images/ld_tgtc/btn-close.png) no-repeat;
        background-size: cover;
        background-position: center;
        width: 6vw;
        height: 6vw;
        top: 0px;
        right: -2vw;
        z-index: 1;
    }

    .modal_history .modal-body {
        flex-direction: column;
        padding: 3vw 3vw 4vw 3vw !important;
    }

    .modal_history h1 {
        color: #024531;
        font-family: Alex;
        font-size: 2.5vw;
        margin-bottom: 1vw;
    }

    .modal_history label {
        color: #fff;
        font-family: Alex;
        font-size: 2vw;
        margin-bottom: 0;
        background-color: #076342;
        width: 100%;
        text-align: center;
        vertical-align: middle;
        padding: 1vw 0.5vw;
    }

    .history_1 ul li {
        color: #000;
        background-color: rgb(7, 99, 66, 0.3);
        font-family: Alex;
        font-size: 1.7vw;
        width: 100%;
        text-align: center;
        vertical-align: middle;
        padding: 1vw 0.5vw;
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
    }

    .history_2 ul li {
        color: #000;
        background-color: rgb(7, 99, 66, 0.3);
        font-family: Alex;
        font-size: 1.7vw;
        width: 100%;
        text-align: center;
        vertical-align: middle;
        padding: 1vw 0.5vw;
        border-bottom: 1px solid #fff;
    }

    .history-board {
        height: 46vw;
        overflow-y: scroll;
        overflow-x: hidden;
    }
}

/* -----------------MODAL_TRANSFER------------------- */

.gift_modal {
    background: url("../images/ld_tgtc/bg-modal__rules.png") no-repeat;
    width: 1255px !important;
    height: 800px !important;
    margin: 0 auto;
}

.gift_modal .modal-body {}

.gift_modal .modal-body {
    flex-direction: column;
    padding: 40px 40px 50px 40px !important;
}

.gift_modal .close {
    background: url("../images/ld_tgtc/btn-close.png") no-repeat;
    background-size: cover;
    background-position: center;
    width: 80px;
    height: 80px;
    top: 0px;
    right: -30px;
    z-index: 1;
}

.gift-modal__content label {
    margin-bottom: 10px;
    font-size: 50px;
    color: #196139;
    font-family: Alex;
}

.gift-modal__content .list-present li {
    flex-direction: column;
    width: 25%;
    
}

.gift-modal__content .list-present li.dark{
    
}

.gift-modal__content .list-present li img {
    width: 100%;
}

.gift-modal__content .list-present li a {
    background: url('../images/ld_tgtc/sc3-bg__btn.png');
    width: 225px;
    height: 70px;
    font-size: 25px;
    color: #196139;
    font-family: Alex;
    margin-top: 20px;
    filter: brightness(1);
    pointer-events: all;
}

.gift-modal__content .list-present li a.dark{
    filter: brightness(0.5);
    pointer-events: none;
}

.gift-modal__content .list-present li a:hover {
    filter: brightness(1.1) drop-shadow(0px 0px 3px #ffe9a0);
}

.gift-modal__text {
    font-size: 25px;
    color: #196139;
    font-family: Alex;
    font-style: italic;
    margin-top: 20px;
    text-align: center;
}

.modal-confirm{
    background: url('../images/ld_tgtc/bg-login__modal.png');
    width: 470px;
    height: 300px;
    padding: 10px;
    z-index: 10;
    top: 5%;
    left: 31.5%;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: all .4s;
}

.modal-confirm.showModal{
    opacity: 1;
    top: 39%;
    visibility: visible;
}

.modal-confirm span{
    font-size: 30px;
    font-family: Alex;
    color: #196139;
}

.modal-btn__confirm a{
    background: url('../images/ld_tgtc/sc3-bg__btn.png');
    width: 220px;
    height: 60px;
    font-size: 25px;
    font-family: Alex;
    color: #196139;
    margin-top:  20px;
}

.modal-btn__confirm a:hover{
    filter: brightness(1.1) drop-shadow(0px 0px 3px #ffeea5);
}

@media only screen and (max-width: 1400px){
    .gift_modal {
        background: url(../images/ld_tgtc/bg-modal__rules.png) no-repeat;
        width: 90vw !important;
        height: 57vw !important;
        margin: 0 auto;
    }

    .gift_modal .close {
        background: url(../images/ld_tgtc/btn-close.png) no-repeat;
        background-size: cover;
        background-position: center;
        width: 6vw;
        height: 6vw;
        top: 0px;
        right: -2vw;
        z-index: 1;
    }

    .gift-modal__content label {
        margin-bottom: 0.8vw;
        font-size: 3.5vw;
        color: #196139;
        font-family: Alex;
    }

    .gift-modal__content .list-present li a {
        background: url(../images/ld_tgtc/sc3-bg__btn.png);
        width: 15.5vw;
        height: 5vw;
        font-size: 2vw;
        color: #196139;
        font-family: Alex;
        margin-top: 2vw;
    }

    .gift-modal__text {
        font-size: 2vw;
        color: #196139;
        font-family: Alex;
        font-style: italic;
        margin-top: 1vw;
        text-align: center;
    }

    .gift_modal .modal-body {
        flex-direction: column;
        padding: 2vw 2vw 2vw 2vw !important;
    }

    .modal-confirm {
        background: url(../images/ld_tgtc/bg-login__modal.png);
        width: 34vw;
        height: 21.6vw;
        padding: 1vw;
        z-index: 10;
        top: 5%;
        left: 31.5%;
        flex-direction: column;
        opacity: 0;
        visibility: hidden;
        transition: all .4s;
    }

    .modal-confirm span {
        font-size: 2.5vw;
        font-family: Alex;
        color: #196139;
    }

    .modal-btn__confirm a {
        background: url(../images/ld_tgtc/sc3-bg__btn.png);
        width: 15.8vw;
        height: 4.4vw;
        font-size: 2.5vw;
        font-family: Alex;
        color: #196139;
        margin-top: 1vw;
    }
}

/* -------------ASIDE-LEFT------------- */
.aside-left {
    top: 200px;
    right: 10px;
    width: 78px;
    position: fixed;
    z-index: 10;
}

.aside-left .left-nav {
    background: url("../images/ld_dptg/bg-left.png");
    width: 78px;
    height: 320px;
    padding-top: 20px;
}

.aside-left .left-nav li {
    list-style: none;
    display: flex;
    justify-content: center;
    padding-right: 3px;
}

.aside-left .left-nav-item {
    display: block;
    background-image: url("../images/ld_ott/_sprites-aside.png");
    background-position: -41px -124px;
    width: 41px;
    height: 41px;
    position: relative;
    margin-bottom: 20px;
}

.aside-left .left-nav-item-home {
    background-image: url("../images/ld_ott/_sprites-aside.png");
    background-position: -107px -62px;
    width: 50px;
    height: 50px;
    margin-bottom: 27px;
}

.aside-left .left-nav li:nth-child(1) .space-button {
    content: "";
    background-image: url("../images/ld_ott/_sprites-aside.png");
    background-position: -157px -62px;
    width: 8px;
    height: 21px;
    position: absolute;
    left: 50%;
    top: 68px;
    transform: translateX(-50%);
}

.aside-left .left-nav li:nth-child(2) .space-button {
    content: "";
    background-image: url("../images/ld_ott/_sprites-aside.png");
    background-position: -157px -62px;
    width: 8px;
    height: 21px;
    position: absolute;
    left: 50%;
    top: 128px;
    transform: translateX(-50%);
}

.aside-left .left-nav li:nth-child(3) .space-button {
    content: "";
    background-image: url("../images/ld_ott/_sprites-aside.png");
    background-position: -157px -62px;
    width: 8px;
    height: 21px;
    position: absolute;
    left: 50%;
    top: 188px;
    transform: translateX(-50%);
}

.aside-left .left-nav li:nth-child(4) .space-button {
    content: "";
    background-image: url("../images/ld_ott/_sprites-aside.png");
    background-position: -157px -62px;
    width: 8px;
    height: 21px;
    position: absolute;
    left: 50%;
    top: 248px;
    transform: translateX(-50%);
}

.aside-left li.active .left-nav-item,
.aside-left .left-nav-item:hover {
    background-image: url("../images/ld_ott/_sprites-aside.png");
    background-position: 0px -124px;
    width: 41px;
    height: 41px;
}

.aside-left li.active .left-nav-item-home,
.aside-left .left-nav-item-home:hover {
    background-image: url("../images/ld_ott/_sprites-aside.png");
    background-position: -57px -62px;
    width: 50px;
    height: 50px;
}

/* --------------------------------------- */

/* ---------------WARP-------------------- */

/* --------------------------------------- */

.warp {
    width: 100%;
    margin: 0 auto;
    height: 100%;
    overflow: hidden;
    position: relative;
}

@keyframes scale {
    from{
        transform: scale(0.9);
    }to{
        transform: scale(1);
    }
}

@keyframes bellshake {
    0% {
        transform: rotate(0);
    }

    15% {
        transform: rotate(5deg);
    }

    30% {
        transform: rotate(-5deg);
    }

    45% {
        transform: rotate(4deg);
    }

    60% {
        transform: rotate(-4deg);
    }

    75% {
        transform: rotate(2deg);
    }

    85% {
        transform: rotate(-2deg);
    }

    92% {
        transform: rotate(1deg);
    }

    100% {
        transform: rotate(0);
    }
}

/* --------------------------------------- */

/* ---------------HEADER-------------------- */

/* --------------------------------------- */

.header {
    background: url("../images/ld_tgtc/bg-header.jpg");
    width: 100%;
    height: 65.625vw;
}

.header img {
    width: 100%;
}

.header-btn__home {
    width: 18.542vw;
    top: 0%;
    left: 19%;
}

.header-btn__topup {
    width: 18.542vw;
    top: 0%;
    left: 61%;
}

.header-btn__home:hover img,
.header-btn__topup:hover img {
    filter: brightness(1.15) drop-shadow(0px 0px 4px #a8ffaf);
}

.header-group__login {
    top: 0%;
    left: 79%;
}

.header-group__login a {
    width: 18.542vw;
}

.header-group__login a:hover img {
    filter: brightness(1.15) drop-shadow(0px 0px 4px #a8ffaf);
}

.header-text__event {
    width: 11.983vw;
    top: 0%;
    left: 44%;
}

.header-btn__logout {
    top: 5vw;
}

.header-btn__user-info {
    background: url('../images/ld_tgtc/header-bg__btn.png');
    height: 6.083vw;
    font-size: 1.3vw;
    color: #fff;
    top: 0.46rem;
    font-weight: bold;
}

.header-btn__user-info:hover {
    color: #fff;
    filter: brightness(1.15) drop-shadow(0px 0px 4px #a8ffaf);
}

.header-btn__predict {
    width: 23.908vw;
    left: 38%;
    top: 58%;
}

.header-btn__predict:hover img {
    filter: brightness(1.15) drop-shadow(0px 0px 4px #ffcba8);
}

.header-group__btn-bot {
    left: 15%;
    top: 77%;
}

.header-group__btn-bot a {
    width: 23.075vw;
}

.header-group__btn-bot a:hover img {
    filter: brightness(1.15) drop-shadow(0px 0px 4px #f9ff9e);
}

/* ---------------------------------------- */

/* -----------------CONTENT------------------- */

/* ---------------------------------------- */

.section_1 {
    background: url('../images/ld_tgtc/bg-sc1.jpg');
    width: 100%;
    height: 44.9vw;
}

.title_section {
    width: 48.65vw;
    margin: 0 auto;
}

.title_section img {
    width: 100%;
}

.sc1_content img {
    width: 100%;
}

.sc1_top_item:nth-child(2) {
    width: 34.692vw;
    animation: scale 1s alternate infinite linear;
    animation-delay: 0.3s;
}

.sc1_top_item:nth-child(1),
.sc1_top_item:nth-child(3) {
    width: 28.442vw;
    padding-top: 4.167vw;
    animation: scale 1s alternate infinite linear;
    animation-delay: 0.1s;
}

/* .sc1_top_item {
    cursor: pointer;
}

.sc1_top_item:hover img {
    filter: brightness(1.15) drop-shadow(0px 0px 4px #fff2a8);
} */

/* ---------------------------------------- */

.section_2 {
    background: url('../images/ld_tgtc/bg-sc2.jpg');
    width: 100%;
    height: 66.717vw;
    padding-top: 2.083vw;
}

.title_sc2 {
    width: 32.192vw;
    margin: 0vw auto 0;
}

.title_sc2 img {
    width: 100%;
}

.sc2-content {
    width: 90vw;
    margin: -1vw auto 0;
}

.sc2-content img{
    width: 100%;
}

.sc2-list__quarter {
    top: 84%;
    left: 0%;
    width: 100%;
}

.sc2-quarter__item {
    margin: 0 1.25vw;
}

.sc2-quarter__item span {
    color: #fff;
    font-size: 2.083vw;
    margin: 0 1.083vw;
    font-family: Alex;
    text-transform: uppercase;
    font-weight: bold;
}

.sc2-tree {
    top: 32%;
    left: 10%;
    width: 79.275vw;
}

.sc2-tree img {
    width: 100%;
}

.sc2-crown {
    width: 29.842vw;
    top: 12%;
    left: 35%;
}

.sc2-crown img {
    width: 100%;
}

.sc2-list__semi {
    top: 63%;
    left: 0%;
    width: 100%;
}

.sc2-semi__item {
    margin: 0 1.667vw;
}

.sc2-semi__item span {
    position: relative;
    color: #fff;
    font-size: 2.083vw;
    margin: 0 3.333vw;
    font-family: Alex;
    text-transform: uppercase;
    font-weight: bold;
}

.sc2-semi__item span img {
    width: 24vw;
    height: 8.5vw;
    position: absolute;
    top: -2.5vw;
    left: -4vw;
    z-index: 2;
}

.sc2-list__grand {
    top: 41%;
    left: 0%;
    width: 100%;
}

.sc2-grand__item span {
    color: #fff;
    font-size: 2.083vw;
    margin: 0 11.667vw;
    font-family: Alex;
    text-transform: uppercase;
    font-weight: bold;
    position: relative;
}

.sc2-list__grand span img {
    width: 24vw;
    height: 8.5vw;
    position: absolute;
    top: -2.5vw;
    left: -7vw;
    z-index: 2;
}

/* ---------------------------------------- */

.section_3 {
    background: url('../images/ld_tgtc/bg-sc3.jpg');
    width: 100%;
    height: 55.992vw;
    padding-top: 1.25vw;
}

.sc3-predict__board {
    width: 52.292vw;
    margin: 0.833vw auto 0;
    background-color: rgba(0, 55, 35, 0.6);
    padding: 0.417vw;
    border-radius: 0.525vw;
}

.sc3-predict__board ul {
    flex-direction: column;
    width: 100%;
    height: 45.85vw;
    overflow-y: scroll;
    justify-content: flex-start !important;
}

.sc3-predict__board ul::-webkit-scrollbar {
    width: 6px;
}

.sc3-predict__board ul::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(179, 146, 76, 0.3);
    border-radius: 10px;
}

.sc3-predict__board ul::-webkit-scrollbar-thumb {
    background-color: rgb(57, 129, 63);
    border-radius: 10px;
}

.sc3-predict__board ul li {
    color: #fff;
    flex-direction: column;
    margin-bottom: 0.25vw;
}

.sc3-predict__board ul li label {
    font-family: Alex;
    font-size: 1.333vw;
    margin-bottom: 0.417vw;
}

.group-team__predict img {
    width: 4.583vw;
}

.info-team {
    background: url('../images/ld_tgtc/sc3-bg__predict-board.png');
    width: 22.817vw;
    height: 5.467vw;
    padding: 1.75vw 1.417vw 1.75vw 2.5vw;
}

.info-team .team-name {
    flex-direction: column;
    flex: 1;
}

.info-team .team-point {
    flex-direction: column;
    flex: 1;
}

.info-team .team-name label,
.info-team .team-point label {
    font-size: 1.333vw;
    background-color: #024531;
    border: 1px solid #1C5A46;
    width: 100%;
    margin-bottom: 0;
    font-family: Alex;
}

.info-team .team-name span,
.info-team .team-point input {
    font-size: 1.333vw;
    background-color: #FFF7CC;
    border: 1px solid #1C5A46;
    width: 100%;
    font-family: Alex;
    color: #000;
}

.info-team .team-point input[type=number] {
    padding: unset;
    text-align: center;
}

.info-team .team-point input[type=number]:focus {
    outline: none;
}

.btn-predict {
    background: url('../images/ld_tgtc/sc3-bg__btn.png');
    width: 9.792vw;
    height: 2.817vw;
    margin: 0.417vw auto 0;
    border: none;
    font-size: 1.25vw;
    font-family: Alex;
    color: #024531;
}

.btn-predict:hover {
    filter: brightness(1.1) drop-shadow(0px 0px 4px #fff2a8);
}

.btn-predict:focus {
    outline: none;
}

.sc3-score__board {
    background: url('../images/ld_tgtc/sc3-score__board.png');
    width: 17.9vw;
    height: 26.633vw;
    top: 10%;
    left: 3%;
    padding-top: 4.333vw;
}

.sc3-score__board-content {
    width: 100%;
    color: #fff;
    font-family: Alex;
    font-size: 1.083vw;
    flex-direction: column;
}

.sc3-s__b-c__item label,
.sc3-s__b-c__item span {
    margin-bottom: 0;
    background-color: #38694F;
    border: 1px solid #0C3727;
    padding: 0.25vw 0.25vw;
    height: 3.333vw;

}

.sc3-s__b-c__item span {
    text-align: center;
    width: 60%;
}

.sc3-s__b-c__item label {
    justify-content: flex-start !important;
    width: 40%;
}

.sc3-list__btn {
    top: 10%;
    right: 5%;
    flex-direction: column;
}

.sc3-list__btn a {
    background: url('../images/ld_tgtc/sc3-bg__btn.png');
    width: 14.692vw;
    height: 4.742vw;
    margin: 0.083vw 0;
    font-size: 1.25vw;
    font-family: Alex;
    color: #024531;
}

.sc3-list__btn a:hover {
    filter: brightness(1.1) drop-shadow(0px 0px 4px #fff2a8);
    color: #024531;
}

/* ---------------------------------------- */

.section_4 {
    background: url('../images/ld_tgtc/bg-sc4.jpg');
    width: 100%;
    height: 65.942vw;
    padding-top: 1.667vw;
}

.sc4-score__board {
    background: url('../images/ld_tgtc/sc4-bg__board.png');
    width: 85.942vw;
    height: 47.917vw;
    margin: 2.083vw auto;
}

.sc4-score__board table {
    width: 100%;
    margin-bottom: 0.417vw;
    color: #fff;
    font-family: Alex;
    font-size: 2vw;
    text-align: center;
}

.btn_transfer_gift {
    height: 75px;
}

.btn_recieve_gift {
    background: url("../images/ld_tgtc/sc3-bg__btn.png");
    width: 225px;
    height: 50px;
    margin: 0 auto;
    color: #076342;
    font-size: 25px;
    font-family: Alex;
}

.btn_recieve_gift:hover {
    filter: brightness(1.15) drop-shadow(0px 0px 5px #ffebc0);
    color: #076342;
}

.table-bordered td,
.table-bordered th {
    border: unset !important;
}

.table-bordered td,
.table-bordered th {
    border-bottom: 1px solid #62FF8E !important;
    padding: 0.417vw !important;
    vertical-align: middle !important;
}

.table-header {
    height: 5.417vw;
}

/* ---------------------------------------- */

/* -----------------FOOTER------------------- */

/* ---------------------------------------- */

.footer-section {
    background-color: #0b3118;
    position: relative;
    z-index: 4;
    padding: 10px 20px;
}

.footer-section .space {
    flex: 1;
}

.footer-section .footer_hide {
    display: none !important;
}

.footer-section .space img {
    max-width: 100%;
}

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

.footer-section .logo-footer {
    flex: 1;
}

.footer-section .logo-footer img {
    max-width: 100%;
}

.footer-section p {
    font-weight: 400;
    font-size: 20px;
    margin-bottom: 0;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

@media only screen and (max-width: 1919px) {
    .footer-section .infomation {
        flex: 3;
    }

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

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



    .warp {
        width: 100%;
        margin: 0 auto;
        height: 100%;
        overflow: hidden;
        position: relative;
    }
}

@media only screen and (max-width: 1200px) {
    .footer-section p {
        font-weight: 400;
        font-size: 1.5vw;
        margin-bottom: 0;
        color: white;
    }
}

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

    .desktop {
        display: none;
    }

    .mobile {
        display: flex;
    }

    .header {
        background: url('../images/ld_tgtc/bg-mb__header.jpg');
        width: 100%;
        height: 90.625vw;
    }

    .header-btn__topup {
        width: 20.542vw;
        top: 0%;
        left: 64%;
    }

    .header-mb-logo {
        width: 20vw;
        top: 1%;
        left: 0%;
    }

    .header-group__login a {
        width: 20.542vw;
    }

    .header-group__login {
        top: 0%;
        left: 81%;
    }

    .header-btn__logout {
        top: 6vw;
    }

    .header-btn__user-info {
        font-size: 1.5vw;
    }

    .header-btn__home {
        width: 20.542vw;
        top: 0%;
        left: 17%;
    }

    .header-text__event {
        width: 17.983vw;
        top: 0%;
        left: 42%;
    }

    .header-btn__predict {
        width: 31.908vw;
        left: 35%;
        top: 58%;
    }

    .header-group__btn-bot {
        left: 9%;
        top: 77%;
    }

    .header-group__btn-bot a {
        width: 28.075vw;
    }

    .section_1 {
        width: 100%;
        height: 48.5vw;
    }

    .sc1_top_item:nth-child(2) {
        width: 36.692vw;
    }

    .sc1_top_item:nth-child(1),
    .sc1_top_item:nth-child(3) {
        width: 30.442vw;
        padding-top: 6.167vw;
    }

    .title_section {
        width: 57.65vw;
        margin: 0 auto;
    }

    .section_3 {
        background: url('../images/ld_tgtc/bg-mb-sc3.jpg');
        width: 100%;
        height: 84.992vw;
        padding-top: 1.25vw;
    }

    .sc3-btn__show-score__board {
        width: 10vw;
        top: 1%;
        left: 2%;
    }

    .sc3-btn__show-score__board img {
        width: 100%;
    }

    .sc3-predict__board ul {
        flex-direction: column;
        width: 100%;
        overflow-y: scroll;
        height: 70.85vw;
    }

    .sc3-predict__board ul::-webkit-scrollbar {
        width: 0.6vw;
    }
    
    .sc3-predict__board ul::-webkit-scrollbar-track {
        box-shadow: inset 0 0 0.5vw rgba(179, 146, 76, 0.3);
        border-radius: 1vw;
    }
    
    .sc3-predict__board ul::-webkit-scrollbar-thumb {
        background-color: rgb(57, 129, 63);
        border-radius: 1vw;
    }

    .sc3-score__board {
        width: 30.9vw;
        height: 45.633vw;
        top: 14%;
        left: 2%;
        padding-top: 6.333vw;
        display: none;
    }

    .sc3-score__board-content {
        width: 100%;
        color: #fff;
        font-family: Alex;
        font-size: 2vw;
        flex-direction: column;
    }

    .sc3-s__b-c__item label,
    .sc3-s__b-c__item span {
        margin-bottom: 0;
        background-color: #38694F;
        border: 0.05vw solid #0C3727;
        padding: 0.25vw 0.25vw;
        height: 6.6vw;
    }

    .sc3-mb-list__btn {
        background: url('../images/ld_tgtc/sc3-bg__nav.png');
        width: 27.44vw;
        height: 37.21vw;
        right: -26%;
        top: 17%;
        z-index: 3;
        flex-direction: column;
        padding-top: 4.5vw;
        transition: all .4s;
    }

    .sc3-mb-list__btn.active-sc3-nav {
        right: 0%;
    }

    .sc3-mb-list__btn a {
        background: url('../images/ld_tgtc/sc3-nav__bg-btn.png');
        width: 16.12vw;
        height: 4vw;
        margin: 0.2vw 0;
        font-size: 2.3vw;
        font-family: Alex;
        color: #ffd8ad;
    }

    .sc3-btn__arrow-off {
        background: url('../images/ld_tgtc/arrow-right.png');
        width: 10vw;
        height: 10vw;
        top: 1%;
        right: 0%;
        z-index: 4;
        transition: all .4s;
        animation: scale 0.7s alternate infinite linear;
        backface-visibility: hidden;
        transform-origin: center;
        cursor: pointer;
    }

    .sc3-btn__arrow-on {
        background: url('../images/ld_tgtc/arrow-left.png');
        width: 10vw;
        height: 10vw;
        top: 32%;
        right: 25%;
        transition: all .4s;
        animation: scale 0.7s alternate infinite linear;
        backface-visibility: hidden;
        transform-origin: center;
        cursor: pointer;
    }    

    .sc3-mb-list__btn a:hover {
        color: #ffd8ad;
        filter: brightness(1.1);
    }

    .sc3-predict__board {
        width: 94vw;
        margin: 2.5vw auto 0;
        background-color: rgba(0, 55, 35, 0.6);
        padding: 0.417vw;
        border-radius: 0.525vw;
    }

    .sc3-predict__board ul li label {
        font-family: Alex;
        font-size: 2vw;
        margin-bottom: 0.417vw;
    }

    .info-team {
        background: url(../images/ld_tgtc/sc3-bg__predict-board.png);
        width: 38.817vw;
        height: 9.467vw;
        padding: 1.75vw 1.8vw 1.75vw 3.8vw;
    }

    .group-team__predict img {
        width: 8.583vw;
    }

    .info-team .team-name label,
    .info-team .team-point label {
        font-size: 2vw;
        background-color: #024531;
        border: 1px solid #1C5A46;
        width: 100%;
        margin-bottom: 0;
        font-family: Alex;
    }

    .info-team .team-name span,
    .info-team .team-point input {
        font-size: 2.5vw;
        background-color: #FFF7CC;
        border: 1px solid #1C5A46;
        width: 100%;
        font-family: Alex;
        color: #000;
    }

    .btn-predict {
        background: url(../images/ld_tgtc/sc3-bg__btn.png);
        width: 13.792vw;
        height: 4vw;
        margin: 0.417vw auto 0;
        border: none;
        font-size: 2vw;
        font-family: Alex;
        color: #024531;
    }

    .btn_recieve_gift {
        background: url(../images/ld_tgtc/sc3-bg__btn.png);
        width: 12vw;
        height: 3vw;
        margin: 0 auto;
        color: #076342;
        font-size: 1.4vw;
        font-family: Alex;
    }

    .btn_transfer_gift {
        height: 3.92vw;
    }

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

    .aside-left {
        display: none;
    }
}

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

    .modal_thele {
        background: url('../images/ld_tgtc/bg-mb-modal__rules.png') no-repeat;
        width: 90vw !important;
        height: 89.5vw !important;
        margin: 0 auto;
    }

    .modal_thele .content_thele {
        width: 100%;
        height: 82vw;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 1vw;
    }


    .section_4 {
        background: url(../images/ld_tgtc/bg-sc4.jpg);
        width: 100%;
        height: 72.942vw;
        padding-top: 2.667vw;
    } 

    .sc4-score__board {
        background: url(../images/ld_tgtc/sc4-bg__board.png);
        width: 93.942vw;
        height: 51.917vw;
        margin: 4.083vw auto;
    }

    .sc4-score__board table {
        width: 100%;
        margin-bottom: 0.417vw;
        color: #fff;
        font-family: Alex;
        font-size: 2.4vw;
        text-align: center;
    }

    .table-header {
        height: 5.5vw;
    }

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

    .sc3-mb-list__btn {
        background: url(../images/ld_tgtc/sc3-bg__nav.png);
        width: 32.44vw;
        height: 47.21vw;
        right: -33%;
        top: 17%;
        z-index: 3;
        flex-direction: column;
        padding-top: 5vw;
        transition: all .4s;
    }

    .sc3-mb-list__btn a {
        background: url(../images/ld_tgtc/sc3-nav__bg-btn.png);
        width: 21.12vw;
        height: 5.4vw;
        margin: 0.2vw 0;
        font-size: 3vw;
        font-family: Alex;
        color: #ffd8ad;
    }
}