/* ============================================================================= THE TRAIN — Figma 4417:1801 Nguồn: docs/design-previews/the-train.html (đã verify số đo bằng Chromium). Nạp CÓ ĐIỀU KIỆN cho template-the-train.php (xem functions.php). Số đo gốc @1920: khung nội dung 1824 (padding 48 — đúng chỗ 2 đường kẻ dọc). · Hero + đầu khối Accommodation thụt THÊM 48 nữa → chữ bắt đầu ở 96. · Khối cabin/toa tràn hết 1824: 2 cột 910 + khe 4. · Mỗi khối cao 1080 = hàng 716 + khe 4 + dải sơ đồ toa 360. ============================================================================= */ .sj-page--the-train { background: var(--sj-cream); } /* Đã BỎ (chốt với chủ dự án, đối chiếu Figma 4190:1912): 2 đường kẻ dọc 1px chạy suốt container (.sj-train-rules) và đường kẻ ngang giữa hero với Accommodation (.sj-train-hr). Thiết kế không có cả hai. Mọi phần tử absolute trong màn này đều đã có ancestor position:relative gần hơn nên bỏ .sj-train-rules không ảnh hưởng bố cục. */ /* Nút tròn của slider — định nghĩa riêng cho màn này (the-journey.css không cùng nạp). */ .sj-page--the-train .sj-circle-nav { flex: 0 0 auto; width: var(--ico-64); height: var(--ico-64); border-radius: 50%; border: 0; background: #fff; color: var(--sj-red); cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(67, 12, 14, .10); } /* left/right-arrow-style-1.svg khung 25×24 — giữ đúng tỉ lệ, ép vuông sẽ bẹp 4%. */ .sj-page--the-train .sj-circle-nav svg { width: calc(var(--ico-24) * 25 / 24); height: var(--ico-24); display: block; } /* ============================ 1. HERO (4190:1912) ============================ Cao 784 = pt-160 + hàng 544 + pb-80. */ /* Chặn trên: nội dung tối đa --sj-boxed (1824px @1920) — đồng bộ .sj-container toàn site. Wrapper đã có gutter var(--sp-48) nên max-width cộng thêm 2 gutter. */ .sj-train-hero { padding: var(--sp-160) var(--sp-48) var(--sp-80); max-width: calc(var(--sj-boxed) + var(--sp-48) * 2); margin-inline: auto; } .sj-train-hero__row { display: flex; gap: var(--sp-48); align-items: flex-start; padding: 0 var(--sp-48); min-height: clamp(320px, 28.33vw, 544px); } /* Chặn dưới @1024: basis cố định 869px khiến cột ảnh chỉ còn ~27px ở 1024 (ngay trên breakpoint 1023). Đổi sang basis theo tỉ lệ thiết kế 869:811 @1920 → giữ nguyên bề rộng ở 1920 và co đều xuống 1024 (text ~464 · ảnh ~433). */ .sj-train-hero__text { flex: 0 1 calc((100% - var(--sp-48)) * 869 / 1680); max-width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-24); } .sj-train-hero__title { font-size: var(--fs-72); font-weight: 500; text-transform: uppercase; line-height: 1.1; color: var(--sj-dark); margin: 0; } .sj-train-hero__intro { font-size: var(--fs-24); font-weight: 300; line-height: 1.25; color: var(--sj-gray); } .sj-train-hero__intro p { margin: 0 0 var(--sp-16); } .sj-train-hero__intro p:last-child { margin-bottom: 0; } /* Figma 4190:1921: rộng 302, padding 16/80, khe 8, chữ 24 Medium */ /* Lề ngang phải đủ NHỎ để icon + chữ lọt trong 302px, nếu không icon bị bóp mất (chữ có white-space:nowrap nên chỉ icon co được). Bề rộng vẫn cố định 302px như Figma. */ .sj-train-hero__cta { width: 302px; max-width: 100%; padding: var(--sp-16) var(--sp-24); gap: var(--sp-8); display: inline-flex; align-items: center; justify-content: center; } /* link_arrow.svg vẽ bằng STROKE (fill="none"), nên phải tô stroke — đặt `fill` như trước vừa không lên màu mũi tên, vừa bít nét thành mảng đặc. */ .sj-train-hero__cta svg { flex: 0 0 auto; width: var(--ico-24); height: var(--ico-24); display: block; } .sj-train-hero__cta svg path { fill: none; stroke: currentColor; } .sj-train-hero__img { flex: 1 1 0; min-width: 0; align-self: stretch; } .sj-train-hero__img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ===================== 3-6. KHỐI CHUNG (cabin + toa) ===================== */ .sj-train-sec { padding: var(--sp-48); display: flex; flex-direction: column; gap: var(--sp-48); max-width: calc(var(--sj-boxed) + var(--sp-48) * 2); margin-inline: auto; } .sj-train-sec--last { padding-bottom: var(--sp-80); } /* Đầu khối Accommodation (4417:1805): cao 453, chữ thụt thêm 48, căn giữa dọc */ .sj-train-head { min-height: clamp(240px, 23.6vw, 453px); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-24); padding: 0 var(--sp-48); } .sj-train-head__title { font-size: var(--fs-72); font-weight: 500; text-transform: uppercase; line-height: 1.1; color: var(--sj-dark); margin: 0; max-width: 1042px; } .sj-train-head__intro { font-size: var(--fs-24); font-weight: 300; line-height: 1.25; color: var(--sj-gray); max-width: 1280px; } .sj-train-head__intro p { margin: 0; } /* Khối 1080 = hàng 716 + khe 4 + dải sơ đồ 360. Dùng min-height để nội dung dài hơn thì giãn ra chứ không bị cắt. */ .sj-train-blk { display: flex; flex-direction: column; gap: 4px; } .sj-train-blk__row { display: flex; gap: 4px; align-items: stretch; min-height: clamp(420px, 37.29vw, 716px); } .sj-train-blk--reverse .sj-train-blk__row { flex-direction: row-reverse; } /* --- Cột ảnh: ảnh xếp chồng + 2 nút tròn + dải chấm --- */ .sj-train-media { flex: 1 1 0; min-width: 0; position: relative; overflow: hidden; background: var(--sj-n4-nw); } .sj-train-media__track { position: absolute; inset: 0; } .sj-train-media__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .4s ease; } .sj-train-media__img.is-active { opacity: 1; } .sj-train-media__nav { position: absolute; top: 50%; left: var(--sp-48); right: var(--sp-48); transform: translateY(-50%); display: flex; justify-content: space-between; pointer-events: none; } .sj-train-media__nav .sj-circle-nav { pointer-events: auto; } .sj-train-media__dots { position: absolute; left: 50%; bottom: var(--sp-16); transform: translateX(-50%); display: flex; gap: 8px; } .sj-train-dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: #fff; cursor: pointer; } .sj-train-dot.is-active { background: var(--sj-rose-nw); } /* --- Cột chữ --- */ .sj-train-side { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; } /* Panel cabin (4418:2505) canh TRÊN; panel toa (4420:2735) canh GIỮA */ .sj-train-panel { flex: 1 1 auto; background: #fff; padding: var(--sp-48); display: flex; flex-direction: column; justify-content: flex-start; gap: var(--sp-16); } .sj-train-panel--mid { justify-content: center; } .sj-train-panel__title { font-size: var(--fs-32); font-weight: 500; text-transform: uppercase; line-height: 1.25; color: var(--sj-dark); margin: 0; } .sj-train-panel__text { font-size: var(--fs-24); font-weight: 300; line-height: 1.25; color: var(--sj-gray); margin: 0; } .sj-train-panel__head { display: flex; flex-direction: column; gap: var(--sp-8); } .sj-train-panel__big { font-size: var(--fs-72); font-weight: 500; text-transform: uppercase; line-height: 1.1; color: var(--sj-dark); margin: 0; } /* Mô tả 3 toa là rich text (TinyMCE) nên

/