/* =============================================================================
   CỤM INFORMATION — 5 panel: Departures & Prices · Gallery · FAQs · Terms · Privacy
   Nguồn: docs/design-previews/assets/preview.css (khối `.im-*`, đã verify bằng Chromium).

   Số đo gốc @1920: thẻ 1824 · thanh tab cao 64 (ô đầu 64×64) · nội dung padding 64 ·
   cột trái 680 · khe 64 · cột phải 952 · bảng giá 1696 = 500 + 224 + 324×3.

   Nạp TOÀN SITE (không theo điều kiện màn) vì popup mở được từ footer ở mọi trang.
   ============================================================================= */

/* ------------------------------- Popup shell ------------------------------- */
.im-modal { position: fixed; inset: 0; z-index: 1000; overflow-y: auto; overscroll-behavior: contain; }
.im-modal[hidden] { display: none; }
.im-modal__back {
	position: fixed; inset: 0; border: 0; padding: 0; cursor: pointer;
	background: rgba(0, 0, 0, .4); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.im-wrap { position: relative; z-index: 1; padding: var(--sp-48); pointer-events: none; }
.im-card { background: #fff; max-width: 1824px; margin: 0 auto; pointer-events: auto; }
body.sj-info-open { overflow: hidden; }
.im-loading { padding: var(--sp-64); text-align: center; color: var(--sj-gray); }

/* Thanh tab — nền #DCDCDC + khe 1px chính là cách Figma vẽ kẻ mảnh giữa các tab. */
.im-tabs { display: flex; gap: 1px; background: var(--sj-n4-nw); align-items: stretch; }
.im-tabs__home {
	flex: 0 0 clamp(48px, 3.333vw, 64px); width: clamp(48px, 3.333vw, 64px);
	aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center;
	background: none; border: 0; cursor: pointer; padding: 0; overflow: hidden;
}
.im-tabs__home img { display: block; width: 100%; height: 100%; }
.im-tab {
	flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center;
	background: #fff; color: var(--sj-muted-nw); text-decoration: none; border: 0; cursor: pointer;
	/* Padding co để nhãn dài nhất ("Terms & Conditions") không xuống dòng: 80 @1920 → 10 @1024. */
	padding: var(--sp-16) clamp(10px, calc(7.8125vw - 70px), 80px);
	font-family: inherit; font-weight: 500; font-size: var(--fs-20); line-height: 1.6; text-align: center;
	white-space: nowrap; border-bottom: 2px solid transparent;
}
.im-tab:hover { color: var(--sj-red); }
.im-tab.is-active { color: var(--sj-rose-nw); border-bottom-color: var(--sj-rose-nw); }
.im-hr { height: 1px; width: 100%; border: 0; margin: 0; background: var(--sj-n4-nw); }
/* `.sj-hr` mới chỉ được tô ở vài trang (the-journey, tour…); trong cụm Information phải
   tô lại, không thì kẻ ngang giữa các mục accordion rơi về mặc định trình duyệt
   (margin auto + width theo nội dung → hiện ra một chấm nhỏ giữa dòng). */
.sj-page--information .sj-hr,
.im-modal .sj-hr { height: 1px; width: 100%; flex: 0 0 auto; border: 0; margin: 0; background: var(--sj-n4-nw); }

/* ------------------------------ Bố cục nội dung ---------------------------- */
.im-main { display: flex; gap: var(--sp-64); align-items: flex-start; padding: var(--sp-64); }
/* `align-items:flex-start` kế thừa từ `.im-main` trở thành trục NGANG khi đổi sang
   flex-direction: column → con tự co theo max-content thay vì tràn hết bề ngang.
   Lưới mosaic dính đúng bẫy này (rộng 674px thay vì 1696px @1920). */
.im-main--stack { flex-direction: column; align-items: stretch; gap: var(--sp-48); }
/* Ở dạng xếp dọc, flex-basis lúc này là CHIỀU CAO nên không giữ 680px nữa. */
.im-main--stack .im-aside { flex: 0 0 auto; width: 100%; }
.im-main--stack .im-lead { max-width: 680px; }
.im-aside {
	flex: 0 0 clamp(280px, 35.42vw, 680px); width: clamp(280px, 35.42vw, 680px);
	display: flex; flex-direction: column; gap: var(--sp-48);
}
/* Cột trái đi theo scroll trong phạm vi nhóm của nó (FAQs có 3 nhóm = 3 cột trái). */
.im-main:not(.im-main--stack) .im-aside { position: sticky; top: var(--sp-48); align-self: flex-start; }
.im-title { margin: 0; font-weight: 500; font-size: var(--fs-72); line-height: 1.1; text-transform: uppercase; color: var(--sj-dark); }
.im-title .accent, .im-title em { font-style: normal; color: var(--sj-red); }
.im-lead { margin: 0; font-weight: 300; font-size: var(--fs-20); line-height: 24px; color: var(--sj-gray); text-align: justify; }
.im-lead p { margin: 0 0 var(--sp-16); }
.im-lead p:last-child { margin-bottom: 0; }
.im-logos { margin-top: auto; padding-top: var(--sp-160); color: var(--sj-n4-nw); display: block; }
.im-logos svg { width: 399px; max-width: 100%; height: auto; display: block; }
.im-content { flex: 1 1 auto; min-width: 0; }

/* -------------------- Accordion (FAQs / Terms / Privacy) ------------------- */
.im-acc { display: flex; flex-direction: column; gap: var(--sp-24); padding-bottom: var(--sp-80); }
.im-acc__item { display: flex; flex-direction: column; gap: var(--sp-24); }
.im-acc__head {
	display: flex; align-items: center; gap: var(--sp-24); width: 100%;
	min-height: 64px; padding: 0; background: none; border: 0; cursor: pointer;
	font-family: inherit; text-align: left;
}
/* collapse.svg khi ĐANG ĐÓNG, expanse.svg khi ĐÃ MỞ — 2 file 48×48 đã gồm nền tròn. */
.im-acc__mark { flex: 0 0 auto; width: var(--ico-48); height: var(--ico-48); display: block; position: relative; }
.im-acc__mark img { display: block; width: 100%; height: 100%; }
.im-acc__mark .is-open-ico { display: none; }
.im-acc__title {
	flex: 1 1 auto; min-width: 0; font-size: var(--fs-24); line-height: 30px;
	letter-spacing: -.5px; text-transform: uppercase; color: var(--sj-dark); font-weight: 400;
}
.im-acc__item.is-open .im-acc__mark .is-closed-ico { display: none; }
.im-acc__item.is-open .im-acc__mark .is-open-ico { display: block; }
.im-acc__item.is-open .im-acc__title { color: var(--sj-red); }
.im-acc__body { background: var(--sj-table-nw); padding: var(--sp-24); }
.im-acc__body > :first-child { margin-top: 0; }
.im-acc__body > :last-child { margin-bottom: 0; }
.im-acc__body p, .im-acc__body li {
	margin: 0 0 var(--sp-16); font-weight: 300; font-size: var(--fs-20);
	line-height: 24px; color: var(--sj-dark); text-align: justify;
}
.im-acc__body ul, .im-acc__body ol { margin: 0 0 var(--sp-16); padding-left: 24px; }
.im-acc__body li { list-style: disc; margin-bottom: 8px; }

/* --------------------------------- Gallery -------------------------------- */
.im-chips { display: flex; flex-wrap: wrap; gap: 4px; padding-top: var(--sp-48); }
.im-chip {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: clamp(44px, 3.333vw, 64px); padding: var(--sp-24) clamp(16px, 2.5vw, 48px);
	background: var(--sj-cream); color: var(--sj-muted-nw); text-decoration: none;
	font-weight: 500; font-size: var(--fs-24); line-height: 1.1; text-transform: uppercase;
	border: 0; cursor: pointer; font-family: inherit;
}
.im-chip.is-active { background: var(--sj-yellow); color: #fff; }
/* Bố cục lưới do `.sj-mosaic` trong sjourney.css lo (cao cố định, rộng theo tỉ lệ thật
   của từng ảnh). Bộ 4 kiểu ô cứng sq/tall/wide/fill đã bỏ cùng field "kiểu ô". */

/* ----------------------- Bảng giá (Departures & Prices) -------------------- */
.im-rates { display: flex; flex-direction: column; width: 100%; }
.im-rate { width: 100%; border-collapse: collapse; table-layout: fixed; }
.im-rate col.c-name { width: 29.48%; }   /* 500/1696 */
.im-rate col.c-occ  { width: 13.21%; }   /* 224/1696 */
.im-rate col.c-val  { width: 19.10%; }   /* 324/1696 */
.im-rate th, .im-rate td {
	border: 1px solid var(--sj-n4-nw); padding: var(--sp-16) clamp(12px, 2.5vw, 48px);
	text-align: center; vertical-align: middle;
}
.im-rate thead th {
	background: var(--sj-gray); color: var(--sj-cream); font-weight: 400;
	font-size: var(--fs-24); line-height: 1.2; border-color: rgba(254, 242, 242, .35);
}
.im-rate thead th.im-rate__year {
	text-align: left; font-weight: 500; font-size: var(--fs-32); text-transform: uppercase;
	padding-left: var(--sp-24); padding-right: var(--sp-24);
}
.im-rate__route { font-weight: 500; font-size: var(--fs-32); line-height: 40px; color: var(--sj-dark); }
.im-rate__route span { display: block; margin-top: 8px; font-weight: 300; font-size: var(--fs-20); line-height: 24px; color: var(--sj-gray); }
.im-rate__occ { font-weight: 500; font-size: var(--fs-24); line-height: 1.2; text-transform: uppercase; color: var(--sj-dark); }
.im-rate tbody td { font-weight: 500; font-size: var(--fs-24); line-height: 1.2; color: var(--sj-red); }
.im-rate tr.is-single > :not(.im-rate__route) { background: var(--sj-table-nw); }

/* ================================ MÀN HẸP ================================= */
@media (max-width: 1023px) {
	.im-wrap { padding: 12px; }
	.im-main { flex-direction: column; padding: var(--sp-24); gap: var(--sp-24); }
	.im-aside { flex: 1 1 auto; width: 100%; }
	.im-main:not(.im-main--stack) .im-aside { position: static; }
	.im-logos { padding-top: var(--sp-48); }
	.im-tabs { flex-wrap: wrap; }
	.im-tab { flex: 1 1 40%; }
	.im-rates { overflow-x: auto; }
	.im-rate { min-width: 760px; }
	/* Ô lưới có flex-basis cứng (200/150/300px) nên hàng 4 ô không co vừa 335px —
	   cho hàng xuống dòng, mỗi ô chiếm nửa hàng. */
}