/* =========================================================================
   header-footer.css – Header, menu, footer, thanh liên hệ mobile – VNTRIP TMS
   -------------------------------------------------------------------------
   Header/footer dựng bằng Astra Header/Footer Builder (Giao diện → Tùy biến).
   Nội dung footer là các widget khối (Giao diện → Tiện ích → Footer Widget 1–4).
   File này chỉ bổ sung phần Astra Free không có, theo đúng bản preview đã duyệt:
     1. Header cố định (sticky), đổ bóng và thu gọn khi cuộn
     2. Header nền tối khi nằm trên khối Hero của trang chủ (có class .vt-hero)
     3. Menu: gạch chân vàng khi rê chuột/đang xem, nhãn "Sắp ra mắt"
     4. Nút CTA trong header
     5. Footer nền navy, 4 cột, danh sách liên hệ có biểu tượng
     6. Thanh liên hệ đáy màn hình điện thoại (inc/mobile-cta.php)
   ========================================================================= */

/* ---------- 1. Header cố định ---------- */
#masthead.site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	transition: box-shadow .2s, background .2s;
}
body.admin-bar #masthead.site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar #masthead.site-header { top: 46px; } }

#masthead .ast-primary-header-bar,
#masthead #ast-mobile-header .ast-primary-header-bar {
	border-bottom: 0;
	transition: background .2s, color .2s;
}
#masthead .site-primary-header-wrap { transition: min-height .2s var(--vt-ease); }

.vt-scrolled #masthead.site-header { box-shadow: 0 2px 12px rgba(36, 36, 58, .08); }
@media (min-width: 922px) {
	.vt-scrolled #masthead .ast-primary-header-bar .site-primary-header-wrap { min-height: 64px; }
}

/* Logo */
.site-header .custom-logo-link img,
.ast-site-identity .custom-logo-link img {
	border-radius: 8px;
	transition: width .2s var(--vt-ease);
}

/* ---------- 2. Header nền tối trên Hero (chỉ khi trang có khối .vt-hero) ---------- */
.vt-header-dark:not(.vt-scrolled) #masthead .ast-primary-header-bar,
.vt-header-dark:not(.vt-scrolled) #masthead #ast-mobile-header .ast-primary-header-bar {
	background: var(--vt-dark);
}
.vt-header-dark:not(.vt-scrolled) #masthead .main-header-menu > .menu-item > .menu-link,
.vt-header-dark:not(.vt-scrolled) #masthead .vt-soon-link { color: #fff; }
.vt-header-dark:not(.vt-scrolled) #masthead .ast-mobile-menu-trigger-minimal,
.vt-header-dark:not(.vt-scrolled) #masthead .mobile-menu-toggle-icon .ast-mobile-svg { color: #fff; fill: #fff; }

/* ---------- 3. Menu ---------- */
#masthead .main-header-menu > .menu-item > .menu-link {
	position: relative;
	font-size: 15px;
	font-weight: 500;
	color: var(--vt-dark);
	padding-left: 14px;
	padding-right: 14px;
}
#masthead .main-header-menu > .menu-item > .menu-link::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 18px;
	height: 2px;
	background: var(--vt-yellow);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .2s var(--vt-ease);
}
#masthead .main-header-menu > .menu-item > .menu-link:hover::after,
#masthead .main-header-menu > .menu-item.vt-active > .menu-link::after { transform: scaleX(1); }
.vt-scrolled #masthead .main-header-menu > .menu-item > .menu-link::after { bottom: 12px; }
/* Không tô màu "đang xem" mặc định của Astra cho các mục anchor */
#masthead .main-header-menu .current-menu-item > .menu-link { color: inherit; }

/* Mục "Sắp ra mắt" (inc/menu.php) – không có link, không bấm được */
.vt-soon-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: default;
	opacity: .75;
	padding: 0 14px;
	font-size: 15px;
	font-weight: 500;
	color: var(--vt-dark);
	line-height: inherit;
	min-height: inherit;
}
.main-header-menu .vt-soon-link { height: 100%; }
.vt-badge-soon {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.5;
	white-space: nowrap;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--vt-yellow);
	color: var(--vt-dark);
}
/* Menu điện thoại */
#ast-mobile-header .main-header-menu .menu-link,
#ast-mobile-header .vt-soon-link {
	font-size: 18px;
	font-weight: 600;
	color: var(--vt-dark);
	padding: 14px 20px;
}
#ast-mobile-header .vt-soon-link { display: flex; justify-content: space-between; opacity: 1; }
/* Biểu tượng mở/đóng menu điện thoại: màu tối thương hiệu thay cho xanh mặc định */
#masthead .ast-mobile-menu-trigger-minimal,
#masthead .mobile-menu-toggle-icon .ast-mobile-svg { color: var(--vt-dark); fill: var(--vt-dark); }

/* ---------- 4. Nút CTA trong header ---------- */
#masthead .ast-header-button-1 .ast-custom-button {
	padding: 12px 20px;
	font-size: 15px;
	line-height: 1.3;
	white-space: nowrap;
	box-shadow: var(--vt-sh-y);
	transition: transform .15s var(--vt-ease), box-shadow .15s var(--vt-ease);
}
.ast-header-button-1 .ast-custom-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(252, 185, 19, .38);
}

/* ---------- 5. Footer ---------- */
.site-footer { font-size: 15px; }
.site-footer,
.site-footer p,
.site-footer li,
.site-footer .ast-footer-copyright { color: rgba(255, 255, 255, .72); }
/* Dùng #colophon để thắng màu chữ/link chung của theme (nền footer tối) */
#colophon a:not(.wp-block-button__link) { color: rgba(255, 255, 255, .72); text-decoration: none; }
#colophon a:not(.wp-block-button__link):hover { color: var(--vt-yellow); }
#colophon .widget-title,
#colophon h2,
#colophon h3,
#colophon h4 {
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 16px;
}
.site-footer .site-primary-footer-wrap { padding-top: 72px; padding-bottom: 40px; }
.site-footer ul.wp-block-list,
.site-footer .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.site-footer .widget { margin-bottom: 0; }

/* Cột 1: logo, mô tả, "Thuộc thương hiệu" + logo VNTRIP trên thẻ trắng */
.site-footer .vt-footer-logo img { width: 56px; height: 56px; border-radius: 10px; }
.site-footer .vt-footer-desc { font-size: 14.5px; max-width: 320px; }
.site-footer .vt-footer-parent { align-items: center; gap: 10px; font-size: 13px; }

/* Cột 1 – thiết kế mới (duyệt 14/11/2026, theo mẫu tham khảo):
   logo | vạch dọc | "VNTRIP TMS" + "TRAVEL MANAGEMENT SYSTEM"; mô tả; đường kẻ; "Thương hiệu thuộc" + logo VNTRIP */
.site-footer .vt-fb-head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.site-footer .vt-fb-logo { flex: none; line-height: 0; }
.site-footer .vt-fb-logo img { display: block; width: 64px; height: 64px; border-radius: 12px; }
.site-footer .vt-fb-sep { flex: none; width: 1px; align-self: stretch; background: rgba(255, 255, 255, .18); }
.site-footer .vt-fb-text p { margin: 0; }
.site-footer .vt-fb-name { font-family: var(--vt-font); font-size: 27px; font-weight: 700; line-height: 1.2; letter-spacing: .01em; color: #fff; }
.site-footer .vt-fb-tag { margin-top: 4px !important; font-family: var(--vt-font); font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: .03em; text-transform: uppercase; color: var(--vt-yellow); }
.site-footer .vt-fb-head + .vt-footer-desc,
.site-footer .widget:has(.vt-fb-head) + .widget .vt-footer-desc { max-width: 380px; font-size: 15px; line-height: 1.65; }
.site-footer .vt-footer-parent { max-width: 380px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 14px; gap: 12px; }
@media (max-width: 767px) {
	.site-footer .vt-fb-name { font-size: 23px; }
	.site-footer .vt-fb-tag { font-size: 12.5px; }
	.site-footer .vt-fb-head { gap: 14px; }
	.site-footer .vt-fb-logo img { width: 56px; height: 56px; }
}
.site-footer .vt-footer-parent p { margin: 0; }
.site-footer .vt-footer-chip { margin: 0; }
/* Logo VNTRIP: file PNG nền trong suốt, đặt trực tiếp trên nền footer (quyết định 12/11/2026,
   thay thẻ nền trắng). Giữ nguyên màu và tỷ lệ gốc: chỉ đặt chiều cao, chiều rộng tự tính. */
.site-footer .vt-footer-chip img {
	height: 34px;
	width: auto;
	max-width: none;
	background: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}

/* Cột 4: liên hệ – biểu tượng vàng trước mỗi dòng (thứ tự: điện thoại, Zalo, email, địa chỉ) */
.site-footer .vt-contact-list li { position: relative; padding-left: 26px; }
/* 1.11.7: tách nút "Đăng ký tư vấn / Demo" khỏi dòng địa chỉ (trước đây chồng lên ~7px) */
.site-footer .widget ul.vt-contact-list { margin-bottom: 26px; }
.site-footer .vt-contact-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 16px;
	height: 16px;
	background: var(--vt-yellow);
	-webkit-mask: var(--vt-ic) center / contain no-repeat;
	mask: var(--vt-ic) center / contain no-repeat;
}
.site-footer .vt-contact-list li:nth-child(1) { --vt-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
.site-footer .vt-contact-list li:nth-child(2) { --vt-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8.5 8.5 0 0 1-12.4 7.5L3 21l1.6-5A8.5 8.5 0 1 1 21 12z'/%3E%3C/svg%3E"); }
.site-footer .vt-contact-list li:nth-child(3) { --vt-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2'/%3E%3Cpath d='m3 6 9 7 9-7'/%3E%3C/svg%3E"); }
.site-footer .vt-contact-list li:nth-child(4) { --vt-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }

/* Nút trong footer */
#colophon .wp-block-button__link {
	background: var(--vt-yellow);
	color: var(--vt-dark);
	margin-top: 8px;
	font-weight: 600;
	font-size: 15px;
	border-radius: var(--vt-r-btn);
	padding: 11px 18px;
	box-shadow: var(--vt-sh-y);
}
#colophon .wp-block-button__link:hover { color: var(--vt-dark); }

/* Dòng dưới cùng: pháp nhân, địa chỉ, bản quyền | chính sách */
.site-footer .site-below-footer-wrap {
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-size: 13.5px;
}
.site-footer .ast-footer-copyright strong { color: #fff; font-weight: 600; }
.site-footer .vt-policy { display: inline-flex; gap: 20px; }
.site-footer .vt-policy > span { opacity: .6; } /* chưa có trang: chữ mờ, không link */
.site-footer .vt-policy a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.site-footer .vt-policy a:hover,
.site-footer .vt-policy a:focus-visible { color: var(--vt-yellow); text-decoration: underline; text-underline-offset: 3px; }

/* Tỷ lệ 4 cột như preview (máy tính) */
@media (min-width: 922px) {
	.site-footer .site-primary-footer-wrap .ast-builder-grid-row {
		grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
		gap: 40px;
	}
}
@media (max-width: 921px) {
	.site-footer .site-primary-footer-wrap { padding-top: 48px; }
	.site-footer .site-primary-footer-wrap .ast-builder-grid-row { gap: 32px; }
	/* Lề hai bên để chữ không sát mép màn hình */
	#colophon .site-primary-footer-wrap,
	#colophon .site-below-footer-wrap { padding-left: 20px; padding-right: 20px; }
}

/* Nút "lên đầu trang" của Astra: màu thương hiệu; trên điện thoại đặt cao hơn thanh liên hệ */
#ast-scroll-top { background-color: var(--vt-dark); color: #fff; border-radius: 10px; }
#ast-scroll-top:hover { background-color: var(--vt-yellow); color: var(--vt-dark); }
@media (max-width: 767px) { #ast-scroll-top { bottom: 96px; } }

/* ---------- 6. Thanh liên hệ đáy màn hình điện thoại ---------- */
.vt-mcta { display: none; }
@media (max-width: 767px) {
	.vt-mcta {
		display: flex;
		gap: 8px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 998;
		background: #fff;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
		box-shadow: 0 -4px 16px rgba(36, 36, 58, .12);
		transform: translateY(110%);
		transition: transform .25s var(--vt-ease);
	}
	.vt-mcta.vt-show { transform: none; }
	.vt-mcta__main {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 46px;
		border-radius: var(--vt-r-btn);
		background: var(--vt-yellow);
		color: var(--vt-dark);
		font-weight: 600;
		font-size: 16px;
		text-decoration: none;
		box-shadow: var(--vt-sh-y);
	}
	.vt-mcta__main:hover, .vt-mcta__main:focus { color: var(--vt-dark); }
	.vt-mcta__ic {
		width: 46px;
		height: 46px;
		flex: none;
		display: grid;
		place-items: center;
		border-radius: var(--vt-r-btn);
		border: 1.5px solid var(--vt-border);
		color: var(--vt-dark);
		font-weight: 700;
		font-size: 12px;
		text-decoration: none;
	}
	.vt-mcta__ic svg { width: 20px; height: 20px; fill: none; stroke: var(--vt-dark); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
	/* Chừa chỗ để thanh không che nội dung cuối trang */
	body.vt-site { padding-bottom: 0; }
	.site-footer .site-below-footer-wrap { padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) {
	#masthead.site-header, #masthead .site-primary-header-wrap, .vt-mcta { transition: none; }
}