* {
    margin: 0;
    padding: 0;
}

html {
    box-sizing: border-box;
    font-family: "Quicksand";
    font-style: normal;
}

body {
    background-image: url("../images/background.png");
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100vh;
    /* max-height: 100vh; */
    max-width: 100vw;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /* overflow: hidden; */
}

/* Class common */

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

.text-style {
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #fff2bb;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.input-style {
    width: 255px;
    height: 40px;
    /*background: linear-gradient(90deg, #e8855a -0.01%, #e8c808 99.99%);*/
    border: 4px solid #ffdd50;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 73px;
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: #5e0b08;
    text-align: center;
}

.btn-style {
    width: 255px;
    height: 40px;
    background: linear-gradient(90deg, #e8855a -0.01%, #e8c808 99.99%);
    border: 4px solid #ffdd50;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 73px;
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: #5e0b08;
}

/* End class common */

.animation_page {
    height: 60vh;
    max-height: 400px;
    width: 100%;
    position: relative;
}

@media (min-width: 376px) {
    .animation_page {
        padding-top: 40px;
    }
}

.header_page {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 98%;
    position: absolute;
    top: 0;
    left: 51%;
    transform: translateX(-50%);
}

.body_page {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    position: absolute;
    bottom: 0;
    height: 207px;
}

.bg_lucky {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 10;
    width: 100%;
    height: 300px;
    background-image: url("../images/florer.png");
    mix-blend-mode: screen;
}

@keyframes textAnima {
    from {
        transform: scale(1) translate(-50%, -50%);
    }

    to {
        transform: scale(1.05) translate(-50%, -50%);
    }
}

.lucky_call_text {
    width: 100%;
    position: absolute;
    z-index: 9;
    bottom: -132px;
    left: 53%;
    transform: translate(-50%, -50%);
    max-width: 350px;
    animation: textAnima 0.5s linear infinite alternate;
}

.footer_page {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-direction: column;
    margin-bottom: 25px;
}

/* Animation cat */

@keyframes walk {
    0% {
        background-image: url("../images/Cat2.png");
    }

    50% {
        background-image: url("../images/Cat3.png");
    }

    100% {
        background-image: url("../images/Cat4.png");
    }
}

#lucky_call {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    margin-top: 10px;
}

    #lucky_call img {
        max-width: 350px;
    }

#cat {
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    position: absolute;
    animation-name: walk;
    animation-duration: 1.2s;
    animation-timing-function: step-start;
    animation-iteration-count: infinite;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
    background-position: center;
}

/* Animation coin */
@keyframes coin {
    from {
        top: 2%;
    }

    to {
        top: 6%;
        right: 17%;
    }
}

.coin_animate {
    position: absolute;
    right: 20%;
    animation: coin 1s linear infinite alternate;
}

@keyframes coin_1 {
    from {
        top: 4%;
    }

    to {
        top: 8%;
        left: 17%;
    }
}

.coin_animate1 {
    position: absolute;
    left: 10%;
    animation: coin_1 1s linear infinite alternate;
}

@keyframes coin_2 {
    from {
        top: 15%;
        left: 45%;
    }

    to {
        top: 18%;
    }
}

.coin_animate2 {
    position: absolute;
    left: 40%;
    animation: coin_2 1s linear infinite alternate;
}

@keyframes coin_3 {
    from {
        top: 35%;
        right: 20%;
    }

    to {
        top: 40%;
    }
}

.coin_animate3 {
    position: absolute;
    right: 20%;
    animation: coin_3 1s linear infinite alternate;
}

@keyframes coin_4 {
    from {
        bottom: 0%;
        right: 20%;
    }

    to {
        bottom: 10px;
    }
}

.coin_animate4 {
    z-index: 10;
    position: absolute;
    left: 40%;
    animation: coin_4 1s linear infinite alternate;
}

@keyframes coin_5 {
    from {
        bottom: 0%;
        right: 10%;
    }

    to {
        bottom: -10px;
    }
}

.coin_animate5 {
    position: absolute;
    z-index: 11;
    right: 20%;
    animation: coin_5 1s linear infinite alternate;
}

@keyframes coin_5 {
    from {
        bottom: -30%;
        right: 20%;
    }

    to {
        bottom: -10px;
    }
}

.coin_animate6 {
    position: absolute;
    right: 0%;
    bottom: 10%;
}

.coin_animate7 {
    position: absolute;
    left: 0;
    bottom: 0%;
}

@keyframes coin_8 {
    from {
        bottom: -30%;
        left: 10%;
    }

    to {
        bottom: -10px;
    }
}

.coin_animate8 {
    position: absolute;
    left: 0%;
    top: 50%;
    animation: coin_8 1s linear infinite alternate;
}

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

    to {
        transform: scale(1.5);
    }
}

.footer_page button {
    position: relative;
}

.light_one {
    position: absolute;
    left: -26px;
    top: 3%;
    mix-blend-mode: screen;
    animation: light_ani 0.5s linear infinite alternate;
}

.light_two {
    position: absolute;
    right: -26px;
    top: 3%;
    mix-blend-mode: screen;
    animation: light_ani 0.7s linear infinite alternate;
}

/* END INDEX PAGE */

/* LOADING PAGE */
.loading-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}

.text_loading {
    display: flex;
    gap: 3px;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #fff2bb;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.loading-container {
    margin-bottom: 100px;
    width: 80vw;
    background: #7c0a0a;
    box-shadow: inset 0px 3px 3px rgba(0, 0, 0, 0.5);
    border-radius: 30px;
    height: 12px;
}

.loading-bar {
    height: 100%;
    background: #ffdd50;
    border-radius: 30px;
    animation: loading 2s ease-in-out;
}

@keyframes loading {
    0% {
        width: 0%;
    }

    50% {
        width: 50%;
    }

    100% {
        width: 100%;
    }
}

/* END LOADING PAGE */

/* LOGIN ERROR PAGE */
.bg_overlay-login-error {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 99;
}

.popup_warning {
    position: absolute;
    bottom: 22%;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    /* backdrop-filter: blur(2px); */
    border-radius: 20px;
    width: 320px;
    overflow: hidden;
}

    .popup_warning .header-popup_warning {
        height: 60px;
        background: rgba(167, 0, 0, 0.7);
        text-align: center;
        font-family: "Quicksand";
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        text-transform: uppercase;
        color: #fff2bb;
        line-height: 60px;
    }

    .popup_warning .body-popup_adv {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        min-height: 156px;
        background: rgba(255, 255, 255, 0.7);
    }

    .popup_warning .btn_ok {
        width: 103px;
        height: 41px;
        background: linear-gradient(90deg, #e8855a -0.01%, #e8c808 99.99%);
        border: 2px solid #ffdd50;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        border-radius: 73px;
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        line-height: 18px;
        text-transform: uppercase;
        color: #5e0b08;
    }

    .popup_warning .body-popup_warning {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
        min-height: 156px;
        background: rgba(255, 255, 255, 0.7);
        padding: 20px 0;
    }

        .popup_warning .body-popup_warning .desc {
            font-weight: 400;
            font-size: 14px;
            line-height: 17px;
            text-align: center;
            color: #330908;
            width: 60%;
        }


.bg_overlay-login-error .text_box {
    min-width: 156px;
    min-height: 64px;
    text-align: center;
    max-width: 80%;
    padding: 5px 0;
    background: linear-gradient(90deg, #e8855a -0.01%, #e8c808 99.99%);
    border-radius: 20px;
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 800;
    font-size: 20px;
    line-height: 24px;
    color: #ffffff;
    text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* END LOGIN ERROR PAGE */

/* LUCKY CALL PAGE */
.overlay-gift {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes bg_gift_rotate {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes gift_animation {
    from {
        top: 48%;
    }

    to {
        top: 52%;
    }
}

@keyframes walk_2 {
    0% {
        background-image: url("../images/gift/mystery.png");
    }

    100% {
        background-image: url("../images/gift/mystery_2.png");
    }
}

.overlay-gift .gift {
    height: 212px;
    width: 180px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-name: walk_2;
    animation-duration: 1.2s;
    animation-timing-function: unset;
    animation-iteration-count: infinite;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 99;
    transition: all 0.5s ease-in-out;
}

.overlay-gift .bg_gift {
    animation: bg_gift_rotate 2.5s linear infinite;
}

.overlay-gift .open_gift_scale {
    transition: all 0.5s ease-in-out;
    transform: translate(-50%, -50%) scale(5);
}

.open_gift_scale_2 {
    transition: all 0.5s ease-in-out;
    transform: scale(4);
}

#cat_2 {
    width: 250px;
    height: 250px;
    top: 39%;
    left: 50%;
    position: absolute;
    animation-name: walk;
    animation-duration: 1s;
    animation-timing-function: step-start;
    animation-iteration-count: infinite;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.lucky_call_text_2 {
    width: 193px;
    position: absolute;
    z-index: 9;
    bottom: 40px;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 350px;
    animation: textAnima 0.5s linear infinite alternate;
}

.bg_lucky_home {
    position: absolute;
    right: 0;
    bottom: 90px;
    z-index: 10;
    width: 100%;
    height: 300px;
    background-image: url("../images/florer.png");
    mix-blend-mode: screen;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    height: 64px;
    left: 0px;
    right: 0px;
    top: 0px;
    background: rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid #fff2bb;
    backdrop-filter: blur(2px);
    z-index: 99;
}

    header .header_icon {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 22px;
    }

footer {
    width: 100%;
    position: fixed;
    height: 80px;
    left: 0;
    right: 0;
    bottom: 0px;
    backdrop-filter: blur(2px);
    background-image: url("../images/menu/menu.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

    footer ul {
        display: flex;
        align-items: center;
        justify-content: space-around;
        list-style-type: none;
        height: 100%;
    }

        footer ul li a {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            font-family: "Quicksand";
            gap: 5px;
            font-style: normal;
            font-weight: 600;
            font-size: 10px;
            line-height: 12px;
            font-feature-settings: "case" on;
            color: #fff2bb;
            text-decoration: none;
            position: relative;
        }

        footer ul li {
            position: relative;
            height: 100%;
            display: flex;
            align-items: center;
        }

#event-daily {
    position: relative;
    height: 400px;
}

    #event-daily .ranking_coin .bg-title {
        position: absolute;
        width: 177px;
        height: 28px;
        top: 15px;
        left: 50%;
        transform: translateX(-50%);
        background: #a446d318;
        background-blend-mode: soft-light;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #5e0b08;
        background: linear-gradient(90deg, #e8855a -0.01%, #e8c808 99.99%);
    }

        #event-daily .ranking_coin .bg-title .title {
            color: #5e0b08;
            font-family: "Quicksand";
            font-style: normal;
            font-weight: 800;
            font-size: 18px;
            line-height: 22px;
            text-align: center;
            text-transform: uppercase;
        }

    #event-daily .ranking_coin .row_my-coin {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        top: 45px;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
    }

        #event-daily .ranking_coin .row_my-coin .title_my-coin {
            font-family: "Quicksand";
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 17px;
            text-align: center;
            color: #fff2bb;
        }

        #event-daily .ranking_coin .row_my-coin .number_coin {
            display: flex;
            align-items: center;
            gap: 5px;
        }

            #event-daily .ranking_coin .row_my-coin .number_coin span {
                font-family: "Quicksand";
                font-style: normal;
                font-weight: 700;
                font-size: 14px;
                line-height: 17px;
                text-align: center;
                color: #fff2bb;
            }

@keyframes gift {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(10px);
    }
}

#event-daily .list-box .list-box-item .gift_1 {
    animation: gift 1s linear infinite alternate;
}

#event-daily .list-box .list-box-item .gift_2 {
    animation: gift 1.1s linear infinite alternate;
}

#event-daily .list-box .list-box-item .gift_3 {
    animation: gift 1.2s linear infinite alternate;
}

#event-daily .list-box .list-box-item .gift_4 {
    animation: gift 1.3s linear infinite alternate;
}

#event-daily .list-box .list-box-item .gift_5 {
    animation: gift 1.4s linear infinite alternate;
}

#event-daily .list-box .list-box-item .gift_6 {
    animation: gift 1.5s linear infinite alternate;
}

#event-daily .list-box {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}

.box-spin-of-7 {
    position: absolute;
    top: 45%;
    left: -20px;
    width: 51px;
    height: 33px;
    background: #fff2bb;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

    .box-spin-of-7 span:first-child {
        font-style: normal;
        font-weight: 400;
        font-size: 10px;
        line-height: 12px;
        text-align: center;
        color: #5e0b08;
    }

    .box-spin-of-7 span:last-child {
        font-style: normal;
        font-weight: bold;
        font-size: 10px;
        line-height: 12px;
        text-align: center;
        color: #5e0b08;
    }

.list-box-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.id_my {
    position: absolute;
    top: 12%;
    left: 3%;
    z-index: 99;
}

#popup_daily {
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    height: 70px;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 87%;
    z-index: 99;
}

.text_hello {
    position: absolute;
    font-size: 16px;
    top: -30%;
}

#popup_daily .close_popup {
    position: absolute;
    top: -9px;
    right: -10px;
    z-index: 99;
}

#popup_daily .row_top {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    justify-content: center;
}

    #popup_daily .row_top .img {
        position: relative;
        min-width: 15%;
    }

.img_abso {
    position: absolute;
    bottom: -15px;
    right: 4px;
}

#popup_daily .title_event {
    width: 92px;
    height: 44px;
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 600;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
    color: #fff2bb;
    background: rgba(167, 0, 0, 0.7);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    align-items: center;
    display: flex;
    justify-content: center;
}

#popup_daily .title_bot {
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 600;
    font-size: 10px;
    line-height: 12px;
    text-align: center;
    font-feature-settings: "case" on;
    color: #330908;
    width: 70%;
}

.gift_phone {
    height: 102px;
    position: fixed;
    top: 15%;
    right: 0;
    z-index: 99;
}

    .gift_phone .gift_phone_1 {
        position: absolute;
        top: 0;
        right: 0;
    }

        .gift_phone .gift_phone_1 .img_2 {
            position: absolute;
            left: -7px;
            top: -20px;
            animation: bg_gift_rotate 2.5s linear infinite;
        }

        .gift_phone .gift_phone_1 .img_3 {
            position: absolute;
            left: -2px;
            top: -9px;
        }

    .gift_phone .item_contact {
        position: absolute;
        bottom: -65%;
        right: 0;
        z-index: 99;
    }

        .gift_phone .item_contact.phone {
            right: 0;
            z-index: 99;
            bottom: -124px;
        }

        .gift_phone .item_contact .info {
            position: absolute;
            top: 2px;
            left: 8px;
            width: 44px;
            height: 44px;
            border-radius: 100%;
            background: linear-gradient(147.97deg, #351093 26.34%, #550050 80.76%);
            font-style: normal;
            font-weight: 700;
            font-size: 10px;
            line-height: 12px;
            display: flex;
            align-items: center;
            text-align: center;
            font-feature-settings: "case" on;
            color: #fff2bb;
        }

            .gift_phone .item_contact .info img {
                position: absolute;
                top: -16px;
                right: -4px;
            }

        .gift_phone .item_contact.phone img {
            top: 0px;
            right: 9px;
        }

/* END LUCKY CALL PAGE */

/* PAGE OPEN GIFT */
.overlay-gift-open {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient( 83.5% 59.17% at 53.72% 33.74%, #55060349 0%, #110707 100% );
}

@keyframes giftOpen {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes giftOpen_2 {
    from {
        transform: rotate(-15deg);
    }

    to {
        transform: rotate(30deg);
    }
}

.bg-call-gift {
    border-radius: 20px;
    position: fixed;
    width: 250%;
    height: 250%;
    animation: giftOpen 1.2s linear infinite;
}

.bg-call-gift_2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: giftOpen_2 1.2s linear infinite alternate;
}
/* END PAGE OPEN GIFT */

/* PAGE POPUP IS OVER */
.over_page {
    height: 243px;
    padding-top: 20px;
}

.box-content_over .cat_content {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

    .box-content_over .cat_content .box_cat {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
    }

        .box-content_over .cat_content .box_cat p {
            width: 100px;
            height: 34px;
            background: rgba(167, 0, 0, 0.7);
            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
            border-radius: 73px;
            font-style: normal;
            font-weight: 600;
            font-size: 10px;
            text-align: center;
            color: #fff2bb;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.box-content_over .desc_over {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    color: #330908;
    margin-top: 10px;
    width: 90%;
    padding: 10px 0 0 0;
    margin: 0 auto;
}

/* END PAGE POPUP IS OVER */

/* PAGE OPEN PHONE */
.bg-open-phone {
    position: absolute;
}

    .bg-open-phone .icon-close {
        position: absolute;
        right: 3px;
        top: 1px;
    }

.box-content_phone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

    .box-content_phone .content_phone {
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 18px;
        text-align: justify;
        color: #330908;
        width: 254px;
    }

    .box-content_phone .title_phone {
        margin-top: 10px;
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        line-height: 18px;
        text-align: center;
        color: #330908;
    }

.opened-phone {
    position: relative;
    height: 328px;
    width: 326px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .opened-phone .img_1 {
        position: absolute;
        z-index: 9;
        left: 50%;
        transform: translateX(-50%);
    }

    .opened-phone .img_2 {
        position: absolute;
        left: 5%;
        animation: bg_gift_rotate 2.5s linear infinite;
    }

    .opened-phone .img_3 {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        mix-blend-mode: screen;
    }
/* END PAGE PHONE */

/* PAGE POPUP CONFIRM */
.box-content_phone .title_otp {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    color: #330908;
}

.box-content_phone .list_number {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    padding: 6px;
    margin-top: 15px;
}

    .box-content_phone .list_number .item_number {
        width: 36px;
        height: 36px;
        background: #474747;
        border-radius: 8px;
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        line-height: 18px;
        display: flex;
        align-items: center;
        color: #ffffff;
        justify-content: center;
    }

.body-popup_warning .group_btn .btn_cancel {
    background: #575757;
    border: 2px solid #fff2bb;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 73px;
    width: 100px;
    height: 42px;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    text-transform: uppercase;
    color: #fff2bb;
}

/* END PAGE POPUP CONFIRM */
/* PAGE AFTER DAILY WEEKED */
#popup_daily .title_event_after_daily {
    width: 182px;
    height: 44px;
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 600;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
    color: #fff2bb;
    background: rgba(167, 0, 0, 0.7);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    align-items: center;
    display: flex;
    justify-content: center;
}

.row_top_after {
    gap: 20px;
}
/* PAGE AFTER DAILY WEEKED */

/* Modal setting */
.modal-setting {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #ffffff;
    /* backdrop-filter: blur(2px); */
    border-radius: 20px;
    padding: 24px;
    position: fixed;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    max-width: 281px;
}

.row_setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}

.group_flag {
    display: flex;
    align-items: center;
    gap: 5px;
}

    .group_flag .no_active {
        position: relative;
    }

        .group_flag .no_active::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            background-color: #330908b3;
            width: 24px;
            height: 25px;
            border-radius: 100%;
        }

.row_setting span {
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    color: #ffffff;
}

.group_sound {
    display: flex;
    align-items: center;
    gap: 5px;
}

    .group_sound .sound-item {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        background: #676767;
        border-radius: 0px 12px 12px 0px;
        width: 48px;
        height: 23px;
    }

        .group_sound .sound-item.off {
            border-radius: 12px 0px 0px 12px;
        }

    .group_sound .active {
        background: rgba(167, 0, 0, 0.7);
    }

        .group_sound .active span {
            color: #fff2bb;
        }

.cancel_weekly_btn {
    width: 103px;
    height: 34px;
    background: rgba(167, 0, 0, 0.7);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 73px;
    border: none;
    outline: none;
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 12px;
    text-align: center;
    color: #fff2bb;
}

.text-note-setting {
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    color: #ffffffde;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    position: absolute;
    top: 470px;
    left: 50%;
    transform: translateX(-50%);
}
/* End modal setting */

/* Modal leader board */
.content-leader-board {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.row-column-table {
    width: 320px;
    height: 40px;
    background: linear-gradient(90deg, #e8855a -0.01%, #e8c808 99.99%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 5px;
}

    .row-column-table span {
        width: 25%;
        text-align: center;
        font-weight: 700;
        font-size: 15px;
        line-height: 12px;
        font-feature-settings: "case" on;
        color: #330908;
    }

.text-perior {
    font-style: normal;
    font-weight: 600;
    font-size: 10px;
    line-height: 12px;
    font-feature-settings: "case" on;
    color: #fff2bb;
    text-align: left;
    width: 80%;
    margin: 5px auto;
}

.table-data {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 30px;
    padding: 20px;
    margin: 0 10px;
}

    .table-data .list-row-data {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

.list-row-data .row-item {
    width: 308px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 20px;
    flex: 1;
}

    .list-row-data .row-item span {
        font-weight: 300;
        font-size: 12px;
        line-height: 12px;
        color: #fff2bb;
        width: 60px;
        text-align: right;
    }

        .list-row-data .row-item span.coin {
            font-weight: 700;
            font-size: 10px;
            line-height: 12px;
            text-align: right;
            font-feature-settings: "case" on;
            color: #fff2bb;
        }

        .list-row-data .row-item span.num {
            font-weight: 700;
            font-size: 14px;
            line-height: 18px;
            text-align: center;
            color: #fff2bb;
            width: 25%;
        }

.w-25 {
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
    font-weight: 300;
    font-size: 10px;
    line-height: 12px;
    text-align: right;
    font-feature-settings: "case" on;
    color: #fff2bb;
}

    .pagination span.active-page {
        font-weight: 700;
        font-size: 10px;
        line-height: 12px;
        text-align: right;
        font-feature-settings: "case" on;
        color: #fff2bb;
        border: 1px solid #fff2bb;
        padding: 0 4px;
    }

.text_bottom {
    font-weight: 700;
    font-size: 10px;
    line-height: 12px;
    font-feature-settings: "case" on;
    color: #fff2bb;
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}

    .text_bottom.decoration {
        text-decoration: underline;
    }

.content-leader-board .group_btn {
    gap: 40px;
}

    .content-leader-board .group_btn button:first-child {
        width: 92px;
        height: 42px;
        background: linear-gradient(90deg, #e8855a -0.01%, #e8c808 99.99%);
        border: 2px solid #ffdd50;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        border-radius: 73px;
        font-weight: 700;
        font-size: 14px;
        line-height: 18px;
        text-transform: uppercase;
        color: #5e0b08;
    }

    .content-leader-board .group_btn button:last-child {
        width: 100px;
        height: 42px;
        background: #575757;
        border: 2px solid #fff2bb;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        border-radius: 73px;
        font-weight: 700;
        font-size: 14px;
        line-height: 18px;
        text-transform: uppercase;
        color: #fff2bb;
    }
/* End modal leader board */

/* PAGE WINNER LIST */

.bg-winnerList {
    background-image: url("../images/winnerlist/bg-winnerlist.png");
}

#page-winnerlist {
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding-bottom: 100px;
}

    #page-winnerlist .title-main p:first-child {
        font-weight: 600;
        font-size: 16px;
        line-height: 12px;
        text-align: center;
        font-feature-settings: "case" on;
        color: #fff2bb;
    }

    #page-winnerlist .title-main p:last-child {
        font-family: "Montserrat";
        font-weight: 800;
        font-size: 36px;
        line-height: 44px;
        text-align: center;
        text-transform: uppercase;
        background: linear-gradient( 11.07deg, #78140c -4.89%, #e2a630 27.33%, #f8da08 51.46%, #ffc263 78.36%, #ff5127 109.67% );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
    }

.group_winner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
}

.group_winner-item {
    width: 286px;
    height: 21px;
    background: linear-gradient(90deg, #e8855a -0.01%, #e8c808 99.99%);
    border-radius: 20px;
    font-weight: 700;
    font-size: 15px;
    font-feature-settings: "case" on;
    color: #330908;
    text-align: center;
    line-height: 21px;
}

.bg_winner-list {
    background-image: url("../images/winnerlist/bg-footer.png");
}

.winner_section {
    position: relative;
}

.btn_winnerList {
    position: absolute;
    width: 100px;
    height: 21px;
    right: 12px;
    bottom: 12px;
    background: linear-gradient( 128.05deg, #efc008 9.55%, #a83808 51.07%, #f8bf10 86.43% );
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    line-height: 21px;
    font-feature-settings: "case" on;
    color: #fff2bb;
}
/* END PAGE WINNER LIST */

/* MY GIFT PAGE */

.my-gift-header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 330px;
}

.table-data-gift {
    background: rgba(0, 0, 0, 0.7);
    /* backdrop-filter: blur(10px); */
    border-radius: 30px;
    padding: 20px;
    width: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .table-data-gift .list-data {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 28px;
    }

        .table-data-gift .list-data .row-data {
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 90%;
        }

            .table-data-gift .list-data .row-data span {
                font-style: normal;
                font-weight: 300;
                font-size: 12px;
                line-height: 16px;
                font-feature-settings: "case" on;
                color: #fff2bb;
            }

                .table-data-gift .list-data .row-data span.prize-text {
                    width: 40%;
                    text-align: center;
                }

    .table-data-gift.table-winner-list .list-data .row-data span {
        width: 33%;
    }

.bg_my-gift {
    background-image: url("../images/bg-footer-my-gift.png");
}

/* END MY GIFT PAGE */

/* GUIDE PAGE */
.group-info_service {
    padding: 15px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 30px;
    height: calc(100vh - 300px);
    overflow-y: scroll;
    color: #fff;
}

    .group-info_service .title {
        font-style: normal;
        font-weight: 700;
        font-size: 16px;
        line-height: 20px;
        text-align: center;
        text-transform: uppercase;
        color: #fff2bb;
        margin-bottom: 20px;
    }

    .group-info_service ul {
        margin-left: 20px;
    }

    .group-info_service .desc {
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 18px;
        text-align: justify;
        color: #fff2bb;
        margin-bottom: 20px;
    }

        .group-info_service .desc span {
            font-weight: 700;
        }

.special_gift {
    position: relative;
    background: #ffdd50;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 102px;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 54px;
    text-align: center;
    text-transform: uppercase;
    color: #330908;
    width: 300px;
    height: 54px;
    margin: 20px auto;
}

    .special_gift .iphone {
        position: absolute;
        left: -15px;
        top: 47%;
        transform: translateY(-50%);
    }

    .special_gift .cir {
        position: absolute;
        left: -13px;
        top: -37%;
        animation: bg_gift_rotate 1.5s linear infinite;
    }

.bg_guide {
    background-image: url("../images/bg-footer-guide.png");
}

.table-guide {
    border-bottom: 1px solid #fff2bb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .table-guide span {
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        line-height: 18px;
        color: #fff2bb;
        text-align: center;
    }

.title-table-col {
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    color: #fff2bb;
    text-align: center;
    margin-bottom: 10px;
}

.content-table {
    display: flex;
}

.col-table-guide {
    border-right: 1px solid #fff2bb;
    padding-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
}

.table-guide_2 {
    gap: 60px;
    border-bottom: 1px solid #fff2bb;
    display: flex;
    align-items: center;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    color: #fff2bb;
    text-align: center;
}

.col-table-guide_2 {
    padding-left: 10px;
    width: 67%;
}

.desc_2 {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #fff2bb;
    margin-bottom: 20px;
}

.col-table-guide_2 .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.col-table-guide_3 {
    width: 80%;
    padding-left: 20px;
}

    .col-table-guide_3 .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .col-table-guide_3 .row .desc_2:first-child {
            width: 30%;
        }

        .col-table-guide_3 .row .desc_2:last-child {
            text-align: center;
            width: 33%;
        }

.line_table {
    height: 1px;
    background-color: #fff2bb;
    width: 100%;
}
/* END GUIDE PAGE */

/* POPUP WINNER LIST */
.title_winner-list {
    font-weight: 700;
    font-size: 16px;
    line-height: 41px;
    text-transform: uppercase;
    text-align: center;
    color: #fff2bb;
    width: 340px;
    height: 41px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 20px;
}
/* END POPUP WINNER LIST */