/* ==========================================================
   TRƯỜNG CÁT FOOTER - LIGHT BLUE VERSION
   PHÙ HỢP LOGO XANH ĐẬM NỀN TRONG SUỐT
========================================================== */
/* ==========================================================
   01. RESET
========================================================== */
.tcft-footer,
.tcft-footer *,
.tcft-footer *::before,
.tcft-footer *::after {
	box-sizing: border-box;
}
/* ==========================================================
   02. FOOTER ROOT
========================================================== */
.tcft-footer {
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	color: #365b82;
	background: #eef6fd;
}
/* ==========================================================
   03. FOOTER BACKGROUND
========================================================== */
.tcft-wrap {
	width: 100%;
	padding: 50px 0 0;
	background:
		linear-gradient(
			135deg,
			#f7fbff 0%,
			#edf6ff 45%,
			#e5f1fb 100%
		);
	border-top: 3px solid #068ff0;
}
/* ==========================================================
   04. CONTAINER
========================================================== */
.tcft-footer .container {
	width: 100% !important;
	max-width: 1220px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
}
/* ==========================================================
   05. GRID
========================================================== */
.tcft-grid {
	width: 100%;
	display: grid;
	grid-template-columns:
		1.25fr
		1fr
		1fr
		1fr
		1.12fr;
	column-gap: 40px;
	align-items: start;
}
.tcft-col {
	min-width: 0;
	font-size: 13px;
	line-height: 1.65;
	color: #456b91;
}
/* ==========================================================
   06. BRAND
========================================================== */
.tcft-brand {
	padding-right: 8px;
}
/* ==========================================================
   07. LOGO
   Không đổi màu / không thêm nền trắng
========================================================== */
.tcft-logo {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 18px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-decoration: none !important;
}
.tcft-logo:hover {
	transform: none;
}
.tcft-logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 180px;
	max-height: 60px;
	margin: 0;
	padding: 0;
	object-fit: contain;
}
/* ==========================================================
   08. COMPANY NAME
========================================================== */
.tcft-company-name {
	margin: 0 0 13px;
	padding: 0;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.55;
	text-transform: uppercase;
	color: #073b78;
}
/* ==========================================================
   09. COMPANY CONTENT
========================================================== */
.tcft-company-content {
	font-size: 13px;
	line-height: 1.65;
	color: #456b91;
}
.tcft-company-content p {
	margin: 0 0 7px;
	padding: 0;
	color: inherit;
}
.tcft-company-content strong {
	font-weight: 700;
	color: #123e6c;
}
.tcft-company-content a {
	color: #078fe9 !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}
.tcft-company-content a:hover {
	color: #045ca8 !important;
}
/* ==========================================================
   10. COLUMN TITLE
========================================================== */
.tcft-title {
	position: relative;
	margin: 0 0 20px;
	padding: 0 0 11px;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.25;
	text-transform: uppercase;
	color: #073b78;
}
.tcft-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 34px;
	height: 3px;
	border-radius: 20px;
	background:
		linear-gradient(
			90deg,
			#08b8ff,
			#0674d8
		);
}
/* ==========================================================
   11. BRANCH
========================================================== */
.tcft-branch {
	margin-bottom: 20px;
}
.tcft-branch:last-child {
	margin-bottom: 0;
}
.tcft-branch h4 {
	margin: 0 0 7px;
	padding: 0;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.4;
	text-transform: uppercase;
	color: #0b3768;
}
.tcft-branch-content {
	font-size: 12.5px;
	line-height: 1.65;
	color: #4b7198;
}
.tcft-branch-content p {
	margin: 0 0 4px;
	padding: 0;
	color: inherit;
}
.tcft-branch-content strong {
	font-weight: 700;
	color: #153d68;
}
.tcft-branch-content a {
	color: #078ee5 !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}
.tcft-branch-content a:hover {
	color: #045ba3 !important;
}
/* ==========================================================
   12. CONTACT ROW
========================================================== */
.tcft-contact-row {
	display: grid;
	grid-template-columns:
		20px
		minmax(0, 1fr);
	column-gap: 10px;
	align-items: start;
	margin-bottom: 16px;
}
.tcft-contact-icon {
	padding-top: 2px;
	font-size: 15px;
	color: #0798ed;
}
.tcft-contact-row strong {
	font-size: 12.5px;
	font-weight: 800;
	line-height: 1.55;
	text-transform: uppercase;
	color: #0b3768;
}
/* ==========================================================
   13. CONTACT INFO
========================================================== */
.tcft-contact-info {
	display: flex;
	flex-direction: column;
}
.tcft-contact-info > span {
	margin-bottom: 2px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #6889aa;
}
.tcft-contact-info a {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: #0a4b89 !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}
.tcft-contact-info a:hover {
	color: #078fe9 !important;
}
.tcft-hotline {
	font-size: 17px !important;
	font-weight: 800 !important;
	letter-spacing: 0.2px;
	color: #006bc7 !important;
}
/* ==========================================================
   14. SUPPORT
========================================================== */
.tcft-support {
	margin-top: 22px;
	padding-top: 17px;
	border-top:
		1px solid
		rgba(20, 70, 120, 0.15);
}
.tcft-support h4 {
	margin: 0 0 12px;
	padding: 0;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #073b78;
}
/* ==========================================================
   15. SUPPORT MENU
========================================================== */
.tcft-support-menu {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.tcft-support-menu li {
	margin: 0 0 8px !important;
	padding: 0 !important;
	list-style: none !important;
}
.tcft-support-menu li a {
	position: relative;
	display: inline-block;
	padding-left: 13px;
	font-size: 12.5px;
	line-height: 1.5;
	color: #466d94 !important;
	text-decoration: none !important;
	transition:
		color 0.2s ease,
		padding 0.2s ease;
}
.tcft-support-menu li a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #078fe9;
}
.tcft-support-menu li a:hover {
	padding-left: 17px;
	color: #0067bd !important;
}
/* ==========================================================
   16. SOCIAL
========================================================== */
.tcft-social {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 20px;
}
.tcft-social a {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #bfd8ee;
	border-radius: 50%;
	background: #ffffff;
	color: #087bcf !important;
	text-decoration: none !important;
	box-shadow:
		0 3px 10px rgba(20, 70, 120, 0.08);
	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
}
.tcft-social a i {
	font-size: 15px;
	color: inherit;
}
.tcft-social a:hover {
	color: #ffffff !important;
	background:
		linear-gradient(
			135deg,
			#0aa5f5,
			#066ac7
		);
	border-color: #078fe9;
	transform: translateY(-3px);
	box-shadow:
		0 6px 16px rgba(0, 115, 210, 0.22);
}
.tcft-tiktok {
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
}
/* ==========================================================
   17. BENEFITS
========================================================== */
.tcft-benefits {
	width: 100%;
	display: grid;
	grid-template-columns:
		repeat(3, 1fr);
	column-gap: 45px;
	margin-top: 38px;
	padding: 25px 0;
	border-top:
		1px solid
		rgba(20, 70, 120, 0.14);
	border-bottom:
		1px solid
		rgba(20, 70, 120, 0.14);
}
.tcft-benefit {
	display: grid;
	grid-template-columns:
		18px
		minmax(0, 1fr);
	column-gap: 11px;
	align-items: start;
}
.tcft-benefit i {
	margin-top: 3px;
	font-size: 14px;
	color: #068ee8;
}
.tcft-benefit p {
	margin: 0;
	padding: 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: #4c7095;
}
/* ==========================================================
   18. FOOTER BOTTOM
========================================================== */
.tcft-bottom {
	min-height: 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
}
/* ==========================================================
   19. BOTTOM LEFT
========================================================== */
.tcft-bottom-link {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
	color: #087ed2;
}
.tcft-bottom-link i {
	font-size: 13px;
	color: #078fe9;
}
/* ==========================================================
   20. COPYRIGHT
========================================================== */
.tcft-copyright {
	flex: 0 0 auto;
	font-size: 12px;
	line-height: 1.4;
	text-align: right;
	color: #55799d;
}
/* ==========================================================
   21. OLD THEME OVERRIDE
========================================================== */
.tcft-footer p,
.tcft-footer h1,
.tcft-footer h2,
.tcft-footer h3,
.tcft-footer h4,
.tcft-footer h5,
.tcft-footer h6,
.tcft-footer ul,
.tcft-footer li {
	font-family: Arial, Helvetica, sans-serif;
}
.tcft-footer ul,
.tcft-footer li {
	margin-top: 0 !important;
	margin-bottom: 0;
}
.tcft-footer img {
	border: 0 !important;
	box-shadow: none !important;
}
.tcft-footer a {
	text-decoration: none !important;
}
/* ==========================================================
   22. HOVER LINK CHUNG
========================================================== */
.tcft-footer a {
	transition:
		color 0.2s ease,
		background 0.2s ease,
		transform 0.2s ease;
}
/* ==========================================================
   23. LARGE SCREEN
========================================================== */
@media screen and (min-width: 1400px) {
	.tcft-footer .container {
		max-width: 1240px !important;
	}
}
/* ==========================================================
   24. TABLET / SMALL DESKTOP
========================================================== */
@media screen and (max-width: 1199px) {
	.tcft-grid {
		grid-template-columns:
			repeat(2, 1fr);
		column-gap: 40px;
		row-gap: 36px;
	}
	.tcft-brand {
		grid-column:
			1
			/
			-1;
		padding-right: 0;
	}
	.tcft-contact {
		grid-column:
			1
			/
			-1;
	}
	.tcft-benefits {
		column-gap: 25px;
	}
}
/* ==========================================================
   25. TABLET
========================================================== */
@media screen and (max-width: 991px) {
	.tcft-wrap {
		padding-top: 42px;
	}
	.tcft-benefits {
		grid-template-columns: 1fr;
		row-gap: 18px;
	}
	.tcft-bottom {
		padding: 20px 0;
		min-height: 0;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 10px;
	}
	.tcft-copyright {
		text-align: left;
	}
}
/* ==========================================================
   26. MOBILE
========================================================== */
@media screen and (max-width: 767px) {
	.tcft-wrap {
		padding-top: 34px;
	}
	.tcft-footer .container {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
	.tcft-grid {
		display: block;
	}
	.tcft-col {
		margin-bottom: 32px;
	}
	.tcft-col:last-child {
		margin-bottom: 0;
	}
	.tcft-logo img {
		max-width: 165px;
		max-height: 55px;
	}
	.tcft-company-name {
		font-size: 13.5px;
	}
	.tcft-benefits {
		margin-top: 30px;
	}
}
/* ==========================================================
   27. SMALL MOBILE
========================================================== */
@media screen and (max-width: 480px) {
	.tcft-wrap {
		padding-top: 30px;
	}
	.tcft-title {
		font-size: 13px;
	}
	.tcft-company-name {
		font-size: 13px;
	}
	.tcft-branch h4 {
		font-size: 12.5px;
	}
	.tcft-company-content,
	.tcft-branch-content,
	.tcft-benefit p {
		font-size: 12px;
	}
	.tcft-social a {
		width: 34px;
		height: 34px;
	}
}
/* =========================================================
   TRƯỜNG CÁT
   MOBILE BOTTOM NAV
   COMPACT - CLEAN - BLUE / WHITE
========================================================= */
/* =========================================================
   DEFAULT
========================================================= */
.tc-mobile-bottom-nav {
	display: none;
}
/* =========================================================
   MOBILE
========================================================= */
@media screen and (max-width: 767px) {
	/* =====================================================
	   ẨN CỤM PHONE / ZALO / MESSENGER NỔI CŨ
	===================================================== */
	.hal {
		display: none !important;
	}
	/* =====================================================
	   CHỪA KHOẢNG CUỐI TRANG
	===================================================== */
	body {
		padding-bottom:
			calc(
				68px +
				env(safe-area-inset-bottom)
			);
	}
	/* =====================================================
	   BACK TO TOP
	   ĐẨY LÊN KHỎI STICKY
	===================================================== */
	#back-to-top {
		bottom:
			calc(
				70px +
				env(safe-area-inset-bottom)
			) !important;
	}
	/* =====================================================
	   BOTTOM NAV
	===================================================== */
	.tc-mobile-bottom-nav {
		position: fixed;
		left: 12px;
		right: 12px;
		bottom:
			calc(
				8px +
				env(safe-area-inset-bottom)
			);
		z-index: 99990;
		display: grid;
		grid-template-columns:
			repeat(
				4,
				minmax(0, 1fr)
			);
		align-items: center;
		height: 56px;
		padding:
			4px
			6px;
		background:
			rgba(
				255,
				255,
				255,
				.97
			);
		border:
			1px solid
			rgba(
				8,
				37,
				74,
				.10
			);
		border-radius: 17px;
		box-shadow:
			0 7px 22px
			rgba(
				8,
				37,
				74,
				.13
			);
		backdrop-filter:
			blur(12px);
		-webkit-backdrop-filter:
			blur(12px);
		font-family:
			"Bai Jamjuree",
			Arial,
			sans-serif;
		transform:
			translateY(0);
		opacity: 1;
		transition:
			transform .28s ease,
			opacity .22s ease;
	}
	/* =====================================================
	   ẨN KHI FOOTER THẬT XUẤT HIỆN
	===================================================== */
	.tc-mobile-bottom-nav.is-hidden {
		transform:
			translateY(
				calc(
					100% +
					22px
				)
			);
		opacity: 0;
		pointer-events: none;
	}
	/* =====================================================
	   ITEM
	===================================================== */
	.tc-mobile-bottom-item {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-width: 0;
		height: 48px;
		margin: 0;
		padding:
			2px
			3px;
		color: #617b90 !important;
		background: transparent;
		border: 0;
		border-radius: 12px;
		text-decoration: none !important;
		-webkit-tap-highlight-color:
			transparent;
		transition:
			background .2s ease,
			color .2s ease,
			transform .15s ease;
	}
	/* =====================================================
	   ACTIVE
	===================================================== */
	.tc-mobile-bottom-item:active {
		transform:
			scale(.96);
		background:
			#f1f7fb;
	}
	/* =====================================================
	   ICON
	===================================================== */
	.tc-mobile-bottom-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		color: #0785d8 !important;
		background: transparent !important;
		border-radius: 9px;
		font-size: 16px;
		line-height: 1;
		box-shadow: none !important;
		transition:
			color .2s ease,
			background .2s ease;
	}
	.tc-mobile-bottom-icon i {
		margin: 0 !important;
		padding: 0 !important;
		color: inherit !important;
		font-size: inherit;
		line-height: 1 !important;
	}
	/* =====================================================
	   LABEL
	===================================================== */
	.tc-mobile-bottom-label {
		display: block;
		max-width: 100%;
		overflow: hidden;
		color: #58738a;
		font-size: 9.5px;
		font-weight: 700;
		line-height: 1.1;
		text-align: center;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	/* =====================================================
	   HOTLINE
	   GIỐNG HOÀN TOÀN CÁC NÚT KHÁC
	===================================================== */
	.tc-mobile-bottom-call {
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 3px !important;
		height: 48px !important;
		padding:
			2px
			3px !important;
		color: #617b90 !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 12px !important;
		box-shadow: none !important;
	}
	.tc-mobile-bottom-call
	.tc-mobile-bottom-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		color: #0785d8 !important;
		background: transparent !important;
		border-radius: 9px;
		font-size: 16px;
		box-shadow: none !important;
	}
	.tc-mobile-bottom-call
	.tc-mobile-bottom-label {
		color: #58738a !important;
		font-size: 9.5px;
		font-weight: 700;
		line-height: 1.1;
	}
	/* =====================================================
	   HOVER
	===================================================== */
	.tc-mobile-bottom-item:hover,
	.tc-mobile-bottom-call:hover {
		color: #0785d8 !important;
		background:
			#f2f8fc !important;
	}
	.tc-mobile-bottom-item:hover
	.tc-mobile-bottom-icon,
	.tc-mobile-bottom-call:hover
	.tc-mobile-bottom-icon {
		color: #0785d8 !important;
		background:
			transparent !important;
	}
	/* =====================================================
	   CURRENT / FOCUS
	===================================================== */
	.tc-mobile-bottom-item:focus,
	.tc-mobile-bottom-call:focus {
		color: #0785d8 !important;
		outline: none !important;
		background:
			#f2f8fc !important;
	}
	/* =====================================================
	   CHẶN STYLE CŨ CỦA HOTLINE
	===================================================== */
	.tc-mobile-bottom-call-icon,
	.tc-mobile-bottom-call-copy {
		display: none !important;
	}
}
/* =========================================================
   MOBILE NHỎ
========================================================= */
@media screen and (max-width: 380px) {
	.tc-mobile-bottom-nav {
		left: 8px;
		right: 8px;
		bottom:
			calc(
				6px +
				env(safe-area-inset-bottom)
			);
		height: 53px;
		padding:
			3px
			4px;
		border-radius: 15px;
	}
	.tc-mobile-bottom-item,
	.tc-mobile-bottom-call {
		height: 46px !important;
	}
	.tc-mobile-bottom-icon,
	.tc-mobile-bottom-call
	.tc-mobile-bottom-icon {
		width: 26px;
		height: 26px;
		font-size: 15px;
	}
	.tc-mobile-bottom-label,
	.tc-mobile-bottom-call
	.tc-mobile-bottom-label {
		font-size: 9px;
	}
}
/* =========================================================
   MOBILE RẤT NHỎ
========================================================= */
@media screen and (max-width: 340px) {
	.tc-mobile-bottom-nav {
		left: 5px;
		right: 5px;
		height: 51px;
	}
	.tc-mobile-bottom-item,
	.tc-mobile-bottom-call {
		height: 44px !important;
	}
	.tc-mobile-bottom-label,
	.tc-mobile-bottom-call
	.tc-mobile-bottom-label {
		font-size: 8.5px;
	}
	.tc-mobile-bottom-icon,
	.tc-mobile-bottom-call
	.tc-mobile-bottom-icon {
		width: 24px;
		height: 24px;
		font-size: 14px;
	}
}
/* =========================================================
   TABLET / DESKTOP
========================================================= */
@media screen and (min-width: 768px) {
	.tc-mobile-bottom-nav {
		display: none !important;
	}
}