/**
 * Modern front page — Stripe/Linear inspired layout.
 * Chỉ áp dụng trong .dongson-main (front-page.html).
 *
 * Triết lý:
 * - Whitespace rộng (padding 8rem desktop, 4rem mobile)
 * - Typography tinh tế (gradient text, letter-spacing chuẩn)
 * - Shadow mềm (4 layer subtle)
 * - Animation scroll fade-up tinh tế
 * - Gold làm accent, navy là contrast text
 */

/* ============================================================
 * 1. Section spacing — rộng rãi như Stripe
 * ============================================================ */
.dongson-main .dongson-section,
.dongson-main > .wp-block-group {
	padding-top: clamp(4rem, 8vw, 7rem) !important;
	padding-bottom: clamp(4rem, 8vw, 7rem) !important;
}
.dongson-main .dongson-hero-wrap {
	padding: 0 !important;
	margin-bottom: 0 !important;
}
.dongson-main .dongson-section + .dongson-section {
	margin-top: 0 !important;
}

/* ============================================================
 * 2. Section title — minimal, không uppercase, không underline gạch
 * ============================================================ */
.dongson-main .is-style-section-title {
	font-size: clamp(1.75rem, 4vw, 2.6rem) !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
	line-height: 1.15 !important;
	text-transform: none !important;
	color: var(--wp--preset--color--secondary, #1a2942);
	margin-bottom: 1rem !important;
	padding-bottom: 0 !important;
}
.dongson-main .is-style-section-title::after {
	display: none !important;
}
.dongson-main .has-text-align-center.is-style-section-title + .has-text-align-center {
	max-width: 640px;
	margin-left: auto !important;
	margin-right: auto !important;
	color: #6b7280;
	font-size: 1.05rem;
	line-height: 1.65;
	margin-bottom: clamp(2.5rem, 5vw, 4rem) !important;
}

:root[data-theme="dark"] .dongson-main .is-style-section-title {
	color: var(--ds-text);
}
:root[data-theme="dark"] .dongson-main .has-text-align-center.is-style-section-title + .has-text-align-center {
	color: var(--ds-text-muted);
}

/* Eyebrow trên section title (gold uppercase nhỏ) */
.dongson-main .dongson-section-eyebrow {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark, #b8801c);
	background: linear-gradient(135deg, #fef3c7, #fde68a);
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	margin-bottom: 1.25rem;
}

/* ============================================================
 * 3. Service grid (product-categories) — clean cards
 * ============================================================ */
.dongson-main .dongson-cat-grid {
	gap: 1.5rem !important;
}
.dongson-main .dongson-cat-card {
	background: #fff;
	border: 1px solid #f1f5f9 !important;
	border-radius: 1.1rem !important;
	box-shadow:
		0 1px 2px rgba(12, 22, 38, 0.04),
		0 4px 12px rgba(12, 22, 38, 0.04);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
		border-color 0.3s ease;
}
.dongson-main .dongson-cat-card:hover {
	transform: translateY(-4px);
	border-color: #e2e8f0 !important;
	box-shadow:
		0 4px 6px rgba(12, 22, 38, 0.04),
		0 18px 40px rgba(12, 22, 38, 0.08);
}
.dongson-main .dongson-cat-card__title {
	font-size: 1.1rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em !important;
}
.dongson-main .dongson-cat-card__more {
	color: var(--wp--preset--color--primary-dark, #b8801c) !important;
	font-weight: 600;
}

/* ============================================================
 * 4. About intro — bigger asymmetric layout
 * ============================================================ */
.dongson-main .dongson-about {
	gap: clamp(2rem, 5vw, 4.5rem) !important;
	align-items: center !important;
}
.dongson-main .dongson-about__media {
	border-radius: 1.5rem !important;
	overflow: hidden;
	box-shadow:
		0 4px 6px rgba(12, 22, 38, 0.05),
		0 24px 60px rgba(12, 22, 38, 0.08);
}
.dongson-main .dongson-about__title {
	font-size: clamp(1.7rem, 3.5vw, 2.5rem) !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
	line-height: 1.18 !important;
	margin-bottom: 1rem !important;
}
.dongson-main .dongson-about__eyebrow {
	font-size: 0.78rem !important;
	letter-spacing: 0.18em !important;
	color: var(--wp--preset--color--primary-dark, #b8801c) !important;
}
.dongson-main .dongson-about__content > p {
	color: #4b5563 !important;
	line-height: 1.75 !important;
	font-size: 1.02rem !important;
}
.dongson-main .dongson-about__list li {
	padding: 0.5rem 0 0.5rem 1.85rem !important;
	color: #1f2937 !important;
	font-size: 0.95rem !important;
	border-bottom: 1px dashed transparent !important;
	position: relative;
}
.dongson-main .dongson-about__list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0.45rem;
	width: 22px;
	height: 22px;
	background: linear-gradient(135deg, var(--wp--preset--color--primary, #e2a234), var(--wp--preset--color--primary-light, #f5c451));
	color: #1a2942;
	font-weight: 800;
	font-size: 0.78rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ============================================================
 * 5. Commitments — flat icon row (như Linear)
 * ============================================================ */
.dongson-main .dongson-commitments-section {
	background: #fafbfc !important;
}
.dongson-main .dongson-feature-grid {
	gap: 2rem !important;
	max-width: 1100px;
	margin: 0 auto;
}
.dongson-main .dongson-feature {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	text-align: left !important;
	transition: transform 0.3s ease !important;
}
.dongson-main .dongson-feature::before {
	display: none !important;
}
.dongson-main .dongson-feature:hover {
	transform: translateY(-2px) !important;
	box-shadow: none !important;
	border: 0 !important;
}
.dongson-main .dongson-feature__icon {
	margin: 0 0 1.25rem !important;
	width: 56px !important;
	height: 56px !important;
	font-size: 1.65rem !important;
	background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
	box-shadow:
		0 1px 2px rgba(184, 128, 28, 0.1),
		0 6px 16px rgba(184, 128, 28, 0.12);
	border-radius: 14px !important;
}
.dongson-main .dongson-feature:hover .dongson-feature__icon {
	transform: scale(1.05) !important;
	background: linear-gradient(135deg, var(--wp--preset--color--primary, #e2a234), var(--wp--preset--color--primary-light, #f5c451)) !important;
	color: #1a2942 !important;
}
.dongson-main .dongson-feature__title {
	font-size: 1.1rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em !important;
}
.dongson-main .dongson-feature__desc {
	color: #6b7280 !important;
	font-size: 0.95rem !important;
	line-height: 1.7 !important;
}

:root[data-theme="dark"] .dongson-main .dongson-commitments-section {
	background: var(--ds-card) !important;
}

/* ============================================================
 * 6. Quote form — gọn, soft shadow
 * ============================================================ */
.dongson-main .dongson-quote-section {
	background: linear-gradient(180deg, #fafbfc 0%, #f4f6f9 100%) !important;
}
.dongson-main .dongson-quote__form {
	border: 1px solid #e5e7eb !important;
	border-radius: 1.25rem !important;
	box-shadow:
		0 1px 2px rgba(12, 22, 38, 0.04),
		0 12px 32px rgba(12, 22, 38, 0.06) !important;
}
.dongson-main .dongson-quote__title {
	font-size: clamp(1.6rem, 3.2vw, 2.2rem) !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
	line-height: 1.2 !important;
}
.dongson-main .dongson-quote__quick {
	border-radius: 14px !important;
	box-shadow: 0 1px 2px rgba(12, 22, 38, 0.04) !important;
}
.dongson-main .dongson-quote__quick:hover {
	box-shadow:
		0 1px 2px rgba(12, 22, 38, 0.04),
		0 8px 24px rgba(226, 162, 52, 0.16) !important;
}

/* ============================================================
 * 7. Stats — số rất to, label nhỏ refined
 * ============================================================ */
.dongson-main .dongson-stats-section {
	background: linear-gradient(135deg, #1a2942 0%, #0c1626 100%) !important;
	position: relative;
	overflow: hidden;
}
.dongson-main .dongson-stats-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 30%, rgba(226, 162, 52, 0.12), transparent 40%),
		radial-gradient(circle at 80% 70%, rgba(245, 196, 81, 0.08), transparent 40%);
	pointer-events: none;
}
.dongson-main .dongson-stats {
	position: relative;
	z-index: 1;
}
.dongson-main .dongson-stat__value {
	font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.03em !important;
	background: linear-gradient(135deg, #f5c451, #e2a234);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1 !important;
}
.dongson-main .dongson-stat__label {
	font-size: 0.92rem !important;
	color: rgba(255, 255, 255, 0.7) !important;
	letter-spacing: 0.02em;
	margin-top: 0.65rem !important;
}
.dongson-main .dongson-stats__head h2 {
	color: #fff !important;
}
.dongson-main .dongson-stats__head p {
	color: rgba(255, 255, 255, 0.7) !important;
}

/* ============================================================
 * 8. Inox comparison + Pricing — clean tables
 * ============================================================ */
.dongson-main .dongson-compare__col {
	border-radius: 1.1rem !important;
	border: 1px solid #f1f5f9 !important;
	box-shadow:
		0 1px 2px rgba(12, 22, 38, 0.04),
		0 4px 12px rgba(12, 22, 38, 0.04) !important;
}
.dongson-main .dongson-compare__col.is-recommended {
	border: 2px solid var(--wp--preset--color--primary, #e2a234) !important;
	box-shadow:
		0 4px 6px rgba(226, 162, 52, 0.08),
		0 24px 50px rgba(226, 162, 52, 0.18) !important;
}
.dongson-main .dongson-pricing {
	border-radius: 1.25rem !important;
	border: 1px solid #f1f5f9 !important;
	box-shadow:
		0 1px 2px rgba(12, 22, 38, 0.04),
		0 12px 32px rgba(12, 22, 38, 0.06) !important;
}

/* ============================================================
 * 9. Reviews — minimal cards với gradient halo
 * ============================================================ */
.dongson-main .dongson-reviews-section {
	background: linear-gradient(180deg, #fff 0%, #fafbfc 100%) !important;
}
.dongson-main .dongson-review-card {
	border: 1px solid #f1f5f9 !important;
	border-radius: 1.1rem !important;
	padding: 1.65rem 1.65rem 1.4rem !important;
	box-shadow:
		0 1px 2px rgba(12, 22, 38, 0.04),
		0 4px 12px rgba(12, 22, 38, 0.04) !important;
}
.dongson-main .dongson-review-card:hover {
	border-color: #e2e8f0 !important;
	box-shadow:
		0 4px 6px rgba(12, 22, 38, 0.06),
		0 16px 36px rgba(12, 22, 38, 0.08) !important;
}

/* ============================================================
 * 10. Service areas — compact pill style
 * ============================================================ */
.dongson-main .dongson-areas-section {
	background: #fff !important;
}
.dongson-main .dongson-areas-section .dongson-area {
	border: 1px solid #f1f5f9 !important;
	border-radius: 14px !important;
	box-shadow: 0 1px 2px rgba(12, 22, 38, 0.04) !important;
}
.dongson-main .dongson-areas-section .dongson-area:hover {
	border-color: var(--wp--preset--color--primary, #e2a234) !important;
	box-shadow:
		0 1px 2px rgba(12, 22, 38, 0.04),
		0 12px 28px rgba(226, 162, 52, 0.14) !important;
}

/* ============================================================
 * 11. FAQ — minimal accordion
 * ============================================================ */
.dongson-main .dongson-faq-section {
	background: #fafbfc !important;
}
.dongson-main .dongson-faq__item {
	border: 1px solid #f1f5f9 !important;
	border-radius: 14px !important;
	background: #fff !important;
}
.dongson-main .dongson-faq__item[open] {
	box-shadow:
		0 1px 2px rgba(12, 22, 38, 0.04),
		0 12px 28px rgba(12, 22, 38, 0.06) !important;
}

/* ============================================================
 * 12. News grid — Stripe-card style
 * ============================================================ */
.dongson-main .dongson-news-grid {
	gap: 1.75rem !important;
}
.dongson-main .dongson-news-card {
	border: 1px solid #f1f5f9 !important;
	border-radius: 1.1rem !important;
	box-shadow:
		0 1px 2px rgba(12, 22, 38, 0.04),
		0 4px 12px rgba(12, 22, 38, 0.04) !important;
	overflow: hidden;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.dongson-main .dongson-news-card:hover {
	transform: translateY(-4px) !important;
	box-shadow:
		0 4px 6px rgba(12, 22, 38, 0.04),
		0 20px 44px rgba(12, 22, 38, 0.08) !important;
}
.dongson-main .dongson-news-card__title {
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em !important;
	line-height: 1.4 !important;
}

/* ============================================================
 * 13. CTA cuối — rộng + gradient
 * ============================================================ */
.dongson-main .dongson-cta {
	background: linear-gradient(135deg, #1a2942 0%, #2d4264 50%, #0c1626 100%) !important;
	border-radius: 0 !important;
	position: relative;
	overflow: hidden;
}
.dongson-main .dongson-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 30% 20%, rgba(226, 162, 52, 0.18), transparent 50%),
		radial-gradient(circle at 70% 80%, rgba(245, 196, 81, 0.12), transparent 50%);
}
.dongson-main .dongson-cta__inner {
	position: relative;
	z-index: 1;
}
.dongson-main .dongson-cta__title {
	font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
	line-height: 1.18 !important;
}

/* ============================================================
 * 14. Buttons — Stripe-soft với subtle glow
 * ============================================================ */
.dongson-main .dongson-btn--primary {
	box-shadow:
		0 1px 2px rgba(184, 128, 28, 0.2),
		0 4px 12px rgba(226, 162, 52, 0.25) !important;
	transition: transform 0.2s ease, box-shadow 0.3s ease !important;
}
.dongson-main .dongson-btn--primary:hover {
	transform: translateY(-1px) !important;
	box-shadow:
		0 1px 2px rgba(184, 128, 28, 0.2),
		0 8px 22px rgba(226, 162, 52, 0.4) !important;
}

/* ============================================================
 * 15. Animation: scroll fade-up
 * ============================================================ */
.dongson-main .ds-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}
.dongson-main .ds-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.dongson-main .ds-reveal--delay-1 { transition-delay: 0.05s; }
.dongson-main .ds-reveal--delay-2 { transition-delay: 0.1s; }
.dongson-main .ds-reveal--delay-3 { transition-delay: 0.15s; }
.dongson-main .ds-reveal--delay-4 { transition-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
	.dongson-main .ds-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ============================================================
 * 16. Hero tweaks — clean Stripe-like overlay
 * ============================================================ */
.dongson-main .dongson-hero__title {
	letter-spacing: -0.025em !important;
	font-weight: 800 !important;
}
.dongson-main .dongson-hero__subtitle {
	letter-spacing: 0.04em !important;
	font-weight: 600 !important;
	opacity: 0.9;
}
.dongson-main .dongson-hero__desc {
	font-size: 1.05rem !important;
	line-height: 1.7 !important;
	max-width: 560px;
}

/* Mobile padding rút gọn nhưng vẫn thoáng */
@media (max-width: 760px) {
	.dongson-main .dongson-section,
	.dongson-main > .wp-block-group {
		padding-top: clamp(2.5rem, 6vw, 4rem) !important;
		padding-bottom: clamp(2.5rem, 6vw, 4rem) !important;
	}
	.dongson-main .dongson-feature-grid {
		gap: 1.5rem !important;
	}
}