@charset "UTF-8";
/* ==========================================================================
   Sản phẩm trong bài viết
   ==========================================================================

   Hai khối, hai vai trò khác hẳn nhau, nên cố ý vẽ khác hẳn nhau:

   .pstar — sản phẩm nổi bật, nằm ở cột mục lục và dính theo màn hình suốt lúc
   đọc. Nền tối, là mảng tối duy nhất trong vùng đọc, nên mắt bắt được ngay cả
   khi đang đọc dở. Chỉ có một khối như vậy trên trang.

   .pprods — lưới nằm giữa dòng chảy bài viết. Ở đây thì ngược lại: phải đủ nhẹ
   để không cắt mạch đọc. Nền trắng, viền mảnh, không bóng đổ, chữ cùng cỡ với
   bài. Nó là chỗ dừng chân, không phải quảng cáo chen ngang.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   Sản phẩm nổi bật ở cột mục lục
   ========================================================================== */

.pstar {
	margin-top: 14px;
	padding: 18px 18px 16px;
	color: var(--c-white);
	background: linear-gradient(160deg, var(--c-night-800) 0%, var(--c-night-900) 100%);
	border-radius: 14px;
	/* Vệt màu của loại sản phẩm, đủ để nhận ra nhóm mà không phá nền tối. */
	box-shadow: inset 0 3px 0 0 var(--accent, var(--c-brand-500));
}

.pstar__label {
	display: flex;
	gap: 6px;
	align-items: center;
	margin: 0 0 12px;
	color: var(--c-warm-400);
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: .5px;
	text-transform: uppercase;
}

.pstar__label svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	stroke: none;
}

.pstar__type {
	margin: 0 0 6px;
	color: rgba(255, 255, 255, .62);
	font-size: 11.5px;
	letter-spacing: .3px;
	text-transform: uppercase;
}

.pstar__name {
	margin: 0 0 8px;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.35;
}

.pstar__name a {
	color: var(--c-white);
	text-decoration: none;
}

.pstar__name a:hover {
	text-decoration: underline;
}

.pstar__sum {
	margin: 0 0 14px;
	color: rgba(255, 255, 255, .74);
	font-size: 13px;
	line-height: 1.6;
}

.pstar__specs {
	margin: 0 0 16px;
	padding-top: 12px;
	border-top: 1px solid var(--c-night-line);
}

.pstar__spec {
	display: flex;
	gap: 10px;
	align-items: baseline;
	justify-content: space-between;
	padding: 4px 0;
}

.pstar__spec dt {
	color: rgba(255, 255, 255, .62);
	font-size: 12.5px;
}

.pstar__spec dd {
	margin: 0;
	color: var(--c-white);
	font-weight: 700;
	font-size: 12.5px;
	text-align: right;
}

/* Nút đặc, màu hành động — thứ sáng nhất trong khối tối. */
.pstar__cta {
	display: flex;
	gap: 4px;
	align-items: center;
	justify-content: center;
	padding: 11px 14px;
	color: var(--c-white);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	background: var(--c-act-700);
	border-radius: 10px;
	transition: background-color .18s ease, transform .18s ease;
}

.pstar__cta:hover {
	background: var(--c-act-800);
	transform: translateY(-1px);
}

.pstar__cta svg {
	width: 15px;
	height: 15px;
}

.pstar__note {
	margin: 10px 0 0;
	color: rgba(255, 255, 255, .5);
	font-size: 11.5px;
	line-height: 1.5;
	text-align: center;
}

/* ==========================================================================
   Lưới sản phẩm giữa bài
   ========================================================================== */

.pprods {
	margin: 34px 0;
	padding: 20px 20px 18px;
	background: var(--c-soft);
	border: 1px solid var(--c-line);
	border-radius: 14px;
}

.pprods__label {
	margin: 0 0 14px;
	color: var(--c-muted);
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: .5px;
	text-transform: uppercase;
}

.pprods__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pprod {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 14px 15px 13px;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-left: 3px solid var(--accent, var(--c-brand-600));
	border-radius: 10px;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.pprod:hover {
	box-shadow: 0 6px 18px rgba(21, 26, 36, .08);
}

.pprod__tag {
	margin-bottom: 6px;
	color: var(--accent, var(--c-brand-600));
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: .4px;
	text-transform: uppercase;
}

.pprod__name {
	margin: 0 0 10px;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.4;
}

.pprod__name a {
	color: var(--c-ink);
	text-decoration: none;
}

/* Cả thẻ bấm được, vùng bấm vẫn là một liên kết thật. */
.pprod__name a::after {
	position: absolute;
	inset: 0;
	border-radius: 10px;
	content: "";
}

.pprod:hover .pprod__name a {
	color: var(--c-brand-600);
}

.pprod__specs {
	margin: 0 0 10px;
}

.pprod__spec {
	display: flex;
	gap: 8px;
	align-items: baseline;
	justify-content: space-between;
	padding: 3px 0;
}

.pprod__spec dt {
	color: var(--c-muted);
	font-size: 12px;
}

.pprod__spec dd {
	margin: 0;
	color: var(--c-ink);
	font-weight: 600;
	font-size: 12px;
	text-align: right;
}

.pprod__cta {
	display: inline-flex;
	gap: 5px;
	align-items: center;
	margin-top: auto;
	color: var(--c-act-700);
	font-weight: 700;
	font-size: 13px;
}

.pprod__cta svg {
	width: 14px;
	height: 14px;
	transition: transform .18s ease;
}

.pprod:hover .pprod__cta svg {
	transform: translateX(3px);
}

@media (max-width: 640px) {
	.pprods {
		margin: 26px 0;
		padding: 16px;
	}

	.pprods__grid {
		grid-template-columns: 1fr;
	}
}

/* --- Biến thể nằm ngang, dùng khi bài không có cột mục lục -------------- */

/* Ở bản cột, lớp bọc này trong suốt — nó chỉ tồn tại để bản ngang có hai ô. */
.pstar__body {
	display: contents;
}

@media (min-width: 720px) {
	.pstar--wide .pstar__body {
		display: block;
	}
}

@media (min-width: 720px) {
	.pstar--wide {
		display: grid;
		grid-template-columns: 1fr minmax(180px, 220px);
		gap: 20px;
		align-items: center;
		margin: 0 0 26px;
	}

	.pstar--wide .pstar__label {
		grid-column: 1 / -1;
		margin-bottom: 4px;
	}

	.pstar--wide .pstar__specs {
		margin-bottom: 0;
	}

	.pstar--wide .pstar__cta {
		margin-top: 0;
	}

	.pstar--wide .pstar__note {
		grid-column: 2;
		margin-top: 8px;
	}
}

.pstar--wide {
	margin-bottom: 26px;
}