/* Process Flow Connection Lines */
.steps-container {
    position: relative;
}

/* Curve connector between steps - Dùng canvas thay vì background */
.process-canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    left: 0;
    top: 0;
    pointer-events: none;
}

/* Hạt di chuyển với opacity giảm, bỏ glow */
.moving-particle {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #0d6efd;
    z-index: 2;
    box-shadow: none;
    pointer-events: none;
    transition: background-color 0.3s;
    opacity: 0.5;
}

/* Thêm màu sắc ngẫu nhiên cho các hạt */
.moving-particle:nth-child(3n) {
    background-color: #0d6efd; /* Blue */
    opacity: 0.4;
}

.moving-particle:nth-child(3n+1) {
    background-color: #6610f2; /* Purple */
    opacity: 0.3;
}

.moving-particle:nth-child(3n+2) {
    background-color: #0dcaf0; /* Cyan */
    opacity: 0.35;
}

/* Hiệu ứng nhấp nháy (pulse) cho các hạt - bỏ glow */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.25;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.4;
    }
    100% {
        transform: scale(1);
        opacity: 0.25;
    }
}

/* Responsive Process Step Display */
@media (max-width: 768px) {
    .process-mobile-wrapper {
        position: relative;
        overflow: hidden;
        padding-bottom: 30px;
    }
    
    .process-timeline {
        position: absolute;
        left: 50%;
        top: 35px;
        bottom: 0;
        width: 3px;
        background: rgba(13, 110, 253, 0.5);
        transform: translateX(-50%);
        z-index: 1;
        display: none; /* Ẩn timeline */
    }
    
    .step-mobile-spacing {
        margin-bottom: 60px;
    }
    
    .moving-particle-mobile {
        left: 50%;
        transform: translateX(-50%);
        opacity: 0.3;
    }
}