/* Khung chung của mọi panel trượt từ phải: Menu (≤980px), vùng North / Central / South, Map, Saved, My trips, đăng nhập / hồ sơ.
   Hành vi ở assets/js/panel.js (1 ngăn xếp, 1 lớp tối, 1 khoá cuộn). File của từng panel chỉ lo phần nội dung bên trong.
   Điện thoại (≤599px): toàn màn hình. Từ 600px: ngăn kéo rộng --vo-drawer-w + lớp tối bên trái. Thời gian / độ kéo / độ tối: tokens.css (--vo-panel-*).

   Cấu trúc: .vo-sheet (khung, không cuộn) > .vo-pbar (thanh tiêu đề) + 1 phần thân tự cuộn.
   Panel mới mở đè lên panel cũ: panel cũ nhận .is-covered (nội dung bị kéo theo sang trái + tối đi), panel mới nhận .is-stacked (không bóng). */

.vo-scrim {
	position: fixed;
	inset: 0;
	z-index: var(--vo-z-overlay);
	background: var(--vo-overlay);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--vo-panel-dur) var(--vo-panel-ease), visibility 0s linear var(--vo-panel-dur);
}
.vo-scrim.is-on { opacity: 1; visibility: visible; transition: opacity var(--vo-panel-dur) var(--vo-panel-ease), visibility 0s; }
/* Điện thoại: panel phủ kín nên lớp tối chỉ lộ ra lúc khách chụm zoom (iOS cập nhật khung panel và lớp tối lệch nhịp = khung xám nháy rồi mất).
   Panel trượt vào xong thì lớp tối đổi sang màu nền panel: lệch nhịp cũng chỉ thấy trắng. Đóng lại thì về màu tối ngay để hiệu ứng mờ dần như cũ */
@media (max-width: 599px) {
	.vo-scrim.is-on { animation: vo-scrim-solid 0s linear var(--vo-panel-dur) forwards; }   /* animation, không transition: scrim dựng lúc mở lần đầu không có trạng thái đầu để chuyển */
}
@keyframes vo-scrim-solid { to { background-color: var(--vo-surface); } }

/* Khung ngoài của module (chứa sheet, toast...): không chặn chuột, z-index theo thứ tự mở (panel.js đặt --_z) */
.vo-layer {
	position: fixed;
	inset: 0;
	z-index: calc(var(--vo-z-overlay) + var(--_z, 1));
	pointer-events: none;
	color: var(--vo-ink);
	text-align: left;
}

.vo-sheet {
	--vo-sheet-w: 100%;
	--_push: calc(var(--vo-sheet-w) * var(--vo-panel-push));

	position: fixed;
	top: var(--vo-panel-top);
	right: 0;
	bottom: 0;
	z-index: calc(var(--vo-z-overlay) + var(--_z, 1));
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: var(--vo-sheet-w);
	overflow: hidden;                                       /* nội dung bị kéo sang trái không lòi ra ngoài khung */
	background: var(--vo-surface);
	color: var(--vo-ink);
	text-align: left;
	pointer-events: auto;
	overscroll-behavior: contain;
	visibility: hidden;
	transform: translateX(100%);
	transition: transform var(--vo-panel-dur) var(--vo-panel-ease), visibility 0s linear var(--vo-panel-dur);
}
.vo-sheet.is-open { visibility: visible; transform: none; transition: transform var(--vo-panel-dur) var(--vo-panel-ease), visibility 0s; }

/* Bị panel khác đè: nội dung kéo theo sang trái, khung đứng yên. Làm tối bằng lớp phủ (KHÔNG filter: filter bật/tắt làm chữ nháy) */
.vo-sheet > * { transition: transform var(--vo-panel-dur) var(--vo-panel-ease); }
.vo-sheet.is-covered > * { transform: translateX(calc(-1 * var(--_push))); }
.vo-sheet::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 9;
	background: var(--vo-black);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--vo-panel-dur) var(--vo-panel-ease);
}
.vo-sheet.is-covered::after { opacity: var(--vo-panel-dim); }

/* Đóng tức thì (panel nằm dưới panel đang đóng, Back trình duyệt khôi phục trang, chuyển sang chat) */
.vo-sheet.is-instant,
.vo-sheet.is-instant > *,
.vo-sheet.is-instant::after,
.vo-scrim.is-instant { transition: none !important; }

@media (min-width: 600px) {
	.vo-sheet { --vo-sheet-w: var(--vo-drawer-w); box-shadow: var(--vo-shadow-drawer); }
	.vo-sheet.is-stacked { box-shadow: none; }              /* bóng mép trái quét qua panel dưới thành sọc dọc */
}

/* Thanh tiêu đề: ← trái, tên giữa, X / nút chữ phải. Nút phải trùng chỗ nút burger (= lề trang − 10px của .vo-header__tools) */
.vo-pbar {
	position: relative;
	flex: none;
	display: grid;
	grid-template-columns: 1fr minmax(0, auto) 1fr;
	align-items: center;
	box-sizing: border-box;
	height: var(--vo-panel-bar-h);                          /* đường kẻ dưới trùng mép dưới header */
	padding: 0 calc(var(--vo-gutter) - 10px);
	border-bottom: 1px solid var(--vo-divider);
}
.vo-pbar__back { grid-column: 1; justify-self: start; }
.vo-pbar__title {
	grid-column: 2;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--vo-heading);
	font-size: var(--vo-nav-top-fs);
	font-weight: var(--vo-nav-fw);
	line-height: 1.3;
	text-align: center;
}
.vo-pbar__end { grid-column: 3; justify-self: end; }
.vo-pbar .vo-icon-btn { font-size: var(--vo-icon-back); }