/* =========================================================
   NAM TRUNG - MODERN CONSTRUCTION HEADER
   FULL CSS
   FONT: ROBOTO CONDENSED
   PRIMARY: #131b73
========================================================= */
/* =========================================================
   FONT
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;600;700;800&display=swap');
:root {
	--tcx-primary: #131b73;
	--tcx-primary-dark: #0d1456;
	--tcx-primary-light: #202b91;
	--tcx-accent: #d62828;
	--tcx-text: #101828;
	--tcx-muted: #76859c;
	--tcx-line: #dfe5ed;
	--tcx-soft: #f5f7fb;
	/*
	 * Khớp với khu vực content chính hiện tại.
	 */
	--tcx-container: 1145px;
}
/* =========================================================
   GLOBAL
========================================================= */
.tcx-header {
	position: relative;
	z-index: 9990;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	background: #ffffff;
	font-family:
		"Roboto Condensed",
		Arial,
		sans-serif !important;
}
.tcx-header *,
.tcx-header *::before,
.tcx-header *::after {
	box-sizing: border-box;
}
.tcx-header a,
.tcx-header span,
.tcx-header strong,
.tcx-header small,
.tcx-header li,
.tcx-header button {
	font-family:
		"Roboto Condensed",
		Arial,
		sans-serif !important;
}
.tcx-header a {
	text-decoration: none !important;
}
/* =========================================================
   TOP TICKER
========================================================= */
.tcx-ticker {
	position: relative;
	width: 100%;
	height: 34px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background:
		var(--tcx-primary);
	border-top:
		3px solid
		var(--tcx-accent);
}
.tcx-ticker-track {
	display: flex;
	align-items: center;
	width: max-content;
	height: 100%;
	animation:
		tcxTickerMove
		31s
		linear
		infinite;
}
.tcx-ticker-track > span {
	flex: 0 0 auto;
	padding-right: 120px;
	color: #ffffff;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 31px !important;
	white-space: nowrap;
}
.tcx-ticker-track span span,
.tcx-ticker-track strong {
	color:
		var(--tcx-accent) !important;
	font-weight: 800 !important;
}
@keyframes tcxTickerMove {
	from {
		transform:
			translateX(0);
	}
	to {
		transform:
			translateX(-50%);
	}
}
/* =========================================================
   DESKTOP HEADER
========================================================= */
.tcx-desktop-stick {
	position: sticky !important;
	top: 0;
	z-index: 99990;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	background: #ffffff;
	transition:
		box-shadow .2s ease;
}
/* =========================================================
   MAIN HEADER
========================================================= */
.tcx-main {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background:
		linear-gradient(
			105deg,
			#ffffff 0%,
			#ffffff 78%,
			#f8f9fc 100%
		);
	border-bottom:
		1px solid
		var(--tcx-line);
}
/* architectural decoration */
.tcx-main::before {
	content: "";
	position: absolute;
	top: -180px;
	right: -110px;
	width: 420px;
	height: 420px;
	border:
		1px solid
		rgba(19,27,115,.04);
	transform:
		rotate(45deg);
	pointer-events: none;
}
.tcx-main::after {
	content: "";
	position: absolute;
	right: 130px;
	bottom: -175px;
	width: 290px;
	height: 290px;
	border:
		1px solid
		rgba(19,27,115,.03);
	transform:
		rotate(45deg);
	pointer-events: none;
}
/* =========================================================
   CONTAINER
========================================================= */
.tcx-main > .container,
.tcx-menu-wrap > .container {
	width: 100% !important;
	max-width:
		var(--tcx-container) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* =========================================================
   MAIN GRID
========================================================= */
.tcx-main-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 205px minmax(0, 1fr);
	align-items: stretch;
	width: 100%;
	min-height: 148px !important;
}
/* =========================================================
   LOGO
========================================================= */
.tcx-brand {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding:
		10px
		24px
		10px
		0;
}
.tcx-brand::after {
	content: "";
	position: absolute;
	top: 22px;
	right: 0;
	bottom: 22px;
	width: 1px;
	background:
		linear-gradient(
			180deg,
			transparent,
			#d4dbe6,
			transparent
		);
}
.tcx-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.tcx-logo img {
	display: block;
	width: auto;
	max-width: 185px !important;
	max-height: 122px !important;
	margin: 0 auto;
	object-fit: contain;
	transition: max-width .2s ease, max-height .2s ease;
}
.tcx-brand-accent {
	position: absolute;
	left: 10px;
	bottom: 12px;
	width: 58px;
	height: 4px;
	background:
		var(--tcx-accent);
}
/* =========================================================
   RIGHT AREA
========================================================= */
.tcx-main-right {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100% !important;
	min-width: 0 !important;
	padding: 13px 0 13px 28px !important;
}
/* =========================================================
   CONTACT ROW
========================================================= */
.tcx-contact-row {
	display: grid !important;
	grid-template-columns: 1fr 1fr 1.65fr !important;
	align-items: stretch !important;
	justify-items: stretch !important;
	width: 100% !important;
	max-width: none !important;
}
/* =========================================================
   CONTACT ITEM
========================================================= */
.tcx-contact-item {
	position: relative;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-width: 0 !important;
	min-height: 64px !important;
	gap: 14px !important;
	padding: 0 24px !important;
	color: var(--tcx-primary) !important;
	border-right: 1px solid var(--tcx-line);
	text-decoration: none !important;
}
.tcx-contact-item:first-child {
	padding-left: 12px !important;
}
.tcx-contact-address {
	justify-content: flex-start !important;
	padding-left: 28px !important;
	padding-right: 0 !important;
}
.tcx-contact-address .tcx-contact-copy {
	flex: 1;
	min-width: 0;
}
.tcx-contact-item:last-child {
	border-right: 0;
}
/* =========================================================
   CONTACT ICON
========================================================= */
.tcx-contact-icon {
	position: relative;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 52px !important;
	width: 52px !important;
	height: 52px !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--tcx-primary) !important;
	background: #f4f6fb;
	border: 1px solid #d4dced;
	border-radius: 0;
	line-height: 1 !important;
	overflow: hidden;
	transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}
.tcx-contact-icon i {
	position: static !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	color: inherit !important;
	font-size: 21px !important;
	line-height: 1 !important;
	text-align: center !important;
	transform: none !important;
	pointer-events: none;
}
/* whole item hover */
a.tcx-contact-item:hover
.tcx-contact-icon,
.tcx-contact-address:hover
.tcx-contact-icon {
	color: #ffffff !important;
	background:
		var(--tcx-primary);
	border-color:
		var(--tcx-primary);
	transform:
		translateY(-2px);
}
/* =========================================================
   CONTACT TEXT
========================================================= */
.tcx-contact-copy {
	display: block;
	min-width: 0;
}
.tcx-contact-copy small {
	display: block;
	margin-bottom: 5px !important;
	color: var(--tcx-muted);
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.1 !important;
	letter-spacing: .8px !important;
}
.tcx-contact-copy strong {
	display: block;
	min-width: 0;
	overflow: hidden;
	color: var(--tcx-text);
	font-size: 21px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.tcx-contact-address
.tcx-contact-copy strong {
	max-width: 100% !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: initial;
}
/* =========================================================
   SLOGAN
========================================================= */
.tcx-slogan {
	position: relative;
	display: inline-grid !important;
	grid-template-columns: 6px auto 56px !important;
	align-items: center !important;
	align-self: center !important;
	width: auto !important;
	max-width: calc(100% - 20px) !important;
	min-height: 60px !important;
	margin: 12px auto 0 !important;
	overflow: hidden;
	background: var(--tcx-primary);
}
.tcx-slogan-bar {
	display: block;
	width: 6px;
	height: 100%;
	background:
		var(--tcx-accent);
}
.tcx-slogan strong {
	display: block;
	padding: 0 32px !important;
	color: #ffffff !important;
	font-size: 25px !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
	text-align: center !important;
	text-transform: uppercase;
	white-space: nowrap !important;
}
/* =========================================================
   SLOGAN DECORATION
========================================================= */
.tcx-slogan-shape {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 4px;
	width: 56px !important;
	height: 100%;
	padding-bottom: 10px;
}
.tcx-slogan-shape i {
	display: block;
	width: 4px !important;
	background: var(--tcx-accent);
	transform: skewX(-20deg);
}
.tcx-slogan-shape i:nth-child(1) {
	 height: 17px !important;
}
.tcx-slogan-shape i:nth-child(2) {
	 height: 29px !important;
}
.tcx-slogan-shape i:nth-child(3) {
	 height: 41px !important;
}
/* =========================================================
   MENU WRAPPER
========================================================= */
.tcx-menu-wrap {
	position: relative;
	z-index: 1000;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	background:
		var(--tcx-primary);
	box-shadow:
		0 3px 10px
		rgba(19,27,115,.14);
}
.tcx-menu-wrap .container {
	overflow: visible !important;
}
/* =========================================================
   MENU CTA
========================================================= */
.tcx-menu-cta {
	display: none !important;
}
/* =========================================================
   MENU INNER
========================================================= */
.tcx-menu-inner {
	display: flex;
	align-items: stretch;
	justify-content: center;
	width: 100%;
	overflow: visible !important;
}
.tcx-nav {
	display: flex;
	justify-content: center;
	width: 100%;
	overflow: visible !important;
}
/* =========================================================
   MAIN MENU
========================================================= */
.tcx-menu {
	display: flex;
	align-items: stretch;
	justify-content: center;
	width: auto !important;
	margin:
		0
		auto !important;
	padding: 0 !important;
	overflow: visible !important;
	list-style: none !important;
}
.tcx-menu > li {
	position: relative;
	display: flex;
	align-items: stretch;
	flex:
		0 0
		auto !important;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
}
/* separator */
.tcx-menu > li + li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14px;
	bottom: 14px;
	width: 1px;
	background:
		rgba(255,255,255,.13);
	pointer-events: none;
}
/* =========================================================
   MAIN MENU LINK
========================================================= */
.tcx-menu > li > a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-height: 54px !important;
	padding: 0 17px !important;
	color: #ffffff !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-align: center;
	text-decoration: none !important;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color .2s ease, background .2s ease;
}
.tcx-menu > li > a:hover,
.tcx-menu > li.current-menu-item > a,
.tcx-menu > li.current-menu-parent > a,
.tcx-menu > li.current-menu-ancestor > a {
	color:
		var(--tcx-accent) !important;
	background:
		rgba(255,255,255,.035);
}
/* =========================================================
   ACTIVE LINE
========================================================= */
.tcx-menu > li > a::before {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 0;
	height: 3px;
	background:
		var(--tcx-accent);
	transform:
		scaleX(0);
	transform-origin:
		center;
	transition:
		transform .2s ease;
}
.tcx-menu > li > a:hover::before,
.tcx-menu > li.current-menu-item > a::before,
.tcx-menu > li.current-menu-parent > a::before,
.tcx-menu > li.current-menu-ancestor > a::before {
	transform:
		scaleX(1);
}
/* =========================================================
   SUBMENU TRIANGLE
========================================================= */
.tcx-menu >
li.menu-item-has-children::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -1px;
	z-index: 1005;
	width: 0;
	height: 0;
	border-left:
		8px solid transparent;
	border-right:
		8px solid transparent;
	border-bottom:
		8px solid #ffffff;
	transform:
		translateX(-50%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity .15s ease,
		visibility .15s ease;
}
.tcx-menu >
li.menu-item-has-children:hover::after {
	opacity: 1;
	visibility: visible;
}
/* =========================================================
   SUBMENU
========================================================= */
.tcx-menu
.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: block;
	min-width: 265px;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	background: #ffffff;
	border:
		1px solid
		#dce2ea;
	border-top: 0;
	border-radius:
		0
		0
		8px
		8px;
	list-style: none !important;
	box-shadow:
		0 12px 28px
		rgba(10,20,70,.16);
	opacity: 0;
	visibility: hidden;
	transform:
		translateY(6px);
	pointer-events: none;
	transition:
		opacity .16s ease,
		transform .16s ease,
		visibility .16s ease;
}
.tcx-menu
li:hover >
.sub-menu {
	opacity: 1;
	visibility: visible;
	transform:
		translateY(0);
	pointer-events: auto;
}
/* =========================================================
   SUBMENU ITEM
========================================================= */
.tcx-menu
.sub-menu li {
	position: relative;
	display: block;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	border-bottom:
		1px solid
		#e7ebf0;
}
.tcx-menu
.sub-menu li:last-child {
	border-bottom: 0;
}
/* =========================================================
   SUBMENU LINK
========================================================= */
.tcx-menu
.sub-menu a {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 52px !important;
	padding: 0 18px;
	color: #171d28 !important;
	background: #ffffff;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	text-align: left;
	text-decoration: none !important;
	text-transform: none;
	white-space: normal;
	transition: color .18s ease, background .18s ease, padding-left .18s ease;
}
.tcx-menu
.sub-menu a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 3px;
	height: 0;
	background:
		var(--tcx-accent);
	transform:
		translateY(-50%);
	transition:
		height .18s ease;
}
.tcx-menu
.sub-menu a:hover {
	padding-left: 24px;
	color:
		var(--tcx-primary) !important;
	background: #f4f5fb;
}
.tcx-menu
.sub-menu a:hover::before {
	height: 22px;
}
/* =========================================================
   STICKY ACTIVE
========================================================= */
.tcx-desktop-stick.tcx-is-sticky {
	position: sticky !important;
	top: 0 !important;
	left: auto !important;
	right: auto !important;
	width: 100%;
	box-shadow:
		0 7px 22px
		rgba(19,27,115,.14);
}
/* =========================================================
   STICKY MAIN
========================================================= */
.tcx-desktop-stick.tcx-is-sticky
.tcx-main-grid {
	grid-template-columns: 150px minmax(0, 1fr) !important;
	min-height: 96px !important;
}
/* =========================================================
   STICKY LOGO
========================================================= */
.tcx-desktop-stick.tcx-is-sticky
.tcx-brand {
	padding:
		4px
		15px
		4px
		0;
}
.tcx-desktop-stick.tcx-is-sticky
.tcx-brand::after {
	top: 10px;
	bottom: 10px;
}
.tcx-desktop-stick.tcx-is-sticky
.tcx-logo img {
	max-width: 135px !important;
	max-height: 78px !important;
}
.tcx-desktop-stick.tcx-is-sticky
.tcx-brand-accent {
	display: none;
}
/* =========================================================
   STICKY RIGHT
========================================================= */
.tcx-desktop-stick.tcx-is-sticky
.tcx-main-right {
	width: 100% !important;
	padding: 5px 0 6px 20px !important;
}
/* =========================================================
   STICKY CONTACT
========================================================= */
.tcx-desktop-stick.tcx-is-sticky
.tcx-contact-row {
	grid-template-columns: 1fr 1fr 1.65fr !important;
	width: 100% !important;
}
.tcx-desktop-stick.tcx-is-sticky
.tcx-contact-item {
	justify-content: center !important;
	min-height: 42px !important;
	gap: 10px !important;
	padding: 0 18px !important;
}
.tcx-desktop-stick.tcx-is-sticky
.tcx-contact-item:first-child {
	padding-left: 8px !important;
}
.tcx-desktop-stick.tcx-is-sticky
.tcx-contact-address {
	justify-content: flex-start !important;
	padding-left: 22px !important;
	padding-right: 0 !important;
}
.tcx-desktop-stick.tcx-is-sticky
.tcx-contact-icon {
	flex: 0 0 38px !important;
	width: 38px !important;
	height: 38px !important;
}
.tcx-desktop-stick.tcx-is-sticky
.tcx-contact-icon i {
	font-size: 16px !important;
}
.tcx-desktop-stick.tcx-is-sticky
.tcx-contact-copy small {
	margin-bottom: 2px !important;
	font-size: 10px !important;
	font-weight: 600 !important;
}
.tcx-desktop-stick.tcx-is-sticky
.tcx-contact-copy strong {
	font-size: 17px !important;
	font-weight: 700 !important;
}
.tcx-desktop-stick.tcx-is-sticky
.tcx-contact-address
.tcx-contact-copy strong {
	font-size: 13px !important;
	line-height: 1.25 !important;
}
/* =========================================================
   STICKY SLOGAN
========================================================= */
.tcx-desktop-stick.tcx-is-sticky
.tcx-slogan {
	display: inline-grid !important;
	grid-template-columns: 5px auto 43px !important;
	align-self: center !important;
	width: auto !important;
	max-width: calc(100% - 20px) !important;
	min-width: 0 !important;
	min-height: 43px !important;
	margin: 6px auto 0 !important;
}
.tcx-desktop-stick.tcx-is-sticky
.tcx-slogan-bar {
	width: 4px;
}
.tcx-desktop-stick.tcx-is-sticky
.tcx-slogan strong {
	width: auto !important;
	padding: 0 22px !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	text-align: center !important;
	white-space: nowrap !important;
}
.tcx-desktop-stick.tcx-is-sticky
.tcx-slogan-shape {
	width: 35px;
	padding-bottom: 5px;
}
.tcx-desktop-stick.tcx-is-sticky
.tcx-slogan-shape i {
	width: 3px;
}
.tcx-desktop-stick.tcx-is-sticky
.tcx-slogan-shape i:nth-child(1) {
	height: 7px;
}
.tcx-desktop-stick.tcx-is-sticky
.tcx-slogan-shape i:nth-child(2) {
	height: 12px;
}
.tcx-desktop-stick.tcx-is-sticky
.tcx-slogan-shape i:nth-child(3) {
	height: 18px;
}
/* =========================================================
   STICKY MENU
========================================================= */
.tcx-desktop-stick.tcx-is-sticky
.tcx-menu > li > a {
	min-height: 48px !important;
	padding: 0 15px !important;
	font-size: 17px !important;
	font-weight: 700 !important;
}
/* =========================================================
   PLACEHOLDER DISABLED
========================================================= */
.tcx-desktop-placeholder {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
/* =========================================================
   1200 - 1250
========================================================= */
@media screen and (min-width: 1200px) and (max-width: 1250px) {
	.tcx-main > .container,
	.tcx-menu-wrap > .container {
		max-width: 1145px !important;
	}
	.tcx-contact-copy strong {
		font-size: 19px !important;
	}
	.tcx-contact-address .tcx-contact-copy strong {
		font-size: 15px !important;
	}
	.tcx-slogan strong {
		font-size: 23px !important;
	}
	.tcx-menu > li > a {
		font-size: 17px !important;
		padding: 0 14px !important;
	}
	.tcx-desktop-stick.tcx-is-sticky .tcx-menu > li > a {
		font-size: 16px !important;
		padding: 0 13px !important;
	}
}
/* =========================================================
   992 - 1199
========================================================= */
@media screen and (min-width: 992px) and (max-width: 1199px) {
	.tcx-main > .container,
	.tcx-menu-wrap > .container {
		width: calc(100% - 30px) !important;
		max-width: 970px !important;
	}
	.tcx-main-grid {
		grid-template-columns: 175px minmax(0,1fr) !important;
	}
	.tcx-logo img {
		max-width: 138px;
	}
	.tcx-main-right {
		padding-left: 16px;
	}
	.tcx-contact-row {
		grid-template-columns: .9fr .9fr 1.45fr !important;
	}
	.tcx-contact-item {
		padding: 0 12px !important;
	}
	.tcx-contact-icon {
		flex-basis: 44px !important;
		width: 44px !important;
		height: 44px !important;
	}
	.tcx-contact-copy small {
		font-size: 10px !important;
	}
	.tcx-contact-copy strong {
		font-size: 17px !important;
	}
	.tcx-contact-address .tcx-contact-copy strong {
		font-size: 13px !important;
	}
	.tcx-slogan strong {
		padding: 0 20px !important;
		font-size: 20px !important;
	}
	.tcx-menu > li > a {
		font-size: 14px !important;
		padding: 0 9px !important;
	}
	.tcx-desktop-stick.tcx-is-sticky .tcx-menu > li > a {
		font-size: 13.5px !important;
	}
}
/* =========================================================
   MOBILE DEFAULT
========================================================= */
.tcx-mobile-header {
	display: none;
}
/* =========================================================
   MOBILE
========================================================= */
@media screen and (max-width: 767px) {
	.tcx-ticker,
	.tcx-desktop-stick,
	.tcx-desktop-placeholder {
		display: none !important;
	}
	.tcx-mobile-header {
		position: sticky;
		top: 0;
		z-index: 99990;
		display: block;
		width: 100%;
		background: #ffffff;
	}
	/* TOP */
	.tcx-mobile-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 68px;
		padding:
			7px
			13px;
		background: #ffffff;
		border-bottom:
			1px solid
			#dce4ec;
		box-shadow:
			0 4px 14px
			rgba(19,27,115,.07);
	}
	/* LOGO */
	.tcx-mobile-logo {
		display: flex;
		align-items: center;
	}
	.tcx-mobile-logo img {
		display: block;
		width: auto;
		max-width: 175px;
		height: 51px;
		object-fit: contain;
	}
	/* ACTIONS */
	.tcx-mobile-actions {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.tcx-mobile-call,
	.tcx-mobile-menu-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		margin: 0;
		padding: 0;
		border-radius: 0;
	}
	.tcx-mobile-call {
		color:
			var(--tcx-primary) !important;
		background: #f3f5fb;
		border:
			1px solid
			#d6dced;
		font-size: 17px;
	}
	.tcx-mobile-menu-btn {
		flex-direction: column;
		gap: 5px;
		background:
			var(--tcx-primary);
		border: 0;
	}
	.tcx-mobile-menu-btn span {
		display: block;
		width: 19px;
		height: 2px;
		background: #ffffff;
	}
	/* MOBILE SLOGAN */
	.tcx-mobile-slogan {
		display: flex;
		align-items: center;
		gap: 9px;
		min-height: 37px;
		padding:
			6px
			13px;
		background:
			var(--tcx-primary);
	}
	.tcx-mobile-slogan > span {
		flex: 0 0 4px;
		width: 4px;
		height: 21px;
		background:
			var(--tcx-accent);
	}
	.tcx-mobile-slogan strong {
		display: block;
		min-width: 0;
		overflow: hidden;
		color: #ffffff !important;
		font-size: 11px !important;
		font-weight: 700 !important;
		line-height: 1.25 !important;
		text-transform: uppercase;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	/* OVERLAY */
	.tcx-mobile-overlay {
		position: fixed;
		inset: 0;
		z-index: 99997;
		background:
			rgba(9,14,67,.58);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition:
			opacity .28s ease,
			visibility .28s ease;
	}
	/* DRAWER */
	.tcx-mobile-drawer {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 99998;
		display: flex;
		flex-direction: column;
		width:
			min(
				87vw,
				355px
			);
		height: 100dvh;
		overflow-y: auto;
		background: #ffffff;
		box-shadow:
			-15px 0 40px
			rgba(10,16,75,.22);
		transform:
			translateX(105%);
		transition:
			transform .34s
			cubic-bezier(.22,.61,.36,1);
	}
	body.tcx-menu-open {
		overflow: hidden;
	}
	body.tcx-menu-open
	.tcx-mobile-overlay {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
	body.tcx-menu-open
	.tcx-mobile-drawer {
		transform:
			translateX(0);
	}
	/* DRAWER HEADER */
	.tcx-mobile-drawer-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 75px;
		padding:
			9px
			14px;
		border-bottom:
			1px solid
			#e0e5ed;
	}
	.tcx-mobile-drawer-head img {
		max-width: 175px;
		max-height: 54px;
	}
	.tcx-mobile-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		margin: 0;
		padding: 0;
		color:
			var(--tcx-primary);
		background: #f1f3fa;
		border: 0;
		border-radius: 0;
	}
	/* LABEL */
	.tcx-mobile-drawer-label {
		display: flex;
		align-items: center;
		gap: 9px;
		padding:
			20px
			16px
			9px;
		color:
			var(--tcx-primary);
		font-size: 12px !important;
		font-weight: 700 !important;
	}
	.tcx-mobile-drawer-label span {
		width: 30px;
		height: 3px;
		background:
			var(--tcx-accent);
	}
	/* MOBILE NAV */
	.tcx-mobile-nav {
		padding:
			0
			14px
			20px;
	}
	.tcx-mobile-menu,
	.tcx-mobile-menu ul {
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}
	.tcx-mobile-menu > li {
		position: relative;
		border-bottom:
			1px solid
			#e4e8ef;
	}
	.tcx-mobile-menu > li > a {
		display: flex;
		align-items: center;
		min-height: 52px;
		padding:
			0
			44px
			0
			5px;
		color:
			var(--tcx-primary) !important;
		font-size: 15px !important;
		font-weight: 600 !important;
		line-height: 1.25 !important;
	}
	/* SUBMENU */
	.tcx-mobile-menu
	.sub-menu {
		display: none;
		padding:
			0
			0
			10px
			14px !important;
	}
	.tcx-mobile-menu
	.sub-menu a {
		display: block;
		padding:
			10px
			12px;
		color: #5f6d8b !important;
		font-size: 14px !important;
		font-weight: 500 !important;
	}
	/* TOGGLE */
	.tcx-mobile-sub-toggle {
		position: absolute;
		top: 7px;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		padding: 0;
		color:
			var(--tcx-primary);
		background: transparent;
		border: 0;
	}
	.tcx-mobile-sub-toggle i {
		transition:
			transform .22s ease;
	}
	.tcx-mobile-menu
	li.tcx-sub-open >
	.tcx-mobile-sub-toggle i {
		transform:
			rotate(180deg);
	}
	/* MOBILE HOTLINE */
	.tcx-mobile-hotline {
		margin-top: auto;
		padding: 18px;
		background: #f5f6fb;
		border-top:
			1px solid
			#dfe3ec;
	}
	.tcx-mobile-hotline small {
		display: block;
		margin-bottom: 8px;
		color:
			var(--tcx-muted);
		font-size: 10px !important;
		font-weight: 600 !important;
	}
	.tcx-mobile-hotline a {
		display: flex;
		align-items: center;
		gap: 10px;
		color:
			var(--tcx-primary) !important;
		font-size: 19px !important;
		font-weight: 700 !important;
	}
}
/* =========================================================
   MOBILE SMALL
========================================================= */
@media screen and (max-width: 430px) {
	.tcx-mobile-bar {
		min-height: 64px;
		padding:
			6px
			11px;
	}
	.tcx-mobile-logo img {
		max-width: 160px;
		height: 48px;
	}
	.tcx-mobile-call,
	.tcx-mobile-menu-btn {
		width: 40px;
		height: 40px;
	}
}