@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(37, 71, 176, .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(13, 22, 48, .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); }

.bcard__excerpt {
	margin: 8px 0 0;
	font-size: 14.5px;
	color: var(--gray);
	line-height: 1.62;
}

.bcard__meta {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 14px 0 0;
	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;
	}
	.bcard--lead .bcard__media {
		flex: 0 0 40%;
		margin: -22px 0 -20px -24px;
		border-radius: 16px 0 0 16px;
	}
	.bcard--lead .bcard__media img { height: 100%; aspect-ratio: auto; }
	.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(13, 22, 48, .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; }
}