/* SW Vòng Quay May Mắn — giao diện vé bốc thăm (SonWeb) */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800;900&display=swap');

.swvq-wrap{
	--swvq-maroon:#6E1A1A;
	--swvq-maroon-2:#8C2420;
	--swvq-maroon-3:#4E1010;
	--swvq-red:#C8322B;
	--swvq-gold:#E8B84B;
	--swvq-gold-deep:#C4922A;
	--swvq-paper:#FBF3E2;
	--swvq-paper-2:#F3E6CB;
	--swvq-ink:#31201A;
	--swvq-ink-soft:#6E5A50;
	--swvq-white:#FFFDF8;
	--swvq-green:#2E7D4F;
	--swvq-shadow:0 14px 38px rgba(80,20,10,.22);

	position:relative;
	max-width:1040px;
	margin:0 auto;
	padding:34px 18px 42px;
	font-family:'Be Vietnam Pro',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
	color:var(--swvq-ink);
	line-height:1.5;
	background:radial-gradient(1100px 560px at 50% -170px,var(--swvq-maroon-2) 0%,var(--swvq-maroon) 55%,var(--swvq-maroon-3) 100%);
	border-radius:22px;
	box-sizing:border-box;
}
.swvq-wrap *{box-sizing:border-box}

/* hoa văn nền */
.swvq-wrap::before{
	content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;border-radius:22px;
	background-image:radial-gradient(circle 2px at 20px 20px,#FFD98A 98%,transparent),radial-gradient(circle 2px at 60px 60px,#FFD98A 98%,transparent);
	background-size:80px 80px;
}

/* ---------- Header ---------- */
.swvq-header{position:relative;text-align:center;margin-bottom:24px}
.swvq-eyebrow{letter-spacing:.34em;font-size:11px;font-weight:600;text-transform:uppercase;color:var(--swvq-gold)}
.swvq-title{
	margin:8px 0 6px;padding:0;border:none;
	font-weight:900;font-size:clamp(25px,4.4vw,40px);line-height:1.18;
	color:var(--swvq-paper);text-shadow:0 3px 0 rgba(0,0,0,.25);
}
.swvq-subtitle{margin:0;color:#F3D9B8;font-size:14px;font-weight:500}
.swvq-rule{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px}
.swvq-rule span{display:block;height:1px;width:70px;background:linear-gradient(90deg,transparent,var(--swvq-gold))}
.swvq-rule span:last-child{background:linear-gradient(90deg,var(--swvq-gold),transparent)}
.swvq-rule i{color:var(--swvq-gold);font-style:normal;font-size:13px}

/* ---------- Tấm vé ---------- */
.swvq-ticket{
	position:relative;
	display:grid;
	grid-template-columns:minmax(0,1.08fr) 0 minmax(0,.92fr);
	background:var(--swvq-paper);
	border-radius:18px;
	box-shadow:var(--swvq-shadow);
	overflow:hidden;
}
.swvq-ticket::before,.swvq-ticket::after{
	content:"";position:absolute;left:0;right:0;height:8px;z-index:3;
	background:linear-gradient(90deg,var(--swvq-gold-deep),var(--swvq-gold) 35%,#FFF0C4 50%,var(--swvq-gold) 65%,var(--swvq-gold-deep));
}
.swvq-ticket::before{top:0}
.swvq-ticket::after{bottom:0}

.swvq-side-wheel{padding:32px 26px 26px;display:flex;flex-direction:column;align-items:center}
.swvq-side-form{padding:32px 26px 26px;background:var(--swvq-paper-2)}

/* đường răng cưa giữa 2 phần */
.swvq-perf{position:relative;width:0}
.swvq-perf::before{
	content:"";position:absolute;top:14px;bottom:14px;left:-1px;width:2px;
	background-image:linear-gradient(var(--swvq-ink-soft) 52%,transparent 0);
	background-size:2px 11px;opacity:.42;
}
.swvq-notch{position:absolute;left:-11px;width:22px;height:22px;border-radius:50%;background:var(--swvq-maroon);z-index:4}
.swvq-notch-t{top:-11px}
.swvq-notch-b{bottom:-11px}

/* ---------- Vòng quay ---------- */
.swvq-wheel-box{position:relative;width:100%;max-width:430px;aspect-ratio:1/1}
.swvq-canvas{width:100%;height:auto;display:block;border-radius:50%;
	box-shadow:0 14px 34px rgba(80,20,10,.3),0 0 0 6px var(--swvq-paper),0 0 0 9px var(--swvq-gold-deep)}

.swvq-pointer{
	position:absolute;top:-14px;left:50%;transform:translateX(-50%);z-index:6;
	width:0;height:0;
	border-left:16px solid transparent;border-right:16px solid transparent;
	border-top:40px solid var(--swvq-gold);
	filter:drop-shadow(0 4px 5px rgba(0,0,0,.4));
}
.swvq-pointer::after{
	content:"";position:absolute;top:-46px;left:-11px;width:22px;height:22px;border-radius:50%;
	background:radial-gradient(circle at 35% 30%,#FFF0C4,var(--swvq-gold) 55%,var(--swvq-gold-deep));
	box-shadow:0 2px 6px rgba(0,0,0,.3);
}

.swvq-hub{
	position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;
	width:21%;height:21%;border-radius:50%;
	background:radial-gradient(circle at 35% 28%,#FFF9EC,var(--swvq-paper) 60%);
	border:4px solid var(--swvq-gold-deep);
	display:flex;align-items:center;justify-content:center;
	box-shadow:0 4px 14px rgba(80,20,10,.35);
}
.swvq-hub span{font-weight:900;font-size:13px;letter-spacing:.06em;color:var(--swvq-maroon)}

/* ---------- Cơ cấu giải ---------- */
.swvq-prizelist{width:100%;max-width:430px;margin-top:24px}
.swvq-prizelist h3{
	margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
	color:var(--swvq-maroon);text-align:center;
}
.swvq-prizelist ul{list-style:none;margin:0;padding:0;border-top:1px dashed rgba(110,90,80,.45)}
.swvq-prizelist li{
	display:flex;align-items:center;gap:10px;padding:8px 2px;font-size:13.5px;
	border-bottom:1px dashed rgba(110,90,80,.3);flex-wrap:wrap;
}
.swvq-prizelist strong{font-weight:700;color:var(--swvq-ink)}
.swvq-prizelist em{font-style:normal;color:var(--swvq-ink-soft);font-size:12.5px}
.swvq-dot{width:11px;height:11px;border-radius:50%;flex:0 0 11px;box-shadow:0 0 0 2px rgba(255,255,255,.7)}

/* ---------- Cuống vé / form ---------- */
.swvq-stub-head{
	text-align:center;margin-bottom:20px;padding-bottom:14px;
	border-bottom:2px solid var(--swvq-gold-deep);
}
.swvq-stub-head b{display:block;font-size:15px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--swvq-maroon)}
.swvq-stub-head small{display:block;margin-top:4px;font-size:11.5px;color:var(--swvq-ink-soft);letter-spacing:.04em}

.swvq-field{margin-bottom:16px}
.swvq-field label{display:block;font-weight:700;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--swvq-maroon);margin-bottom:6px}
.swvq-field label span{color:var(--swvq-red)}
.swvq-field input{
	width:100%;padding:13px 14px;border:none;border-bottom:2px solid rgba(110,90,80,.4);
	border-radius:8px 8px 0 0;background:rgba(255,253,248,.85);
	font-family:inherit;font-size:16px;font-weight:600;color:var(--swvq-ink);outline:none;
	transition:border-color .18s,background .18s;
}
.swvq-field input::placeholder{font-weight:400;color:#B2A294}
.swvq-field input:focus{border-bottom-color:var(--swvq-gold-deep);background:var(--swvq-white)}

.swvq-hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

.swvq-btn{
	position:relative;width:100%;padding:16px 18px;margin-top:4px;border:none;cursor:pointer;
	border-radius:11px;
	background:linear-gradient(180deg,var(--swvq-red),var(--swvq-maroon));
	color:var(--swvq-paper);font-family:inherit;font-size:16px;font-weight:900;letter-spacing:.12em;
	box-shadow:0 6px 0 var(--swvq-maroon-3),0 10px 22px rgba(80,20,10,.3);
	transition:transform .12s,box-shadow .12s,opacity .18s;
}
.swvq-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 0 var(--swvq-maroon-3),0 14px 26px rgba(80,20,10,.34)}
.swvq-btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 2px 0 var(--swvq-maroon-3)}
.swvq-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:0 4px 0 var(--swvq-maroon-3)}
.swvq-btn.swvq-loading{color:transparent}
.swvq-btn.swvq-loading::after{
	content:"";position:absolute;top:50%;left:50%;width:21px;height:21px;margin:-10.5px 0 0 -10.5px;
	border:3px solid rgba(251,243,226,.32);border-top-color:var(--swvq-paper);border-radius:50%;
	animation:swvq-rot .7s linear infinite;
}
@keyframes swvq-rot{to{transform:rotate(360deg)}}

.swvq-msg{display:none;margin-top:15px;padding:12px 14px;border-radius:10px;font-size:13.5px;line-height:1.55;font-weight:500}
.swvq-msg-show{display:block;animation:swvq-fade .28s ease}
@keyframes swvq-fade{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.swvq-msg-error{background:#FBE6E3;color:#8E2018;border-left:4px solid var(--swvq-red)}
.swvq-msg-success{background:#E4F2E9;color:#1F5C3A;border-left:4px solid var(--swvq-green)}
.swvq-msg small{display:block;margin-top:5px;font-weight:400;opacity:.9}

.swvq-note{margin:16px 0 0;padding-top:14px;border-top:1px dashed rgba(110,90,80,.4);
	font-size:12px;color:var(--swvq-ink-soft);text-align:center;line-height:1.55}

/* ---------- Thông báo lỗi cấu hình ---------- */
.swvq-notice{padding:18px 20px;border-radius:12px;font-size:14.5px;background:var(--swvq-paper);color:#8E2018;border-left:5px solid var(--swvq-red)}

/* ---------- Modal ---------- */
.swvq-modal{display:none;position:fixed;inset:0;background:rgba(40,8,6,.72);z-index:99999;align-items:center;justify-content:center;padding:20px}
.swvq-modal-open{display:flex}
.swvq-modal-box{
	position:relative;width:100%;max-width:410px;text-align:center;
	padding:36px 28px 30px;border-radius:18px;
	background:var(--swvq-paper);
	font-family:'Be Vietnam Pro',system-ui,sans-serif;
	box-shadow:0 26px 70px rgba(0,0,0,.45);
	border-top:8px solid var(--swvq-gold);border-bottom:8px solid var(--swvq-gold);
	animation:swvq-pop .34s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes swvq-pop{from{transform:scale(.82);opacity:0}to{transform:scale(1);opacity:1}}
.swvq-modal-icon{font-size:56px;line-height:1;margin-bottom:8px}
.swvq-modal-box h3{margin:0 0 14px;font-size:23px;font-weight:900;letter-spacing:.04em;color:var(--swvq-maroon)}
.swvq-prize-name{
	font-size:21px;font-weight:900;color:var(--swvq-maroon);
	background:linear-gradient(180deg,#FFF4D6,#FBE9BE);
	border:2px dashed var(--swvq-gold-deep);border-radius:12px;
	padding:14px 12px;margin-bottom:14px;
}
.swvq-modal-box p{margin:0 0 22px;font-size:14px;color:var(--swvq-ink-soft);line-height:1.65}
.swvq-btn-close{max-width:180px;margin:0 auto}

/* ---------- Responsive ---------- */
@media (max-width:860px){
	.swvq-wrap{padding:26px 12px 32px;border-radius:16px}
	.swvq-ticket{grid-template-columns:minmax(0,1fr)}
	.swvq-perf{width:auto;height:0}
	.swvq-perf::before{top:-1px;bottom:auto;left:14px;right:14px;width:auto;height:2px;
		background-image:linear-gradient(90deg,var(--swvq-ink-soft) 52%,transparent 0);background-size:11px 2px}
	.swvq-notch{left:auto;top:-11px}
	.swvq-notch-t{left:-11px}
	.swvq-notch-b{right:-11px;bottom:auto}
	.swvq-side-wheel{padding:26px 18px 20px}
	.swvq-side-form{padding:26px 18px 24px}
	.swvq-pointer{border-left-width:13px;border-right-width:13px;border-top-width:33px;top:-11px}
	.swvq-pointer::after{top:-38px;left:-9px;width:18px;height:18px}
}