/*
 * Header — Figma node 7:703 (1440×85)
 * Cấu trúc, sticky, transparent do Header Builder của Blocksy dựng (scripts/blocksy-header.php).
 * File này chỉ override phần builder không làm được:
 *   - lề 80px, style nút gọi có icon, mục menu active đậm
 *   - hiệu ứng auto-hide: cuộn xuống header trượt thu lên, cuộn lên/hover mép trên thì trượt xuống
 */

#header,
#offcanvas {
	--vg-header-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--vg-header-speed: 0.4s;
	--vg-header-text: var(--vg-color-bg-2);
	--vg-header-accent: #f89c7d;
}

/* Lề 80px như Figma */
#header [data-device="desktop"] [data-row*="middle"] > .ct-container-fluid {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: 80px;
}

@media (max-width: 1279.98px) {
	#header [data-device="desktop"] [data-row*="middle"] > .ct-container-fluid {
		padding-inline: 40px;
	}
}

/* Logo: Figma đặt file PNG vuông vào khung 98×61 (object-fit: fill) */
#header .site-logo-container img {
	width: 98px;
	height: 61px;
	max-width: none;
	max-height: none;
	object-fit: fill;
}

#header [data-device="mobile"] .site-logo-container img {
	width: 77px;
	height: 48px;
}

/* Menu: mục active đậm + tracking 1% (Figma "Tổng quan") */
#header .menu > li.current-menu-item > a,
#header .menu > li.current-menu-ancestor > a {
	font-weight: 700;
	letter-spacing: 0.01em;
}

/* Nút gọi (header + menu mobile): viền Background 2, icon điện thoại 18px, gap 12 */
#header .vg-header-phone,
#offcanvas .vg-header-phone {
	--theme-button-min-height: auto;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 11px 15px; /* Figma 12/16 tính cả viền 1px → khung 153×45 */
	border: 1px solid var(--vg-header-text);
	border-radius: var(--vg-btn-radius);
	background: transparent;
	color: var(--vg-header-text);
	font-family: var(--vg-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	transition: color 0.2s ease, border-color 0.2s ease;
}

#header .vg-header-phone::before,
#offcanvas .vg-header-phone::before {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url("../icons/phone-calling.svg") center / 18px 18px no-repeat;
	mask: url("../icons/phone-calling.svg") center / 18px 18px no-repeat;
}

#header .vg-header-phone:hover,
#header .vg-header-phone:focus-visible,
#offcanvas .vg-header-phone:hover,
#offcanvas .vg-header-phone:focus-visible {
	border-color: var(--vg-header-accent);
	background: transparent;
	color: var(--vg-header-accent);
}

/* Mobile: ☰ trái | logo giữa | nút gọi phải — nút gọi gọn, cao ~34px */
#header [data-device="mobile"] .vg-header-phone {
	gap: 6px;
	padding: 7px 10px;
	font-size: 12px;
	line-height: 1.5;
	white-space: nowrap;
}

#header [data-device="mobile"] .vg-header-phone::before {
	width: 14px;
	height: 14px;
	-webkit-mask-size: 14px 14px;
	mask-size: 14px 14px;
}

/* Điện thoại (≤ 430px — gồm cả iPhone Pro Max): chỉ còn icon để không chạm logo ở giữa */
@media (max-width: 430px) {
	#header [data-device="mobile"] .vg-header-phone {
		width: 34px;
		height: 34px;
		padding: 0;
		justify-content: center;
		font-size: 0;
		gap: 0;
	}
}

/*
 * Auto-hide của Blocksy đặt inline transform translateY(-85px | 0) nhưng không có transition.
 * Transition chỉ bật khi header đã fixed ổn định (class vg-sticky-ready do assets/js/header.js gắn),
 * tránh việc header bật lại đỉnh rồi trượt lên ngay lúc chuyển static → fixed.
 */
#header [data-sticky*="auto-hide"].vg-sticky-ready {
	transition:
		transform var(--vg-header-speed) var(--vg-header-ease),
		box-shadow 0.2s ease,
		backdrop-filter 0.2s ease;
}

/* Khi header đang ẩn: vùng 24px ở mép trên màn hình — rê chuột vào thì header trượt xuống */
#header [data-sticky*="auto-hide"][style*="translateY(-"]::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 24px;
}

#header [data-sticky*="auto-hide"][style*="translateY(-"]:hover,
#header [data-sticky*="auto-hide"][style*="translateY(-"]:focus-within {
	transform: translateY(0) !important; /* thắng inline style của Blocksy */
}

@media (prefers-reduced-motion: reduce) {
	#header [data-sticky*="auto-hide"].vg-sticky-ready {
		transition: none;
	}
}