/**
 * V4 — khóa layout lưới & chiều rộng (flex chain + grid).
 * Mọi rule bắt đầu .ui-v4
 */
.ui-v4 .km-body-flow {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.ui-v4 .km-main,
.ui-v4 .km-home {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	flex: 1 1 auto;
}

.ui-v4 .km-container {
	width: 100%;
	max-width: min(var(--km-max, 1240px), 100%);
	box-sizing: border-box;
}

.ui-v4 .km-home-layout {
	display: grid;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.ui-v4 .km-home-layout__main {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

/* «Mới cập nhật» portal: section full-bleed nền, căng đúng với .km-home (cùng hàng thể loại) */
.ui-v4 .km-home-section--grid-v4 {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Trang chủ — lưới poster (Mới cập nhật) */
.ui-v4 .km-poster-grid,
.ui-v4 .km-poster-grid--home-v4 {
	display: grid;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.75rem 0.85rem;
}

@media (max-width: 1100px) {
	.ui-v4 .km-poster-grid,
	.ui-v4 .km-poster-grid--home-v4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.ui-v4 .km-poster-grid,
	.ui-v4 .km-poster-grid--home-v4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.ui-v4 .km-poster-grid,
	.ui-v4 .km-poster-grid--home-v4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 360px) {
	.ui-v4 .km-poster-grid,
	.ui-v4 .km-poster-grid--home-v4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem 0.4rem;
	}
}

/*
 * Trang chủ — «Mới cập nhật» (section--grid-v4): selector cụ thể hơn để thắng mọi rule
 * từ main.css và giữ khe cột đủ rộng (tránh poster + viền/shadow dính nhau).
 */
.ui-v4 .km-home-section--grid-v4 .km-poster-grid,
.ui-v4 .km-home-section--grid-v4 .km-poster-grid--home-v2,
.ui-v4 .km-home-section--grid-v4 .km-poster-grid--home-v4 {
	display: grid;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	column-gap: clamp(0.95rem, 2vw, 1.4rem);
	row-gap: clamp(1.1rem, 2.2vw, 1.55rem);
}

@media (max-width: 1100px) {
	.ui-v4 .km-home-section--grid-v4 .km-poster-grid,
	.ui-v4 .km-home-section--grid-v4 .km-poster-grid--home-v2,
	.ui-v4 .km-home-section--grid-v4 .km-poster-grid--home-v4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: clamp(0.85rem, 1.8vw, 1.2rem);
		row-gap: clamp(1rem, 2vw, 1.35rem);
	}
}

@media (max-width: 768px) {
	.ui-v4 .km-home-section--grid-v4 .km-poster-grid,
	.ui-v4 .km-home-section--grid-v4 .km-poster-grid--home-v2,
	.ui-v4 .km-home-section--grid-v4 .km-poster-grid--home-v4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 0.85rem;
		row-gap: 1.05rem;
	}
}

@media (max-width: 480px) {
	.ui-v4 .km-home-section--grid-v4 .km-poster-grid,
	.ui-v4 .km-home-section--grid-v4 .km-poster-grid--home-v2,
	.ui-v4 .km-home-section--grid-v4 .km-poster-grid--home-v4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 0.75rem;
		row-gap: 1rem;
	}
}

@media (max-width: 360px) {
	.ui-v4 .km-home-section--grid-v4 .km-poster-grid,
	.ui-v4 .km-home-section--grid-v4 .km-poster-grid--home-v2,
	.ui-v4 .km-home-section--grid-v4 .km-poster-grid--home-v4 {
		column-gap: 0.65rem;
		row-gap: 0.85rem;
	}
}

.ui-v4 .km-poster-card {
	min-width: 0;
	width: 100%;
	max-width: 100%;
}

/* Archive / lọc — .km-grid */
.ui-v4 .km-grid {
	display: grid;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1.25rem;
}

@media (max-width: 1100px) {
	.ui-v4 .km-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.ui-v4 .km-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.ui-v4 .km-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ui-v4 .km-card {
	min-width: 0;
}

/* Carousel trending — không bị co track */
.ui-v4 .km-carousel--streaming-five {
	display: flex;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	align-items: stretch;
}

.ui-v4 .km-carousel--streaming-five .km-carousel__viewport {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
}

.ui-v4 .km-carousel--streaming-five .km-carousel__track {
	min-width: 0;
	max-width: 100%;
}

.ui-v4 .km-carousel:not(.km-carousel--streaming-five) {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.ui-v4 .km-home-v3-row__track,
.ui-v4 .km-home-v3-row__viewport {
	min-width: 0;
	max-width: 100%;
}