/* Container chính của Timeline */
.timeline-wrapper {
    position: relative;
    width: 100%;
    height: 600px;
    /* Chiều cao cố định để giữ tỉ lệ */
    margin: 0 auto;
}

/* Ảnh trang trí (Tôm cua) */
.deco-img {
    position: absolute;
    top: 0;
    left: 20%;
    width: 150px;
    opacity: 0.8;
    filter: hue-rotate(80deg);
    /* Chỉnh màu cho giống ảnh */
    z-index: 0;
}

/* Đường vẽ SVG */
.timeline-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: visible;
}

/* Các node sự kiện (Chấm tròn + Chữ) */
.event-node {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
}

/* Chấm tròn xanh */
.dot {
    width: 30px;
    height: 30px;
    background-color: #689f00;
    border-radius: 50%;
    flex-shrink: 0;
    transform: translate(-15px, -15px);
}

/* Nội dung chữ */
.content {
    font-size: 15px;
    line-height: 1.4;
}

.content h3.year {
    color: #659b1e;
    /* Màu xanh chữ năm */
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 5px;
}

.content p {
    color: #000;
    margin-bottom: 5px;
}

/* --- Định vị chữ so với chấm tròn (tuỳ vị trí trên timeline) --- */

/* Kiểu 1: Chữ nằm bên phải chấm (Dùng cho năm 2008) */
.right-side {
    margin-left: 15px;
    width: 250px;
    transform: translateY(-20px);
    /* Đẩy lên 1 chút cho ngang hàng */
}

/* Kiểu 2: Chữ nằm bên dưới chấm (Dùng cho 2018, 2021, 2024, 2025) */
.event-node:has(.bottom-side) {
    flex-direction: column;
    align-items: flex-start;
}

.bottom-side {
    margin-top: 15px;
    width: 200px;
    transform: translateX(-10px);
    /* Căn chỉnh nhẹ cho đẹp */
}

/* Kiểu 3: Chữ nằm bên phải đoạn gấp khúc (Dùng cho 2022) */
.right-side-large {
    margin-left: 20px;
    width: 300px;
    transform: translateY(-10px);
}

.left-side-large {
    width: 240px;
}

.timeline-wrapper .img1 {
    position: absolute;
    top: 0;
    left: 25%;
}

.timeline-wrapper .img2 {
    position: absolute;
    bottom: 10%;
    left: 2%;
    width: 340px;
}

.timeline-wrapper .img3 {
    position: absolute;
    width: 290px;
    right: 0;
    bottom: 35%;
}

/* --- RESPONSIVE MOBILE (Dưới 768px) --- */
@media (max-width: 768px) {
    .timeline-wrapper {
        height: auto;
        padding-left: 30px;
    }

    /* Ẩn đường cong phức tạp và ảnh trang trí trên mobile */
    .timeline-line,
    .deco-img {
        display: none;
    }

    /* Tạo một đường kẻ dọc đơn giản */
    .timeline-wrapper::before {
        content: '';
        position: absolute;
        left: 10px;
        top: 0;
        bottom: 0;
        width: 2px;
        background-color: #4a6b18;
    }

    /* Reset vị trí absolute thành static để xếp chồng dọc */
    .event-node {
        position: relative;
        top: auto !important;
        left: auto !important;
        margin-bottom: 30px;
        flex-direction: row !important;
        /* Luôn nằm ngang: Chấm -> Chữ */
        align-items: flex-start;
    }

    .dot {
        margin-right: 15px;
        transform: translateX(-50%);
        /* Căn giữa đường kẻ dọc */
        margin-top: 5px;
    }

    .content,
    .right-side,
    .bottom-side,
    .right-side-large {
        width: 100%;
        margin: 0;
        transform: none;
    }
}