/* Tùy chỉnh font cho bài viết (Giữ nguyên font Inter như mẫu) */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
body {
    font-family: 'Inter', sans-serif;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    /* Ngăn chặn cuộn ngang */
}
/* Vùng chứa Scrollytelling */

.scrolly-container {
    position: relative;
    z-index: 10;
}
/* Các đoạn nội dung (waypoint) - Giữ nguyên 100% style của mẫu */

.step {
    height: 100vh;
    /* Mỗi đoạn chiếm toàn bộ chiều cao viewport */
    display: flex;
    align-items: flex-end;
    /* THAY ĐỔI: Chuyển text xuống dưới */
    justify-content: center;
    position: relative;
    background-size: cover;
    /* Ảnh nền cover toàn bộ */
    background-position: center;
    /* Ảnh nền căn giữa */
    background-attachment: fixed;
    /* Hiệu ứng Parallax */
    transition: background-image 0.8s ease-in-out;
}
/* Nội dung text (hộp trong suốt) - Giữ nguyên 100% style của mẫu */

.step-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    /* Giới hạn chiều rộng text cho dễ đọc */
    padding: 2.5rem;
    background-color: transparent;
    /* THAY ĐỔI: Bỏ nền mờ của cả khối */
    border-radius: 12px;
    box-shadow: none;
    /* THAY ĐỔI: Bỏ bóng mờ */
    text-align: left;
    /* THAY ĐỔI: Căn lề trái */
    opacity: 0;
    /* Ẩn khi không active */
    transform: translateY(20px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    border: none;
    margin-bottom: 10vh;
    /* THAY ĐỔI: Đẩy text lên khỏi đáy 10% */
}

.step.active .step-content {
    opacity: 1;
    /* Hiển thị khi active */
    transform: translateY(0);
}
/* Style cho Tít và Sapo trong Step 1 (Theo mẫu) */

.step h2 {
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.2;
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.9);
    margin-bottom: 0.5rem;
    text-align: center;
    /* Riêng Tít/Sapo vẫn căn giữa */
}

.step p.sapo {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.8;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    font-style: italic;
    /* Kiểu italic cho Sapo */
    text-align: center;
    /* Riêng Tít/Sapo vẫn căn giữa */
}
/* Style cho text nội dung (Theo mẫu) */

.step p {
    color: #ffffff;
    font-size: 1.125rem;
    /* THAY ĐỔI: Chữ nhỏ lại (từ 1.25) */
    line-height: 1.8;
    /* THAY ĐỔI: Giảm khoảng cách dòng một chút (từ 2.0 xuống 1.8) */
    font-weight: 500;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

/* THÊM: Style cho tít phụ của các chương */
.step p strong {
    font-weight: 800;
    font-size: 1.35rem;
    display: block;
    margin-bottom: 0.1em;
    /* THAY ĐỔI: Giảm margin để sát hơn với nội dung */
    line-height: 1.2;
    /* Giữ khoảng cách dòng cho tít phụ */
}
/* THÊM: Style cho nền highlight từng dòng */

.step p span.text-highlight {
    background-color: rgba(0, 0, 0, 0.4);
    /* 40% mờ (0.1% sẽ không thấy) */
    padding: 0.1em 0.25em;
    /* Đệm nhỏ cho nền */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
/* Custom scrollbar style */

 ::-webkit-scrollbar {
    width: 8px;
}

 ::-webkit-scrollbar-thumb {
    background: #4F46E5;
    /* Màu tím than */
    border-radius: 4px;
}
/* FOOTER */

.footer-section {
    background-color: rgba(17, 24, 39, 0.95);
    /* Nền đen mờ */
    color: #D1D5DB;
    padding: 3rem 1.5rem;
    text-align: center;
    z-index: 20;
    position: relative;
}
/* * ẢNH NỀN CHO TỪNG BƯỚC
 * Thay thế 10 ảnh mẫu bằng 11 ảnh mới phù hợp 10 chương + 1 tít
 * (Sử dụng ảnh minh họa chất lượng cao từ Pexels)
*/

#step-1 {
    /* Tít + Sapo: Ảnh sân bay hiện đại, ấn tượng */
    background-image: url('https://sohanews.sohacdn.com/160588918557773824/2025/11/14/anh-9-17630949076131593790798.png');
}

#step-2 {
    /* Chương 1: Toàn cảnh phiên họp Quốc hội (Hội trường Diên Hồng) */
    background-image: url('https://sohanews.sohacdn.com/160588918557773824/2025/11/14/anh-2-17630948401331717550578.jpg');
}

#step-3 {
    /* Chương 2: Bản đồ minh họa vị trí (Ảnh bản đồ/không ảnh) */
    background-image: url('https://sohanews.sohacdn.com/160588918557773824/2025/11/14/anh-3-1763094838565275459640.webp');
}

#step-4 {
    /* Chương 3: Chân dung Bộ trưởng phát biểu */
    background-image: url('https://sohanews.sohacdn.com/160588918557773824/2025/11/14/chatgpt-image-141845-14-thg-11-2025-17631069669841895812471.png');
}

#step-5 {
    /* Chương 4: Phối cảnh nhà ga tương lai, sinh thái – thông minh */
    background-image: url('https://sohanews.sohacdn.com/160588918557773824/2025/11/14/generated17630891130-17630951114971485146555.png');
}

#step-6 {
    /* Chương 5: Bản đồ mặt bằng tổng thể (Ảnh kiến trúc/bản vẽ) */
    background-image: url('https://sohanews.sohacdn.com/160588918557773824/2025/11/14/anh-6-1763094874275765938273.jpg');
}

#step-7 {
    /* Chương 6: Phối cảnh mô hình nhà ga 5 sao (Nội thất lounge) */
    background-image: url('https://sohanews.sohacdn.com/160588918557773824/2025/11/14/geminigeneratedimaged341mod341mod341-1763098045642523999360.png');
}

#step-8 {
    /* Chương 7: Timeline (Ảnh minh họa tiến độ) */
    background-image: url('https://sohanews.sohacdn.com/160588918557773824/2025/11/14/geminigeneratedimagexnuq9txnuq9txnuq-17630949098131729149162.png');
}

#step-9 {
    /* Chương 8: Địa chất, thực địa (Ảnh công trường, san lấp) */
    background-image: url('https://sohanews.sohacdn.com/160588918557773824/2025/11/14/geminigeneratedimage8e58a68e58a68e58-1763106862464746682993.png');
}

#step-10 {
    /* Chương 9: So sánh chi phí (Ảnh biểu đồ tài chính) */
    background-image: url('https://sohanews.sohacdn.com/160588918557773824/2025/11/14/generated17630978720-1763098049252274790075.png');
}

#step-11 {
    /* Chương 10: Kỳ vọng (Ảnh máy bay cất cánh) - Dùng lại ảnh 10 */
    background-image: url('https://sohanews.sohacdn.com/160588918557773824/2025/11/14/anh-10-1763094908941689276054.png');
}
/* Mobile adjustments (Giữ nguyên) */

@media (max-width: 768px) {
    .step {
        background-attachment: scroll;
        /* Tắt parallax trên mobile */
    }
    .step-content {
        max-width: 90%;
        padding: 1.5rem;
    }
    .step h2 {
        font-size: 2rem;
    }
    .step p,
    .step p.sapo {
        font-size: 1rem;
    }
}

/* === THÊM MỚI: Thay thế cho class 'text-base' của Tailwind === */
/* Áp dụng style này cho thẻ <p> trong footer, nơi class="text-base" đã bị xóa */
.footer-section p {
    font-size: 1rem; /* 16px */
    line-height: 1.5rem; /* 24px */
}