/* Kính mờ của header; hero region + lightbox dùng lại cho nút trên ảnh */
:root {
	--vo-header-blur: blur(14px) saturate(180%);        /* Kính mờ khi đã cuộn */
	--vo-header-glass: rgb(255 255 255 / .72);          /* Nền khi đã cuộn */
}
/* Header + menu mobile (block vo/header; JS ở blocks/header/view.js).
   Cuộn xuống: nền trắng -> kính mờ (scroll-driven animation; trình duyệt chưa hỗ trợ thì giữ trắng).
   <=980px: burger mở #vo-menu. >=981px: menu ngang + mega menu theo vùng + nút Get eSIM. */

.vo-site-header {
	/* Chỉnh ở đây */
	--vo-header-frost-after: 24px;                      /* Cuộn bấy nhiêu thì mờ hẳn */

	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: var(--vo-z-header);
	background-color: var(--vo-surface);
	border-bottom: 1px solid transparent;
}
/* Thanh admin trên điện thoại không dính, nên header dính sát mép trên */
@media (max-width: 600px) {
	.admin-bar .vo-site-header { top: 0; }
}

@supports (animation-timeline: scroll()) {
	.vo-site-header {
		animation: vo-header-frost linear both;
		animation-timeline: scroll(root block);
		animation-range: 0 var(--vo-header-frost-after);
		-webkit-backdrop-filter: var(--vo-header-blur);   /* luôn bật, không animate: nội suy blur trên điện thoại bị chập chờn */
		backdrop-filter: var(--vo-header-blur);
	}
}
@keyframes vo-header-frost {
	from {
		background-color: var(--vo-surface);
		border-bottom-color: transparent;
	}
	to {
		background-color: var(--vo-header-glass);
		border-bottom-color: var(--vo-divider);
	}
}
/* Trang vừa khôi phục, vị trí cuộn chưa về (perf.php, html.vo-await-scroll): giữ nền kính như lúc rời đi, kẻo nháy trắng đặc rồi mới kính */
@supports (animation-timeline: scroll()) {
	html.vo-await-scroll .vo-site-header {
		animation: none;
		background-color: var(--vo-header-glass);
		border-bottom-color: var(--vo-divider);
	}
}
/* Điện thoại, đang khoá (menu / Search / Saved / Map): body bị ghim nên cuộn trang về 0, nền header chạy theo cuộn sẽ nháy sang trắng đặc.
   Giữ nền như lúc chưa khoá (vo-lock-top = đang ở đầu trang: để nguyên, đúng lúc đó nền vốn là trắng đặc). */
@media (max-width: 599px) {
	@supports (animation-timeline: scroll()) {
		html.vo-lock:not(.vo-lock-soft):not(.vo-lock-top) .vo-site-header {
			animation: none;
			background-color: var(--vo-header-glass);
			border-bottom-color: var(--vo-divider);
		}
	}
}
/* html.vo-lock trên điện thoại: site.js ghim body (position: fixed) nên header sticky bị kéo đi theo.
   Ghim header cố định, bù padding để nội dung không nhảy. */
@media (max-width: 599px) {
	html.vo-lock:not(.vo-lock-soft) .vo-site-header { position: fixed; left: 0; right: 0; }   /* soft = hộp thoại: body không bị ghim */
	html.vo-lock:not(.vo-lock-soft) .wp-site-blocks { padding-top: calc(var(--vo-header-h) + 1px); }   /* = cao header + đường kẻ 1px */
}
/* Điện thoại + tablet (cùng mốc với burger): vuốt xuống thì header trượt lên ẩn, vuốt lên NHANH mới trượt xuống (view.js bật html.vo-hdr-hidden).
   Nav trong trang (.vo-secnav) dính dưới header nên trượt lên theo, không để hở. Menu / panel đang mở thì bỏ transform:
   #vo-menu nằm trong header và là position: fixed, header mà còn transform thì nó bị lệch. */
/* MỘT nguồn sự thật cho chuyển động: --vo-hdr-shift (0 = header hiện, cả cao header = ẩn) chạy bằng đúng 1 transition ở <html>.
   Header (transform) và nav (top) chỉ ĐỌC giá trị đó nên mỗi khung hình hai thứ cùng đi quãng như nhau; không còn hai transition riêng phải canh cho khớp.
   Nav đổi top chứ không dùng transform: transform kéo cả nav chưa dính (còn nằm giữa trang) lên đè nội dung phía trên. */
@property --vo-hdr-shift {
	syntax: '<length>';
	inherits: true;
	initial-value: 0px;
}
@media (max-width: 980px) {
	html {
		/* Chỉnh ở đây */
		--vo-hdr-shift-dist: var(--vo-panel-bar-h);     /* quãng trượt = cao header + 1px kẻ dưới, để mép kẻ cũng lên hết */

		transition: --vo-hdr-shift var(--vo-dur) var(--vo-ease);   /* hiện: chậm dần, rõ ngay từ đầu */
	}
	html.vo-hdr-hidden {
		--vo-hdr-shift: var(--vo-hdr-shift-dist);
		transition: --vo-hdr-shift var(--vo-dur-fast) ease-out;    /* ẩn: nhanh */
	}
	.vo-site-header { transform: translateY(calc(-1 * var(--vo-hdr-shift))); }
	html.vo-hdr-hidden .vo-site-header { pointer-events: none; }   /* đã trượt ra ngoài thì không chặn chạm vào nội dung bên dưới */
	.vo-secnav { top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--vo-header-h) - var(--vo-hdr-shift)); }
	/* Menu / panel đang mở: #vo-menu nằm trong header và là position: fixed, header mà còn transform thì nó bị lệch */
	html.vo-menu-open .vo-site-header,
	html.vo-lock:not(.vo-lock-soft) .vo-site-header { transform: none; pointer-events: auto; }   /* hộp thoại (soft): header ẩn thì giữ ẩn */
}
@media (max-width: 600px) {
	.admin-bar .vo-secnav { top: calc(var(--vo-header-h) - var(--vo-hdr-shift)); }   /* ≤600px thanh admin cuộn theo trang */
}
/* Điện thoại + tablet: nền header đặc (không kính mờ) để lúc trượt lên xuống không lộ nội dung phía sau; chỉ còn đường kẻ dưới hiện dần khi cuộn.
   Nav trong trang cũng nền đặc nên hai thanh đồng nhất. */
@supports (animation-timeline: scroll()) {
	@media (max-width: 980px) {
		.vo-site-header {
			animation-name: vo-header-line;
			background-color: var(--vo-surface);
			-webkit-backdrop-filter: none;
			backdrop-filter: none;
		}
		html.vo-await-scroll .vo-site-header,
		html.vo-lock:not(.vo-lock-soft):not(.vo-lock-top) .vo-site-header { background-color: var(--vo-surface); }
	}
}
@keyframes vo-header-line {
	from { border-bottom-color: transparent; }
	to { border-bottom-color: var(--vo-divider); }
}
@media (prefers-reduced-motion: reduce) {
	html, html.vo-hdr-hidden { transition: none; }
}

.vo-header { position: relative; }                  /* mốc cho mega menu */
.vo-header__bar {
	display: flex;
	align-items: center;
	gap: var(--vo-space-4);
	height: var(--vo-header-h);
	max-width: var(--vo-wrap);
	margin-inline: auto;
	padding-inline: var(--vo-gutter);
}

.vo-header__logo { flex: none; display: flex; align-items: center; }
.vo-header__logo img { display: block; width: auto; height: 36px; }
.vo-header__name {
	color: var(--vo-primary);
	font-size: var(--vo-fs-lg);
	font-weight: 800;
	letter-spacing: -.02em;
	text-decoration: none;
}

/* Menu ngang (desktop) */
.vo-header__nav { display: none; align-self: stretch; }
.vo-header__nav > ul {
	display: flex;
	align-items: stretch;                               /* mục cao hết header: chuột xuống bảng không hụt */
	gap: 0;                                             /* không khe: lướt ngang không rơi ra ngoài */
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.vo-header__item { display: flex; align-items: center; }
.vo-header__link {
	display: inline-flex;
	align-items: center;
	gap: var(--vo-space-1);
	min-height: var(--vo-nav-item-h);                   /* tokens.css */
	padding: 0 var(--vo-nav-item-px);
	border-radius: var(--vo-radius-pill);
	color: var(--vo-ink);
	font-size: var(--vo-nav-link-fs);
	font-weight: var(--vo-nav-fw);
	line-height: 1;                                     /* dòng cao số lẻ (14px x 1.2 = 16.8) làm Chrome làm tròn chữ lệch 1px */
	white-space: nowrap;
	text-decoration: none;
	transition: background-color var(--vo-dur-fast) ease;
}
@media (hover: hover) {
	.vo-header__link:hover { background: var(--vo-hover); text-decoration: none; }
}
/* Mục trang đang xem: không gạch chân */
.vo-header__link[aria-current="page"] { text-decoration: none; }
.vo-header__caret {
	font-size: 14px;
	transition: transform var(--vo-dur-fast) var(--vo-ease);
}

/* Mega menu (desktop): trễ mở/đóng để lướt chuột qua không nháy */
.vo-mega {
	/* Chỉnh ở đây */
	--vo-mega-item-w: 180px;                            /* Rộng 1 ô điểm đến */
	--vo-mega-intro-w: 280px;                           /* Rộng cột giới thiệu vùng */
	--vo-mega-open-delay: 80ms;                          /* Trễ mở */
	--vo-mega-close-delay: 150ms;                       /* Trễ đóng */

	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1;
	border-top: 1px solid var(--vo-divider);
	background: var(--vo-surface);
	box-shadow: var(--vo-shadow-mega);
	visibility: hidden;
	opacity: 0;
	transform: translateY(calc(-1 * var(--vo-space-2)));
	transition:
		opacity var(--vo-dur-fast) ease var(--vo-mega-close-delay),
		transform var(--vo-dur) var(--vo-ease) var(--vo-mega-close-delay),
		visibility 0s linear calc(var(--vo-mega-close-delay) + var(--vo-dur-fast));
}
:root:not(.vo-aim) .has-mega:hover > .vo-mega,
.has-mega.is-hover > .vo-mega,                       /* chuột: view.js chọn bảng (đi chéo không đổi bảng) */
.has-mega:focus-within > .vo-mega,
.has-mega.is-open > .vo-mega {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition:
		opacity var(--vo-dur-fast) ease var(--vo-mega-open-delay),
		transform var(--vo-dur) var(--vo-ease) var(--vo-mega-open-delay),
		visibility 0s linear var(--vo-mega-open-delay);
}
/* Đổi vùng: bảng cũ tắt ngay, bảng mới hiện ngay */
:root:not(.vo-aim) .vo-header__nav:has(.has-mega:hover) .has-mega:not(:hover) > .vo-mega,
.vo-header__nav:has(.is-hover) .has-mega:not(.is-hover) > .vo-mega { transition: none; }
.vo-header__nav.is-instant .has-mega > .vo-mega { transition: none; }
/* Cầu nối vô hình: chuột từ chữ xuống bảng không rơi vào khe */
.vo-mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; }
/* Esc: đóng dù chuột còn ở trên (JS gắn .is-dismissed) */
.has-mega.is-dismissed > .vo-mega { visibility: hidden; opacity: 0; transition: none; }
:root:not(.vo-aim) .has-mega:hover:not(.is-dismissed) .vo-header__caret,
.has-mega:is(.is-hover, :focus-within, .is-open):not(.is-dismissed) .vo-header__caret { transform: rotate(180deg); }
:root:not(.vo-aim) .has-mega:hover:not(.is-dismissed) > .vo-header__link,
.has-mega:is(.is-hover, :focus-within, .is-open):not(.is-dismissed) > .vo-header__link { background: var(--vo-hover); }

.vo-mega__inner {
	display: grid;
	grid-template-columns: var(--vo-mega-intro-w) 1fr;
	gap: var(--vo-space-6);
	max-width: var(--vo-wrap);
	margin-inline: auto;
	padding: var(--vo-space-5) var(--vo-gutter) var(--vo-space-6);
}
.vo-mega__title {
	margin: 0 0 var(--vo-space-2);
	color: var(--vo-heading);
	font-size: var(--vo-fs-lg);
	font-weight: 700;
	line-height: 1.2;
}
.vo-mega__desc {
	margin: 0 0 var(--vo-space-4);
	color: var(--vo-muted);
	font-size: var(--vo-fs-sm);
	line-height: 1.5;
}
/* Link "Explore ...": kiểu .vo-pill-link (button.css) */
.vo-mega__all { margin-top: calc(-1 * var(--vo-space-3)); }
.vo-mega__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, var(--vo-mega-item-w));   /* cột rộng cố định */
	gap: 2px var(--vo-space-4);
	align-content: start;
	margin: 0;
	padding: 0;
	list-style: none;
}
.vo-mega__link {
	display: block;
	margin-left: calc(-1 * var(--vo-space-4));
	padding: 10px var(--vo-space-4);
	border-radius: var(--vo-radius-pill);
	color: var(--vo-ink);
	font-size: var(--vo-nav-fs);
	font-weight: var(--vo-nav-sub-fw);
	line-height: 1.3;
	text-decoration: none;
	transition: background-color var(--vo-dur-fast) ease;
}
@media (hover: hover) {
	.vo-mega__link:hover { background: var(--vo-hover); }
}
.vo-mega__link:active { background: var(--vo-hover-active); }
/* Icon lửa cạnh tên điểm đến khách xem nhiều nhất của vùng (menus.php); flex để icon nằm giữa chiều cao dòng chữ */
.vo-hot { flex: none; color: var(--vo-hot); }
.vo-mega__link:has(.vo-hot) { display: flex; align-items: center; gap: var(--vo-space-2); }

/* Nhóm icon bên phải */
.vo-header__tools {
	--vo-header-tip-delay: 400ms;                       /* Trễ hiện chữ gợi ý khi hover icon */

	display: flex;
	align-items: center;
	gap: 0;                                             /* vùng bấm --vo-btn đã đủ thưa */
	margin-left: auto;
	margin-right: -10px;                                /* icon thẳng mép nội dung (bù vùng bấm) */
}
.vo-header__cta { display: none; margin-left: var(--vo-space-1); }   /* Get eSIM: cỡ nút chuẩn, không ghi đè; sát nút Log in */
/* Ảnh tròn tài khoản khi đã đăng nhập (không có ảnh thì chữ cái đầu) */
.vo-avatar {
	--vo-avatar-size: 32px;                             /* Cỡ ảnh. Ở header: --vo-header-avatar */

	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	width: var(--vo-avatar-size);
	height: var(--vo-avatar-size);
	border-radius: 50%;
	background: var(--vo-primary);
	color: var(--vo-on-primary);
	font-size: calc(var(--vo-avatar-size) * .42);
	font-weight: 600;
	line-height: 1;
	overflow: hidden;
}
html[data-vo-in] .vo-header__tools .vo-saved-icon { display: none; }   /* đã đăng nhập: Saved nằm trong menu tài khoản */
@media (max-width: 980px) {
	.vo-header__tools .vo-map-icon,
	.vo-header__tools .vo-saved-icon { display: none; }   /* <=980px: Map, Saved nằm ở ô lối tắt trong menu */
}
.vo-avatar b { padding-top: calc(var(--vo-text-drop) * 2); font-weight: 500; }   /* chữ hoa hạ xuống giữa vòng tròn; mỏng hơn mặc định */
.vo-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vo-account-icon .vo-avatar { --vo-avatar-size: var(--vo-header-avatar, 30px); }
/* Avatar / icon Saved nảy bằng scale (fly.js). Nút có transform chỉ lúc đang nảy thì trình duyệt chỉ tách lớp riêng LÚC đó, nên hết nảy là ảnh tròn bị nhích ~1px khi về lớp thường: giữ lớp riêng thường trực (cùng bẫy ở .vo-button, xem 04-giao-dien.md) */
@media (hover: hover) and (pointer: fine) { .vo-header__tools :is(.vo-account-icon, .vo-saved-icon) { will-change: transform; } }   /* fly.js chỉ chạy >980px nên chỉ máy tính cần */
/* Nút tài khoản (render.php): chưa có ngôn ngữ thứ 2 = nút tròn icon người / ảnh đại diện;
   có = viên thuốc [文A | người], bấm mở menu tài khoản có dòng Language. Chỉ icon, không chữ: mọi cỡ màn hình vừa header */
.vo-account-icon__me { display: inline-flex; }
.vo-account-icon--lang {
	width: auto;
	gap: var(--vo-space-2);
	padding: 0 var(--vo-space-3);
	border: 1px solid var(--vo-divider);
	border-radius: var(--vo-radius-pill);
}
.vo-account-icon--lang[data-in] { padding-right: var(--vo-space-1); }   /* ảnh đại diện tròn sát mép viên thuốc */
.vo-account-icon__sep { align-self: center; width: 1px; height: 50%; background: var(--vo-divider); }


@media (min-width: 981px) {
	.vo-header__nav { display: block; flex: 1 1 auto; min-width: 0; }
	.vo-header__cta { display: inline-flex; }
	.vo-header__burger { display: none; }
	.vo-header__tools { margin-right: 0; }
	.vo-account-icon { margin-left: calc(var(--vo-space-5) + var(--vo-space-2)); }   /* cách cụm Search / Map / Saved */
	/* Chữ menu to dần theo màn hình; khoảng cách giữ nguyên từ 981px (header đã thoáng nhờ logo gọn nên không co menu) */
	.vo-header__bar { gap: clamp(var(--vo-space-4), 1.6vw, var(--vo-space-5)); }
	.vo-header__link { font-size: clamp(var(--vo-nav-link-fs), 1.25vw, calc(var(--vo-nav-link-fs) + 1px)); }
}

/* Menu (≤980px; #vo-menu in ở cuối trang) và panel vùng North / Central / South: panel dùng chung, khung + chuyển động ở panel.css.
   Ở đây chỉ có nội dung. */
.vo-menu,
.vo-menu__pane {
	/* Chỉnh ở đây */
	--vo-menu-row-h: 52px;                              /* Cao mỗi dòng menu */
	--vo-menu-fs: var(--vo-nav-top-fs);                 /* Cỡ chữ dòng chính */
	--vo-menu-sub-fs: var(--vo-fs-sm);                  /* Cỡ chữ điểm đến trong panel vùng */
}
@media (min-width: 981px) {
	.vo-menu, .vo-menu__pane { display: none; }
}

.vo-menu__body {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: var(--vo-space-5);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--vo-space-2) var(--vo-gutter) calc(var(--vo-space-6) + env(safe-area-inset-bottom, 0px));
}
.vo-menu__label {
	margin: var(--vo-space-3) 0 var(--vo-space-1);
	color: var(--vo-muted);
	font-size: var(--vo-fs-xs);
	font-weight: 600;
	letter-spacing: .02em;
}
.vo-menu__list { margin: 0; padding: 0; list-style: none; }

.vo-menu__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vo-space-3);
	min-height: var(--vo-menu-row-h);
	color: var(--vo-ink);
	font-size: var(--vo-menu-fs);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.vo-menu__link[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }

/* Ô lối tắt đầu menu */
.vo-menu__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vo-space-2); }
.vo-menu__tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--vo-space-2);
	min-height: 76px;
	padding: 0 var(--vo-space-1);
	border: 1px solid var(--vo-divider);
	border-radius: var(--vo-radius-md);
	background: var(--vo-surface);
	color: var(--vo-ink);
	font: inherit;
	font-size: var(--vo-fs-xs);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.vo-menu__tile .vo-icon { font-size: 24px; }
.vo-menu__tile:active { background: var(--vo-hover-active); }
@media (hover: hover) { .vo-menu__tile:hover { background: var(--vo-hover); } }
.vo-menu__tile.vo-saved-icon[data-count]::after { top: 6px; right: 8px; }   /* số Saved: huy hiệu ở heart.css */

/* Vùng: bấm mở panel con (.vo-menu__pane) */
button.vo-menu__link { width: 100%; padding: 0; border: 0; background: none; font: inherit; font-size: var(--vo-menu-fs); font-weight: 600; text-align: left; }
.vo-menu__caret { flex: none; color: var(--vo-muted); font-size: 18px; }

.vo-menu__sub {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0;
	padding: var(--vo-space-2) var(--vo-gutter) calc(var(--vo-space-6) + env(safe-area-inset-bottom, 0px));
	list-style: none;
}
.vo-menu__sublink {
	display: flex;
	align-items: center;
	gap: var(--vo-space-2);
	min-height: var(--vo-btn);
	color: var(--vo-ink);
	font-size: var(--vo-menu-sub-fs);
	font-weight: var(--vo-nav-sub-fw);
	line-height: 1.3;
	text-decoration: none;
}
.vo-menu__sublink--all { color: var(--vo-primary); font-weight: 600; }
.vo-menu__sublink:active { background: var(--vo-hover); }

.vo-menu__cta { margin-top: var(--vo-space-2); }

/* Chữ gợi ý dưới icon header (chuột): lấy từ aria-label. Chỉ từ 981px: ở màn hình hẹp chữ gợi ý (dù đang ẩn) vẫn chiếm chỗ và làm trang cuộn ngang */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
	.vo-header__tools .vo-icon-btn { position: relative; }
	.vo-header__tools .vo-icon-btn[aria-label]::before {
		content: attr(aria-label);
		position: absolute;
		top: calc(100% + var(--vo-space-1));
		left: -100px;
		right: -100px;                                  /* khung rộng hơn nhãn, đối xứng quanh nút */
		width: max-content;
		margin-inline: auto;                            /* căn giữa bằng margin, không dùng translate(-50%) (nhoè ở DPR lẻ); khung hẹp hơn nhãn thì margin auto lệch trái nên phải để dư */
		z-index: 2;
		padding: var(--vo-space-1) var(--vo-space-2);
		border: 1px solid var(--vo-divider);
		border-radius: var(--vo-radius-sm);
		background: var(--vo-surface);
		box-shadow: var(--vo-shadow-sm);
		color: var(--vo-ink);
		font-size: var(--vo-fs-xs);
		font-weight: 500;
		line-height: 1.4;
		white-space: nowrap;
		pointer-events: none;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-4px);
		transition: opacity var(--vo-dur-fast) ease, transform var(--vo-dur-fast) ease, visibility 0s linear var(--vo-dur-fast);
	}
	.vo-header__tools .vo-icon-btn[aria-label]:hover::before {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: var(--vo-header-tip-delay);
	}
	html.vo-lock .vo-header__tools .vo-icon-btn::before { display: none; }   /* đang mở panel thì ẩn */
}