/* ═══ BLOG ARCHIVE — LAYOUT 2 (editorial list, from code_2.html) ═══════ */

/* ── Main wrapper ───────────────────────────────────────────────────── */
.bess-archive-2 {
	background: var(--color-bg);
	min-height: 60vh;
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.bess2-hero {
	padding: 48px 0 32px;
}

.bess2-hero__inner {
	max-width: var(--site-max-width);
	margin: 0 auto;
	padding: 0 var(--site-padding-x);
}

.bess2-hero__title {
	font-size: 60px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: var(--color-neutral-900);
	margin: 0 0 16px;
}

.bess2-hero__desc {
	font-size: 20px;
	color: var(--color-neutral-600);
	max-width: 640px;
	line-height: 1.6;
	margin: 0 0 20px;
}

.bess2-hero__desc p {
	margin: 0 0 0.5em;
}

.bess2-hero__desc p:last-child {
	margin-bottom: 0;
}

.bess2-hero__follow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-neutral-600);
	padding: 0;
	transition: color 0.2s;
}

.bess2-hero__follow:hover {
	color: var(--color-neutral-900);
}

.bess2-hero__follow .material-symbols-outlined {
	font-size: 18px;
}

/* ── Related Topics ─────────────────────────────────────────────── */
.bess2-related-topics {
	padding: 12px 0 20px;
}

.bess2-related-topics__inner {
	max-width: var(--site-max-width);
	margin: 0 auto;
	padding: 0 var(--site-padding-x);
	font-size: 13px;
	color: var(--color-neutral-600);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

.bess2-related-topics__label {
	font-weight: 700;
	color: var(--color-neutral-900);
	margin-right: 4px;
}

.bess2-related-topics__link {
	color: var(--color-primary);
	text-decoration: none;
	padding: 0 4px;
	transition: text-decoration 0.15s;
}

.bess2-related-topics__link:hover {
	text-decoration: underline;
}

.bess2-related-topics__sep {
	color: var(--color-neutral-400);
	user-select: none;
}

/* ── Tab Bar ────────────────────────────────────────────────────── */
.bess2-tabs {
	background: #fafafa;
	border-bottom: 1px solid var(--color-border);
	margin-bottom: 0;
}

.bess2-tabs__inner {
	max-width: var(--site-max-width);
	margin: 0 auto;
	padding: 0 var(--site-padding-x);
	display: flex;
	height: 48px;
}

.bess2-tab {
	padding: 0 48px;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-neutral-400);
	transition: color 0.2s, background 0.2s;
	white-space: nowrap;
}

.bess2-tab--active {
	color: var(--color-primary);
	border-bottom-color: var(--color-primary);
	background: #fff;
}

.bess2-tab:not(.bess2-tab--active):hover {
	color: var(--color-neutral-600);
	background: var(--color-neutral-100);
}

/* ── Article List ───────────────────────────────────────────────── */
.bess2-list {
	border-top: 1px solid var(--color-border);
}

.bess2-list__inner {
	max-width: var(--site-max-width);
	margin: 0 auto;
	padding: 0 var(--site-padding-x);
}

/* Article row — horizontal: text left, thumb right */
.bess2-article {
	display: flex;
	flex-direction: row;
	gap: 32px;
	padding: 40px 0;
	border-bottom: 1px solid var(--color-border);
	align-items: flex-start;
}

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

/* Category + author line */
.bess2-article__meta-top {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 12px;
}

.bess2-article__cat {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-primary);
	text-decoration: none;
}

.bess2-article__cat:hover {
	text-decoration: underline;
}

.bess2-article__author-label {
	font-size: 11px;
	font-weight: 400;
	font-style: italic;
	color: var(--color-text-subtle);
}

/* Title */
.bess2-article__title {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin: 0 0 12px;
}

.bess2-article__title a {
	color: var(--color-neutral-900);
	text-decoration: none;
	transition: color 0.2s;
}

.bess2-article__title a:hover {
	color: var(--color-primary);
}

/* Excerpt */
.bess2-article__excerpt {
	font-size: 15px;
	line-height: 1.65;
	color: var(--color-neutral-600);
	margin: 0 0 24px;
	flex: 1;
}

/* Actions bar: Lưu | Chia sẻ */
.bess2-article__actions {
	display: flex;
	align-items: center;
	gap: 24px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-neutral-600);
}

.bess2-article__action-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-neutral-600);
	text-decoration: none;
	padding: 0;
	transition: color 0.2s;
}

.bess2-article__action-btn:hover {
	color: var(--color-neutral-900);
}

.bess2-article__action-btn .material-symbols-outlined {
	font-size: 16px;
}

/* Thumbnail — right, 25% row width; ảnh cắt tỷ lê OG 1200:630 (code_2) */
.bess2-article__thumb {
	flex-shrink: 0;
	width: 25%;
	min-width: 0;
	height: auto;
	aspect-ratio: var(--bess-image-aspect-w) / var(--bess-image-aspect-h);
	overflow: hidden;
	background: var(--color-neutral-100);
	display: block;
	align-self: flex-start;
}

.bess2-article__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s;
}

.bess2-article:hover .bess2-article__img {
	transform: scale(1.04);
}

/* ── Load More button ───────────────────────────────────────────── */
.bess2-loadmore {
	padding: 48px 0;
	display: flex;
	justify-content: center;
}

.bess2-loadmore a {
	display: inline-block;
	border: 2px solid var(--color-primary);
	color: var(--color-primary);
	padding: 12px 48px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.bess2-loadmore a:hover {
	background: var(--color-primary);
	color: var(--color-on-primary);
}

.bess2-no-posts {
	padding: 64px 0;
	font-size: 16px;
	color: var(--color-neutral-400);
}

/* ── Explore More Topics ────────────────────────────────────────── */
.bess2-explore {
	border-top: 1px solid var(--color-border);
	padding: 64px 0 48px;
}

.bess2-explore__inner {
	max-width: var(--site-max-width);
	margin: 0 auto;
	padding: 0 var(--site-padding-x);
}

.bess2-explore__title {
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-neutral-900);
	margin: 0 0 40px;
}

.bess2-explore__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 32px;
	row-gap: 0;
}

.bess2-explore-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid var(--color-border-light);
	text-decoration: none;
	transition: border-color 0.2s;
}

.bess2-explore-item:hover {
	border-bottom-color: var(--color-primary);
}

.bess2-explore-item__name {
	font-size: 14px;
	font-weight: 500;
	color: var(--color-neutral-600);
	transition: color 0.2s;
}

.bess2-explore-item:hover .bess2-explore-item__name {
	color: var(--color-neutral-900);
}

.bess2-explore-item__count {
	font-size: 12px;
	font-weight: 700;
	color: var(--color-neutral-400);
	transition: color 0.2s;
}

.bess2-explore-item:hover .bess2-explore-item__count {
	color: var(--color-primary);
}

/* ── Responsive ─────────────────────────────────────────────────── */

/* Tablet: 768–1024px */
@media (max-width: 1024px) {
	.bess2-hero__title {
		font-size: 48px;
	}
	.bess2-article__thumb {
		width: 25%;
		aspect-ratio: var(--bess-image-aspect-w) / var(--bess-image-aspect-h);
		height: auto;
	}
	.bess2-explore__grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.bess2-tab {
		padding: 0 32px;
	}
}

/* Mobile: < 768px (Elementor bp-md) */
@media (max-width: 767px) {
	.bess2-hero {
		padding: 32px 0 24px;
	}
	.bess2-hero__title {
		font-size: 32px;
	}
	.bess2-hero__desc {
		font-size: 16px;
	}

	/* Tabs scroll horizontally */
	.bess2-tabs__inner {
		overflow-x: auto;
		scrollbar-width: none;
	}
	.bess2-tabs__inner::-webkit-scrollbar {
		display: none;
	}
	.bess2-tab {
		padding: 0 20px;
		flex-shrink: 0;
	}

	/* Article: stack vertical on mobile */
	.bess2-article {
		flex-direction: column-reverse;
		gap: 16px;
		padding: 28px 0;
	}
	.bess2-article__thumb {
		width: 100%;
		max-width: 100%;
		height: auto;
		aspect-ratio: var(--bess-image-aspect-w) / var(--bess-image-aspect-h);
	}
	.bess2-article__title {
		font-size: 20px;
	}
	.bess2-article__actions {
		flex-wrap: wrap;
		gap: 16px;
	}

	/* Explore: 2 cols on mobile */
	.bess2-explore__grid {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 16px;
	}
	.bess2-explore {
		padding: 40px 0 32px;
	}
}