/* Hộp thoại <dialog class="vo-dialog">, mở bằng nút data-vo-dialog="id" (assets/js/dialog.js). Mobile: bottom sheet. */

.vo-dialog {
	width: min(560px, calc(100vw - 32px));
	max-height: min(80vh, 720px);
	padding: 0;
	border: 0;
	border-radius: var(--vo-radius-panel);
	background: var(--vo-surface);
	color: var(--vo-ink);
	box-shadow: var(--vo-shadow-pop);
	flex-direction: column;                             /* KHÔNG để trong [open]: lúc đóng hộp thoại vẫn hiện (mờ dần) mà mất hướng cột thì đầu + thân xếp ngang, trông như mở ra cái khác rồi mới tắt */
	opacity: 0;
	transform: translateY(12px) scale(.98);
	transition: opacity var(--vo-dur) var(--vo-ease), transform var(--vo-dur) var(--vo-ease), overlay var(--vo-dur) allow-discrete, display var(--vo-dur) allow-discrete;
}
@media (hover: hover) and (pointer: fine) {   /* Layer riêng cả lúc đứng yên: hộp căn giữa (margin auto) hay rơi vào nửa điểm ảnh (top 71.6px ở màn 1.25x = 89.5 điểm ảnh).
	   Đang chạy transform thì trình duyệt vẽ được ở nửa điểm ảnh, hết hiệu ứng vẽ lại kiểu thường thì làm tròn => ảnh trong lightbox khựng 1px. Cùng cách với ảnh card (card.css). Chỉ máy tính (điện thoại màn 2-3x không gặp) */
	.vo-dialog { will-change: transform; }
}
dialog.vo-dialog { margin-block: auto; }   /* căn giữa dọc. Có tên thẻ để thắng luật của WP (:root :where(.is-layout-flow) > * đặt margin-top 24px, bằng độ ưu tiên .vo-dialog nhưng nạp sau) và layout.css; không thì hộp thoại ngắn dính mép trên */
.vo-dialog[open] { display: flex; opacity: 1; transform: none; }
@starting-style { .vo-dialog[open] { opacity: 0; transform: translateY(12px) scale(.98); } }
.vo-dialog::backdrop { background: rgba(0, 0, 0, .5); /* vo-allow: số cứng: Safari cũ không đọc biến CSS trong ::backdrop */ opacity: 0; transition: opacity var(--vo-dur) var(--vo-ease), overlay var(--vo-dur) allow-discrete, display var(--vo-dur) allow-discrete; }
.vo-dialog:not([open]), .vo-dialog:not([open])::backdrop { transition-duration: var(--vo-dur-fast); transition-timing-function: var(--vo-ease-exit); }   /* đóng nhanh hơn mở; hết mờ đúng lúc kết thúc, dialog.js mở khoá cuộn ngay khung đó */
.vo-dialog[open]::backdrop { opacity: 1; }
@starting-style { .vo-dialog[open]::backdrop { opacity: 0; } }

.vo-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--vo-space-3); padding-block: var(--vo-space-4) var(--vo-space-3); padding-inline: var(--vo-space-5) var(--vo-space-3); border-bottom: 1px solid var(--vo-divider); }
.vo-dialog__title { margin: 0; font-size: var(--vo-fs-md); }
.vo-dialog__body { position: relative; padding: var(--vo-space-4) var(--vo-space-5); overflow-y: auto; overscroll-behavior: contain; }   /* relative: phần tử ẩn kiểu .vo-sr-only (absolute) nằm trong vùng cuộn của thân, không thì chúng kéo dài chính <dialog> và hiện thêm 1 thanh cuộn thứ hai */

@media (max-width: 599px) {
	dialog.vo-dialog { margin: auto 0 0; }   /* bottom sheet: dính đáy (margin-top phải là auto, không phải 24px của WP) */
	.vo-dialog { width: 100%; max-width: none; max-height: 88vh; border-radius: var(--vo-radius-panel) var(--vo-radius-panel) 0 0; transform: translateY(100%); }
	.vo-dialog[open] { transform: none; }
	@starting-style { .vo-dialog[open] { transform: translateY(100%); } }
}

/* Hộp thoại xem ảnh (hero region, điểm đến, attraction): lưới ô 4:3, 3 cột (2 cột trên điện thoại); bấm 1 ô mở lightbox bên dưới */
.vo-dialog.vo-dialog--photos { --vo-dialog-photos-w: 1280px; width: min(var(--vo-dialog-photos-w), calc(100vw - 32px)); max-width: none; max-height: 92vh; }   /* 2 class để thắng .vo-dialog dù file nào nạp sau (trước đây ngang quyền => hộp ảnh bị ép về 560px); max-width: none vì dialog nằm trong main, WP giới hạn con trực tiếp ở contentSize */
.vo-dialog.vo-dialog--photos { height: min(92vh, 860px); }   /* cố định: lưới và ảnh lớn cùng 1 khung, không co giãn theo số ảnh */
.vo-dialog--photos .vo-dialog__title { font-weight: 700; }
.vo-dialog--photos .vo-dialog__body { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vo-space-1); align-content: start; padding: var(--vo-space-3); }
.vo-photos__item { margin: 0; }
.vo-photos__open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.vo-photos__item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
@media (min-width: 768px) {
	.vo-dialog--photos .vo-dialog__body { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--vo-space-5) var(--vo-space-6); }
}
@media (max-width: 599px) {
	.vo-dialog.vo-dialog--photos { width: 100%; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }   /* điện thoại: toàn màn hình cả lưới lẫn ảnh lớn, khung cố định như lightbox */
	.vo-dialog--photos .vo-dialog__head { padding-top: calc(var(--vo-space-4) + env(safe-area-inset-top, 0px)); }
}

/* Lightbox trong hộp thoại có data-vo-lightbox (dialog.js): data-view="viewer" ẩn lưới, hiện ảnh lớn.
   Chữ (Gallery, bộ đếm) không khung, chỉ chữ trắng có bóng nhẹ; nút icon (mũi tên, X) là vòng đen mờ + viền mảnh. Nên ảnh luôn thoáng, nút vẫn rõ là bấm được. */
.vo-lb {
	--_glass: color-mix(in srgb, var(--vo-black) 32%, transparent);          /* nền vòng nút icon (mũi tên, X): đen mờ, không backdrop-filter vì trình duyệt điện thoại giữ lớp nhoè của ảnh cũ sau khi đổi ảnh */
	--_glass-hover: color-mix(in srgb, var(--vo-black) 50%, transparent);
	--_glass-line: color-mix(in srgb, var(--vo-on-image) 26%, transparent);     /* viền mảnh */
	--_shade: color-mix(in srgb, var(--vo-black) 45%, transparent);             /* bóng chữ: đọc được cả trên ảnh sáng */
	display: none; position: relative; flex: 1; min-height: 0; margin: var(--vo-space-3) var(--vo-space-5) var(--vo-space-5); background: var(--vo-black); color: var(--vo-on-image); border-radius: var(--vo-radius-card); overflow: hidden;   /* --vo-lb-h: chiều cao vùng xem ảnh */
}
.vo-dialog[data-view="viewer"] .vo-dialog__body { display: none; }
.vo-dialog[data-view="viewer"] .vo-lb { display: block; }
.vo-lb { touch-action: none; }   /* dialog.js tự xử lý chụm / kéo / vuốt */
.vo-lb__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.vo-dialog.is-zoomed .vo-lb__img { cursor: grab; }
.vo-lb .vo-lb__gallery { position: absolute; top: var(--vo-space-3); left: var(--vo-space-3); --_bg: transparent; --_bg-hover: var(--_glass); --_ink: var(--vo-on-image); --_bd: transparent; --_fw: 500; text-shadow: 0 1px 3px var(--_shade); filter: drop-shadow(0 1px 3px var(--_shade)); }   /* không khung: vùng bấm vẫn đủ 44px, chỉ hiện nền mờ khi rê chuột */
.vo-lb__count { position: absolute; top: var(--vo-space-3); right: var(--vo-space-3); padding: 4px 10px; text-shadow: 0 1px 3px var(--_shade); font-size: var(--vo-fs-sm); font-weight: 500; font-variant-numeric: tabular-nums; }
.vo-dialog[data-single] :is(.vo-lb__nav, .vo-lb__gallery, .vo-lb__count) { display: none; }   /* 1 ảnh: không có ảnh khác để chuyển, không có lưới để quay về, đếm "1 of 1" vô nghĩa */
.vo-lb__close { display: none; }   /* chỉ hiện trên điện thoại, khi tiêu đề hộp thoại (có nút X) bị ẩn */
.vo-lb__nav { position: absolute; top: 50%; display: grid; place-items: center; width: var(--vo-btn); height: var(--vo-btn); padding: 0; border: 1px solid var(--_glass-line); border-radius: 50%; background: var(--_glass); color: var(--vo-on-image); box-shadow: 0 1px 3px var(--_shade); font-size: 20px; cursor: pointer; margin-top: calc(var(--vo-btn) / -2); }
/* Cảm ứng: không có :hover nên nút phải tự báo "đang nhấn" bằng :active (nhả tay là hết, không dính); tắt ô xám mặc định của trình duyệt khi chạm,
   viền focus chỉ cho bàn phím */
.vo-lb :is(.vo-lb__nav, .vo-lb__close, .vo-lb__gallery) { -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color var(--vo-dur-fast) ease; }
.vo-lb :is(.vo-lb__nav, .vo-lb__close, .vo-lb__gallery):active { background: var(--_glass-hover); }
.vo-lb :is(.vo-lb__nav, .vo-lb__close):focus:not(:focus-visible) { outline: 0; }
.vo-lb__nav--prev { left: var(--vo-space-3); }
.vo-lb__nav--next { right: var(--vo-space-3); }
@media (hover: hover) and (pointer: fine) {   /* chuột thật: một số trình duyệt điện thoại báo hover: hover nên :hover dính sau khi chạm */
	.vo-lb__nav:hover { background: var(--_glass-hover); }
}
@media (pointer: coarse) {
	.vo-lb .vo-lb__gallery:hover { background: var(--_bg); }   /* đè .vo-button:hover (button.css) */
}
.vo-lb__cap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: var(--vo-space-6) var(--vo-space-4) var(--vo-space-3); background: var(--vo-viewer-cap); font-size: var(--vo-fs-sm); }
@media (max-width: 599px) {   /* điện thoại: xem ảnh toàn màn hình, nền đen; nút Gallery quay về lưới */
	.vo-dialog[data-vo-lightbox][data-view="viewer"] { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0; background: var(--vo-black); }   /* 3 thành phần để thắng .vo-dialog.vo-dialog--photos */
	.vo-dialog[data-vo-lightbox][data-view="viewer"] .vo-dialog__head { display: none; }
	.vo-lb { flex: 1; height: auto; margin: 0; border-radius: 0; }
	.vo-lb .vo-lb__gallery, .vo-lb .vo-lb__close { top: calc(var(--vo-space-3) + env(safe-area-inset-top, 0px)); }
	.vo-lb .vo-lb__close { display: grid; place-items: center; position: absolute; right: var(--vo-space-3); width: var(--vo-button-h); height: var(--vo-button-h); padding: 0; border: 1px solid var(--_glass-line); border-radius: 50%; background: var(--_glass); color: var(--vo-on-image); box-shadow: 0 1px 3px var(--_shade); font-size: 20px; cursor: pointer; }   /* kính trong suốt như nút Gallery */
	.vo-lb__count { top: calc(var(--vo-space-3) + env(safe-area-inset-top, 0px) + (var(--vo-button-h) - 28px) / 2); right: 0; left: 0; width: max-content; margin-inline: auto; }   /* giữa hàng nút Gallery / X */
	.vo-lb__cap { padding-bottom: calc(var(--vo-space-3) + env(safe-area-inset-bottom, 0px)); }
}
.vo-dialog:focus { outline: 0; }   /* dialog.js đưa focus vào chính hộp thoại lúc mở; không thì trình duyệt tô viền lên nút X đầu tiên */