.loading-container {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}

    .loading-container .top {
        position: relative;
        display: inline-block;
        width: 20px; /* nhỏ lại */
        height: 20px; /* nhỏ lại */
        border-radius: 50%;
        margin: 15px; /* giảm khoảng cách */
    }

        .loading-container .top.a1,
        .loading-container .top.a1:before {
            background: #d21f1f;
            animation-delay: 0s;
        }

        .loading-container .top.a2,
        .loading-container .top.a2:before {
            background: #69c820;
            animation-delay: 0.15s; /* nhanh hơn */
        }

        .loading-container .top.a3,
        .loading-container .top.a3:before {
            background: #ceb32a;
            animation-delay: 0.3s;
        }

        .loading-container .top.a4,
        .loading-container .top.a4:before {
            background: #306bb3;
            animation-delay: 0.45s;
        }

        .loading-container .top:before {
            content: "";
            position: absolute;
            left: -3px;
            top: -3px;
            width: 26px; /* nhỏ theo dot */
            height: 26px;
            border-radius: 50%;
            animation: ani 1.2s infinite ease-in; /* nhanh hơn (2s → 1.2s) */
        }

@keyframes ani {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }

    100% {
        transform: scale(1.8); /* giảm độ lan để nhìn gọn hơn */
        opacity: 0;
    }
}