/*
 * Thẻ sản phẩm trên trang danh mục.
 *
 * LƯU Ý CHO NGƯỜI ĐỌC SAU: thư mục `assets-111/` trong theme này là front-end
 * CŨ ĐÃ CHẾT, 5.4 MB CSS/JS không còn dùng. Đừng đổi tên nó về `assets/` và
 * đừng nạp lại — làm vậy là chồng giao diện cũ lên giao diện hiện tại và vỡ
 * layout toàn site. File này là file mới, không liên quan.
 */

/* --- Nút Request: sửa tràn ------------------------------------------------
 * Bố cục cũ là hai cột `.w-50` (50% mỗi cột) và bên trong mỗi cột lại có
 * `.m-1` (lề 0.25rem bốn phía). Lề nằm NGOÀI phần trăm chiều rộng, nên tổng
 * thành 100% + 1rem, tràn khỏi thẻ và hai nút chồng mép lên nhau.
 * Sửa bằng gap thay cho lề, và trừ gap khỏi chiều rộng cột.
 */
.vietape-card-actions {
	display: flex;
	gap: .5rem;
	margin-top: .5rem;
}

.vietape-card-actions > * {
	flex: 1 1 0;
	min-width: 0;
}

.vietape-card-actions .xemchitiet {
	margin: 0 !important;
	display: block;
	text-align: center;
	line-height: 1.25;
	border-radius: 3px;
	cursor: pointer;
}

/* --- Part number ---------------------------------------------------------
 * Kỹ sư tìm và đối chiếu bằng MÃ HÀNG, không bằng tên mô tả. Cho nó đứng
 * riêng, chữ đều (monospace) để dễ quét mắt qua một cột dài.
 */
.vietape-card-pn {
	display: block;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 90%;
	letter-spacing: .02em;
	color: #0b5cab;
	margin-top: .15rem;
}

/* --- Thông số tóm tắt ----------------------------------------------------
 * Căn trái dù cả thẻ căn giữa: danh sách nhãn–giá trị căn giữa thì mắt không
 * có mốc để dò theo cột khi so sánh nhiều sản phẩm.
 */
.vietape-card-specs {
	list-style: none;
	margin: .5rem 0 0;
	padding: 0;
	text-align: left;
	font-size: 85%;
	line-height: 1.45;
	color: #444;
}

.vietape-card-specs li {
	display: flex;
	justify-content: space-between;
	gap: .5rem;
	border-bottom: 1px dotted #dfe3e8;
	padding: .15rem 0;
}

.vietape-card-specs li:last-child {
	border-bottom: 0;
}

.vietape-card-specs .n {
	color: #6b7280;
	white-space: nowrap;
}

.vietape-card-specs .v {
	font-weight: 600;
	text-align: right;
}

/* =========================================================================
 * TRANG CHỦ — ba lỗi bố cục, đo ngày 08/09/2026
 * ========================================================================= */

/* --- 1. Khối APPLICATIONS căn lề lệch so với hai khối kia ------------------
 * PRODUCTS và INDUSTRY dùng widget `heading` của Elementor (căn giữa sẵn).
 * APPLICATIONS lại nhét cả tiêu đề, mô tả và danh sách vào MỘT widget
 * `text-editor` — mà text-editor căn trái theo mặc định. Đó là lý do một khối
 * nằm giữa, một khối dạt sang trái.
 *
 * Sửa bằng CSS chứ không tách widget: tách là phẫu thuật JSON của Elementor
 * trên trang quan trọng nhất, đổi lấy đúng một hiệu ứng mà CSS làm được.
 */
body.home .elementor-widget-text-editor .ape-title-sev,
body.home .elementor-widget-text-editor .ape-mo-home-product {
	text-align: center;
}

body.home .elementor-widget-text-editor .ape-title-sev + .ape-mo-home-product + p {
	text-align: center;
	max-width: 780px;
	margin-left: auto;
	margin-right: auto;
}

/* Danh sách ứng dụng: căn GIỮA cả khối nhưng GIỮ chữ căn trái.
 * Căn giữa từng dòng thì mắt không có mốc để dò, mà để nguyên bên trái thì
 * lệch hẳn so với tiêu đề đã căn giữa. */
body.home .elementor-widget-text-editor ul {
	display: inline-block;
	text-align: left;
	margin: 0 auto;
}

body.home .elementor-widget-text-editor .ape-title-sev ~ ul {
	display: block;
	width: fit-content;
	margin-inline: auto;
}

/* --- 2. Thẻ bài viết cao thấp so le --------------------------------------
 * Tiêu đề bài dài ngắn khác nhau nên thẻ cao thấp lộn xộn, và mũi tên điều
 * hướng của slick đè lên mép thẻ.
 */
.hktCarousel .slick-track {
	display: flex;
	align-items: stretch;
}

.hktCarousel .slick-slide {
	height: auto;
}

.hktCarousel .slick-slide > div,
.hktCarousel article {
	height: 100%;
}

.hktCarousel .slick-prev,
.hktCarousel .slick-next {
	z-index: 2;
}

/* Mũi tên ra NGOÀI vùng thẻ thay vì đè lên. Trên màn hẹp thì không còn chỗ,
 * lúc đó ẩn đi — vuốt ngang vẫn dùng được. */
@media (min-width: 992px) {
	.hktCarousel .slick-prev { left: -34px; }
	.hktCarousel .slick-next { right: -34px; }
}

@media (max-width: 991px) {
	.hktCarousel .slick-prev,
	.hktCarousel .slick-next { display: none !important; }
}

/* --- 3. Lưới danh mục quá cao --------------------------------------------
 * Lưới dùng Bootstrap `col-md-3` = 4 ô mỗi hàng. Với 26 danh mục thành 7 hàng,
 * đo được 2654px — gần 4 màn hình chỉ để liệt kê phân loại.
 *
 * Trên màn rộng thì 4 ô/hàng là phí chỗ: ảnh chỉ 122px mà cột rộng gấp ba.
 * Cho 6 ô/hàng từ 1200px trở lên → 26 ô còn 5 hàng.
 *
 * Không đổi sang slider dù shortcode có hỗ trợ: slider bắt người dùng bấm mũi
 * tên để xem hết, mà đây là trục điều hướng chính của trang chủ. Nén lại thì
 * vẫn quét mắt một lượt được.
 */
@media (min-width: 1200px) {
	.col-custom {
		flex: 0 0 16.6666%;
		max-width: 16.6666%;
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	.col-custom {
		flex: 0 0 20%;
		max-width: 20%;
	}
}

/* Bớt khoảng trắng quanh mỗi ô. `p-3 mt-3 mb-4` của Bootstrap cộng lại thành
 * ~56px thừa mỗi hàng; nhân 5 hàng là gần 300px. */
.col-custom {
	margin-bottom: 1rem !important;
}

.col-custom .thumb {
	padding: 0.5rem !important;
	margin-top: 0.5rem !important;
}

.col-custom .text-center.p-2 {
	padding: 0.25rem !important;
}

/* Slick bọc mỗi slide trong một <div> trung gian. Không cho div đó dãn theo
 * chiều cao track thì `height:100%` của <article> bên trong không có mốc để
 * tính — đó là lý do thẻ vẫn so le 229px với 203px sau lần sửa đầu. */
.hktCarousel .slick-slide > div {
	display: flex;
	height: 100%;
}

.hktCarousel article {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* Chuỗi flex ở trên KHÔNG cân được chiều cao vì slick đặt chiều cao inline lên
 * từng slide — đã đo: vẫn lệch 294px với 268px.
 *
 * Đổi cách: nguồn gốc của chênh lệch là tiêu đề bài 2 dòng hay 3 dòng. Giới
 * hạn còn đúng 2 dòng thì mọi thẻ cao bằng nhau mà không cần ép chiều cao, và
 * tiêu đề ngắn gọn cũng dễ quét mắt hơn khi lướt.
 */
.hktCarousel article .post-box-title,
.hktCarousel article h3,
.hktCarousel article h4 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
	line-height: 1.3;
}

/* --- 4. Banner cao 900px --------------------------------------------------
 * Đo được: banner chiếm 900px, tức trọn một màn hình cho hai slide có CHỮ
 * GIỐNG HỆT NHAU — cùng "Solution for you / Specialized materials", chỉ khác
 * ảnh nền. Một màn hình đầu tiên mà không thêm thông tin nào.
 *
 * Lần đầu tôi hạ xuống 520px và LÀM MẤT CHỮ — câu định vị cùng nút
 * EXPLORE MORE bị cắt mất đáy. Nay dùng min(88vh, 860px) với sàn 620px:
 * gần trọn một màn hình như Long muốn, nhưng nội dung vẫn nằm gọn bên trong.
 *
 * Không gỡ slider: nó là lựa chọn của marketing, và gỡ đi thì mất luôn đường
 * thêm slide có nội dung khác về sau.
 */
.slider-wrapper.slider,
.slider-wrapper.slider .as-hero-bg,
.slider-wrapper.slider .hero-bg-color,
.slider-wrapper.slider .slider-inner,
.slider-wrapper.slider .owl-item,
.slider-wrapper.slider .item {
	height: min(88vh, 860px) !important;
	min-height: 620px !important;
	max-height: 860px !important;
}

@media (max-width: 767px) {
	.slider-wrapper.slider,
	.slider-wrapper.slider .as-hero-bg,
	.slider-wrapper.slider .hero-bg-color,
	.slider-wrapper.slider .slider-inner,
	.slider-wrapper.slider .owl-item,
	.slider-wrapper.slider .item {
		height: 74vh !important;
		min-height: 440px !important;
		max-height: 620px !important;
	}
}

/* Chữ trong banner phải co theo. Để nguyên cỡ chữ của banner 900px thì ở
 * 520px nó tràn ra ngoài khung. */
@media (min-width: 768px) {
	.slider-wrapper.slider h1,
	.slider-wrapper.slider h2 {
		font-size: clamp(1.8rem, 3.4vw, 3rem);
		line-height: 1.15;
	}
}

/* =========================================================================
 * Ô danh mục / ứng dụng / ngành — làm rõ là "thẻ bấm được"
 * =========================================================================
 * Hiện tại mỗi ô là một ảnh nhỏ trong khung viền mảnh, chữ rời bên dưới, và
 * khoảng trắng giữa các hàng rất lớn. Nhìn như danh sách ảnh chứ không như
 * thứ bấm được, nên mắt không biết nên dừng ở đâu.
 *
 * Ba thay đổi, không đụng HTML:
 *   - gộp ảnh và nhãn thành MỘT thẻ có nền, để vùng bấm rõ ràng
 *   - thêm phản hồi khi rê chuột, vì đây là liên kết
 *   - siết khoảng cách dọc
 */

.col-custom .thumb {
	display: flex !important;          /* thay `d-table` của Bootstrap */
	align-items: center;
	justify-content: center;
	width: 100%;
	background: #fff;
	border: 1px solid #e6eaef !important;
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(16, 42, 67, .04);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.col-custom .thumb img {
	max-width: 100%;
	height: auto;
	transition: transform .18s ease;
}

/* Cả ô là một liên kết; phản hồi phải xảy ra khi rê vào BẤT KỲ đâu trong ô,
 * không chỉ khi rê đúng vào ảnh. */
.col-custom:hover .thumb {
	border-color: #08A6D9 !important;
	box-shadow: 0 6px 18px rgba(8, 166, 217, .16);
	transform: translateY(-3px);
}

.col-custom:hover .thumb img {
	transform: scale(1.04);
}

.col-custom .text-center a,
.col-custom h4 a {
	display: block;
	font-weight: 600;
	font-size: 0.92rem;
	line-height: 1.35;
	color: #1f2d3d;
	transition: color .18s ease;
}

.col-custom:hover .text-center a,
.col-custom:hover h4 a {
	color: #08A6D9;
}

/* Nhãn hai dòng thì ô cao thấp so le. Chốt hai dòng cho mọi ô. */
.col-custom .text-center a {
	min-height: 2.7em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Khoảng cách dọc giữa các hàng đang gần gấp đôi khoảng cách ngang. */
.col-custom {
	margin-bottom: 0.75rem !important;
}

/* --- 5. Hai tiêu đề mục nằm CẠNH NHAU thay vì xếp dọc ---------------------
 * Container của Elementor ở đây chạy `display: grid` (class `e-grid
 * e-con-boxed`), không phải flex. Nên `flex_direction: column` mà tôi đặt vào
 * dữ liệu bị bỏ qua hoàn toàn — sửa đúng thuộc tính nhưng sai cơ chế bố cục.
 *
 * Với grid thì thứ quyết định là `grid-template-columns`. Ép về một cột cho
 * mọi container có từ hai widget heading trở lên.
 *
 * Dùng `:has()` vì CSS không có cách nào khác để chọn phần tử CHA theo nội
 * dung con. Đã kiểm trên chính trình duyệt đang xem: CSS.supports trả về true.
 */
body.home .e-con.e-grid:has(.elementor-widget-heading + .elementor-widget-heading) > .e-con-inner,
body.home .e-con.e-grid:has(.elementor-widget-heading + .elementor-widget-heading) {
	grid-template-columns: 1fr !important;
}

/* --- 6. Ô trong slider: chuẩn hoá khung ảnh ------------------------------
 * Ảnh danh mục có tỉ lệ rất khác nhau — có ảnh vuông, có ảnh dọc cao gấp rưỡi.
 * Để nguyên thì mỗi ô một chiều cao, hàng ô răng cưa (thấy rõ ở mục PRODUCTS:
 * ô "Single Sided Tape" cao hơn hẳn "Double-sided tapes").
 *
 * Chốt khung ảnh 150px và dùng `object-fit: contain` — không cắt mất phần nào
 * của ảnh sản phẩm, chỉ canh chúng vào cùng một khung.
 */
.category-slider .slide {
	padding: 0 8px;
}

.category-slider .slide > a {
	display: block;
	background: #fff;
	border: 1px solid #e6eaef;
	border-radius: 10px;
	padding: 12px;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.category-slider .slide > a img {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: contain;
	margin: 0 auto;
}

.category-slider .slide:hover > a {
	border-color: #08A6D9;
	box-shadow: 0 6px 18px rgba(8, 166, 217, .16);
	transform: translateY(-3px);
}

.category-slider h4 {
	margin-top: .6rem;
	font-size: .95rem;
	line-height: 1.35;
	min-height: 2.7em;
}

.category-slider h4 a {
	font-weight: 600;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Mũi tên của slick nằm sát mép slide sẽ đè lên ô đầu và ô cuối. */
.category-slider .slick-prev { left: -28px; }
.category-slider .slick-next { right: -28px; }

@media (max-width: 991px) {
	.category-slider .slick-prev,
	.category-slider .slick-next { display: none !important; }
}

/* =========================================================================
 * TRANG /product/ — dựng lại 09/09/2026
 * =========================================================================
 * Đo trên production trước khi sửa:
 *   - 26 ô danh mục, chiều cao so le: 367, 367, 367, 367, 367, 367, 345, 345
 *   - ảnh trong ô đủ mọi tỉ lệ: 208x231, 191x213, 208x208, 191x191…
 *   - 87px khoảng trắng chết giữa lưới danh mục và danh sách sản phẩm
 *   - thẻ sản phẩm cũng so le: 298, 298, 298, 298, 298, 276, 276, 276
 *
 * Nguyên nhân chung của cả hai chỗ so le là GIỐNG NHAU và giống hệt lỗi ở khối
 * tin trang chủ: khung ngoài giãn đều nhưng khung trong cao theo nội dung.
 */

/* --- Ô danh mục: khung ảnh cùng chiều cao -------------------------------- */

/* Ảnh sản phẩm do nhiều người chụp ở nhiều thời điểm nên tỉ lệ mỗi cái một
 * khác. Không thể sửa ảnh, nhưng có thể cố định KHUNG rồi cho ảnh nằm gọn bên
 * trong bằng `object-fit: contain` — không méo, không cắt, và mọi nhãn bên
 * dưới rơi đúng một mức. */
.col-custom .thumb {
	height: 190px;
	padding: 14px !important;
}

.col-custom .thumb img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
}

/* Nhãn dài ngắn khác nhau ("Foam" so với "Single Sided Polypropylene Tape")
 * làm hàng lệch tiếp. Chừa chỗ cho hai dòng ở mọi ô. */
.col-custom .text-center.p-2 {
	min-height: 3.1em;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.col-custom .text-center.p-2 strong {
	font-size: .92rem;
	line-height: 1.35;
	color: #16283d;
}

/* Mô tả danh mục để trống ở hầu hết các ô — thẻ <p> rỗng vẫn chiếm chỗ. */
.col-custom .text-center.p-2 p:empty {
	display: none;
}

/* --- Siết khoảng trắng giữa hai khối ------------------------------------- */

.tape-all-product-category {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
	margin-bottom: 0 !important;
}

.tape-all-product .form-tape {
	margin-top: 28px;
	margin-bottom: 18px;
}

.vt-tieude-muc {
	text-align: center;
	font-size: clamp(1.25rem, 2.2vw, 1.7rem);
	font-weight: 800;
	color: #16283d;
	margin: 0;
}

/* --- Thẻ sản phẩm: cao đều, nút thẳng hàng ------------------------------- */

/* `article` là cột của lưới nên đã giãn đều sẵn; chỗ hỏng là các lớp bên trong
 * cao theo nội dung. Cho cả chuỗi cùng giãn, rồi `margin-top: auto` ở hàng nút
 * đẩy nút xuống đáy — nhờ vậy nút của mọi thẻ nằm trên cùng một đường, kể cả
 * khi tên sản phẩm dài ngắn khác nhau. */
.post-listing.archive-box article.post-item {
	display: flex;
}

.post-listing.archive-box article.post-item > .recent-item {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.post-listing.archive-box .title-duan {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.post-listing.archive-box .vietape-card-actions,
.post-listing.archive-box .xemchitiet.small.m-auto {
	margin-top: auto;
}

/* --- Phân trang ---------------------------------------------------------- */

/* Trang này trước đây không có phân trang, nên 87/111 sản phẩm không có đường
 * nào đi tới. Xem ghi chú trong `archive-products.php`. */
.vt-phan-trang {
	margin: 36px 0 12px;
}

.vt-phan-trang .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	align-items: center;
}

.vt-phan-trang .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid #d8e0e8;
	border-radius: 8px;
	background: #fff;
	color: #0b5cab;
	font-weight: 700;
	text-decoration: none;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.vt-phan-trang .page-numbers:hover {
	border-color: #08A6D9;
	color: #08A6D9;
}

.vt-phan-trang .page-numbers.current {
	background: #0b5cab;
	border-color: #0b5cab;
	color: #fff;
}

.vt-phan-trang .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: #5b6b7d;
}

@media (max-width: 767px) {
	.col-custom .thumb {
		height: 130px;
		padding: 10px !important;
	}

	.col-custom .text-center.p-2 {
		min-height: 3.4em;
	}
}

/* =========================================================================
 * SỬA TIẾP TRANG /product/ — 09/09/2026, đợt hai
 * ========================================================================= */

/* --- LỖI DO CHÍNH LUẬT TRÊN GÂY RA: ô "Single Sided Tape" vỡ ------------- */

/* Tôi đặt `display: flex` cho khối nhãn để căn chiều cao giữa các ô, nhưng
 * QUÊN `flex-direction` — mặc định là `row`, nên tên và mô tả nằm CẠNH nhau
 * thay vì trên dưới. Đo được: `<a>` x=361..540 và `<p>` x=449..551 đè lên
 * nhau, và cả hai tràn ra ngoài ô (x=347..555).
 *
 * Chỉ MỘT ô lộ ra vì chỉ một danh mục có mô tả — 32/33 danh mục để trống.
 * Bài học: đặt `display: flex` lên một khối có sẵn nhiều con là đổi luôn cách
 * chúng xếp; phải khai `flex-direction` cùng lúc, không để mặc định. */
.col-custom .text-center.p-2 {
	flex-direction: column;
}

/* Ẩn mô tả trên lưới ô. Đã kiểm toàn bộ 33 danh mục: đúng MỘT cái có mô tả, và
 * nội dung của nó là "Single Sided Tape" — trùng y hệt tên. Đó là dữ liệu rác,
 * không phải nội dung.
 *
 * Kể cả sau này viết mô tả thật (việc 20 trong CLAUDE.md) thì 2-3 câu cũng
 * thuộc về TRANG danh mục, không thuộc về một ô điều hướng 200px. */
.col-custom .text-center.p-2 p {
	display: none;
}

/* --- Thẻ sản phẩm: tiêu đề cố định 2 dòng ------------------------------- */

/* Đo được trong CÙNG một hàng: tiêu đề cao 107px và 85px, kéo theo mã hàng
 * lệch 23px và bảng thông số lệch 23px.
 *
 * Đây là chỗ đau nhất của lưới này: người xem đang SO SÁNH thông số theo hàng
 * ngang, mà các dòng "Thickness" của hai thẻ cạnh nhau lại không cùng một mức.
 * Cắt cứng tiêu đề ở 2 dòng để mã hàng và bảng thông số của cả hàng thẳng
 * nhau. */
.post-listing.archive-box .post-box-title a {
	/* Xem ghi chu ben duoi — ba thu o day deu bat buoc. */
	box-sizing: content-box;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.35;
	height: 2.7em;
	padding: 0;
	margin-bottom: 8px;
	font-size: .95rem;
	font-weight: 700;
}

/* --- Thẻ sản phẩm: cho ra hình thẻ thật ---------------------------------- */

/* Trước: nền trong suốt, viền 0px. Lưới 24 thẻ thành một mảng chữ liền, mắt
 * không biết ranh giới mỗi sản phẩm ở đâu. Dùng đúng kiểu thẻ của ô danh mục
 * ngay phía trên để cả trang đọc như một hệ. */
.post-listing.archive-box article.post-item > .recent-item {
	background: #fff;
	border: 1px solid #d8e0e8;
	border-radius: 10px;
	padding: 16px 14px 14px;
	box-shadow: 0 1px 3px rgba(16, 42, 67, .06);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.post-listing.archive-box article.post-item > .recent-item:hover {
	border-color: #b7c6d6;
	box-shadow: 0 8px 20px rgba(16, 42, 67, .12);
	transform: translateY(-3px);
}

.post-listing.archive-box article.post-item {
	margin-bottom: 24px;
}

/* --- Hai nút: cùng một dòng, cùng một cỡ -------------------------------- */

/* Hộp hai nút vốn đã bằng nhau (đo được 106x50 cả hai), nhưng "Request Sample"
 * xuống hai dòng còn "Request Quote" một dòng, nên nhìn vẫn lệch. Thu cỡ chữ
 * để cả hai nằm gọn một dòng. */
.post-listing.archive-box .vietape-card-actions .xemchitiet {
	display: flex !important;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 8px 4px !important;
	font-size: .75rem;
	font-weight: 600;
	white-space: nowrap;
	border-radius: 6px;
}

@media (max-width: 575px) {
	.post-listing.archive-box .vietape-card-actions {
		flex-direction: column;
	}

	.post-listing.archive-box .vietape-card-actions .xemchitiet {
		font-size: .8rem;
	}
}

/* --- Vì sao khối tiêu đề trên cần `box-sizing: content-box` -------------- */

/* Lần đầu tôi đặt `min-height: 2.7em` (= 2 dòng) lên thẻ <a> của tiêu đề và
 * nó KHÔNG có tác dụng nào. Đo ra mới thấy:
 *
 *   <a> có `padding: 20px 0`, tức 40px đệm dọc
 *   Bootstrap đặt `* { box-sizing: border-box }`
 *   -> `min-height: 43.2px` TÍNH CẢ đệm, nên phần chữ chỉ cần 3.2px là đủ
 *   -> the0 (2 dòng): 43.2 + 40 = 83px
 *      the3 (1 dòng): 21.6 + 40 = 62px   <- vẫn lệch 21px
 *
 * `min-height` nhỏ hơn chính phần đệm thì nó không ràng buộc được gì. Đây là
 * kiểu lỗi im lặng: luật vẫn "được áp dụng" khi xem computed style, chỉ là
 * không đổi kết quả.
 *
 * Hai việc: chuyển sang `content-box` để `min-height` tính trên phần CHỮ, và
 * bỏ 40px đệm dọc thừa — nó là thứ đẩy mã hàng ra xa tiêu đề. */

/* --- Vì sao khối tiêu đề dùng `height` chứ không `min-height`, và không
 *     khai thuộc tính chuẩn `line-clamp` -----------------------------------
 *
 * Bản trước vẫn lỗi: thẻ "Vietape AL7200 – DOUBLE – SIDED ALUMINUM FOIL TAPE"
 * ở mục Related products lòi ra một lát dòng thứ ba, đè lên mã hàng.
 *
 * Đo ra hai nguyên nhân chồng nhau:
 *
 * 1. `display` computed ra `flow-root`, KHÔNG phải `-webkit-box` — dù luật có
 *    khai. Thủ phạm là dòng `line-clamp: 2` (thuộc tính chuẩn) đi kèm: trình
 *    duyệt hiện tại nhận nó rồi tự đổi display, và khi display không còn là
 *    `-webkit-box` thì `-webkit-line-clamp` KHÔNG cắt gì cả. Chữ vẫn xuống 3
 *    dòng (đo được scrollHeight 70px so với hộp 49px).
 *
 * 2. `min-height` chỉ đặt sàn, không đặt trần. Ba dòng chữ thì hộp cứ cao lên.
 *    Và `padding-bottom: 8px` nằm TRONG vùng `overflow: hidden` cắt, nên 8px
 *    đó vừa đủ để lộ đỉnh dòng thứ ba — chính là chữ "TAPE" nhìn thấy.
 *
 * Nên: bỏ `line-clamp` chuẩn, đổi `min-height` thành `height` cố định đúng 2
 * dòng (2 × 1.35em), và chuyển 8px khoảng cách từ `padding` sang `margin` để
 * nó nằm NGOÀI vùng bị cắt. Ba thứ phải làm cùng lúc; thiếu cái nào cũng còn
 * lọt.
 */