/**
 * Section Banner — Danh sách tin tức (category archive)
 * Node Figma: 2513:18462 (Banner) — 1600×534.
 * BEM scoped. rem = figma_px / 16. NO gap / NO aspect-ratio / NO px (trừ 1px) / NO background-image.
 */

.section-banner {
	/* ── Tokens scoped (variables.css chưa định nghĩa token global) ── */
	--section-banner-crumb-inactive: rgba(255, 255, 255, 0.7);
	--section-banner-overlay: linear-gradient(
		180deg,
		rgba(23, 84, 146, 0) 0%,
		rgba(23, 84, 146, 0.723) 38%,
		#175492 100%
	);

	position: relative;
	width: 100%;
	height: 33.375rem;
	overflow: hidden;
	background-color: #000000;
}

/* Nền: ảnh banner full-bleed (thẻ <img>, KHÔNG background-image). */
.section-banner__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}

/* Gradient tối đáy để chữ nổi (Container Background 2513:18475, opacity 0.8). */
.section-banner__overlay {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 20.8548rem;
	background: var(--section-banner-overlay);
	opacity: 0.8;
	z-index: 1;
	pointer-events: none;
}

/* Container nội dung bám đáy banner (2513:18476 — padding 3.5rem 6.25rem). */
.section-banner__container {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 3.5rem 6.25rem;
}

.section-banner__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

.section-banner__inner > * {
	margin: 0;
}

/* Khoảng cách Breadcrumb → Heading (Product container 2513:18477 child_margin_top). */
.section-banner__inner > * + * {
	margin-top: 1.25rem;
}

/* ── Breadcrumb (2513:18478) ── */
.section-banner__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.section-banner__breadcrumb > * + * {
	margin-left: 0.4375rem;
}

.section-banner__crumb {
	font-family: "Nunito Sans", sans-serif;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.75rem;
	letter-spacing: -0.0156rem;
	color: var(--section-banner-crumb-inactive);
	text-decoration: none;
	transition: color 0.2s ease;
}

a.section-banner__crumb:hover,
a.section-banner__crumb:focus-visible {
	color: #ffffff;
}

.section-banner__crumb--current {
	color: #ffffff;
}

/* Chấm ngăn cách (Rectangle 34627954 — 0.1945rem, fill #fff). */
.section-banner__crumb-sep {
	flex: 0 0 auto;
	width: 0.1945rem;
	height: 0.1945rem;
	background-color: #ffffff;
}

/* ── Tiêu đề H1 (2513:18484 — Nunito Sans 52/800 lh64) ── */
.section-banner__title {
	font-family: "Nunito Sans", sans-serif;
	font-size: 3.25rem;
	font-weight: 800;
	line-height: 4rem;
	letter-spacing: -0.0938rem;
	color: #ffffff;
}

/* ─────────────────────────────────────────────────────────────
 * Mobile (≤639.98px) — chưa có frame mobile trong run này;
 * giá trị suy từ desktop + banner mobile chi-tiet-tin-tuc [conf: thấp].
 * ───────────────────────────────────────────────────────────── */
@media screen and (max-width: 639.98px) {
	.section-banner {
		height: auto;
		min-height: 27.625rem;
	}

	.section-banner__overlay {
		height: 75%;
	}

	.section-banner__container {
		padding: 1.5rem 1rem;
	}

	.section-banner__inner > * + * {
		margin-top: 0.75rem;
	}

	.section-banner__crumb {
		font-size: 0.75rem;
		line-height: 1.375rem;
	}

	.section-banner__title {
		font-size: 2.125rem;
		line-height: 1.1765;
		letter-spacing: -0.0625rem;
	}
}