.image-wrapper:hover .delete-icon,
.image-wrapper:hover .zoom-icon {
    display: block !important;
}
.selected-img {
    border: 3px solid red;
    opacity: 0.8;
}





.image-wrapper:hover .delete-icon,
.image-wrapper:hover .zoom-icon {
    display: block !important;
}
.selected-img {
    border: 3px solid red;
    opacity: 0.8;
}

.preview-img {
    cursor: zoom-in;  /* khi di chuột vào ảnh hiện kính lúp zoom */
    transition: transform 0.2s ease-in-out;
}

.preview-img:hover {
    transform: scale(1.05); /* phóng to nhẹ khi hover */
}
.preview-img {
    cursor: move; /* khi di chuột vào sẽ thấy icon move */
}






#videoVolume {
    -webkit-appearance: none; /* Bỏ style mặc định */
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background: linear-gradient(to right, #0d6efd, #80bdff); /* màu xanh đậm → nhạt */
    outline: none;
    transition: background 0.3s;
}

/* Thanh kéo khi hover */
#videoVolume:hover {
    background: linear-gradient(to right, #0b5ed7, #5ab4ff);
}

/* Nút kéo (thumb) - Chrome, Safari, Edge */
#videoVolume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #0d6efd;
    cursor: pointer;
    transition: transform 0.2s;
}

#videoVolume::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

/* Nút kéo (thumb) - Firefox */
#videoVolume::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
}


/* CSS để highlight dòng */