/* Site header (templates/flex/html/softway_header.php): contact strip + white sticky bar.
   The menu markup is the template's own mega menu; only its look changes here. */

#sw-topbar, #sw-header {
	--swh-brand: #f14833;
	--swh-brand-dark: #d63a26;
	--swh-ink: #0f1b2d;
	--swh-muted: #5b6878;
	--swh-line: #e7ebf0;
	font-family: "Be Vietnam Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* The template's wrapper uses overflow: hidden, which stops a sticky header from sticking.
   clip still cuts off wide content but is not a scroll box, so position: sticky works. */
.body-innerwrapper.body_innerwrapper_overflow { overflow: visible; overflow-x: clip; }

/* ---------- Contact strip ---------- */
.sw-topbar { background: #0b1830; color: #b8c4d6; font-size: 13.5px; line-height: 1; }
.sw-topbar__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.sw-topbar__row::before, .sw-topbar__row::after { display: none; }
.sw-topbar__tag { margin: 0; color: #ffd2ca; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-topbar__links { display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; list-style: none; }
.sw-topbar__links > li { display: flex; align-items: center; }
.sw-topbar a { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: #d5deea; text-decoration: none; transition: color .15s ease; }
.sw-topbar a:hover, .sw-topbar a:focus { color: #fff; text-decoration: none; }
.sw-topbar b { margin-left: -3px; color: #fff; font-weight: 700; }
.sw-topbar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: #ff8a78; }
/* The login module brings its own wrapper markup. */
.sw-topbar__login .sp-module, .sw-topbar__login .sp-module-content, .sw-topbar__login .modal-login-wrapper, .sw-topbar__login .ap-modal-login, .sw-topbar__login .ap-login { display: inline-flex; align-items: center; margin: 0; padding: 0; border: 0; line-height: 1; }
.sw-topbar__login .top-divider { display: none; }
.sw-topbar__login .ap-login a { padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; font-weight: 600; }
.sw-topbar__login .ap-login a:hover { border-color: rgba(255, 255, 255, .5); }
.sw-topbar__login .ap-login i { font-size: 15px; color: #ff8a78; }

/* ---------- Main bar ---------- */
.sw-header { position: sticky; top: 0; z-index: 990; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--swh-line); transition: box-shadow .2s ease, background-color .2s ease; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.sw-header { background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); }
}
.sw-header.is-scrolled { box-shadow: 0 8px 24px rgba(15, 27, 45, .08); border-bottom-color: transparent; }
.sw-header__row { display: flex; align-items: center; gap: 18px; min-height: 78px; transition: min-height .2s ease; }
.sw-header__row::before, .sw-header__row::after { display: none; }
.sw-header.is-scrolled .sw-header__row { min-height: 66px; }

.sw-header__logo { flex: none; display: block; line-height: 0; }
.sw-header__logo img { width: auto; height: 52px; max-width: none; transition: height .2s ease; }
.sw-header.is-scrolled .sw-header__logo img { height: 44px; }

.sw-header__nav { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.sw-header__menu, .sw-header__menu .sp-megamenu-wrapper { display: flex; align-items: center; }

/* Top-level items */
#sw-header .sp-megamenu-parent { display: flex; align-items: center; margin: 0; padding: 0; float: none; }
#sw-header .sp-megamenu-parent > li { float: none; position: relative; }
#sw-header .sp-megamenu-parent > li.menu-justify, #sw-header .sp-megamenu-parent > li.menu-center { position: static; }
#sw-header .sp-megamenu-parent > li > a {
	display: flex; align-items: center; gap: 6px; height: auto; margin: 0; padding: 10px 13px; border-radius: 10px;
	color: var(--swh-ink); font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none; white-space: nowrap;
	transition: color .15s ease, background-color .15s ease;
}
#sw-header .sp-megamenu-parent > li > a:hover, #sw-header .sp-megamenu-parent > li.active > a, #sw-header .sp-megamenu-parent > li:hover > a { color: var(--swh-brand); background: #fff1ee; }
/* The logo already links home, and top-level icons crowd the bar. */
#sw-header .sp-megamenu-parent > li:first-child:has(> a > .fa-home) { display: none; }
#sw-header .sp-megamenu-parent > li > a > i { display: none; }
#sw-header .sp-megamenu-parent > li.sp-has-child > a::after { content: ""; width: 7px; height: 7px; margin: -3px 0 0 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .55; transition: transform .2s ease; }
#sw-header .sp-megamenu-parent > li.sp-has-child:hover > a::after { transform: translateY(2px) rotate(45deg); }

/* Dropdown panels */
#sw-header .sp-megamenu-parent .sp-dropdown { top: 100%; padding-top: 10px; }
#sw-header .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner { padding: 14px; border: 1px solid var(--swh-line); border-radius: 16px; background: #fff; box-shadow: 0 24px 60px rgba(15, 27, 45, .16); }
#sw-header .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
#sw-header .sp-megamenu-parent .sp-dropdown .sp-group-title {
	display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--swh-ink); font-size: 14.5px; font-weight: 500; line-height: 1.35; text-transform: none; white-space: normal; background: transparent;
	transition: color .15s ease, background-color .15s ease;
}
#sw-header .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover, #sw-header .sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a { color: var(--swh-brand); background: #fff5f3; }
#sw-header .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a.sp-group-title { margin-bottom: 4px; color: var(--swh-ink); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
#sw-header .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a.sp-group-title:hover { background: transparent; color: var(--swh-brand); }
#sw-header .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a i { width: 18px; color: var(--swh-brand); text-align: center; opacity: .85; }
#sw-header .sp-megamenu-parent .sp-dropdown .sp-mega-group-child { margin: 0; padding: 0; }
#sw-header .sp-megamenu-parent .sp-dropdown .sp-dropdown-items { margin: 0; padding: 0; background: transparent; box-shadow: none; }
#sw-header .sp-megamenu-parent .sp-dropdown-mega > .sp-dropdown-inner > .row { margin: 0; }

/* Tools */
.sw-header__tools { flex: none; display: flex; align-items: center; gap: 12px; }
.sw-header__search { display: flex; align-items: center; }
.sw-header__search .sp-module { margin: 0; }
.sw-header__search .icon-top-wrapper { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; color: var(--swh-ink); cursor: pointer; line-height: 1; transition: background-color .15s ease; }
.sw-header__search .icon-top-wrapper:hover { background: #f2f4f7; }
.sw-header__search .icon-top-wrapper i { font-size: 22px; line-height: 1; color: var(--swh-ink); }

.sw-header__phone { display: inline-flex; align-items: center; gap: 10px; color: var(--swh-ink); text-decoration: none; }
.sw-header__phone:hover, .sw-header__phone:focus { color: var(--swh-brand); text-decoration: none; }
.sw-header__phone-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: #fff1ee; color: var(--swh-brand); }
.sw-header__phone-icon svg, .sw-header__cta svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.sw-header__cta { display: inline-flex; align-items: center; gap: .3em; min-height: 46px; padding: 0 22px; border-radius: 999px; background: var(--swh-brand); color: #fff !important; font-size: 15px; font-weight: 700; white-space: nowrap; text-decoration: none !important; box-shadow: 0 8px 20px rgba(241, 72, 51, .3); transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.sw-header__cta:hover, .sw-header__cta:focus { background: var(--swh-brand-dark); transform: translateY(-1px); box-shadow: 0 12px 26px rgba(241, 72, 51, .36); }

/* Mobile menu button (the template's off-canvas toggler, kept for its script) */
#sw-header #offcanvas-toggler { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; border-radius: 12px; background: var(--swh-ink); color: #fff; line-height: 1; float: none; }
#sw-header #offcanvas-toggler i { font-size: 20px; color: #fff; line-height: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 1399px) {
	#sw-header .sp-megamenu-parent > li > a { padding: 10px 9px; font-size: 14.5px; }
}

/* The template hides the full menu below 1200px and shows the off-canvas button instead. */
@media (max-width: 1199px) {
	.sw-header__nav { order: 3; flex: none; justify-content: flex-end; }
	.sw-header__tools { margin-left: auto; }
	#sw-header #offcanvas-toggler { display: inline-flex; }
}

@media (max-width: 767px) {
	.sw-topbar__tag, .sw-topbar__links > li.sw-topbar__mail, .sw-topbar__links > li.sw-topbar__zalo { display: none; }
	.sw-topbar__row { justify-content: center; min-height: 36px; }
	.sw-topbar__links { gap: 14px; width: 100%; justify-content: space-between; }
	.sw-header__row { gap: 8px; min-height: 64px; }
	.sw-header.is-scrolled .sw-header__row { min-height: 58px; }
	.sw-header__logo img { height: 40px; }
	.sw-header.is-scrolled .sw-header__logo img { height: 36px; }
	.sw-header__tools { gap: 8px; }
	.sw-header__search { display: none; }
	.sw-header__cta { min-height: 40px; padding: 0 14px; font-size: 14px; box-shadow: none; }
	.sw-header__cta-more { display: none; }
	.sw-header__phone-icon { width: 40px; height: 40px; }
	#sw-header #offcanvas-toggler { width: 40px; height: 40px; }
}

@media (max-width: 359px) {
	.sw-header__phone { display: none; }
}