/**
 * Homepage layout source of truth.
 * Kích thước tại đây là cố định và không đọc từ WordPress Customizer.
 */
.home .front-page {
	--home-container-width: 1200px;
	--home-container-padding: 24px;
	--home-section-margin-desktop: 100px;
	--home-section-margin-tablet: 80px;
	--home-section-margin-mobile: 60px;
	--home-section-padding-desktop: 0px;
	--home-section-padding-tablet: 0px;
	--home-section-padding-mobile: 0px;
	--home-title-gap: 16px;
	--home-content-gap: 24px;
	--home-grid-gap: 24px;
	--container-max-width: var(--home-container-width);
	--container-padding: var(--home-container-padding);
}

/* Khoảng cách giữa các section: margin 100px */
.home .front-page>section {}

section.hero.js-hero-stats-ready {
	margin-bottom: 50px;
}

.home .front-page>section:last-child {
	margin-bottom: 0;
}

.home .front-page .hero {
	--hero-content-max-width: 940px;
	--hero-height: 100vh;
	--hero-padding-top: 176px;
	--hero-padding-bottom: 77px;
	--hero-heading-size: 96px;
	--hero-description-size: 20px;
	--hero-btn-radius: 10px;
	--hero-btn-padding: 12px 20px;
}

.home .front-page .partners {
	--partners-padding-desktop: 50px;
	--partners-padding-tablet: 40px;
	--partners-padding-mobile: 30px;
	--partners-gap: 21px;
	--partners-card-radius: 10px;
	--partners-card-padding: 20px;
}

.home .front-page .about-home {
	--about-container-width: var(--home-container-width);
	--about-padding: 50px;
	--about-text-width: 57%;
	--about-description-max-width: 921px;
	--about-image-width: 100%;
	--about-image-offset-x: 0px;
	--about-image-offset-y: 0px;
}

.home .front-page .services-home {
	--services-container-width: var(--home-container-width);
	--services-padding: 50px;
	--services-heading-size: 85px;
	--services-heading-margin: 37px;
	--services-desc-size: 20px;
	--services-desc-max-width: 820px;
	--services-desc-margin: 57px;
	--services-cols: 3;
	--services-gap: 38px;
	--services-card-radius: 10px;
	--services-content-padding: 35px;
	--services-title-size: 48px;
	--services-excerpt-size: 20px;
	--services-cta-margin-top: 57px;
	--services-cta-padding: 12px 27px;
	--services-cta-radius: 10px;
	--services-cta-size: 24px;
}

.home .front-page .products-home {
	--products-container-width: var(--home-container-width);
	--products-padding: 50px;
	--products-margin-top: 0;
	--products-margin-bottom: 0;
	--products-heading-size: 85px;
	--products-heading-lh: 1.21;
	--products-desc-size: 20px;
	--products-desc-max-width: 820px;
	--products-header-gap: 110px;
	--products-cats-gap: 36px;
	--products-cats-padding: 15px 30px;
	--products-cats-radius: 10px;
	--products-cats-size: 24px;
	--products-cols: 3;
	--products-rows: 2;
	--products-gap: 123px;
	--products-card-padding: 24px;
	--products-card-radius: 10px;
	--products-title-size: 28px;
	--products-meta-size: 20px;
	--products-button-radius: 10px;
}

.home .front-page .why-choose-home {
	--why-choose-container-width: var(--home-container-width);
	--why-choose-padding: 50px;
	--why-choose-margin: 0;
	--why-choose-heading-size: 96px;
	--why-choose-heading-lh: 1.21;
	--why-choose-heading-margin: 24px;
	--why-choose-desc-size: 20px;
	--why-choose-desc-max-width: 820px;
	--why-choose-desc-margin: 86px;
	--why-choose-cols: 2;
	--why-choose-gap: 10px;
	--why-choose-card-height: 459px;
	--why-choose-card-padding: 34px;
	--why-choose-card-radius: 10px;
	--why-choose-title-size: 28px;
	--why-choose-card-desc-size: 20px;
	--why-choose-image-height: 290px;
	--why-choose-image-inset: 15px;
}

.home .front-page .process-home {
	--process-container-width: var(--home-container-width);
	--process-padding: 50px;
	--process-margin: 0;
	--process-heading-size: 96px;
	--process-desc-size: 20px;
	--process-desc-max-width: 820px;
	--process-timeline-width: 43%;
	--process-line-width: 1px;
	--process-step-gap: 98px;
	--process-circle-size: 56px;
	--process-step-padding: 0;
	--process-step-radius: 0;
	--process-image-width: 100%;
	--process-image-height: auto;
	--process-image-radius: 0;
}

.home .front-page .projects-home {
	--projects-container-width: var(--home-container-width);
	--projects-padding: 50px;
	--projects-margin: 0;
	--projects-title-size: 96px;
	--projects-desc-size: 20px;
	--projects-desc-max-width: 820px;
	--projects-header-margin: 72px;
	--projects-left-width: 65%;
	--projects-content-gap: 33px;
	--projects-card-padding: 30px;
	--projects-card-radius: 10px;
	--projects-ptitle-size: 55px;
	--projects-pdesc-size: 20px;
	--projects-meta-label-size: 20px;
	--projects-meta-value-size: 32px;
	--projects-meta-gap: 18px;
	--projects-thumb-width: 100%;
	--projects-thumb-height: 628px;
	--projects-thumb-radius: 10px;
}

.home .front-page .review-home {
	--review-container-width: var(--home-container-width);
	--review-padding: 50px;
	--review-margin: 0;
	--review-title-size: 85px;
	--review-desc-size: 20px;
	--review-desc-max-width: 820px;
	--review-header-margin: 59px;
	--review-cols: 3;
	--review-card-gap: 24px;
	--review-column-gap: 24px;
	--review-card-radius: 10px;
	--review-card-padding: 20px;
	--review-avatar-size: 44px;
	--review-name-size: 15px;
	--review-role-size: 13px;
	--review-comment-size: 15px;
	--review-mask-height: 80px;
}

.home .front-page .news-home {
	--news-container-width: var(--home-container-width);
	--news-padding: 50px;
	--news-margin: 0;
	--news-title-size: 60px;
	--news-desc-size: 14px;
	--news-desc-max-width: 817px;
	--news-header-margin: 151px;
	--news-card-width: 513px;
	--news-card-height: auto;
	--news-card-padding: 22px;
	--news-card-radius: 10px;
	--news-gap: 15px;
	--news-thumb-height: 286px;
	--news-meta-size: 20px;
	--news-ptitle-size: 30px;
	--news-pdesc-size: 20px;
	--news-arrow-size: 68px;
}

.home .front-page .quote-home {
	--quote-container-width: var(--home-container-width);
	--quote-padding: 50px;
	--quote-margin: 0;
	--quote-gap: 92px;
	--quote-card-padding: 34px;
	--quote-card-radius: 10px;
	--quote-header-size: 37px;
	--quote-input-height: 52px;
	--quote-input-radius: 10px;
	--quote-input-size: 17px;
	--quote-input-gap: 15px;
	--quote-btn-height: 71px;
	--quote-btn-radius: 10px;
	--quote-logo-width: 137px;
	--quote-heading-size: 70px;
	--quote-desc-size: 17px;
	--quote-right-max-width: 650px;
	--quote-contact-gap: 17px;
}

.home .front-page .faq-home {
	--faq-container-width: var(--home-container-width);
	--faq-padding: 50px;
	--faq-margin: 0;
	--faq-title-size: 62px;
	--faq-desc-size: 14px;
	--faq-desc-max-width: 768px;
	--faq-header-margin: 42px;
	--faq-cols: 2;
	--faq-gap: 17px;
	--faq-card-padding: 20px;
	--faq-card-radius: 10px;
	--faq-badge-size: 42px;
	--faq-q-size: 24px;
	--faq-a-size: 15px;
	--faq-a-lh: 1.36;
	--faq-icon-size: 16px;
	--faq-circle-size: 31px;
}

.home .front-page .latest-posts {
	padding: var(--home-section-padding-desktop) var(--home-container-padding);
}

.home .front-page .section-title,
.home .front-page .post-grid {
	max-width: var(--home-container-width);
	margin-inline: auto;
}

.home .front-page .section-title {
	margin-bottom: var(--home-title-gap);
}

@media (max-width: 1024px) {
	.home .front-page {
		--home-container-padding: 20px;
		--home-section-margin-desktop: 80px;
	}

	.home .front-page .hero {
		--hero-content-max-width: 600px;
		--hero-padding-top: 100px;
		--hero-padding-bottom: 100px;
		--hero-heading-size: 48px;
	}

	.home .front-page .services-home {
		--services-padding: 40px;
		--services-heading-size: 48px;
		--services-desc-size: 16px;
		--services-cols: 2;
	}

	.home .front-page .products-home {
		--products-padding: 40px;
		--products-heading-size: 44px;
		--products-desc-size: 16px;
		--products-cols: 2;
		--products-rows: 2;
		--products-title-size: 20px;
	}

	.home .front-page .why-choose-home {
		--why-choose-padding: 40px;
		--why-choose-heading-size: 48px;
		--why-choose-desc-size: 16px;
		--why-choose-gap: 16px;
		--why-choose-title-size: 20px;
		--why-choose-card-desc-size: 15px;
	}

	.home .front-page .process-home {
		--process-padding: 40px;
		--process-heading-size: 48px;
		--process-desc-size: 16px;
	}

	.home .front-page .projects-home {
		--projects-padding: 40px;
		--projects-title-size: 48px;
		--projects-desc-size: 16px;
		--projects-ptitle-size: 32px;
		--projects-pdesc-size: 15px;
		--projects-left-width: 60%;
	}

	.home .front-page .review-home {
		--review-padding: 40px;
		--review-title-size: 44px;
		--review-desc-size: 16px;
		--review-cols: 2;
		--review-avatar-size: 40px;
	}

	.home .front-page .news-home {
		--news-padding: 40px;
		--news-title-size: 36px;
		--news-ptitle-size: 20px;
	}

	.home .front-page .quote-home {
		--quote-padding: 40px;
		--quote-header-size: 24px;
	}

	.home .front-page .faq-home {
		--faq-padding: 40px;
		--faq-title-size: 36px;
		--faq-q-size: 18px;
		--faq-cols: 2;
	}

	.home .front-page .latest-posts {
		padding-block: var(--home-section-padding-tablet);
	}
}

@media (max-width: 767px) {
	.home {
		overflow-x: hidden;
	}

	.home .front-page {
		--home-container-padding: 16px;
		--home-section-margin-desktop: 60px;
		width: 100%;
		max-width: 100%;
	}

	.home .front-page .hero {
		--hero-padding-top: 90px;
		--hero-padding-bottom: 90px;
		--hero-heading-size: 36px;
		--hero-description-size: 16px;
		width: 100vw;
		max-width: 100vw;
	}

	.home .front-page .hero__inner,
	.home .front-page .hero__stats-wrap,
	.home .front-page .hero__content-panel {
		width: 100%;
		max-width: 100vw;
		min-width: 0;
		box-sizing: border-box;
	}

	.home .front-page .hero__content,
	.home .front-page .hero__stats {
		/* width: calc(100vw - 32px);
		max-width: calc(100vw - 32px); */
		min-width: 0;
		box-sizing: border-box;
	}

	.home .front-page .hero__content-panel .hero__heading {
		max-width: 100%;
		font-size: 32px;
		overflow-wrap: anywhere;
	}

	.home .front-page .hero__description,
	.home .front-page .hero__cta,
	.home .front-page .hero__btn {
		max-width: 100%;
		min-width: 0;
	}

	.home .front-page .hero__description {
		width: 100%;
	}

	.home .front-page .hero__stats-wrap {
		padding-inline: var(--home-container-padding);
	}

	.home .front-page .hero__stat {
		min-width: 0;
	}

	.home .front-page .hero__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding-inline: 16px;
	}

	.home .front-page .hero__stat-label,
	.home .front-page .hero__stat-description {
		max-width: 100%;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.home .front-page .partners {
		--partners-gap: 12px;
		--partners-padding-mobile: 30px;
	}

	.home .front-page .services-home {
		--services-padding: 30px;
		--services-heading-size: 34px;
		--services-desc-size: 14px;
		--services-cols: 1;
		--services-title-size: 30px;
		--services-excerpt-size: 14px;
	}

	.home .front-page .products-home {
		--products-padding: 30px;
		--products-heading-size: 30px;
		--products-desc-size: 14px;
		--products-cols: 1;
		--products-rows: 1;
		--products-title-size: 18px;
	}

	.home .front-page .why-choose-home {
		--why-choose-padding: 30px;
		--why-choose-heading-size: 30px;
		--why-choose-desc-size: 14px;
		--why-choose-cols: 1;
		--why-choose-title-size: 18px;
		--why-choose-card-desc-size: 14px;
	}

	.home .front-page .process-home {
		--process-padding: 30px;
		--process-heading-size: 30px;
		--process-desc-size: 14px;
	}

	.home .front-page .projects-home {
		--projects-padding: 30px;
		--projects-title-size: 30px;
		--projects-desc-size: 14px;
		--projects-left-width: 100%;
		--projects-ptitle-size: 24px;
		--projects-pdesc-size: 14px;
	}

	.home .front-page .review-home {
		--review-padding: 30px;
		--review-title-size: 28px;
		--review-desc-size: 14px;
		--review-cols: 1;
		--review-avatar-size: 36px;
	}

	.home .front-page .news-home {
		--news-padding: 30px;
		--news-title-size: 26px;
		--news-ptitle-size: 18px;
	}

	.home .front-page .quote-home {
		--quote-padding: 30px;
		--quote-header-size: 20px;
		--quote-gap: 32px;
	}

	.home .front-page .faq-home {
		--faq-padding: 30px;
		--faq-title-size: 26px;
		--faq-q-size: 16px;
		--faq-cols: 1;
	}

	.home .front-page .latest-posts {
		padding-block: var(--home-section-padding-mobile);
	}


}