/**
 * SMT Landing — style front-end.
 *
 * Viết tay từ bản Tailwind của file HTML gốc, không phụ thuộc CDN.
 * Quy ước đặt tên: BEM với tiền tố smt-.
 * Breakpoint giữ nguyên theo Tailwind: 640 / 768 / 1024 / 1280px.
 */

/* =========================================================================
   1. Design token
   ========================================================================= */

:root {
	--smt-orange: #ff6600;
	--smt-orange-rgb: 255, 102, 0;
	--smt-orange-dark: #e05500;
	--smt-orange-light: #ffa800;

	--smt-dark: #0b0f17;
	--smt-dark-rgb: 11, 15, 23;
	--smt-card: #151c28;
	--smt-card-rgb: 21, 28, 40;
	--smt-border: #2a3548;
	--smt-border-rgb: 42, 53, 72;

	--smt-accent: #00f0ff;
	--smt-accent-rgb: 0, 240, 255;

	--smt-white: #ffffff;
	--smt-text: #e2e8f0;
	--smt-text-strong: #ffffff;
	--smt-text-soft: #cbd5e1;
	--smt-muted: #94a3b8;
	--smt-muted-dark: #64748b;

	--smt-radius-sm: 0.375rem;
	--smt-radius: 0.5rem;
	--smt-radius-md: 0.75rem;
	--smt-radius-lg: 1rem;
	--smt-radius-xl: 1.5rem;
	--smt-radius-full: 9999px;

	--smt-maxw: 80rem;
	--smt-maxw-narrow: 64rem;
	--smt-maxw-tight: 56rem;
	--smt-maxw-prose: 48rem;

	--smt-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	--smt-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	--smt-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	--smt-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

	--smt-font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

	--smt-transition: 0.2s ease;
}

/* Bảng màu nhấn dùng chung cho card, badge, icon. */
.smt-accent--orange {
	--smt-a: #ff6600;
	--smt-a-rgb: 255, 102, 0;
	--smt-a-light: #ff8534;
	--smt-a-ink: #ffffff;
}

.smt-accent--cyan {
	--smt-a: #00f0ff;
	--smt-a-rgb: 0, 240, 255;
	--smt-a-light: #00f0ff;
	--smt-a-ink: #0b0f17;
}

.smt-accent--emerald {
	--smt-a: #10b981;
	--smt-a-rgb: 16, 185, 129;
	--smt-a-light: #34d399;
	--smt-a-ink: #ffffff;
}

.smt-accent--purple {
	--smt-a: #a855f7;
	--smt-a-rgb: 168, 85, 247;
	--smt-a-light: #c084fc;
	--smt-a-ink: #ffffff;
}

.smt-accent--amber {
	--smt-a: #f59e0b;
	--smt-a-rgb: 245, 158, 11;
	--smt-a-light: #fbbf24;
	--smt-a-ink: #ffffff;
}

.smt-accent--red {
	--smt-a: #ef4444;
	--smt-a-rgb: 239, 68, 68;
	--smt-a-light: #f87171;
	--smt-a-ink: #ffffff;
}

.smt-accent--blue {
	--smt-a: #3b82f6;
	--smt-a-rgb: 59, 130, 246;
	--smt-a-light: #60a5fa;
	--smt-a-ink: #ffffff;
}

/* =========================================================================
   2. Base
   ========================================================================= */

body.smt-landing {
	margin: 0;
	background-color: var(--smt-dark);
	color: var(--smt-text);
	font-family: var(--smt-font);
	font-size: 1rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.smt-landing ::selection {
	background-color: var(--smt-orange);
	color: var(--smt-white);
}

.smt-landing img {
	max-width: 100%;
	height: auto;
}

.smt-landing a {
	color: inherit;
	text-decoration: none;
}

.smt-landing p {
	margin: 0;
}

.smt-landing h1,
.smt-landing h2,
.smt-landing h3,
.smt-landing h4,
.smt-landing h5 {
	margin: 0;
	font-weight: 800;
	color: var(--smt-text-strong);
	line-height: 1.2;
}

.smt-landing ul,
.smt-landing ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.smt-landing button {
	font-family: inherit;
}

html:has(body.smt-landing) {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html:has(body.smt-landing) {
		scroll-behavior: auto;
	}
}

/* Bù chiều cao thanh nav dính khi nhảy tới anchor. */
.smt-landing [id] {
	scroll-margin-top: 6rem;
}

.smt-skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 100;
	width: auto;
	height: auto;
	clip: auto;
	padding: 0.75rem 1.25rem;
	background: var(--smt-orange);
	color: var(--smt-white);
	border-radius: var(--smt-radius-md);
	font-weight: 700;
}

/* =========================================================================
   3. Tiện ích dùng chung
   ========================================================================= */

.smt-container {
	width: 100%;
	max-width: var(--smt-maxw);
	margin-inline: auto;
	padding-inline: 1rem;
}

.smt-container--narrow {
	max-width: var(--smt-maxw-narrow);
}

.smt-container--tight {
	max-width: var(--smt-maxw-tight);
}

@media (min-width: 640px) {
	.smt-container {
		padding-inline: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.smt-container {
		padding-inline: 2rem;
	}
}

.smt-section {
	position: relative;
	padding-block: 5rem;
}

.smt-section--alt {
	background-color: rgba(var(--smt-card-rgb), 0.3);
	border-top: 1px solid var(--smt-border);
}

.smt-section--alt-strong {
	background-color: rgba(var(--smt-card-rgb), 0.4);
	border-block: 1px solid rgba(var(--smt-border-rgb), 0.8);
}

.smt-section--bordered {
	border-top: 1px solid rgba(var(--smt-border-rgb), 0.8);
}

.smt-tech-grid {
	background-image: radial-gradient(rgba(var(--smt-orange-rgb), 0.12) 1px, transparent 0);
	background-size: 32px 32px;
}

.smt-gradient-text {
	background: linear-gradient(135deg, var(--smt-orange) 0%, var(--smt-orange-light) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.smt-gradient-bg {
	background: linear-gradient(135deg, var(--smt-orange) 0%, #d95300 100%);
}

.smt-glow--orange {
	box-shadow: 0 0 35px -5px rgba(var(--smt-orange-rgb), 0.35);
}

.smt-glow--cyan {
	box-shadow: 0 0 35px -5px rgba(var(--smt-accent-rgb), 0.25);
}

.smt-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	fill: currentColor;
	vertical-align: -0.125em;
	flex-shrink: 0;
}

.smt-card {
	background-color: var(--smt-card);
	border: 1px solid var(--smt-border);
	border-radius: var(--smt-radius-lg);
}

/* =========================================================================
   4. Nút bấm
   ========================================================================= */

.smt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.625rem 1.25rem;
	border: 1px solid transparent;
	border-radius: var(--smt-radius-md);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
	transition: transform var(--smt-transition), filter var(--smt-transition),
		background-color var(--smt-transition), border-color var(--smt-transition),
		color var(--smt-transition), box-shadow var(--smt-transition);
}

.smt-btn:focus-visible {
	outline: 2px solid var(--smt-accent);
	outline-offset: 2px;
}

.smt-btn--primary {
	background: linear-gradient(135deg, var(--smt-orange) 0%, #d95300 100%);
	color: var(--smt-white);
	box-shadow: 0 10px 15px -3px rgba(var(--smt-orange-rgb), 0.2);
}

.smt-btn--primary:hover {
	filter: brightness(1.1);
	transform: translateY(-2px);
}

.smt-btn--ghost {
	background-color: var(--smt-card);
	border-color: var(--smt-border);
	color: var(--smt-text);
}

.smt-btn--ghost:hover {
	background-color: var(--smt-border);
}

.smt-btn--dark {
	background-color: var(--smt-dark);
	color: var(--smt-white);
	box-shadow: var(--smt-shadow-lg);
}

.smt-btn--dark:hover {
	background-color: #0f172a;
	transform: scale(1.05);
}

.smt-btn--sm {
	padding: 0.5rem 0.875rem;
	font-size: 0.75rem;
}

.smt-btn--lg {
	padding: 1rem 2rem;
	font-size: 1rem;
	border-radius: var(--smt-radius-md);
	box-shadow: 0 20px 25px -5px rgba(var(--smt-orange-rgb), 0.3);
}

.smt-btn--xl {
	padding: 1rem 1.5rem;
	font-size: 1rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.smt-btn--block {
	width: 100%;
}

@media (min-width: 640px) {
	.smt-btn--sm {
		padding: 0.625rem 1.25rem;
		font-size: 0.875rem;
	}
}

/* =========================================================================
   5. Thanh thông báo trên cùng
   ========================================================================= */

.smt-announcement {
	background: linear-gradient(to right, var(--smt-orange), #d97706, var(--smt-orange));
	color: var(--smt-white);
	padding: 0.5rem 1rem;
	text-align: center;
	font-size: 0.75rem;
	font-weight: 500;
	box-shadow: var(--smt-shadow-md);
}

.smt-announcement__badge {
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.2);
	padding: 0.125rem 0.5rem;
	margin-right: 0.5rem;
	border-radius: var(--smt-radius-full);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

/* Phần in đậm trong thông báo được tô nổi bật. */
.smt-announcement__highlight,
.smt-announcement strong,
.smt-announcement b {
	font-weight: 700;
	color: #fef08a;
	text-decoration: underline;
}

@media (min-width: 768px) {
	.smt-announcement {
		font-size: 0.875rem;
	}
}

/* =========================================================================
   6. Thanh điều hướng
   ========================================================================= */

.smt-nav {
	position: sticky;
	top: 0;
	z-index: 50;
	background-color: rgba(var(--smt-dark-rgb), 0.9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(var(--smt-border-rgb), 0.6);
}

.smt-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	height: 5rem;
}

.smt-nav__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	background-color: rgba(255, 255, 255, 0.95);
	padding: 0.375rem 0.625rem;
	border-radius: var(--smt-radius-md);
	box-shadow: var(--smt-shadow-md);
	transition: transform var(--smt-transition);
}

.smt-nav__logo:hover {
	transform: scale(1.05);
}

.smt-nav__logo-img {
	height: 2rem;
	width: auto;
	object-fit: contain;
	display: block;
}

.smt-nav__menu {
	display: none;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--smt-text-soft);
	white-space: nowrap;
}

.smt-nav__link {
	transition: color var(--smt-transition);
}

.smt-nav__link:hover,
.smt-nav__link:focus-visible {
	color: var(--smt-orange);
}

.smt-nav__cta {
	display: none;
	flex-shrink: 0;
}

.smt-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0.5rem;
	background: none;
	border: 0;
	border-radius: var(--smt-radius);
	color: var(--smt-muted);
	font-size: 1.25rem;
	cursor: pointer;
	transition: color var(--smt-transition), background-color var(--smt-transition);
}

.smt-nav__toggle:hover {
	color: var(--smt-white);
	background-color: var(--smt-card);
}

.smt-nav__mobile {
	display: none;
	flex-direction: column;
	gap: 0.75rem;
	background-color: var(--smt-card);
	border-bottom: 1px solid var(--smt-border);
	padding: 0.5rem 1rem 1.5rem;
}

.smt-nav__mobile.is-open {
	display: flex;
}

.smt-nav__mobile-link {
	display: block;
	padding: 0.5rem 0.75rem;
	border-radius: var(--smt-radius);
	font-size: 1rem;
	font-weight: 500;
	color: var(--smt-text);
	transition: background-color var(--smt-transition);
}

.smt-nav__mobile-link:hover {
	background-color: var(--smt-border);
}

@media (min-width: 640px) {
	.smt-nav__logo {
		padding-inline: 0.75rem;
	}

	.smt-nav__logo-img {
		height: 2.25rem;
	}

	.smt-nav__cta {
		display: block;
	}
}

@media (min-width: 768px) {
	.smt-nav__inner {
		gap: 1rem;
	}

	.smt-nav__logo-img {
		height: 2.5rem;
	}
}

@media (min-width: 1024px) {
	.smt-nav__logo-img {
		height: 2.75rem;
	}

	.smt-nav__menu {
		display: flex;
	}

	.smt-nav__toggle {
		display: none;
	}

	.smt-nav__mobile,
	.smt-nav__mobile.is-open {
		display: none;
	}
}

@media (min-width: 1280px) {
	.smt-nav__menu {
		gap: 1.5rem;
		font-size: 0.875rem;
	}
}

/* =========================================================================
   7. Hero
   ========================================================================= */

.smt-hero {
	position: relative;
	overflow: hidden;
	padding-block: 3rem 5rem;
}

.smt-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		transparent,
		rgba(var(--smt-dark-rgb), 0.8),
		var(--smt-dark)
	);
	pointer-events: none;
}

.smt-hero__container {
	position: relative;
	z-index: 10;
}

.smt-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: center;
}

.smt-hero__main {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	text-align: center;
}

.smt-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	align-self: center;
	gap: 0.5rem;
	padding: 0.375rem 0.875rem;
	border-radius: var(--smt-radius-full);
	background-color: rgba(var(--smt-orange-rgb), 0.1);
	border: 1px solid rgba(var(--smt-orange-rgb), 0.3);
	color: var(--smt-orange);
	font-size: 0.75rem;
	font-weight: 600;
}

.smt-hero__eyebrow-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: var(--smt-radius-full);
	background-color: var(--smt-orange);
	animation: smt-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes smt-ping {
	75%,
	100% {
		transform: scale(2);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.smt-hero__eyebrow-dot {
		animation: none;
	}
}

.smt-hero__title {
	font-size: 1.875rem;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--smt-text-strong);
}

.smt-hero__desc {
	font-size: 1rem;
	line-height: 1.625;
	color: var(--smt-text-soft);
	max-width: 42rem;
	margin-inline: auto;
}

.smt-hero__badges {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	padding-top: 0.5rem;
	text-align: left;
}

.smt-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding-top: 1rem;
}

.smt-hero__actions > .smt-btn {
	width: 100%;
}

.smt-hero__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(var(--smt-border-rgb), 0.6);
	text-align: center;
}

.smt-hero__aside {
	width: 100%;
}

@media (min-width: 640px) {
	.smt-hero__title {
		font-size: 2.25rem;
	}

	.smt-hero__desc {
		font-size: 1.125rem;
	}

	.smt-hero__eyebrow {
		font-size: 0.875rem;
	}

	.smt-hero__badges {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.smt-hero__actions {
		flex-direction: row;
	}

	.smt-hero__actions > .smt-btn {
		width: auto;
	}
}

@media (min-width: 768px) {
	.smt-hero {
		padding-block: 5rem 7rem;
	}
}

@media (min-width: 1024px) {
	.smt-hero__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.smt-hero__main {
		grid-column: span 7 / span 7;
		text-align: left;
	}

	.smt-hero__main .smt-hero__eyebrow {
		align-self: flex-start;
	}

	.smt-hero__desc {
		margin-inline: 0;
	}

	.smt-hero__actions {
		justify-content: flex-start;
	}

	.smt-hero__stats {
		text-align: left;
	}

	.smt-hero__aside {
		grid-column: span 5 / span 5;
	}

	.smt-hero__title {
		font-size: 3rem;
	}
}

/* Badge trong hero */
.smt-hero-badge {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem;
	background-color: rgba(var(--smt-card-rgb), 0.8);
	border: 1px solid var(--smt-border);
	border-radius: var(--smt-radius-md);
}

.smt-hero-badge__icon {
	font-size: 1.125rem;
	color: var(--smt-a, var(--smt-orange));
	display: inline-flex;
}

.smt-hero-badge__text {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--smt-text);
}

.smt-hero-badge--wide {
	grid-column: span 2 / span 2;
}

@media (min-width: 640px) {
	.smt-hero-badge__text {
		font-size: 0.875rem;
	}

	.smt-hero-badge--wide {
		grid-column: span 1 / span 1;
	}
}

/* Số liệu trong hero */
.smt-hero-stat__value {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--smt-a, var(--smt-text-strong));
	line-height: 1.2;
}

.smt-hero-stat__label {
	font-size: 0.75rem;
	color: var(--smt-muted);
}

@media (min-width: 640px) {
	.smt-hero-stat__value {
		font-size: 1.875rem;
	}
}

/* =========================================================================
   8. Card form nhanh + đếm ngược
   ========================================================================= */

.smt-lead-form {
	position: relative;
	background-color: var(--smt-card);
	border: 1px solid var(--smt-border);
	border-radius: var(--smt-radius-xl);
	padding: 1.5rem;
	box-shadow: var(--smt-shadow-2xl), 0 0 35px -5px rgba(var(--smt-orange-rgb), 0.35);
}

.smt-lead-form__ribbon {
	position: absolute;
	top: -0.75rem;
	right: 1.5rem;
	background-color: var(--smt-orange);
	color: var(--smt-white);
	padding: 0.25rem 0.75rem;
	border-radius: var(--smt-radius-sm);
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	box-shadow: var(--smt-shadow-md);
}

.smt-lead-form__title {
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.smt-lead-form__subtitle {
	font-size: 0.75rem;
	color: var(--smt-muted);
	margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
	.smt-lead-form {
		padding: 2rem;
	}
}

.smt-countdown {
	background-color: rgba(var(--smt-dark-rgb), 0.9);
	border: 1px solid rgba(var(--smt-border-rgb), 0.8);
	border-radius: var(--smt-radius-md);
	padding: 1rem;
	margin-bottom: 1.5rem;
}

.smt-countdown__label {
	font-size: 0.75rem;
	text-align: center;
	color: var(--smt-muted);
	margin-bottom: 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	font-weight: 600;
}

.smt-countdown__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.5rem;
	text-align: center;
}

.smt-countdown__unit {
	background-color: var(--smt-card);
	border: 1px solid var(--smt-border);
	border-radius: var(--smt-radius);
	padding: 0.5rem;
}

.smt-countdown__value {
	display: block;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--smt-orange);
	font-variant-numeric: tabular-nums;
}

.smt-countdown__name {
	font-size: 0.625rem;
	color: var(--smt-muted);
	text-transform: uppercase;
}

.smt-countdown__expired {
	display: none;
	text-align: center;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--smt-orange);
	padding: 0.5rem 0;
}

.smt-countdown.is-expired .smt-countdown__grid {
	display: none;
}

.smt-countdown.is-expired .smt-countdown__expired {
	display: block;
}

/* =========================================================================
   9. Tiêu đề section
   ========================================================================= */

.smt-heading {
	margin-bottom: 4rem;
}

.smt-heading--center {
	text-align: center;
	max-width: var(--smt-maxw-prose);
	margin-inline: auto;
}

.smt-heading--compact {
	margin-bottom: 3rem;
}

.smt-heading__eyebrow-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0.75rem;
	margin-bottom: 0.75rem;
	border-radius: var(--smt-radius-full);
	background-color: rgba(var(--smt-a-rgb, var(--smt-orange-rgb)), 0.1);
	border: 1px solid rgba(var(--smt-a-rgb, var(--smt-orange-rgb)), 0.3);
	color: var(--smt-a, var(--smt-orange));
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.smt-heading__eyebrow-plain {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.75rem;
	font-weight: 800;
	color: var(--smt-orange);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.smt-heading__title {
	font-size: 1.875rem;
	font-weight: 800;
	color: var(--smt-text-strong);
}

.smt-heading__subtitle {
	margin-top: 0.75rem;
	font-size: 0.875rem;
	color: var(--smt-muted);
}

@media (min-width: 640px) {
	.smt-heading__title {
		font-size: 2.25rem;
	}
}

/* =========================================================================
   10. Lưới tính năng
   ========================================================================= */

.smt-feature-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 768px) {
	.smt-feature-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.smt-feature-grid--cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.smt-feature-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1.5rem;
	background-color: var(--smt-card);
	border: 1px solid var(--smt-border);
	border-radius: var(--smt-radius-lg);
	transition: transform var(--smt-transition), border-color var(--smt-transition);
}

.smt-feature-card:hover {
	transform: translateY(-4px);
	border-color: var(--smt-a, var(--smt-orange));
}

.smt-feature-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: 1.25rem;
	border-radius: var(--smt-radius-lg);
	background-color: rgba(var(--smt-a-rgb), 0.2);
	border: 1px solid rgba(var(--smt-a-rgb), 0.4);
	color: var(--smt-a-light);
	font-size: 1.5rem;
	box-shadow: 0 10px 15px -3px rgba(var(--smt-a-rgb), 0.1);
	transition: transform var(--smt-transition), background-color var(--smt-transition),
		color var(--smt-transition);
}

.smt-feature-card:hover .smt-feature-card__icon {
	transform: scale(1.1);
	background-color: var(--smt-a);
	color: var(--smt-a-ink);
}

.smt-feature-card__title {
	font-size: 1.125rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.smt-feature-card__text {
	font-size: 0.75rem;
	line-height: 1.625;
	color: var(--smt-muted);
}

@media (min-width: 640px) {
	.smt-feature-card {
		padding: 2rem;
	}

	.smt-feature-card__text {
		font-size: 0.875rem;
	}
}

/* =========================================================================
   11. Đối tượng học viên
   ========================================================================= */

.smt-audience__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: center;
}

.smt-audience__left {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.smt-audience__eyebrow {
	font-size: 0.75rem;
	font-weight: 800;
	color: var(--smt-orange);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.smt-audience__title {
	font-size: 1.875rem;
	font-weight: 800;
}

.smt-audience__desc {
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--smt-text-soft);
}

.smt-audience__list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.smt-audience__panel {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	background-color: var(--smt-card);
	border: 1px solid var(--smt-border);
	border-radius: var(--smt-radius-xl);
	padding: 2rem;
}

.smt-audience__panel-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.25rem;
	font-weight: 700;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--smt-border);
}

.smt-audience__panel-title .smt-icon {
	color: var(--smt-orange);
}

.smt-outcome-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 768px) {
	.smt-outcome-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.smt-audience__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.smt-audience__left {
		grid-column: span 5 / span 5;
	}

	.smt-audience__panel {
		grid-column: span 7 / span 7;
	}
}

.smt-audience-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.smt-audience-item__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0.125rem;
	border-radius: var(--smt-radius-full);
	background-color: rgba(16, 185, 129, 0.2);
	color: #34d399;
	font-size: 0.75rem;
	font-weight: 700;
}

.smt-audience-item__title {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--smt-text-strong);
}

.smt-audience-item__text {
	font-size: 0.75rem;
	color: var(--smt-muted);
}

.smt-outcome-card {
	padding: 1rem;
	background-color: var(--smt-dark);
	border: 1px solid rgba(var(--smt-border-rgb), 0.8);
	border-radius: var(--smt-radius-md);
}

.smt-outcome-card__title {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--smt-a-light, var(--smt-orange));
	margin-bottom: 0.25rem;
}

.smt-outcome-card__text {
	font-size: 0.75rem;
	color: var(--smt-muted);
}

/* =========================================================================
   12. Lộ trình học (accordion)
   ========================================================================= */

.smt-accordion {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.smt-module {
	background-color: var(--smt-card);
	border: 1px solid var(--smt-border);
	border-radius: var(--smt-radius-lg);
	overflow: hidden;
}

.smt-module--highlight {
	border-color: rgba(var(--smt-orange-rgb), 0.4);
}

.smt-module__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1.25rem;
	background: none;
	border: 0;
	text-align: left;
	font-size: 1rem;
	font-weight: 700;
	color: var(--smt-text-strong);
	cursor: pointer;
	transition: color var(--smt-transition);
}

.smt-module__toggle:hover {
	color: var(--smt-orange);
}

.smt-module--highlight .smt-module__toggle {
	color: var(--smt-orange);
}

.smt-module--highlight .smt-module__toggle:hover {
	color: var(--smt-white);
}

.smt-module__label {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.smt-module__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	border-radius: var(--smt-radius);
	background-color: rgba(var(--smt-orange-rgb), 0.2);
	color: var(--smt-orange);
	font-size: 0.875rem;
	font-weight: 800;
}

.smt-module--highlight .smt-module__num {
	background-color: var(--smt-orange);
	color: var(--smt-white);
}

.smt-module__chevron {
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.smt-module.is-open .smt-module__chevron {
	transform: rotate(180deg);
}

.smt-module__content {
	display: none;
	padding: 1.25rem;
	border-top: 1px solid rgba(var(--smt-border-rgb), 0.6);
	background-color: rgba(var(--smt-dark-rgb), 0.5);
	font-size: 0.75rem;
	color: var(--smt-text-soft);
}

.smt-module.is-open .smt-module__content {
	display: block;
}

.smt-module__list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Mỗi đoạn văn bên trong module hiện như một gạch đầu dòng. */
.smt-module__item,
.smt-module__list > p {
	position: relative;
	margin: 0;
	padding-left: 1rem;
	line-height: 1.6;
}

.smt-module__item::before,
.smt-module__list > p::before {
	content: "•";
	position: absolute;
	left: 0;
	color: var(--smt-orange);
}

.smt-module__list a {
	color: var(--smt-orange);
	text-decoration: underline;
}

@media (min-width: 640px) {
	.smt-module__content {
		font-size: 0.875rem;
	}
}

/* =========================================================================
   13. Giảng viên
   ========================================================================= */

.smt-instructor__card {
	position: relative;
	overflow: hidden;
	background: linear-gradient(to right, var(--smt-card), var(--smt-dark), var(--smt-card));
	border: 1px solid var(--smt-border);
	border-radius: var(--smt-radius-xl);
	padding: 2rem;
	box-shadow: var(--smt-shadow-2xl);
}

.smt-instructor__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: center;
}

.smt-instructor__media {
	text-align: center;
}

.smt-instructor__photo-wrap {
	position: relative;
	display: inline-block;
}

.smt-instructor__ring {
	width: 12rem;
	height: 12rem;
	margin-inline: auto;
	padding: 0.375rem;
	border-radius: var(--smt-radius-full);
	background: linear-gradient(to top right, var(--smt-orange), var(--smt-accent));
	box-shadow: var(--smt-shadow-xl);
}

.smt-instructor__photo-inner {
	width: 100%;
	height: 100%;
	border-radius: var(--smt-radius-full);
	background-color: #1e293b;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.smt-instructor__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	display: block;
}

.smt-instructor__placeholder {
	color: var(--smt-orange);
	font-size: 3.5rem;
}

.smt-instructor__badge {
	position: absolute;
	bottom: 0.5rem;
	right: 1rem;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.75rem;
	border-radius: var(--smt-radius-full);
	background-color: #10b981;
	border: 2px solid var(--smt-dark);
	color: var(--smt-white);
	font-size: 0.75rem;
	font-weight: 700;
}

.smt-instructor__name {
	margin-top: 1rem;
	font-size: 1.25rem;
	font-weight: 800;
}

.smt-instructor__role {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--smt-orange);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.smt-instructor__info {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.smt-instructor__eyebrow {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.5rem;
	padding: 0.25rem 0.75rem;
	border-radius: var(--smt-radius);
	background-color: rgba(var(--smt-orange-rgb), 0.1);
	border: 1px solid rgba(var(--smt-orange-rgb), 0.2);
	color: var(--smt-orange);
	font-size: 0.75rem;
	font-weight: 600;
}

.smt-instructor__title {
	font-size: 1.5rem;
	font-weight: 800;
}

.smt-instructor__bio {
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--smt-text-soft);
}

.smt-instructor__credentials {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	padding-top: 0.5rem;
}

@media (min-width: 640px) {
	.smt-instructor__ring {
		width: 14rem;
		height: 14rem;
	}

	.smt-instructor__title {
		font-size: 1.875rem;
	}

	.smt-instructor__credentials {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.smt-instructor__card {
		padding: 3rem;
	}
}

@media (min-width: 1024px) {
	.smt-instructor__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.smt-instructor__media {
		grid-column: span 4 / span 4;
	}

	.smt-instructor__info {
		grid-column: span 8 / span 8;
	}
}

.smt-credential {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem;
	background-color: rgba(var(--smt-dark-rgb), 0.6);
	border: 1px solid var(--smt-border);
	border-radius: var(--smt-radius-md);
	font-size: 0.75rem;
}

.smt-credential__icon {
	font-size: 1.125rem;
	color: var(--smt-a-light, var(--smt-orange));
	display: inline-flex;
}

.smt-credential__text {
	color: var(--smt-text);
}

@media (min-width: 640px) {
	.smt-credential {
		font-size: 0.875rem;
	}
}

/* =========================================================================
   14. Đánh giá học viên
   ========================================================================= */

.smt-testimonials__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 768px) {
	.smt-testimonials__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.smt-testimonial {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 1.5rem;
	background-color: var(--smt-card);
	border: 1px solid rgba(var(--smt-border-rgb), 0.8);
	border-radius: var(--smt-radius-xl);
	box-shadow: var(--smt-shadow-xl);
	transition: transform var(--smt-transition), border-color var(--smt-transition);
}

.smt-testimonial:hover {
	transform: translateY(-4px);
	border-color: var(--smt-orange);
}

.smt-testimonial__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.smt-testimonial__stars {
	display: inline-flex;
	gap: 0.25rem;
	color: #fbbf24;
	font-size: 0.875rem;
}

.smt-testimonial__tag {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.625rem;
	border-radius: var(--smt-radius-full);
	background-color: rgba(var(--smt-a-rgb), 0.1);
	border: 1px solid rgba(var(--smt-a-rgb), 0.2);
	color: var(--smt-a-light);
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
}

.smt-testimonial__quote {
	font-size: 0.75rem;
	line-height: 1.625;
	font-style: italic;
	color: var(--smt-text-soft);
}

.smt-testimonial__author {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(var(--smt-border-rgb), 0.6);
}

.smt-testimonial__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 3rem;
	height: 3rem;
	border-radius: var(--smt-radius-full);
	background: linear-gradient(to top right, var(--smt-a), var(--smt-a-light));
	color: var(--smt-a-ink);
	font-size: 1rem;
	font-weight: 800;
	overflow: hidden;
	box-shadow: var(--smt-shadow-md);
}

.smt-testimonial__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.smt-testimonial__name {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--smt-text-strong);
}

.smt-testimonial__role {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--smt-a-light);
}

@media (min-width: 640px) {
	.smt-testimonial {
		padding: 2rem;
	}

	.smt-testimonial__quote {
		font-size: 0.875rem;
	}
}

/* =========================================================================
   15. Chỉ số tin cậy
   ========================================================================= */

.smt-metrics {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
	gap: 1.5rem;
	margin-top: 3rem;
	padding: 1.5rem;
	background-color: rgba(var(--smt-card-rgb), 0.6);
	border: 1px solid var(--smt-border);
	border-radius: var(--smt-radius-lg);
	text-align: center;
}

.smt-metric {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.smt-metric__icon {
	font-size: 1.5rem;
	color: var(--smt-a-light, var(--smt-orange));
	display: inline-flex;
}

.smt-metric__body {
	text-align: left;
}

.smt-metric__value {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--smt-text-strong);
	line-height: 1.25;
}

.smt-metric__label {
	font-size: 0.75rem;
	color: var(--smt-muted);
}

/* =========================================================================
   16. Học phí
   ========================================================================= */

.smt-pricing__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: stretch;
}

@media (min-width: 1024px) {
	.smt-pricing__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.smt-pricing__card {
		grid-column: span 5 / span 5;
	}

	.smt-pricing__form {
		grid-column: span 7 / span 7;
	}
}

.smt-pricing-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 2rem;
	background-color: var(--smt-card);
	border: 1px solid var(--smt-border);
	border-radius: var(--smt-radius-xl);
	box-shadow: var(--smt-shadow-xl);
}

.smt-pricing-card__ribbon {
	display: inline-block;
	align-self: flex-start;
	padding: 0.25rem 0.75rem;
	margin-bottom: 1rem;
	border-radius: var(--smt-radius-full);
	background-color: rgba(var(--smt-orange-rgb), 0.2);
	color: var(--smt-orange);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
}

.smt-pricing-card__title {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.smt-pricing-card__note {
	font-size: 0.75rem;
	color: var(--smt-muted);
	margin-bottom: 1.5rem;
}

.smt-pricing-card__price-box {
	padding: 1rem;
	margin-bottom: 1.5rem;
	background-color: var(--smt-dark);
	border: 1px solid var(--smt-border);
	border-radius: var(--smt-radius-lg);
}

.smt-pricing-card__price-original {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.75rem;
	color: var(--smt-muted);
	text-decoration: line-through;
}

.smt-pricing-card__price-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.smt-pricing-card__price {
	font-size: 1.875rem;
	font-weight: 800;
	color: var(--smt-orange);
}

.smt-pricing-card__currency {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--smt-text-strong);
}

.smt-pricing-card__discount {
	margin-left: 0.5rem;
	padding: 0.125rem 0.5rem;
	border-radius: var(--smt-radius-sm);
	background-color: rgba(239, 68, 68, 0.2);
	color: #f87171;
	font-size: 0.75rem;
	font-weight: 700;
}

.smt-pricing-card__features {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 2rem;
	font-size: 0.75rem;
	color: var(--smt-text-soft);
}

.smt-pricing-card__guarantee {
	padding-top: 1rem;
	border-top: 1px solid var(--smt-border);
	font-size: 0.75rem;
	color: var(--smt-muted);
	text-align: center;
}

.smt-pricing-card__guarantee .smt-icon {
	color: var(--smt-accent);
	margin-right: 0.25rem;
}

.smt-pricing-feature {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.smt-pricing-feature .smt-icon {
	color: #34d399;
	flex-shrink: 0;
}

@media (min-width: 640px) {
	.smt-pricing-card__features {
		font-size: 0.875rem;
	}
}

/* =========================================================================
   17. Form đăng ký chính
   ========================================================================= */

.smt-reg-form {
	position: relative;
	padding: 2rem;
	background-color: var(--smt-card);
	border: 1px solid var(--smt-border);
	border-radius: var(--smt-radius-xl);
	box-shadow: var(--smt-shadow-2xl), 0 0 35px -5px rgba(var(--smt-orange-rgb), 0.35);
}

.smt-reg-form__title {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.smt-reg-form__subtitle {
	font-size: 0.75rem;
	color: var(--smt-muted);
	margin-bottom: 1.5rem;
}

/* =========================================================================
   18. Trường nhập liệu (Contact Form 7)
   ========================================================================= */

.smt-form-notice {
	padding: 1rem;
	border: 1px dashed var(--smt-border);
	border-radius: var(--smt-radius-md);
	color: var(--smt-muted);
	font-size: 0.875rem;
	text-align: center;
}

.smt-field {
	margin-bottom: 1rem;
}

.smt-field__label {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--smt-text-soft);
}

.smt-field-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 640px) {
	.smt-field-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.smt-landing .smt-input,
.smt-landing .smt-textarea,
.smt-landing input[type="text"],
.smt-landing input[type="tel"],
.smt-landing input[type="email"],
.smt-landing textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	background-color: var(--smt-dark);
	border: 1px solid var(--smt-border);
	border-radius: var(--smt-radius-md);
	color: var(--smt-white);
	font-family: inherit;
	font-size: 0.875rem;
	line-height: 1.5;
	transition: border-color var(--smt-transition);
	box-sizing: border-box;
}

.smt-landing .smt-input::placeholder,
.smt-landing .smt-textarea::placeholder,
.smt-landing textarea::placeholder {
	color: var(--smt-muted-dark);
}

.smt-landing .smt-input:focus,
.smt-landing .smt-textarea:focus,
.smt-landing input[type="text"]:focus,
.smt-landing input[type="tel"]:focus,
.smt-landing input[type="email"]:focus,
.smt-landing textarea:focus {
	outline: none;
	border-color: var(--smt-orange);
}

.smt-landing .smt-textarea,
.smt-landing textarea {
	resize: vertical;
	min-height: 6rem;
}

.smt-consent {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem;
	margin-bottom: 1rem;
	background-color: rgba(var(--smt-dark-rgb), 0.8);
	border: 1px solid var(--smt-border);
	border-radius: var(--smt-radius-md);
	font-size: 0.75rem;
	color: var(--smt-muted);
}

.smt-consent .wpcf7-list-item {
	margin: 0;
}

.smt-consent input[type="checkbox"] {
	accent-color: var(--smt-orange);
	width: 1rem;
	height: 1rem;
}

/* Ghi đè style mặc định của Contact Form 7 */
.smt-landing .wpcf7 form .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	border-width: 1px;
	border-radius: var(--smt-radius-md);
	font-size: 0.8125rem;
}

.smt-landing .wpcf7 form.invalid .wpcf7-response-output,
.smt-landing .wpcf7 form.unaccepted .wpcf7-response-output,
.smt-landing .wpcf7 form.payment-required .wpcf7-response-output {
	border-color: #f59e0b;
	color: #fbbf24;
}

.smt-landing .wpcf7 form.failed .wpcf7-response-output,
.smt-landing .wpcf7 form.aborted .wpcf7-response-output {
	border-color: #ef4444;
	color: #f87171;
}

.smt-landing .wpcf7 form.sent .wpcf7-response-output {
	border-color: #10b981;
	color: #34d399;
}

.smt-landing .wpcf7-not-valid-tip {
	margin-top: 0.25rem;
	color: #f87171;
	font-size: 0.75rem;
}

.smt-landing .wpcf7-not-valid {
	border-color: #ef4444 !important;
}

.smt-landing .wpcf7-spinner {
	margin-left: 0.5rem;
}

.smt-landing .wpcf7 input[type="submit"] {
	width: 100%;
	padding: 1rem 1.5rem;
	border: 0;
	border-radius: var(--smt-radius-md);
	background: linear-gradient(135deg, var(--smt-orange) 0%, #d95300 100%);
	color: var(--smt-white);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 10px 15px -3px rgba(var(--smt-orange-rgb), 0.3);
	transition: filter var(--smt-transition), transform var(--smt-transition);
}

.smt-landing .wpcf7 input[type="submit"]:hover {
	filter: brightness(1.1);
	transform: translateY(-2px);
}

.smt-landing .wpcf7 input[type="submit"]:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

/* =========================================================================
   19. FAQ
   ========================================================================= */

.smt-faq__list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.smt-faq-item {
	padding: 1.25rem;
	background-color: var(--smt-card);
	border: 1px solid var(--smt-border);
	border-radius: var(--smt-radius-lg);
	transition: border-color var(--smt-transition);
}

.smt-faq-item:hover {
	border-color: rgba(var(--smt-orange-rgb), 0.5);
}

.smt-faq-item__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 0;
	background: none;
	border: 0;
	text-align: left;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--smt-text-strong);
	cursor: pointer;
}

.smt-faq-item__chevron {
	flex-shrink: 0;
	color: var(--smt-orange);
	transition: transform 0.3s ease;
}

.smt-faq-item.is-open .smt-faq-item__chevron {
	transform: rotate(180deg);
}

.smt-faq-item__answer {
	display: none;
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(var(--smt-border-rgb), 0.6);
	font-size: 0.75rem;
	line-height: 1.625;
	color: var(--smt-text-soft);
}

.smt-faq-item.is-open .smt-faq-item__answer {
	display: block;
}

@media (min-width: 640px) {
	.smt-faq-item__toggle {
		font-size: 1rem;
	}

	.smt-faq-item__answer {
		font-size: 0.875rem;
	}
}

/* =========================================================================
   20. Dải CTA
   ========================================================================= */

.smt-cta-banner {
	padding-block: 3rem;
	background: linear-gradient(to right, var(--smt-orange), #d97706, var(--smt-orange));
	color: var(--smt-white);
}

.smt-cta-banner__inner {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	text-align: center;
}

.smt-cta-banner__title {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--smt-white);
}

.smt-cta-banner__text {
	margin-top: 0.25rem;
	font-size: 0.875rem;
	color: #fef9c3;
}

.smt-cta-banner .smt-btn .smt-icon {
	color: var(--smt-orange);
}

@media (min-width: 640px) {
	.smt-cta-banner__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		text-align: left;
	}
}

/* =========================================================================
   21. Footer
   ========================================================================= */

.smt-footer {
	background-color: #020617;
	border-top: 1px solid rgba(var(--smt-border-rgb), 0.8);
	padding: 4rem 0 2rem;
	font-size: 0.75rem;
	color: var(--smt-muted);
}

.smt-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-bottom: 3rem;
}

@media (min-width: 768px) {
	.smt-footer {
		font-size: 0.875rem;
	}

	.smt-footer__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.smt-footer__col {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.smt-footer__logo {
	align-self: flex-start;
}

.smt-footer__logo img {
	height: 2.5rem;
	width: auto;
	padding: 0.375rem;
	background-color: rgba(255, 255, 255, 0.95);
	border-radius: var(--smt-radius-md);
	box-shadow: var(--smt-shadow-md);
}

.smt-footer__company {
	font-weight: 600;
	color: var(--smt-text-soft);
}

.smt-footer__desc {
	font-size: 0.75rem;
	line-height: 1.625;
	color: var(--smt-muted);
}

.smt-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(var(--smt-border-rgb), 0.4);
	font-size: 0.75rem;
}

.smt-footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
}

.smt-footer__contact-item .smt-icon {
	margin-top: 0.125rem;
	color: var(--smt-orange);
	flex-shrink: 0;
}

.smt-footer__contact-item a:hover {
	text-decoration: underline;
}

.smt-footer__hotline {
	color: var(--smt-orange);
	font-weight: 700;
}

.smt-footer__heading {
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--smt-text-strong);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.smt-footer__links {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	font-size: 0.75rem;
}

.smt-footer-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	transition: color var(--smt-transition);
}

.smt-footer-link:hover {
	color: var(--smt-orange);
}

.smt-footer-link .smt-icon {
	color: var(--smt-orange);
	font-size: 0.75rem;
}

.smt-footer__fanpage {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1rem;
	background-color: var(--smt-card);
	border: 1px solid var(--smt-border);
	border-radius: var(--smt-radius-xl);
}

.smt-footer__fanpage-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.smt-footer__fanpage-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0.25rem;
	background-color: var(--smt-white);
	border-radius: var(--smt-radius-md);
	box-shadow: var(--smt-shadow-md);
}

.smt-footer__fanpage-name {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--smt-text-strong);
}

.smt-footer__fanpage-name .smt-icon {
	color: #3b82f6;
	font-size: 0.625rem;
}

.smt-footer__fanpage-sub {
	font-size: 0.6875rem;
	color: var(--smt-muted);
}

.smt-footer__fanpage-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.625rem 1rem;
	border-radius: var(--smt-radius-md);
	background-color: #2563eb;
	color: var(--smt-white);
	font-size: 0.75rem;
	font-weight: 700;
	box-shadow: var(--smt-shadow-md);
	transition: background-color var(--smt-transition), box-shadow var(--smt-transition);
}

.smt-footer__fanpage-btn:hover {
	background-color: #3b82f6;
	box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
}

.smt-footer__socials {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.625rem;
	padding-top: 0.25rem;
}

.smt-footer__social {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem;
	background-color: var(--smt-card);
	border: 1px solid var(--smt-border);
	border-radius: var(--smt-radius-md);
	font-size: 1.25rem;
	color: var(--smt-a, var(--smt-text));
	transition: border-color var(--smt-transition), background-color var(--smt-transition);
}

.smt-footer__social:hover {
	border-color: var(--smt-a);
	background-color: rgba(var(--smt-a-rgb), 0.1);
}

.smt-footer__social .smt-icon {
	transition: transform var(--smt-transition);
}

.smt-footer__social:hover .smt-icon {
	transform: scale(1.25);
}

.smt-footer__bottom {
	padding-top: 1.5rem;
	border-top: 1px solid rgba(var(--smt-border-rgb), 0.6);
	text-align: center;
	font-size: 0.75rem;
	color: var(--smt-muted-dark);
}

/* =========================================================================
   22. Modal thành công
   ========================================================================= */

.smt-modal {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.smt-modal[hidden] {
	display: none;
}

.smt-modal__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.smt-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 28rem;
	padding: 1.5rem;
	background-color: var(--smt-card);
	border: 1px solid var(--smt-border);
	border-radius: var(--smt-radius-lg);
	text-align: center;
	box-shadow: var(--smt-shadow-2xl), 0 0 35px -5px rgba(var(--smt-orange-rgb), 0.35);
}

.smt-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--smt-radius);
	color: var(--smt-muted);
	cursor: pointer;
	transition: color var(--smt-transition), background-color var(--smt-transition);
}

.smt-modal__close:hover {
	color: var(--smt-white);
	background-color: var(--smt-border);
}

.smt-modal__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	margin: 0 auto 1rem;
	border-radius: var(--smt-radius-full);
	background-color: rgba(16, 185, 129, 0.2);
	border: 1px solid rgba(16, 185, 129, 0.3);
	color: #34d399;
	font-size: 1.875rem;
}

.smt-modal__title {
	margin-bottom: 1rem;
	font-size: 1.25rem;
	font-weight: 700;
}

.smt-modal__message {
	margin-bottom: 1rem;
	font-size: 0.75rem;
	line-height: 1.625;
	color: var(--smt-text-soft);
}

@media (min-width: 640px) {
	.smt-modal__message {
		font-size: 0.875rem;
	}
}

/* =========================================================================
   23. Ràng buộc bố cục giữa block cha và block con
   ========================================================================= */

/* Các block con là phần tử trực tiếp của lưới nên nhận span tại đây. */
@media (min-width: 1024px) {
	.smt-hero__grid > .smt-lead-form {
		grid-column: span 5 / span 5;
	}

	.smt-pricing__grid > .smt-pricing-card {
		grid-column: span 5 / span 5;
	}

	.smt-pricing__grid > .smt-reg-form {
		grid-column: span 7 / span 7;
	}
}

/* Các nhãn nội tuyến cần xuống dòng riêng. */
.smt-testimonial__name,
.smt-testimonial__role,
.smt-footer__fanpage-sub,
.smt-hero-badge__text,
.smt-credential__text,
.smt-module__title,
.smt-faq-item__question {
	display: block;
}

.smt-testimonial__author > span:last-child {
	min-width: 0;
}

/* Đoạn văn lọt vào section không có block cha vẫn giữ khoảng cách hợp lý. */
.smt-landing .smt-container > p {
	margin-bottom: 1rem;
}

.smt-landing .smt-container > *:last-child {
	margin-bottom: 0;
}

/* =========================================================================
   24. In ấn
   ========================================================================= */

@media print {
	.smt-nav,
	.smt-announcement,
	.smt-modal,
	.smt-cta-banner {
		display: none !important;
	}

	body.smt-landing {
		background: #fff;
		color: #000;
	}
}