/* Bill Royal – Vòng quay may mắn (giao diện sự kiện) */
.brlw {
	--brlw-ink: #1b1712;
	--brlw-ink-2: #2a241c;
	--brlw-night: #120f0b;
	--brlw-night-2: #1f1912;
	--brlw-gold: #c9a227;
	--brlw-gold-2: #e8cf7a;
	--brlw-gold-3: #8a6b12;
	--brlw-gold-hi: #fff1b8;
	--brlw-ivory: #fbf6ea;
	--brlw-champ: #efe0bd;
	--brlw-wine: #6e1b24;
	--brlw-text: #2b2419;
	--brlw-muted: #7a6c55;
	--brlw-on-dark: #efe4c8;
	--brlw-on-dark-2: #b9aa86;
	--brlw-foil: linear-gradient(100deg, #9c7a18 0%, #f3dc8f 22%, #fff4cc 32%, #c9a227 48%, #8a6b12 62%, #e8cf7a 80%, #a8851a 100%);
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--brlw-on-dark);
	box-sizing: border-box;
	max-width: 1160px;
	margin: 0 auto;
	padding: 56px 28px 40px;
	background:
		radial-gradient(900px 480px at 50% 0%, rgba(201, 162, 39, .22), transparent 65%),
		radial-gradient(600px 400px at 0% 100%, rgba(110, 27, 36, .25), transparent 70%),
		linear-gradient(180deg, var(--brlw-night-2) 0%, var(--brlw-night) 100%);
	border-radius: 24px;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	box-shadow: 0 30px 80px rgba(18, 15, 11, .35);
}
.brlw::before {
	/* viền vàng mảnh bên trong khung */
	content: ""; position: absolute; inset: 10px; border-radius: 18px; pointer-events: none; z-index: -1;
	border: 1px solid rgba(232, 207, 122, .22);
}
.brlw *, .brlw *::before, .brlw *::after { box-sizing: inherit; }
.brlw h2, .brlw h3, .brlw h4, .brlw p, .brlw ul, .brlw ol { margin-top: 0; }

/* ---------- Mở đầu ---------- */
.brlw-hero { text-align: center; margin-bottom: 40px; }
.brlw-eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 12px; letter-spacing: .26em; text-transform: uppercase; font-weight: 600;
	color: var(--brlw-gold-2);
}
.brlw-eyebrow::before, .brlw-eyebrow::after {
	content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--brlw-gold));
}
.brlw-eyebrow::after { transform: scaleX(-1); }
.brlw-title {
	font-family: "Lora", Georgia, serif; font-weight: 700;
	font-size: clamp(36px, 6.4vw, 68px); line-height: 1.08; letter-spacing: -.01em;
	margin: 14px 0 14px; color: #fbf3dc;
}
.brlw-title em {
	font-style: italic; display: inline-block; padding: 0 .06em;
	background: var(--brlw-foil); background-size: 220% 100%;
	-webkit-background-clip: text; background-clip: text; color: transparent;
	animation: brlw-foil 6s ease-in-out infinite;
}
@keyframes brlw-foil { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.brlw-sub { margin: 0 auto 26px; max-width: 600px; color: var(--brlw-on-dark-2); font-size: 16px; line-height: 1.7; }
.brlw-sub strong { color: var(--brlw-gold-2); font-weight: 600; }
.brlw-ended { color: var(--brlw-gold-2); font-weight: 600; margin-bottom: 24px; }

/* Đồng hồ đếm ngược */
.brlw-countdown { display: inline-grid; justify-items: center; gap: 10px; margin-bottom: 26px; }
.brlw-cd-label { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--brlw-on-dark-2); }
.brlw-cd-units { display: flex; gap: 10px; }
.brlw-cd-units > div {
	min-width: 74px; padding: 12px 8px 10px; border-radius: 14px; text-align: center;
	background: linear-gradient(180deg, rgba(255, 241, 184, .09), rgba(255, 241, 184, .02));
	border: 1px solid rgba(232, 207, 122, .3);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.brlw-cd-units b {
	display: block; font: 700 32px/1 "Lora", Georgia, serif; font-variant-numeric: tabular-nums;
	color: var(--brlw-gold-hi);
}
.brlw-cd-units span { display: block; margin-top: 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brlw-on-dark-2); }

.brlw-facts { list-style: none; padding: 0; margin: 0 auto; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.brlw-facts li {
	display: inline-flex; align-items: baseline; gap: 6px;
	padding: 8px 16px; border-radius: 999px;
	background: rgba(255, 255, 255, .04); border: 1px solid rgba(232, 207, 122, .2);
	font-size: 13px; color: var(--brlw-on-dark-2);
}
.brlw-facts strong { font: 700 15px/1 "Poppins", sans-serif; color: var(--brlw-gold-2); }

/* ---------- Bố cục chính ---------- */
.brlw-grid {
	display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	gap: 48px; align-items: center;
}

/* ---------- Bánh xe ---------- */
.brlw-stage-wrap { position: relative; }
.brlw-stage { position: relative; width: min(100%, 500px); margin: 0 auto; aspect-ratio: 1; }
.brlw-glow {
	position: absolute; inset: -14%; border-radius: 50%; z-index: -1;
	background: radial-gradient(circle, rgba(232, 207, 122, .32), rgba(201, 162, 39, .1) 45%, transparent 70%);
	animation: brlw-breathe 4s ease-in-out infinite;
}
.brlw.is-spinning .brlw-glow { animation-duration: 1s; }
@keyframes brlw-breathe { 0%, 100% { opacity: .65; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.03); } }
.brlw-rim {
	position: absolute; inset: 0; border-radius: 50%;
	background: conic-gradient(from 0deg, #8a6b12, #f3dc8f, #b8901f, #fff1b8, #9c7a18, #e8cf7a, #8a6b12);
	box-shadow: 0 30px 60px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(255, 255, 255, .35), inset 0 -8px 18px rgba(0, 0, 0, .35);
}
.brlw-rim::after {
	content: ""; position: absolute; inset: 4.4%; border-radius: 50%;
	background: #0d0b08; box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .5), 0 0 0 2px rgba(255, 241, 184, .35);
}
.brlw-bulbs { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.brlw-bulb {
	position: absolute; width: 2.5%; height: 2.5%; border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #fff, #fff1b8 45%, #e8b923);
	box-shadow: 0 0 10px 3px rgba(255, 226, 120, .85);
	transform: translate(-50%, -50%);
	animation: brlw-chase 1.6s linear infinite;
}
.brlw.is-spinning .brlw-bulb { animation-duration: .5s; }
@keyframes brlw-chase { 0%, 100% { opacity: 1; } 50% { opacity: .2; box-shadow: none; } }

.brlw-wheel-wrap { position: absolute; inset: 6.4%; border-radius: 50%; overflow: hidden; z-index: 1; }
.brlw-wheel-wrap::after {
	/* ánh bóng kim loại phủ lên mặt bánh xe */
	content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
	background:
		radial-gradient(120% 70% at 30% 10%, rgba(255, 255, 255, .22), transparent 45%),
		radial-gradient(circle, transparent 62%, rgba(0, 0, 0, .28) 100%);
}
.brlw-wheel {
	width: 100%; height: 100%; display: block; border-radius: 50%;
	transform: rotate(0deg);
	transition: transform 7s cubic-bezier(.12, .72, .08, 1);
	will-change: transform;
}

.brlw-pointer {
	position: absolute; left: 50%; top: -2%; z-index: 4;
	width: 12.5%; transform: translateX(-50%); transform-origin: 50% 28%;
	filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .5));
}
.brlw.is-spinning .brlw-pointer { animation: brlw-tick .14s ease-in-out infinite alternate; }
@keyframes brlw-tick { from { transform: translateX(-50%) rotate(-7deg); } to { transform: translateX(-50%) rotate(5deg); } }
.brlw-pointer svg { display: block; width: 100%; height: auto; }

.brlw-hub {
	position: absolute; left: 50%; top: 50%; z-index: 3;
	width: 24%; aspect-ratio: 1; transform: translate(-50%, -50%);
	border-radius: 50%; border: 0; padding: 0; cursor: pointer;
	background: radial-gradient(circle at 35% 28%, #fff7d6, #e2c25a 40%, #a8851a 75%, #6f5410 100%);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .55), inset 0 0 0 3px rgba(255, 255, 255, .5), 0 0 0 6px #0d0b08, 0 0 0 8px rgba(232, 207, 122, .6);
	display: grid; place-items: center; color: var(--brlw-ink);
	font: 700 clamp(12px, 2.2vw, 17px)/1 "Lora", Georgia, serif; letter-spacing: .1em;
	transition: transform .2s ease;
}
.brlw-hub::before {
	content: ""; position: absolute; inset: -14px; border-radius: 50%;
	border: 2px solid rgba(255, 226, 120, .55); animation: brlw-ping 2s ease-out infinite;
}
.brlw.is-spinning .brlw-hub::before, .brlw[data-state="ended"] .brlw-hub::before { animation: none; opacity: 0; }
@keyframes brlw-ping { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.brlw-hub:hover:not(:disabled) { transform: translate(-50%, -50%) scale(1.05); }
.brlw-hub:disabled { cursor: default; }
.brlw-hub-inner { display: grid; gap: 3px; justify-items: center; }
.brlw-hub svg { width: 44%; height: auto; }
.brlw-base {
	width: 56%; height: 22px; margin: 16px auto 0; border-radius: 50%;
	background: radial-gradient(ellipse, rgba(0, 0, 0, .55), transparent 70%);
}

/* ---------- Thẻ nhập thông tin ---------- */
.brlw-card {
	color: var(--brlw-text);
	background: linear-gradient(180deg, #fffcf4, #f7edd4);
	border-radius: 22px; padding: 30px 28px 26px;
	box-shadow: 0 30px 70px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(201, 162, 39, .55), inset 0 0 0 6px #fffcf4, inset 0 0 0 7px rgba(201, 162, 39, .28);
}
.brlw-steps { list-style: none; padding: 0; margin: 0 0 20px; display: flex; gap: 6px; counter-reset: none; }
.brlw-steps li {
	flex: 1; display: flex; align-items: center; gap: 8px;
	font-size: 12.5px; font-weight: 600; color: var(--brlw-muted);
	padding-bottom: 10px; border-bottom: 2px solid #e7dbbb;
}
.brlw-steps b {
	flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
	font-size: 12px; background: #eadfc2; color: var(--brlw-muted);
}
.brlw-steps li.is-on { color: var(--brlw-ink); border-color: var(--brlw-gold); }
.brlw-steps li.is-on b { background: var(--brlw-ink); color: var(--brlw-gold-2); }
.brlw-card h3 { font-family: "Lora", Georgia, serif; font-size: 25px; line-height: 1.25; margin: 0 0 6px; color: var(--brlw-ink); }
.brlw-card p.brlw-hint { margin: 0 0 20px; color: var(--brlw-muted); font-size: 14px; line-height: 1.6; }
.brlw-field { display: grid; gap: 6px; margin-bottom: 14px; }
.brlw-field label { font-size: 13px; font-weight: 600; color: var(--brlw-ink-2); }
.brlw-field input {
	width: 100%; font: 500 17px/1.2 "Poppins", system-ui, sans-serif; letter-spacing: .02em;
	padding: 14px 16px; border-radius: 12px;
	border: 1.5px solid #dccb9f; background: #fff; color: var(--brlw-ink);
	outline: none; transition: border-color .15s, box-shadow .15s;
}
.brlw-field input::placeholder { color: #b9ab8a; }
.brlw-field input:focus { border-color: var(--brlw-gold); box-shadow: 0 0 0 4px rgba(201, 162, 39, .2); }
.brlw-btn {
	position: relative; overflow: hidden;
	width: 100%; border: 0; cursor: pointer; border-radius: 14px; padding: 17px 18px; margin-top: 4px;
	font: 700 16px/1 "Poppins", system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase;
	color: var(--brlw-ink);
	background: linear-gradient(135deg, #f7e3a0, #d4ae3a 50%, #a8851a);
	box-shadow: 0 12px 24px rgba(138, 107, 18, .4), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(0, 0, 0, .12);
	transition: transform .15s, box-shadow .15s, opacity .15s;
}
.brlw-btn::after {
	/* vệt sáng chạy ngang nút */
	content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent);
	transform: skewX(-20deg); animation: brlw-shine 2.8s ease-in-out infinite;
}
@keyframes brlw-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.brlw-btn span { position: relative; z-index: 1; }
.brlw-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 28px rgba(138, 107, 18, .45); }
.brlw-btn:disabled { opacity: .55; cursor: default; }
.brlw-btn:disabled::after { animation: none; }
.brlw-consent { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--brlw-muted); }
.brlw-msg { min-height: 22px; margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--brlw-ink-2); }
.brlw-msg.is-error { color: #a12222; }
.brlw-msg.is-ok { color: #2c6e2f; }
.brlw-trust { list-style: none; padding: 16px 0 0; margin: 14px 0 0; border-top: 1px dashed rgba(201, 162, 39, .5); display: grid; gap: 7px; }
.brlw-trust li { position: relative; padding-left: 24px; font-size: 13px; color: var(--brlw-ink-2); }
.brlw-trust li::before {
	content: "✓"; position: absolute; left: 0; top: 0; width: 17px; height: 17px; border-radius: 50%;
	display: grid; place-items: center; font-size: 10px; font-weight: 700;
	background: var(--brlw-ink); color: var(--brlw-gold-2);
}

/* ---------- Dải khách vừa trúng ---------- */
.brlw-ticker {
	display: flex; align-items: center; gap: 14px; margin: 44px 0 0;
	padding: 10px 14px; border-radius: 999px;
	background: rgba(255, 255, 255, .04); border: 1px solid rgba(232, 207, 122, .2);
}
.brlw-ticker-tag {
	flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
	font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brlw-gold-2);
}
.brlw-ticker-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4cd07d; box-shadow: 0 0 0 3px rgba(76, 208, 125, .25); }
.brlw-ticker-view { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.brlw-ticker-track { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; animation: brlw-marquee 40s linear infinite; }
.brlw-ticker:hover .brlw-ticker-track { animation-play-state: paused; }
.brlw-ticker-track li { white-space: nowrap; padding: 0 22px; font-size: 13.5px; color: var(--brlw-on-dark); border-right: 1px solid rgba(232, 207, 122, .2); }
.brlw-ticker-track b { color: var(--brlw-gold-2); font-weight: 600; }
.brlw-ticker-track i { font-style: normal; color: var(--brlw-on-dark-2); font-size: 12px; margin-left: 4px; }
@keyframes brlw-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Giải thưởng ---------- */
.brlw-gifts { margin-top: 56px; }
.brlw-sec-head { text-align: center; margin-bottom: 26px; }
.brlw-sec-head h3 { font-family: "Lora", Georgia, serif; font-size: clamp(26px, 3.6vw, 36px); line-height: 1.2; margin: 10px 0 0; color: #fbf3dc; }
.brlw-hero-prizes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.brlw-hp {
	position: relative; overflow: hidden; border-radius: 20px; padding: 28px 26px 24px;
	background: linear-gradient(160deg, #2a2219, #16120d);
	border: 1px solid rgba(232, 207, 122, .35);
	box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
}
.brlw-hp.is-first {
	background: linear-gradient(150deg, #f7e3a0, #d4ae3a 55%, #a8851a);
	border-color: rgba(255, 241, 184, .8); color: var(--brlw-ink);
}
.brlw-hp::after {
	content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%;
	border: 1px solid rgba(232, 207, 122, .25); box-shadow: 0 0 0 18px rgba(232, 207, 122, .05), 0 0 0 36px rgba(232, 207, 122, .03);
}
.brlw-hp.is-first::after { border-color: rgba(27, 23, 18, .15); box-shadow: 0 0 0 18px rgba(27, 23, 18, .05), 0 0 0 36px rgba(27, 23, 18, .03); }
.brlw-hp-tag {
	display: inline-block; padding: 6px 12px; border-radius: 999px; margin-bottom: 16px;
	font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	background: rgba(232, 207, 122, .14); color: var(--brlw-gold-2); border: 1px solid rgba(232, 207, 122, .35);
}
.brlw-hp.is-first .brlw-hp-tag { background: var(--brlw-ink); color: var(--brlw-gold-2); border-color: transparent; }
.brlw-hp-big { font: 700 clamp(34px, 4.6vw, 52px)/1 "Lora", Georgia, serif; color: var(--brlw-gold-hi); letter-spacing: -.01em; }
.brlw-hp.is-first .brlw-hp-big { color: var(--brlw-ink); }
.brlw-hp-small { margin-top: 8px; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--brlw-gold-2); }
.brlw-hp.is-first .brlw-hp-small { color: #4a3a0c; }
.brlw-hp p { margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: var(--brlw-on-dark-2); max-width: 32ch; }
.brlw-hp.is-first p { color: #3d3010; }

.brlw-plist { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.brlw-plist li {
	display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px;
	background: rgba(255, 255, 255, .035); border: 1px solid rgba(232, 207, 122, .16);
	font-size: 14px; color: var(--brlw-on-dark);
}
.brlw-plist i { flex: 0 0 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(255, 241, 184, .35); }
.brlw-plist span { flex: 1; min-width: 0; }
.brlw-plist em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--brlw-on-dark-2); }
.brlw-plist li.is-special { border-color: rgba(232, 207, 122, .55); background: linear-gradient(90deg, rgba(110, 27, 36, .45), rgba(110, 27, 36, .15)); }
.brlw-plist li.is-special span { color: var(--brlw-gold-hi); font-weight: 600; }

/* ---------- Thể lệ ---------- */
.brlw-terms {
	margin: 36px auto 0; max-width: 820px; border-radius: 14px;
	background: rgba(255, 255, 255, .03); border: 1px solid rgba(232, 207, 122, .18);
}
.brlw-terms summary {
	cursor: pointer; list-style: none; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center;
	font-weight: 600; font-size: 14.5px; color: var(--brlw-gold-2); letter-spacing: .04em;
}
.brlw-terms summary::-webkit-details-marker { display: none; }
.brlw-terms summary::after { content: "+"; font-size: 20px; line-height: 1; transition: transform .2s; }
.brlw-terms[open] summary::after { transform: rotate(45deg); }
.brlw-terms ol { margin: 0; padding: 0 22px 18px 40px; display: grid; gap: 8px; }
.brlw-terms li { font-size: 13.5px; line-height: 1.65; color: var(--brlw-on-dark-2); }

/* ---------- Điện thoại ---------- */
@media (max-width: 900px) {
	.brlw { padding: 40px 16px 28px; border-radius: 18px; }
	.brlw::before { inset: 6px; border-radius: 14px; }
	.brlw-hero { margin-bottom: 28px; }
	.brlw-eyebrow { letter-spacing: .16em; font-size: 11px; line-height: 1.6; }
	.brlw-eyebrow::before, .brlw-eyebrow::after { display: none; }
	.brlw-sub { font-size: 15px; margin-bottom: 22px; }
	.brlw-countdown { margin-bottom: 20px; }
	.brlw-grid { grid-template-columns: 1fr; gap: 30px; }
	.brlw-stage { width: min(100%, 420px); }
	.brlw-card { padding: 24px 18px 20px; }
	.brlw-hero-prizes, .brlw-plist { grid-template-columns: 1fr; }
	.brlw-gifts { margin-top: 44px; }
	.brlw-ticker { border-radius: 14px; margin-top: 34px; }
}
@media (max-width: 420px) {
	.brlw-cd-units { gap: 6px; }
	.brlw-cd-units > div { min-width: 0; flex: 1; padding: 10px 4px 8px; }
	.brlw-cd-units b { font-size: 25px; }
	.brlw-steps span { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
	.brlw-title em, .brlw-glow, .brlw-bulb, .brlw-hub::before, .brlw-btn::after, .brlw-ticker-track { animation: none !important; }
}

/* ---------- Popup kết quả ---------- */
.brlw-modal {
	position: fixed; inset: 0; z-index: 99999; display: none;
	align-items: center; justify-content: center; padding: 16px;
	background: rgba(12, 10, 7, .72); backdrop-filter: blur(4px);
}
.brlw-modal.is-open { display: flex; animation: brlw-fade .25s ease; }
@keyframes brlw-fade { from { opacity: 0; } to { opacity: 1; } }
.brlw-ticket {
	position: relative; width: min(100%, 440px);
	background: linear-gradient(180deg, #fffaf0, #f6e9c9);
	border-radius: 22px; padding: 30px 26px 24px; text-align: center;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(201, 162, 39, .6), inset 0 0 0 7px #fffaf0, inset 0 0 0 8px rgba(201, 162, 39, .45);
	animation: brlw-pop .45s cubic-bezier(.2, 1.4, .4, 1);
	font-family: "Poppins", system-ui, sans-serif; color: var(--brlw-text);
}
@keyframes brlw-pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.brlw-ticket .brlw-crown { width: 54px; margin: 0 auto 4px; display: block; }
.brlw-ticket h3 { font-family: "Lora", Georgia, serif; font-size: 26px; margin: 4px 0 2px; color: var(--brlw-ink); }
.brlw-ticket .brlw-won-label { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--brlw-gold-3); margin: 10px 0 4px; }
.brlw-ticket .brlw-prize { font-family: "Lora", Georgia, serif; font-size: 24px; font-weight: 700; color: var(--brlw-wine); margin: 0 0 16px; line-height: 1.3; }
.brlw-code {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 12px 18px; border-radius: 12px; border: 2px dashed var(--brlw-gold);
	background: #fff; font: 700 22px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .12em; color: var(--brlw-ink);
}
.brlw-copy { border: 0; background: var(--brlw-ink); color: #f3dc8f; font: 600 12px/1 "Poppins", sans-serif; padding: 7px 10px; border-radius: 8px; cursor: pointer; letter-spacing: .04em; }
.brlw-meta { margin: 14px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--brlw-muted); }
.brlw-meta strong { color: var(--brlw-ink); }
.brlw-actions { display: grid; gap: 10px; margin-top: 18px; }
.brlw-actions a, .brlw-actions button {
	display: block; text-decoration: none; text-align: center; border-radius: 12px; padding: 13px 14px;
	font: 600 14.5px/1.2 "Poppins", sans-serif; cursor: pointer;
}
.brlw-next { margin-top: 18px; border-top: 1px dashed rgba(201, 162, 39, .55); padding-top: 14px; }
.brlw-next-title { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--brlw-gold-3); font-weight: 600; }
.brlw-next .brlw-actions { margin-top: 10px; }
.brlw-actions a.brlw-zalo, .brlw-actions a.brlw-review {
	display: flex; align-items: center; gap: 12px; text-align: left; padding: 11px 14px;
}
.brlw-actions a strong { display: block; font-size: 14.5px; }
.brlw-actions a small { display: block; font-size: 12px; font-weight: 400; opacity: .85; margin-top: 3px; }
.brlw-ic {
	flex: 0 0 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
	font: 700 11px/1 "Poppins", sans-serif; background: #fff; color: #0068ff;
}
.brlw-zalo { background: #0068ff; color: #fff !important; border: 0; }
.brlw-review { background: #fff; color: var(--brlw-ink) !important; border: 1.5px solid #e2d3a6; }
.brlw-review:hover { border-color: var(--brlw-gold); }
.brlw-ic-g { background: linear-gradient(135deg, #fbbc04, #f29900); color: #fff; font-size: 20px; }
.brlw-close { background: linear-gradient(180deg, #e2c25a, #c9a227); border: 1.5px solid #b08d3e; color: #1b1712 !important; font-weight: 700 !important; }
.brlw-close:hover { filter: brightness(1.05); }
.brlw-invite { margin: 4px 0 2px; font-size: 13px; line-height: 1.5; text-align: center; color: var(--brlw-ink-2); }
@media (max-height: 760px) { .brlw-ticket { max-height: calc(100vh - 32px); overflow-y: auto; } }

.brlw-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 100000; }


/* ==========================================================
   Bill Royal – Vòng quay "Royal Luxe" (10/2026)
   Chỉ đổi giao diện & hiệu ứng; form, giải, voucher, đánh giá giữ nguyên.
   ========================================================== */
.brlw .brlw-stage-wrap { position: relative; padding-bottom: 15%; isolation: isolate; }
.brlw .brlw-stage { width: min(100%, 520px); }
.brlw .brlw-glow {
	inset: -22%;
	background:
		radial-gradient(circle at 50% 46%, rgba(255, 226, 140, .38), rgba(201, 162, 39, .14) 34%, transparent 62%),
		conic-gradient(from 0deg, transparent 0 8deg, rgba(255, 230, 160, .10) 10deg 14deg, transparent 16deg 40deg, rgba(255, 230, 160, .08) 42deg 46deg, transparent 48deg 80deg, rgba(255, 230, 160, .10) 82deg 86deg, transparent 88deg 120deg, rgba(255, 230, 160, .08) 122deg 126deg, transparent 128deg 160deg, rgba(255, 230, 160, .1) 162deg 166deg, transparent 168deg 200deg, rgba(255, 230, 160, .08) 202deg 206deg, transparent 208deg 240deg, rgba(255, 230, 160, .1) 242deg 246deg, transparent 248deg 280deg, rgba(255, 230, 160, .08) 282deg 286deg, transparent 288deg 320deg, rgba(255, 230, 160, .1) 322deg 326deg, transparent 328deg 360deg);
	-webkit-mask: radial-gradient(circle, #000 30%, transparent 68%);
	mask: radial-gradient(circle, #000 30%, transparent 68%);
	animation: brlwx-rays 40s linear infinite;
}
.brlw.is-spinning .brlw-glow { animation-duration: 8s; }
@keyframes brlwx-rays { to { transform: rotate(360deg); } }
.brlw .brlw-rim {
	background:
		repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .06) 0 .6deg, rgba(0, 0, 0, .05) .6deg 1.2deg),
		conic-gradient(from 210deg, #6e520e, #f6e08f 8%, #b8901f 18%, #fff4c6 30%, #9c7a18 42%, #e8cf7a 55%, #7a5c12 66%, #f3dc8f 80%, #a07d1a 90%, #6e520e);
	box-shadow: 0 2px 0 1px #4a3708, 0 0 0 3px #2a1e05, 0 0 0 5px #c9a227, 0 40px 60px -10px rgba(0, 0, 0, .7), 0 0 60px rgba(232, 200, 110, .25), inset 0 3px 2px rgba(255, 250, 220, .7), inset 0 -6px 10px rgba(60, 40, 5, .6);
}
.brlw .brlw-rim::before {
	content: ""; position: absolute; inset: .7%; border-radius: 50%;
	background: radial-gradient(circle, #1a140c 70%, #070504 100%);
	box-shadow: inset 0 3px 6px rgba(0, 0, 0, .85), inset 0 -2px 3px rgba(255, 230, 160, .25), 0 1px 0 rgba(255, 245, 210, .5);
}
.brlw .brlw-rim::after {
	inset: 5.4%;
	background: conic-gradient(from 30deg, #7a5c12, #fff1b8, #b8901f, #f3dc8f, #8a6b12, #fff1b8, #7a5c12);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(0, 0, 0, .5), 0 4px 10px rgba(0, 0, 0, .6);
}
.brlw .brlw-wheel-wrap { inset: 6.6%; box-shadow: 0 0 0 2px #2a1e05, inset 0 0 18px rgba(0, 0, 0, .55); }
.brlw .brlw-wheel-wrap::after {
	z-index: 2;
	background: radial-gradient(90% 55% at 32% 14%, rgba(255, 255, 255, .30), rgba(255, 255, 255, .06) 38%, transparent 52%), radial-gradient(circle, transparent 58%, rgba(0, 0, 0, .35) 100%);
	mix-blend-mode: screen;
}
.brlw .brlw-bulb {
	width: 3.3%; height: 3.3%;
	background: radial-gradient(circle at 35% 30%, #fff 0 18%, #fff3c4 30%, #f1c75b 58%, #9a6d0c 100%);
	box-shadow: 0 0 0 1.5px rgba(60, 40, 5, .8), 0 0 8px 2px rgba(255, 214, 110, .75), 0 0 18px 4px rgba(255, 190, 60, .35);
	animation: brlwx-bulb 1.6s ease-in-out infinite;
	transition: opacity .25s;
}
.brlw.is-spinning .brlw-bulb { animation-duration: .35s; }
@keyframes brlwx-bulb {
	0%, 100% { filter: brightness(1.15) saturate(1.1); }
	50% { filter: brightness(.55) saturate(.7); box-shadow: 0 0 0 1.5px rgba(60, 40, 5, .8), 0 0 2px rgba(255, 214, 110, .3); }
}
.brlw .brlw-pointer {
	top: -5.5%; width: 13.5%; aspect-ratio: 60 / 84;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 84'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%237a5a12'/%3E%3Cstop offset='.3' stop-color='%23fff1b8'/%3E%3Cstop offset='.55' stop-color='%23d4ae3a'/%3E%3Cstop offset='1' stop-color='%236e520e'/%3E%3C/linearGradient%3E%3CradialGradient id='r' cx='.38' cy='.35' r='.7'%3E%3Cstop offset='0' stop-color='%23ffd3dc'/%3E%3Cstop offset='.25' stop-color='%23e0425f'/%3E%3Cstop offset='.7' stop-color='%23891030'/%3E%3Cstop offset='1' stop-color='%23420614'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M30 82 C24 64 4 44 4 28 A26 26 0 0 1 56 28 C56 44 36 64 30 82Z' fill='url(%23g)' stroke='%233a2a06' stroke-width='2'/%3E%3Cpath d='M30 74 C26 60 10 44 10 29 A20 20 0 0 1 50 29 C50 44 34 60 30 74Z' fill='none' stroke='%23fff6d0' stroke-opacity='.55' stroke-width='1.2'/%3E%3Ccircle cx='30' cy='28' r='12' fill='%233a2a06'/%3E%3Ccircle cx='30' cy='28' r='10' fill='url(%23r)'/%3E%3Cellipse cx='26' cy='23' rx='3.6' ry='2.4' fill='%23fff' fill-opacity='.85'/%3E%3C/svg%3E") center / contain no-repeat;
	filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .55)) drop-shadow(0 0 10px rgba(255, 210, 120, .35));
	transform-origin: 50% 30%;
}
.brlw .brlw-pointer svg { display: none; }
.brlw.brlwx.is-spinning .brlw-pointer { animation: none; }
.brlw .brlw-hub {
	width: 25%;
	background: radial-gradient(circle at 36% 28%, #fffbe6 0 6%, rgba(255, 251, 230, 0) 28%), radial-gradient(circle at 50% 60%, #f6dc86 0%, #d1a838 42%, #946f14 78%, #5e4409 100%);
	box-shadow: 0 0 0 3px #3a2a06, 0 0 0 6px #e8cf7a, 0 0 0 8px #6e520e, 0 14px 24px rgba(0, 0, 0, .6), inset 0 -6px 10px rgba(80, 55, 5, .65), inset 0 4px 6px rgba(255, 250, 225, .8);
}
.brlw .brlw-hub::before {
	inset: -16%; border-radius: 50%;
	border: 2px solid rgba(243, 220, 143, .75);
	box-shadow: 0 0 22px rgba(243, 220, 143, .55);
	background: none;
	animation: brlwx-halo 2.2s ease-out infinite;
}
@keyframes brlwx-halo { 0% { transform: scale(.86); opacity: .95; } 100% { transform: scale(1.18); opacity: 0; } }
.brlw .brlw-hub-inner span { font-family: "Lora", Georgia, serif; font-weight: 700; letter-spacing: .14em; color: #3a2806; text-shadow: 0 1px 0 rgba(255, 248, 220, .8); }
.brlw .brlw-hub svg { filter: drop-shadow(0 1px 0 rgba(255, 248, 220, .7)) drop-shadow(0 -1px 0 rgba(60, 40, 5, .5)); }
.brlw .brlw-stage-wrap::after {
	content: ""; position: absolute; left: 50%; bottom: 0; z-index: -1;
	width: 46%; max-width: 240px; aspect-ratio: 240 / 120; transform: translateX(-50%);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 120'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%235e4409'/%3E%3Cstop offset='.3' stop-color='%23f3dc8f'/%3E%3Cstop offset='.5' stop-color='%23c9a227'/%3E%3Cstop offset='.72' stop-color='%23fff1b8'/%3E%3Cstop offset='1' stop-color='%235e4409'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23211a10'/%3E%3Cstop offset='1' stop-color='%23050403'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M98 0 H142 L156 70 H84Z' fill='url(%23m)' stroke='%233a2a06' stroke-width='2'/%3E%3Crect x='70' y='66' width='100' height='10' rx='3' fill='url(%23m)' stroke='%233a2a06' stroke-width='1.5'/%3E%3Cpath d='M40 76 H200 L222 104 H18Z' fill='url(%23d)' stroke='%23c9a227' stroke-width='2'/%3E%3Crect x='12' y='102' width='216' height='12' rx='4' fill='url(%23m)' stroke='%233a2a06' stroke-width='1.5'/%3E%3Cpath d='M60 90 H180' stroke='%23c9a227' stroke-opacity='.6' stroke-width='1'/%3E%3C/svg%3E") center bottom / contain no-repeat;
	filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .6));
}
.brlw .brlw-stage-wrap::before {
	content: ""; position: absolute; left: 50%; bottom: -2%; z-index: -2;
	width: 70%; height: 8%; transform: translateX(-50%); border-radius: 50%;
	background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent);
}
.brlw .brlw-stage::after {
	content: ""; position: absolute; inset: -6%; pointer-events: none; z-index: 5;
	background: radial-gradient(circle at 8% 22%, #fff 0 1.5px, transparent 3px), radial-gradient(circle at 92% 30%, #fff 0 1.5px, transparent 3px), radial-gradient(circle at 14% 84%, #fff3c4 0 1.2px, transparent 2.5px), radial-gradient(circle at 88% 78%, #fff 0 1.5px, transparent 3px), radial-gradient(circle at 50% 2%, #fff3c4 0 1.2px, transparent 2.5px);
	animation: brlwx-twinkle 3s ease-in-out infinite;
}
@keyframes brlwx-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* Ô trúng sáng viền */
.brlw-wheel-wrap .brlwx-hl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; z-index: 1; }
.brlw.brlwx-won .brlwx-hl { animation: brlwx-hl .7s ease-in-out infinite alternate; }
@keyframes brlwx-hl { from { opacity: .35; } to { opacity: 1; } }

/* Lắc nhẹ mời gọi khi chờ */
.brlw.brlwx-idle:not(.is-spinning) .brlw-wheel { animation: brlwx-sway 5s ease-in-out infinite; }
@keyframes brlwx-sway { 0%, 100% { transform: rotate(var(--rot, 0deg)); } 50% { transform: rotate(calc(var(--rot, 0deg) + 4deg)); } }

/* Màn mở đầu */
.brlw.brlwx-pre .brlw-stage { opacity: 0; transform: translateY(-50px) scale(.88); }
.brlw.brlwx .brlw-stage { transition: opacity .6s ease, transform 1.1s cubic-bezier(.2, 1.5, .4, 1); }
.brlw.brlwx-open .brlw-bulb:not(.is-lit) { opacity: .1; }
.brlwx-curtain { position: absolute; top: -6%; bottom: 0; width: 52%; z-index: 9; pointer-events: none; background: repeating-linear-gradient(90deg, #050403 0, #1d1710 3.5%, #0a0806 7%); box-shadow: inset 0 -30px 40px rgba(0, 0, 0, .8); transition: transform 1.6s cubic-bezier(.7, 0, .2, 1), opacity .4s ease 1.4s; }
.brlwx-curtain::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 22px; background: repeating-linear-gradient(90deg, #c9a227 0 3px, #7a5c12 3px 6px); }
.brlwx-curtain.l { left: -2%; border-right: 3px solid #c9a227; }
.brlwx-curtain.r { right: -2%; border-left: 3px solid #c9a227; }
.brlw.brlwx-open .brlwx-curtain.l { transform: translateX(-104%); opacity: 0; }
.brlw.brlwx-open .brlwx-curtain.r { transform: translateX(104%); opacity: 0; }
.brlwx-spot { position: absolute; top: -30%; width: 80%; height: 150%; z-index: -1; pointer-events: none; opacity: 0; background: conic-gradient(from 165deg at 50% 0, transparent 0deg, rgba(255, 226, 150, .22) 12deg, rgba(255, 240, 200, .35) 15deg, rgba(255, 226, 150, .22) 18deg, transparent 30deg); filter: blur(6px); transform-origin: 50% 0; }
.brlwx-spot.a { left: -40%; }
.brlwx-spot.b { right: -40%; }
.brlw.brlwx-open .brlwx-spot.a { animation: brlwx-sweepA 3.2s ease-in-out .4s both; }
.brlw.brlwx-open .brlwx-spot.b { animation: brlwx-sweepB 3.2s ease-in-out .4s both; }
@keyframes brlwx-sweepA { 0% { opacity: 0; transform: rotate(-35deg); } 30% { opacity: 1; } 70% { opacity: 1; transform: rotate(22deg); } 100% { opacity: .4; transform: rotate(14deg); } }
@keyframes brlwx-sweepB { 0% { opacity: 0; transform: rotate(35deg); } 30% { opacity: 1; } 70% { opacity: 1; transform: rotate(-22deg); } 100% { opacity: .4; transform: rotate(-14deg); } }

/* Nút âm thanh */
.brlwx-snd { position: absolute; right: -2%; top: -2%; z-index: 8; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid #c9a227; background: rgba(10, 8, 5, .75); color: #f3dc8f; font-size: 17px; line-height: 1; cursor: pointer; }

/* Chớp sáng & hạt vàng toàn màn hình */
.brlwx-flash { position: fixed; inset: 0; z-index: 99980; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(255, 244, 200, .85), rgba(255, 214, 110, .35) 40%, transparent 70%); }
.brlwx-flash.go { animation: brlwx-fl .9s ease-out; }
@keyframes brlwx-fl { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.brlwx-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 99985; pointer-events: none; }
.brlw.brlwx-shake .brlw-stage { animation: brlwx-shk .5s; }
@keyframes brlwx-shk { 20% { transform: translate(-4px, 2px); } 40% { transform: translate(4px, -2px); } 60% { transform: translate(-3px, 1px); } 80% { transform: translate(2px, -1px); } }

/* Thẻ quà lật 3D + vệt sáng VIP (giữ nguyên nội dung & nút đánh giá) */
.brlw-modal { perspective: 1200px; }
.brlw-modal .brlw-ticket { position: relative; box-shadow: 0 0 0 2px #7a5c12, 0 0 0 7px #e8cf7a, 0 0 0 9px #5e4409, 0 30px 80px rgba(0, 0, 0, .7), 0 0 120px rgba(255, 210, 110, .35); }
.brlw-modal.is-open .brlw-ticket { animation: brlwx-flip 1s cubic-bezier(.2, 1.4, .3, 1) both; }
@keyframes brlwx-flip { from { transform: rotateY(-100deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.brlw-modal .brlw-ticket::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%) no-repeat; background-size: 250% 100%; background-position: 130% 0; animation: brlwx-shine 2.8s ease-in-out 1.1s infinite; }
@keyframes brlwx-shine { 0% { background-position: 130% 0; } 55%, 100% { background-position: -30% 0; } }

/* Nút "Nhận quà" nổi bật ngay dưới mã voucher – mở trang đánh giá 5 sao Google Maps */
.brlw-modal a.brlw-close.brlwx-cta { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 16px auto 4px; width: 100%; max-width: 340px; padding: 14px 18px 12px; border-radius: 16px; text-decoration: none; text-align: center; font: 700 17px/1.1 "Lora", Georgia, serif !important; letter-spacing: .14em; text-transform: uppercase; color: #2a1d05 !important; background: linear-gradient(180deg, #fff1b8, #e2c25a 45%, #b8901f); border: 1.5px solid #8a6b12; box-shadow: 0 10px 24px rgba(60, 40, 5, .35), 0 0 0 3px rgba(255, 241, 184, .7), inset 0 1px 0 rgba(255, 255, 255, .8); animation: brlwx-cta 1.6s ease-in-out infinite; }
.brlw-modal a.brlw-close.brlwx-cta::before { content: "★★★★★"; font: 400 18px/1 Georgia, serif; letter-spacing: .12em; color: #8e1b33; text-shadow: 0 1px 0 rgba(255, 248, 220, .9); }
.brlw-modal a.brlw-close.brlwx-cta::after { content: "Đánh giá 5 sao trên Google Maps"; font: 600 11.5px/1.2 "Poppins", sans-serif; letter-spacing: .02em; text-transform: none; opacity: .8; }
.brlw-modal a.brlw-close.brlwx-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
@keyframes brlwx-cta { 50% { box-shadow: 0 10px 24px rgba(60, 40, 5, .35), 0 0 0 7px rgba(255, 241, 184, .25), 0 0 32px rgba(255, 214, 110, .75), inset 0 1px 0 rgba(255, 255, 255, .8); } }
@media (prefers-reduced-motion: reduce) { .brlw-modal a.brlw-close.brlwx-cta { animation: none; } }

@media (prefers-reduced-motion: reduce) {
	.brlw .brlw-glow, .brlw .brlw-bulb, .brlw .brlw-hub::before, .brlw .brlw-stage::after, .brlw-modal .brlw-ticket::after, .brlw.brlwx-idle .brlw-wheel { animation: none; }
	.brlwx-curtain, .brlwx-spot { display: none; }
}
