/*menu left*/
.section {
    transition: margin 700ms;
}

    .section.close {
        margin-left: -400px;
    }
/*end*/

/*scale theo width device ẩn hoặc show một số element*/


@media screen and (min-width: 1000px) and (min-width: 1100px) {
    div.example {
        font-size: 50px;
        padding: 50px;
        border: 8px solid black;
        background: yellow;
    }
}

@media screen and (max-width:999.98px) {
    .casino-sport-selector {
        display: none !important;
    }

    .hamburger {
        display: none !important;
    }
}

@media screen and (max-width: 900px) and (min-width: 600px) {
    div.example {
        font-size: 50px;
        padding: 50px;
        border: 8px solid black;
        background: yellow;
    }
}

/*responsive games + providers */
/*@media screen and (min-width: 769px) {
    .splide__slide[data-v-7b0033d4] {
        margin-right: 16px !important;
        width: calc(((100% + 16px) / 6) - 16px) !important;
    }
}

@media screen and (min-width: 578px) and (max-width: 769.98px) {
    .splide__slide[data-v-7b0033d4] {
        margin-right: 16px !important;
        width: calc(((100% + 16px) / 4) - 16px) !important;
    }
}*/


/*responsive battle*/
/*
@media screen and (min-width: 1043px) {
    .splide__slide[data-v-d3323f70] {
        margin-right: 16px !important;
        width: calc(((100% + 16px) / 3) - 16px) !important;
    }
}

@media screen and (min-width: 706px) and (max-width: 1043.98px) {
    .splide__slide[data-v-d3323f70] {
        margin-right: 16px !important;
        width: calc(((100% + 16px) / 2) - 16px) !important;
    }
}
*/


/*responsive slider footer*/
/*
@media screen and (min-width: 1001px) {
    .splide__slide[data-v-c8d071be] {
        width: calc(12.5%) !important;
    }
}

@media screen and (min-width: 801px) and (max-width: 1001.98px) {
    .splide__slide[data-v-c8d071be] {
        width: calc(14.2857%) !important;
    }
}


@media screen and (min-width: 601px) and (max-width: 801.98px) {
    .splide__slide[data-v-c8d071be] {
        width: calc(16.6667%) !important;
    }
}

@media screen and (min-width: 501px) and (max-width: 601.98px) {
    .splide__slide[data-v-c8d071be] {
        width: calc(20%) !important;
    }
}

@media screen and (min-width: 401px) and (max-width: 501.98px) {
    .splide__slide[data-v-c8d071be] {
        width: calc(25%) !important;
    }
}
*/

/*end*/

/*responsive modal login/signup */
@media screen and (max-width: 720px) {
    .modal-login {
        max-width: 430px !important;
    }
}
/*end*/

/*preloader*/

.preloader {
    width: 100%;
    height: 100%;
    background: #2e0327;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}


.scene .cube__face--left i:nth-child(1) {
    grid-area: 1 / 1 / 1 / 1;
}

.scene .cube__face--left i:nth-child(2) {
    grid-area: 2 / 1 / 2 / 1;
}

.scene .cube__face--left i:nth-child(3) {
    grid-area: 3 / 1 / 3 / 1;
}

.scene .cube__face--left i:nth-child(4) {
    grid-area: 1 / 3 / 1 / 3;
}

.scene .cube__face--left i:nth-child(5) {
    grid-area: 2 / 3 / 2 / 3;
}

.scene .cube__face--left i:nth-child(6) {
    grid-area: 3 / 3 / 3 / 3;
}

.scene .cube__face--right i:nth-child(1) {
    grid-area: 1 / 1 / 1 / 1;
}

.scene .cube__face--right i:nth-child(2) {
    grid-area: 3 / 1 / 3 / 1;
}

.scene .cube__face--right i:nth-child(3) {
    grid-area: 2 / 2 / 2 / 2;
}

.scene .cube__face--right i:nth-child(4) {
    grid-area: 1 / 3 / 1 / 3;
}

.scene .cube__face--right i:nth-child(5) {
    grid-area: 3 / 3 / 3 / 3;
}

.scene .cube__face--bottom i:nth-child(1) {
    grid-area: 1 / 1 / 1 / 1;
}

.scene .cube__face--bottom i:nth-child(2) {
    grid-area: 3 / 1 / 3 / 1;
}

.scene .cube__face--bottom i:nth-child(3) {
    grid-area: 1 / 3 / 1 / 3;
}

.scene .cube__face--bottom i:nth-child(4) {
    grid-area: 3 / 3 / 3 / 3;
}

.scene .cube__face--top i:nth-child(1) {
    grid-area: 1 / 1 / 1 / 1;
}

.scene .cube__face--top i:nth-child(2) {
    grid-area: 2 / 2 / 2 / 2;
}

.scene .cube__face--top i:nth-child(3) {
    grid-area: 3 / 3 / 3 / 3;
}

.scene .cube__face--back i:nth-child(1) {
    grid-area: 1 / 1 / 1 / 1;
}

.scene .cube__face--back i:nth-child(2) {
    grid-area: 3 / 3 / 3 / 3;
}

.scene .cube__face--front i:nth-child(1) {
    grid-area: 2 / 2 / 2 / 2;
}

.scene:after, .scene .cube__face i:after {
    display: block;
    content: "";
    position: absolute;
}

.roll {
    margin-bottom: 100px;
    min-height: 30px;
}

    .roll:hover .roll__three-d-box, .roll:focus .roll__three-d-box {
        transform: translateZ(-25px) rotateX(90deg);
    }

.roll__three-d-box {
    transition: all 0.3s ease-out;
    transform: translateZ(-25px);
    transform-style: preserve-3d;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.roll__three-d-box--front {
    transform: rotatex(0deg) translatez(14px);
}

.roll__three-d-box--back {
    transform: rotatex(-90deg) translatez(14px);
    background-color: #c0392b !important;
}

.roll:hover ~ div {
    transform: scale(0.7);
}

    .roll:hover ~ div > div {
        animation-duration: 0.5s;
    }

.scene {
    width: 150px;
    height: 150px;
    perspective: 600px;
    transition: 1.5s;
}

    .scene:after {
        width: 250px;
        height: 30px;
        background: #c0392b;
        border-radius: 50%;
        filter: blur(40px);
        position: relative;
        top: 112px;
        left: 35px;
        z-index: 50;
        opacity: 0.4;
    }

    .scene input {
        display: none;
    }

        .scene input:checked + div {
            animation-play-state: paused;
            animation-duration: 0.5s;
        }

    .scene .cube {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
        transform: translateZ(-100px);
        animation: roll 8s linear infinite alternate;
    }

    .scene .cube__face {
        display: grid;
        grid-template: repeat(3, 45px)/repeat(3, 45px);
        border: 1px solid #2e0327;
        background: #4b0e40;
        position: absolute;
        width: 200px;
        height: 200px;
        padding: 32.5px;
    }

    .scene .cube__face--front i::after {
        background: #e74c3c;
    }

    .scene .cube__face--back i::after {
        background: #1abc9c;
    }

    .scene .cube__face--top i::after {
        background: #2980b9;
    }

    .scene .cube__face--bottom i::after {
        background: #f1c40f;
    }

    .scene .cube__face--right i::after {
        background: #27ae60;
    }

    .scene .cube__face--left i::after {
        background: #9b59b6;
    }

    .scene .cube__face--front {
        transform: rotateY(0deg) translateZ(100px);
    }

    .scene .cube__face--back {
        transform: rotateY(90deg) translateZ(100px);
    }

    .scene .cube__face--left {
        transform: rotateY(180deg) translateZ(100px);
    }

    .scene .cube__face--right {
        transform: rotateY(-90deg) translateZ(100px);
    }

    .scene .cube__face--top {
        transform: rotateX(90deg) translateZ(100px);
    }

    .scene .cube__face--bottom {
        transform: rotateX(-90deg) translateZ(100px);
    }

    .scene .cube__face i {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
    }

        .scene .cube__face i:after {
            width: 25px;
            height: 25px;
            border-radius: 50%;
        }
/*# sourceMappingURL=application.css.map */
@keyframes redlight {
    from {
        color: red;
    }

    to {
        color: black;
    }
}

@keyframes roll {
    from, to {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    16% {
        transform: rotateY(-90deg);
    }

    33% {
        transform: rotateY(-90deg) rotateZ(90deg);
    }

    50% {
        transform: rotateY(-180deg) rotateZ(90deg);
    }

    66% {
        transform: rotateY(-270deg) rotateX(90deg);
    }

    83% {
        transform: rotateX(90deg);
    }
}
/*end*/



.note_exchange_rate {
    display: inline-flex;
    align-items: center; /* keeps text and img aligned vertically */
    gap: 4px;
}


/*new*/

/* Mobile (<640px) */
@media (max-width: 639px) {
    .banner-mobile {
        display: block !important;
    }

    .banner-pc {
        display: none !important;
    }
}

/* Desktop (>=640px) */
@media (min-width: 640px) {
    .banner-mobile {
        display: none !important;
    }

    .banner-pc {
        display: block !important;
    }
    .banner-bg {
/*        margin-top: 4.5rem !important;*/
    }
}

@media (max-width: 639px) {
    .header-mobile {
        display: block !important;
    }

    .header-pc {
        display: none !important;
    }
    .banner-bg {
/*        margin-top: 3.5rem !important;*/
    }
    .tabbar {
        display: flex !important;
    }

    footer, .sidebar {
        display: none !important;
    }
}

@media (min-width: 640px) {
    .header-mobile {
        display: none !important;
    }

    .header-pc {
        display: block !important;
    }

    .tabbar {
        display: none !important;
    }

    footer, .sidebar {
        display: block !important;
    }
}

.banner-content {
    transform-origin: top left;
}

@media (min-width: 640px) {
    .banner-bg {
        width: 100%;
/*        max-width: 1168px;*/
    }

/*    .banner-content {
        transform: scale(calc(100% / 1168));
    }*/

/*    .tabbar {
        display: none !important;
    }*/
}

@media (max-width: 639px) {
    .banner-content {
        transform: none;
    }
/*    .tabbar {
        display: flex !important;
    }*/
}

.title_list {
    width: auto;
    display: inline-flex;
    background-color: #0BBB59;
    padding: 6px 10px 4px 10px;
    border-radius: 8px 8px 0px 0px;
}