/* css for comment with videos / pictures */
.upload-wrapper
{
    margin:10px 0px;
}
.video-uploaded-block
{
    padding:10px;
    margin:10px 0px;
    border:1px solid #d3d3d3;
    border-radius: 10px;
}
.delete-video-comment
{
    color:rgb(240, 89, 72);
    cursor:pointer;
    margin-left:5px;
}

#media-preview
{
    margin-top:30px;
    position:relative;
    z-index:999999;
    display:none;
}

#image-preview
{
    margin-top:20px;
    position:relative;
    z-index:999999;   
    display:flex; 
    flex-wrap: wrap;
}

.image-uploaded-block
{
    padding:10px;
    margin:10px 5px;
    border:1px solid #d3d3d3;
    border-radius: 10px;
    text-align: center;
}

.delete-image-comment
{
    color:rgb(240, 89, 72);
    cursor:pointer;
    margin-left:5px;
}

.comment-image-showcase
{
    display:flex;
    flex-wrap: wrap;    
}
.comment-image-showcase .image-cmt-item
{    
    margin: 10px 10px 10px 0px;
}
.comment-image-showcase .image-cmt-item a img
{
    width:72px !important;
    height:72px !important;
    border-radius: 10px;
    object-fit: cover;
}

.video-cmt-item {
    margin: 10px 0;
    position: relative;
    width: 50%;
    max-width: 400px; /* Giới hạn chiều rộng tối đa */
 
}

.video-cmt-item .plyr-video {
    width: 100%;
    height: auto;
    max-height: 60vh; /* Giới hạn chiều cao tối đa */
    object-fit: contain; /* Giữ tỷ lệ video gốc */
    border-radius: 10px;
}

/* Responsive cho video dọc kiểu TikTok */
@media (max-width: 767px) {
    .mobile-upload-area
    {
        padding:0 !important;
        min-height: 100px;
    }
    .video-cmt-item {
        max-width: 80%;
    }
    
    .video-cmt-item .plyr-video {
        max-height: 70vh; /* Tăng chiều cao tối đa trên mobile */
    }
}

/* Tùy chỉnh Plyr */
.video-cmt-item .plyr__video-wrapper {
    background: #000;   
    border-radius: 10px; 
    overflow: hidden; /* Đảm bảo nội dung không tràn ra ngoài */
}

.video-cmt-item .plyr--video {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* whatsapp button for single place */
.whatsapp-icon-area
{
    display:flex;
    justify-content: center;
    align-items: center;
    margin:15px 0px;
}

/* end whatsapp */

/*new css 7th may 2025 */

/* end new css 7th may 2025 */