/* Card sidebar trang điểm đến (block plan-card và guides) */
.vo-sidecard { padding: var(--vo-space-4); border: 1px solid var(--vo-divider); border-radius: var(--vo-radius-card); background: var(--vo-surface); }   /* đệm hẹp mọi màn hình: card nằm trong cột hẹp / dải ngang, đệm rộng làm khung trống */
.vo-sidecard__title { margin: 0 0 var(--vo-space-1); font-size: var(--vo-fs-md); }
.vo-sidecard__text { margin: 0 0 var(--vo-space-4); color: var(--vo-muted); font-size: var(--vo-fs-sm); }
.vo-sidecard__btns { display: grid; gap: var(--vo-space-2); }
@media (min-width: 981px) {
	.vo-sidecard .vo-sidecard__esim, .vo-sidecard.vo-sidecard--esim-only { display: none; }   /* header desktop luôn có Get eSIM; card chỉ có eSIM thì ẩn cả card */
}
/* Dòng "Staying connected in X?" chỉ dùng khi card thu gọn trên mobile */
.vo-sidecard__line { display: none; }
/* ≤980px trang điểm đến: banner đáy đã có hotels / flights / tours nên card chỉ còn 1 hàng: chữ + nút Get eSIM.
   Không có link eSIM (render.php không in dòng chữ) thì ẩn cả card */
@media (max-width: 980px) {
	.vo-sidecard--plan { display: flex; align-items: center; gap: var(--vo-space-3); }
	.vo-sidecard--plan > .vo-sidecard__title,
	.vo-sidecard--plan > .vo-sidecard__text,
	.vo-sidecard--plan .vo-sidecard__btns > :not(.vo-sidecard__esim) { display: none; }
	.vo-sidecard--plan .vo-sidecard__line { display: block; flex: 1; min-width: 0; margin: 0; font-size: var(--vo-fs-sm); font-weight: 600; line-height: 1.35; }
	.vo-sidecard--plan .vo-sidecard__btns { display: block; flex: none; }
	.vo-sidecard--plan .vo-sidecard__esim { width: auto; --_bg: var(--vo-accent); --_bg-hover: var(--vo-accent-hover); --_ink: var(--vo-on-accent); --_bd: transparent; }   /* nút vàng như Get eSIM ở header: chỉ còn 1 nút, phải nổi */
	.vo-sidecard--plan:not(:has(.vo-sidecard__line)) { display: none; }
}
.vo-sidecard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--vo-space-2); }
.vo-sidecard__nav { display: flex; gap: var(--vo-space-2); }
.vo-sidecard__list > :nth-child(n + 6) { display: none; }   /* chưa có JS: chỉ trang đầu */
.vo-sidecard.is-js .vo-sidecard__list > * { display: flex; }
.vo-sidecard.is-js .vo-sidecard__list > [hidden] { display: none; }
.vo-sidecard__more { margin: var(--vo-space-2) 0 0; }
@media (min-width: 600px) {   /* canh phải từ 600px, canh trái dưới 600px: đúng như các .vo-pill-link khác (cạnh tiêu đề ≥600px, dưới hàng card ở mobile) */
	.vo-sidecard__more { text-align: right; }
	.vo-sidecard__more .vo-pill-link { padding-right: 0; }   /* mũi tên thẳng mép phải card */
}
.vo-sidecard .vo-card--row { --vo-card-thumb: 64px; margin-top: var(--vo-space-3); padding-top: var(--vo-space-3); border-top: 1px solid var(--vo-divider); }
.vo-sidecard__list > :first-child, .vo-sidecard__list > .is-first { border-top: 0; }   /* .is-first: dòng đầu trang đang xem (view.js) */

/* Tablet (600-980px): sidebar xuống dưới cột chính nên rộng hết bề ngang */
@media (min-width: 600px) and (max-width: 980px) {
	/* Plan your trip: nút xếp 1 hàng thay vì kéo dài hết bề ngang */
	.vo-sidecard__btns { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
	.vo-sidecard__btns:has(> :nth-child(4)) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Travel guides: 2 cột, ảnh bên phải, kèm thời gian đọc */
	.vo-sidecard__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--vo-space-6); }
	.vo-sidecard .vo-card--row { --vo-card-thumb: 72px; flex-direction: row-reverse; justify-content: space-between; }
	.vo-sidecard .vo-card--row .vo-card__title { font-size: var(--vo-fs-base); }
	.vo-sidecard:not(.is-js) .vo-sidecard__list > :nth-child(6) { display: flex; }   /* chưa có JS: trang đầu 6 bài = 3 hàng */
	.vo-sidecard:not(.is-js) .vo-sidecard__list > :nth-child(n + 7) { display: none; }
}
@media (min-width: 768px) and (max-width: 980px) {
	.vo-sidecard__btns:has(> :nth-child(4)) { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); }
}
