/* ==========================================================================
   NLH News Block for Flatsome - styles
   Breakpoint tương thích Flatsome: small <549px, medium <850px, large >850px
   ========================================================================== */

.nlh-news-block {
	padding-top: 0px;
	padding-bottom: 5px;
/* 	border: 1px solid red; */
	margin-left: -10px !important;
	margin-right: -10px !important;
}
.row.nlh-news-block>.col{padding-top: 5px;padding-bottom: 10px;}
.row.nlh-card {margin-left: -10px !important; margin-right: -10px !important;}
.row.nlh-card .col {padding-left: 8px; padding-right: 8px; padding-bottom: 0px;}
.nlh-empty {
	text-align: center;
	color: #999;
}

/* ---- Ảnh ---- */
.nlh-card-image {
	position: relative;
	overflow: hidden;
	border-radius: var( --nlh-border-radius, 5px );
	/* margin-bottom: 15px; */
}

.nlh-card-image img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	transition: transform .35s ease;
}

.nlh-card-image:hover img {
	transform: scale( 1.05 );
}

/* ---- Ná»™i dung ---- */
.nlh-card-content {
	display: flex;
	flex-direction: column;
}

.nlh-title {
	margin: 0 0 8px;
	text-align: justify;
	margin-top: 5px;
}

.nlh-title a {
	color: #222;
	text-decoration: none;
	font-weight: 600;
	line-height: 1.2;
	font-size: 18px;
	display: inline-block;
}
.nlh-title-small a, .nlh-title-small {font-size: 16px; }
.nlh-title-medium a, .nlh-title-medium {font-size: 20px; }
.nlh-title-large a, .nlh-title-large {font-size: 22px; }
.nlh-title-tiny a, .nlh-title-tiny {font-size: 14px; }


.nlh-title a:hover {color: var( --primary-color, #044e40 ); }

.nlh-excerpt {
	color: #444;
	font-size: 15px;
	line-height: 1.3;
	margin-bottom: 10px;
	text-align: justify;
}

/* ---- Layout: bài nổi bật ----
   KHÔNG đặt margin-bottom riêng cho .nlh-featured-row - mọi row đã có
   padding-top/bottom 15px từ .nlh-news-block (dòng 6-9), cộng dồn 2 hàng
   liền kề = 30px là đủ giãn cách. Nếu thêm margin riêng ở đây sẽ bị NHÂN ĐÔI
   khoảng cách (30px padding + margin thừa) - đây chính là lỗi đã xảy ra
   trước bản sửa này (báo bởi người dùng: "khoảng cách quá rộng"). */


/* ---- Layout: grid 3 cá»™t ---- */
.nlh-grid-row {	display: flex;	flex-wrap: wrap;}

/* ---- Depth (đổ bóng) toàn plugin - xem Settings > "Kiểu ảnh & hiệu ứng
   chung". Mặc định --nlh-depth/--nlh-depth-hover là "none" nên không có gì
   thay đổi nếu người dùng không chỉnh setting này. Áp dụng lên các khối
   "card" phổ biến nhất trong plugin (không phải mọi div, chỉ khối bao ngoài
   mỗi bài viết/widget). */
.nlh-card,
.nlh-l6-featured,
.nlh-l26-main,
.nlh-view-box {
	box-shadow: var( --nlh-depth, none );
	transition: box-shadow .25s ease;
}

.nlh-card:hover,
.nlh-l6-featured:hover,
.nlh-l26-main:hover,
.nlh-view-box:hover {
	box-shadow: var( --nlh-depth-hover, var( --nlh-depth, none ) );
}
.nlh-card-text-only .nlh-card-content {
	height: 100%;
	justify-content: center;
}

/* ---- Canh giữa dùng chung (vd Layout 08: tiêu đề + mô tả bài nổi bật) ---- */
.nlh-text-center {
	text-align: center;
}

.nlh-featured-list {
	/* max-height: 100%; */
	max-height: 450px;
	overflow-y: auto;
}

.nlh-featured-list-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 2px;
	text-decoration: none;
	border-radius: 4px;
	margin-bottom: 10px;
	transition: background-color .2s ease;
}

.nlh-featured-list-item:hover {
	background-color: rgba( 67, 198, 172, .08 );
}

.nlh-featured-list-item-thumb {
	flex: 0 0 35%;
	width: 35%;
	border-radius: 4px;
	overflow: hidden;
}

.nlh-featured-list-item-thumb img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.nlh-featured-list-item-content {
	flex: 1 1 auto;
	min-width: 0;
}

.nlh-featured-list-item-content .nlh-title {
	margin: 0;
	color: #222;
	font-weight: 600;
	line-height: 1.4;
}

.nlh-featured-list-item:hover .nlh-featured-list-item-content .nlh-title {
	color: var( --primary-color, #43c6ac );
}


/* .nlh-news-block.nlh-layout-08>.col:first-child.small-col-first .nlh-title a {font-size: 20px;}
.nlh-news-block.nlh-layout-10 .col-center .nlh-title a {font-size: 22px;}
.nlh-news-block.nlh-layout-06 .nlh-l6-featured .nlh-title a{font-size: 20px;}
.nlh-news-block.nlh-layout-11 .col-center .nlh-title a{font-size: 20px;}
.nlh-news-block.nlh-layout-16 .layout16-col2 .nlh-title a{font-size: 20px;}
.nlh-news-block.nlh-layout-17 .layout17-col1 .nlh-title a{font-size: 20px;}
.nlh-news-block.nlh-layout-15 .nlh-title a{font-size: 17px;}
 */

/* ------------------- LAYOUT 01 -------------------- */



/* ------------------- LAYOUT 02 -------------------- */




/* ------------------- LAYOUT 03 -------------------- */




/* ------------------- LAYOUT 04 -------------------- */




/* ------------------- LAYOUT 05 -------------------- */




/* ------------------- LAYOUT 06 -------------------- */




/* ------------------- LAYOUT 07 -------------------- */




/* ------------------- LAYOUT 08 -------------------- */
/* ------------------- LAYOUT 09 -------------------- */
/* ------------------- LAYOUT 10 -------------------- */

/* Cột phải: post 2, 3 xếp dọc, có khoảng cách giữa 2 card. */
.nlh-l10-right-item {margin-bottom: 15px;}
.nlh-l10-right-item:last-child {margin-bottom: 0;}

/* Cột trái: danh sách ngang ảnh nhỏ + tiêu đề, post 4-8. */
.nlh-l10-side-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 10px;
}

.nlh-l10-side-item:last-child {margin-bottom: 0;}

.nlh-l10-side-item .nlh-card-image {
	flex: 0 0 90px;
	width: 90px;
	margin-bottom: 0;
}

.nlh-l10-side-item .nlh-card-content {
	flex: 1 1 auto;
	min-width: 0;
}
.nlh-news-block.nlh-layout-10 .col-right {margin: 0px 0px; padding: 5px 0px 0px 0px !important;}
.nlh-news-block.nlh-layout-10 .col-right>.row{margin: 0px 0px; padding: 0px 0px;}
.nlh-news-block.nlh-layout-10 .col-right>.row>.col {padding: 0 10px 10px;}

/* ------------------- LAYOUT 11 -------------------- */
/* ------------------- LAYOUT 12 -------------------- */

.nlh-l12-middle-item {
	margin-bottom: 20px;
}

.nlh-l12-middle-item:last-child {
	margin-bottom: 0;
}

.nlh-l12-side-item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

.nlh-l12-side-item:last-child {
	margin-bottom: 0;
}

.nlh-l12-side-item .nlh-card-image {
	flex: 0 0 90px;
	width: 90px;
	margin-bottom: 0;
}

.nlh-l12-side-item .nlh-card-content {
	flex: 1 1 auto;
	min-width: 0;
}
/* ------------------- LAYOUT 13 -------------------- */
.nlh-l13-right-item:last-child {
	margin-bottom: 0;
}

.nlh-l13-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0px;
	text-decoration: none;
	border-radius: 4px;
	transition: background-color .2s ease;
}

.nlh-l13-item:hover {
	background-color: rgba( 67, 198, 172, .08 );
}

.nlh-l13-item-thumb {
	flex: 0 0 30%;
	width: 30%;
	border-radius: 4px;
	overflow: hidden;
}

.nlh-l13-item-thumb img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.nlh-l13-item-content {
	flex: 1 1 auto;
	min-width: 0;
}


.nlh-l13-item:hover .nlh-l13-item-content .nlh-title {
	color: var( --primary-color, #43c6ac );
}

/* ------------------- LAYOUT 14 -------------------- */
.nlh-l14-side-item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.nlh-l14-side-item:last-child {
	margin-bottom: 0;
}

.nlh-l14-side-item .nlh-card-content {
	flex: 1 1 auto;
	min-width: 0;
}

.nlh-l14-side-item .nlh-card-image {
	flex: 0 0 30%;
	width: 30%;
	margin-bottom: 0;
}

/* ------------------- LAYOUT 15 -------------------- */

.nlh-l15-item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.nlh-l15-item-thumb {
	flex: 0 0 35%;
	width: 35%;
	border-radius: 4px;
	overflow: hidden;
}

.nlh-l15-item-thumb img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.nlh-l15-item-content {
	flex: 1 1 auto;
	min-width: 0;
}

.nlh-l15-item-content .nlh-title {
	margin: 0;
}
/* ------------------- LAYOUT 16 -------------------- */

/* ------------------- LAYOUT 17 -------------------- */
.nlh-l17-second {
	margin-bottom: 10px;
}

.nlh-l17-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px;
	text-decoration: none;
	border-radius: 4px;
	margin-bottom: 8px;
	transition: background-color .2s ease;
}

.nlh-l17-item:last-child {
	margin-bottom: 0;
}

.nlh-l17-item:hover {
	background-color: rgba( 67, 198, 172, .08 );
}

.nlh-l17-item-thumb {
	flex: 0 0 35%;
	width: 35%;
	border-radius: 4px;
	overflow: hidden;
}

.nlh-l17-item-thumb img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.nlh-l17-item-content {
	flex: 1 1 auto;
	min-width: 0;
}

.nlh-l17-item-content .nlh-title {
	margin: 0;
	color: #222;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.4;
}

.nlh-l17-item:hover .nlh-l17-item-content .nlh-title {
	color: var( --primary-color, #43c6ac );
}
/* ------------------- LAYOUT 18 -------------------- */

/* ------------------- LAYOUT 19 -------------------- */
.row.nlh-news-block.nlh-layout-19 .col:nth-child(2),
.row.nlh-news-block.nlh-layout-20 .col:nth-child(2){padding-right: 0px; }

/* ------------------- LAYOUT 20 -------------------- */

/* ------------------- LAYOUT 21 -------------------- */
.nlh-l21-image-wrap {
	position: relative;
}

.nlh-l21-overlay-title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 24px 20px 18px;
	background: linear-gradient( to top, rgba( 0, 0, 0, .8 ), rgba( 0, 0, 0, 0 ) );
}

.nlh-l21-overlay-title .nlh-title {
	margin: 0;
}

.nlh-l21-overlay-title .nlh-title a {
	color: #fff;
}

.nlh-l21-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 0px;
	text-decoration: none;
	border-radius: 4px;
	margin-bottom: 10px;
	transition: background-color .2s ease;
}

.nlh-l21-item:last-child {
	margin-bottom: 0;
}

.nlh-l21-item:hover {
	background-color: rgba( 67, 198, 172, .08 );
}

.nlh-l21-item-thumb {
	flex: 0 0 35%;
	width: 35%;
	border-radius: 4px;
	overflow: hidden;
}
@media ( max-width: 549px ) {
.nlh-l21-item-thumb {
	flex: 0 0 190px;
	width: 190px;
}
}
.nlh-l21-item-thumb img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.nlh-l21-item-content {
	flex: 1 1 auto;
	min-width: 0;
}

.nlh-l21-item-content .nlh-title {
	margin: 0;
	color: #222;
	font-weight: 700;
	line-height: 1.4;
}

.nlh-l21-item:hover .nlh-l21-item-content .nlh-title {
	color: var( --primary-color, #43c6ac );
}

/* ------------------- LAYOUT 22 -------------------- */
.row.nlh-news-block.nlh-layout-22>.col:nth-child(2) {padding-right: 0px;}

.nlh-l22-list {
	max-height: 450px;
	overflow-y: auto;
}
@media ( max-width: 849px ) {
	.nlh-l22-list {
		max-height: 350px;
	}
}
@media ( max-width: 549px ) {
	.nlh-l22-list {
		max-height: 250px !important;
	}
	.nlh-l22-item .nlh-card-image {
		flex: 0 0 150px !important;;
		width: 150px;
	}
	
	.row.nlh-news-block.nlh-layout-22>.col:nth-child(2) {padding-right: 8px;}
}

.nlh-l22-item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 15px;
}

.nlh-l22-item:last-child {
	margin-bottom: 0;
}

.nlh-l22-item .nlh-card-content {
	flex: 1 1 auto;
	min-width: 0;
}

.nlh-l22-item .nlh-card-image {
	flex: 0 0 90px;
	width: 90px;
	margin-bottom: 0;
}
.nlh-l22-item .nlh-title-small a {
	font-size: 14px;
	display: inline-block;
	line-height: 1.2;
}
/* ------------------- LAYOUT 23 -------------------- */
.row.nlh-news-block.nlh-layout-23 .col:nth-child(2) .row{margin-left: -10px; margin-right: -10px;}
.row.nlh-news-block.nlh-layout-23 .col:nth-child(2) .row .col{padding-left: 8px; padding-right: 8px; padding-bottom: 5px;}

/* ------------------- LAYOUT 24 -------------------- */

.nlh-l24-masonry {
	column-count: 4;
	column-gap: 10px;
	padding: 5px;
}

.nlh-l24-item {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin-bottom: 15px;
	display: inline-block;
	width: 100%;
	vertical-align: top;
	padding: 5px;
	transition: transform .3s ease;
}
.nlh-l24-item:hover { border-radius: 4px; background: #4fba6930}

/* Tablet: 3 cột. Mobile: 2 cột (xem thêm 2 media query chính bên dưới). */
@media ( max-width: 849px ) {
	.nlh-l24-masonry {
		column-count: 3;
	}
}

@media ( max-width: 549px ) {
	.nlh-l24-masonry {
		column-count: 2;
	}
}
/* ------------------- LAYOUT 25 -------------------- */
/* ------------------- LAYOUT 26 -------------------- */
.nlh-l26-main {	margin-bottom: 10px;}

/* ------------------- LAYOUT 27 -------------------- */
/* ------------------- LAYOUT 28 -------------------- */
/* ------------------- LAYOUT 29 -------------------- */
.nlh-l29-item .nlh-card-image {
	flex: 0 0 180px;
	width: 180px;
	margin-bottom: 0;
}
.nlh-l29-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid #eee;
}

.nlh-l29-item:first-child {
	padding-top: 0;
}

.nlh-l29-item:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.row.nlh-news-block.nlh-layout-29 .nlh-l29-item .nlh-card-image{
	flex: 0 0 35%;
	width: 35%;
}
.nlh-l29-item .nlh-card-content {
	flex: 1 1 auto;
	min-width: 0;
}
/* ------------------- LAYOUT 30 -------------------- */
.row.nlh-news-block.nlh-layout-30 .nlh-l29-item .nlh-card-image{
	flex: 0 0 40%;
	width: 40%;
}

/* ------------------- LAYOUT 31 -------------------- */

.nlh-l31-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 10px 0;
	border-bottom: 1px solid #eee;
}

.nlh-l31-item:first-child {
	/* padding-top: 0; */
}

.nlh-l31-item:last-child {
	/* padding-bottom: 0; */
	border-bottom: none;
}

.nlh-l31-bullet {
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
	margin-top: 8px;
	border-radius: 50%;
	background: #ef8632;
}

.nlh-l31-title {
	font-weight: 700;
	line-height: 1.3;
}

.nlh-l31-title a:hover {
	color: var( --primary-color, #43c6ac );
}
/* ------------------- LAYOUT 32 -------------------- */

.nlh-l32-main {
	margin-bottom: 0px;
	border-bottom: 1px solid #eee;
}

.nlh-l32-item {
	padding: 10px 0;
	border-bottom: 1px solid #eee;
}

.nlh-l32-item:last-child {
	/* padding-bottom: 0; */
	border-bottom: none;
}

.nlh-l32-item .nlh-title {
	margin: 0;
}

/* ------------------- LAYOUT 33 -------------------- */

.nlh-l33-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 14px;
}

.nlh-l33-item:last-child {
	margin-bottom: 0;
}

.nlh-l33-bullet {
	flex: 0 0 6px;
	width: 6px;
	height: 6px;
	margin-top: 9px;
	border-radius: 50%;
	background: #999;
}

.nlh-l33-item .nlh-title {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
}

/* ------------------- LAYOUT 34 -------------------- */

/* ---- Layout 34: khung media player + danh sách bài có video ---- */

.nlh-l34-player-wrap {
	background: #17181a;
	border-radius: 5px;
	overflow: hidden;
}

.nlh-l34-player-header {
	display: flex;
	align-items: center;
	padding: 10px 14px;
	background: #17181a;
}

.nlh-l34-player-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
}

.nlh-l34-player-badge::before {
	content: '';
	width: 3px;
	height: 14px;
	background: #e02020;
	display: inline-block;
}

.nlh-l34-player {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}

.nlh-l34-player iframe,
.nlh-l34-player video {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}

/* Danh sách bên phải - mặc định hiện ~5 bài, dư thì tự cuộn. */
.nlh-l34-list {
	max-height: 500px;
	overflow-y: auto;
}

.nlh-l34-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 5px;
	text-decoration: none;
	border-radius: 4px;
	margin-bottom: 5px;;
	transition: background-color .2s ease;
}

.nlh-l34-item:hover,
.nlh-l34-item-active {
	background-color: rgba( 67, 198, 172, .08 );
}

.nlh-l34-item-thumb {
	flex: 0 0 90px;
	width: 90px;
	border-radius: 4px;
	overflow: hidden;
}

.nlh-l34-item-thumb img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.nlh-l34-item-content {
	flex: 1 1 auto;
	min-width: 0;
}

.nlh-l34-item-content .nlh-title {
	margin: 0;
	color: #222;
	font-weight: 700;
	font-size: 13px;
	line-height: 1.4;
}

.nlh-l34-item:hover .nlh-l34-item-content .nlh-title,
.nlh-l34-item-active .nlh-l34-item-content .nlh-title {
	color: var( --primary-color, #43c6ac );
}


/* ------------------- ĐỌC NHIỀU -------------------- */

/* ==========================================================================
   NHÓM "ĐỌC NHIỀU" - Đọc Nhiều 01-05 (widget bài xem nhiều nhất, khác nhóm
   "NLH Custom Posts" ở trên). Khung có nền trắng + viền, đúng kiểu widget
   sidebar thay vì khối bài viết full-width.
   ========================================================================== */

.nlh-view-box {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 5px;
	padding: 10px;
	/* margin-top: 15px; */
	margin-bottom: 10px;
}

.nlh-view-heading {
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: #222;
	margin: 0 0 14px;
	background: #00b87033;
	padding: 5px 10px;
	border-bottom: 2px solid var( --primary-color, #43c6ac );
}

.nlh-view-heading--underline {
	padding-bottom: 10px;
	border-bottom: 2px solid var( --primary-color, #43c6ac );
}

/* Đọc Nhiều 04 dùng tiêu đề kiểu thường (không viết hoa), khác biệt trực
   quan với 03 (dùng .nlh-view-heading mặc định, viết hoa). */
.nlh-view-heading--plain {
	text-transform: none;
	font-size: 14px;
	color: #555;
}

/* ------------------- ĐỌC NHIỀU 01 -------------------- */

/* ---- Đọc Nhiều 01: chấm thoi ---- */
.nlh-view01-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px solid #f0f0f0;
}

.nlh-view01-item:first-child {
	padding-top: 0;
}

.nlh-view01-item:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.nlh-view01-bullet {
	flex: 0 0 auto;
	color: var( --primary-color, #43c6ac );
	font-size: 12px;
	line-height: 1.6;
}
.nlh-view01-item a:hover {
	color: var( --primary-color, #43c6ac );
}
/* ------------------- ĐỌC NHIỀU 02 -------------------- */

/* ---- Đọc Nhiều 02: đánh số ---- */
.nlh-view02-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px solid #f0f0f0;
}

.nlh-view02-item:first-child {
	padding-top: 0;
}

.nlh-view02-item:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.nlh-view02-number {
	flex: 0 0 auto;
	min-width: 20px;
	font-size: 25px;
	font-weight: 700;
	color: #ccc;
	line-height: 1.3;
}
.nlh-view02-item a:hover {
	color: var( --primary-color, #43c6ac );
}

/* ------------------- ĐỌC NHIỀU 03 -------------------- */

/* ---- Đọc Nhiều 03 & 04: có ảnh nhỏ (dùng chung, 04 thêm modifier gạch đứt) ---- */
.nlh-view-thumb-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 0;
	border-bottom: 1px solid #9a9a9a;
}

.nlh-view-thumb-list.nlh-view-divider-dashed .nlh-view-thumb-item {
	border-bottom-style: dashed;
}

.nlh-view-thumb-item:first-child {
	padding-top: 0;
}

.nlh-view-thumb-item:last-child {
	padding-bottom: 0;
	border-bottom: 0px;
}

.nlh-view-thumb-item .nlh-card-image {
	flex: 0 0 60px;
	width: 60px;
	margin-bottom: 0;
	border-radius: 3px;
}

.nlh-view-thumb-item-title {
	flex: 1 1 auto;
	min-width: 0;
}

.nlh-view-thumb-item-title a {font-weight: 600;}

.nlh-view-thumb-item-title a:hover {
	color: var( --primary-color, #43c6ac );
}

/* ------------------- ĐỌC NHIỀU 04 -------------------- */
/* ------------------- ĐỌC NHIỀU 05 -------------------- */

/* ---- Đọc Nhiều 05: grid 2 cột ---- */
.row.nlh-news-block.nlh-layout-view-05>.col>.row {margin-left: -10px; margin-right: -10px;}
.row.nlh-news-block.nlh-layout-view-05>.col>.row>.col {padding: 0 8px 10px;}

.nlh-view05-item {
	padding: 3px 0;
	border-bottom: 1px solid #f0f0f0;
}
.row.nlh-view05-grid>.col{padding-bottom: 0px;}

.nlh-view05-item a:hover {
	color: var( --primary-color, #43c6ac );
}

/* ------------------- ĐỌC NHIỀU 06 -------------------- */
/* ---- Đọc Nhiều 06: carousel đánh số ---- */
.nlh-view06-heading {
	color: var( --primary-color, #43c6ac );
}

.nlh-view06-carousel-wrap {
	position: relative;
}

.nlh-view06-viewport {
	overflow: hidden;
}

.nlh-view06-track {
	display: flex;
	transition: transform .4s ease;
	/* JS gán flex-basis từng item theo breakpoint (5/3/2 bài hiển thị cùng lúc). */
}

.nlh-view06-item {
	box-sizing: border-box;
	padding: 0 8px;
}

.nlh-view06-image-wrap {
	position: relative;
}

.nlh-view06-image-wrap .nlh-card-image {
	margin-bottom: 10px;
}

.nlh-view06-number {
	position: absolute;
	top: 0;
	left: 0;
	min-width: 30px;
	padding: 4px 8px;
	background: var( --primary-color, #43c6ac );
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	line-height: 1.3;
}

.nlh-view06-category {
	color: var( --primary-color, #43c6ac );
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 4px;
}
/* Nút tiến/lùi - hình tròn nổi 2 bên viewport. */
.nlh-view06-nav {
	position: absolute;
	top: 0%;
	width: 40px;
	height: 100%;
	background: var( --primary-color, #43c6ac );
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	padding: 0;
	opacity: 0.4;
	border-radius: 4px;
}

.nlh-view06-nav:hover {
	opacity: 0.8;
}

.nlh-view06-prev {
	/* left: -17px; */
}

.nlh-view06-next {
	right: -20px;
}

/* ==========================================================================
   Animate (hiệu ứng xuất hiện khi cuộn tới) - toàn plugin, xem
   Settings > "Kiểu ảnh & hiệu ứng chung". Áp dụng ở cấp KHỐI (.nlh-news-block
   - class có mặt trên mọi hàng của mọi layout) chứ không phải từng thẻ con,
   để không phải sửa 40 hàm render. Mặc định animate = "none" nên JS
   (assets/js/animate.js) không làm gì nếu người dùng không bật setting này.
   ========================================================================== */

.nlh-animate-init {
	opacity: 0;
}

.nlh-animate-init.nlh-anim-fade {
	transition: opacity .6s ease;
}

.nlh-animate-init.nlh-anim-fade-up {
	transform: translateY( 24px );
	transition: opacity .6s ease, transform .6s ease;
}

.nlh-animate-init.nlh-anim-zoom-in {
	transform: scale( .94 );
	transition: opacity .6s ease, transform .6s ease;
}

.nlh-animate-in {
	opacity: 1 !important;
	transform: none !important;
}

/* ==========================================================================
   Responsive - mobile (<549px) và tablet (549-849px)

   Nguyên tắc: mọi hàng nhiều cột do plugin tạo ra đều mang class chung
   "nlh-news-block" (khai báo trong $row_classes ở shortcode.php), cộng thêm
   1 class hậu tố riêng cho từng loại hàng (nlh-featured-row, nlh-top-row,
   nlh-l10-row...). Khi các cột xếp chồng dọc (do không đặt medium-X, hoặc do
   dưới breakpoint small), Flatsome không tự thêm khoảng cách dọc giữa chúng -
   nên phải tự bổ sung margin-bottom, nếu không các khối sẽ dính sát nhau.

   2 nhóm hàng, chia theo việc CÓ hay KHÔNG đặt breakpoint "medium-X":
   - CÓ medium (chỉ thật sự xếp chồng dưới 549px): nlh-featured-row (Layout
     01, 04, 08, 10 - và nested .nlh-l6-featured-body vì là descendant),
     nlh-top-row (Layout 04).
   - KHÔNG có medium (xếp chồng cả tablet 549-849px lẫn mobile): nlh-l10-row
     (03), nlh-l16-row (05), nlh-l8-top-row (06), nlh-l34-row (07), nlh-l11-row
     (09), nlh-l14-top-row (11), nlh-l12-row (12), nlh-l19-row (13),
     nlh-l21-row (14), nlh-l17-row (15), nlh-l23-row (16), nlh-l13-row (17),
     nlh-l20-row (18), nlh-l22-row (22), nlh-l18-row (25) - các hàng có tỉ lệ
     cột lệch hoặc thiếu breakpoint medium (vd 3/6/3, 5/3/4, 8/4, 6/6) nên
     chủ động để xếp chồng luôn ở tablet thay vì ép nhiều cột hẹp chật chội.
   ========================================================================== */
.only-mobile{display: none;}
@media ( max-width: 549px ) {
	.only-mobile{display:block;}
	.nlh-featured-row .col,
	.nlh-top-row .col {
		margin-bottom: 10px;
		padding-bottom: 10px;
	}

	.nlh-featured-content-wrap .nlh-title a {
		font-size: 18px;
	}

	.nlh-layout-14 .nlh-card > .nlh-card-content > h3.nlh-title a {
		font-size: 20px;
	}

	/* Danh sách bên phải Layout 34 không cần cao tối đa như desktop trên
	   màn hình nhỏ - vẫn tự cuộn bên trong, chỉ giảm chiều cao hiển thị. */
	.nlh-l34-list {
		max-height: 420px;
	}

	.nlh-featured-list {
		max-height: 300px;
	}
	.nlh-featured-list-item-thumb {
	flex: 0 0 180px;
	width: 180px;
}


	.nlh-l22-list {
		max-height: 420px;
	}

	.nlh-l21-overlay-title .nlh-title a {
		font-size: 20px;
	}

	.nlh-l21-overlay-title {
		padding: 16px 14px 12px;
	}

	/* An toàn cho mọi hàng grid (post 2, 3, 4...) khi dồn về 1 cột trên
	   mobile thật - không phụ thuộc hoàn toàn vào gutter mặc định của theme. */
	.nlh-grid-row .col {
		margin-bottom: 8px;
	}

	/* Layout 25: dồn về 1 cột thì bỏ gạch dọc phân cách (không còn ý nghĩa
	   khi chỉ có 1 cột) và thêm khoảng cách dọc giữa các tiêu đề. */
	.nlh-l25-grid .col {
		margin-bottom: 10px;
	}

	.nlh-l25-grid > .col:nth-child( even ) .nlh-l25-title-only {
		/* border-left: none; */
	}

	/* Layout 29: ảnh cố định 180px quá rộng cho mobile - xếp ảnh trên,
	   nội dung dưới thay vì nằm ngang. */
	.nlh-l29-item {
		/* flex-direction: column; */
		/* gap: 12px; */
	}

	.nlh-l29-item .nlh-card-image {
		/* width: 100%; */
	}
}

@media ( max-width: 849px ) {
	.nlh-l10-row .col,
	.nlh-l16-row .col,
	.nlh-l8-top-row .col,
	.nlh-l34-row .col,
	.nlh-l11-row .col,
	.nlh-l14-top-row .col,
	.nlh-l12-row .col,
	.nlh-l19-row .col,
	.nlh-l21-row .col,
	.nlh-l17-row .col,
	.nlh-l23-row .col,
	.nlh-l13-row .col,
	.nlh-l20-row .col,
	.nlh-l22-row .col,
	.nlh-l18-row .col {
		margin-bottom: 10px;
		padding-bottom: 10px;
	}
}