/* Trang vong quay chay doc lap - khong phu thuoc theme Haravan.
   Bang mau lay tu Brand Identity cua TBS Retail. */

:root{
	--bc-green:  #004029;
	--bc-green2: #0a6343;
	--bc-lime:   #8dc63f;
	--bc-forest: #375435;
	--bc-rust:   #a95526;
	--bc-sage:   #7c9c84;
	--bc-mist:   #c6cd9f;
	--bc-white:  #ffffff;

	--bg-desktop: url('/game/img/bg1.png');
	--bg-mobile:  url('/game/img/bg-mobile.png');
}

*,*::before,*::after{box-sizing:border-box;}

/* .overlay va .wheel-wrap deu dat display nen thuoc tinh hidden bi de bep -
   phai ghi de lai, khong thi hop thoai rong hien ngay tu dau. */
[hidden]{display:none !important;}

html,body{height:100%;}
body{
	margin:0;
	min-height:100svh;
	font:400 15px/1.5 'Be Vietnam Pro','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
	color:var(--bc-green);
	background:#dfe6d8 var(--bg-desktop) center/cover no-repeat fixed;
	-webkit-font-smoothing:antialiased;
}
@media (max-width:767px){
	body{background-image:var(--bg-mobile);background-attachment:scroll;}
}

img{max-width:100%;}
button{font:inherit;}

/* ---------- Khung trang ---------- */

.stage{
	min-height:100svh;
	display:flex;
	flex-direction:column;
	align-items:center;
	/* Anh nen co dong tieu de o nua tren va vung san khau sang o nua duoi -
	   day noi dung xuong giua de khong de len tieu de. */
	justify-content:center;
	padding:22vh 16px 40px;
	padding-block-end:calc(40px + env(safe-area-inset-bottom));
}
@media (max-width:767px){
	.stage{padding-top:26vh;}
}

.brand-row{
	/* Ba logo da nam san trong anh nen */
	display:none;
	align-items:center;
	gap:18px;
	flex-wrap:wrap;
	justify-content:center;
	color:var(--bc-white);
	letter-spacing:.04em;
}
.brand-tbs{font-weight:800;font-size:22px;}
.brand-tbs b{font-weight:500;color:var(--bc-lime);margin-left:3px;}
.brand-ecco{font-weight:800;font-size:22px;letter-spacing:.06em;}
.brand-ch{font-weight:600;font-size:17px;letter-spacing:.14em;text-align:center;line-height:1.1;}
.brand-ch i{display:block;font-style:normal;font-size:10px;letter-spacing:.2em;opacity:.85;}
.brand-sep{width:1px;height:20px;background:rgba(255,255,255,.35);}

.page-title{
	/* Dong "Get More, Buy Better" cung da nam trong anh nen - giu the h1 cho
	   SEO va trinh doc man hinh nhung khong ve them lan nua. */
	position:absolute;
	width:1px;height:1px;
	margin:-1px;padding:0;border:0;
	overflow:hidden;clip-path:inset(50%);
	white-space:nowrap;
	font-size:clamp(30px,6.4vw,58px);
	line-height:1.1;
	font-weight:800;
	text-align:center;
	color:var(--bc-white);
	text-shadow:0 2px 18px rgba(0,40,25,.35);
}

/* ---------- Form ---------- */

.panel{
	width:100%;
	max-width:420px;
	background:var(--bc-white);
	border-radius:10px;
	padding:22px 22px 18px;
	box-shadow:0 18px 44px rgba(0,40,25,.22);
}
.panel-title{
	margin:0;
	font-size:15px;
	line-height:1.35;
	font-weight:800;
	text-transform:uppercase;
	text-align:center;
	color:var(--bc-green);
}
.panel-sub{
	margin:6px 0 16px;
	font-size:13.5px;
	font-weight:600;
	text-align:center;
	color:var(--bc-rust);
}

.field{position:relative;margin-bottom:14px;}
.field input{
	width:100%;
	height:46px;
	padding:0 32px 0 14px;
	font-size:15px;
	color:var(--bc-green);
	background:var(--bc-white);
	border:1px solid var(--bc-green);
	border-radius:5px;
	outline:0;
}
.field input::placeholder{color:#8a968f;}
.field input:focus{box-shadow:0 0 0 3px rgba(0,64,41,.14);}
.field input.is-error{border-color:var(--bc-rust);}
#f-order{text-transform:uppercase;}
.req{
	position:absolute;right:13px;top:50%;transform:translateY(-45%);
	color:var(--bc-green);font-size:18px;pointer-events:none;
}

.hint{margin:0 0 10px;font-size:12.5px;line-height:1.45;color:#5d6b63;}
.err{margin:0 0 10px;font-size:13px;line-height:1.45;color:var(--bc-rust);min-height:0;}
.err:empty{display:none;}

.btn-primary{
	width:100%;height:46px;
	border:0;border-radius:5px;
	background:var(--bc-green);
	color:var(--bc-white);
	font-size:16px;font-weight:600;
	cursor:pointer;
	transition:background .2s;
}
.btn-primary:hover{background:var(--bc-green2);}
.btn-primary:disabled{opacity:.6;cursor:default;}

.tc-link{
	display:block;margin-top:14px;
	text-align:center;font-size:12.5px;
	color:var(--bc-green);text-decoration:underline;
}

/* ---------- Vong quay ---------- */

.wheel-wrap{
	width:100%;
	display:flex;
	justify-content:center;
	margin-top:6px;
}
.wheel-box{
	position:relative;
	width:min(80vw, 56svh, 470px);
	aspect-ratio:1;
}
#wheel{
	width:100%;height:100%;
	display:block;
	border-radius:50%;
	background:var(--bc-green);
	box-shadow:0 0 0 10px rgba(255,255,255,.14), 0 20px 50px rgba(0,40,25,.4);
	transition:transform 5.2s cubic-bezier(.17,.67,.16,1);
}
.wheel-pin{
	position:absolute;left:50%;top:-6px;
	width:0;height:0;margin-left:-13px;
	border-left:13px solid transparent;
	border-right:13px solid transparent;
	border-top:26px solid var(--bc-lime);
	filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));
	z-index:3;
}
.spin-btn{
	position:absolute;left:50%;top:50%;
	transform:translate(-50%,-50%);
	width:23%;height:23%;
	border-radius:50%;
	border:4px solid var(--bc-lime);
	background:radial-gradient(circle at 50% 32%, var(--bc-green2) 0%, var(--bc-green) 72%);
	color:var(--bc-white);
	font-size:clamp(13px,2.6vw,20px);
	font-weight:800;letter-spacing:.06em;
	cursor:pointer;
	box-shadow:0 6px 18px rgba(0,64,41,.45);
	z-index:4;
}
.spin-btn:disabled{opacity:.7;cursor:default;}

/* ---------- Nut noi ---------- */

.dock{
	position:fixed;bottom:18px;z-index:40;
	display:flex;flex-direction:column-reverse;gap:10px;align-items:flex-start;
	padding-block-end:env(safe-area-inset-bottom);
}
.dock-left{left:14px;}
.dock-right{right:14px;align-items:flex-end;}

.dock .round{
	width:48px;height:48px;border:0;border-radius:50%;
	background:var(--bc-green);color:var(--bc-white);
	display:flex;align-items:center;justify-content:center;
	cursor:pointer;text-decoration:none;
	box-shadow:0 3px 12px rgba(0,0,0,.25);
}
.dock .round:hover{background:var(--bc-green2);}
.dock .round svg{width:24px;height:24px;fill:currentColor;}
.dock .round b{font-size:13px;font-weight:800;}

.dock .pill{
	border:0;border-radius:999px;
	padding:9px 15px;
	background:rgba(255,255,255,.94);
	color:var(--bc-green);
	font-size:13px;font-weight:600;
	cursor:pointer;white-space:nowrap;
	box-shadow:0 3px 12px rgba(0,0,0,.25);
}
.dock .pill:hover{background:#fff;}
.dock .pill b{font-weight:800;}

/* ---------- Bang tin ---------- */

.ticker{
	position:fixed;left:14px;bottom:calc(18px + env(safe-area-inset-bottom));
	z-index:30;
	max-width:min(360px,72vw);
	padding:9px 13px;
	border-radius:8px;
	background:rgba(255,255,255,.94);
	font-size:12.5px;line-height:1.4;
	color:#3a4a41;
	box-shadow:0 3px 12px rgba(0,0,0,.2);
	animation:fade-in .3s ease;
}
.ticker b{color:var(--bc-green);}
@keyframes fade-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* Bang tin va cot nut trai cung goc duoi: day cot nut len khi bang tin hien */
body.has-ticker .dock-left{bottom:74px;}

/* ---------- Hop thoai ---------- */

.overlay{
	position:fixed;inset:0;z-index:100;
	display:flex;align-items:center;justify-content:center;
	padding:16px;
	background:rgba(0,24,15,.55);
	animation:fade-in .18s ease;
}
.modal{
	position:relative;
	width:100%;max-width:420px;
	max-height:86svh;overflow-y:auto;
	background:var(--bc-white);
	border-radius:12px;
	padding:26px 22px 22px;
	box-shadow:0 24px 60px rgba(0,30,18,.35);
	text-align:center;
}
.modal-close{
	position:absolute;top:8px;right:10px;
	width:32px;height:32px;
	border:0;background:transparent;
	font-size:26px;line-height:1;
	color:#7d8a83;cursor:pointer;
}
.modal-title{
	margin:0 0 12px;
	font-size:16px;font-weight:800;
	text-transform:uppercase;
	color:var(--bc-green);
}
.modal-body{font-size:14.5px;line-height:1.55;color:#33413a;}

/* noi dung ket qua */
.win-mark{
	width:64px;height:64px;margin:0 auto 14px;
	border-radius:50%;
	border:3px solid var(--bc-lime);
	display:flex;align-items:center;justify-content:center;
}
.win-mark svg{width:32px;height:32px;stroke:var(--bc-lime);stroke-width:3;fill:none;}
.win-line{line-height:1.5;}
.win-line b{color:var(--bc-green);}
.win-code{
	display:block;margin-top:10px;
	font-size:15px;
}
.win-code b{
	font-size:21px;font-weight:800;letter-spacing:.09em;
	color:var(--bc-green);
}
.win-note{margin-top:5px;font-size:12.5px;color:var(--bc-sage);}
.win-actions{
	display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
	margin-top:18px;
}
.win-actions a,.win-actions button{
	padding:9px 18px;border-radius:5px;
	font-size:14px;font-weight:600;
	text-decoration:none;cursor:pointer;
	border:1px solid var(--bc-green);
	background:var(--bc-green);color:var(--bc-white);
}
.win-actions .ghost{background:var(--bc-white);color:var(--bc-green);}
.win-actions a:hover,.win-actions button:hover{
	background:var(--bc-lime);border-color:var(--bc-lime);color:var(--bc-green);
}

/* dieu khoan */
.tc-list{margin:0;padding-left:20px;text-align:left;}
.tc-list li{margin-bottom:8px;}
.tc-list b{color:var(--bc-rust);}

/* cua hang gan ban */
.region-tabs{display:flex;gap:7px;justify-content:center;margin-bottom:12px;flex-wrap:wrap;}
.region-tabs button{
	padding:6px 13px;border-radius:999px;
	border:1px solid #dfe3dc;background:var(--bc-white);
	color:var(--bc-green);font-size:13px;cursor:pointer;
}
.region-tabs button.on{background:var(--bc-green);border-color:var(--bc-green);color:var(--bc-white);}
.store-list{max-height:54svh;overflow-y:auto;text-align:left;margin:0;padding:0;list-style:none;}
.store-item{display:flex;gap:10px;padding:11px 2px;border-bottom:1px solid #eef0ec;}
.store-item:last-child{border-bottom:0;}
.store-rank{
	flex:none;width:22px;height:22px;border-radius:50%;
	background:var(--bc-green);color:var(--bc-white);
	font:700 11px/22px inherit;text-align:center;
}
.store-main{flex:1;min-width:0;}
.store-name{font-weight:600;font-size:14px;line-height:1.35;}
.store-meta{font-size:12.5px;color:#6b776f;line-height:1.45;margin-top:1px;}
.store-far{font-size:12.5px;font-weight:600;color:var(--bc-green);white-space:nowrap;}
.store-go{font-size:12.5px;color:var(--bc-rust);text-decoration:underline;}

/* ngay sinh */
.dob-row{display:flex;gap:8px;justify-content:center;margin:14px 0 4px;}
.dob-row select,.dob-row input{
	height:42px;padding:0 10px;font-size:15px;
	border:1px solid #cfd6cf;border-radius:5px;
	color:var(--bc-green);background:var(--bc-white);outline:0;
}
.dob-row input{width:86px;text-align:center;}

@media (max-width:767px){
	.stage{padding:16px 14px 30px;}
	.brand-row{gap:12px;}
	.brand-tbs,.brand-ecco{font-size:18px;}
	.brand-ch{font-size:14px;}
	.page-title{margin:14px 0 18px;}
	.dock{bottom:14px;}
	.dock .round{width:44px;height:44px;}
	.dock .pill{padding:7px 12px;font-size:12px;}
	.wheel-box{width:min(88vw,50svh);}
	body.has-ticker .dock-left{bottom:70px;}
}