.timeline{position:relative;width:1000px;max-width:95%;margin:auto;}
/* trục */
.timeline::after{content:'';position:absolute;width:6px;background:#1e5bb8;top:0;bottom:0;left:50.6%;margin-left:-3px;z-index:1;}

/* item */
.timeline-item {position: relative;width: 47%;padding: 20px;opacity: 0;transform: translateY(50px);transition: all 0.8s ease;z-index:5;}
    .timeline-item.show {opacity: 1;transform: translateY(0);}
    .timeline-item:nth-child(odd) {left: 0;}
    .timeline-item:nth-child(even) {left: 50%;}

    /* dot */
    .timeline-item::after {content: '';position: absolute;width: 22px;height: 22px;background: #e52d27;border: 4px solid white;top: 40px;border-radius: 50%;
        z-index:10;}
    .timeline-item:nth-child(odd)::after {right: -11px;}
    .timeline-item:nth-child(even)::after {left: -9px;}

/* card */
.timeline-card{border-radius: 12px;overflow: hidden;border: 4px solid #1e5bb8;position:relative;z-index:2;}
.card-top{display:flex;background:linear-gradient(to bottom, #0b3d91, #d71920);padding:15px;}
    .card-top img{width:140px;height:180px;border:4px solid white;object-fit:cover;}

.card-header-timeline{float:left;width:95%;margin-left:2%;text-align:center;color:white;}
    .period{font:bold 22px Helvetica;}
    .dongchi{font:bold 24px Helvetica;color:yellow;margin-top:15px;}
    .name{font-size:24px;font-weight:bold;color:yellow;margin-top:15px;line-height:28px;}

.card-bottom {background: #1e5bb8;color: white;padding: 15px;line-height:22px;}



@media (min-width: 1821px) 
{

}
@media (min-width: 1440px) and (max-width: 1820px) 
{
}      
@media (min-width: 1024px) and (max-width: 1440px) 
{   
}        
@media (min-width: 768px) and (max-width: 1023px) 
{
}
@media (min-width: 480px) and (max-width: 767px) 
{
}
@media (max-width: 479px) 
{
    .timeline{float:left;max-width:100%;}
    .timeline::after{left:12px;}
    .timeline-item::after{left:-15px !important;}
    .timeline-item{width:90%;margin-left:3%;}
    .timeline-item:nth-child(2n){left:0;}
}