/* ============================================================
   TAMI - Tin nổi bật + Video (Elementor widget)
   Port từ section .news-video trong bản prototype tĩnh app/public/html/index.html.
   Toàn bộ selector scope trong .tami-news-video để không đụng CSS theme.

   Biến --red/--text/--muted… là của prototype, không tồn tại trong theme WP
   nên giá trị được ghi thẳng ở đây (giống partners.css / review.css).
   ============================================================ */
.tami-news-video {
	--tami-nv-red: #e2181f;
	--tami-nv-red-dark: #c1121a;
	--tami-nv-text: #4a5568;
	--tami-nv-gap: 34px;

	padding: 80px 0;
}

.tami-news-video__inner {
	max-width: 1230px;
	margin: 0 auto;
	padding: 0 15px;

	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--tami-nv-gap);
}

/* Mỗi cột tự co giãn theo tỉ lệ 2:1.
   Nếu một trong hai cột bị tắt thì cột còn lại full width (xem modifier
   --news-only / --video-only ở cuối file). */
.tami-news-video__col {
	min-width: 0;
}

.tami-news-video__col--news {
	flex: 2 1 460px;
}

.tami-news-video__col--video {
	flex: 1 1 300px;
}

.tami-news-video__block-title {
    font-size: 30px !important;
    font-weight: 800;
    line-height: 1.5 !important;
    color: var(--tami-nv-red) !important;
    margin: 0 0 20px !important;
    text-transform: uppercase;
}

/* Cho phép bôi đỏ đậm một cụm từ trong tiêu đề bằng <span class="text-red"> */
.tami-news-video__block-title .text-red {
	color: var(--tami-nv-red-dark);
}

/* ---------- Cột tin tức ---------- */
.tami-news-video__news-grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	align-items: start;
	gap: 26px;
}

/* Chỉ có tin nổi bật (không có danh sách) hoặc ngược lại -> ô còn lại trải full */
.tami-news-video__news-grid--single {
	grid-template-columns: 1fr;
}

.tami-news-video__feature {
	min-width: 0;
}

.tami-news-video__feature-thumb {
	display: block;
	overflow: hidden;
}

.tami-news-video__feature-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .35s ease;
}

.tami-news-video__feature-thumb:hover img {
	transform: scale(1.04);
}

.tami-news-video__feature-title {
	font-size: 18px !important;
	font-weight: 800;
	line-height: 1.45 !important;
	color: var(--tami-nv-red) !important;
	margin: 16px 0 3px !important;
}

.tami-news-video__feature-title a {
	color: inherit;
	text-decoration: none;
}

.tami-news-video__feature-title a:hover {
	color: var(--tami-nv-red-dark);
}

.tami-news-video__feature-excerpt {
	font-size: 14px !important;
	color: var(--tami-nv-text);
	margin: 0 !important;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.5 !important;
}

.tami-news-video__news-list {
	display: grid;
	grid-template-columns: 1fr;
	/* Ít tin thì dồn lên đầu cột, không giãn đều theo chiều cao cột tin nổi bật */
	align-content: start;
	grid-auto-rows: max-content;
	gap: 18px;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.tami-news-video__news-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0 !important;
}

.tami-news-video__news-item::before {
	content: none !important;
}

.tami-news-video__news-item-thumb {
	flex: 0 0 116px;
	overflow: hidden;
}

.tami-news-video__news-item-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .35s ease;
}

.tami-news-video__news-item-thumb:hover img {
	transform: scale(1.06);
}

.tami-news-video__news-item-body {
	min-width: 0;
}

.tami-news-video__news-item-title {
	font-size: 18px !important;
	font-weight: 700;
	line-height: 1.45 !important;
	color: var(--tami-nv-red) !important;
	margin: -4px 0 3px !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tami-news-video__news-item-title a {
	color: inherit;
	text-decoration: none;
}

.tami-news-video__news-item-title a:hover {
	color: var(--tami-nv-red-dark);
}

.tami-news-video__news-item-excerpt {
	font-size: 13.5px !important;
	color: var(--tami-nv-text);
	margin: 0 !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.5 !important;
}

/* ---------- Cột video ---------- */
.tami-news-video__video-main {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	margin-bottom: 18px;
}

.tami-news-video__video-main iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.tami-news-video__video-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.tami-news-video__video-item {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 !important;
}

.tami-news-video__video-item::before {
	content: none !important;
}

.tami-news-video__video-item-thumb {
	position: relative;
	flex: 0 0 106px;
	overflow: hidden;
	cursor: pointer;
}

.tami-news-video__video-item-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .35s ease;
}

.tami-news-video__video-item-thumb:hover img {
	transform: scale(1.06);
}

.tami-news-video__video-item-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 30px;
	height: 22px;
	border-radius: 5px;
	background: rgba(226, 24, 31, .9);
	transition: background .25s ease;
}

.tami-news-video__video-item-play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-40%, -50%);
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent #fff;
}

.tami-news-video__video-item-thumb:hover .tami-news-video__video-item-play {
	background: var(--tami-nv-red);
}

.tami-news-video__video-item-title {
	font-size: 18px !important;
	font-weight: 700;
	line-height: 1.45 !important;
	color: var(--tami-nv-red) !important;
	margin: 0 !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tami-news-video__video-item-title a {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.tami-news-video__video-item-title a:hover {
	color: var(--tami-nv-red-dark);
}

/* Video đang phát trên khung lớn */
.tami-news-video__video-item.is-active .tami-news-video__video-item-play {
	background: var(--tami-nv-red);
}

.tami-news-video__video-item.is-active .tami-news-video__video-item-title {
	color: var(--tami-nv-red-dark) !important;
}

/* ---------- Khi chỉ còn 1 cột ---------- */
/* Tắt cột video: tin tức trải full, danh sách tin chia 2 cột */
.tami-news-video--news-only .tami-news-video__news-grid {
	grid-template-columns: 1fr 1.5fr;
}

.tami-news-video--news-only .tami-news-video__news-grid--single {
	grid-template-columns: 1fr;
}

.tami-news-video--news-only .tami-news-video__news-list {
	grid-template-columns: repeat(2, 1fr);
}

/* Tắt cột tin tức: video trải full, danh sách video chia 3 cột */
.tami-news-video--video-only .tami-news-video__video-main {
	max-width: 860px;
	margin-inline: auto;
}

.tami-news-video--video-only .tami-news-video__video-list {
	grid-template-columns: repeat(3, 1fr);
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
	/* Xếp dọc, cột nào cũng full width */
	.tami-news-video__inner {
		flex-direction: column;
		gap: 40px;
	}

	.tami-news-video__col {
		width: 100%;
		flex: 1 1 auto;
	}

	.tami-news-video__news-grid {
		grid-template-columns: 1fr 1.5fr;
	}

	.tami-news-video__news-grid--single {
		grid-template-columns: 1fr;
	}

	.tami-news-video__news-list {
		grid-template-columns: repeat(2, 1fr);
	}

	.tami-news-video__video-main {
		/* max-width: 860px; */
		margin-inline: auto;
	}

	.tami-news-video__video-list {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 767px) {
	.tami-news-video {
		padding: 40px 0;
	}

	.tami-news-video__block-title {
		font-size: 18px !important;
	}

	.tami-news-video__news-grid,
	.tami-news-video__news-list,
	.tami-news-video__video-list,
	.tami-news-video--news-only .tami-news-video__news-grid,
	.tami-news-video--news-only .tami-news-video__news-list,
	.tami-news-video--video-only .tami-news-video__video-list {
		grid-template-columns: 1fr;
	}

	.tami-news-video__news-item-thumb,
	.tami-news-video__video-item-thumb {
		flex-basis: 96px;
	}
}