/* Root */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
:root {
	--bg-color: #09182c;
	--text-base: #eee;
	--primary-color: #71ff53;
	--primary-color-hover: #ffc66e;
	--primary-button-text: #000;
	--primary-text: #68ff57;
	--secondary-bg: #141a2a ;
	--footer-bg: #0b101e;
}

html, body{ background-color: var(--bg-color); position: relative;}
body{ background-image: url(../images/landing-bg.jpg); background-position: top center; background-repeat: no-repeat; font-family: "Inter"; color: var(--text-base); font-size: 14px; line-height: 1.6; font-weight: 400; padding: 0; margin: 0; -webkit-text-size-adjust: none;}
a{ cursor: pointer; color: #fff; text-decoration: none !important;}
a:hover{ color: var(--primary-text);}
.btn{ font-weight: 500; font-size: 1.1em; padding: .7rem 1.2rem; border-radius: .4rem; border: none; opacity: .95; color: #fff; white-space: nowrap;}
button:hover, .btn:hover{ color: #fff; opacity: 1;}
.btn-outline{ border: 1px solid #ffffff80;}
.btn-outline-light{ border: 1px solid rgba(255,255,255,.7); background-color: transparent !important; color: #fff !important;}
.btn-outline:hover, .btn-outline:focus{ border: 1px solid #fff;}
.btn-light{ color: #000 !important; background-color: #fff !important;}
/* .btn-live{ background-color: #d13535 !important; color: #fff !important;} */
.btn-live{ background-color: #e74040 !important; color: #fff !important; box-shadow: 0 4px 10px 0 #6d151536 !important; border: 1px solid #cf3f3f !important;}
.btn-wait{ color: #000 !important; border: 1px solid #00000030 !important; background-color: #fff !important; box-shadow: 0 3px 3px 0 #00000010 !important;}
.btn-bet{ color: #000 !important; background-color: #FFDD75; background-image: linear-gradient(0deg, #FFDD75 0%, #FFE7AC 100%); box-shadow: 0 5px 10px 0 rgba(97,81,37,0.21) !important; border: 1px solid #cfaf51 !important;}
.btn-rounded{ border-radius: 3rem !important;}
.btn:focus{ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.09);}
.btn-zero:focus{ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.09);}
.btn-primary{ background-color: var(--primary-color) !important; color: var(--primary-button-text) !important; border: 1px solid #64f057 !important; box-shadow: 0 5px 10px 0 #77a93b7a;}
.btn-primary:focus{ box-shadow: 0 0 0 3px rgba(255,255,255,.1);}
.btn-quaytay{  background: rgb(100, 252, 89); background: linear-gradient(35deg, rgb(100, 252, 89) 0%, rgb(140, 255, 99) 100%); color: #000 !important; border: 1px solid #48e65c !important; box-shadow: 0 5px 10px 0 #77a93b7a;}
.btn-quaytay:hover{ box-shadow: 0 10px 20px 4px #77a93b7a;}
.btn-secondary{ background-color: var(--secondary-bg) !important; color: #fff;}
.btn-secondary:focus{ box-shadow: 0 0 0 3px rgba(255,255,255,.1);}
.btn{-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.btn-xs{font-size: 12px; line-height: 1.2; padding: .2rem .4rem; border-radius: .2rem;}
.btn-sm{font-size: 13px; padding: .4rem .8rem;}
.btn-lg{font-size: 16px; padding: .8rem 1.6rem;}
.btn-xl{font-size: 18px; padding: 1.2rem 2.5rem; font-weight: 600; border-radius: 1rem;}
.btn-circle{ padding: 0; width: 44px; height: 44px; border-radius: 50%;}
.btn-circle.btn-sm{ width: 32px; height: 32px;}
.btn-circle.btn-xs{ width: 21px; height: 21px;}
.btn-circle.btn-lg{ width: 50px; height: 50px;}
.badge{ font-weight: 400 !important;}
.heading-xl{ font-size: 1.6em; font-weight: 600; line-height: 1.5; margin-bottom: 1.25rem; color: #fff;}
.heading-md{ font-size: 16px; font-weight: 500; line-height: 1.5; margin-bottom: 1rem; color: #fff;}
.heading-sm{ font-size: 14px; font-weight: 500; line-height: 1.5; margin-bottom: .5rem; color: #fff;}
.heading-xs{ font-size: 13px; font-weight: 500; line-height: 1.5; margin-bottom: .5rem; color: #fff;}
.o-style{ list-style: none;}
.direct-column{ flex-direction: column;}
.rounded{ border-radius: 0.75rem !important;}
.gap-md{ gap: 1rem !important;}
.gap-sm{ gap: .5rem !important;}
.gap-xs{ gap: .25rem !important;}
.small-text{ font-size: .9em !important;}
.text-base{ color: var(--text-base) !important;}
.item-flex{ display: flex; align-items: center; gap: .5rem;}
b,strong{font-weight: 500;}
.badge-live{ font-size: .8em; line-height: 1; padding: .2rem; border: 1px solid #fff; border-radius: 4px;}
h1, h2, h3, h4, h5, h6{font-weight: 500;}
small{ font-size: 11px;}
.base-icon{ width: 16px; height: 16px; font-size: 0; flex-shrink: 0; display: inline-block;}
.base-icon svg, .base-icon img{ width: 100%; height: 100%; object-fit: contain;}
.base-icon.icon-16{ width: 16px !important; height: 16px !important;}
.base-icon.icon-20{ width: 20px; height: 20px;}
.base-icon.icon-24{ width: 24px !important; height: 24px !important;}
.base-icon.icon-30{ width: 30px !important; height: 30px !important;}
.base-icon.icon-40{ width: 40px !important; height: 40px !important;}
.base-icon.icon-50{ width: 50px !important; height: 50px !important;}
.highlight-text, .text-primary{ color: var(--primary-text) !important;}
.modal-blur{ background-color: var(--modal-blur); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);}
.avatar{ width: 44px; height: 44px; border-radius: 50%; overflow: hidden; position: relative; flex-shrink: 0;}
.avatar img{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover;}
/* Elements */
#app{ position: relative; width: 100%; overflow-x: hidden;}
.container{ max-width: 1290px; width: 100%; padding: 0 20px;}
header{ height: 160px; position: absolute; top: 0; left: 0; right: 0; z-index: 9; display: flex; align-items: center; justify-content: space-between;}
header .header-elements{ display: flex; padding: 0; align-items: center; justify-content: space-between; gap: 1rem; position: relative;}
#logo{ display: block; flex-shrink: 0; flex-grow: 1;}
#logo img{ height: 70px; width: auto;}
#top-feature{ position: relative; padding-top: 160px; margin-bottom: 6rem;}
#top-feature .content{ width: 100%; max-width: 600px; padding: 3rem 0;}
#top-feature .content .heading-xl{ font-size: 2em; text-transform: uppercase;}
#top-feature .top-image{ position: absolute; right: -30px; top: 0; width: 600px;}
#top-feature .top-image img{ width: 100%; height: 100%;}
.box-content .description{ margin-bottom: 3rem;}
.box-content .box-wrap{ width: 100%; max-width: 600px;}
.box-content .heading-xl{ color: var(--primary-text);}
.box-content .buttons{ gap: 1.5rem;}
#blv-area{ position: relative; padding-left: 210px; margin-bottom: 4rem;}
#blv-area:before{ content: ""; position: absolute; left: -60px; top: -30px; width: 300px; height: 450px; background-image: url(../images/micro.webp); background-size: contain; background-position: center center;}
#blv-area > div{ position: relative; z-index: 2;}
.blv-list{ display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: .25rem;}
.blv-list .item{ position: relative; flex: 1; padding: 1.5rem 1rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; border-radius: 1rem;  background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 100%); }
.blv-list .item:hover{ top: -10px;}
.blv-list .item .avatar{ width: 90px; height: 90px; border: 3px solid #fff;}
.blv-list .item .blv-name{ font-weight: 600;}
.bet-list{ display: flex; justify-content: center; flex-wrap: wrap; gap: 0; margin: -.5rem;}
.bet-list .item{ width: calc(25% - 1rem); margin: .5rem; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.5rem; border-radius: 1.2rem; padding: 1rem ;}
.bet-list .item .bet-icon{ height: 80px; width: 100%; position: relative; text-align: center;}
.bet-list .item .bet-icon img{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: contain;}
.bet-list .item .bet-name{ font-weight: 600;}
.bet-list .item .btn{ padding: .7rem; border-radius: .6rem; font-size: 14px;}
#top-bet{ margin-bottom: 6rem; padding: 3rem; background-color: #030f1f; background-image: url(../images/bet-bg.webp); background-size: cover; background-position: center center; border-radius: 2rem; text-align: center;}
#about-us{ display: flex; align-items: flex-start; gap: 4rem}
#about-us .box-wrap{ max-width: 400px; flex-shrink: 0;}
#about-us .au-faq{ flex-grow: 1;}
#wrapper{ min-height: calc(100vh - 120px); padding-bottom: 100px;}

.zacc{ color: var(--text-base);}
.zacc .accordion-item{ background-color: transparent !important; border: none !important; color: var(--text-base);}
.zacc .accordion-button{ background-color: #ffffff10 !important; color: var(--primary-text); box-shadow: none !important; border-radius: .6rem !important; line-height: 1.5;}
.zacc .accordion-button.collapsed{ background-color: transparent !important;}
.zacc .accordion-button:hover{ background-color: #ffffff10 !important;}
.zacc .accordion-button:after{ background-color: #8ded5f !important; border-radius: 2rem !important; width: 24px; height: 24px; background-position: center center; background-size: 14px;}
.zacc .accordion-button.collapsed:after{ background-color: #ffffff60 !important;}
.zacc .accordion-item a{ color: var(--primary-text);}
.zacc .accordion-item ul{ padding-left: 1rem;}
.zacc .accordion-item ul li{ margin-bottom: .6rem;}
.zacc .accordion-body{ font-weight: 300;}
.zacc .accordion-body .heading-sm{ color: #ffd675; margin-bottom: 1rem;}


/* Footer */
footer{ background-color: #000;}
.footer-elements{ display: flex; align-items: center; justify-content: space-between; padding: 0; gap: 3rem; height: 120px;}
.footer-elements .s-logo{ display: block;}
.footer-elements .s-logo img{ height: 50px; width: auto;}
.footer-elements .f-right{ text-align: right;}
.footer-elements .f-right .f-links span{ margin: 0 .3rem;}

/* Responsive */
@media screen and (max-width: 1289px){
    #top-feature .top-image{ width: 500px; right: 0;}
    #top-feature .content{ max-width: none; padding-right: 550px; z-index: 3; position: relative;}
    .btn-xl{ font-size: 16px; padding: 1rem 2rem;}
    #blv-area::before{ left: 0; width: 200px; height: 300px;}
    #blv-area{ padding-left: 180px;}
    .blv-list{ gap: 0; margin: 0 -.5%;}
    .blv-list .item{ width: 24%; margin: 0 .5%; flex: unset;}
}
@media screen and (max-width: 991px){
    header{ height: 120px;}
    #top-feature{ padding-top: 120px;}
    #top-feature .top-image{ width: 400px;}
    #top-feature .content{ padding: 2rem 420px 2rem 0;}
    .blv-list .item{ width: 32.33%;}
    #top-bet{ padding: 2rem;}
    #about-us{ flex-direction: column;}
    #about-us > div{ flex-grow: 1; width: 100%;}
    #about-us .box-wrap{ max-width: 600px; margin: 0 auto; text-align: center;}
    #about-us .box-wrap .buttons{ justify-content: center;}
}
@media screen and (max-width: 799px){
    body{ background: var(--bg-color) !important;}
    #top-feature .top-image{ width: 170%; right: -25%; top: -100px; opacity: .4; mask-image: linear-gradient(to bottom, black 0,transparent 60%);}
    #top-feature{ margin-bottom: 4rem; padding-top: 160px;}
    #top-feature .content{ padding: 2rem 0;}
    #top-bet{ border-radius: 1rem;}
    .bet-list .item{ width: calc(33.33% - 1rem);}
    #blv-area::before{ left: auto; right: -100px; top: -80px; width: 260px; height: 390px;}
    #blv-area{ padding-left: 0;}
    #blv-area .box-wrap{ max-width: none; padding-right: 180px;}
    .footer-elements{ flex-direction: column; gap: 1rem; padding: 3rem 0; height: auto;}
}
@media screen and (max-width: 639px){
    header{ height: 100px;}
    header .header-elements{ justify-content: center;}
    #top-feature .top-image{ top: -75px;}
    #top-feature{ padding-top: 250px; margin-bottom: 3rem;}
    #logo{ flex-grow: unset;}
    #logo img{ height: 50px;}
    .bet-list .item{ width: calc(50% - 1rem);}
    .blv-list .item{ width: 49%;}
    .box-content .buttons{ flex-direction: column;}
    .box-content .buttons .btn{ width: 100%;}
    .box-content .buttons .btn .item-flex{ justify-content: center;}
    #blv-area::before{ top: -30px; width: 200px; height: 300px;}
    #blv-area .box-wrap{ padding-right: 90px;}
}
@media screen and (max-width: 479px){
    #top-feature{ padding-top: 180px;}
    #top-feature .top-image{ top: -50px;}
    .box-content .buttons{ gap: 1rem;}
    #wrapper{ padding-bottom: 40px;}
    #top-bet{ background: transparent !important; padding: 0;}
    .zacc .accordion-button{ font-size: 13px; padding: .6rem 1rem; gap: .5rem;}
    .zacc .accordion-button::after{ width: 16px; height: 16px; background-size: 10px;}
    .accordion-body{ font-size: 13px;}
    .accordion-body .table{ width: calc(100% + 2rem); margin: 1rem -1rem;}
    .btn-xl{ border-radius: .75rem;}
    .heading-xl{ font-size: 1.5em !important;}
}