/* Trending carousel, poster grid, X4 rail */
.ui-v4 .km-trend-card--x4 .km-trend-card__meta {
	background: var(--v4-surface-2);
	border: 1px solid var(--v4-edge);
	border-radius: 0 0 var(--v4-radius-md) var(--v4-radius-md);
}

.ui-v4 .km-trend-card--x4 .km-trend-card__rank-num {
	color: var(--v4-gold);
	text-shadow: 0 0 12px var(--v4-hl-45);
}

.ui-v4 .km-trend-card--x4:hover .km-trend-card__media {
	box-shadow: 0 0 0 1px var(--v4-hl-35), 0 18px 44px rgba(0, 0, 0, 0.45);
	transform: translateY(-4px) scale(1.02);
}

.ui-v4 .km-trend-card--x4 .km-trend-card__media {
	transition: transform 0.35s ease, box-shadow 0.35s ease;
	border-radius: var(--v4-radius-md) var(--v4-radius-md) 0 0;
}

.ui-v4 .km-poster-card--home-x4 {
	border-radius: var(--v4-radius-md);
	border: 1px solid var(--v4-edge);
	background: var(--v4-surface-2);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ui-v4 .km-poster-card--home-x4:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--v4-hl-30);
}

.ui-v4 .km-poster-card--home-x4 .km-poster-card__ribbon {
	top: 6px;
	left: 6px;
	right: auto;
	max-width: calc(100% - 12px);
	padding: 0.22rem 0.42rem;
	font-size: clamp(0.58rem, 1.05vw, 0.68rem);
	border-radius: 4px;
	background: var(--v4-grad-ribbon);
	color: var(--v4-text-main);
	font-weight: 600;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.ui-v4 .km-poster-card--home-x4 .km-poster-card__overlay {
	background: linear-gradient(180deg, transparent 0%, rgba(8, 4, 18, 0.88) 100%);
}

.ui-v4 .km-x4-rail-card {
	flex: 0 0 auto;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	width: clamp(108px, 36vw, 148px);
	min-height: 0;
}

/* Desktop (≥900px): vừa đúng 6 thẻ trong ô cuộn — không cắt nửa thẻ */
@media (min-width: 900px) {
	.ui-v4 .km-home-v3-row__track > .km-x4-rail-card {
		flex: 0 0 calc((100% - 5 * var(--km-x4-rail-gap, 0.85rem)) / 6);
		width: calc((100% - 5 * var(--km-x4-rail-gap, 0.85rem)) / 6);
		max-width: calc((100% - 5 * var(--km-x4-rail-gap, 0.85rem)) / 6);
		min-width: 0;
	}
}

.ui-v4 .km-x4-rail-card__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	height: 100%;
	text-decoration: none;
	color: inherit;
	position: relative;
}

.ui-v4 .km-x4-rail-card__frame {
	position: absolute;
	inset: -4px;
	border: 1px solid var(--v4-edge);
	border-radius: var(--v4-radius-md);
	pointer-events: none;
	opacity: 0.5;
	box-shadow: inset 0 0 20px var(--v4-hl-08);
}

.ui-v4 .km-x4-rail-card__media {
	position: relative;
	flex-shrink: 0;
	border-radius: var(--v4-radius-md);
	overflow: hidden;
	aspect-ratio: 2 / 3;
	width: 100%;
	border: 1px solid var(--v4-edge);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ui-v4 .km-x4-rail-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ui-v4 .km-x4-rail-card:hover .km-x4-rail-card__media {
	transform: translateY(-4px) scale(1.03);
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--v4-hl-28);
}

.ui-v4 .km-x4-rail-card__badge {
	position: absolute;
	left: 6px;
	bottom: 6px;
	font-size: 0.65rem;
	padding: 0.2rem 0.45rem;
	border-radius: 4px;
	background: rgba(8, 4, 18, 0.88);
	border: 1px solid var(--v4-edge);
	color: var(--v4-text-soft);
}

.ui-v4 .km-x4-rail-card__ribbon {
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: 0.6rem;
	font-weight: 700;
	padding: 0.15rem 0.4rem;
	border-radius: 4px;
	background: var(--v4-grad-cta);
	color: var(--v4-on-gradient);
	text-shadow: var(--v4-on-gradient-shadow);
	box-shadow: 0 0 12px var(--v4-hl-40);
}

.ui-v4 .km-x4-rail-card__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.ui-v4 .km-x4-rail-card:hover .km-x4-rail-card__play {
	opacity: 1;
}

.ui-v4 .km-x4-rail-card__title {
	margin: 0.5rem 0 0;
	flex-shrink: 0;
	font-size: 0.82rem;
	line-height: 1.35;
	color: var(--v4-text-main);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
	/* Luôn chừa đủ 2 dòng — tránh thẻ thấp hơn khi tiêu đề ngắn */
	min-height: calc(0.82rem * 1.35 * 2);
}

.ui-v4 .km-x4-genre-row .km-home-v3-row__nav {
	border: 1px solid var(--v4-edge);
	background: var(--v4-surface-2);
	color: var(--v4-gold);
	border-radius: var(--v4-radius-md);
}

.ui-v4 .km-x4-section-head__mark {
	box-shadow: 0 0 16px var(--v4-pk-35);
	background: linear-gradient(180deg, var(--v4-fuchsia), var(--v4-primary), var(--v4-secondary)) !important;
}

.ui-v4 .km-x4-section-head__title {
	font-family: var(--v4-font-display);
}

.ui-v4 .km-x4-section-head__text {
	background: var(--v4-grad-text-subtle);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 2px 12px var(--v4-vi-22));
}

.ui-v4 .km-x4-section-head__more {
	border: 1px solid var(--v4-edge);
	border-radius: 999px;
	padding: 0.25rem 0.85rem;
	color: var(--v4-gold);
}

.ui-v4 .km-carousel--streaming .km-carousel__viewport {
	border-radius: var(--v4-radius-lg);
	border: none;
	background: transparent;
	box-shadow: none;
}