/**
 * Nền ảnh toàn viewport — tràn header/footer; chrome glass + tone adaptive (data-sf-bg-tone).
 * Ảnh hiển thị qua <img> (JPEG display variant) — không dùng background-attachment: fixed.
 */
html.pc-storefront-html {
	min-height: 100vh;
	min-height: 100dvh;
	min-height: -webkit-fill-available;
}

html.pc-storefront-html:has(.pc-global-site-bg),
html.pc-storefront-html:has(.pc-global-site-bg) body.pc-storefront-body {
	background: transparent !important;
	background-color: transparent !important;
}

body.pc-storefront-body > .pc-global-site-bg {
	flex: none;
	align-self: stretch;
	width: 100%;
	max-width: 100%;
}

.pc-global-site-bg {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	min-height: 100vh;
	min-height: 100dvh;
	min-height: 100svh;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.pc-global-site-bg__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	z-index: 0;
	user-select: none;
	-webkit-user-drag: none;
}

/* Hiệu ứng chuyển động nhẹ (Ken Burns) — bật qua admin */
.pc-global-site-bg--motion .pc-global-site-bg__photo {
	inset: -5%;
	width: 110%;
	height: 110%;
	animation: sf-bg-photo-drift 32s ease-in-out infinite alternate;
	transform-origin: center center;
	will-change: transform;
}

@keyframes sf-bg-photo-drift {
	0% {
		transform: scale(1) translate3d(0, 0, 0);
	}
	100% {
		transform: scale(1.07) translate3d(-1.25%, -0.85%, 0);
	}
}

.pc-global-site-bg__gradient {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: var(--sf-bg-overlay-opacity, 0.42);
	background: var(
		--sf-bg-overlay-gradient,
		linear-gradient(
			180deg,
			rgba(15, 23, 42, 0.55) 0%,
			rgba(15, 23, 42, 0.18) 38%,
			rgba(15, 23, 42, 0.22) 68%,
			rgba(15, 23, 42, 0.58) 100%
		)
	);
}

body.pc-storefront-body > .pc-storefront-sticky-root,
body.pc-storefront-body > .pc-storefront-sticky-root > .pc-storefront-page-column,
html.pc-storefront-html:has(.pc-global-site-bg) .pc-storefront-page-column > .content-wrapper {
	background: transparent !important;
	background-color: transparent !important;
}

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

html.pc-storefront-html .pc-particles-container,
html.pc-storefront-html #pc-particles-js {
	display: none !important;
}

/* Defaults before JS measures image (dark photo → light chrome text) */
html.pc-storefront-html:has(.pc-global-site-bg) {
	--sf-bg-chrome-text: #f8fafc;
	--sf-bg-chrome-muted: #cbd5e1;
	--sf-bg-chrome-border: rgba(255, 255, 255, 0.2);
	--sf-bg-chrome-bg: rgba(15, 23, 42, 0.22);
	--sf-bg-overlay-opacity: 0.38;
}

html.pc-storefront-html:has(.pc-global-site-bg)[data-sf-bg-tone="light"] {
	--sf-bg-chrome-text: #0f172a;
	--sf-bg-chrome-muted: #475569;
	--sf-bg-chrome-border: rgba(15, 23, 42, 0.14);
	--sf-bg-chrome-bg: rgba(255, 255, 255, 0.52);
	--sf-bg-overlay-opacity: 0.22;
	--sf-bg-overlay-gradient: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.45) 0%,
		rgba(255, 255, 255, 0.12) 40%,
		rgba(255, 255, 255, 0.1) 70%,
		rgba(255, 255, 255, 0.42) 100%
	);
}

html.pc-storefront-html:has(.pc-global-site-bg)[data-sf-bg-tone="dark"] {
	--sf-bg-overlay-gradient: linear-gradient(
		180deg,
		rgba(15, 23, 42, 0.62) 0%,
		rgba(15, 23, 42, 0.15) 40%,
		rgba(15, 23, 42, 0.18) 70%,
		rgba(15, 23, 42, 0.65) 100%
	);
}

html.pc-storefront-html:has(.pc-global-site-bg)[data-pc-theme="dark"] {
	--sf-bg-chrome-text: #f8fafc !important;
	--sf-bg-chrome-muted: #cbd5e1 !important;
	--sf-bg-chrome-border: rgba(255, 255, 255, 0.18) !important;
	--sf-bg-chrome-bg: rgba(15, 23, 42, 0.65) !important;
	--sf-bg-overlay-opacity: 0.62 !important;
}

/* Header + footer glass — ảnh nền hiện xuyên suốt */
html.pc-storefront-html:has(.pc-global-site-bg) header.customer-site-header,
html.pc-storefront-html:has(.pc-global-site-bg) footer.gt-footer.gt-footer--client-app {
	background: var(--sf-bg-chrome-bg) !important;
	background-color: var(--sf-bg-chrome-bg) !important;
	backdrop-filter: blur(14px) saturate(1.12);
	-webkit-backdrop-filter: blur(14px) saturate(1.12);
	border-color: var(--sf-bg-chrome-border) !important;
	box-shadow: none !important;
	color: var(--sf-bg-chrome-text) !important;
}

html.pc-storefront-html:has(.pc-global-site-bg) header.customer-site-header nav.navbar-light,
html.pc-storefront-html:has(.pc-global-site-bg) header.customer-site-header .top-navbar {
	background: transparent !important;
	border-bottom-color: var(--sf-bg-chrome-border) !important;
}

html.pc-storefront-html:has(.pc-global-site-bg) footer.gt-footer.gt-footer--client-app {
	border-top-color: var(--sf-bg-chrome-border) !important;
}

html.pc-storefront-html:has(.pc-global-site-bg) footer.gt-footer p,
html.pc-storefront-html:has(.pc-global-site-bg) footer.gt-footer .footer-made-with,
html.pc-storefront-html:has(.pc-global-site-bg) footer.gt-footer .text-primary {
	color: var(--sf-bg-chrome-text) !important;
}

html.pc-storefront-html:has(.pc-global-site-bg) footer.gt-footer a {
	color: var(--sf-bg-chrome-text) !important;
	text-decoration: underline;
}

html.pc-storefront-html:has(.pc-global-site-bg) footer.gt-footer a:hover {
	color: color-mix(in srgb, var(--bs-primary) 70%, var(--sf-bg-chrome-text)) !important;
}

html.pc-storefront-html:has(.pc-global-site-bg) footer.gt-footer .footer-branding-credit .text-primary {
	color: color-mix(in srgb, var(--bs-primary) 75%, var(--sf-bg-chrome-text)) !important;
}

/* Nav + util — adaptive text */
html.pc-storefront-html:has(.pc-global-site-bg) header.customer-site-header .customer-header-main-nav > li.menu-item > .nav-link:not(.customer-header-user-btn),
html.pc-storefront-html:has(.pc-global-site-bg) header.customer-site-header nav.navbar-light .navbar-nav .nav-link,
html.pc-storefront-html:has(.pc-global-site-bg) header.customer-site-header .customer-header-util-nav .nav-link,
html.pc-storefront-html:has(.pc-global-site-bg) header.customer-site-header .customer-header-util-nav a.text-reset,
html.pc-storefront-html:has(.pc-global-site-bg) header.customer-site-header .customer-header-util-nav .dropdown-toggle,
html.pc-storefront-html:has(.pc-global-site-bg) header.customer-site-header .customer-header-util-nav .dropdown-toggle span,
html.pc-storefront-html:has(.pc-global-site-bg) header.customer-site-header .menu-retail,
html.pc-storefront-html:has(.pc-global-site-bg) header.customer-site-header .menu-retail .menu-retail__label {
	color: var(--sf-bg-chrome-text) !important;
}

html.pc-storefront-html:has(.pc-global-site-bg) header.customer-site-header .customer-header-main-nav > li.menu-item > .nav-link:not(.customer-header-user-btn):hover,
html.pc-storefront-html:has(.pc-global-site-bg) header.customer-site-header .customer-header-main-nav > li.menu-item > .nav-link:not(.customer-header-user-btn):focus-visible,
html.pc-storefront-html:has(.pc-global-site-bg) header.customer-site-header nav.navbar-light .navbar-nav .nav-link:hover,
html.pc-storefront-html:has(.pc-global-site-bg) header.customer-site-header .customer-header-util-nav a.text-reset:hover {
	color: color-mix(in srgb, var(--bs-primary) 70%, var(--sf-bg-chrome-text)) !important;
}

html.pc-storefront-html:has(.pc-global-site-bg) header.customer-site-header .customer-header-main-nav > li.menu-item > .nav-link.active:not(.customer-header-user-btn),
html.pc-storefront-html:has(.pc-global-site-bg) header.customer-site-header .menu-retail.active {
	color: var(--bs-primary) !important;
}

html.pc-storefront-html:has(.pc-global-site-bg)[data-sf-bg-tone="dark"] header.customer-site-header .customer-header-wallet-amount.text-primary {
	color: #93c5fd !important;
}

html.pc-storefront-html:has(.pc-global-site-bg)[data-sf-bg-tone="light"] header.customer-site-header .customer-header-wallet-amount.text-primary {
	color: var(--bs-primary) !important;
}

@media (prefers-reduced-motion: reduce) {
	.pc-global-site-bg--motion .pc-global-site-bg__photo {
		animation: none;
		inset: 0;
		width: 100%;
		height: 100%;
		transform: none;
	}
}

@media (max-width: 767.98px) {
	html.pc-storefront-html:has(.pc-global-site-bg) header.customer-site-header,
	html.pc-storefront-html:has(.pc-global-site-bg) footer.gt-footer.gt-footer--client-app {
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}
}