/* ===================================================================
 * .feature-banner — Features page top banner (Round 5)
 *
 * Figma: 5322:38392 (desktop) / 5040:3979 (mobile)
 * Tokens: assets/css/global.css (Round11 design system)
 *
 * Map (Figma → token):
 *   --1st-bg                 → var(--color-1st-bg)
 *   --1st-fg                 → var(--color-1st-fg)
 *   --stroke                 → var(--color-stroke)
 *   --1st-btn-bg / -fg       → var(--color-1st-btn-bg|fg)
 *   --2nd-btn-bg / -fg       → var(--color-2nd-btn-bg|fg)
 *   --semantic-shopify-bg/fg → var(--color-semantic-shopify-bg|fg)
 *   --h1                     → var(--fs-h1)      (58px → 32px ≤1024)
 *   --label-md               → var(--fs-label-md)(14px → 12px ≤1024)
 *   --var-N (px scale)       → var(--var-N)
 *   --section-horizontal-padding (32 → 20 ≤1024)
 * =================================================================== */
.feature-banner {
	position: relative;
	background-color: var(--color-1st-bg);
	color: var(--color-1st-fg);
	padding-top: var(--space-section-sm);
	font-family: var(--font-body);
}

.feature-banner__container {
	display: flex;
	flex-direction: column;
	gap: var(--var-28);
	align-items: flex-start;
}

.feature-banner__intro {
	display: flex;
	flex-direction: column;
	gap: var(--var-12);
	align-items: flex-start;
	width: 100%;
}

/* === Badges row === */
.feature-banner__badges {
	display: flex;
	align-items: center;
	gap: var(--var-6);
	flex-wrap: wrap;
}

.feature-banner__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--var-4);
	font-size: var(--fs-label-md);
	font-weight: 500;
	line-height: 1;
}

.feature-banner__badge--bfs {
	background-color: var(--color-semantic-shopify-bg);
	color: var(--color-semantic-shopify-fg);
	padding: var(--var-4);
}

.feature-banner__badge--rating {
	color: var(--color-1st-fg);
}

.feature-banner__badge-icon {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
}

.feature-banner__badge-divider {
	display: inline-block;
	width: 1px;
	height: 12px;
	background-color: var(--color-stroke);
}

/* === Heading === */
.feature-banner__heading {
	margin: 0;
	max-width: 800px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fs-h1);
	line-height: 1.15;
	color: var(--color-1st-fg);
}

/* === Buttons === */
.feature-banner__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--var-12);
	align-items: center;
}

.feature-banner__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--var-14) var(--var-28);
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: var(--fs-label-md);
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity .2s ease, background-color .2s ease;
}

.feature-banner__btn--primary {
	background-color: var(--color-1st-btn-bg);
	color: var(--color-1st-btn-fg);
	border: 1px solid var(--color-1st-btn-bg);
}

.feature-banner__btn--primary:hover {
	opacity: .88;
}

.feature-banner__btn--secondary {
	background-color: var(--color-2nd-btn-bg);
	color: var(--color-2nd-btn-fg);
	border: 1px solid var(--color-stroke);
}

.feature-banner__btn--secondary:hover {
	background-color: var(--color-1st-bg);
}

/* === Desktop (≥1024px): mở rộng padding-top theo Figma (--space-section-lg + header offset) === */
@media (min-width: 1024px) {
	.feature-banner {
		padding-top: calc(var(--space-section-lg) + 98px);
	}
}