/* Nền tảng chung mà theme.json không khai báo được. Breakpoint: xem đầu tokens.css. */

*, *::before, *::after { box-sizing: border-box; }

/* Chuyển trang mờ dần (Firefox bỏ qua) */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	::view-transition-old(root),
	::view-transition-new(root) { animation-duration: var(--vo-dur-fast); }
}
/* Header đứng yên khi chuyển trang */
.vo-site-header { view-transition-name: vo-header; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--vo-header-h) + var(--vo-space-4));   /* #anchor không bị header che */
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Tiếng Nhật: strict = không để dấu câu, chữ nhỏ ゃ ッ đứng đầu dòng. Đoạn văn ngắt ở bất kỳ chữ nào cho kín dòng như sách báo Nhật;
   chỉ tiêu đề ngắt theo cụm từ (auto-phrase, Chrome / Edge 119+): ngắt theo cụm ở đoạn văn để hở mép phải lởm chởm */
:lang(ja) { line-break: strict; }
:lang(ja) :is(h1, h2, h3, h4) { word-break: auto-phrase; }
/* Tiếng Hàn có dấu cách giữa từ: keep-all không bẻ giữa từ (mặc định bẻ giữa âm tiết nên khó đọc); tiếng Trung strict như tiếng Nhật */
:lang(ko) { word-break: keep-all; }
:lang(zh) { line-break: strict; }

img, svg, video { max-width: 100%; height: auto; }

/* Đoạn văn KHÔNG dùng text-wrap: pretty: Safari / Chrome điện thoại rút ngắn dòng để tránh dòng cuối lẻ nên chữ không tràn hết bề ngang (devtools giả lập không thấy) */

::selection { background: var(--vo-selection); color: var(--vo-ink); }

:focus-visible {
	outline: 2px solid var(--vo-primary);
	outline-offset: 2px;
}

/* Ẩn dưới 768px */
@media (max-width: 767px) {
	.vo-hide-mobile { display: none; }
}

/* Ẩn khỏi mắt, trình đọc màn hình vẫn đọc */
.vo-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Ảnh phủ kín ô thumbnail (Search, My trips, món ăn); card dùng .vo-card__media img ở card.css, có thêm hiệu ứng zoom */
.vo-search__thumb img, .vo-trip__cover img, .vo-stop__thumb img, .vo-dish__img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Icon Phosphor sprite, PHP: vo_icon( 'heart' ). Cỡ = cỡ chữ cha, màu = màu chữ. */
.vo-icon {
	display: inline-block;
	flex: none;
	width: 1em;
	height: 1em;
	fill: currentColor;
	vertical-align: -0.125em;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		transition-delay: 0s !important;   /* thiếu cái này thì transition kiểu visibility 0s linear <delay> vẫn trễ cả chu kỳ */
	}
}

/* Khoá cuộn khi panel mở; lock() trong site.js gắn class. Chỉ điện thoại ẩn tràn (body đã ghim);
   tablet / desktop giữ nguyên thanh cuộn (ẩn đi làm trang giật ngang), site.js chặn cuộn bằng sự kiện */
html.vo-lock body { overscroll-behavior: none; }
@media (max-width: 599px) {
	html.vo-lock:not(.vo-lock-soft) { overflow: hidden; }   /* soft (hộp thoại): site.js chặn cuộn bằng sự kiện như desktop */
}

/* Nhãn ô nhập: 1 class cho mọi form (đăng nhập, My trips, viết đánh giá). Chữ phụ "(optional)" bọc trong .vo-label__opt */
.vo-label {
	display: block;
	margin: var(--vo-space-3) 0 var(--vo-space-2);
	padding: 0;
	font-size: var(--vo-label-fs);
	font-weight: 600;
	line-height: 1.4;
}
.vo-label:first-child { margin-top: 0; }
.vo-label__opt { color: var(--vo-muted); font-weight: 400; }