/* --- CÀI ĐẶT CHUNG --- */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #fcfcfc;
    color: #444;
    margin: 0;
    padding: 20px;
}

* {
    box-sizing: border-box;
}

/* --- HEADER --- */
.main-header {
    text-align: center;
    margin-bottom: 50px;
}

.main-header h1 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.main-header p {
    font-size: 1rem;
    color: #555;
    margin: 5px 0;
    font-weight: 500;
}

/* --- TIMELINE CONTAINER --- */
.timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

/* Đường kẻ dọc */
.timeline::after {
    content: '';
    position: absolute;
    width: 2px;
    background-color: #e0e0e0;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1px;
}

/* --- TIMELINE ITEM (Mỗi Level) --- */
.timeline-item {
    padding: 10px 40px;
    position: relative;
    width: 50%;
}

/* Vị trí các item */
.timeline-item.left {
    left: 0;
}

.timeline-item.right {
    left: 50%;
}

/* Dấu chấm tròn trên đường kẻ */
.timeline-item::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background-color: white;
    border: 4px solid #ccc; /* Màu mặc định */
    top: 28px; /* Căn chỉnh vị trí */
    border-radius: 50%;
    z-index: 1;
}

.timeline-item.left::after {
    right: -11px; /* (18px width + 4px*2 border) / 2 - (2px line / 2) = 13 - 1 = 12. Dùng 11 cho vừa */
}

.timeline-item.right::after {
    left: -11px;
}

/* --- NỘI DUNG BÊN TRONG KHỐI --- */
.timeline-content {
    position: relative;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden; /* Quan trọng để bo góc */
}

.level-header {
    padding: 18px 25px;
    color: white;
    font-size: 1.3rem;
    font-weight: 700;
}

/* Dùng clip-path để tạo hình mũi tên */
.timeline-item.left .level-header {
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 0 0);
}

.timeline-item.right .level-header {
    clip-path: polygon(0 50%, 20px 0, 100% 0, 100% 100%, 20px 100%, 0 50%);
}

.level-body {
    background-color: white;
    padding: 25px;
}

.level-body p {
    font-size: 1rem;
    font-weight: 500;
    color: #444;
    margin-top: 0;
    margin-bottom: 20px;
}

.level-body h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    margin-top: 20px;
    margin-bottom: 10px;
}

.level-body ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.level-body li {
    font-size: 0.95rem;
    color: #555;
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    line-height: 1.5;
}

/* Dấu gạch đầu dòng */
.level-body li::before {
    content: '–';
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    color: #555;
}

/* --- MÀU SẮC TỪNG LEVEL --- */

/* Level 1 */
#level-1 .level-header { background-color: #34495e; }
#level-1::after { border-color: #34495e; }

/* Level 2 */
#level-2 .level-header { background-color: #f1c40f; }
#level-2::after { border-color: #f1c40f; }

/* Level 3 */
#level-3 .level-header { background-color: #e75e84; } /* Màu hồng/đỏ */
#level-3::after { border-color: #e75e84; }


/* --- RESPONSIVE CHO DI ĐỘNG --- */
@media screen and (max-width: 768px) {
    /* Ẩn đường kẻ */
    .timeline::after {
        display: none;
    }

    /* Các khối chiếm 100% chiều rộng */
    .timeline-item {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Reset vị trí */
    .timeline-item.right {
        left: 0;
    }

    /* Ẩn dấu chấm tròn */
    .timeline-item::after {
        display: none;
    }

    /* Bỏ clip-path và dùng bo góc bình thường */
    .level-header {
        clip-path: none !important;
        border-radius: 8px 8px 0 0 !important;
    }

    .level-body {
        border-radius: 0 0 8px 8px !important;
    }
}