/* Base typography & page atmosphere — nền gradient tím hồng */
.ui-v4 {
	color: var(--v4-text-main);
}

body.ui-v4 {
	background-color: #0c0318;
	/* Mặc định: ảnh theme; Customizer có thể ghi đè --km-v4-body-bg-image (inline sau file này) */
	--km-v4-body-bg-image: url("../../img/v4-xianxia-bg.png");
	--km-v4-body-bg-position: center 28%;
	background-image:
		var(--v4-grad-veil),
		var(--v4-grad-sky),
		radial-gradient(ellipse 100% 70% at 50% -8%, rgba(192, 132, 252, 0.32), transparent 60%),
		radial-gradient(ellipse 80% 50% at 0% 60%, rgba(219, 39, 119, 0.12), transparent 52%),
		radial-gradient(ellipse 70% 45% at 100% 40%, rgba(244, 114, 182, 0.1), transparent 50%),
		var(--km-v4-body-bg-image);
	background-size: auto, auto, auto, auto, auto, cover;
	background-position: center top, center top, center top, center top, center top, var(--km-v4-body-bg-position);
	background-repeat: no-repeat;
	background-attachment: fixed, fixed, fixed, fixed, fixed, fixed;
}

.ui-v4 .km-body-flow {
	position: relative;
}

.ui-v4 .km-body-flow::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: var(--v4-grad-mesh);
}

.ui-v4 .km-main,
.ui-v4 .km-home,
.ui-v4 .km-footer {
	position: relative;
	z-index: 1;
}

/* Nội dung trong suốt — nền chỉ từ body + lớp ::before (không bị gradient streaming đè) */
body.ui-v4.km-streaming-ui .km-main {
	background: transparent;
}

.ui-v4 a {
	color: var(--v4-accent);
}

.ui-v4 a:hover {
	color: var(--v4-fuchsia);
}

.ui-v4 .km-btn--primary {
	background: var(--v4-grad-cta);
	border: none;
	color: var(--v4-on-gradient);
	font-weight: 700;
	text-shadow: var(--v4-on-gradient-shadow);
	box-shadow: 0 0 28px var(--v4-pk-35);
}

.ui-v4 .km-btn--ghost {
	border-color: var(--v4-edge);
	color: var(--v4-text-soft);
	background: rgba(255, 255, 255, 0.04);
}

.ui-v4 .screen-reader-text:focus {
	outline: 2px solid var(--v4-fuchsia);
}

@media (max-width: 768px) {
	body.ui-v4 {
		background-attachment: scroll, scroll, scroll, scroll, scroll, scroll;
		--km-v4-body-bg-position: center 22%;
		background-position: center top, center top, center top, center top, center top, var(--km-v4-body-bg-position);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.ui-v4 {
		background-attachment: scroll, scroll, scroll, scroll, scroll, scroll;
	}
}