@import url("https://fonts.googleapis.com/css2?family=Battambang:wght@700&display=swap");



@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap");



* {



    margin: 0;



    padding: 0



}







@font-face {



    font-family: "icomoon";



    src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format("truetype");



    font-weight: normal;



    font-style: normal;



    font-display: block



}







[class^="icon-"],



[class*=" icon-"] {



    font-family: "icomoon";



    speak: none;



    font-style: normal;



    font-weight: normal;



    font-variant: normal;



    text-transform: none;



    line-height: 1;



    -webkit-font-smoothing: antialiased;



    -moz-osx-font-smoothing: grayscale



}







body {



    width: 100vw;



    height: 100vh;



    margin: 0;



    padding: 0;



    letter-spacing: 0.5px;



    font-family: "Inter", "Battambang";



    color: #3785d8;



    user-select: none;



    background-color: transparent !important



}



#btnLogin , #btnRegister{



    color: white;



}



body .error {



    border: 1px solid #ce0b0b !important



}







body #bg-loading {



    width: 100vw;



    height: 100vh;



    position: fixed;



    display: flex;



    align-items: center;



    justify-content: center;



    background-color: #f4f4f4;



}







body #bg-loading .icon-spinner-2:before {



    content: "\e001"



}







@keyframes anim-rotate {



    0% {



        transform: rotate(0)



    }



    100% {



        transform: rotate(360deg)



    }



}







body #bg-loading .spinner {



    position: absolute;



    font-size: 4em;



    height: 1em;



    line-height: 1;



    margin: 0.5em;



    animation: anim-rotate 2s infinite linear;



    color: #3785d8;



    text-shadow: 0 0 0.25em rgba(255, 255, 255, 0.3)



}







body #bg-loading .spinner--steps {



    animation: anim-rotate 1s infinite steps(8)



}







body #bg-loading .spinner--steps2 {



    animation: anim-rotate 1s infinite steps(12)



}







body .container {



    max-width: 1440px;



    height: 100%;



    margin: 0 auto;



    display: flex;



    flex-direction: column



}







body .container .box-logo {



    width: 100%;



    height: 110px;



    /* background: url("../image/top.png") no-repeat center center; */



    background-size: cover;



    display: flex



}







body .container .box-logo .logo {



    width: 300px



}







body .container .box-logo .logo img {



    width: 100%;



    height: 100%;



    object-fit: contain



}







body .container .box-contain {



    width: 100%;



    /* height: 600px; */



    /* background: url("../image/bg2022.png") no-repeat center center; */



    background-size: cover



}







body .container .box-contain .contain-login {



    width: 100%;



    height: 100%;



    display: flex;



    justify-content: center;



    align-items: center



}











body .container .box-contain .contain-login .login {



    width: 100%



}





.modal-backdrop-test.fade {

    position: fixed;

    top: 0;

    left: 0;

    z-index: 1039;

    width: 100vw;

    height: 100vh;

    background-color: #000;

    opacity: 0.6;

}

body .container .box-contain .contain-login .login .box-form {

    background: #251833;

    width: 100%;



    /* background: linear-gradient(151deg, #303030ba, #000000c2);



    border: 2px solid #E3CD94;



    box-shadow: 0px 0px 15px #DCAA35; */



    border: 2px solid #a065ca;



    box-shadow: 0px 0px 15px #a065ca;



    color: white;



    /* background-color: #fff; */



    display: flex;



    flex-wrap: wrap;



    justify-content: center;



    border-radius: 20px;



    padding: 15px 0 30px 0;



    box-sizing: border-box



}







body .container .box-contain .contain-login .login .box-form .box-title {



    width: 100%;



    height: 100px;



    display: flex;



    justify-content: center;



    align-items: center



}







body .container .box-contain .contain-login .login .box-form .box-title .mtitle {



    width: 100%;



    font-size: 2rem;



    font-weight: 900;



    text-transform: capitalize;



    display: flex;



    justify-content: center;



    align-items: center;



    gap: 10px;



}







body .container .box-contain .contain-login .login .box-form .box-title .mtitle img {



    width: 50px;



    filter: brightness(0) invert(1);



}







body .container .box-contain .contain-login .login .box-form form {



    width: 90%;



    height: 80%;



    margin: auto



}







body .container .box-contain .contain-login .login .box-form form .box-input {



    width: 100%;



    height: 40px;



    border-radius: 15px;



    border: 2px solid #a065ca;



    box-shadow: 0px 0px 15px #a065ca;



    overflow: hidden;



    display: flex;



    flex-direction: row



}







body .container .box-contain .contain-login .login .box-form form .box-input .icon {



    width: 40px;



    height: 40px;



    display: flex;



    align-items: center



}







body .container .box-contain .contain-login .login .box-form form .box-input .icon svg {



    width: 40px;



    height: 22px;



    fill: #b2afa8



}







body .container .box-contain .contain-login .login .box-form form .box-input .icon img {



    object-fit: contain



}







body .container .box-contain .contain-login .login .box-form form .box-input input {



    width: 100%;



    height: 100%;



    border: none;



    outline: none;



    font-size: 20px;



    padding-left: 10px;



    font-family: "Inter", "Battambang"



}







body .container .box-contain .contain-login .login .box-form form .box-input input::placeholder {



    color: #b2afa8;



    font-size: 1rem;



    text-transform: capitalize;



    line-height: 2rem



}







body .container .box-contain .contain-login .login .box-form form .check-box {



    margin-top: 10px;



    display: flex;



    align-items: center



}







body .container .box-contain .contain-login .login .box-form form .check-box label {



    font-size: 1rem;



    line-height: 1rem;



    margin-left: 10px



}







body .container .box-contain .contain-login .login .box-form form .box-btn {



    width: 100%;



    display: flex;



    flex-wrap: wrap;



    justify-content: center



}







body .container .box-contain .contain-login .login .box-form form .box-btn .btn {



    font-family: "Inter", "Battambang";



    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(180deg, rgba(255, 255, 255, 0.19) 48.96%, rgba(0, 0, 0, 0.19) 53.65%), linear-gradient(90deg, #261934 0%, #a065ca 50.94%, #261934 100%);



    border: 2px solid #a065ca;



    box-shadow: 0px 0px 15px #a065ca;



    outline: none;



    border-radius: 20px;



    font-size: 1.4em;



    font-weight: 900;



    line-height: 1.4em;



    letter-spacing: 1px;



    padding: 5px;



    margin:20px 0;



    cursor: pointer;



    transition: ease-in-out 0.2s;



    text-transform: uppercase;



    width: 90%;



}







body .container .box-contain .contain-login .login .box-form form .box-btn .btn:hover {



    transform: scale(1.07)



}







body .container .box-contain .contain-login .login .box-form form .box-btn .language {



    width: 100%;



    display: flex;



    flex-wrap: wrap;



    justify-content: center;



    gap: 15px



}







body .container .box-contain .contain-login .login .box-form form .box-btn .language .icon {



    width: 50px;



    height: 40px;



    border-radius: 5px;



    cursor: pointer;



    transition: ease-in-out 0.2s;



    position: relative



}







body .container .box-contain .contain-login .login .box-form form .box-btn .language .icon img {



    display: block;



    position: absolute;



    top: 50%;



    left: 50%;



    width: 100%;



    transform: translate(-50%, -50%);



    transition: width 0.15s linear



}







body .container .box-contain .contain-login .login .box-form form .box-btn .language .icon img:hover {



    width: 110%



}







body .container .contain-game {



    width: 100%;



    /* background: url("../image/bottom.png") no-repeat center; */



    background-size: cover



}







body .container .contain-game .box-game {



    width: 100%;



    display: flex;



    justify-content: center;



    align-items: flex-start;



    gap: 1.5em



}







body .container .contain-game .box-game .game {



    width: 180px;



    height: 200px;



    border-radius: 10px;



    font-size: 1.3rem;



    font-weight: 900;



    color: #fff;



    text-transform: uppercase;



    text-shadow: 2px 4px 3px rgba(54, 122, 225, 0.3);



    position: relative;



    background-position: center;



    background-repeat: no-repeat;



    background-size: contain



}







body .container .footer {



    width: 100%;



    margin-top: auto;



    align-self: flex-end



}







body .container .footer #bg-bottom {



    width: 100%;



    height: 300px;



    display: none



}







body .container .footer #bg-bottom div {



    width: 100%;



    height: 100%;



    margin: auto;



    background: url("../image/mpeople.png") no-repeat center bottom;



    background-size: contain



}







body .container .footer h3 {



    width: 100%;



    text-align: center;



    background: rgba(255, 255, 255, 0.386);



    border-top: 1px solid #0b3d87;



    font-size: 1.4em;



    padding: 10px 0;



    user-select: none



}







@media (min-width: 1200px) {



    body .container .box-logo .logo {



        margin-left: 10%



    }



    body .container .box-contain .contain-game .box-game .game {



        width: 140px



    }



}







@media (min-width: 992px) and (max-width: 1199.98px) {



    body .container .box-logo .logo {



        margin-left: 10%



    }



    body .container .contain-game .box-game {



        width: 95%;



        margin: auto;



        align-items: flex-start



    }



    body .container .contain-game .box-game .game {



        font-size: 1rem



    }



    body .container .contain-game .box-game .game span {



        bottom: 45px



    }



}







@media (min-width: 768px) and (max-width: 991.98px) {

    .grid-2{

        display: grid;

        grid-template-columns: 1fr !important;

        padding: 10px;

        grid-gap: 0 !important;

    }



    body .container .box-logo .logo {



        margin-left: 10%



    }



    body .container .contain-game {



        height: 200px



    }



    body .container .contain-game .box-game {



        width: 100%;



        gap: 1em



    }



    body .container .contain-game .box-game .game {



        width: 120px;



        font-size: 1rem



    }



    body .container .contain-game .box-game .game span {



        bottom: 50px



    }



}







@media (min-width: 576px) and (max-width: 767.98px) {

    .mtitle .lang{

        font-size: 1.5rem;

    }

    .mtitle img{

        width: 30px !important;

    }

    .grid-2{

        display: grid;

        grid-template-columns: 1fr !important;

        padding: 10px;

        grid-gap: 0 !important;

    }

    body {



        background: url("https://i.ibb.co/MDPQQhK/bg-mobile.png") no-repeat center center;



        background-size: cover;



    }



    body .container .box-logo {



        background: none;



        justify-content: center



    }



    body .container .box-logo .logo {



        margin: 0



    }



    body .container .box-contain {



        background: none;



        margin-bottom: 10px



    }



    body .container .box-contain .contain-login .login .box-form form .box-btn .btn {



        margin: 15px 0



    }



    body .container .contain-game {



        display: none



    }



    body .container #bg-bottom {



        display: block



    }



    .dis-none{



        display: none;



    }







    body .container .box-contain {



        width: unset;



    }



}



#btnLogin{



    color: white;



}



@media (max-width: 575.98px) {

    .mtitle .lang{

        font-size: 1.5rem !important;

    }

    .mtitle img{

        width: 30px !important;

    }

    .dis-none{



        display: none;



    }



    .grid-2{



        display: grid;



        grid-template-columns: 1fr !important;



        padding: 10px;



        grid-gap: 0 !important;



    }



    body .container .box-contain {



        width: unset;



    }



    body {



        background: url("https://i.ibb.co/MDPQQhK/bg-mobile.png") no-repeat center center;



        background-size: cover;



    }



    body .container .box-logo {



        background: none;



        justify-content: center



    }



    body .container .box-logo .logo {



        width: 250px



    }



    body .container .box-contain {



        background: none;



        height: 400px



    }



    body .container .box-contain .contain-login {



        align-items: flex-start



    }







    body .container .box-contain .contain-login .login .box-form {



        width: 100%;



        margin: auto



    }



    body .container .box-contain .contain-login .login .box-form form .box-btn .btn {



        margin: 15px 0



    }



    body .container .box-contain .contain-login .login .box-form form .box-btn .language {



        gap: 10px



    }



    body .container .box-contain .contain-login .login .box-form .box-title {



        height: 70px



    }



    body .container .box-contain .contain-login .login .box-form .box-title .mtitle {



        font-size: 1.5rem



    }



    body .container .box-contain .contain-login .login .box-form .box-title .mtitle img {



        width: 45px



    }



    body .container .contain-game {



        display: none



    }



    body .container .footer #bg-bottom {



        display: block



    }



    body .container .footer h3 {



        font-size: 1em



    }



}







@-webkit-keyframes coinAnimate {



    from {



        background-position: 0 0%



    }



    to {



        background-position: 100% 0



    }



}







@-moz-keyframes coinAnimate {



    from {



        background-position: 0 0%



    }



    to {



        background-position: 100% 0



    }



}







@-ms-keyframes coinAnimate {



    from {



        background-position: 0 0%



    }



    to {



        background-position: 100% 0



    }



}







@keyframes coinAnimate {



    from {



        background-position: 0 0%



    }



    to {



        background-position: 100% 0



    }



}







.index-game-select {



    display: grid;



    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;



}







@media (max-width: 1400px) {



    .index-game-select {



        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;



    }



}







@media (max-width: 1150px) {



    .index-game-select {



        grid-template-columns: 1fr 1fr 1fr 1fr;



    }



}







@media (max-width: 1000px) {



    .index-game-select {



        grid-template-columns: 1fr 1fr 1fr;



    }

    .mtitle .lang{

        font-size: 2rem;

    }

    body .container .box-logo {

        background: none;

        justify-content: center;

    }

    body .container .box-logo .logo{

        margin-left: 0%;

    }



}

@media (max-width: 400px) {



    body .container .box-contain .contain-login .login .box-form form .box-btn .language .icon {

        width: 35px;

        height: 40px;

    }

    body .container .box-logo {

        width: 100%;

        height: 75px;

    }

}

.lang{

    font-family: Battambang;

}


.grid-2-btn {

    display: grid;

    grid-template-columns: 1fr 1fr;

    grid-gap: 5px;

    justify-content: center;

    align-items: center;

    width: 100%;

}



.grid-text {

    display: flex;

    justify-content: center;

    align-items: center;

}



.grid-2-btn button {

    width: 80%;

    text-align: center;

}



@media (max-width: 500px) {
    .mtitle .lang {
        font-size: 1.2rem !important;
    }
    body .container .box-contain .contain-login .login .box-form form .box-btn .btn {

        font-size: 0.7rem !important;

    }

}



@media (max-width: 300px) {

    body .container .box-contain .contain-login .login .box-form form .box-btn .btn {

        font-size: 0.7em !important;

    }

}



.register-modal {

    background: linear-gradient(151deg, #303030ba, #000000c2);

    border: 2px solid #a065ca;

    box-shadow: 0px 0px 15px #a065ca;

}