/* Khung chứa lưới bộ số chạy - LUÔN GIỮ 3 CỘT NẰM NGANG TRÊN MỌI THIẾT BỊ */
.counter-anim-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* Giữ nguyên 3 cột nằm ngang song song trên cả desktop và mobile */
    gap: 30px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Ép cấu trúc từng ô số chạy hiển thị theo hàng dọc */
.counter-anim-card {
    display: flex !important;
    flex-direction: column !important; /* Ép số ở trên, chữ ở dưới */
    align-items: center !important;    /* Căn giữa */
    text-align: center !important;
    box-sizing: border-box !important;
}

/* Bọc số chạy: Chuyển sang hiển thị dạng khối độc lập, co giãn mượt mà */
.counter-anim-card .counter-anim-number-wrapper {
    display: block !important; 
    color: var(--text-title);
    font-family: var(--font-serif);
    font-size: clamp(2.0rem, 5vw, 2.6rem) !important; /* Sử dụng clamp co giãn thông minh theo màn hình điện thoại */
    font-weight: 300;
    margin-bottom: 8px !important; 
}

.counter-anim-card .counter-anim-number {
    display: inline-block !important;
}

.counter-anim-card .counter-anim-suffix {
    display: inline-block !important;
    margin-left: 2px;
}

/* Nhãn chữ mô tả: Chuyển sang hiển thị dạng khối độc lập, co giãn mượt mà chống tràn */
.counter-anim-card .counter-anim-label {
    display: block !important; 
    font-family: var(--font-serif);
    color: var(--text-dark);
    font-size: clamp(0.72rem, 2.2vw, 1.2rem) !important; /* Co giãn mượt từ 11px lên 17px tùy theo độ rộng của màn hình điện thoại */
    opacity: 0.85;
    line-height: 1.4;
    white-space: nowrap; /* Đảm bảo nhãn ngắn luôn thẳng hàng không bị ngắt dòng */
}

/* RESPONSIVE TINH CHỈNH KHOẢNG CÁCH CHO DI ĐỘNG */
@media (max-width: 767px) {
    .counter-anim-grid {
        gap: 10px !important; /* Rút nhỏ khoảng cách giữa 3 cột trên mobile từ 30px về 10px để vừa khít màn hình */
    }
}