.linhvuc_banner{
	min-height:27vh !important;
}
.linhvuc_banner .custom-breadcrumb,
.linhvuc_banner .custom-breadcrumb a
{
	color: var(--color-white) !important;
}

.linhvuc_banner h3{
	font-size:32px !important;
	color: var(--color-white) !important;
	padding-top:15px;
}


/* 1. Ép lưới Flatsome thành CSS Grid 3 cột (Thay thế Masonry) */
/* Ép lưới Flatsome thành CSS Grid 3 cột */
.blog-archive #post-list .row-masonry {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 20px !important;
	height: auto !important; /* Xóa chiều cao ảo do JS tạo ra */
}

.blog-archive #post-list .col.post-item {
	position: relative !important;
	left: 0 !important; /* Xóa tọa độ JS */
	top: 0 !important; /* Xóa tọa độ JS */
	transform: none !important; /* QUAN TRỌNG NHẤT: Chặn hiệu ứng đẩy xa của JS */
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}
/* 2. Định dạng thẻ bài viết (Card) có viền xám nhạt */
.blog-archive .post-item .col-inner {
	background: #fff;
	border: 1px solid #eaeaea;
	border-radius: 2px;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
	overflow: hidden;
}
.blog-archive .post-item .col-inner:hover {
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	transform: translateY(-3px);
}

/* Xóa shadow mặc định của Flatsome */
.blog-archive .box-blog-post {
	box-shadow: none !important; 
	margin: 0 !important;
}

/* 3. Chỉnh phần nội dung chữ (Căn lề trái, Padding đều) */
.blog-archive .box-text {
	padding: 15px !important;
	text-align: left !important;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	background: transparent !important;
}

/* 4. Định dạng Tiêu đề */
.blog-archive .post-title {
	font-size: 16px !important;
	line-height: 1.4;
	margin-bottom: 5px !important;
}
.blog-archive .post-title a {
	color: #333;
	font-weight: 700;
}
.blog-archive .post-title a:hover {
	color: #D60C0C;
}

/* 5. Ẩn cục Date Badge lơ lửng trên ảnh & thanh gạch ngang mặc định */
.blog-archive .badge.post-date,
.blog-archive .is-divider {
	display: none !important;
}

/* 6. Định dạng Ngày Tháng (sinh ra từ PHP ở Bước 1) */
.blog-archive .custom-post-date {
	font-size: 13px;
	color: #777;
	margin-bottom: 10px;
}

/* 7. Đoạn trích ngắn (Giới hạn 3 dòng) */
.blog-archive .from_the_blog_excerpt {
	font-size: 14px !important;
	color: #555;
	margin-bottom: 0;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ========================================================
ĐỊNH DẠNG PHÂN TRANG (PAGINATION) GIỐNG HÌNH
=========================================================== */
.blog-archive .nav-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 20px;
	margin-bottom: 40px;
}
.blog-archive .nav-pagination li {
	margin: 0 !important;
}
.blog-archive .nav-pagination a.page-number,
.blog-archive .nav-pagination span.page-number {
	display: flex !important;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	font-size: 14px;
	color: #333;
	background: #fff;
	border: 1px solid #ddd !important;
	border-radius: 2px !important;
	text-decoration: none;
	transition: all 0.2s;
	opacity: 1 !important;
}
/* Trạng thái trang hiện tại (Màu đậm) */
.blog-archive .nav-pagination span.current {
	background: #555 !important;
	color: #fff !important;
	border-color: #555 !important;
	font-weight: 700;
}
/* Hiệu ứng trỏ chuột */
.blog-archive .nav-pagination a.page-number:hover {
	background: #f5f5f5;
	color: #D60C0C;
}
/* 1. ÉP BUỘC ẨN XÓA BỎ TIÊU ĐỀ MẶC ĐỊNH CỦA FLATSOME ("Lưu trữ danh mục: ...") */
.archive-page-header { display: none !important; }

/* 2. CSS CHO BANNER MỚI */
.custom-linhvuc-banner {
	position: relative;
	background-image: url('/wp-content/uploads/2026/10/bg_gt.png');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	padding: 65px 0 55px;
	width: 100%;
	min-height:30vh;
}
.custom-linhvuc-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.custom-linhvuc-banner-inner {
	position: relative;
	z-index: 2;
}

/* 3. BREADCRUMB */
.custom-linhvuc-breadcrumb, 
.custom-linhvuc-breadcrumb a, 
.custom-linhvuc-breadcrumb span {
	color: rgba(255, 255, 255, 0.85) !important;
	font-size: 14px;
	text-decoration: none;
}
.custom-linhvuc-breadcrumb a:hover {
	color: #ffffff !important;
	text-decoration: underline;
}

/* 4. TIÊU ĐỀ LỚN */
.custom-linhvuc-banner-title {
	color: #ffffff;
	font-size: 32px;
	font-weight: 700;
	text-transform: uppercase;
	margin-top: 15px;
	margin-bottom: 0;
	letter-spacing: 0.5px;
	line-height: 1.2;
}

/* 5. TIÊU ĐỀ MÀU ĐỎ KHOAN NHỒI BÊN DƯỚI */
.custom-linhvuc-red-title-wrap {
	text-align: center;
	padding-top: 40px;
	padding-bottom: 20px;
	background: #ffffff; /* Nền trắng nối liền với bài viết */
}
.custom-linhvuc-red-title {
	color: var(--color-main, #D60C0C); /* Lấy màu đỏ của bạn */
	font-size: 28px;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0;
}
/* ========================================================
CSS ĐỊNH DẠNG TRANG DỰ ÁN GIỐNG HÌNH
=========================================================== */

/* Ẩn tiêu đề lưu trữ mặc định của Flatsome ở trang Dự án */
body.is-du-an-page .archive-page-header {
	display: none !important;
}

/* Ép lưới Dự án thành Grid 3 cột chuẩn */
body.is-du-an-page #post-list .row-masonry,
.category-du-an #post-list .row-masonry {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 20px !important;
	height: auto !important;
}

body.is-du-an-page #post-list .col.post-item,
.category-du-an #post-list .col.post-item {
	position: relative !important;
	left: 0 !important;
	top: 0 !important;
	transform: none !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Đóng khung thẻ Card cho từng Dự án */
body.is-du-an-page .post-item .col-inner,
.category-du-an .post-item .col-inner {
	background: #fff;
	border: 1px solid #eaeaea;
	border-radius: 2px;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: all 0.3s ease;
}

body.is-du-an-page .post-item .col-inner:hover,
.category-du-an .post-item .col-inner:hover {
	box-shadow: 0 5px 15px rgba(0,0,0,0.08);
	transform: translateY(-2px);
}

/* Căn lề trái toàn bộ nội dung chữ */
body.is-du-an-page .box-text,
.category-du-an .box-text {
	padding: 15px !important;
	text-align: left !important;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

/* Tiêu đề Dự án (In hoa, đậm) */
body.is-du-an-page .post-title,
.category-du-an .post-title {
	font-size: 15px !important;
	line-height: 1.4 !important;
	margin-bottom: 5px !important;
	text-transform: uppercase !important;
}
body.is-du-an-page .post-title a,
.category-du-an .post-title a {
	color: #222 !important;
	font-weight: 700 !important;
}
body.is-du-an-page .post-title a:hover,
.category-du-an .post-title a:hover {
	color: #d60c0c !important;
}

/* Ngày tháng */
body.is-du-an-page .custom-injected-date,
.category-du-an .custom-injected-date {
	font-size: 12px !important;
	color: #888 !important;
	margin-bottom: 10px !important;
}

/* Mô tả ngắn (cắt gọn tối đa 3 dòng) */
body.is-du-an-page .from_the_blog_excerpt,
.category-du-an .from_the_blog_excerpt {
	font-size: 13px !important;
	color: #555 !important;
	line-height: 1.5 !important;
	margin-bottom: 0 !important;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.blog-archive .image-cover{
	padding-top: 68% !important;
}
/* Ẩn dấu gạch ngang mặc định */
body.is-du-an-page .is-divider,
.category-du-an .is-divider {
	display: none !important;
}
.custom-duan-breadcrumb{

	padding: 10px 20px;
}

.article-inner .entry-content,
.blog-single.page-wrapper{
	padding:5px 8px !important;	
}
.blog-single p{
	color: var(--color-black) !important
}
.blog-single h2 span,
.blog-single h2,
.blog-single h3span,
.blog-single h3
{
	color: var(--color-black) !important
}
/* Responsive cho Mobile & Tablet */
@media (max-width: 991px) {
	body.is-du-an-page #post-list .row-masonry,
	.category-du-an #post-list .row-masonry {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 600px) {
	body.is-du-an-page #post-list .row-masonry,
	.category-du-an #post-list .row-masonry {
		grid-template-columns: 1fr !important;
	}
}
/* Mobile */
@media (max-width: 768px) {
	.custom-linhvuc-banner { padding: 40px 0 35px; }
	.custom-linhvuc-banner-title { font-size: 22px; }
	.custom-linhvuc-red-title { font-size: 22px; }
}
/* ========================================================
RESPONSIVE (ĐIỆN THOẠI & TABLET)
=========================================================== */
@media (max-width: 991px) {
	.blog-archive #post-list .row-masonry {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 600px) {
	.blog-archive #post-list .row-masonry {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 768px) {
	.blog-archive #post-list .row-masonry {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
	}

	/* Reset vị trí do Masonry tạo */
	.blog-archive #post-list .row-masonry > .post-item {
		position: static !important;
		left: auto !important;
		top: auto !important;
		transform: none !important;
		transition: none !important;
		float: none !important;
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	/* Ảnh bài viết */
	.blog-archive .post-item .box-image {
		width: 100% !important;
	}

	/* Tiêu đề bài viết */
	.blog-archive .post-item .post-title {
		font-size: 12px !important;
		line-height: 1.4 !important;
	}

	/* Nội dung mô tả */
	.blog-archive .post-item .from_the_blog_excerpt {
		font-size: 11px !important;
		line-height: 1.5 !important;
	}

	/* Thu gọn nội dung */
	.blog-archive .post-item .box-text {
		padding: 10px 5px !important;
	}
	.blog-archive .custom-injected-date{
		display:none;
	}
	.blog-wrapper .large-10.col{
		padding-left:2px !important;
		padding-right:2px !important;
	}
	.blog-archive .post-title a{
		display: -webkit-box !important;
		-webkit-line-clamp: 2 !important;
		-webkit-box-orient: vertical !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		white-space: normal !important;
	}
	.blog-archive .image-cover{
		padding-top: 70% !important;
	}

}