@charset "UTF-8";

.hero-banner[data-v-cc0a0dd9] {
    --aspect-ratio: 23.75%;
    --swiper-pagination-bottom: 8px;
    height: 100%;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.hero-banner[data-v-cc0a0dd9] .swiper .swiper-slide {
    background: #0c0d16;
    border-radius: 12px;
    cursor: pointer
}

.hero-banner[data-v-cc0a0dd9] .swiper .swiper-slide .banner-image {
    height: 318px
}

.hero-banner[data-v-cc0a0dd9] .swiper .swiper-slide .banner-image img {
    border-radius: 12px;
    height: 100%;
    -o-object-fit: fill;
    object-fit: fill
}

.hero-banner[data-v-cc0a0dd9] .swiper .swiper-pagination {
    bottom: 24px;
    left: 6.387%;
    width: -moz-fit-content;
    width: fit-content
}

.hero-banner[data-v-cc0a0dd9] .swiper .swiper-pagination .swiper-pagination-bullet {
    background: #f7f9ff;
    border-radius: 100%;
    display: inline-block;
    height: 6px;
    margin: 0 3px;
    opacity: .4;
    width: 6px
}

.hero-banner[data-v-cc0a0dd9] .swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #ff274e;
    border-radius: 100px;
    opacity: 1;
    width: 24px
}

.hero-banner__prev[data-v-cc0a0dd9] {
    top: 135px
}

.hero-banner__next[data-v-cc0a0dd9] {
    top: -105px
}

.flex-box[data-v-cc0a0dd9] {
    align-items: center;
    display: flex
}

.just-between[data-v-cc0a0dd9] {
    justify-content: space-between
}

.just-around[data-v-cc0a0dd9] {
    justify-content: space-around
}

.just-center[data-v-cc0a0dd9] {
    justify-content: center
}

.just-flex-end[data-v-cc0a0dd9] {
    justify-content: flex-end
}

.width-threehaft[data-v-cc0a0dd9] {
    width: 33.3333333333%
}

.width-fourhaft[data-v-cc0a0dd9] {
    width: 40%
}

.width-twohaft[data-v-cc0a0dd9] {
    width: 20%
}

.position-relative[data-v-cc0a0dd9] {
    position: relative
}

.txt-underline[data-v-cc0a0dd9] {
    text-decoration: underline
}

.color-primary[data-v-cc0a0dd9] {
    color: #da2525
}

.color-secondary[data-v-cc0a0dd9] {
    color: #f8c725
}

.color-success[data-v-cc0a0dd9] {
    color: #27ae60
}

.color-white[data-v-cc0a0dd9] {
    color: #fff
}

.banner-image[data-v-cc0a0dd9] {
    position: relative
}

.hero-banner__event[data-v-cc0a0dd9] {
    align-items: center;
    display: flex;
    margin-left: 4%;
    position: absolute
}

.hero-banner__insurance[data-v-cc0a0dd9] {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.hero-banner__insurance--slogan[data-v-cc0a0dd9] {
    font-weight: 400;
    margin-top: 4px
}

.hero-banner__insurance--slogan-title[data-v-cc0a0dd9] {
    font-size: 32px;
    line-height: 38.4px;
    text-shadow: 0 .99px .25px 0 #00000021
}

.hero-banner__insurance--slogan-sub[data-v-cc0a0dd9],
.hero-banner__insurance--slogan-title[data-v-cc0a0dd9] {
    color: #fff;
    font-family: Roboto, sans-serif;
    font-weight: 700;
    letter-spacing: 3%
}

.hero-banner__insurance--slogan-sub[data-v-cc0a0dd9] {
    font-size: 36px;
    line-height: 43.2px;
    text-transform: uppercase
}

.hero-banner__insurance--slogan-description[data-v-cc0a0dd9] {
    color: #04f0ff;
    font-family: SVN-Gilroy, sans-serif;
    font-size: 37.5px;
    font-weight: 39.37px;
    font-weight: 700;
    margin-top: 6px
}

.hero-banner__btn[data-v-cc0a0dd9] {
    align-items: center;
    bottom: -28%;
    display: flex;
    height: 100%;
    justify-content: flex-start;
    padding-right: 0
}

.hero-banner__btn--register[data-v-cc0a0dd9] {
    align-items: center;
    background: url(../assets/images/pages/event-insurance-2024/bg-btn-playing.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #202020;
    display: flex;
    font-size: 16px;
    font-style: italic;
    font-weight: 900;
    height: 45px;
    justify-content: center;
    margin-top: 10px;
    text-transform: uppercase;
    width: 169px
}

.hero-banner__btn--register span[data-v-cc0a0dd9] {
    font-weight: 900
}

.hero-banner__btn--register[data-v-cc0a0dd9]:hover {
    filter: brightness(.7)
}

.hero-banner__btn--register[data-v-cc0a0dd9]:focus {
    box-shadow: none
}

.hero-banner__btn--countdown[data-v-cc0a0dd9] {
    align-items: center;
    background: url(../assets/images/pages/event-insurance-2024/bg-countdown-time.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #000;
    display: flex;
    flex-direction: column;
    font-family: Bungee;
    font-size: 20px;
    font-weight: 400;
    height: 85px;
    justify-content: center;
    line-height: 24px;
    margin-top: -3px;
    padding-top: 15px;
    width: 232px
}

.hero-banner__btn--countdown .time-countdown[data-v-cc0a0dd9] {
    display: flex;
    gap: 12px;
    justify-content: center;
    width: 156px
}

.hero-banner__btn--countdown .time-countdown .label[data-v-cc0a0dd9] {
    font-family: Open Sans;
    font-size: 10px;
    font-weight: 600;
    line-height: 14px
}

.hero-banner__btn--countdown .time-item[data-v-cc0a0dd9] {
    position: relative;
    text-align: center;
    width: 30px
}

.hero-banner__btn--countdown .time-item[data-v-cc0a0dd9]:not(:last-child):after {
    background: #b3fefb;
    content: "";
    height: 16px;
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px
}

.hero-banner__btn--countdown .time-label[data-v-cc0a0dd9] {
    line-height: 14px;
    text-align: center;
    width: 30px
}

.hero-banner__button[data-v-cc0a0dd9] {
    align-items: center;
    display: flex;
    height: -moz-fit-content;
    height: fit-content;
    left: 87px;
    position: absolute;
    top: unset
}

.hero-banner__button--register[data-v-cc0a0dd9] {
    align-items: center;
    background: url(../assets/images/pages/event-euro-2024/bg-register-btn.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #202020;
    display: flex;
    font-size: 12.4px;
    font-style: italic;
    font-weight: 900;
    height: 44px;
    justify-content: center;
    text-transform: uppercase;
    width: 157px
}

.hero-banner__button--register span[data-v-cc0a0dd9] {
    font-weight: 900
}

.hero-banner__button--register[data-v-cc0a0dd9]:hover {
    filter: brightness(.7)
}

.hero-banner__button--register[data-v-cc0a0dd9]:focus {
    box-shadow: none
}

.hero-banner__button--countdown[data-v-cc0a0dd9] {
    align-items: center;
    background: url(../assets/images/pages/event-euro-2024/bg-count-down.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #fff;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-weight: 900;
    height: 47px;
    justify-content: center;
    line-height: 12px;
    margin-left: -8px;
    margin-top: -3px;
    padding-top: 15px;
    width: 172px
}

.hero-banner__button--countdown .time-countdown[data-v-cc0a0dd9] {
    display: flex;
    gap: 12px
}

.hero-banner__button--countdown .time-countdown .label[data-v-cc0a0dd9] {
    font-size: 7.74px;
    font-weight: 600;
    line-height: 8px
}

.hero-banner__event-km[data-v-cc0a0dd9] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 0;
    padding-left: 84px;
    position: absolute;
    top: 0
}

.hero-banner__event-km .addon[data-v-cc0a0dd9] {
    height: 136px
}

.hero-banner__event-km .addon img[data-v-cc0a0dd9] {
    width: auto
}

.hero-banner__event-jackpot[data-v-cc0a0dd9] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 0;
    padding-left: 50px;
    position: absolute;
    top: 0
}

.hero-banner__event-jackpot .addon[data-v-cc0a0dd9] {
    height: 208px;
    margin-bottom: 10px
}

.hero-banner__event-jackpot .addon img[data-v-cc0a0dd9] {
    height: 100%
}

.hero-banner__event-jackpot .timeline[data-v-cc0a0dd9] {
    align-items: center;
    background: linear-gradient(90deg, #742125, #3f1d2833);
    border-radius: 6px;
    bottom: 50px;
    display: flex;
    height: 22px;
    left: 67px;
    padding-left: 12px;
    position: absolute;
    transform: skew(-12deg);
    width: 285px
}

.hero-banner__event-jackpot .timeline p[data-v-cc0a0dd9] {
    color: #fff;
    font-family: Roboto;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    text-align: left
}

.hero-banner__event-jackpot .timeline[data-v-cc0a0dd9]:before {
    background-color: #da3139;
    border-radius: 0 100px 100px 0;
    content: "";
    height: 13px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(calc(-50% - 2px));
    width: 4px
}

.hero-banner__event-christmas .content[data-v-cc0a0dd9] {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    padding-left: 52px;
    width: -moz-fit-content;
    width: fit-content
}

.hero-banner__event-christmas .addon[data-v-cc0a0dd9] {
    height: 196.41px
}

.hero-banner__event-christmas .addon img[data-v-cc0a0dd9] {
    height: 100%
}

.hero-banner__event-christmas .ended[data-v-cc0a0dd9] {
    height: 29px;
    margin-top: 12px
}

.hero-banner__event-christmas .ended img[data-v-cc0a0dd9] {
    height: 100%
}

.hero-banner__event-asean .banner__btn[data-v-cc0a0dd9] {
    bottom: 22px;
    left: 50%;
    position: absolute;
    transform: translate(-50%);
    transition: all .3s;
    z-index: 2
}

.hero-banner__event-asean .banner__btn img[data-v-cc0a0dd9] {
    height: 100%
}

.hero-banner__event-asean .banner__btn .btn-play[data-v-cc0a0dd9] {
    cursor: pointer;
    height: 60px;
    transition: all .3s
}

.hero-banner__event-asean .banner__btn .btn-play img[data-v-cc0a0dd9] {
    height: 100%
}

.hero-banner__event-asean .banner__btn .btn-play[data-v-cc0a0dd9]:hover {
    filter: drop-shadow(0 4px 8px #ffd643);
    transform: translateY(-5px)
}

.hero-banner__event-asean .banner__btn .label-incoming[data-v-cc0a0dd9] {
    height: 60px;
    position: relative
}

.hero-banner__event-asean .banner__btn .label-incoming img[data-v-cc0a0dd9] {
    height: 100%
}

.hero-banner__event-asean .banner__btn .label-incoming .countdown[data-v-cc0a0dd9] {
    bottom: 50%;
    height: 51px;
    position: absolute;
    right: 0;
    transform: translateY(50%);
    width: 226px
}

.hero-banner__event-asean .banner__btn .label-incoming .countdown .countdown__list[data-v-cc0a0dd9] {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: space-between;
    padding-left: 16px;
    padding-right: 24px;
    width: 100%
}

.hero-banner__event-asean .banner__btn .label-incoming .countdown .countdown__item[data-v-cc0a0dd9] {
    align-items: center;
    color: #002e00;
    display: flex;
    flex-direction: column;
    font-family: SVN-VT Redzone Classic;
    font-size: 30px;
    font-weight: 400;
    height: 100%;
    justify-content: center;
    line-height: 1;
    text-align: center;
    width: 35px
}

.hero-banner__event-asean .banner__btn .label-incoming .countdown .countdown__item .date-unit[data-v-cc0a0dd9] {
    color: #002e00;
    font-family: Roboto;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 15px;
    text-align: center
}

.hero-banner__event-asean .banner__btn .label-ended[data-v-cc0a0dd9] {
    height: 60px
}

.hero-banner__event-asean .banner__btn .label-ended img[data-v-cc0a0dd9] {
    height: 100%
}

.flex-box[data-v-95b0220e] {
    align-items: center;
    display: flex
}

.just-between[data-v-95b0220e] {
    justify-content: space-between
}

.just-around[data-v-95b0220e] {
    justify-content: space-around
}

.just-center[data-v-95b0220e] {
    justify-content: center
}

.just-flex-end[data-v-95b0220e] {
    justify-content: flex-end
}

.width-threehaft[data-v-95b0220e] {
    width: 33.3333333333%
}

.width-fourhaft[data-v-95b0220e] {
    width: 40%
}

.width-twohaft[data-v-95b0220e] {
    width: 20%
}

.position-relative[data-v-95b0220e] {
    position: relative
}

.txt-underline[data-v-95b0220e] {
    text-decoration: underline
}

.color-primary[data-v-95b0220e] {
    color: #da2525
}

.color-secondary[data-v-95b0220e] {
    color: #f8c725
}

.color-success[data-v-95b0220e] {
    color: #27ae60
}

.color-white[data-v-95b0220e] {
    color: #fff
}

.hot-match[data-v-95b0220e] {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: center;
    max-height: 318px
}

.hot-match .swiper-v[data-v-95b0220e] {
    height: 318px;
    width: 100%
}

.hot-match__item[data-v-95b0220e] {
    background: url(bg-hotmatch.CeLo6iVh.png) no-repeat 50%/contain;
    border-radius: 12px;
    cursor: pointer;
    display: block;
    height: 147px;
    width: calc(100% - 6px)
}

.hot-match__item--header[data-v-95b0220e] {
    align-items: center;
    background: linear-gradient(90deg, #2b2d3800 1.64%, #2b2d38);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    box-shadow: inset 2.14px 1.07px 38.54px #0000002e;
    display: flex;
    height: 37px;
    justify-content: space-between;
    padding: 8px 14px 7px;
    position: relative;
    width: calc(100% + 6px)
}

.hot-match__item--header .match-league[data-v-95b0220e] {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    align-items: center;
    background: linear-gradient(90deg, #042f70, #19345c 121.31%);
    border-radius: 4px 12px 12px 4px;
    display: flex;
    height: 25px;
    left: -6px;
    max-width: 222px;
    min-width: 122px;
    padding-left: 14px;
    padding-right: 6px;
    top: 5px
}

.hot-match__item--header .match-league[data-v-95b0220e],
.hot-match__item--header .match-time[data-v-95b0220e] {
    color: #fff;
    font-size: 12px;
    font-weight: 300;
    line-height: 18px;
    position: absolute
}

.hot-match__item--header .match-time[data-v-95b0220e] {
    right: 16px;
    top: 50%;
    transform: translateY(-50%)
}

.hot-match__item--note[data-v-95b0220e] {
    color: #9c9faa;
    font-size: 10px;
    line-height: 16px;
    margin-bottom: 6px;
    padding: 0 25px 0 14px
}

.hot-match__item--note[data-v-95b0220e],
.hot-match__item--team[data-v-95b0220e] {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.hot-match__item--team[data-v-95b0220e] {
    padding: 10px 14px 0
}

.hot-match__item--team .team-name[data-v-95b0220e] {
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px
}

.hot-match__item--team .team-name__away[data-v-95b0220e],
.hot-match__item--team .team-name__host[data-v-95b0220e] {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    max-width: 222px
}

.hot-match__item--team .team-logo[data-v-95b0220e] {
    align-items: center;
    display: flex;
    gap: 4px;
    justify-content: center
}

.hot-match__item--team .team-logo__away img[data-v-95b0220e],
.hot-match__item--team .team-logo__host img[data-v-95b0220e] {
    border-radius: 50%;
    height: 36px;
    -o-object-fit: fill;
    object-fit: fill;
    width: 36px
}

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

    .hot-match__item--team .team-logo__away img[data-v-95b0220e],
    .hot-match__item--team .team-logo__host img[data-v-95b0220e] {
        height: 30px;
        width: 30px
    }
}

.hot-match__item--team .team-logo__host[data-v-95b0220e] {
    margin-right: 2px
}

.hot-match__item--odds[data-v-95b0220e] {
    gap: 14px;
    margin-top: 10px
}

.hot-match__item--odds[data-v-95b0220e],
.hot-match__item--odds .odds-item[data-v-95b0220e] {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding-left: 14px;
    padding-right: 14px
}

.hot-match__item--odds .odds-item[data-v-95b0220e] {
    background: #20222a;
    border-radius: 16px;
    font-size: 16px;
    height: 32px;
    line-height: 18.75px;
    width: calc(50% - 7px)
}

.hot-match__item--odds .odds-item .text-white[data-v-95b0220e] {
    color: #fff
}

.hot-match__item--odds .odds-item .text-red[data-v-95b0220e] {
    color: #e8445a
}

.hot-match__item--odds .odds-item .text-gray[data-v-95b0220e] {
    color: #c3c5cc
}

.hot-match__item--odds .odds-item .text-yellow[data-v-95b0220e] {
    color: #eec982
}

.hot-match[data-v-95b0220e] .swiper-wrapper {
    padding-left: 6px
}

.hot-match-empty[data-v-95b0220e] {
    align-items: center;
    background: #393c4a;
    border-radius: 16.84px;
    box-shadow: inset 2.14px 1.07px 38.54px #0000002e;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 318px;
    justify-content: center
}

.hot-match-empty__image[data-v-95b0220e] {
    width: 150px
}

.hot-match-empty__text[data-v-95b0220e] {
    color: #c3c5cc;
    font-size: 16px;
    font-weight: 500;
    line-height: 18.75px
}

.flex-box[data-v-e69ff42b] {
    align-items: center;
    display: flex
}

.just-between[data-v-e69ff42b] {
    justify-content: space-between
}

.just-around[data-v-e69ff42b] {
    justify-content: space-around
}

.just-center[data-v-e69ff42b] {
    justify-content: center
}

.just-flex-end[data-v-e69ff42b] {
    justify-content: flex-end
}

.width-threehaft[data-v-e69ff42b] {
    width: 33.3333333333%
}

.width-fourhaft[data-v-e69ff42b] {
    width: 40%
}

.width-twohaft[data-v-e69ff42b] {
    width: 20%
}

.position-relative[data-v-e69ff42b] {
    position: relative
}

.txt-underline[data-v-e69ff42b] {
    text-decoration: underline
}

.color-primary[data-v-e69ff42b] {
    color: #da2525
}

.color-secondary[data-v-e69ff42b] {
    color: #f8c725
}

.color-success[data-v-e69ff42b] {
    color: #27ae60
}

.color-white[data-v-e69ff42b] {
    color: #fff
}

.home[data-v-e69ff42b] {
    background: #1a1b21;
    margin-left: auto;
    margin-right: auto;
    max-width: 1224px;
    padding-top: 32px
}

.home .container[data-v-e69ff42b] {
    padding-left: 0;
    padding-right: 0
}

.home .home-container[data-v-e69ff42b] {
    align-items: center;
    display: flex;
    gap: 24px;
    height: 318px;
    justify-content: center
}

.home .home-container__banner[data-v-e69ff42b] {
    height: 100%;
    width: 67.15%
}

.home .home-container__hotmatch[data-v-e69ff42b] {
    height: 100%;
    max-height: 318px;
    max-width: 378px;
    width: 32.85%
}

.home .news-container[data-v-e69ff42b] {
    align-items: flex-start;
    display: flex;
/*    gap: 32px; */
    justify-content: center;
    margin-bottom: 66px;
    margin-top: 12px
}

.home .news-container__news[data-v-e69ff42b] {
    width: 100%
}

/*
.home .news-container__promotion[data-v-e69ff42b] {
    width: 37%
}
*/

.hero-banner[data-v-dfc8c2c3] {
    --aspect-ratio: 42%;
    --swiper-pagination-bullet-size: 8px;
    --swiper-pagination-bullet-inactive-opacity: .4;
    --swiper-pagination-bullet-inactive-color: #f7f9ff;
    --swiper-pagination-color: #0c6cfe
}

.hero-banner[data-v-dfc8c2c3] .swiper {
    height: 33.06667vw
}

.hero-banner[data-v-dfc8c2c3] .swiper .swiper-pagination {
    align-items: center;
    display: flex;
    justify-content: center;
    left: 6.4%;
    width: -moz-fit-content;
    width: fit-content
}

.hero-banner[data-v-dfc8c2c3] .swiper .swiper-pagination .swiper-pagination-bullet {
    height: 4px;
    margin: 0 3px;
    opacity: .4;
    width: 4px
}

.hero-banner[data-v-dfc8c2c3] .swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #ff274e;
    border-radius: 45.62px;
    opacity: 1;
    width: 13.23px
}

.hero-banner .ratio[data-v-dfc8c2c3]>* {
    height: 33.06667vw;
    -o-object-fit: fill;
    object-fit: fill
}

.flex-box[data-v-dfc8c2c3] {
    align-items: center;
    display: flex
}

.just-between[data-v-dfc8c2c3] {
    justify-content: space-between
}

.just-around[data-v-dfc8c2c3] {
    justify-content: space-around
}

.just-center[data-v-dfc8c2c3] {
    justify-content: center
}

.just-flex-end[data-v-dfc8c2c3] {
    justify-content: flex-end
}

.width-threehaft[data-v-dfc8c2c3] {
    width: 33.3333333333%
}

.width-fourhaft[data-v-dfc8c2c3] {
    width: 40%
}

.width-twohaft[data-v-dfc8c2c3] {
    width: 20%
}

.position-relative[data-v-dfc8c2c3] {
    position: relative
}

.txt-underline[data-v-dfc8c2c3] {
    text-decoration: underline
}

.color-primary[data-v-dfc8c2c3] {
    color: #da2525
}

.color-secondary[data-v-dfc8c2c3] {
    color: #f8c725
}

.color-success[data-v-dfc8c2c3] {
    color: #27ae60
}

.color-white[data-v-dfc8c2c3] {
    color: #fff
}

.banner-image[data-v-dfc8c2c3] {
    position: relative
}

.hero-banner__event[data-v-dfc8c2c3] {
    align-items: center;
    display: flex;
    position: absolute
}

.hero-banner__insurance--slogan[data-v-dfc8c2c3] {
    font-weight: 400
}

.hero-banner__insurance--slogan-title[data-v-dfc8c2c3] {
    color: #fff;
    font-family: Bungee, sans-serif;
    font-size: 14.5px;
    letter-spacing: 3%;
    line-height: 17.4px;
    text-shadow: 0 .99px .25px 0 #00000021
}

.hero-banner__insurance--slogan-sub[data-v-dfc8c2c3] {
    color: #fff;
    font-family: Bungee, sans-serif;
    font-size: 15px;
    letter-spacing: 3%;
    line-height: 18px
}

.hero-banner__insurance--slogan-description[data-v-dfc8c2c3] {
    color: #04f0ff;
    font-family: SVN-Gilroy, sans-serif;
    font-size: 16px;
    font-weight: 16.8px;
    font-weight: 700
}

.hero-banner__btn[data-v-dfc8c2c3] {
    align-items: center;
    display: flex;
    justify-content: flex-start
}

.hero-banner__btn--register[data-v-dfc8c2c3] {
    align-items: center;
    background: url(../assets/images/pages/event-insurance-2024/bg-btn-playing.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #202020;
    display: flex;
    font-size: 16px;
    font-style: italic;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    text-transform: uppercase;
    width: 127px
}

.hero-banner__btn--register span[data-v-dfc8c2c3] {
    font-weight: 900
}

.hero-banner__btn--register[data-v-dfc8c2c3]:hover {
    filter: brightness(.7)
}

.hero-banner__btn--register[data-v-dfc8c2c3]:focus {
    box-shadow: none
}

.hero-banner__btn--countdown[data-v-dfc8c2c3] {
    align-items: center;
    background: url(../assets/images/pages/event-insurance-2024/bg-countdown-time.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #000;
    display: flex;
    flex-direction: column;
    font-family: Bungee;
    font-size: 12px;
    font-weight: 400;
    height: 50px;
    justify-content: center;
    line-height: 14.4px;
    margin-bottom: -6px;
    margin-left: 0;
    padding-top: 15px;
    width: 126px
}

.hero-banner__btn--countdown .time-countdown[data-v-dfc8c2c3] {
    display: flex;
    gap: 7px;
    justify-content: center;
    width: 126px
}

.hero-banner__btn--countdown .time-countdown .label[data-v-dfc8c2c3] {
    font-family: Open Sans;
    font-size: 8px;
    font-weight: 600;
    line-height: 10.89px
}

.hero-banner__btn--countdown .time-item[data-v-dfc8c2c3] {
    position: relative;
    text-align: center;
    width: 23px
}

.hero-banner__btn--countdown .time-item[data-v-dfc8c2c3]:not(:last-child):after {
    background: #b3fefb;
    content: "";
    height: 9px;
    position: absolute;
    right: -3.5px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px
}

.hero-banner__btn--countdown .time-label[data-v-dfc8c2c3] {
    line-height: 10.89px;
    text-align: center;
    width: 23px
}

.hero-banner__button[data-v-dfc8c2c3] {
    align-items: center;
    display: flex;
    height: -moz-fit-content !important;
    height: fit-content !important;
    left: 9.333%;
    position: absolute;
    top: 46%
}

.hero-banner__button.olympic-button[data-v-dfc8c2c3] {
    top: 50%
}

.hero-banner__button--register[data-v-dfc8c2c3] {
    background: url(../assets/images/pages/home/mobile/bg-start.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 24px;
    margin-bottom: 2px;
    text-transform: uppercase;
    width: 77px
}

.hero-banner__button--countdown[data-v-dfc8c2c3] {
    align-items: center;
    background: url(../assets/images/pages/home/mobile/bg-countdown-btn.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #fff;
    display: flex;
    flex-direction: column;
    font-size: 10px;
    font-weight: 900;
    height: 22px;
    justify-content: center;
    line-height: 12px;
    margin-top: -3px;
    width: 155px
}

.hero-banner__button--countdown .time-countdown[data-v-dfc8c2c3] {
    align-items: flex-end;
    display: flex
}

.hero-banner__button--countdown .time-countdown .small[data-v-dfc8c2c3] {
    font-size: 6px;
    font-weight: 600;
    padding-left: 2px;
    padding-right: 2px
}

.hero-banner__button--countdown .time-countdown .point[data-v-dfc8c2c3] {
    padding-right: 2px
}

.hero-banner__event-jackpot[data-v-dfc8c2c3] {
    height: 100%;
    padding-left: 24px;
    padding-top: 2.10526vw
}

.hero-banner__event-jackpot .addon[data-v-dfc8c2c3] {
    height: 32vw;
    margin-bottom: 6px
}

.hero-banner__event-jackpot .addon img[data-v-dfc8c2c3] {
    height: 100%
}

.hero-banner__event-jackpot .timeline[data-v-dfc8c2c3] {
    align-items: center;
    background: linear-gradient(90deg, #742125, #3f1d2833);
    border-radius: 6px;
    bottom: 7px;
    display: flex;
    font-style: italic;
    height: auto;
    padding-left: 3px;
    position: absolute;
    right: -20px;
    transform: translate(-50%);
    width: 202px
}

@media (max-width:574px) {
    .hero-banner__event-jackpot .timeline[data-v-dfc8c2c3] {
        left: 80%
    }
}

.hero-banner__event-jackpot .timeline p[data-v-dfc8c2c3] {
    color: #fff;
    font-family: Roboto;
    font-size: 10px;
    font-weight: 400;
    line-height: 15px;
    text-align: left
}

.hero-banner__event-jackpot .timeline[data-v-dfc8c2c3]:before {
    background-color: #da3139;
    border-radius: 0 100px 100px 0;
    content: "";
    height: 10px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3px
}

@media (min-width:575px) {
    .hero-banner__event-jackpot .timeline[data-v-dfc8c2c3]:before {
        height: 24px
    }

    .hero-banner__event-jackpot .timeline[data-v-dfc8c2c3] {
        height: 38px;
        left: 76%;
        padding-left: 10px;
        width: 200px
    }

    .hero-banner__event-jackpot .timeline p[data-v-dfc8c2c3] {
        font-size: 12px
    }
}

@media (min-width:768px) {
    .hero-banner__event-jackpot .timeline[data-v-dfc8c2c3] {
        height: 42px;
        width: 300px
    }

    .hero-banner__event-jackpot .timeline p[data-v-dfc8c2c3] {
        font-size: 14px
    }
}

.hero-banner__event-christmas .content[data-v-dfc8c2c3] {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    padding-left: 24px;
    width: -moz-fit-content;
    width: fit-content
}

.hero-banner__event-christmas .addon[data-v-dfc8c2c3] {
    height: 57.25806%
}

.hero-banner__event-christmas .addon img[data-v-dfc8c2c3] {
    height: 100%
}

.hero-banner__event-christmas .ended[data-v-dfc8c2c3] {
    height: 15.32258%;
    margin-top: 4px
}

.hero-banner__event-christmas .ended img[data-v-dfc8c2c3] {
    height: 100%
}

.hero-banner__event-asean .banner__btn[data-v-dfc8c2c3] {
    left: 50%;
    position: absolute;
    transform: translate(-50%);
    z-index: 2
}

.hero-banner__event-asean .banner__btn img[data-v-dfc8c2c3] {
    width: 100%
}

.hero-banner__event-asean .banner__btn[data-v-dfc8c2c3]:has(.btn-play),
.hero-banner__event-asean .banner__btn[data-v-dfc8c2c3]:has(.label-ended) {
    bottom: 0dvw
}

.hero-banner__event-asean .banner__btn[data-v-dfc8c2c3]:has(.label-incoming) {
    bottom: 1.06667dvw
}

.hero-banner__event-asean .banner__btn .btn-play[data-v-dfc8c2c3],
.hero-banner__event-asean .banner__btn .label-ended[data-v-dfc8c2c3] {
    display: block;
    width: 28.26667dvw
}

.hero-banner__event-asean .banner__btn .btn-play img[data-v-dfc8c2c3],
.hero-banner__event-asean .banner__btn .label-ended img[data-v-dfc8c2c3] {
    width: 100%
}

.hero-banner__event-asean .banner__btn .label-incoming[data-v-dfc8c2c3] {
    bottom: 0;
    width: 250px;
    zoom: 1.5
}

.hero-banner__event-asean .banner__btn .label-incoming img[data-v-dfc8c2c3] {
    width: 100%
}

.hero-banner__event-asean .banner__btn .label-incoming .countdown[data-v-dfc8c2c3] {
    bottom: 6px;
    position: absolute;
    right: 0;
    width: 155px
}

.hero-banner__event-asean .banner__btn .label-incoming .countdown .countdown__list[data-v-dfc8c2c3] {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: space-between;
    padding: 0 12px;
    width: 100%
}

.hero-banner__event-asean .banner__btn .label-incoming .countdown .countdown__item[data-v-dfc8c2c3] {
    align-items: center;
    color: #002e00;
    display: flex;
    flex-direction: column;
    font-family: SVN-VT Redzone Classic;
    font-size: 22px;
    font-weight: 400;
    height: 100%;
    justify-content: center;
    line-height: 1;
    text-align: center;
    width: 30px
}

.hero-banner__event-asean .banner__btn .label-incoming .countdown .countdown__item .date-unit[data-v-dfc8c2c3] {
    color: #002e00;
    font-family: Roboto;
    font-size: 8px;
    font-weight: 500;
    text-align: center
}

@media (max-width:768px) {
    .hero-banner__event-asean .banner__btn .label-incoming[data-v-dfc8c2c3] {
        zoom: 1.2
    }
}

@media (max-width:575px) {
    .hero-banner__event-asean .banner__btn .label-incoming[data-v-dfc8c2c3] {
        zoom: .8
    }
}

@media (max-width:400px) {
    .hero-banner__event-asean .banner__btn .label-incoming[data-v-dfc8c2c3] {
        zoom: .7
    }
}

.flex-box[data-v-c24c6b8e] {
    align-items: center;
    display: flex
}

.just-between[data-v-c24c6b8e] {
    justify-content: space-between
}

.just-around[data-v-c24c6b8e] {
    justify-content: space-around
}

.just-center[data-v-c24c6b8e] {
    justify-content: center
}

.just-flex-end[data-v-c24c6b8e] {
    justify-content: flex-end
}

.width-threehaft[data-v-c24c6b8e] {
    width: 33.3333333333%
}

.width-fourhaft[data-v-c24c6b8e] {
    width: 40%
}

.width-twohaft[data-v-c24c6b8e] {
    width: 20%
}

.position-relative[data-v-c24c6b8e] {
    position: relative
}

.txt-underline[data-v-c24c6b8e] {
    text-decoration: underline
}

.color-primary[data-v-c24c6b8e] {
    color: #da2525
}

.color-secondary[data-v-c24c6b8e] {
    color: #f8c725
}

.color-success[data-v-c24c6b8e] {
    color: #27ae60
}

.color-white[data-v-c24c6b8e] {
    color: #fff
}

.game-container[data-v-c24c6b8e] {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 12px 0 24px 14px;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.game-container[data-v-c24c6b8e]::-webkit-scrollbar {
    display: none
}

.game-container__luckydraw[data-v-c24c6b8e] {
    padding-right: 12px
}

.flex-box {
    align-items: center;
    display: flex
}

.just-between {
    justify-content: space-between
}

.just-around {
    justify-content: space-around
}

.just-center {
    justify-content: center
}

.just-flex-end {
    justify-content: flex-end
}

.width-threehaft {
    width: 33.3333333333%
}

.width-fourhaft {
    width: 40%
}

.width-twohaft {
    width: 20%
}

.position-relative {
    position: relative
}

.txt-underline {
    text-decoration: underline
}

.color-primary {
    color: #da2525
}

.color-secondary {
    color: #f8c725
}

.color-success {
    color: #27ae60
}

.color-white {
    color: #fff
}

.mw-453 {
    max-width: 453px !important
}

.rounded-8 {
    border-radius: 8px
}

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

.bg-dark_modal {
    background-color: #20222a !important
}

.custom-checkbox input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1.5px solid #9c9faa;
    border-radius: 3px;
    cursor: pointer;
    height: 16px;
    margin-right: 10px;
    outline: none;
    position: relative;
    width: 16px
}

.custom-checkbox input[type=checkbox]:checked:before {
    color: #fff;
    content: "✔";
    font-size: 12px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

.custom-checkbox input[type=checkbox]:checked {
    background-color: #007bff
}

.withdraw__mt-24 {
    margin-top: 24px;
    text-transform: none
}

.withdraw__text-warning {
    color: #c3c5cc;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

.withdraw__text-warning span {
    color: #ffd643
}

.withdraw__text-warning strong {
    color: #ff274e
}

.withdraw__gray-txt {
    color: #c3c5cc
}

@media only screen and (max-width:768px) {
    .modal-dialog.modal-dialog-bottom {
        align-items: center !important
    }
}