/* Thiết lập vị trí cho menu cấp con (cấp 3) */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%; /* Đẩy menu cấp 3 sang bên phải menu cấp 2 */
    margin-top: -1px;
    display: none; /* Mặc định ẩn đi */
}

/* Hiển thị menu cấp 3 khi di chuột vào mục cha của nó */
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

/* Thêm icon mũi tên nhỏ cho đẹp */
.fa-caret-right {
    float: right;
    margin-top: 4px;
    margin-left: 10px;
}







/* Giao diện chấm tròn cơ bản */
/* Container và đường kẻ dọc */
.timeline-item {
    position: relative;
}

/* Chấm tròn nằm đè lên đường kẻ dọc */
.timeline-dot {
    position: absolute;
    left: -7px; /* Căn giữa đường kẻ dọc border-l-2 */
    top: 24px;  /* Căn giữa theo chiều dọc của thẻ card */
    width: 12px;
    height: 12px;
    background-color: #fff;
    border: 2.5px solid #3b82f6;
    border-radius: 50%;
    z-index: 10;
}

/* Hiệu ứng sóng tỏa cho mục đầu tiên */
.timeline-item:first-child .timeline-dot {
    background-color: #3b82f6;
}

.timeline-item:first-child .timeline-dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.4);
    animation: broadcast 2s infinite;
}

@keyframes broadcast {
    0% {
        width: 12px;
        height: 12px;
        opacity: 2;
    }
    100% {
        width: 100px; /* Độ tỏa rộng vừa phải như hình mẫu */
        height: 100px;
        opacity: 0;
    }
}

/* Hiệu ứng hover cho thẻ card */
.status-card {
    transition: all 0.2s ease-in-out;
}

.status-card:hover {
    transform: scale(1.01);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}