/* --- IMPORT FONT --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* --- CSS RESET & REPLACEMENT FOR TAILWIND (Để không cần dùng thư viện) --- */
* {
    box-sizing: border-box;
}

/* Thay thế class 'text-base' của Tailwind */
.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

/* Thay thế class 'underline' của Tailwind */
.underline {
    text-decoration: underline;
}

/* --- CORE STYLES --- */
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) */
.step {
    height: 100vh; /* Mỗi đoạn chiếm toàn bộ chiều cao viewport */
    display: flex;
    align-items: flex-end; /* 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) */
.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; /* Bỏ nền mờ của cả khối */
    border-radius: 12px;
    box-shadow: none; /* Bỏ bóng mờ */
    text-align: left; /* 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; /* Đẩ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 */
.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;
    margin-top: 0;
    text-align: center;
}

.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;
    text-align: center;
    margin: 0;
}

/* Style cho text nội dung */
.step p {
    color: #ffffff;
    font-size: 1.125rem; /* Chữ nhỏ lại */
    line-height: 1.8;
    font-weight: 500;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    margin: 0;
}

/* 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;
    line-height: 1.2;
}

/* Style cho nền highlight từng dòng */
.step p span.text-highlight {
    background-color: rgba(0, 0, 0, 0.4); /* 40% mờ */
    padding: 0.1em 0.25em;
    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: 1.5rem 1.5rem;
    text-align: center;
    z-index: 20;
    position: relative;
}

.footer-section a {
    color: inherit;
}

/* --- ẢNH NỀN CHO TỪNG BƯỚC --- */

#step-1 {
    background-image: url('https://sohanews.sohacdn.com/160588918557773824/2025/11/16/1000045064-1763276509494815380536.jpg');
}

#step-2 {
    background-image: url('https://sohanews.sohacdn.com/160588918557773824/2025/11/16/1000045055-1763268403816547792162.jpg');
}

#step-3 {
    background-image: url('https://sohanews.sohacdn.com/160588918557773824/2025/11/16/1000045047-1763268381619700695404.jpg');
}

#step-4 {
    background-image: url('https://sohanews.sohacdn.com/160588918557773824/2025/11/16/1000045048-17632683816111427722327.jpg');
}

#step-5 {
    background-image: url('https://sohanews.sohacdn.com/160588918557773824/2025/11/16/1000045063-17632765035322090203608.jpg');
}

#step-6 {
    background-image: url('https://sohanews.sohacdn.com/160588918557773824/2025/11/16/1000045051-1763268381996695420202.jpg');
}

#step-7 {
    background-image: url('https://sohanews.sohacdn.com/160588918557773824/2025/11/16/1000044959-1763304084240230223546.jpg');
}

#step-8 {
    background-image: url('https://sohanews.sohacdn.com/160588918557773824/2025/11/16/1000045065-1763276507790985858277.jpg');
}

#step-9 {
    background-image: url('https://sohanews.sohacdn.com/160588918557773824/2025/11/16/1000045066-17632765066101929565912.jpg');
}

#step-10 {
    background-image: url('https://sohanews.sohacdn.com/160588918557773824/2025/11/16/1000044953-17633040865781439146305.jpg');
}

#step-11 {
    background-image: url('https://sohanews.sohacdn.com/160588918557773824/2025/11/16/1000044951-17633040942921705338784.jpg');
}

/* Mobile adjustments */
@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;
    }
}