/*
 * Thẻ bài viết dùng chung toàn site — theo file mẫu `guide-card` của chủ site.
 * Markup sinh ở inc/blog-card.php. Hồ sơ: /home/vietnamtourin/TOUR-DETAIL.md
 *
 * Số liệu lấy NGUYÊN từ file mẫu, đừng tự làm tròn:
 *   viền #ece8e4 · bo 16px · ảnh bo 0 (nằm trong khối overflow:hidden)
 *   nhãn chuyên mục  11.5px/600/.04em/hoa, bo 8px, nền #d81372
 *   tiêu đề          16px/600/lh1.35/-.01em, cắt 2 dòng   (mẫu ghi 17.5px, chủ site chốt 16px 07/09)
 *   tóm tắt          13.5px/lh1.6 #6b6b76, cắt 2 dòng
 *   read article     13.5px/600 #d81372
 *
 * ⚠️ Class phải có tiền tố `vnin-` — safelist RUCSS của WP Rocket là /\.vnin-(.*)/
 */

.vnin-gcard {
	display: flex; flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid #ece8e4;
	border-radius: 16px;
	overflow: hidden;
	color: #1b1b1f;
	transition: border-color .2s ease;
}
.vnin-gcard:hover { border-color: #d81372; }

/* ---- ảnh ---- */
.vnin-gcard-media {
	position: relative; display: block;
	/* --vnin-gcard-ar do PHP đặt theo `image_height` của UX Builder */
	aspect-ratio: var(--vnin-gcard-ar, 4 / 3);
	background: #e6e3df;
}
.vnin-gcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vnin-gcard-cat {
	position: absolute; top: 12px; left: 12px;
	padding: 5px 10px; border-radius: 8px;
	background: #d81372; color: #fff;
	font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	line-height: 1.4;
}

/* ---- thân ---- */
.vnin-gcard-body {
	flex: 1;
	padding: 16px 18px 18px;
	display: flex; flex-direction: column; gap: 10px;
}
.vnin-gcard-title {
	margin: 0;
	font-size: 16px; line-height: 1.35; font-weight: 600; letter-spacing: -.01em;
	text-wrap: pretty;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vnin-gcard-title a { color: inherit; text-decoration: none; }
.vnin-gcard-title a:hover { color: #d81372; }
.vnin-gcard-excerpt {
	margin: 0;
	font-size: 13.5px; line-height: 1.6; color: #6b6b76;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vnin-gcard-more {
	margin-top: auto; padding-top: 12px;
	display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
	font-size: 13.5px; font-weight: 600; color: #d81372; text-decoration: none;
}
.vnin-gcard-more:hover { color: #ab0c58; }

/*
 * Flatsome canh giữa chữ trong ô bài viết ở nhiều nơi (`text_align="center"`,
 * `.box-text.text-center`). Thẻ này luôn canh trái theo thiết kế — ép lại,
 * nếu không thì cùng một kiểu thẻ mà chỗ căn trái chỗ căn giữa.
 */
.vnin-gcard, .vnin-gcard * { text-align: left; }

/*
 * Thẻ trong cùng một hàng phải cao bằng nhau.
 * ⚠️ ĐỪNG dùng `.col-inner { height: 100% }` — `.col` là flex item được kéo giãn và có
 * `box-sizing: border-box`, nên 100% ăn cả phần `padding-bottom: 30px` của Flatsome:
 * thẻ tràn xuống chỗ đáng lẽ là khoảng cách giữa hai hàng, nhìn như không có margin
 * (chủ site báo 07/09). Biến cột thành flex dọc thì `.col-inner` giãn đúng phần nội
 * dung, padding giữ nguyên.
 */
.post-item { display: flex; flex-direction: column; padding-bottom: 34px; }
.post-item > .col-inner { flex: 1; display: flex; }
.post-item > .col-inner > .vnin-gcard { flex: 1; }

/* Trong slider chỉ có MỘT hàng — khoảng trống dưới thành thừa */
.vnin-pslider > .post-item { padding-bottom: 0; }

@media (max-width: 640px) {
	.vnin-gcard-body { padding: 14px 15px 16px; gap: 8px; }
	.vnin-gcard-excerpt { font-size: 13px; }
}

/* Bài không có ảnh: nhãn chuyên mục nằm trong thân thẻ, không tuyệt đối */
.vnin-gcard-cat--inline { position: static; align-self: flex-start; }

/* =========================================================================
 * Tiêu đề trang lưu trữ (tag / chuyên mục / tìm kiếm / tác giả)
 * Markup: flatsome-child/template-parts/posts/partials/archive-title.php
 * Cùng ngôn ngữ với hero danh mục: nhãn hồng nhỏ + tiêu đề chữ thường, canh trái
 * cho khớp lưới thẻ bài viết bên dưới.
 * ========================================================================= */
.vnin-arch { margin: 0 0 22px; }
.vnin-arch .col { padding-bottom: 0; }
.vnin-arch-eyebrow {
	display: block; margin-bottom: 6px;
	font-size: 11.5px; font-weight: 600; letter-spacing: .16em;
	text-transform: uppercase; color: #d81372;
}
.vnin-arch-title {
	margin: 0;
	font-size: 32px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em;
	color: #1b1b1f; text-transform: none; text-wrap: pretty;
}
.vnin-arch-count { margin: 8px 0 0; font-size: 13.5px; color: #5c5c66; }
.vnin-arch-desc {
	margin-top: 12px; max-width: 760px;
	font-size: 14.5px; line-height: 1.7; color: #4a4a52;
}
.vnin-arch-desc p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
	.vnin-arch { margin-bottom: 18px; }
	.vnin-arch-title { font-size: 25px; }
}