/* =========================================================================
   The Experience (mới) — template-the-experience-2.php. Figma 4485:2203 (14/10/2026).
   Số px trong chú thích = design @1920; mọi kích thước co theo bề ngang (vw / token chung).
   Chưa có thiết kế mobile: dưới 1024px chỉ bảo đảm không vỡ bố cục (khối cuối file).
   ========================================================================= */

.sj-page--the-experience-2 { background: #000; }

/* ======================= HERO (Figma 4492:2453) ======================= */
.xp2-hero { position: relative; height: 100dvh; max-height: 1080px; min-height: 560px; overflow: hidden; background: #1c1210; color: #fff; }
.xp2-hero__media { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }
.xp2-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Căn giữa bằng inset + margin auto, KHÔNG dùng transform: transform tạo stacking context riêng
   làm mix-blend-mode của tiêu đề không hoà được với ảnh / video nền (chữ đỏ phải sáng lên như Figma). */
.xp2-hero__inner {
	position: absolute; inset: 0; margin: auto; height: fit-content;
	width: min(1206px, 62.8vw); display: flex; flex-direction: column; align-items: center; gap: var(--sp-48); text-align: center;
}
/* 120 Bold, chữ cộng sáng với nền (mix-blend plus-lighter) như Figma. */
.xp2-hero__title { margin: 0; font-size: clamp(48px, 6.25vw, 120px); font-weight: 700; line-height: 1.2; text-transform: uppercase; color: #fff; mix-blend-mode: plus-lighter; }
.xp2-hero__title .accent { color: var(--sj-red); }
.xp2-hero__desc { margin: 0; max-width: clamp(320px, 31.56vw, 606px); font-size: var(--fs-24); font-weight: 500; line-height: 1.2; }
.xp2-hero__btn {
	display: inline-flex; align-items: center; gap: 10px; padding: var(--sp-16) var(--sp-24); border: 0; cursor: pointer;
	background: var(--sj-red); color: var(--sj-cream); font: inherit; font-size: var(--fs-24); font-weight: 500; line-height: 1.333; text-transform: uppercase;
	transition: background var(--sj-dur-fast) var(--sj-ease);
}
.xp2-hero__btn:hover, .xp2-hero__btn:focus-visible { background: var(--sj-dark); }
.xp2-hero__play { width: var(--ico-24); height: var(--ico-24); flex: 0 0 auto; }
/* Nút Live Edit "Đổi video popup" cạnh nút Watch — chỉ hiện khi đang bật Live Edit. */
.xp2-hero__video-edit { display: none; }
body.sjc-live-edit-active .xp2-hero__video-edit { display: flex; justify-content: center; margin-top: 12px; }
.xp2-hero__bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; }
.xp2-hero__logo { display: block; padding: var(--sp-48); }
.xp2-hero__logo img { display: block; width: clamp(56px, 4.84vw, 93px); height: auto; }
.xp2-hero__clock { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding: var(--sp-48); text-transform: uppercase; letter-spacing: -.5px; white-space: nowrap; }
.xp2-hero__city { font-size: clamp(12px, 0.73vw, 14px); color: var(--sj-n4-nw); }
.xp2-hero__time { font-size: var(--fs-20); color: #fff; }

/* Khoảng đen giữa Hero và Carousel (Figma 4492:2490, cao 240). */
.xp2-gap { height: clamp(120px, 12.5vw, 240px); background: #000; }

/* ======================= CAROUSEL ======================= */
.xp2-car {
	/* Carousel cao đúng 1 màn (100dvh) và co nội dung theo CHIỀU NHỎ HƠN của màn so với khung
	   Figma 1920×1080 — màn rộng mà thấp (vd 1920×900) vẫn nằm gọn, không tràn xuống dưới.
	   --xp2-s = "1vw" quy đổi; các token cỡ chữ / khoảng cách dùng trong carousel được tính lại
	   theo thang này. */
	--xp2-s: min(1vw, calc(100dvh / 56.25));
	--fs-20: clamp(13px, calc(var(--xp2-s) * 1.042), 20px);
	--fs-24: clamp(14px, calc(var(--xp2-s) * 1.25), 24px);
	--fs-32: clamp(17px, calc(var(--xp2-s) * 1.667), 32px);
	--fs-48: clamp(22px, calc(var(--xp2-s) * 2.5), 48px);
	--fs-72: clamp(30px, calc(var(--xp2-s) * 3.75), 72px);
	--sp-8: clamp(4px, calc(var(--xp2-s) * 0.417), 8px);
	--sp-16: clamp(8px, calc(var(--xp2-s) * 0.833), 16px);
	--sp-24: clamp(12px, calc(var(--xp2-s) * 1.25), 24px);
	--sp-48: clamp(20px, calc(var(--xp2-s) * 2.5), 48px);
	--ico-24: clamp(18px, calc(var(--xp2-s) * 1.25), 24px);
	--ico-64: clamp(40px, calc(var(--xp2-s) * 3.333), 64px);
	--xp2-ctrl-h: clamp(64px, calc(var(--xp2-s) * 5.3125), 102px); /* cao thanh điều khiển = khối trích dẫn 102 */
	--xp2-card-h: clamp(180px, calc(var(--xp2-s) * 16.67), 320px);
	--xp2-radius: clamp(24px, calc(var(--xp2-s) * 2.5), 48px);
	--xp2-ring: clamp(8px, calc(var(--xp2-s) * 0.833), 16px);
	--xp2-line: clamp(2px, calc(var(--xp2-s) * 0.21), 4px);
	position: relative; background: #000; color: #fff; overflow: hidden;
}
/* Các bước xếp chồng cùng 1 ô lưới → khung cao bằng bước cao nhất, mờ dần sang nhau. */
.xp2-car__steps { display: grid; }
.xp2-slide {
	grid-area: 1 / 1; position: relative; isolation: isolate;
	height: 100vh; height: 100dvh; min-height: 480px;
	padding-top: min(var(--sj-header-h), calc(var(--xp2-s) * 8.333));
	display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-48);
	padding-right: var(--sp-48); padding-bottom: var(--sp-48); padding-left: var(--sp-48);
	opacity: 0; visibility: hidden; transition: opacity .6s var(--sj-ease), visibility 0s linear .6s;
}
.xp2-slide.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity .6s var(--sj-ease), visibility 0s; }
.xp2-slide__bg { position: absolute; inset: 0; z-index: -1; background-color: #2a1a17; background-size: cover; background-position: center; }
.xp2-slide__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* nền video (19/10/2026), lớp tối ::after vẫn phủ trên */
.xp2-slide__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 21.228%, rgba(0,0,0,0) 81.375%, rgba(0,0,0,.7) 100%); }
.xp2-slide--tiles .xp2-slide__bg::after { content: none; } /* Figma slide 3 không có lớp tối */

/* Đầu slide: nhãn 20 · tiêu đề 72 · mô tả 24 Light. */
.xp2-slide__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); filter: drop-shadow(4px 4px 2px rgba(0,0,0,.16)); }
/* Slide 1 (+ bản sao EXIT) đặt nhãn / tiêu đề GIỐNG slide 2, 3 (19/10/2026): sát lề p48, ngay dưới thanh
   menu, phần còn lại để trống — trước đây thụt thêm 48 (thẳng hàng nội dung khung đỏ) và cao tối thiểu 320. */
.xp2-slide--panel .xp2-slide__head,
.xp2-slide--open .xp2-slide__head { flex: 1 1 auto; }
.xp2-slide--tiles .xp2-slide__head { flex: 0 0 auto; }
.xp2-slide__eyebrow { font-size: var(--fs-20); line-height: 1.2; letter-spacing: -.1px; text-transform: uppercase; }
.xp2-slide__title { margin: 0; font-size: var(--fs-72); font-weight: 500; line-height: 1.2; text-transform: uppercase; color: #fff; }
.xp2-slide__title .accent { color: var(--sj-pink); }
.xp2-slide__sub { margin: 0; font-size: var(--fs-24); font-weight: 300; line-height: 1.25; }

/* Khung nội dung (p48). Slide 1 + EXIT nền đỏ; chừa chỗ dưới cùng cho thanh điều khiển.
   Nền đỏ là lớp ::before riêng để hiện dần / trượt đi độc lập với hàng thẻ (dàn dựng JS). */
.xp2-slide__panel { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--sp-48); padding: var(--sp-48); }
.xp2-slide__panel::after { content: ''; flex: 0 0 var(--xp2-ctrl-h); }
.xp2-slide--panel .xp2-slide__panel::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--sj-red); transition: opacity .5s var(--sj-ease), transform .8s cubic-bezier(.65,0,.35,1); }
.xp2-slide__panel.is-bg-off::before { opacity: 0; }
.xp2-slide__panel.is-bg-out::before { transform: translateX(-120vw); }

/* Hàng thẻ / biển EXIT / 6 ô: trượt ngang ra / vào (is-off-r: chờ bên phải, is-off-l: đã ra
   bên trái). no-tr = đặt vị trí tức thì không chạy hiệu ứng. */
.xp2-row { transition: transform 1.5s cubic-bezier(.22,1,.36,1); } /* vào: nhanh rồi chậm dần, 1.5s */
.xp2-row.is-out { transition: transform .7s cubic-bezier(.55,0,.75,.2); } /* ra: tăng tốc dần, .7s */
.xp2-exit.xp2-row { transition-duration: .7s; } /* EXIT nhanh hơn (18/10/2026): vào .7s · ra .5s · nền đỏ ra .6s */
.xp2-exit.xp2-row.is-out { transition-duration: .5s; }
.xp2-slide--exit .xp2-slide__panel.is-bg-out::before { transition-duration: .5s, .6s; }
.xp2-row.is-off-r { transform: translateX(120vw); }
.xp2-row.is-off-l { transform: translateX(-120vw); }
.xp2-car .no-tr, .xp2-car .no-tr::before { transition: none !important; }
/* Slide 1 + EXIT: thẻ / biển EXIT chỉ chạy trong khung đỏ (chốt 15/10/2026) — lớp cắt phủ đúng
   khung đỏ (bù lại padding p48) và chừa vòng viền mờ 16 của thẻ; nền đỏ vẫn trượt ra ngoài. */
.xp2-slide--panel .xp2-clip { overflow: hidden; margin: calc(var(--sp-48) * -1) calc(var(--sp-48) * -1) calc(var(--xp2-ring) * -1); padding: var(--sp-48) var(--sp-48) var(--xp2-ring); }
.xp2-slide--tiles .xp2-slide__panel { flex: 1 1 auto; min-height: 0; }

/* Thẻ ảnh: viền trắng 4, bo 48, cao 320; 4 cột (slide 2 có 3 thẻ vẫn rộng 1/4). Viền mờ 16 là
   viền NGOÀI (Figma stroke outside — không chiếm chỗ, lấn ra khoảng đệm) → box-shadow. */
.xp2-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-48); }
.xp2-card { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; text-align: inherit; cursor: pointer; border-radius: var(--xp2-radius); box-shadow: 0 0 0 var(--xp2-ring) rgba(255,255,255,.2); color: #fff; text-decoration: none; transition: box-shadow var(--sj-dur-fast) var(--sj-ease); }
.xp2-card:hover, .xp2-card:focus-visible { box-shadow: 0 0 0 var(--xp2-ring) rgba(255,255,255,.45); color: #fff; outline: none; }
.xp2-card__inner { transition: transform var(--sj-dur) var(--sj-ease); }
.xp2-card:hover .xp2-card__inner { transform: scale(1.015); }
.xp2-card__inner {
	position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
	height: var(--xp2-card-h); padding: var(--sp-24) var(--sp-16);
	border: var(--xp2-line) solid #fff; border-radius: var(--xp2-radius);
	background-color: rgba(0,0,0,.35); background-size: cover; background-position: center;
}
.xp2-card__inner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.7) 100%); pointer-events: none; }
.xp2-card__title { position: relative; display: flex; align-items: center; justify-content: center; min-height: clamp(64px, calc(var(--xp2-s) * 6.25), 120px); width: 100%; font-size: var(--fs-32); font-weight: 500; line-height: 1.2; text-align: center; text-transform: uppercase; }

/* Chuyển cảnh EXIT: 2 biển 228×320 + vạch giữa. */
.xp2-exit { display: flex; align-items: center; justify-content: center; gap: var(--sp-48); height: var(--xp2-card-h); }
.xp2-exit__sign { display: flex; width: clamp(130px, calc(var(--xp2-s) * 11.875), 228px); height: 100%; border-radius: var(--xp2-radius); box-shadow: 0 0 0 var(--xp2-ring) rgba(255,255,255,.2); }
.xp2-exit__inner { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: var(--sp-24) clamp(16px, calc(var(--xp2-s) * 1.875), 36px); border: var(--xp2-line) solid #fff; border-radius: var(--xp2-radius); }
.xp2-exit__word { font-size: var(--fs-72); font-weight: 500; line-height: 1; text-transform: uppercase; }
.xp2-exit__pict { display: block; width: 100%; height: auto; }
.xp2-exit__sign--mirror .xp2-exit__pict { transform: scaleX(-1); }
.xp2-exit__divider { align-self: stretch; width: var(--xp2-line); background: #fff; }

/* 6 ô đỏ (slide 3): 3 cột × 2 hàng lấp đầy phần còn lại, gap 16. */
.xp2-tiles { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--sp-16); filter: drop-shadow(8px 8px 12px rgba(0,0,0,.08)); }
.xp2-tile { display: flex; align-items: center; gap: var(--sp-24); min-height: 0; padding: clamp(16px, calc(var(--xp2-s) * 1.67), 32px) var(--sp-24); background: var(--sj-red); color: #fff; text-decoration: none; transition: background var(--sj-dur-fast) var(--sj-ease); }
a.xp2-tile:hover, a.xp2-tile:focus-visible { background: var(--sj-dark); color: #fff; }
.xp2-tile__icon { flex: 0 0 auto; width: clamp(40px, calc(var(--xp2-s) * 4.58), 88px); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.xp2-tile__icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.xp2-tile__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.xp2-tile__title { font-size: clamp(18px, calc(var(--xp2-s) * 1.46), 28px); font-weight: 500; line-height: 1.2; text-transform: uppercase; }
.xp2-tile__sub { font-size: var(--fs-20); font-weight: 300; line-height: 1.2; color: #F9A8AA; /* r300 */ }

/* ---- Thanh điều khiển dùng chung: nằm trong khung p48 của slide (cách mép 96) ---- */
.xp2-ctrl {
	position: absolute; z-index: 3; left: calc(var(--sp-48) * 2); right: calc(var(--sp-48) * 2); bottom: calc(var(--sp-48) * 2);
	height: var(--xp2-ctrl-h); display: flex; align-items: center; gap: var(--sp-48);
	transition: transform .5s var(--sj-ease-out), opacity .5s var(--sj-ease);
}
.xp2-ctrl.is-off { transform: translateY(calc(100% + var(--sp-48) * 2)); opacity: 0; }
.xp2-ctrl__left { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: var(--sp-48); }
.xp2-ctrl__logo { flex: 0 0 auto; width: clamp(48px, calc(var(--xp2-s) * 4.84), 93px); height: auto; display: block; }
/* Thanh 3 đoạn giữa logo và số — chỉ trang trí (khôi phục 18/10/2026, không tự chạy): đoạn đã qua
   + đoạn của slide đang xem sáng trắng, đoạn sau mờ. JS chỉ đổi class is-done / is-current. */
.xp2-ctrl__progress { flex: 0 1 clamp(200px, calc(var(--xp2-s) * 30.57), 587px); display: flex; gap: 4px; }
.xp2-ctrl__seg { flex: 1 1 0; height: 4px; background: rgba(255,255,255,.2); overflow: hidden; }
.xp2-ctrl__seg i { display: block; height: 100%; width: 0; background: #fff; transition: width .6s var(--sj-ease); }
.xp2-ctrl__seg.is-done i, .xp2-ctrl__seg.is-current i { width: 100%; }

.xp2-ctrl__mid { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: var(--sp-48); perspective: 800px; }
/* Số + trích dẫn của 3 slide chồng cùng 1 ô; đổi slide: nội dung cũ lướt lên trên, nội dung
   mới lướt từ dưới lên CÙNG LÚC (khung cắt phần tràn). */
.xp2-ctrl__infos { flex: 0 0 auto; display: grid; overflow: hidden; height: var(--xp2-ctrl-h); }
.xp2-ctrl__info { grid-area: 1 / 1; display: flex; align-items: center; gap: var(--sp-16); visibility: hidden; }
.xp2-ctrl__info.is-active { visibility: visible; }
.xp2-ctrl__info.is-leave { visibility: visible; animation: xp2-info-up .6s cubic-bezier(.65,0,.35,1) forwards; }
.xp2-ctrl__info.is-enter { animation: xp2-info-in .6s cubic-bezier(.65,0,.35,1) both; }
@keyframes xp2-info-up { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100%); opacity: 0; } }
@keyframes xp2-info-in { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.xp2-ctrl__num { width: clamp(56px, calc(var(--xp2-s) * 5.83), 112px); font-size: clamp(44px, calc(var(--xp2-s) * 5.21), 100px); font-weight: 700; line-height: 1; text-transform: uppercase; }
.xp2-ctrl__quote { display: flex; align-items: stretch; gap: var(--sp-8); height: var(--xp2-ctrl-h); }
.xp2-ctrl__mark { display: flex; align-items: flex-start; width: clamp(16px, calc(var(--xp2-s) * 1.46), 28px); font-family: Georgia, 'Times New Roman', serif; font-size: var(--fs-48); line-height: 1; opacity: .7; }
.xp2-ctrl__mark--end { align-items: flex-end; }
.xp2-ctrl__text { align-self: center; width: clamp(220px, calc(var(--xp2-s) * 20.83), 400px); font-size: var(--fs-24); font-weight: 300; line-height: 1.25; }
.xp2-ctrl__line { flex: 1 1 auto; min-width: 24px; height: 2px; background: #fff; }
.xp2-car[data-step="s1"] .xp2-ctrl__line, .xp2-car[data-step="exit"] .xp2-ctrl__line { height: 4px; }
.xp2-ctrl__nav { flex: 0 0 auto; display: flex; gap: var(--sp-48); }
.xp2-ctrl__btn { width: var(--ico-64); height: var(--ico-64); border-radius: 50%; border: 0; padding: 0; background: #fff; color: var(--sj-red); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--sj-dur-fast) var(--sj-ease); }
.xp2-ctrl__btn:hover, .xp2-ctrl__btn:focus-visible { background: var(--sj-cream); }
.xp2-ctrl__btn:disabled { opacity: .4; cursor: default; background: #fff; } /* slide 1 không lùi được (18/10/2026) */
.xp2-ctrl__btn svg { width: calc(var(--ico-24) * 25 / 24); height: var(--ico-24); display: block; transform: rotate(90deg); } /* mũi tên ← → xoay thành ↑ (trước) ↓ (sau), 19/10/2026 */

/* ---- Màn CTA sau slide 3 (Figma 4529:3164, 18/10/2026) ----
   Ảnh nền phủ kín, không lớp tối (Figma); khối giữa: logo 133×144 · nhãn 20 · tiêu đề 72 ·
   mô tả 24 Light · nút đỏ p16/80 chữ 24. Thanh điều khiển ẩn ở bước này (JS gắn is-off).
   Vào: nền mờ dần (.6s, như đổi slide) rồi khối chữ hiện lên từ dưới (is-in do JS gắn). */
.xp2-slide--cta { justify-content: center; align-items: center; padding-bottom: var(--sp-48); }
.xp2-slide--cta .xp2-slide__bg::after { content: none; }
.xp2-cta { display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); width: 100%; text-align: center; opacity: 0; transform: translateY(var(--sp-48)); transition: opacity .7s var(--sj-ease), transform .9s cubic-bezier(.22,1,.36,1); }
.xp2-slide--cta.is-in .xp2-cta { opacity: 1; transform: none; }
.xp2-cta__logo { display: block; width: clamp(80px, calc(var(--xp2-s) * 6.93), 133px); height: auto; }
.xp2-cta__text { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); width: 100%; }
.xp2-cta__eyebrow { font-size: var(--fs-20); line-height: 1.2; letter-spacing: -.1px; text-transform: uppercase; }
.xp2-cta__title { margin: 0; font-size: var(--fs-72); font-weight: 500; line-height: 1.2; text-transform: uppercase; color: #fff; }
.xp2-cta__title .accent { color: var(--sj-pink); }
.xp2-cta__desc { margin: 0; font-size: var(--fs-24); font-weight: 300; line-height: 1.25; }
.xp2-cta__btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--sp-16) clamp(32px, calc(var(--xp2-s) * 4.167), 80px); background: var(--sj-red); color: #FEF2F2; font-size: var(--fs-24); font-weight: 500; line-height: 1.33; text-transform: uppercase; text-decoration: none; transition: background var(--sj-dur-fast) var(--sj-ease); }
.xp2-cta__btn:hover, .xp2-cta__btn:focus-visible { background: var(--sj-dark); color: #FEF2F2; }
/* Live Edit / giảm chuyển động / không JS: khối chữ CTA hiện sẵn. */
body.sjc-live-edit-active .xp2-cta, .xp2-car:not(.is-js) .xp2-cta { opacity: 1; transform: none; }

/* ---- Popup chi tiết thẻ (bấm thẻ slide 1, 2) — chưa có Figma, dựng theo style chung ---- */
.xp2-pop { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: var(--sp-48); background: rgba(0,0,0,.75); opacity: 0; transition: opacity .3s var(--sj-ease); }
.xp2-pop[hidden] { display: none; }
.xp2-pop.is-open { opacity: 1; }
.xp2-pop__box { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(1200px, 100%); max-height: calc(100dvh - var(--sp-48) * 2); overflow: auto; background: #fff; color: var(--sj-gray); transform: translateY(16px) scale(.98); transition: transform .3s var(--sj-ease-out); }
.xp2-pop.is-open .xp2-pop__box { transform: none; }
.xp2-pop__media { min-height: clamp(260px, 30vw, 560px); background-color: #2a1a17; background-size: cover; background-position: center; }
.xp2-pop__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-16); padding: var(--sp-48); }
.xp2-pop__title { margin: 0; padding-right: var(--ico-64); font-size: var(--fs-48); font-weight: 500; line-height: 1.15; text-transform: uppercase; color: var(--sj-dark); }
.xp2-pop__sub { margin: 0; font-size: var(--fs-24); font-weight: 500; line-height: 1.25; color: var(--sj-red); }
.xp2-pop__text { font-size: var(--fs-20); font-weight: 300; line-height: 1.5; }
.xp2-pop__text p { margin: 0 0 var(--sp-16); }
.xp2-pop__text p:last-child { margin-bottom: 0; }
.xp2-pop__more { margin-top: var(--sp-8); }
.xp2-pop__more[hidden] { display: none; }
.xp2-pop__close { position: absolute; top: 0; right: 0; z-index: 1; width: var(--ico-64); height: var(--ico-64); padding: 0; border: 0; background: none; cursor: pointer; }
.xp2-pop__close img { display: block; width: 100%; height: 100%; }
body.xp2-pop-open { overflow: hidden; }
@media (max-width: 767.98px) {
	.xp2-pop { padding: 16px; }
	.xp2-pop__box { grid-template-columns: minmax(0, 1fr); }
	.xp2-pop__media { min-height: 220px; }
	.xp2-pop__body { padding: 24px 20px; }
}

/* ---- Popup video (nút Watch the Experience) ---- */
.xp2-video { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: var(--sp-48); background: rgba(0,0,0,.88); }
.xp2-video[hidden] { display: none; }
.xp2-video__box { position: relative; width: min(1280px, 100%); aspect-ratio: 16 / 9; background: #000; }
.xp2-video__box iframe, .xp2-video__box video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.xp2-video__close { position: absolute; top: var(--sp-24); right: var(--sp-24); width: var(--ico-48); height: var(--ico-48); padding: 0; border: 0; background: none; cursor: pointer; }
.xp2-video__close img { width: 100%; height: 100%; display: block; }
body.xp2-video-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.xp2-slide, .xp2-slide.is-active, .xp2-row, .xp2-ctrl, .xp2-slide--panel .xp2-slide__panel::before { transition: none; }
	.xp2-ctrl__info.is-leave, .xp2-ctrl__info.is-enter { animation: none; }
	.xp2-pop, .xp2-pop__box, .xp2-card__inner { transition: none; }
	.xp2-cta { transition: none; opacity: 1; transform: none; }
	.xp2-ctrl__seg i { transition: none; }
}

/* ======================= DƯỚI 1024px (chưa có thiết kế mobile) =======================
   Chỉ bảo đảm không vỡ: bỏ chiều cao cố định, thẻ / ô xuống 2 cột, thanh điều khiển nằm
   dưới carousel thay vì đè lên khung. */
@media (max-width: 1023.98px) {
	.xp2-hero__inner { width: calc(100% - 40px); }
	.xp2-hero__desc { max-width: 100%; }
	.xp2-slide { height: auto; min-height: 560px; padding: calc(var(--sj-header-h) + 16px) 20px 20px; }
	.xp2-car { --xp2-s: 1vw; }
	.xp2-ctrl__infos { height: auto; }
	.xp2-slide--panel .xp2-slide__head { min-height: 0; padding: 0; }
	.xp2-slide__panel { padding: 20px; }
	.xp2-slide--panel .xp2-clip { margin: -20px -20px calc(var(--xp2-ring) * -1); padding: 20px 20px var(--xp2-ring); }
	.xp2-slide--open .xp2-slide__panel { padding: 0; }
	.xp2-slide__panel::after { content: none; }
	.xp2-cards, .xp2-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.xp2-tiles { grid-auto-rows: auto; }
	.xp2-exit { height: 220px; }
	.xp2-ctrl { position: relative; left: auto; right: auto; bottom: auto; height: auto; flex-wrap: wrap; padding: 20px; gap: 16px; }
	.xp2-ctrl__left, .xp2-ctrl__mid { flex: 1 1 100%; }
	.xp2-ctrl__line { display: none; }
	.xp2-ctrl__quote { height: auto; }
	.xp2-ctrl__text { width: auto; flex: 1 1 auto; }
	.xp2-ctrl__nav { margin-left: auto; }
	.xp2-slide--cta { padding-bottom: 40px; }
	/* Chưa có thiết kế mobile, không cuộn từng bước: thanh điều khiển (mũi tên) luôn hiện, kể cả ở
	   CTA, để còn bấm quay lại. */
	.xp2-ctrl.is-off { transform: none; opacity: 1; }
}
@media (max-width: 599.98px) {
	.xp2-cards, .xp2-tiles { grid-template-columns: minmax(0, 1fr); }
}