/* Tablet / mobile — less noise, same usability */

/*
 * CTA gradient vô hạn: repeating-linear-gradient + dịch đúng 1 chu kỳ (px)
 * → nối vòng không nhảy (khác linear-gradient % không khép kín).
 * Chu kỳ = 168px — đổi phải đổi đồng bộ ở keyframes 100%.
 */
@keyframes km-v4-cta-flow {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: 168px 0;
	}
}

.ui-v4 .km-btn--primary,
.ui-v4 a.km-btn--primary,
.ui-v4 button.km-btn--primary,
body.ui-v4.km-streaming-ui a.km-watch-nav-btn:not(.km-watch-nav-btn--next),
body.ui-v4 .km-detail__cta,
body.ui-v4 a[class*="km-detail__cta--"],
body.ui-v4.km-streaming-ui .km-catalog-list .km-btn--primary {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-color: transparent;
	color: var(--v4-on-gradient);
	background-image: repeating-linear-gradient(
		105deg,
		#5b1864 0px,
		#86198f 28px,
		#be185d 56px,
		#db2777 84px,
		#e879f9 112px,
		#a855f7 140px,
		#5b1864 168px
	);
	background-size: auto;
	background-repeat: repeat;
	background-position: 0 0;
	animation: km-v4-cta-flow 7.25s linear infinite;
}

/* Slider hero: cùng pattern, chậm hơn một chút */
.ui-v4 .km-hero-v3__btn--primary {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-color: transparent;
	color: var(--v4-on-gradient);
	background-image: repeating-linear-gradient(
		105deg,
		#5b1864 0px,
		#86198f 28px,
		#be185d 56px,
		#db2777 84px,
		#e879f9 112px,
		#a855f7 140px,
		#5b1864 168px
	);
	background-size: auto;
	background-repeat: repeat;
	background-position: 0 0;
	animation: km-v4-cta-flow 10.5s linear infinite;
}

/* Hero “Xem ngay”: gradient chảy + pulse viền */
.ui-v4 .km-x4-hero .km-hero-v3__btn--primary.km-x4-glow-pulse,
.ui-v4 .km-hero-v3__btn--primary.km-x4-glow-pulse {
	animation:
		km-v4-cta-flow 10.5s linear infinite,
		km-v4-glow-pulse 4.5s ease-in-out infinite;
}

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

	.ui-v4 .km-btn--primary,
	.ui-v4 a.km-btn--primary,
	.ui-v4 button.km-btn--primary,
	.ui-v4 .km-hero-v3__btn--primary,
	.ui-v4 .km-x4-hero .km-hero-v3__btn--primary,
	.ui-v4 .km-x4-hero .km-hero-v3__btn--primary.km-x4-glow-pulse,
	.ui-v4 .km-hero-v3__btn--primary.km-x4-glow-pulse,
	body.ui-v4.km-streaming-ui a.km-watch-nav-btn:not(.km-watch-nav-btn--next),
	body.ui-v4 .km-detail__cta,
	body.ui-v4 a[class*="km-detail__cta--"],
	body.ui-v4.km-streaming-ui .km-catalog-list .km-btn--primary {
		animation: none !important;
		background-image: var(--v4-grad-cta);
		background-size: auto;
		background-repeat: no-repeat;
		background-position: center;
	}
}

@media (max-width: 1024px) {
	.ui-v4 .km-x4-hero__rune {
		opacity: 0.25;
		width: min(56vw, 280px);
		height: min(56vw, 280px);
	}

	.ui-v4 .km-x4-rail-card {
		width: 132px;
	}
}

@media (max-width: 768px) {
	.ui-v4 .km-home-section {
		padding-top: 1.75rem;
		padding-bottom: 1.75rem;
	}

	.ui-v4 .km-trend-card--x4:hover .km-trend-card__media {
		transform: none;
	}

	.ui-v4 .km-poster-card--home-x4:hover {
		transform: translateY(-2px);
	}

	.ui-v4 .km-x4-rail-card:hover .km-x4-rail-card__media {
		transform: translateY(-2px) scale(1.01);
	}
}

@media (max-width: 480px) {
	.ui-v4 .km-section-head--v4 .km-section-head__title {
		font-size: 1.2rem;
	}
}