/* ==========================================================================
   Song Anh – nền tảng giao diện (token, typography, nút, header, footer)
   Bảng màu & font lấy từ SA-Corp-Sitemap-Wireframe.pdf (Roboto, vàng #FFC20D)
   ========================================================================== */

:root {
	--sa-yellow: #ffc20d;
	--sa-yellow-d: #e4a900;
	--sa-ink: #1f2024;
	--sa-text: #3d4047;
	--sa-muted: #6e7279;
	--sa-line: #dbdbdb;
	--sa-soft: #f4f4f4;
	--sa-soft-2: #fafafa;
	--sa-cream: #fffbf1;
	--sa-cream-2: #fff5d0;
	--sa-radius: 0px;
	--sa-font: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	--sa-header-h: 84px;
	--sa-navy: #0b2545; /* nền header khi cuộn (FEEDBACK 3/11) */
	--sa-edge: 15px; /* lề trái/phải của mọi khối tràn rộng (header, hero, row full-width, dải CTA, footer…): = mặc định của Flatsome (15px) ở mọi cỡ màn hình */
	--sa-container: 1360px;
	--sa-shadow: 0 10px 30px rgba(31, 32, 36, 0.12);
}

/* ---------- Typography ---------- */
body,
button,
input,
select,
textarea {
	font-family: var(--sa-font);
}
body {
	color: var(--sa-text);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.heading-font {
	font-family: var(--sa-font);
	color: var(--sa-ink);
	font-weight: 700;
	letter-spacing: -0.012em;
	line-height: 1.2;
}
h1 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 900; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); font-weight: 900; }
h3 { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); }
a { color: var(--sa-ink); }
a:hover { color: var(--sa-yellow-d); }
::selection { background: var(--sa-yellow); color: var(--sa-ink); }

/* ---------- Khối nội dung rộng hơn khi cần ---------- */
.container, .row { max-width: var(--sa-container); }
.row.row-collapse > .col { padding-bottom: 0; }

/* ---------- Nút ---------- */
.sa-btn,
.button.sa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 48px;
	padding: 0 28px;
	margin: 0;
	border: 2px solid var(--sa-yellow);
	border-radius: var(--sa-radius);
	background: transparent;
	color: var(--sa-ink);
	font: 700 14px/1 var(--sa-font);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.sa-btn--primary { background: var(--sa-yellow); }
.sa-btn--primary:hover,
.sa-btn--primary:focus-visible { background: var(--sa-yellow-d); border-color: var(--sa-yellow-d); color: var(--sa-ink); }
.sa-btn--outline { background: transparent; }
.sa-btn--outline:hover,
.sa-btn--outline:focus-visible { background: var(--sa-yellow); color: var(--sa-ink); }
.sa-btn--dark { background: var(--sa-ink); border-color: var(--sa-ink); color: #fff; }
.sa-btn--dark:hover { background: #000; border-color: #000; color: #fff; }
.sa-btn:focus-visible { outline: 3px solid var(--sa-ink); outline-offset: 2px; }
.sa-btn-wrap { margin: 0 0 1em; }
.sa-btn--s { min-height: 38px; padding: 0 18px; font-size: 12px; }
.sa-btn--l { min-height: 58px; padding: 0 38px; font-size: 15px; }
.sa-btn.is-full { display: flex; width: 100%; }
.sa-btn__arrow { transition: transform 0.2s; flex: 0 0 auto; }
.sa-btn:hover .sa-btn__arrow { transform: translateX(4px); }

/* Nút mặc định của Flatsome: vàng + chữ tối */
.button.primary,
.button.is-form.primary {
	background-color: var(--sa-yellow);
	color: var(--sa-ink);
	border-radius: var(--sa-radius);
	font-weight: 700;
	letter-spacing: 0.06em;
}
.button.primary:hover { background-color: var(--sa-yellow-d); color: var(--sa-ink); }

/* ---------- Placeholder ảnh ---------- */
.sa-ph {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 120px;
	background:
		linear-gradient(to top right, transparent calc(50% - 1px), #c8c8c8 50%, transparent calc(50% + 1px)),
		linear-gradient(to bottom right, transparent calc(50% - 1px), #c8c8c8 50%, transparent calc(50% + 1px)),
		var(--sa-soft);
}

/* ==========================================================================
   HEADER
   ========================================================================== */
#header,
.header-wrapper { font-family: var(--sa-font); }

.header-main {
	background: #fff;
	height: var(--sa-header-h);
}
.header-main .header-inner,
.header-main .flex-row { height: 100%; }

/* Đường vàng 3px dưới header */
.header-wrapper:not(.sa-transparent-top) .header-main,
.header-wrapper.stuck .header-main {
	box-shadow: none;
	border-bottom: 3px solid var(--sa-yellow);
}
.header-bg-color,
.header-bg-image { background: #fff; }

.header-main #logo img { max-height: 64px; width: auto; }

/* Menu chính */
.header-nav-main > li > a.nav-top-link,
.header-nav-main > li > a {
	color: var(--sa-ink);
	font-family: var(--sa-font);
	font-weight: 700;
	font-size: 16.5px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 6px 0;
	margin: 0;
	position: relative;
}
/* Khoảng cách giữa các mục menu: chỉ đặt ở li (Flatsome mặc định còn cộng margin li + margin link → quá xa). Mục đầu/cuối sát mép */
.header-nav-main > li { margin: 0 20px; }
.header-nav-main > li:first-child { margin-left: 0; }
.header-nav-main > li:last-child { margin-right: 0; }
.header-nav-main > li > a.nav-top-link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: calc(50% + 14px);
	height: 3px;
	background: var(--sa-yellow);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s;
}
.header-nav-main > li:hover > a.nav-top-link::after,
.header-nav-main > li.active > a.nav-top-link::after,
.header-nav-main > li.current-menu-ancestor > a.nav-top-link::after,
.header-nav-main > li.current-menu-item > a.nav-top-link::after { transform: scaleX(1); }
.header-nav-main > li:hover > a.nav-top-link,
.header-nav-main > li.active > a.nav-top-link { color: var(--sa-ink); }

/* Mũi tên dropdown nhỏ màu vàng */
.header-nav-main .icon-angle-down {
	color: var(--sa-yellow);
	font-size: 12px;
	margin-left: 4px;
	opacity: 1;
}

/* ---------- Dropdown (sub menu) ----------
   Li cao đủ chiều cao header để rê chuột từ link xuống menu không bị hở; khung trắng bám ngay dưới đường vàng của header. */
.header-nav-main > li { display: flex; align-items: center; }
/* link cao bằng header để li phủ kín chiều cao → dropdown (top:100%) bám sát đường vàng, rê chuột không bị hở */
.header-nav-main > li > a.nav-top-link { display: inline-flex; align-items: center; height: var(--sa-nav-h, 84px); padding-top: 0; padding-bottom: 0; }
.header-wrapper.stuck .header-nav-main > li > a.nav-top-link { --sa-nav-h: 70px; }
.header-nav-main .nav-dropdown {
	top: 100%;
	left: 0 !important;
	right: auto !important;
	margin: 0 !important;
	transform: none;
	min-width: 270px;
	padding: 10px 0;
	border: 0;
	border-radius: 0;
	background: #fff;
	box-shadow: 0 18px 40px rgba(31, 32, 36, 0.14), 0 0 0 1px rgba(31, 32, 36, 0.05);
}
.header-nav-main .nav-dropdown::before { content: none; }
.header-nav-main .nav-dropdown > li { display: block; margin: 0; padding: 0; border: 0; float: none; width: auto; }
.header-nav-main .nav-dropdown > li > a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 11px 26px;
	border: 0;
	background: transparent;
	color: var(--sa-ink);
	font: 500 15px/1.35 var(--sa-font);
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	transition: background-color 0.2s, padding-left 0.2s;
}
.header-nav-main .nav-dropdown > li > a::before {
	content: '';
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
	background: var(--sa-yellow);
}
.header-nav-main .nav-dropdown > li > a:hover,
.header-nav-main .nav-dropdown > li.active > a,
.header-nav-main .nav-dropdown > li.current-menu-item > a { background: var(--sa-cream-2); color: var(--sa-ink); }
.header-nav-main .nav-dropdown > li > a:hover { padding-left: 30px; }

/* Dropdown 10 dịch vụ: 2 cột, 5 mục mỗi cột */
.header-nav-main li.sa-menu-two-col > .nav-dropdown { min-width: 0; width: max-content; max-width: calc(100vw - 32px); padding: 12px 8px; left: 50% !important; transform: translateX(-50%); }
.header-nav-main li.sa-menu-two-col:hover > .nav-dropdown,
.header-nav-main li.sa-menu-two-col.current-dropdown > .nav-dropdown {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(5, auto);
	grid-template-columns: 1fr 1fr;
	column-gap: 8px;
}
.header-nav-main li.sa-menu-two-col > .nav-dropdown > li > a { white-space: nowrap; }

/* ---------- Header trong suốt trên trang chủ ---------- */
.transparent .header-main,
.header-wrapper.sa-transparent-top .header-main { background: transparent; }
.transparent.has-transparent .header-main { border-bottom: 0; }
.transparent:not(.stuck) .header-nav-main > li > a.nav-top-link,
.transparent:not(.stuck) .header-nav-main > li > a { color: #fff; }
.transparent:not(.stuck) .header-nav-main .icon-angle-down { color: var(--sa-yellow); }
/* Cỡ chữ menu chính dùng chung mọi trạng thái (trong suốt / dính / trang con): 16.5px – đặt ở rule gốc phía trên */
.header-nav-main > li > a.nav-top-link { transition: color 0.2s; }
.transparent:not(.stuck) .header-bg-color { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); }

/* Header dính khi cuộn (FEEDBACK 3/11): nền xanh navy đậm + chữ trắng + điểm nhấn vàng Gold; chuyển trạng thái mượt */
.header-main,
.header-bg-color { transition: background-color 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; }
.header-wrapper.stuck .header-main,
.header-wrapper.stuck .header-bg-color {
	background: var(--sa-navy);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.header-wrapper.stuck .header-nav-main > li > a.nav-top-link,
.header-wrapper.stuck .header-nav-main > li > a,
.header-wrapper.stuck .header-nav-main > li:hover > a.nav-top-link,
.header-wrapper.stuck .header-nav-main > li.active > a.nav-top-link { color: #fff; }
.header-wrapper.stuck .header-nav-main > li:hover > a.nav-top-link,
.header-wrapper.stuck .header-nav-main > li.current-menu-item > a.nav-top-link,
.header-wrapper.stuck .header-nav-main > li.current-menu-ancestor > a.nav-top-link { color: var(--sa-yellow); }
.header-wrapper.stuck .header-nav-main .icon-angle-down { color: var(--sa-yellow); }
.header-wrapper.stuck .header-nav-main > li > a.nav-top-link { transition: color 0.2s; }
/* logo bản sáng khi dính = Flatsome → Logo → "Logo dính" (giữ nguyên kích thước) */
.header-wrapper.stuck .mobile-nav .nav-icon,
.header-wrapper.stuck .header-nav .nav-icon,
.header-wrapper.stuck .header-nav a.icon,
.header-wrapper.stuck .header-nav .icon-menu,
.header-wrapper.stuck .header-nav .icon-search,
.header-wrapper.stuck li.nav-icon a,
.header-wrapper.stuck li.nav-icon a i,
.header-wrapper.stuck .mobile-nav li a { color: #fff; }
/* header trong suốt trên banner: biểu tượng menu mobile trắng, rõ (Flatsome để mờ) */
.transparent:not(.stuck) li.nav-icon a,
.transparent:not(.stuck) li.nav-icon a i { color: #fff; opacity: 1; }

/* ---------- Mobile: menu cha mở trang, nút ▾ riêng mở menu con ---------- */
.mobile-sidebar-levels-1 .nav-sidebar > li > a,
.off-canvas .nav-sidebar > li > a,
.nav-sidebar.nav-vertical > li > a {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--sa-ink);
}
.nav-sidebar.nav-vertical > li > button.toggle { color: var(--sa-yellow-d); }
.nav-sidebar.nav-vertical > li.active > a { color: var(--sa-ink); box-shadow: inset 3px 0 0 var(--sa-yellow); padding-left: 12px; }
.nav-sidebar.nav-vertical li.html { border-top: 0; }

/* ==========================================================================
   FOOTER – nền #F8F8F8
   ========================================================================== */
.footer-wrapper,
#footer,
.footer-wrapper .footer-1,
.footer-wrapper .footer-2 { background: #f8f8f8; }
.footer-wrapper .section,
.footer-wrapper .section-content,
.footer-wrapper .row,
.footer-wrapper .col,
.footer-wrapper .col-inner { padding: 0; margin: 0; max-width: none; background: transparent; }
.footer-wrapper .section { min-height: 0; }
.sa-footer {
	border-top: 4px solid var(--sa-yellow);
	background: #f8f8f8;
}
.sa-footer .container { max-width: var(--sa-container); padding: 0 15px; }
.sa-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(150px, 0.7fr);
	gap: 32px 40px;
	padding: 48px 0 40px;
	align-items: start;
}
/* cột 1 = logo + thông tin công ty (xếp dọc) */
.sa-footer__brand { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sa-footer__logo { display: block; }
.sa-footer__logo img { width: var(--sa-footer-logo, 110px); max-width: 100%; height: auto; display: block; margin: 0; }
.sa-footer.no-border { border-top: 0; }
.sa-footer__company { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--sa-ink); }
.sa-footer__info p { margin: 0 0 4px; color: var(--sa-text); }
.sa-footer__info a { color: var(--sa-text); text-decoration: none; }
.sa-footer__info a:hover { color: var(--sa-ink); text-decoration: underline; text-decoration-color: var(--sa-yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sa-footer__links h4 {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}
.sa-footer__links ul { list-style: none; margin: 0; padding: 0; }
.sa-footer__links li { margin: 0 0 8px; padding: 0; }
/* liên kết: dạng thường, hover mới kẻ chân vàng chạy từ trái sang phải */
.sa-footer__links a {
	position: relative;
	display: inline-block;
	padding: 0 0 2px;
	color: var(--sa-text);
	text-decoration: none;
	background: linear-gradient(var(--sa-yellow), var(--sa-yellow)) left bottom / 0 2px no-repeat;
	transition: color 0.2s, background-size 0.3s ease;
}
.sa-footer__links a:hover,
.sa-footer__links a:focus-visible { color: var(--sa-ink); background-size: 100% 2px; }
.sa-footer__bottom {
	border-top: 1px solid var(--sa-line);
	padding: 18px 0;
	color: var(--sa-muted);
	font-size: 14px;
}
.sa-footer__copy { margin: 0; }
.absolute-footer { display: none; }

@media (max-width: 849px) {
	:root { --sa-header-h: 68px; }
	.sa-footer__grid { grid-template-columns: 1fr; padding: 36px 0 28px; gap: 24px; }
	.sa-footer__logo img { max-width: 90px; }
	.sa-footer__bottom { padding: 16px 0; font-size: 13px; text-align: center; }
}

/* ---------- Breadcrumb ---------- */
.sa-breadcrumb { font-size: 14px; color: var(--sa-muted); margin: 0 0 12px; }
.sa-breadcrumb a { color: var(--sa-muted); text-decoration: none; }
.sa-breadcrumb a:hover { color: var(--sa-ink); }
.sa-breadcrumb__sep { font-style: normal; margin: 0 7px; }

/* ---------- Tiện ích nền ---------- */
.sa-bg-cream { background: var(--sa-cream); }
.sa-bg-soft { background: var(--sa-soft-2); }
.sa-bg-cream-2 { background: var(--sa-cream-2); }
.sa-ink { color: var(--sa-ink); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* footer: bỏ đường kẻ/chiều cao mặc định của Flatsome ở menu, căn lề đúng với lưới nội dung */
.sa-footer .container { max-width: 1200px; }
.sa-footer__links .menu > li,
.sa-footer__links ul > li,
.sa-footer__links li + li { border: 0; min-height: 0; margin: 0 0 10px; padding: 0; }
.sa-footer__links a { font-size: 15px; line-height: 1.5; }

.sa-footer__company { margin-bottom: 6px; }

/* Breadcrumb của Rank Math (.rank-math-breadcrumb) – cùng kiểu với breadcrumb của theme */
.sa-breadcrumb-wrap { margin: 0 0 18px; }
.rank-math-breadcrumb p { margin: 0; font-size: 14px; color: var(--sa-muted); }
.rank-math-breadcrumb a { color: var(--sa-muted); text-decoration: none; }
.rank-math-breadcrumb a:hover { color: var(--sa-ink); }
.rank-math-breadcrumb .separator { margin: 0 8px; }
.rank-math-breadcrumb p > span:last-child { color: var(--sa-ink); font-weight: 500; }


/* ---------- Footer: tablet 2 cột (logo + thông tin | liên kết), mobile 1 cột, liên kết chia 2 cột ---------- */
@media (min-width: 550px) and (max-width: 849px) {
	.sa-footer__grid {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		grid-template-areas: "brand links";
		gap: 28px 40px;
		padding: 40px 0 32px;
	}
	.sa-footer__brand { grid-area: brand; }
	.sa-footer__links { grid-area: links; }
	.sa-footer__logo img { max-width: var(--sa-footer-logo, 110px); }
	.sa-footer__bottom { text-align: left; }
}
/* mobile: menu "Liên kết" xếp 1 cột từ trên xuống (không chia 2 cột) */
@media (max-width: 549px) {
	.sa-footer__links ul { columns: auto; }
}

/* ---------- Footer: mạng xã hội (Facebook · TikTok · LinkedIn) ---------- */
.sa-footer__social { margin-top: 24px; }
.sa-footer__social-title { margin: 0 0 12px; font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.sa-footer__links .sa-social-list { display: flex; flex-wrap: wrap; gap: 10px; columns: auto; list-style: none; margin: 0; padding: 0; }
.sa-footer__links .sa-social-list li { margin: 0; padding: 0; min-height: 0; border: 0; break-inside: auto; }
.sa-footer__links a.sa-social {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--sa-line);
	background: #fff;
	color: var(--sa-ink);
	transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}
.sa-footer__links a.sa-social svg { display: block; }
.sa-footer__links a.sa-social:hover,
.sa-footer__links a.sa-social:focus-visible {
	background: var(--sa-yellow);
	border-color: var(--sa-yellow);
	color: var(--sa-ink);
	transform: translateY(-2px);
}

/* ---------- Footer: bản đồ + fanpage nằm trong lưới cột (logo+thông tin | liên kết | bản đồ | fanpage) ---------- */
.sa-footer__map,
.sa-footer__fanpage { min-width: 0; border: 1px solid var(--sa-line); background: var(--sa-soft); }
.sa-footer__map-frame,
.sa-footer__fanpage-frame { height: var(--fm-h, 280px); overflow: hidden; }
.sa-footer__map-frame iframe,
.sa-footer__fanpage-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* desktop ≥ 850px: tối đa 4 cột */
@media (min-width: 850px) {
	.sa-footer__grid.has-map,
	.sa-footer__grid.has-fan { grid-template-columns: minmax(0, 1.2fr) minmax(150px, 0.7fr) minmax(0, 1.5fr); gap: 32px 36px; }
	.sa-footer__grid.has-map.has-fan { grid-template-columns: minmax(0, 1.15fr) minmax(130px, 0.62fr) minmax(0, 1.3fr) minmax(0, 1.1fr); gap: 32px 32px; }
}
/* tablet 550–849px: hàng 1 = logo + thông tin | liên kết; hàng 2 = bản đồ | fanpage (chỉ 1 trong 2 thì trải ngang) */
@media (min-width: 550px) and (max-width: 849px) {
	.sa-footer__grid.has-map.has-fan { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "brand links" "map fan"; }
	.sa-footer__grid.has-map:not(.has-fan) { grid-template-areas: "brand links" "map map"; }
	.sa-footer__grid.has-fan:not(.has-map) { grid-template-areas: "brand links" "fan fan"; }
	.sa-footer__map { grid-area: map; }
	.sa-footer__fanpage { grid-area: fan; }
	.sa-footer__map-frame,
	.sa-footer__fanpage-frame { height: var(--fm-h-t, 300px); }
}
/* mobile ≤ 549px: xếp dọc (logo + thông tin, liên kết, bản đồ, fanpage) */
@media (max-width: 549px) {
	.sa-footer__map-frame,
	.sa-footer__fanpage-frame { height: var(--fm-h-m, 300px); }
}