/*
 * Thẻ bài viết — trang chủ, trang tin, và bài liên quan.
 *
 * BỐI CẢNH ĐO ĐƯỢC 08/09/2026
 * Thẻ cũ chỉ có ba thứ: tên tác giả, ngày, tiêu đề. Không ảnh — đã kiểm, 0/6
 * bài có ảnh đại diện — và đoạn tóm tắt trong template của theme cha BỊ COMMENT
 * LẠI. Nên thẻ cao 288px mà 48px đầu dành cho dòng "By Helen Nguyen | ngày",
 * tức phần chiếm chỗ nhiều nhất lại là phần ít ai đọc nhất.
 *
 * Hướng sửa: thẻ phải tự đứng được bằng CHỮ, vì không có ảnh để dựa vào.
 * Tiêu đề lên trước làm điểm neo, thêm tóm tắt để thẻ có nội dung thật, ngày
 * tháng lui xuống chân với cỡ chữ nhỏ. Template override ở
 * `templates/loops/post-item-grid.php` lo phần cấu trúc; file này lo phần nhìn.
 *
 * CHIỀU CAO LỆCH NHAU — ba lần sửa trước đều trượt vì sai thư viện.
 * Tôi đã thử `display:flex` lên `.slick-track` ba lần và không lần nào ăn.
 * Lý do: khối tin dùng OWL CAROUSEL, không phải Slick — nút của nó là
 * `.owl-prev` / `.owl-next` với chữ "Back"/"Next". Luật nhắm vào `.slick-track`
 * không khớp phần tử nào cả.
 *
 * Bên dưới nhắm `.owl-stage`, và giữ luôn luật cho `.slick-track` phòng khi
 * khối khác dùng thư viện kia. `flex: 0 0 auto` trên `.owl-item` là bắt buộc:
 * Owl ghi chiều rộng bằng style inline, để flex tự chia là vỡ bố cục băng chạy.
 */

/* --- Chiều cao đều nhau -------------------------------------------------- */

.hkt-posts .hktCarousel .owl-stage {
	display: flex;
	align-items: stretch;
}

.hkt-posts .hktCarousel .owl-item {
	flex: 0 0 auto;      /* tôn trọng chiều rộng inline do Owl tính */
	display: flex;
	height: auto;
}

.hkt-posts .hktCarousel .slick-track {
	display: flex;
	align-items: stretch;
}

/* Owl và Slick đều chèn một lớp div trung gian giữa item và <article>. Không
 * cho lớp đó giãn theo thì chiều cao dừng lại ở nó, thẻ bên trong vẫn lệch. */
.hkt-posts .hktCarousel .owl-item > *,
.hkt-posts .hktCarousel .slick-slide > div,
.hkt-posts .hktCarousel .owl-item > * > .blog-card {
	display: flex;
	width: 100%;
}

.blog-card {
	display: flex;
}

.blog-card .recent-item {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* --- Thân thẻ ------------------------------------------------------------ */

.blog-card .recent-item {
	background: #fff;
	border: 1px solid #d8e0e8;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(16, 42, 67, .06);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* Vạch màu thương hiệu ở mép trên. Không có ảnh thì thẻ cần MỘT điểm màu để
 * mắt bám vào, nếu không cả hàng chỉ là các khối chữ xám giống hệt nhau. */
.blog-card .recent-item::before {
	content: "";
	display: block;
	height: 3px;
	background: linear-gradient(90deg, #08A6D9, #0b5cab);
}

.blog-card .recent-item:hover {
	transform: translateY(-4px);
	border-color: #b7c6d6;
	box-shadow: 0 10px 24px rgba(16, 42, 67, .12);
}

.blog-card .entry.blog-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 18px 20px 16px;
	gap: 10px;
}

/* --- Nhãn danh mục ------------------------------------------------------- */

.vt-blog-nhan {
	align-self: flex-start;
	font-size: .69rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #0b5cab;
	background: rgba(8, 166, 217, .10);
	border-radius: 4px;
	padding: 4px 9px;
	line-height: 1;
}

/* --- Tiêu đề ------------------------------------------------------------- */

/* Theme cha để `.post-box-title` là một div cao 110px cho tiêu đề 3 dòng, và
 * chính nó là chỗ sinh ra chênh lệch 288 vs 265px. Cắt cứng ở 3 dòng để mọi
 * thẻ có cùng phần đầu; phần còn lại đã do flex lo. */
.blog-card .post-box-title {
	margin: 0;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.38;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-card .post-box-title a {
	color: #16283d;
	text-decoration: none;
	transition: color .18s ease;
}

.blog-card .recent-item:hover .post-box-title a {
	color: #0b5cab;
}

/* --- Tóm tắt ------------------------------------------------------------- */

/* `flex: 1 1 auto` đẩy chân thẻ xuống đáy: thẻ nào tóm tắt ngắn thì khoảng
 * trống dồn vào đây, nên hàng "ngày · Read more" của mọi thẻ luôn thẳng nhau. */
.vt-blog-tomtat {
	flex: 1 1 auto;
	margin: 0;
	font-size: .88rem;
	line-height: 1.62;
	color: #5b6b7d;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- Chân thẻ ------------------------------------------------------------ */

.vt-blog-chan {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 2px;
	padding-top: 12px;
	border-top: 1px solid #edf1f5;
}

.vt-blog-ngay {
	font-size: .78rem;
	color: #8496a8;
}

.vt-blog-them {
	font-size: .82rem;
	font-weight: 700;
	color: #0b5cab;
	text-decoration: none;
	white-space: nowrap;
}

.vt-blog-them::after {
	content: "→";
	margin-left: 5px;
	display: inline-block;
	transition: transform .18s ease;
}

.blog-card .recent-item:hover .vt-blog-them::after {
	transform: translateX(3px);
}

/* Dòng meta cũ của theme cha. Template mới không in nó nữa, nhưng bài liên
 * quan ở trang đơn có thể còn dùng bản của theme cha — ẩn cho khỏi lặp ngày. */
.blog-card .post-meta-tape,
.blog-card .post-info {
	display: none;
}

/* --- Màn hình nhỏ -------------------------------------------------------- */

@media (max-width: 767px) {
	.blog-card .entry.blog-content {
		padding: 16px 16px 14px;
	}

	.blog-card .post-box-title {
		font-size: .96rem;
	}
}

/* --- Bẫy: khoảng cách của theme cha chặn việc giãn đều ------------------- */

/* Theme cha đặt `margin-bottom: 50px` lên `.recent-item` để giãn dòng cho bố
 * cục lưới cũ. Trong băng chạy nó thành cái bẫy: <article> giãn đủ chiều cao
 * (đo được 343px) nhưng 50px đó nằm NGOÀI khung thẻ, nên khung trong chỉ 293px
 * và các thẻ vẫn so le.
 *
 * Chuyển khoảng cách ra chính <article> — nơi nó không ảnh hưởng chiều cao
 * khung — rồi cho khung trong chiếm hết phần còn lại. */
.blog-card {
	align-items: stretch;
}

.blog-card .recent-item {
	margin-bottom: 0;
	flex: 1 1 auto;
}

/* Chỉ trả khoảng cách lại khi thẻ nằm trong LƯỚI (trang tin, bài liên quan).
 * Băng chạy đã tự có khoảng cách giữa các ô nên không cần. */
.blog-card.col-6,
.blog-card.col-md-4,
.blog-card.col-lg-3 {
	margin-bottom: 30px;
}

/* --- Bẫy: trùng tên class với bộ giao diện cũ trong style.css ------------ */

/* `hkt-simple-child/header.php` nạp cứng `assets/css/style.css` (21722 dòng)
 * bằng thẻ `<link>`, và file đó đã có sẵn một bộ `.blog-card` của giao diện
 * khác — trùng đúng tên class mà template của theme cha gắn cho thẻ bài viết.
 *
 * Phần lớn không đụng nhau vì bộ kia dùng `.blog-img`, `.blog-title`, `.date`
 * — những class markup này không có. Nhưng một luật thì trùng thật:
 *
 *   style.css:16275  .blog-card .blog-content { padding: 35px 40px 38px;
 *                    box-shadow: 0 8px 15px rgba(4,6,66,.06);
 *                    margin-bottom: 15px }
 *
 * Luật của tôi `.blog-card .entry.blog-content` (0,3,0) thắng phần `padding`,
 * nhưng KHÔNG khai `box-shadow` và `margin-bottom` nên hai thứ đó vẫn ăn: một
 * bóng đổ thừa nằm bên trong thẻ, cộng 15px trống dưới đáy.
 *
 * Không thấy bằng mắt vì bóng rất nhạt và 15px đều nhau ở mọi thẻ — kiểu lỗi
 * chỉ lộ ra khi đọc file CSS kia.
 *
 * `wp_head()` nằm ở header.php dòng 73, SAU cả 5 thẻ `<link>` cứng, nên CSS
 * của tôi vẫn nạp sau và thắng khi hoà độ ưu tiên. */
.blog-card .entry.blog-content {
	box-shadow: none;
	margin-bottom: 0;
}

/* =========================================================================
 * SỬA SAU ĐỢT RÀ SOÁT 09/09/2026
 * ========================================================================= */

/* --- Khoanh vùng `.hktCarousel` — đã sửa ở các luật phía trên ------------
 *
 * Class `.hktCarousel` dùng chung cho HAI slider khác nhau: banner
 * (`hkt-slider.php:59`) và khối tin (`hkt-post.php:156`). File này nạp ở trang
 * chủ, nên luật `.hktCarousel .owl-item > * { display: flex }` biến
 * `.item.slide-item` CỦA BANNER thành flex container.
 *
 * Hậu quả dây chuyền: `.vietape-slider-home` thành flex item với `flex-grow: 0`
 * nên nó CO LẠI bằng max-content — tức đúng bằng `.container` của bootstrap
 * bên trong: max-width 1320px + đệm 15px hai bên = 1350px.
 *
 * ĐÂY CHÍNH LÀ 1350px mà tôi đã ghi trong home.css là "không tìm ra luật nào
 * đặt width, đã grep toàn bộ CSS của hai theme". Grep không ra vì không có
 * luật `width` nào cả — con số đó là hệ quả của `display: flex` ở dòng 46 của
 * file này. Luật `margin: auto` ba cấp bên home.css chỉ che triệu chứng.
 *
 * Nay mọi luật đã thêm tiền tố `.hkt-posts` (lớp bọc của shortcode bài viết),
 * nên chúng không còn chạm tới banner. */

/* --- Tương phản màu ngày tháng ------------------------------------------- */

/* #8496a8 trên nền trắng chỉ đạt 3.04:1, dưới ngưỡng AA 4.5:1 cho chữ thường.
 * Dùng lại đúng màu của đoạn tóm tắt — đã đủ tương phản và bớt được một token
 * màu khỏi bảng màu. */
.vt-blog-ngay {
	color: #5b6b7d;
}

/* --- Chân thẻ tràn ở lưới 2 cột trên điện thoại -------------------------- */

/* Ở `.col-6` (2 thẻ một hàng, ~160px mỗi thẻ), hàng "ngày · Read more →" là
 * flex một dòng với `white-space: nowrap` trên "Read more" — cộng lại rộng hơn
 * thẻ nên bị tràn và cắt. Cho phép xuống dòng và bỏ giãn hai đầu. */
@media (max-width: 575px) {
	.vt-blog-chan {
		flex-wrap: wrap;
		gap: 4px 10px;
		justify-content: flex-start;
	}

	.vt-blog-ngay,
	.vt-blog-them {
		font-size: .74rem;
	}
}

/* --- Hiệu ứng nhấc thẻ bị băng chạy cắt mất ------------------------------ */

/* `.owl-stage-outer` có `overflow: hidden` (Owl cần nó để cắt các ô ngoài
 * khung). Thẻ nhấc lên 4px khi hover thì 4px trên cùng bị cắt — mà 4px đó
 * chính là vạch màu thương hiệu ở mép trên. Kết quả: rê chuột vào thì vạch màu
 * biến mất, trông như thẻ hỏng chứ không như hiệu ứng.
 *
 * Trong băng chạy thì bỏ phần nhấc, giữ nguyên đổ bóng và đổi màu viền — vẫn
 * đủ tín hiệu là thẻ bấm được. Ở lưới (trang tin, bài liên quan) không có
 * `overflow: hidden` nên vẫn giữ hiệu ứng nhấc. */
.hkt-posts .hktCarousel .blog-card .recent-item:hover {
	transform: none;
	box-shadow: 0 6px 18px rgba(16, 42, 67, .16);
}

/* --- Tiêu đề: giữ đúng 3 dòng ------------------------------------------- */

/* `product-card.css:221` có `.hktCarousel article .post-box-title
 * { -webkit-line-clamp: 2 }` ở (0,3,0), cao hơn luật (0,2,0) của file này.
 * Trình duyệt hiện tại vẫn cho 3 dòng vì file này khai thêm thuộc tính chuẩn
 * `line-clamp`, nhưng trình duyệt chỉ hiểu tiền tố `-webkit-` thì sẽ ra 2
 * dòng. Khai lại ở (0,4,0) cho hết phụ thuộc may rủi. */
.hkt-posts .hktCarousel .blog-card .post-box-title {
	-webkit-line-clamp: 3;
	line-clamp: 3;
}