/*
 * Task GD-16: trang "Tin tức" (category tin-tuc) dạng thẻ 2 cột/hàng + nút
 * "Xem tiếp", và khối "Bài viết mới" ở sidebar (bài viết & mọi trang category).
 * Màu theo bộ nhận diện đã dùng cho thẻ sản phẩm/nút CTA: xanh #233179, đỏ #d91d1b.
 */
.thp-blog-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-bottom: 24px;
}
.thp-blog-card {
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.thp-blog-card__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.thp-blog-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.thp-blog-card__body {
	padding: 16px 18px 20px;
}
.thp-blog-card__date {
	display: block;
	color: #888;
	font-size: 13px;
	margin: 0 0 8px;
}
.thp-blog-card__title {
	margin: 0 0 10px;
	font-size: 17px;
	line-height: 1.35;
}
.thp-blog-card__title a {
	color: #233179;
	font-weight: 700;
	text-decoration: none;
}
.thp-blog-card__title a:hover {
	text-decoration: underline;
}
.thp-blog-card__excerpt {
	color: #555;
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 16px;
}
.thp-blog-card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	border: 1px solid #f36f21;
	color: #f36f21;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 20px;
	transition: background .15s, color .15s;
}
.thp-blog-card__more:hover {
	background: #f36f21;
	color: #fff;
}
@media (max-width: 600px) {
	.thp-blog-grid {
		grid-template-columns: 1fr;
	}
}

/* Sidebar "Bài viết mới": cùng khung .side-nav-categories/.block-title với khối "Danh mục". */
#secondary .thp-sb-recent {
	margin-top: 20px;
}
.thp-sb-recent .box-content {
	padding: 12px 15px;
	background: #fff;
}
.thp-recent-posts {
	list-style: none;
	margin: 0;
	padding: 0;
}
.thp-recent-posts__item {
	padding: 10px 0;
	border-bottom: 1px dashed #e3e3e3;
}
.thp-recent-posts__item:first-child {
	padding-top: 0;
}
.thp-recent-posts__item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.thp-recent-posts__item a {
	display: block;
	color: #233179;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none;
	margin-bottom: 4px;
}
.thp-recent-posts__item a:hover {
	color: #d91d1b;
}
.thp-recent-posts__date {
	display: block;
	color: #999;
	font-size: 12px;
}

/* Bài viết liên quan dưới nội dung bài viết, trên footer (feedback lần 2): 3 thẻ/hàng, dùng lại thẻ .thp-blog-card. */
.thp-related-posts {
	clear: both;
	padding: 8px 0 30px;
}
.thp-related-posts__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
@media (max-width: 991px) {
	.thp-related-posts__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 575px) {
	.thp-related-posts__grid {
		grid-template-columns: 1fr;
	}
}

/* =====================================================================
 * Phản hồi lần 4 (05/10/2026, ô K27 — mẫu hungphatsteel.com/blog/thi-cong-ep-cu-larsen):
 * khối nội dung bài viết: tiêu đề H1 đậm trên cùng, dòng meta, ảnh đại diện, nội dung 16px/1.6;
 * bảng gọn (chữ 14px, ô đệm 6–10px, viền mảnh) — trước đây ô cao ~58px, khoảng trắng dư lớn.
 * "Bài viết mới": 5 bài + ảnh thumb nhỏ bên trái.
 * ===================================================================== */
.thp-article { background: #fff; }
.thp-article__head { margin: 0 0 14px; }
.thp-article__title {
	margin: 0 0 12px !important; padding: 0 !important;
	font-size: 30px !important; line-height: 1.3 !important; font-weight: 700 !important;
	color: #222 !important; text-transform: none !important; text-align: left !important;
}
.thp-article__meta { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; color: #555; }
.thp-article__meta .fa { margin-right: 4px; color: #777; }
.thp-article__meta a, .thp-article__meta time { color: #233179; }
.thp-article__thumb { margin: 0 0 20px; border: 1px solid #e6e9f2; border-radius: 6px; overflow: hidden; }
.thp-article__thumb img { display: block; width: 100%; height: auto; }
.thp-article .rte { font-size: 16px; line-height: 1.6; color: #333; }
.thp-article .rte h2 { font-size: 24px; line-height: 1.35; font-weight: 700; margin: 28px 0 12px; }
.thp-article .rte h3 { font-size: 20px; line-height: 1.35; font-weight: 700; margin: 22px 0 10px; }
.thp-article .rte p { margin: 0 0 14px; }
/* Bảng trong nội dung */
.thp-article .rte table { width: 100% !important; border-collapse: collapse; margin: 0 0 18px; font-size: 14px; line-height: 1.45; border: 1px solid #dfe3ec; }
.thp-article .rte table td,
.thp-article .rte table th { padding: 7px 10px !important; border: 1px solid #e6e9f2 !important; vertical-align: middle; height: auto !important; }
.thp-article .rte table tr { height: auto !important; }
.thp-article .rte table th,
.thp-article .rte table tr:first-child td { background: #f5f6fa; font-weight: 700; color: #233179; }
.thp-article .rte table p { margin: 0 !important; }

/* Bài viết mới — 5 bài, thumb 72px + tên */
.thp-recent-posts__item { display: flex !important; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #eef0f5; list-style: none; }
.thp-recent-posts__item:last-child { border-bottom: 0; }
.thp-recent-posts__thumb { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 6px; overflow: hidden; background: #f3f4f8; display: block; }
.thp-recent-posts__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thp-recent-posts__title { flex: 1 1 auto; font-size: 14px; line-height: 1.45; font-weight: 600; color: #233179 !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.thp-recent-posts__title:hover { color: #d91d1b !important; }
@media (max-width: 767px) { .thp-article__title { font-size: 24px !important; } .thp-article .rte table { display: block; overflow-x: auto; } }
/* Logo nhỏ ::before của theme gốc (dành cho khung meta cũ) đè lên tiêu đề mới → bỏ; nội dung thẳng lề với tiêu đề. */
.thp-article::before, .thp-article::after { display: none !important; content: none !important; }
.thp-article .rte { padding: 0 0 24px !important; }
.thp-article__meta time { background: none !important; padding: 0 !important; }

/* "Bài viết mới": tên bài căn GIỮA theo chiều dọc so với ảnh thumb (user báo 05/10). */
.thp-recent-posts .thp-recent-posts__item { align-items: center !important; }
.thp-recent-posts .thp-recent-posts__title { align-self: center; }

/* Khách request 05/10:
   1/ "Bài viết mới": ảnh giữ đúng TỈ LỆ ảnh đại diện (bản thu nhỏ), không cắt vuông — ảnh rộng 110px, cao theo tỉ lệ.
   2/ Bài viết: chữ cách đường kẻ dọc (bóng 2px bên phải khung bài) 24px; ≥1200px đẩy sidebar sang phải 50px (+ bớt 5px khe) để cột
      chữ rộng hơn (màn nhỏ giữ nguyên để tool barem không bị ép). */
.thp-recent-posts .thp-recent-posts__thumb { flex: 0 0 110px; width: 110px; height: auto; aspect-ratio: auto; background: none; }
.thp-recent-posts .thp-recent-posts__thumb img { width: 100%; height: auto !important; object-fit: contain; border-radius: 6px; }
.thp-article { padding-right: 24px; }
@media (min-width: 1200px) {
	.single-post #primary.col-md-8 { width: calc(66.66667% + 50px); }
	.single-post #primary.col-md-8 ~ .thp-sb-col { width: calc(33.33333% - 50px); padding-left: 10px; }
}

/* FB lần 2 (09/10/2026): H1 "Tin tức" đầu trang /tin-tuc — cùng kiểu H1 "Sản phẩm" của trang /san-pham (navy, đậm). */
.thp-blog-archive__title {
	color: #233179;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 20px;
}
@media (max-width: 767px) { .thp-blog-archive__title { font-size: 24px; } }

/* FB 14/10/2026: "Bài viết liên quan" = băng trượt 10 bài mới nhất, 3 thẻ (≥992) / 2 (768–991) / 1 (<768), tự trượt 2s. */
.thp-rp__viewport { overflow: hidden; margin: 0 -10px; }
.thp-rp__track { display: flex; will-change: transform; }
.thp-rp__item { flex: 0 0 33.3333%; max-width: 33.3333%; padding: 0 10px; box-sizing: border-box; display: flex; }
.thp-rp__item .thp-blog-card { width: 100%; }
@media (max-width: 991px) { .thp-rp__item { flex-basis: 50%; max-width: 50%; } }
@media (max-width: 767px) { .thp-rp__item { flex-basis: 100%; max-width: 100%; } }