/**
 * XN88 — panel hai bên (phiên bản nhẹ, không animation).
 */

html {
	background-color: #304387 !important;
	background-image: none !important;
}

body.boxed {
	position: relative;
}

body.boxed #wrapper {
	position: relative;
	z-index: 2;
	background: #fff;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

.xn88-side-panels {
	display: none;
}

@media (min-width: 1280px) {
	.xn88-side-panels {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		contain: strict;
	}

	.xn88-side-panels__inner {
		position: absolute;
		top: 0;
		bottom: 0;
		width: calc((100vw - 1200px) / 2);
		max-width: 360px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 24px 16px;
		box-sizing: border-box;
		z-index: 3;
	}

	.xn88-side-panels__left { left: 0; }
	.xn88-side-panels__right { right: 0; }

	.xn88-side-brand {
		text-align: center;
		color: #fff;
	}

	.xn88-side-brand__logo {
		font-size: 2rem;
		font-weight: 800;
		color: var(--xn88-brand-logo-color, #ffd700);
		line-height: 1.1;
		margin-bottom: 8px;
	}

	.xn88-side-brand__tag {
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		opacity: 0.8;
		line-height: 1.5;
		color: var(--xn88-brand-tag-color, #fff);
	}

	.xn88-side-features {
		margin-top: 24px;
		display: flex;
		flex-direction: column;
		gap: 8px;
		width: 100%;
		max-width: 160px;
		pointer-events: auto;
	}

	.xn88-side-feature {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 12px;
		color: var(--xn88-feature-text-color, rgba(255, 255, 255, 0.85));
		padding: 8px 12px;
		border-radius: 8px;
		background: rgba(255, 255, 255, 0.08);
		border: 1px solid rgba(255, 255, 255, 0.1);
		text-decoration: none;
	}

	.xn88-side-feature--link {
		cursor: pointer;
		pointer-events: auto;
	}

	.xn88-side-feature--link:hover {
		background: rgba(255, 255, 255, 0.14);
		color: var(--xn88-feature-text-color, #fff);
	}

	.xn88-side-cta {
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: 100%;
		max-width: 170px;
		pointer-events: auto;
	}

	.xn88-side-cta__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 12px 16px;
		border-radius: 10px;
		font-size: 12px;
		font-weight: 700;
		text-transform: uppercase;
		text-decoration: none !important;
		color: #fff;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	}

	.xn88-side-cta__btn--primary {
		background: linear-gradient(135deg, #ff6b35, #e53935);
	}

	.xn88-side-cta__btn--gold {
		background: linear-gradient(135deg, #ffc107, #ff8f00);
		color: #1a1a2e;
	}

	.xn88-side-cta__btn--outline {
		background: rgba(255, 255, 255, 0.12);
		border: 1px solid rgba(255, 255, 255, 0.3);
	}

	.xn88-side-promo {
		display: block;
		margin-top: 16px;
		padding: 14px;
		border-radius: 10px;
		text-align: center;
		text-decoration: none !important;
		background: rgba(255, 193, 7, 0.15);
		border: 1px dashed rgba(255, 215, 0, 0.6);
		pointer-events: auto;
	}

	.xn88-side-promo__amount {
		display: block;
		font-size: 1.75rem;
		font-weight: 800;
		color: var(--xn88-promo-amount-color, #ffd700);
		line-height: 1.1;
	}

	.xn88-side-promo__text {
		display: block;
		font-size: 11px;
		font-weight: 600;
		color: var(--xn88-promo-text-color, #fff);
		margin-top: 4px;
		line-height: 1.4;
		text-transform: uppercase;
	}
}

@media (max-width: 1279px) {
	.xn88-side-panels {
		display: none !important;
	}
}