/**
 * NTV Theme — main stylesheet.
 * Bảng màu/typography lấy từ brand reference (mediaonlinevn.com):
 * accent #264C84, text #5E5E5E, body Arial, heading Roboto, menu Titillium Web.
 */

/* ---------- Variables ---------- */
:root {
	--ntv-color-primary: #264C84;
	--ntv-color-primary-dark: #1e3d6a;
	--ntv-color-text: #5E5E5E;
	--ntv-color-text-strong: #232323;
	--ntv-color-bg-menu: #F6F6F6;
	--ntv-color-bg-page: #E0E0E0;
	--ntv-color-bg-content: #FFFFFF;
	--ntv-font-body: Arial, sans-serif;
	--ntv-font-heading: 'Roboto', sans-serif;
	/* Tít bài (h1) và tít phụ (h2-h4) — mặc định (Style 1) dùng chung font heading như
	   cũ; Style 2 override 2 biến này riêng (xem inc/enqueue.php). */
	--ntv-font-title: var(--ntv-font-heading);
	--ntv-font-subheading: var(--ntv-font-heading);
	--ntv-font-menu: 'Titillium Web', sans-serif;
	--ntv-max-width: 1200px;
}

/* ---------- Reset cơ bản ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
	margin: 0;
	background: var(--ntv-color-bg-page);
	color: var(--ntv-color-text);
	font-family: var(--ntv-font-body);
	font-size: 16px;
	line-height: 1.5;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.ntv-skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 999;
	padding: 10px 16px;
	background: var(--ntv-color-primary);
	color: #FFFFFF;
	text-decoration: none;
}
.ntv-skip-link:focus {
	position: fixed;
	top: 0;
}

h1, h2, h3, h4 {
	color: var(--ntv-color-primary);
	font-weight: 700;
	margin: 0 0 12px;
}
h1 {
	font-family: var(--ntv-font-title);
}
h2, h3, h4 {
	font-family: var(--ntv-font-subheading);
}

/* ---------- Layout chung ---------- */
.ntv-nav__menu,
.ntv-site-content,
.ntv-layout {
	max-width: var(--ntv-max-width);
	margin-left: auto;
	margin-right: auto;
}

.ntv-site-content {
	background: var(--ntv-color-bg-content);
	padding: 20px 16px;
}

.ntv-layout {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

.ntv-layout--with-sidebar .ntv-main {
	flex: 1 1 auto;
	min-width: 0;
}

.ntv-sidebar {
	flex: 0 0 300px;
	width: 300px;
}

@media (max-width: 900px) {
	.ntv-layout { flex-direction: column; }
	.ntv-sidebar { width: 100%; flex-basis: auto; }
}

/* ---------- Top Bar (hàng mỏng trên cùng, trên cả logo) ---------- */
/* Cùng lý do với .ntv-header: giới hạn max-width ngay trên chính .ntv-topbar-row (không
   chỉ ở __inner) để nền của nó cũng khớp mép với header/content bên dưới thay vì tràn
   hết viewport. */
.ntv-topbar-row {
	max-width: var(--ntv-max-width);
	margin: 0 auto;
	background: var(--ntv-color-bg-menu);
	border-bottom: 1px solid #E0E0E0;
}
.ntv-topbar-row__inner {
	padding: 6px 16px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 16px;
}
.ntv-topbar-row__inner .ntv-widget {
	margin-bottom: 0;
}

/* ---------- Header ---------- */
/* max-width + margin:auto ngay trên .ntv-header (không chỉ ở các phần tử con) — để cả
   logo lẫn nav bên trong (.ntv-nav là con của .ntv-header) cùng bị giới hạn chiều rộng,
   khớp đúng lề với .ntv-site-content bên dưới. Nếu không, nền trắng của header sẽ tràn
   hết viewport trong khi khối content lại bị bo hẹp lại — gây lệch mép, không liền mạch. */
.ntv-header {
	max-width: var(--ntv-max-width);
	margin: 0 auto;
	background: var(--ntv-color-bg-content);
	border-bottom: 1px solid #E0E0E0;
}

.ntv-header__branding {
	text-align: center;
	padding: 20px 16px 12px;
}

.ntv-header__site-title {
	font-family: var(--ntv-font-heading);
	font-size: 24px;
	font-weight: 700;
	color: var(--ntv-color-primary);
	text-decoration: none;
}

.ntv-header__branding .custom-logo {
	max-width: 480px;
	width: 100%;
	height: auto;
}

/* Banner phụ dưới logo — canh giữa theo yêu cầu */
.ntv-header__widget {
	max-width: var(--ntv-max-width);
	margin: 0 auto;
	padding: 0 16px 16px;
	text-align: center;
}
.ntv-header__widget .ntv-widget {
	margin-bottom: 0;
	display: inline-block;
}

/* ---------- Nav menu ---------- */
.ntv-nav {
	background: var(--ntv-color-bg-menu);
	position: sticky;
	top: 0;
	z-index: 40;
}

.ntv-nav__menu-wrap {
	max-width: var(--ntv-max-width);
	margin: 0 auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px;
	padding: 0 16px;
}

/* Widget trong Top Bar nằm ngang, không có margin-bottom mặc định của widget */
.ntv-nav__menu-wrap .ntv-widget {
	margin-bottom: 0;
}

/* Widget "NTV: Menu điều hướng" chiếm phần còn lại, đẩy search/date sang phải */
.ntv-nav__menu-wrap [id^="ntv_nav_menu-"] {
	flex: 1 1 auto;
	min-width: 0;
}
.ntv-nav__menu-wrap [id^="ntv_search-"],
.ntv-nav__menu-wrap [id^="ntv_date-"] {
	flex: 0 0 auto;
}
.ntv-nav__menu-wrap [id^="ntv_date-"] {
	font-size: 13px;
	color: var(--ntv-color-text);
	padding: 0 8px;
}
.ntv-nav__menu-wrap [id^="ntv_search-"] .ntv-search {
	max-width: 240px;
}

.ntv-nav__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

.ntv-nav__menu li { position: relative; }

.ntv-nav__menu a {
	display: block;
	padding: 12px 16px;
	font-family: var(--ntv-font-menu);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--ntv-color-text-strong);
	text-decoration: none;
}

.ntv-nav__menu a:hover,
.ntv-nav__menu .current-menu-item > a {
	color: #FFFFFF;
	background: var(--ntv-color-primary);
}

.ntv-nav__menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: #FFFFFF;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	display: none;
	z-index: 41;
}

.ntv-nav__menu li:hover > ul { display: block; }

.ntv-nav__toggle {
	display: none;
	background: none;
	border: 0;
	padding: 12px 16px;
	cursor: pointer;
}
.ntv-nav__toggle-bar {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--ntv-color-text-strong);
	margin: 4px 0;
}

@media (max-width: 782px) {
	.ntv-nav__toggle { display: block; }
	.ntv-nav__menu-wrap { display: none; }
	.ntv-nav__menu-wrap.is-open { display: block; }
	.ntv-nav__menu { flex-direction: column; }
	.ntv-nav__menu ul { position: static; box-shadow: none; }
}

/* ---------- Breadcrumb ---------- */
.ntv-breadcrumb {
	font-size: 13px;
	color: var(--ntv-color-text);
	margin-bottom: 12px;
}
.ntv-breadcrumb a { color: var(--ntv-color-primary); text-decoration: none; }
.ntv-breadcrumb__sep { margin: 0 4px; }
.ntv-breadcrumb__current { color: var(--ntv-color-text); }

.ntv-article__date-top {
	font-size: 13px;
	color: var(--ntv-color-text);
	margin-bottom: 12px;
}

/* Breadcrumb nhỏ/mờ ở đầu bài single post — phục vụ SEO (khớp với BreadcrumbList
   schema, Google yêu cầu structured data phải khớp nội dung HIỂN THỊ trên trang),
   không làm rối giao diện vì đã có date-top + title ngay bên dưới. */
.ntv-article__breadcrumb {
	margin-bottom: 6px;
}
.ntv-article__breadcrumb .ntv-breadcrumb {
	font-size: 12px;
	opacity: 0.7;
	margin-bottom: 0;
}

/* ---------- Entry meta ---------- */
.ntv-entry-meta {
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 13px;
	color: var(--ntv-color-text);
	margin-bottom: 12px;
}
.ntv-entry-meta__category {
	color: #FFFFFF;
	background: var(--ntv-color-primary);
	padding: 2px 8px;
	border-radius: 3px;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 700;
}

/* ---------- Article (single/page) ---------- */
.ntv-article__title {
	font-size: 32px;
}
.ntv-article__thumbnail {
	margin-bottom: 16px;
	aspect-ratio: 800 / 450;
	background: #F0F0F0;
	overflow: hidden;
	border-radius: 4px;
}
.ntv-article__thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 800 / 450;
	object-fit: cover;
}
.ntv-article__content { color: #000000; }
.ntv-article__content p { margin: 0 0 16px; }

/* ---------- Article meta bar: ngày lớn + nút In + Share (sau ảnh đại diện) ---------- */
.ntv-article-meta-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	border-top: 1px solid #E0E0E0;
	border-bottom: 1px solid #E0E0E0;
	padding: 14px 0;
	margin-bottom: 20px;
}
.ntv-article-meta-bar__date {
	display: flex;
	align-items: center;
	gap: 10px;
}
.ntv-article-meta-bar__date-main {
	font-family: var(--ntv-font-subheading);
	font-size: 28px;
	font-weight: 800;
	line-height: 1;
	color: var(--ntv-color-text-strong);
}
.ntv-article-meta-bar__date-sub {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ntv-color-text);
}
.ntv-article-meta-bar__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}
.ntv-print-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	padding: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--ntv-color-text-strong);
	cursor: pointer;
}
.ntv-print-btn:hover { color: var(--ntv-color-primary); }
@media (max-width: 480px) {
	.ntv-article-meta-bar { justify-content: flex-start; }
}

/* Khi in trang: chỉ giữ lại tiêu đề + ảnh + nội dung bài viết, ẩn toàn bộ phần điều
   hướng/khung UI không cần thiết trên giấy in. */
@media print {
	.ntv-topbar-row,
	.ntv-header,
	.ntv-footer-banner,
	.ntv-footer-info,
	.ntv-back-to-top,
	.ntv-breadcrumb,
	.ntv-sidebar,
	.ntv-article-meta-bar,
	.ntv-share {
		display: none !important;
	}
	.ntv-layout { display: block; }
	.ntv-site-content { max-width: 100%; padding: 0; }
}

/* ---------- Card grid (archive/search) ---------- */
.ntv-archive-header__title { text-transform: uppercase; font-size: 30px; }

.ntv-card-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-bottom: 24px;
}
@media (max-width: 600px) {
	.ntv-card-grid { grid-template-columns: 1fr; }
}

/* min-width:0 là bắt buộc trên MỌI grid/flex item chứa thumbnail: mặc định trình duyệt
   tính min-width là "auto" (co theo nội dung), nên nếu 1 item có nội dung dài/không có
   khoảng trắng (title dài, excerpt dài...) nó có thể ép item khác trong cùng hàng lưới
   co lại bất thường — dù ảnh đã có overflow:hidden. Đây là nguyên nhân gốc thứ 2 (ngoài
   ảnh 404) có thể làm vỡ layout dạng lưới. */
.ntv-card { min-width: 0; }

/* Ép aspect-ratio + nền trung tính trên CHÍNH KHUNG BỌC (không chỉ trên img) — vì nếu
   file ảnh bị mất/404 (thường gặp khi migrate site mà không copy theo thư mục uploads),
   trình duyệt không có kích thước thật để tham chiếu, aspect-ratio đặt riêng trên <img>
   có thể không được tôn trọng. Đặt trên wrapper đảm bảo khung luôn đúng kích thước dù
   ảnh có tải được hay không. */
.ntv-card__thumb {
	display: block;
	margin-bottom: 10px;
	aspect-ratio: 330 / 200;
	background: #F0F0F0;
	overflow: hidden;
	border-radius: 4px;
}
.ntv-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 330 / 200;
	object-fit: cover;
}
.ntv-card__title { font-size: 20px; margin-bottom: 6px; }
.ntv-card__title a { text-decoration: none; color: var(--ntv-color-text-strong); }
.ntv-card__excerpt { font-size: 14px; color: var(--ntv-color-text); }

/* ---------- Pagination ---------- */
.ntv-pagination {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}
.ntv-pagination a,
.ntv-pagination span {
	display: inline-block;
	padding: 7px 11px;
	background: var(--ntv-color-bg-menu);
	color: #8F8E8E;
	text-decoration: none;
	font-size: 14px;
}
.ntv-pagination .current {
	background: var(--ntv-color-primary);
	color: #FFFFFF;
}

/* ---------- Widgets (chung) ---------- */
.ntv-widget { margin-bottom: 24px; }

/* Spacer widget — chiều cao inline theo px người dùng nhập, không phụ thuộc CSS. */
.ntv-spacer { display: block; width: 100%; }
@media (max-width: 900px) {
	.ntv-spacer--hide-mobile { display: none; }
}
.ntv-widget-title {
	background: var(--ntv-color-primary);
	color: #FFFFFF;
	padding: 10px 14px;
	font-size: 16px;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.ntv-panel-title-link { color: #FFFFFF; text-decoration: none; }
.ntv-panel-more {
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: underline;
	text-transform: none;
	font-weight: 400;
}

.ntv-widget--footer .ntv-widget-title--footer {
	background: none;
	color: #FFFFFF;
	padding: 0 0 10px;
	text-transform: none;
}

/* ---------- Homepage Panel widget ---------- */
.ntv-panel { background: #FFFFFF; padding: 14px; border: 1px solid #E0E0E0; border-top: 0; }
.ntv-panel__featured-thumb {
	display: block;
	margin-bottom: 10px;
	aspect-ratio: 800 / 450;
	background: #F0F0F0;
	overflow: hidden;
	border-radius: 4px;
}
.ntv-panel__featured-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 800 / 450;
	object-fit: cover;
}
.ntv-panel__featured-title { font-size: 22px; margin-bottom: 6px; }
.ntv-panel__featured-title a { text-decoration: none; color: var(--ntv-color-text-strong); }
.ntv-panel__featured-excerpt { font-size: 14px; color: var(--ntv-color-text); margin: 0 0 14px; }
.ntv-panel__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #F0F0F0; }
.ntv-panel__list-item { padding: 8px 0; border-bottom: 1px solid #F0F0F0; }
.ntv-panel__list-item a { text-decoration: none; font-size: 14px; color: var(--ntv-color-text-strong); }
.ntv-panel__list-item a:hover { color: var(--ntv-color-primary); }

/* Số cột > 1: lưới có thumbnail thay cho list text — cùng pattern với Universal widget */
.ntv-panel__grid {
	display: grid;
	gap: 14px;
	margin-top: 10px;
	padding-top: 14px;
	border-top: 1px solid #F0F0F0;
}
.ntv-panel__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.ntv-panel__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.ntv-panel__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 700px) {
	.ntv-panel__grid--cols-2,
	.ntv-panel__grid--cols-3,
	.ntv-panel__grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.ntv-panel__grid--cols-2,
	.ntv-panel__grid--cols-3,
	.ntv-panel__grid--cols-4 { grid-template-columns: 1fr; }
}
.ntv-panel__grid-item { min-width: 0; }
.ntv-panel__grid-thumb {
	display: block;
	aspect-ratio: 330 / 200;
	background: #F0F0F0;
	overflow: hidden;
	border-radius: 4px;
}
.ntv-panel__grid-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 330 / 200;
	object-fit: cover;
}
.ntv-panel__grid-title { font-size: 13px; margin: 6px 0 0; }
.ntv-panel__grid-title a { text-decoration: none; color: var(--ntv-color-text-strong); }
.ntv-panel__grid-title a:hover { color: var(--ntv-color-primary); }

/* ---------- Homepage widget area layout ----------
 * .ntv-homepage nằm bên trong .ntv-layout (flex, đã canh giữa + max-width sẵn) khi
 * front-page.php render — nên chỉ cần flex:1 1 auto cho chính nó, không tự set max-width.
 * Mỗi widget con mặc định full width (1 hàng); widget "Universal" có thể set 50%
 * (class .ntv-widget--half do NTV_Widget_Universal_Posts tự inject) để 2 widget nằm cạnh nhau.
 */
.ntv-homepage {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-content: flex-start;
}
.ntv-homepage > .ntv-widget {
	flex: 1 1 100%;
	margin-bottom: 0;
}
.ntv-homepage > .ntv-widget--half {
	flex: 1 1 calc(50% - 12px);
}
@media (max-width: 700px) {
	.ntv-homepage > .ntv-widget--half { flex: 1 1 100%; }
}
.ntv-homepage__empty-notice {
	flex: 1 1 100%;
	padding: 24px;
	background: #FFF8E1;
	border: 1px dashed #E0C067;
	border-radius: 4px;
}

/* ---------- Banner widget ---------- */
.ntv-banner { text-align: center; }
.ntv-banner__img { display: inline-block; border-radius: 4px; }
.ntv-banner__label {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	color: var(--ntv-color-text);
	text-transform: uppercase;
}

/* ---------- Dual Banner widget (2 ảnh cạnh nhau) ---------- */
.ntv-dual-banner {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
/* aspect-ratio + background + overflow:hidden trên KHUNG BỌC (không chỉ trên img) —
   cùng lý do đã áp dụng cho mọi thumbnail khác trong theme: giữ đúng kích thước kể cả
   khi ảnh sai tỉ lệ hoặc bị lỗi/404. min-width:0 để tránh 1 ảnh đẩy phình cột kia. */
.ntv-dual-banner__item {
	display: block;
	aspect-ratio: 1 / 1;
	background: #F0F0F0;
	overflow: hidden;
	border-radius: 4px;
	min-width: 0;
}
.ntv-dual-banner__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 480px) {
	.ntv-dual-banner { grid-template-columns: 1fr; }
}

/* ---------- Recent posts widget ---------- */
.ntv-recent-posts { list-style: none; margin: 0; padding: 14px; background: #FFFFFF; border: 1px solid #E0E0E0; }
.ntv-recent-posts__item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #F0F0F0; }
.ntv-recent-posts__item:last-child { border-bottom: 0; }
.ntv-recent-posts__thumb img { display: block; width: 60px; height: 60px; object-fit: cover; border-radius: 4px; }
.ntv-recent-posts__title { display: block; font-size: 14px; font-weight: 700; color: var(--ntv-color-text-strong); text-decoration: none; }
.ntv-recent-posts__date { font-size: 12px; color: var(--ntv-color-text); }

/* ---------- Universal Posts widget (repeater) ----------
 * Số cột do admin chọn tường minh (1–4), KHÔNG dùng auto-fill — tránh việc
 * widget full width tự động bị chia nhiều cột ngoài ý muốn.
 * cols-1 (mặc định): danh sách hàng ngang, ảnh trái/chữ phải — hợp full width.
 * cols-2..4: dạng lưới thẻ, ảnh trên/chữ dưới.
 */
.ntv-universal-posts {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.ntv-universal-posts__item {
	background: #FFFFFF;
	border: 1px solid #E0E0E0;
	border-radius: 4px;
	overflow: hidden;
	min-width: 0;
}

/* 1 cột: item dạng hàng ngang */
.ntv-universal-posts--cols-1 .ntv-universal-posts__item {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}
.ntv-universal-posts--cols-1 .ntv-universal-posts__thumb {
	flex: 0 0 280px;
	background: #F0F0F0;
	overflow: hidden;
}
.ntv-universal-posts--cols-1 .ntv-universal-posts__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 160px;
	object-fit: cover;
}
.ntv-universal-posts--cols-1 .ntv-universal-posts__body {
	flex: 1 1 auto;
	min-width: 0;
	padding: 16px;
}
.ntv-universal-posts--cols-1 .ntv-universal-posts__title { font-size: 20px; }
@media (max-width: 560px) {
	.ntv-universal-posts--cols-1 .ntv-universal-posts__item { flex-direction: column; }
	.ntv-universal-posts--cols-1 .ntv-universal-posts__thumb { flex-basis: auto; }
}

/* 1 cột + layout "stacked": ảnh trên full width, chữ dưới — dạng feature card */
.ntv-universal-posts--cols-1.ntv-universal-posts--layout-stacked .ntv-universal-posts__item {
	flex-direction: column;
}
.ntv-universal-posts--cols-1.ntv-universal-posts--layout-stacked .ntv-universal-posts__thumb {
	flex-basis: auto;
	display: block;
	aspect-ratio: 800 / 450;
	background: #F0F0F0;
	overflow: hidden;
}
.ntv-universal-posts--cols-1.ntv-universal-posts--layout-stacked .ntv-universal-posts__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	/* Khớp đúng tỉ lệ crop thật của size 'ntv-featured' (800x450) — lệch tỉ lệ ở đây sẽ
	   khiến object-fit crop lệch lần 2 trên ảnh vốn đã crop cứng ở server, gây vỡ ảnh.
	   aspect-ratio đặt cả trên wrapper lẫn img — phòng trường hợp ảnh 404 không có kích
	   thước thật để trình duyệt tham chiếu. */
	aspect-ratio: 800 / 450;
	object-fit: cover;
}
.ntv-universal-posts--cols-1.ntv-universal-posts--layout-stacked .ntv-universal-posts__title {
	font-size: 24px;
}

/* 2–4 cột: dạng lưới thẻ */
.ntv-universal-posts--cols-2,
.ntv-universal-posts--cols-3,
.ntv-universal-posts--cols-4 {
	display: grid;
	gap: 16px;
}
.ntv-universal-posts--cols-2 { grid-template-columns: repeat(2, 1fr); }
.ntv-universal-posts--cols-3 { grid-template-columns: repeat(3, 1fr); }
.ntv-universal-posts--cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 700px) {
	.ntv-universal-posts--cols-2,
	.ntv-universal-posts--cols-3,
	.ntv-universal-posts--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.ntv-universal-posts--cols-2,
	.ntv-universal-posts--cols-3,
	.ntv-universal-posts--cols-4 { grid-template-columns: 1fr; }
}
.ntv-universal-posts--cols-2 .ntv-universal-posts__thumb,
.ntv-universal-posts--cols-3 .ntv-universal-posts__thumb,
.ntv-universal-posts--cols-4 .ntv-universal-posts__thumb {
	display: block;
	aspect-ratio: 330 / 200;
	background: #F0F0F0;
	overflow: hidden;
}
.ntv-universal-posts--cols-2 .ntv-universal-posts__thumb img,
.ntv-universal-posts--cols-3 .ntv-universal-posts__thumb img,
.ntv-universal-posts--cols-4 .ntv-universal-posts__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 330 / 200;
	object-fit: cover;
}
.ntv-universal-posts--cols-2 .ntv-universal-posts__body,
.ntv-universal-posts--cols-3 .ntv-universal-posts__body,
.ntv-universal-posts--cols-4 .ntv-universal-posts__body {
	padding: 10px 12px;
}

.ntv-universal-posts__title { font-size: 16px; margin: 0 0 6px; }
.ntv-universal-posts__title a { text-decoration: none; color: var(--ntv-color-text-strong); }
.ntv-universal-posts__date { display: block; font-size: 12px; color: var(--ntv-color-text); margin-bottom: 6px; }
.ntv-universal-posts__excerpt { font-size: 13px; color: var(--ntv-color-text); margin: 0; }

/* ---------- Date widget ---------- */
.ntv-date-widget {
	font-family: var(--ntv-font-body);
	font-size: 13px;
	color: var(--ntv-color-text);
	white-space: nowrap;
}

/* ---------- Social links widget ---------- */
.ntv-social-links { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; }
.ntv-social-links__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ntv-color-primary);
	color: #FFFFFF;
	text-decoration: none;
}
.ntv-social-links__link:hover { background: var(--ntv-color-primary-dark); }

/* ---------- Footer đen 4 cột + menu footer đã bỏ theo yêu cầu — .ntv-footer-banner/
   .ntv-footer-info (khu "Thông tin site") bên dưới giờ là khối cuối cùng của trang. ---------- */

/* ---------- Nút "Lên đầu trang" nổi góc dưới phải — ẩn mặc định (attribute [hidden]),
   JS (back-to-top.js) gỡ [hidden] + thêm class .is-visible khi cuộn xuống quá 1 màn
   hình. z-index: 60 — nổi trên sticky nav (40/41) nhưng dưới lightbox gallery (100000)
   và skip-link accessibility (999) để không che khuất khi cả 2 cùng hiện. ---------- */
.ntv-back-to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 60;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ntv-color-primary);
	color: #FFFFFF;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
}
.ntv-back-to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.ntv-back-to-top:hover {
	background: var(--ntv-color-primary-dark, var(--ntv-color-primary));
}
@media (max-width: 600px) {
	.ntv-back-to-top {
		right: 12px;
		bottom: 12px;
		width: 40px;
		height: 40px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.ntv-back-to-top { transition: opacity 0.2s ease; }
}

/* ---------- Khu "Thông tin site": dải banner viền cam + khối giới thiệu nền xanh lá 2
   cột. Đặt BÊN TRONG .ntv-site-content (không phải .ntv-footer nền đen) để liền mạch nội
   dung. Màu sắc dùng CSS variable (--ntv-footer-*) có giá trị mặc định qua fallback —
   Customize > NTV: Footer Style sẽ override các biến này bằng inline <style> nếu người
   dùng đổi màu, không cần sửa code. ---------- */
.ntv-footer-banner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	background: #FFFFFF;
	border: 3px solid var(--ntv-footer-banner-border, #F7941D);
	border-radius: 4px 4px 0 0;
	padding: var(--ntv-footer-banner-padding-v, 4px) var(--ntv-footer-banner-padding-h, 20px);
	margin-top: 24px;
	color: #333333;
}
/* Widget ảnh (đặt đầu tiên trong sidebar "Dải banner giới thiệu") không được phép
   flex-grow — nếu không, khung bọc ảnh sẽ bị kéo giãn dù ảnh bên trong đã max-width,
   tạo khoảng trống lớn với đoạn text theo sau dù nhìn có vẻ "dính" nhau. Widget còn lại
   (text/tagline) mới là phần giãn lấp khoảng trống còn lại. */
.ntv-footer-banner .ntv-widget--footer-banner-item {
	margin-bottom: 0;
}
.ntv-footer-banner .ntv-widget--footer-banner-item:first-child {
	flex: 0 0 auto;
}
.ntv-footer-banner .ntv-widget--footer-banner-item:not(:first-child) {
	flex: 1 1 auto;
	min-width: 0;
}
.ntv-footer-banner img { max-width: 220px; height: auto; display: block; }
.ntv-footer-banner p { margin: 0; font-style: italic; font-size: 15px; color: #333333; }

.ntv-footer-info {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	background: var(--ntv-footer-info-bg, #2E8B3D);
	color: #FFFFFF;
	padding: 20px 24px;
	margin-top: 0;
	border-radius: 0 0 4px 4px;
}
.ntv-footer-info__left { flex: 1 1 auto; min-width: 0; }
.ntv-footer-info__right {
	flex: 0 0 220px;
	padding-left: 24px;
	border-left: 2px solid var(--ntv-footer-info-divider, #E74C3C);
}
@media (max-width: 700px) {
	.ntv-footer-info__right {
		flex-basis: 100%;
		border-left: none;
		border-top: 2px solid var(--ntv-footer-info-divider, #E74C3C);
		padding-left: 0;
		padding-top: 16px;
	}
}
.ntv-footer-info .ntv-widget { margin-bottom: 12px; }
.ntv-footer-info .ntv-widget:last-child { margin-bottom: 0; }
.ntv-footer-info p { margin: 0 0 8px; font-size: 14px; line-height: 1.6; }
.ntv-footer-info a { color: #FFFFFF; }
.ntv-footer-info img { max-width: 100%; height: auto; }

/* ---------- 404 ---------- */
.ntv-404 { text-align: center; padding: 60px 16px; }
.ntv-404__title { font-size: 36px; }
.ntv-404__search { display: flex; justify-content: center; margin-top: 20px; }