/* Body và Container */
body {
    font-family: sans-serif;
    /* Chọn font chữ không chân */
    text-align: center;
    /* Căn giữa nội dung văn bản */
    background-color: #f0f0f0;
    /* Màu nền xám nhạt */
    padding: 20px;
    /* Khoảng cách bên trong body */
}

.container {
    max-width: 1200px;
    /* Giới hạn chiều rộng tối đa của container */
    margin: auto;
    /* Căn giữa container theo chiều ngang */
}

/* Các nút lọc */
.filter-buttons button {
    padding: 10px 20px;
    /* Thêm khoảng cách trong nút (trên/dưới 10px, trái/phải 20px) */
    margin: 5px;
    /* Khoảng cách giữa các nút */
    border: none;
    /* Xóa viền mặc định */
    background-color: #ddd;
    /* Màu nền xám nhạt cho nút */
    cursor: pointer;
    /* Khi hover chuột sẽ thành hình bàn tay */
    border-radius: 5px;
    /* Bo tròn góc nút */
    transition: background-color 0.3s;
    /* Hiệu ứng đổi màu nền mượt trong 0.3 giây */
}

.filter-buttons button:hover,
.filter-buttons button.active {
    background-color: #333;
    /* Khi hover hoặc active: nền chuyển sang xám đậm */
    color: white;
    /* Chữ chuyển sang màu trắng */
}

/* Bố cục lưới cho gallery */
.gallery {
    display: grid;
    /* Dùng grid layout để sắp xếp item */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /* Chia cột tự động, mỗi cột tối thiểu 250px, còn lại co giãn đều */
    gap: 20px;
    /* Khoảng cách giữa các item */
    margin-top: 20px;
    /* Khoảng cách phía trên gallery */
}

/* Các mục trong gallery */
.item {
    background-color: #fff;
    /* Màu nền trắng */
    border-radius: 8px;
    /* Bo tròn góc item */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Tạo bóng mờ nhẹ */
    overflow: hidden;
    /* Ẩn phần nội dung tràn ra ngoài */
    transition: transform 0.3s ease-in-out;
    /* Hiệu ứng mượt khi thay đổi transform */
}

.item img {
    width: 100%;
    /* Ảnh chiếm toàn bộ chiều rộng item */
    height: auto;
    /* Giữ tỉ lệ ảnh đúng */
    display: block;
    /* Hiển thị ảnh dạng block để không bị khoảng trống dư */
}

/* Ẩn các mục không thuộc bộ lọc đã chọn */
.item.hide {
    display: none;
    /* Ẩn hoàn toàn item khi có class "hide" */
}