/**
 * Nền toàn trang: gradient + particles (chuyenmobile-style).
 * Không dùng lớp gradient khổng lồ + overflow:hidden — sẽ chỉ thấy 1–2 "dải sáng" mép.
 */
html.pc-storefront-html {
	--pc-chuyen-teal: #01dbb0;
	--pc-chuyen-violet: #6e49d9;
}

html[data-pc-theme="light"].pc-storefront-html {
	--pc-site-bg-base: #e8e8eb;
	--pc-site-grad-opacity: 0.88;
}

html[data-pc-theme="dark"].pc-storefront-html {
	--pc-chuyen-teal: #2dd4bf;
	--pc-chuyen-violet: #8b5cf6;
	--pc-site-bg-base: #2d2d31;
	--pc-site-grad-opacity: 0.55;
}

html.pc-storefront-html,
body.pc-storefront-body {
	background-color: var(--pc-site-bg-base) !important;
}

/* Tránh flex body làm co node (fixed vẫn nên có kích thước tường minh) */
body.pc-storefront-body > .pc-global-site-bg {
	flex: none;
	align-self: stretch;
	width: 100%;
	max-width: 100%;
}

.pc-global-site-bg {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	min-height: 100vh;
	min-height: 100dvh;
	z-index: 0;
	pointer-events: none;
	/* Không clip gradient phình — đó là nguyên nhân vệt sáng */
	overflow: visible;
}

/* Lớp gradient trùng khung viewport */
.pc-global-site-bg__gradient {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: var(--pc-site-grad-opacity);
	will-change: background-position;
	transform: translateZ(0);
}

/* Sáng: gradient chuyển động nhẹ, toàn màn hình */
html[data-pc-theme="light"].pc-storefront-html .pc-global-site-bg__gradient {
	background-image: linear-gradient(293deg, var(--pc-chuyen-teal) 0%, var(--pc-chuyen-violet) 50%, var(--pc-chuyen-teal) 100%);
	background-size: 140% 140%;
	animation: pcGlobalSiteBgShiftLight 26s ease-in-out infinite alternate;
}

/* Tối: không animation — chỉ ánh sáng loang đều, bỏ "hai thanh" lạ */
html[data-pc-theme="dark"].pc-storefront-html .pc-global-site-bg__gradient {
	animation: none;
	opacity: calc(var(--pc-site-grad-opacity) * 0.85);
	background-image:
		radial-gradient(ellipse 85% 65% at 15% 25%, rgba(45, 212, 191, 0.38) 0%, transparent 58%),
		radial-gradient(ellipse 75% 55% at 88% 78%, rgba(139, 92, 246, 0.42) 0%, transparent 55%),
		linear-gradient(165deg, rgba(20, 22, 28, 0.92) 0%, rgba(35, 38, 48, 0.88) 100%);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

@keyframes pcGlobalSiteBgShiftLight {
	0% {
		background-position: 8% 40%;
	}
	100% {
		background-position: 92% 60%;
	}
}

/* Khung particles = đúng viewport (particles.js đo theo offsetWidth/Height) */
.pc-particles-container {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	min-height: 100vh;
	min-height: 100dvh;
	z-index: 2;
}

/* Cột layout không che nền cố định — trước đây chỉ lộ particles ở khe margin .my-4 */
body.pc-storefront-body > .pc-storefront-sticky-root,
body.pc-storefront-body > .pc-storefront-sticky-root > .pc-storefront-page-column {
	background: transparent !important;
}

#pc-particles-js.pc-particles-container {
	min-height: 100vh !important;
	min-height: 100dvh !important;
}

body.pc-storefront-body > .pc-storefront-sticky-root {
	position: relative;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	html[data-pc-theme="light"].pc-storefront-html .pc-global-site-bg__gradient {
		animation: none;
	}
}