/* Nút dùng chung.
   <a class="vo-button">Book hotel</a>   biến thể: --outline --ghost --soft (nhẹ: nền trắng viền xám, điều hướng thường) --light (trên ảnh) --accent (Get eSIM)
   Thêm: --lg (nút menu mobile), --block (full ngang). Cỡ chuẩn ở tokens.css (--vo-button-h / --vo-button-px).
   <button class="vo-icon-btn" aria-label="Search">...svg...</button>   nút icon tròn --vo-btn */

.vo-button {
	/* Chỉnh ở đây */
	--_h: var(--vo-button-h);                       /* chiều cao (sửa ở tokens.css) */
	--_px: var(--vo-button-px);                     /* đệm ngang (sửa ở tokens.css) */
	--_fs: var(--vo-fs-sm);
	--_bg: var(--vo-primary);
	--_bg-hover: var(--vo-primary-hover);
	--_ink: var(--vo-on-primary);
	--_bd: transparent;
	--_fw: 500;                                     /* chữ trắng trên nền đậm nhìn dày hơn chữ đậm trên nền sáng: nhẹ đi để cân với Get eSIM (600 vẫn còn thấy dày) */

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vo-space-2);
	min-height: var(--_h);
	padding: 0 var(--_px);
	border: 1px solid var(--_bd);
	border-radius: var(--vo-radius-pill);
	background: var(--_bg);
	color: var(--_ink);
	font: inherit;
	font-size: var(--_fs);
	font-weight: var(--_fw);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--vo-dur-fast) ease, border-color var(--vo-dur-fast) ease, transform var(--vo-dur-fast) ease;
}
.vo-button .vo-icon { font-size: 1.25em; }
.vo-button:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {   /* chỉ máy tính: lớp riêng thường trực, không thì lúc bấm (:active scale) trình duyệt dựng lại lớp, chữ + icon nhích ~1px rồi mới lún. Điện thoại / tablet không cần, mà mỗi lớp thêm là tốn bộ nhớ khi chụm zoom */
	.vo-button { will-change: transform; }
}
.vo-button:focus-visible { outline: 2px solid var(--vo-primary); outline-offset: 3px; }
.vo-button[disabled], .vo-button[aria-disabled="true"] { opacity: .4; pointer-events: none; }

@media (hover: hover) {
	.vo-button:hover { background: var(--_bg-hover); color: var(--_ink); text-decoration: none; }
}

/* Biến thể */
.vo-button--outline, .vo-button--ghost, .vo-button--cta, .vo-button--light, .vo-button--accent { --_fw: 650; }   /* chữ tối trên nền sáng */
.vo-button--outline { --_bg: var(--vo-surface); --_bg-hover: var(--vo-hover); --_ink: var(--vo-primary); --_bd: var(--vo-primary); }
.vo-button--ghost   { --_bg: transparent;       --_bg-hover: var(--vo-hover); --_ink: var(--vo-primary); --_px: 12px; }
.vo-button--cta     { --_bg: var(--vo-surface); --_bg-hover: var(--vo-accent); --_ink: var(--vo-primary); --_bd: var(--vo-line); }   /* nút đặt dịch vụ: như Share, hover vàng như Get eSIM */
@media (hover: hover) { .vo-button--cta:hover { border-color: var(--vo-accent); } }
.vo-button--soft    { --_bg: var(--vo-surface); --_bg-hover: var(--vo-hover); --_ink: var(--vo-primary); --_bd: var(--vo-line); --_fw: 650; }   /* nút nhẹ: nền trắng, viền xám, hover xám, không vàng. Nút đặc chữ trắng = .vo-button mặc định */
.vo-button--light   { --_bg: var(--vo-surface); --_bg-hover: var(--vo-on-image);            --_ink: var(--vo-primary); }
.vo-button--accent  { --_bg: var(--vo-accent);  --_bg-hover: var(--vo-accent-hover);     --_ink: var(--vo-on-accent); }
.vo-button--light:focus-visible { outline-color: var(--vo-on-image); }

/* Cỡ */
.vo-button--lg    { --_h: 54px; --_px: 30px; --_fs: var(--vo-fs-md); }
.vo-button--block { display: flex; width: 100%; }

/* Nút icon tròn */
.vo-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--vo-btn);
	height: var(--vo-btn);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--vo-ink);
	font: inherit;                                      /* nút không tự lấy font hệ thống: chữ trong nút (Log in) cùng font site */
	font-size: var(--vo-icon);
	line-height: 1;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--vo-dur-fast) ease;
}
@media (hover: hover) {
	.vo-icon-btn:hover { background: var(--vo-hover); }
}
.vo-icon-btn:active { background: var(--vo-hover-active); }
/* Nút xoá: .vo-icon-btn.vo-icon-btn--danger (2 class để thắng màu base) */
.vo-icon-btn.vo-icon-btn--danger { color: var(--vo-danger); }
@media (hover: hover) {
	.vo-icon-btn.vo-icon-btn--danger:hover { background: var(--vo-danger-bg); }
}
.vo-icon-btn.vo-icon-btn--danger:active { background: var(--vo-danger-bg); }
/* Focus JS trả về sau khi đóng panel: không vẽ viền */
[data-vo-ret]:focus-visible { outline: 0 !important; }

/* Link có mũi tên (bảng menu, bản đồ):
   <a class="vo-pill-link" href="...">Explore North Vietnam <svg class="vo-icon">..arrow-right..</svg></a> */
.vo-pill-link {
	/* Chỉnh ở đây */
	--vo-pill-link-h: 40px;                             /* Vùng bấm (cao) */

	display: inline-flex;
	align-items: center;
	gap: var(--vo-space-2);
	min-height: var(--vo-pill-link-h);
	padding-right: var(--vo-space-3);                   /* vùng bấm dư bên phải mũi tên */
	color: var(--vo-ink);
	font-size: var(--vo-fs-sm);                         /* nhỏ hơn chữ menu header 1 bậc: link phụ không tranh với tiêu đề */
	font-weight: var(--vo-nav-fw);
	line-height: 1.2;
	text-decoration: none;
	text-decoration-color: var(--vo-primary);           /* màu gạch chân khi rê chuột */
	text-decoration-thickness: 1.5px;
	text-underline-offset: 4px;
}
button.vo-pill-link { padding-block: 0; padding-left: 0; border: 0; background: none; font-family: inherit; cursor: pointer; }   /* bản <button> (See all mở hộp thoại) */
.vo-pill-link .vo-icon { flex: none; transition: transform var(--vo-dur-fast) var(--vo-ease); }
@media (hover: hover) {
	.vo-pill-link:hover { text-decoration: underline; }
	.vo-pill-link:hover .vo-icon { transform: translateX(3px); }
}

/* Chip lọc (trang chủ Climate, Insights): <div class="vo-chips"><button class="vo-chip" aria-selected="true">Hanoi</button>...</div>
   Hàng chip cuộn ngang; padding + margin âm 2px để khung cuộn không cắt viền (iPhone). Chip có thể là <a aria-current="page"> hoặc <button>. */
.vo-chips { display: flex; gap: var(--vo-space-2); margin-block-start: -2px; margin-inline: -2px; padding: 2px; overflow-x: auto; scrollbar-width: none; }
.vo-chips::-webkit-scrollbar { display: none; }
.vo-chip {
	/* Chỉnh ở đây */
	--vo-chip-h: 40px;                 /* Cao chip; số nguyên để viền không mất nửa pixel */

	flex: none;
	display: inline-flex;
	align-items: center;
	gap: var(--vo-space-2);
	box-sizing: border-box;
	height: var(--vo-chip-h);
	padding: var(--vo-text-drop) var(--vo-space-4) 0;   /* hạ chữ + số cho đúng tâm chip (cùng cách số thứ tự trong vòng tròn) */
	border: 1px solid var(--vo-divider);
	border-radius: var(--vo-radius-pill);
	background: var(--vo-surface);
	color: var(--vo-ink);
	font: inherit;
	line-height: 1;
	font-size: var(--vo-fs-sm);
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--vo-dur-fast) ease, border-color var(--vo-dur-fast) ease;
}
@media (hover: hover) {
	.vo-chip:hover { border-color: var(--vo-line); background: var(--vo-hover); }
}
.vo-chip[aria-selected="true"], .vo-chip[aria-current="page"] { border-color: var(--vo-primary); background: var(--vo-surface); }
.vo-chip__n { color: var(--vo-muted); font-variant-numeric: tabular-nums; }   /* số bài sau tên chip */

/* Ô chọn: <span class="vo-select"><select>..</select><button class="vo-chip vo-select__btn">..</button></span> (vo_select).
   Trình duyệt chạy JS thấy nút chip ngay từ lần vẽ đầu (blocks/archive-filters/view.js chỉ gắn danh sách vào nút), không JS thấy select thật + nút Apply:
   chọn bằng @media (scripting) chứ không đợi JS đổi, kẻo thanh lọc đổi cao và cả lưới bên dưới nhảy. */
.vo-select { position: relative; display: inline-flex; }
.vo-select select { height: var(--vo-chip-h, 40px); padding: 0 var(--vo-space-3); border: 1px solid var(--vo-divider); border-radius: var(--vo-radius-pill); background: var(--vo-surface); color: var(--vo-ink); font: inherit; font-size: var(--vo-fs-sm); }
.vo-select.is-js select { display: none; }
@media (scripting: enabled) {
	.vo-select select, [data-vo-apply] { display: none; }
}
@media (scripting: none) {
	.vo-select > button.vo-chip { display: none; }   /* 2 class + thẻ: thắng .vo-dsel .vo-dsel__btn (archive-filters/style.css) */
}
.vo-select__btn[aria-expanded="true"] { border-color: var(--vo-primary); }
.vo-select__btn .vo-icon { transition: transform var(--vo-dur-fast) var(--vo-ease); }
.vo-select__btn[aria-expanded="true"] .vo-icon { transform: rotate(180deg); }
.vo-select__menu {
	position: absolute;
	top: calc(100% + var(--vo-space-2));
	left: 0;   /* canh trái theo nút: bộ lọc nằm bên trái hàng, canh phải thì danh sách lòi khỏi mép trái màn hình */
	z-index: var(--vo-z-sticky);
	min-width: 100%;
	max-height: min(320px, 60vh);
	margin: 0;
	padding: var(--vo-space-2);
	overflow-y: auto;
	list-style: none;
	border: 1px solid var(--vo-divider);
	border-radius: var(--vo-radius-md);
	background: var(--vo-surface);
	box-shadow: var(--vo-shadow-card);
}
.vo-select__menu[hidden] { display: none; }
.vo-select__opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vo-space-4);
	min-height: var(--vo-btn);
	padding: var(--vo-text-drop) var(--vo-space-3) 0;
	border-radius: var(--vo-radius-sm);
	color: var(--vo-ink);
	font-size: var(--vo-fs-sm);
	white-space: nowrap;
	cursor: pointer;
}
.vo-select__opt .vo-icon { visibility: hidden; }
.vo-select__opt[aria-selected="true"] { font-weight: 650; }
.vo-select__opt[aria-selected="true"] .vo-icon { visibility: visible; }
@media (hover: hover) {
	.vo-select__opt:hover { background: var(--vo-hover); }
}
.vo-select__opt:focus-visible { outline: 0; background: var(--vo-hover); }

/* Phân trang */
.vo-pager { margin-top: var(--vo-space-6); }
.vo-pager ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--vo-space-2); margin: 0; padding: 0; list-style: none; }
.vo-pager .page-numbers {   /* = .vo-chip (button.css) */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--vo-chip-h, 40px);
	height: var(--vo-chip-h, 40px);
	padding: var(--vo-text-drop) var(--vo-space-3) 0;
	border: 1px solid var(--vo-divider);
	border-radius: var(--vo-radius-pill);
	background: var(--vo-surface);
	color: var(--vo-ink);
	font-size: var(--vo-fs-sm);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	transition: background-color var(--vo-dur-fast) ease, border-color var(--vo-dur-fast) ease;
}
@media (hover: hover) {
	a.page-numbers:hover { border-color: var(--vo-line); background: var(--vo-hover); }
}
.vo-pager .page-numbers.current { border-color: var(--vo-primary); }
.vo-pager .page-numbers.dots { border-color: transparent; background: none; }

/* Nút mũi tên tròn viền đậm (trước / sau): <button class="vo-arrow">...icon...</button>. Cỡ: --vo-arrow-size, cỡ icon: font-size.
   Dùng ở Travel guides (sidebar), hàng cuộn (scroller.css chỉ thêm vị trí + nền kính mờ), nút + / - bản đồ. */
.vo-arrow {
	display: grid;
	place-items: center;
	flex: none;
	width: var(--vo-arrow-size, 36px);
	height: var(--vo-arrow-size, 36px);
	padding: 0;
	border: 1px solid var(--vo-primary);
	border-radius: 50%;
	background: var(--vo-surface);
	color: var(--vo-ink);
	font-size: var(--vo-arrow-icon, 18px);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.vo-arrow:disabled { border-color: var(--vo-divider); color: var(--vo-divider); cursor: default; }
@media (hover: hover) {
	.vo-arrow:not(:disabled):hover { background: var(--vo-hover); }
}