@charset "UTF-8";
/* ==========================================================================
   Danh sách bài viết — danh mục, thẻ, tác giả, tìm kiếm
   Nạp sau post.css nên dùng lại hero, ô số liệu, chip lọc và bảng màu của các
   trang so sánh sản phẩm.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------
   Nền chuyển nhẹ thay vì trắng phẳng, để phần đầu trang tách khỏi danh sách
   bên dưới mà không cần kẻ đường viền.
   -------------------------------------------------------------------------- */
.barc__hero {
	padding: 18px 0 clamp(26px, 3.4vw, 40px);
	background:
		radial-gradient(1100px 300px at 12% -40%, rgba(13, 101, 85, .10), transparent 62%),
		linear-gradient(180deg, var(--c-soft) 0%, #fff 100%);
	border-bottom: 1px solid var(--edge-2);
}

.barc__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 34px;
	margin-top: 14px;
}

.barc__intro { flex: 1 1 420px; min-width: 0; }

.barc__kicker {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 10px;
	padding: 5px 12px 5px 10px;
	border-radius: var(--r-pill, 999px);
	background: #fff;
	border: 1px solid var(--edge);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--purple);
}
.barc__kicker .ico { width: 14px; height: 14px; }

.barc__title {
	margin: 0;
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 800;
	color: var(--ink);
	line-height: 1.14;
	letter-spacing: -.5px;
}

.barc__lead {
	max-width: 62ch;
	margin: 12px 0 0;
	font-size: clamp(15px, 1.5vw, 16.5px);
	color: var(--gray);
	line-height: 1.65;
}

.barc__stats { flex: 0 1 auto; margin: 0; }

.barc__body { padding: clamp(26px, 3.4vw, 38px) 0 clamp(40px, 5vw, 60px); }

.barc__filter { margin-bottom: clamp(18px, 2.4vw, 26px); }

/* --------------------------------------------------------------------------
   Lưới thẻ bài
   --------------------------------------------------------------------------
   Bài đầu tiên chiếm cả hàng và nằm ngang: một dãy thẻ đều tăm tắp không cho
   mắt biết nên bắt đầu từ đâu.
   -------------------------------------------------------------------------- */
.bgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 16px;
}

.bcard {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 18px 20px 16px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 16px;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}
.bcard:hover {
	border-color: var(--c-brand-200);
	box-shadow: 0 16px 34px -22px rgba(6, 35, 31, .55);
	transform: translateY(-2px);
}
.bcard[hidden] { display: none; }

.bcard__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }

/* Ảnh đại diện chỉ dựng khi bài thực sự có ảnh — không vẽ hộp xám rỗng */
.bcard__media {
	margin: -18px -20px 14px;
	border-radius: 16px 16px 0 0;
	overflow: hidden;
	line-height: 0;
}
.bcard__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }

/* Sản phẩm bài viết nói tới */
.bcard__ent {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 10px;
	min-width: 0;
}
.bcard__ent-icon {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	flex: none;
	border-radius: 8px;
	background: var(--c-act-50);
	color: var(--green-dark);
}
.bcard__ent-icon .ico { width: 14px; height: 14px; }
.bcard__ent-name {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ink);
	overflow-wrap: anywhere;
}
.bcard__ent-kind {
	padding: 2px 8px;
	border-radius: var(--r-pill, 999px);
	background: var(--c-soft);
	font-size: 11.5px;
	color: var(--gray-2);
	white-space: nowrap;
}

.bcard__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.4;
	letter-spacing: -.1px;
}
.bcard:hover .bcard__title { color: var(--purple); }

/* Cắt ở dòng thứ ba: tóm tắt các bài dài ngắn rất khác nhau, để tự do thì
   trong cùng một hàng thẻ này ba dòng thẻ kia bảy dòng */
.bcard__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 8px 0 0;
	font-size: 14.5px;
	color: var(--gray);
	line-height: 1.62;
}

/* margin-top: auto — dòng ngày tụt xuống đáy thẻ.
   Lưới kéo mọi thẻ trong một hàng cao bằng thẻ cao nhất, nên thẻ không có ảnh
   thừa ra hơn ba trăm pixel trống NGAY DƯỚI dòng ngày, trông như thẻ lỗi. Đẩy
   dòng ngày xuống đáy thì khoảng trống nằm ở giữa và ngày của cả hàng thẳng
   nhau — chỗ trống thành khoảng thở, không còn là lỗi. */
.bcard__meta {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 14px 0 0;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--edge-2);
	font-size: 12.5px;
	color: var(--gray-2);
	font-variant-numeric: tabular-nums;
}
/* --edge là màu đường viền, dùng cho chữ thì tương phản chỉ 1,26 — nhìn như
   mất hẳn dấu ngăn cách. Dùng luôn màu của dòng meta. */
.bcard__dot { color: currentColor; opacity: .45; }

.bcard__go {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 10px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--purple);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .2s, transform .2s;
}
.bcard__go .ico { width: 14px; height: 14px; }
.bcard:hover .bcard__go { opacity: 1; transform: none; }

/* Toàn thẻ bấm được, nhưng vẫn giữ đúng một liên kết cho trình đọc màn hình */
.bcard__link { position: absolute; inset: 0; border-radius: inherit; }
.bcard__link:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }

/* Bài dẫn đầu */
.bcard--lead { grid-column: 1 / -1; }
/* Bị bộ lọc ẩn thì thôi chiếm cả hàng, tránh để lại khoảng trống ở hàng đầu */
.bcard--lead-off { grid-column: auto; }

@media (min-width: 860px) {
	.bcard--lead {
		flex-direction: row;
		align-items: stretch;
		gap: 24px;
		padding: 22px 24px 20px;
	}
	/*
	 * Khung ảnh cao bằng đúng cột chữ bên cạnh, ảnh phủ tuyệt đối bên trong.
	 *
	 * Bản trước đặt height:100% cho ảnh trong một khung cao tự động — phần trăm
	 * không có gì để quy chiếu nên trình duyệt rơi về chiều cao gốc của ảnh, và
	 * một tấm ảnh dọc kéo cả thẻ cao gần tám trăm pixel.
	 */
	.bcard--lead .bcard__media {
		position: relative;
		flex: 0 0 40%;
		margin: -22px 0 -20px -24px;
		border-radius: 16px 0 0 16px;
	}
	.bcard--lead .bcard__media img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
	}
	/* Cột chữ giữ đủ cao để ảnh bên cạnh không thành một dải mỏng khi bài có
	   tiêu đề ngắn */
	.bcard--lead .bcard__body { min-height: 230px; }
	.bcard--lead .bcard__title { font-size: clamp(19px, 2.1vw, 24px); line-height: 1.3; }
	.bcard--lead .bcard__excerpt { font-size: 15.5px; }
	.bcard--lead .bcard__go { position: absolute; right: 24px; bottom: 20px; margin: 0; }
}

.bgrid__empty {
	margin: 22px 0 0;
	padding: 26px;
	background: var(--c-soft);
	border-radius: 14px;
	text-align: center;
	font-size: 15px;
	color: var(--gray-2);
}

/* --------------------------------------------------------------------------
   Không có bài nào
   -------------------------------------------------------------------------- */
.bempty {
	max-width: 520px;
	margin: 20px auto 0;
	padding: clamp(28px, 4vw, 44px) 24px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 18px;
	text-align: center;
}
.bempty__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 14px;
	border-radius: 15px;
	background: var(--c-soft);
	color: var(--purple);
}
.bempty__icon .ico { width: 24px; height: 24px; }
.bempty h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--ink); }
.bempty p { margin: 8px 0 0; font-size: 15px; color: var(--gray); line-height: 1.6; }
.bempty__form { max-width: 340px; margin: 18px auto 0; }

/* --------------------------------------------------------------------------
   Dải sản phẩm cuối trang — thay cột widget mặc định
   -------------------------------------------------------------------------- */
.bprod {
	margin-top: clamp(38px, 5vw, 58px);
	padding-top: clamp(28px, 3.6vw, 40px);
	border-top: 1px solid var(--edge-2);
}

.bprod__title {
	margin: 0;
	font-size: clamp(20px, 2.3vw, 26px);
	font-weight: 800;
	color: var(--ink);
	letter-spacing: -.2px;
}
.bprod__lead { margin: 6px 0 0; font-size: 15px; color: var(--gray); }

.bprod__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 14px;
	margin-top: 20px;
}

.bprodcard {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 16px 15px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 14px;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}
.bprodcard:hover {
	border-color: var(--c-brand-200);
	box-shadow: 0 12px 26px -20px rgba(6, 35, 31, .5);
	transform: translateY(-2px);
}

.bprodcard__icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 11px;
	background: var(--purple-50);
	color: var(--purple);
	transition: transform .3s;
}
.bprodcard:hover .bprodcard__icon { transform: rotate(-6deg) scale(1.05); }
.bprodcard__icon .ico { width: 19px; height: 19px; }

.bprodcard__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.bprodcard__name { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.bprodcard__desc { font-size: 13.5px; color: var(--gray); line-height: 1.5; }
.bprodcard__count { margin-top: 3px; font-size: 12.5px; font-weight: 700; color: var(--green-dark); }

.bprodcard__go { flex: none; margin-top: 9px; color: var(--gray-2); transition: transform .2s; }
.bprodcard__go .ico { width: 15px; height: 15px; }
.bprodcard:hover .bprodcard__go { transform: translateX(3px); color: var(--purple); }

/* --------------------------------------------------------------------------
   Đáp ứng màn hình
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.barc__head { align-items: flex-start; }
	.barc__stats { width: 100%; }
	.bcard { padding: 16px 16px 14px; }
	.bcard__media { margin: -16px -16px 12px; }

	/*
	 * .facetbar là lưới 150px + phần còn lại, hợp với màn hình rộng. Ở điện
	 * thoại cột nhãn ăn gần nửa bề ngang nên chip bị ép thành một cột lệch phải.
	 * Xếp nhãn lên trên, chip trải hết chiều ngang.
	 */
	.barc__filter .facetbar { grid-template-columns: 1fr; gap: 8px; }
	.barc__filter .chips { justify-content: flex-start; }
}