/* Counter animation styles */

/* Hiệu ứng cơ bản */
.counter-number {
    display: inline-block;
    font-weight: bold;
    position: relative;
    transition: all 0.3s ease;
}

/* Hiệu ứng trong quá trình đếm */
.counter-number.counting {
    color: #FFF202; /* Highlight màu vàng */
    transform: translateY(-2px);
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Hiệu ứng số chạy */
@keyframes numberFlip {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.counter-number.counting::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #FFF202;
    transform: scaleX(0);
    animation: lineGrow 2s forwards;
}

@keyframes lineGrow {
    to {
        transform: scaleX(1);
    }
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .counter-number {
        font-size: 110%;
    }
}