[v-cloak] {
        display: none !important;
    }
    .lazy:not(.loaded) {
        max-height: 64px;
        max-width: 64px;
    }
    .modal-backdrop:last-of-type {
        z-index: -1 !important;
    }


    :root {
            --bg02_index_header_1: url("assets/img/background/header-bg_2.png");
            --bg_img_url: url("g_assets/img/site/2025/06/09-09_25_29-Club8BGWeb-01.png");
            --bg_img_size: cover;
            --bg_login_default: url("g_assets/img/site/2025/06/09-09_25_29-Club8BGWeb-01.png");
            --bg_register_default: url("g_assets/img/site/2025/06/09-09_25_29-Club8BGWeb-01.png");
            --bg_member_default_new: url("g_assets/img/site/2025/06/09-09_25_29-Club8BGWeb-01.png");
            --gm88_member_header_color_1: #0c1321;
            --gm88_member_header_color_2: #000000;
            --gm88_member_ham_color: #243456;
            --gm88_member_marquee_color: #000000;
            --gm88_member_panel_header_color_1: #121a2b;
            --gm88_member_panel_header_color_2: #121a2b;
            --gm88_member_panel_bg: #121a2b;
            --gm88_transaction_menu_item_color_1: #0400f0;
            --gm88_transaction_menu_item_color_2: #243456;
            --gm88_entrance_games_bg: #121a2b;
            --gm88_entrance_games_search_bg: #243456;
            --gm88_entrance_games_latest_play: #121a2b;
            --gm88_footer_main_btn_1: #0402a7;
            --gm88_footer_main_btn_2: #1b00a3;
            --gm88_footer_main_btn_3: #ffffff;
            --gm88_footer_bg: #000000;
            --gm88_member_modal_button_color_confirm_1: #003cf0;
            --gm88_member_modal_button_color_confirm_2: #022cd4;
            --gm88_member_modal_button_color_cancel_1: #333333;
            --gm88_member_modal_button_color_cancel_2: #000000;
            --gm88_member_profile_block_color_1: #0c1321;
            --gm88_member_profile_block_color_2: #121a2b;
            --gm88_member_profile_block_color_3: #121a2b;
            --gm88_member_form_header_1: #203456;
            --gm88_member_form_header_2: #121a2b;
            --gm88_member_form_body_1: #121a2b;
            --gm88_member_form_body_2: #000000;
            --gm88_member_form_btn_confirm_1: #012af4;
            --gm88_member_form_btn_confirm_2: #0f0f0f;
            --gm88_member_withdraw_page_label_input: #003ab8;
            --gm88_member_withdraw_page_input_bg: #000000;
            --gm88_member_refer_page_block_1: #121a2b;
            --gm88_member_refer_page_block_2: #121a2b;
            --gm88_member_refer_page_block_3: #121a2b;
            --gm88_member_refer_page_btn_copy: #0028f0;
            --member_deposit_list_ui_type: a;
            --member_deposit_title_decimal_text: ระบบทศนิยม;
            --notification_logo_type: logo_default;
    }

/* global css */
._btn-reset {
border: none;
outline: none;
background: unset;
}

._img-w100-contain{
width: 100%;
height: auto;
object-fit: contain;
}

._text_nowrap{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

:root{
--header-height: 75px;
--marquee-height:36px;
--title-content: #ffffff;
--subtitle-content: #cecece;
--detail-content:#ffffff;
--footer-bg-color: #3a393c;
--footer-title-text-color:#e6bd4b;
--footer-subtitle-text-color: #ffe6ba;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

a{
color: unset;
text-decoration: none;
}  
a:hover{
color: unset;
}
*, :after, :before {
box-sizing: border-box;
}
[v-cloak] { display:none; }
::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: transparent;
border-radius: 0;
}
::-webkit-scrollbar-thumb {
border-radius: 0;
background-color: #353535;
}
::-webkit-scrollbar-track {
background: #e6e8ec;
width: 6px;
height: 6px;
border-radius: 0;
}

body,html ,* {
font-family: 'Kanit', sans-serif;
}

html,body {
margin: 0;
height: 100%;
}
body {
	height: fit-content !important;
}
._reset-btn{
outline: none;
border: none;
background: unset;
}

html, body{
font-family: 'Kanit', sans-serif;
}

body{
background: url("assets/img/theme/bg/full_screen_bg1.png") no-repeat fixed;
background-size: cover;
overflow-y: auto;
overflow-x: hidden;
}
[v-cloak] { display:none; }
.main-content{
height: 100%;
position: relative;
}

@keyframes hamburger-dash-stretch{
0% {
	width: 70%;
}
to {
	width: 110%;
}
}
a{
color: unset;
text-decoration: none;
}
a:hover{
color: antiquewhite;
}
.header{
height: var(--header-height);
background-size: cover;
background-repeat: no-repeat;
background-position: bottom;
background-image: url("assets/img/theme/bg/header-bg_2.png");

position: fixed;
top: 0;
left: 0;
z-index: 6;
width: 100%;
padding: 0.5rem 1rem;
}
.header-container{
display: flex;
justify-content: space-between;
}
.header-brand {
display: flex;
align-items: center;
}
.header-hamburger {
display: flex;
flex-direction: column;
width: 25px;
height: 24px;
position: relative;
padding: 0;
margin: 0;
margin-right: 0.5em;
}
.header-hamburger > .dash {
width: 70%;
height: 3px;
background: #fcce39;
display: block;
position: absolute;
border-radius: 4px;
}
.header-hamburger > .dash:first-child{
top: 0;
left: 0;
animation: hamburger-dash-stretch 0.4s ease-out infinite alternate;
}
.header-hamburger > .dash:nth-child(2){
top: 50%;
left: 0;
background: #ffc400;
transform: translateY(-50%);
animation: hamburger-dash-stretch 0.4s ease-out 0.3s infinite alternate;
}
.header-hamburger > .dash:last-child{
bottom: 0;
left: 0;
animation: hamburger-dash-stretch 0.3s ease-out 0.2s infinite alternate;
}
.header-logo{
margin: 0 0.5em;
display: flex;
align-items: center;
}
.header-logo > .logo {
height: 90%;
width: auto;
object-fit: contain;
}
.header-content{
display: flex;
align-items: center;
}
.header-menu{
display: flex;
}
.menu-link{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0.5em;
margin: 0 0.5em;
}
.menu-link > .icon{
height: 100%;
width: auto;
object-fit: contain;
max-width: 38px;
max-height: 38px;
}
.menu-link > .text{
color: #fff;
font-weight: 400;
font-size: 0.85em;
padding-top: 0.5em;
}
.header-usermenu {
padding-left: 2em;
display: flex;
}
.button-user{
padding: 0.5em 1em;
width: 150px;
display: flex;
justify-content: center;
border-radius: 6em;
color: #fff;
}
.button-user > .text{
display: flex;
align-items: center;
}

.button-user.-register{
margin-right: 0.5em;
}
.button-user.-login{
color: #262626;
font-weight: bold;
border: 2px solid rgb(199, 146, 0);
}

.button-85 {
border: none;
outline: none;
color: rgb(255, 255, 255);
cursor: pointer;
position: relative;
z-index: 0;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}

.button-85.-register:before {
content: "";
background: linear-gradient(
	45deg,
	#ff0000,
	#e66700,
	#ffe136,
	#f7d563,
	#f7d563,
	#f7d563,
	#ffc812,
	#f7c10f,
	#e66700,
	#e66700,
	#ff0000,
	#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
-webkit-filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing-button-85 20s linear infinite;
transition: opacity 0.3s ease-in-out;
border-radius: 100px;
}
.button-85.-login:before {
content: "";
background: linear-gradient(
	45deg,
	#ffffff,
	#e2e2e2,
	#ffe136,
	#f7d563,
	#f7d563,
	#f7d563,
	#ffc812,
	#f7c10f,
	#ffa962,
	#ffc392,
	#e2e2e2,
	#ffffff
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
-webkit-filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing-button-85 20s linear infinite;
transition: opacity 0.3s ease-in-out;
border-radius: 100px;
}

@keyframes glowing-button-85 {
0% {
	background-position: 0 0;
}
50% {
	background-position: 400% 0;
}
100% {
	background-position: 0 0;
}
}

.button-85.-login:after {
z-index: -1;
content: "";
position: absolute;
background: linear-gradient(180deg, #f7d563 0%, #af7100 100%);
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: 100px;
}

.button-85.-register:after {
z-index: -1;
content: "";
position: absolute;
background: linear-gradient(180deg, #3f3e42 0%, #262626 100%);
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: 100px;
}
.main-content{
height: 100%;
padding-top: 0;
display: flex;
}

.main-sidebar{
/* height: 100%; */
}
.sidebar-menu{
width: 200px;
height: 100%;
position: relative;
background:transparent;
}
.menu-provider{
width: inherit;
min-height: 50px;
position:fixed;
top: var(--header-height);
}

.btn-provider{
display: flex;
align-items: center;
justify-content: flex-start;
position: relative;
width: 100%;
padding: 1em 0;
min-height: 75px;
max-height: 75px;
}
.btn-provider.active::before{
content: '';
position: absolute;
width: 0.4em;
height: 100%;
background-color: #d7870e;
left: 0;
top: 0;
}
.btn-provider.active > .bg {
filter: grayscale(0);
}
.btn-provider > .bg {
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
filter: grayscale(1);
}
.btn-provider > .icon {
width: 3.25em;
height: auto;
object-fit: contain;
margin-right: 1em;
margin-left: 1em;
}
.provider-text{
display: flex;
flex-direction: column;
align-items: flex-start;
}
.provider-text > .eng {
text-transform: uppercase;
font-size: 0.75em;
font-weight: bold;
color: #d7150e;
padding: 0.25em 0;
}
.provider-text > .th {
font-size: 0.9em;
padding: 0.25em 0;
color: #000;
}
.contact-floating{
position: fixed;
bottom: 6em;
right: 2em;
}
.link-contact{
display: flex;
width: 11em;
transition: all 0.3s ease;
}
.link-contact:hover{
filter: contrast(1.2);
transition: all 0.3s ease;
}
.link-contact > .bg{
width: 100%;
height: auto;
object-fit: contain;
}
.main-center{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow-x: hidden;
padding-top: 1em;
}

.marquee-block {
background: #7c7c7cdc;
height: var(--marquee-height);
padding:0.5em;
margin-left: 0.5em;
margin-right: 0.5em;
border-radius: 0.5em;
/* box-shadow: inset 0px 1px 2px 0px #00000036; */
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding-left: 2em;
}
.marquee-block > .icon {
width: 1em;
height: 1em;
object-fit: contain;
position: absolute;
top: 50%;
left: 1em;
transform: translateY(-50%);
opacity: 0.75;
}
.marquee-block > .track {
font-weight: 400;
white-space: nowrap;
overflow: hidden;
padding: 0 0.5em;
margin: 0 0.5em;
position: relative;
color: #fff;
}
.marquee-block > .track::before{
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
height: 100%;
width: 1.5em;
background-image: linear-gradient(to right,#6c6c6c 54%, #e7e7e705);
z-index: 1;
} 
.marquee-block > .track::after{
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
height: 100%;
width: 1.5em;
background-image: linear-gradient(to left,#6c6c6c 54%, #e7e7e705);

z-index: 1;
} 
.top-title {
padding: 1em 1em;
}
.top-title > .text{
font-size: 1.3em;
font-weight: 500;
color: #fcfcfc;
color: #f7c863;
}
.banner-block{
height: max-content;
overflow-y: unset;
padding: 0;
position: relative;
}
/* custom swipe */
.swiper-wrapper > .swiper-slide{
/* background-color: #3f3e42; */
}
.swiper-pagination {
/* bottom: 0 !important; */
transform: translateY(100%) !important;
bottom: -0.5em !important;
}
.swiper-pagination > .swiper-pagination-bullet{
width: 2em;
height: 0.25em;
background: #a1a1a1;
border-radius: unset;
opacity: 1;
}
.swiper-pagination > .swiper-pagination-bullet-active{
background: #e1b745;
}

.link-banner{
display: flex;
border-radius: 1em;
overflow: hidden;
}
.link-banner > .img {
width: 100%;
height: auto;
object-fit: contain;
}

.provider-block{
padding-top:3em;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.provider-block > .title{
text-align: center;
font-size: 2.25em;
color: #f7c863;
/* margin-bottom: 0.75em; */
}
.provider-list{
display: flex;
justify-content: flex-start;
align-items: center;
overflow: hidden;
width: 90%;
max-width: 1080px;
margin: 0 auto;
flex-wrap: wrap;
}
.provider-item{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 25%;
padding: 0.5em;
margin-top: 1em;
cursor: pointer;
transition: all ease 0.3s;
}
.provider-item:hover{
filter: contrast(1.2) brightness(1.3);
}
.provider-item > .image {
width: 100%;
height: auto;
object-fit: contain;
border-radius: 0.2em;
overflow: hidden;
box-shadow: -1px 1px 12px 0px #eac3518a;
}
.provider-item > .title {
	font-size: 1.2em;
	color: #ffecc5;
	text-align: left;
	display: block;
	width: 100%;
	padding-top: 0.5em;
	font-weight: 100;
} 

.content-block-1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 85%;
max-width: 720px;
margin: 0 auto;
margin-top: 1em;
}
.content-block-1 > .banner {
width: 90%;
object-fit: contain;
margin-bottom: 0.5em;
}
.content-block-1 > .title {
color: var(--title-content);
font-size: 1.3em;
text-align: left;
margin-bottom: 0.5em;
width:100%;
}
.content-block-1 > .subtitle {
color: var(--subtitle-content);
font-size: 1em;
line-height: 1.2;
}
.content-block-2{
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 85%;
max-width: 1080px;
margin: 0 auto;
margin-top: 1em;

}
.content-live-item{
width: 50%;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1em;
}
.content-live-item > .pic {
width: 100%;
height: auto;
object-fit: contain;
}
.content-live-item > .title {
margin-top: 0.75em;
font-size: 1.2em;
font-weight: 400;
color: var(--title-content);
}
.content-live-item > .detail {
margin-top: 0.25em;
text-align: center;
color: var(--subtitle-content);
}
.content-register-howto {
margin: 2em 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.content-register-howto > .title {
color: var(--title-content);
font-weight: 400;
font-size: 1.5em;
}
.content-register-howto > .subtitle{
color: var(--subtitle-content);
font-weight: 300;
font-size: 1em;
padding-top: 0.5em;
text-align: center;
}
.content-register-parts{
display: flex;
width: 85%;
max-width: 1080px;
margin: 0 auto;
margin-top: 1em;
}

.register-part {
padding-top:1em;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1;
}
.register-part > .pic {
width: 4em;
height: auto;
object-fit: contain;
}
.register-part > .title {
margin-top: 0.5em;
font-weight: bold;
font-size:1.2em;
color: var(--title-content);
text-align: center;
}
.register-part > .subtitle {
margin-top: 0.5em;
color: var(--subtitle-content);
text-align: center;
}
.content-promotion{
display: flex;
justify-content: center;
align-items: center;
width: 85%;
max-width: 1080px;
margin: 0 auto;
margin-top: 2em;
margin-bottom: 2em;
}

.content-promotion > .pic {
width: 55%;
height: auto;
object-fit: contain;
}

.banner-full-width{
width: 100%;
}
.banner-full-width > .pic {
width: 100%;
object-fit: contain;
height: 100%;
}

.content-promotion-detail{
display: flex;
flex-direction: column;
}

.content-promotion-detail > .title{
font-size: 1.5em;
font-weight: bold;
color: var(--title-content);
margin-bottom: 1em;
}

.content-promotion-detail > .detail {
text-indent: 2em;
line-height: 1.2;
color: var(--subtitle-content);
}
.content-promotion-detail > .list {
list-style-type: decimal;
padding-left: 2.5em;
margin-top: 1em;
color: var(--subtitle-content);
}

.content-promotion-detail > .list > li {
padding: 0.125em 0;
}

.content-bet-detail{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 85%;
max-width: 720px;
margin: 0 auto;
margin-top: 2em;
margin-bottom: 2em;
}


.item-bet-detail > .title {
font-size: 1.2em;
font-weight: bold;
color: var(--title-content);
margin-bottom: 0.5em;
margin-top: 1em;
}

.item-bet-detail > .detail {
color: var(--subtitle-content);
line-height: 1.2;
}

.footer-index{
display: flex;
background:var(--footer-bg-color)
}
.footer-title{
flex: 1;
padding: 1.5em;
}
.footer-title > .title {
font-size: 1.2em;
font-weight: 400;
color: var(--title-content);
margin-bottom: 1em;
} 
.footer-title > .subtitle {
color: var(--subtitle-content);
} 
.footer-tag{
flex: 2;
padding: 1.5em;
display:flex;
flex-direction: column;
}
.footer-tag > .title {
font-size: 1.2em;
color:  var(--footer-title-text-color);
margin-bottom: 0.5em;
}
.footer-tag-item{
color: var(--footer-subtitle-text-color);
background: #1d1c1c;
padding: 0.25em 1em;
border-radius: 3em;
margin: 0.25em;
}
.footer-tag-group{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.footer-banks{
flex: 1;
padding: 1.5em;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.footer-banks > .title{
font-size: 1.2em;
color:  var(--footer-title-text-color);
}
.footer-banks > .subtitle{
color: var(--footer-subtitle-text-color);
}


.footer-banks > .footer-bank-ic{
display: flex;
margin-top: 1em;
justify-content: center;
}
.footer-bank-ic > .pic {
flex: 1;
width: 3em;
max-width: 100%;
padding: 0.5em;
background: #1a1a1a;
border-radius: 0.5em;
margin: 1px;
}

.layout-ordering{
display: flex;
flex-direction: column;
}
.marquee-block {
order: 1;
}
.top-title {
order: 2;
}
.banner-block {
order: 3;
}
.game-menu-mobile{
	display: none;
}
.provider-block-panel{
	display: flex;
	width: 100%;
}
@media only screen and (max-width: 991px) {
	.provider-item > .title{
		font-size: 0.9em;
	}
.header-menu {
	display: none;
}
.main-content {
	position: relative;
	padding-top: 1em;
}
.menu-provider {
	overflow-y: scroll;
	height: calc(100% - var(--header-height));
}
.main-sidebar{
	display: none;
}
.top-title {
	order: 1;
	text-align: center;
	padding: 0.5em;
	background: #a1a1a15e;
	padding-top: 1.2em;
	position: relative;
	top: -0.5em;
}
.banner-block {
	order: 2;
}
.marquee-block {
	order: 3;
}
	.game-menu-mobile {
		display: flex;
		flex-direction: column;
		width: 7.5em;
		height: 100%;
		border-radius: 1em;
		overflow: hidden;
		background: #2c2c2c;
		margin-left: 0.5em;
	}
	.btn-provider.active::before{
		background-color: transparent;
	}
	.btn-provider{
		flex-direction: column;
		max-height: initial;
		padding-top: 0.5em;
		padding-bottom: 0.5em;
	}	
	.btn-provider > .bg {
		object-fit: cover;
	}
	.provider-text {
		width: 85%;
	}
	.provider-text > .eng{
		display: none;
	}
	.provider-text > .th {
		background: #6d6d6d;
		border-radius: 2em;	
		color: #fff;
		font-size: 0.8em;
		padding: 0.5em;
		width: 100%;	
	}
	.contact-floating {
		bottom: 1em;
		right: 1em;
	}
	.provider-list {
		height: fit-content;
	}
	.provider-item {
		width: 49%;
	}
	.marquee-block {
		margin: 0;
		border-radius: 0;
		margin-top: 0.05em;
	}
	.link-banner {
		border-radius: 0;
	}

	.swiper-pagination {
		transform: translateY(-100%) !important;
	}
	.content-block-1,.content-block-2{
		width: 90%;
	}
	.content-block-1 > .title{
		text-align: center;
	}
	.content-block-1 > .subtitle{
		text-align: center;
	}
	.content-register-howto {
		margin: 1em auto;
	}
	.content-promotion {
		width: 90%;
		flex-direction: column;
	}
	.content-bet-detail {
		width: 90%;
	}
	.banner-full-width > .pic{
		height: 10em;
		object-fit: cover;
	}
	.footer-index {
		flex-direction: column;
	}
}
@media only screen and (max-width: 516px) {
	.header {
	position: relative;
	}
	.header-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	max-height: 90%;
	}
	.header-content{
		position: absolute;
		left: 50%;
		top: 0;
		transform: translate(-50%,100%);
		height: 4.5em !important;
		width: 100%;
		justify-content: center;
	}
	.header-usermenu{
	padding-left: 0;
	}
	.top-title {
		background: unset;
		padding: 0.1em 1em;
	}
	
	.provider-block{
		padding-top: 1em;
	} 
	.provider-block > .title {
		font-size: 1.2em;
	}
	
}

        @media screen and (max-width: 768px) { 
            #main-nav #navbarSupportedContent {
                background: #150a26 !important;
                top: calc(var(--header-height) - 10px) !important;
                height: calc(99vh - 50px) !important;
                max-height: unset !important
            }
        }
        
    

        .status-detail {
            display: flex;
            flex-direction: column;
            font-size:0.7em;
            font-weight:100;
            background: #00000080;
            opacity: 0;
            height:0;
            overflow:hidden;
        }
        .status-detail > span {
            padding:0 1em;
        }