/**
 * Site-wide typography hierarchy based on Viettel IDC Cloud Server.
 * Loaded after template styles so legacy pages cannot restore synthetic weights.
 */

:root {
	--hc-font-ui: "BeauSansPro", "Sarabun", sans-serif;
	--hc-font-content: "Sarabun", "BeauSansPro", sans-serif;
}

body {
	font-family: var(--hc-font-ui) !important;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	font-synthesis: none;
}

body :where(p, li, dd, dt, blockquote, figcaption, td, th) {
	font-family: var(--hc-font-content) !important;
	font-size: 16px !important;
	font-weight: 400;
	line-height: 24px !important;
}

body :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--hc-font-ui) !important;
	font-style: normal;
	letter-spacing: normal !important;
}

body h1 {
	font-size: clamp(34px, 3.2vw, 38px) !important;
	font-weight: 500 !important;
	line-height: 45.6px !important;
}

body h2 {
	font-size: clamp(30px, 3vw, 36px) !important;
	font-weight: 600 !important;
	line-height: 43.2px !important;
}

body h3,
body h4,
body h5,
body h6 {
	font-weight: 600 !important;
	line-height: 1.2 !important;
}

body :where(.hc-hero p, [class*="-hero"] p, [class*="__hero"] p) {
	font-family: var(--hc-font-content) !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	line-height: 27px !important;
}

body :where(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"], .button, .btn, [class*="btn"], [class*="button"]) {
	font-family: var(--hc-font-ui) !important;
	font-weight: 500 !important;
	letter-spacing: normal !important;
}

body :where(input, select, optgroup, textarea, label) {
	font-family: var(--hc-font-content) !important;
}

body :where(strong, b) {
	font-weight: 700 !important;
}

body :where(
	[class*="eyebrow"],
	[class*="kicker"],
	[class*="badge"],
	[class*="tag"],
	[class*="label"],
	[class*="tab"],
	[class*="name"],
	[class*="title"]
) {
	font-weight: 600 !important;
	letter-spacing: normal !important;
}

body :where(
	[class*="price"],
	[class*="amount"],
	[class*="value"],
	[class*="metric"],
	[class*="stat"]
) {
	font-weight: 700 !important;
	letter-spacing: normal !important;
}

body :where([class*="pricing-card"], [class*="price-card"], [class*="plan-card"]) :where(p, li, span, em, small) {
	font-family: var(--hc-font-content) !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
}

body :where([class*="pricing-card"], [class*="price-card"], [class*="plan-card"]) :where(h3, h4, strong, b, [class*="price"], [class*="value"]) {
	font-family: var(--hc-font-ui) !important;
	font-weight: 700 !important;
}

body :where([class*="pricing-card"], [class*="price-card"], [class*="plan-card"]) :where([class*="badge"], [class*="name"], [class*="title"]) {
	font-family: var(--hc-font-ui) !important;
	font-weight: 600 !important;
}

body .maas-pricing-card__actions .maas-pricing-card__btn,
body .home-services-menu-wrap .home-menu-item-detail,
body .home-solutions-menu-wrap .home-menu-item-detail,
body .home-softwares-menu-wrap .home-menu-item-detail,
body .maas-usage-list > div,
body .maas-provider-cloud > span,
body .maas-info-card > span,
body .maas-step-card > span,
body .maas-feature-list li,
body .footer-contact-qr-card span {
	font-family: var(--hc-font-content) !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
}

body .maas-pricing-card__actions .maas-pricing-card__btn,
body .home-services-menu-wrap .home-menu-item-detail,
body .home-solutions-menu-wrap .home-menu-item-detail,
body .home-softwares-menu-wrap .home-menu-item-detail {
	font-family: var(--hc-font-ui) !important;
	font: 500 16px / 24px var(--hc-font-ui) !important;
	font-weight: 500 !important;
	font-size: 16px !important;
	line-height: 24px !important;
}

body .maas-provider-cloud > span,
body .maas-feature-list li,
body .maas-usage-list > div,
body .footer-contact-qr-card span {
	font-family: var(--hc-font-content) !important;
	font-weight: 400 !important;
}

body :where(em, i) {
	font-style: italic;
}

.site-header :where(a, button),
.site-footer :where(a, button, h2, h3, h4),
.site-branding,
.main-navigation,
.secondary-navigation,
.mobile-navigation {
	font-family: var(--hc-font-ui) !important;
}

.site-header .main-navigation .primary-menu-container > ul > li > a,
.site-header .secondary-navigation a,
.site-header .mobile-navigation a {
	font-weight: 400 !important;
	letter-spacing: normal !important;
}

/* Viettel IDC-inspired navigation scale without changing Kadence structure. */
@media (min-width: 1025px) {
	.site-header .main-navigation .primary-menu-container > ul {
		align-items: stretch;
		column-gap: clamp(2px, 0.45vw, 8px);
	}

	.site-header .main-navigation .primary-menu-container > ul > li > a {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding-inline: clamp(7px, 0.7vw, 12px) !important;
		font-family: var(--hc-font-ui) !important;
		font-size: 15px !important;
		font-weight: 500 !important;
		line-height: 22px !important;
		letter-spacing: normal !important;
		white-space: nowrap;
	}

	.site-header .main-navigation .primary-menu-container > ul > li > a .dropdown-nav-toggle {
		margin-left: 5px;
		font-size: 0.72em;
	}

	.site-header .secondary-navigation a,
	.site-header :where(.header-button, .header-account-button, .header-cart-button) {
		font-size: 14px !important;
		font-weight: 500 !important;
		line-height: 20px !important;
		letter-spacing: normal !important;
	}
}

@media (min-width: 1025px) and (max-width: 1280px) {
	.site-header .main-navigation .primary-menu-container > ul {
		column-gap: 0;
	}

	.site-header .main-navigation .primary-menu-container > ul > li > a {
		padding-inline: 6px !important;
		font-size: 14px !important;
	}
}

@media (max-width: 1024px) {
	.site-header .mobile-navigation a,
	.site-header .mobile-navigation .drawer-nav-drop-wrap a {
		font-family: var(--hc-font-ui) !important;
		font-size: 15px !important;
		font-weight: 500 !important;
		line-height: 22px !important;
		letter-spacing: normal !important;
	}
}

@media (max-width: 767px) {
	body h1 {
		font-size: 34px !important;
		line-height: 40.8px !important;
	}

	body h2 {
		font-size: 30px !important;
		line-height: 36px !important;
	}
}