.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.lightbox.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.lightbox.fade-out {
    opacity: 0;
    transform: translateY(100%);
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-content img {
    max-width: 70%;
    max-height: 70%;
    width: auto;
    height: auto;
    border-radius: 8px;
    object-fit: contain;
    padding: 15%; /* Áp dụng padding để giảm kích thước */
}

.close-btn {
    position: fixed; /* Đổi thành fixed để giữ cố định vị trí */
    top: 20px; /* Tăng khoảng cách với cạnh trên */
    right: 20px; /* Tăng khoảng cách với cạnh phải */
    color: rgb(0, 0, 0);
    font-size: 35px;
    cursor: pointer;
    background-color: rgb(255, 255, 255 / 80%);
    width: 40px; /* Đặt chiều rộng */
    height: 40px; /* Đặt chiều cao */
    border-radius: 50%; /* Đảm bảo nút luôn tròn */
    display: flex; /* Để căn giữa nội dung */
    align-items: center; /* Căn giữa theo chiều dọc */
    justify-content: center; /* Căn giữa theo chiều ngang */
    transition: background 0.3s, transform 0.2s; /* Thêm hiệu ứng chuyển tiếp */
    box-shadow: rgb(0 83 255 / 87%) 1px 1px 23px;
    z-index: 1000;
}

.close-btn:hover {
    background: rgba(255, 0, 0, 1); /* Màu nền khi hover */
    transform: scale(1.1); /* Hiệu ứng phóng to khi hover */
}

.lightbox {
    background-image: initial;
    background-color: rgb(167, 167, 167 / 80%);
}

/* Đáp ứng trên thiết bị di động */
@media (max-width: 768px) {
    .lightbox-content {
        width: 90%;
        max-width: 100%;
        max-height: 70vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .lightbox-content img {
        max-width: 100%;
        max-height: 100%;
        padding: 0; /* Bỏ padding trên mobile */
    }
}