:root{
	--bg-top:#6f0f0f;
	--bg-bottom:#3a0b0b;
	--gold:#f6c544;
	--accent:#ffb84d;
	--card:#3e0d0d;
	--glass: rgba(255,255,255,0.06);
	--radius:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
	background: radial-gradient(circle at 50% 10%, rgba(255,200,80,0.06), transparent 20%),
	            linear-gradient(180deg,var(--bg-top),var(--bg-bottom));
	color:#fff;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
.promo-wrap{
	max-width:420px;
	margin:0 auto;
	padding:18px;
}
.promo-header{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:8px;
}
.logo{
	font-weight:800;
	color:var(--gold);
	font-size:22px;
	letter-spacing:1px;
	text-shadow:0 2px 0 rgba(0,0,0,0.6);
	display:flex;
	align-items:center;
}
.logo img{
	height:40px;
	display:block;
	object-fit:contain;
}
.download-btn{
	background:linear-gradient(180deg,var(--accent),#d98a17);
	color:#2b0b00;
	border:none;
	padding:8px 12px;
	border-radius:8px;
	font-weight:700;
	box-shadow:0 6px 18px rgba(0,0,0,0.4), inset 0 -2px 0 rgba(255,255,255,0.06);
}
.hero{
	margin:6px 0 14px 0;
}
.hero-card{
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08));
	border-radius:16px;
	padding:18px;
	text-align:center;
	box-shadow:0 10px 30px rgba(0,0,0,0.5);
	border:1px solid rgba(255,255,255,0.03);
}
.hero-logo{
	font-size:64px;
	font-weight:900;
	color:#ff3b3b;
	text-shadow:0 6px 24px rgba(0,0,0,0.6);
	display:flex;
	justify-content:center;
}
.hero-logo img{
	height:300px;
	width:auto;
	max-width:100%;
	object-fit:contain;
	display:block;
}
.site-name{
	margin:6px 0 4px 0;
	font-size:28px;
	color:var(--gold);
	letter-spacing:2px;
}
.hero-sub{
	font-size:12px;
	opacity:0.95;
	margin:4px 0 12px 0;
}
.hero-sub .domain{font-weight:700;color:var(--gold)}
.cta{
	background:linear-gradient(180deg,var(--gold),#d9a12b);
	color:#380500;
	border:none;
	padding:10px 18px;
	border-radius:12px;
	font-weight:800;
	box-shadow:0 8px 20px rgba(217,161,43,0.18);
}
.banner{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin:12px 0;
	gap:12px;
}
.banner .banner-bg{
	width:100%;
	border-radius:12px;
	display:block;
	object-fit:cover;
}
.jackpot-wrap{position:relative}
.jackpot-num__list{
	position:absolute;
	left:2;
	right:0;
	top:150px;
	display:flex;
	justify-content:center;
	gap:5px;
	align-items:center;
	pointer-events:none;
	z-index:10;
}
.jackpot-num__item{
	overflow:hidden;
	width:36px;
	height:56px;
	/* viền bo từng số */
	border:2px solid rgba(246,197,68,0.95);
	background:linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.12));
	border-radius:8px;
	text-align:center;
	color:#ffffff; /* chữ trắng */
	font-weight:800;
	box-shadow:0 6px 12px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.03);
}
.scroll-num{
	list-style:none;
	margin:0;
	padding:0;
	transition:transform 900ms cubic-bezier(.2,.8,.2,1);
}
.scroll-num li{
	height:56px;
	line-height:56px;
	font-size:20px;
	font-weight:800;
	color:#ffffff;
}
.point{
	color:#ffffff;
	font-weight:900;
	padding:0 6px;
	font-size:20px;
}

@media(max-width:480px){
	.jackpot-num__list{
		top:70%;
		transform:translateY(-50%);
		gap:4px;
		padding:4px 6px;
	}
	/* Thu nhỏ mạnh cho điện thoại */
	.jackpot-num__item{
		width:20px;
		height:30px;
		/* giảm bo góc và độ dày viền cho mobile */
		border-radius:4px;
		border-width:1px;
	}
	.scroll-num li{
		height:34px;
		line-height:34px;
		font-size:12px;
	}
	.point{
		font-size:12px;
		padding:0 3px;
	}

	/* Make the games row fit 3 images on one line (no horizontal scroll) */
	.games{
		overflow-x:hidden;
		gap:8px;
		justify-content:center;
	}
	.games .game.game-img{
		flex:0 0 calc((100% - 16px) / 3);
		width:calc((100% - 16px) / 3);
		height:auto;
		aspect-ratio:1/1;
		min-width:0;
		min-height:0;
	}
	/* hide any scrollbar if present */
	.games::-webkit-scrollbar{ display:none; }
	.games{ -ms-overflow-style:none; scrollbar-width:none; }
	/* smaller hero logo on narrow screens */
	.hero-logo img{ height:250px; }
}
.banner-left{
	flex:1;
	background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
	padding:12px;
	border-radius:12px;
}
.banner-left h3{margin:0;color:var(--gold);font-size:18px}
.banner-left .small{font-size:11px;opacity:0.9}
.play-now{
	margin-top:8px;
	background:transparent;
	border:1px solid rgba(255,255,255,0.08);
	padding:6px 10px;
	border-radius:10px;
	color:#fff;
}
.banner-right{
	width:96px;
	height:64px;
	background:linear-gradient(90deg,#6b0000,#360000);
	border-radius:12px;
	display:flex;
	justify-content:center;
	align-items:center;
	box-shadow:0 10px 30px rgba(0,0,0,0.6);
	position:relative;
}
.badge{
	background:linear-gradient(180deg,#ff5a5a,#ff2222);
	padding:8px 12px;
	border-radius:999px;
	color:#fff;
	font-weight:800;
	box-shadow:0 6px 12px rgba(255,0,0,0.12);
}
.games{
	display:flex;
	gap:10px;
	margin:8px 0 16px 0;
}
.game{
	flex:1;
	background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
	padding:12px;
	border-radius:12px;
	text-align:center;
	font-weight:700;
	color:var(--accent);
	box-shadow:0 6px 18px rgba(0,0,0,0.45);
}
.game.game-img{
	background-color:transparent;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	/* fixed square 200x200 */
	width:200px;
	height:200px;
	min-width:200px;
	min-height:200px;
	padding:0;
	border-radius:0; /* ô vuông */
	box-shadow:0 8px 20px rgba(0,0,0,0.45);
}
.game.game-img .game-title{
	background:linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.2));
	padding:8px 12px;
	border-radius:8px;
	font-weight:800;
	color:var(--gold);
}
/* keep layout responsive: allow games row to wrap when a fixed box exists */
.games{
	gap:10px;
	flex-wrap:nowrap; /* keep one row */
	align-items:center;
	justify-content:flex-start; /* allow horizontal scroll on small screens */
	-webkit-overflow-scrolling:touch;
}

@media(max-width:680px){
	.game.game-img{
		width:140px;
		height:140px;
		min-width:140px;
		min-height:140px;
	}
}
.super-win{
	margin:10px 0;
}
.super-card{
	background:linear-gradient(90deg,#ffb84d,#ffc65a);
	color:#3b0c00;
	padding:14px;
	border-radius:14px;
	text-align:center;
	box-shadow:0 14px 40px rgba(255,184,77,0.12);
}
.super-title{font-weight:800;font-size:18px}
.super-sub{font-weight:700;margin-top:6px}
.showcase{
	display:flex;
	gap:12px;
	margin:14px 0;
}
.phones{flex:1;display:flex;flex-direction:column;gap:10px}
.phone{
	background:linear-gradient(180deg,#1b1b1b,#2b2b2b);
	padding:10px;
	border-radius:12px;
	text-align:center;
}
.phone.mock{background:linear-gradient(180deg,#2b0b0b,#1b0707);font-weight:800}
.slots{flex:1;display:flex;flex-direction:column;gap:10px}
.slot{background:linear-gradient(180deg,#2a0a0a,#1b0606);padding:10px;border-radius:12px;text-align:center}
.reviews{margin:16px 0;display:flex;flex-direction:column;gap:10px}
.reviews-btn{
	background:linear-gradient(180deg,#ffb84d,#d99b2a);
	color:#350600;border:none;padding:10px;border-radius:12px;font-weight:800;
}
.review{display:flex;gap:10px;align-items:flex-start;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:10px;border-radius:12px}
.avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(180deg,#ffb84d,#d99b2a);display:flex;align-items:center;justify-content:center;color:#3b0c00;font-weight:800}
.r-name{font-weight:700;font-size:13px}
.r-text{font-size:12px;opacity:0.95}
.site-footer{margin:18px 0 40px 0;text-align:center;opacity:0.95}
.partners span{margin:0 8px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,0.03);font-weight:700}

/* Responsive tweaks */
@media(min-width:680px){
	.promo-wrap{max-width:680px;padding:28px}
	.hero-logo{font-size:96px}
	.site-name{font-size:36px}
	.games{gap:14px}
	.showcase{flex-direction:row}
}

/* Leaderboard styles */
.leaderboard-section{margin:18px 0;}
.leaderboard-section .title{
	text-align:center;
	color:var(--gold);
	font-weight:800;
	letter-spacing:1px;
	margin-bottom:10px;
	font-size:18px;
}
.leaderboard-section .bg{
	background:linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02));
	border-radius:12px;
	padding:12px;
}
.mode-btn-container{display:flex;gap:8px;justify-content:center;margin-bottom:10px}
.mode-btn-container button{
	background:rgba(255,255,255,0.03);
	color:var(--gold);
	border:none;
	padding:8px 12px;
	border-radius:8px;
	font-weight:700;
}
.mode-btn-container button.active{
	background:linear-gradient(180deg,var(--gold),#d9a12b);
	color:#350600;
	box-shadow:0 6px 14px rgba(0,0,0,0.2);
}
.board{overflow:hidden;border-radius:10px;background:rgba(0,0,0,0.06);padding:6px}
.head{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap:8px;
	padding:8px;
	font-weight:800;
	color:var(--gold);
	border-bottom:1px solid rgba(255,255,255,0.03);
}
.board-wrapper{
	overflow:hidden;
	position:relative;
}
.marquee-list{list-style:none;margin:0;padding:0;transition:transform 600ms linear}
.marquee-item{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	align-items:center;
	padding:6px 8px;
	border-bottom:1px solid rgba(255,255,255,0.02);
	font-size:13px;
}
.marquee-item .circle{width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.marquee-item .circle img{width:28px;height:28px;border-radius:50%}
.marquee-item .win{color:#7fff00;font-weight:700}
.marquee-item .loss{color:#ff6b6b;font-weight:700}
@media(max-width:680px){
	.head, .marquee-item{grid-template-columns: 1fr 1fr 1fr 1fr;font-size:12px}
	.marquee-item .circle img{width:22px;height:22px}
	.board-wrapper{height:240px}
}


/* Footer styles (vendor icons and help list) */
.footer_wrapper{
	width:100%;
	padding:18px 12px;
	background:linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02));
	border-radius:10px;
}
.footer_wrapper .w1200{
	display:flex;
	flex-direction:column;
	gap:12px;
	align-items:center;
}
.footer-vendor .vendor-icons{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	justify-content:center;
	align-items:center;
	width:100%;
}
.vendor-icons .item-icon{
	width:56px;
	height:56px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(255,255,255,0.03);
	border-radius:8px;
	padding:6px;
	box-shadow:0 6px 12px rgba(0,0,0,0.25);
}
.vendor-icons .item-icon img.icon-color{
	max-width:100%;
	max-height:100%;
	display:block;
}
.footer_wrapper .line{
	width:100%;
	height:1px;
	background:rgba(255,255,255,0.03);
	border-radius:2px;
}
.list-wrap .list-content{
	display:flex;
	gap:12px;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
}
.br-hmenu-nav{
	padding:8px 12px;
	background:rgba(0,0,0,0.12);
	border-radius:8px;
	color:var(--gold);
	font-weight:700;
	font-size:13px;
}
.bq-text{opacity:0.95;text-align:center;color:rgba(255,255,255,0.85);font-size:13px}

@media(max-width:480px){
	/* smaller vendor icons on narrow screens */
	.vendor-icons .item-icon{ width:44px; height:44px; padding:4px; }
	.br-hmenu-nav{ padding:6px 8px; font-size:12px; }
	.footer_wrapper{ padding:12px 8px; }
}