/* Container chính dạng cột (Masonry thuần CSS) */
.wmf-container {
    column-count: 3; /* Laptop: 3 cột */
    column-gap: 15px;
    padding: 20px;
    overflow: hidden; /* Tránh thanh cuộn ngang khi ảnh bay từ ngoài vào */
}

/* Item ảnh */
.wmf-item {
    break-inside: avoid; /* Tránh bị cắt đôi ảnh giữa các cột */
    margin-bottom: 15px;
    border-radius: 8px; /* Bo góc mềm mại kiểu đám cưới */
    overflow: hidden;
    position: relative;
    opacity: 0; /* Ẩn ban đầu */
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Hiệu ứng mượt mà */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.wmf-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

/* Hiệu ứng Hover nhẹ nhàng */
.wmf-item:hover img {
    transform: scale(1.05);
}

/* --- CÁC HƯỚNG BAY (Sẽ được JS gán) --- */
/* Bay từ trên xuống */
.wmf-from-top { transform: translateY(-100px); }

/* Bay từ dưới lên */
.wmf-from-bottom { transform: translateY(100px); }

/* Bay từ trái sang */
.wmf-from-left { transform: translateX(-100px); }

/* Bay từ phải sang */
.wmf-from-right { transform: translateX(100px); }

/* --- TRẠNG THÁI HIỂN THỊ (Về trung tâm) --- */
.wmf-item.in-view {
    opacity: 1;
    transform: translate(0, 0);
}

/* --- RESPONSIVE (Tương thích thiết bị) --- */
@media (max-width: 1024px) {
    .wmf-container {
        column-count: 2; /* Tablet: 2 cột */
    }
}

@media (max-width: 600px) {
    .wmf-container {
        column-count: 1; /* Phone: 1 cột */
        padding: 10px;
    }
}