/* 1. Layout Tổng quan */
.vnpro-wrapper { font-family: sans-serif; color: #333; background: #fff; border-radius: 8px; }
.vnpro-summary {
    display: flex;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 10px;
    flex-direction: column;
    width: 100%;
}
.flex-review {
    display: flex;
    border: 1px solid #e0e0e0;
}
.v-desc p {
    font-size: 20px;
}
.popup-button {
    display: flex;
    align-items: baseline;
    gap: 20px;
}
/* Cột trái */
.vnpro-sum-left {
    width: 20%;
    display: flex;
    gap: 10px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
}.vnpro-score { font-size: 48px; font-weight: bold; color: #333; line-height: 1; }
.vnpro-stars-big { color: #fdd835; font-size: 18px; margin: 5px 0; }
.vnpro-count { color: #666; font-size: 13px; }

/* Cột giữa (Progress Bars) */
.vnpro-sum-middle { width: 45%; display: flex; flex-direction: column; justify-content: center; }
.vnpro-bar-row { display: flex; align-items: center; margin-bottom: 6px; font-size: 16px; }
.star-label { width: 70px; color: #ccc; }
.star-label .s-fill { color: #fdd835; }
.progress-bg { flex: 1; background: #eee; height: 6px; border-radius: 3px; margin: 0 10px; }
.progress-fill { background: #28a745; height: 100%; border-radius: 3px; }
.count-label { width: 30px; text-align: right; color: #666; }

/* Cột phải (Nút & Ảnh) */
.vnpro-sum-right { width: 35%; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.vnpro-last-images img { width: 45px; height: 45px; object-fit: cover; margin: 2px; border-radius: 4px; }
.vnpro-btn-primary {
    background: #940000;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    margin-top: 10px;
    font-size: 20px;
}
.vnpro-btn-primary:hover { background: #218838; }

/* 2. Review List */
.vnpro-item {
    display: flex;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
 
}
.v-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 5px;
}
.v-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.profileVN {
    display: flex;
    align-items: stretch;
}
.char-avatar { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; color: #333; font-size: 16px; }
.v-content { margin-left: 15px; flex: 1; }
.v-name { font-weight: bold; font-size: 20px; margin-bottom: 4px;    line-height: 1;margin-left: 10px; }
.v-check-buy { color: #28a745; font-size: 12px; margin-left: 10px; display: inline-block; }
.v-stars { color: #fdd835; display: inline-block; }
.v-text-rating { color: #333; font-weight: bold; font-size: 13px; margin-left: 5px; }
.v-desc { margin: 8px 0; line-height: 1.5; font-size: 14px; color: #333; }
.v-images img { width: 80px; height: 80px; object-fit: cover; margin-right: 5px; border-radius: 4px; cursor: pointer; }
.v-actions { margin-top: 10px; font-size: 13px; color: #007bff; }
.v-btn-like, .v-btn-reply { margin-right: 15px; cursor: pointer; }
.v-time { color: #999; float: right; }
span.like-count {
    font-size: 12px;
}
/* 3. Popup Modal */
.vnpro-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
.vnpro-modal-content {
    background: #fff;
    width: 800px;
    max-width: 95%;
    margin: auto;
    padding: 25px;
    border-radius: 8px;
    position: relative;
    animation: fadeIn 0.3s;
}.vnpro-close { float: right; font-size: 28px; cursor: pointer; }
.popup-title { text-align: center; font-size: 28px; text-transform: uppercase; margin-bottom: 15px; }
.popup-prod-info { display: flex; align-items: center; background: #f9f9f9; padding: 10px; margin-bottom: 20px;font-size:20px; }
.popup-prod-info img { width: 50px; margin-right: 10px; }
button.v-filter {
text-transform: none;
    color: #635555;
border-radius: 20px;
font-size:12px;
    border: 1px solid rgb(230, 238, 247);
    
    background: rgb(230, 238, 247);
}
.star-rating span:before {
    color: #fdd835 !important;
}
.star-rating:before, .woocommerce-page .star-rating:before {
    color: #fdd835 !important;
}
button.v-filter.active {
    border: 1px solid;
}
button.v-filter.star img {
    width: 18px;
gap:5px;
}
button.v-filter.star {
    display: flex;
}
.vnpro-filters {
    margin-top: 20px;
    display: flex;
    align-items: baseline;
}
.v-profile {
    display: flex;
    gap: 20px;
}
.star-widget { direction: rtl; display: inline-block; }
.star-widget input {
    display: none !important;
}.star-widget label { font-size: 40px; color: #ddd; cursor: pointer; padding: 0 2px; }
.star-widget input:checked ~ label { color: #fdd835; }
.star-widget label:hover, .star-widget label:hover ~ label { color: #fdd835; }

.popup-rating-sec { text-align: center; margin-bottom: 15px; }
#vnpro-review-form textarea { width: 100%; height: 80px; padding: 10px; border: 1px solid #ddd; border-radius: 10px; margin-bottom: 10px; }
.popup-inputs { display: flex; gap: 10px; margin-bottom: 15px; }
.popup-inputs input { flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
.popup-upload {
    width: 100%;
}
:is(.fas,.far,.fab,.fa-solid,.fa-regular,.fa-brands,.fa-classic,.fa):before{display:none}
.btn-upload-trigger {
    width: 100%;
    border: 1px dashed #28a745;
    color: #28a745;
    padding: 7px 0;
    cursor: pointer;
text-align: center;
    display: inline-block;
    border-radius: 4px;
	font-size:18px;
}
.btn-submit-popup {
    width: 100%;
    background: #fdd835;
    border: none;
    font-weight: bold;
    font-size: 20px;
    margin: 0;

    border-radius: 4px;
}
.popup-inputs input {
    border-radius: 10px !important;
}
#vnpro-img-preview img { width: 50px; height: 50px; object-fit: cover; margin: 5px; }
span#vnpro-reply-context {
    font-size: 20px;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
/* 
mobile */
@media (max-width: 767px) {
   .vnpro-sum-right,.vnpro-sum-middle {
	   width: 100%;
	}
	     .vnpro-filters {
        -webkit-box-flex: 1;
        flex-grow: 1;
        display: flex;
        font-size: 10px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
	.vnpro-sum-right {
    width: 100%;
}
	.vnpro-modal-content {
    background: #fff;
    width: 800px;
    max-width: 95%;
    margin: auto;
    padding: 25px;
    border-radius: 8px;
    position: relative;
    animation: fadeIn 0.3s;
}
.flex-review {
    display: block;
    border: 1px solid #e0e0e0;
}
   .vnpro-summary {
    display: flex;
       padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;
    justify-content: space-between;
    flex-direction: column;
}
	.vnpro-item {
    display: flex;
    flex-direction: column;
}
	.v-content {
    margin-left: 0;
}
}
/* --- CSS CHO PREVIEW ẢNH/VIDEO CÓ NÚT XÓA --- */
#vnpro-img-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.vnpro-preview-item {
    position: relative;
    width: 60px;
    height: 60px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.vnpro-preview-item img, 
.vnpro-preview-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Nút Xóa (X) */
.vnpro-remove-file {
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(255, 0, 0, 0.8);
    color: #fff;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 0 0 0 4px;
    z-index: 10;
}

.vnpro-remove-file:hover {
    background: red;
}
/* Container ảnh trong phần thống kê */
.vnpro-last-images {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center; /* Căn giữa nếu muốn */
}

.vnpro-media-thumb {
    position: relative;
    width: 50px;        /* Kích thước cố định */
    height: 50px;       /* Kích thước cố định */
    border-radius: 4px;
    overflow: hidden;   /* Cắt phần thừa nếu video to hơn */
    border: 1px solid #eee;
    cursor: pointer;
    display: flex;      /* Căn chỉnh nội dung bên trong */
    align-items: center;
    justify-content: center;
    background: #000;   /* Nền đen cho video đỡ bị lộ khoảng trắng */
}

.vnpro-media-thumb img, 
.vnpro-media-thumb video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;  /* QUAN TRỌNG: Cắt video để vừa khung mà không bị méo */
    display: block;
    pointer-events: none; /* Chặn tương tác vào video để click ăn vào div cha */
}

/* Icon Play cho Video nhỏ */
.vnpro-icon-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 12px;
    background: rgba(0,0,0,0.4);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Lớp phủ hiển thị số lượng còn lại (+5) */
.vnpro-more-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    pointer-events: none; /* Để click vẫn xuyên qua vào ảnh */
}