/* ==========================================================================
   ẢNH + VIDEO TRONG ĐÁNH GIÁ SẢN PHẨM — đi kèm views/ecommerce/includes/hl-reviews.blade.php,
   review-list.blade.php và Theme\Ninico\Supports\HlReviewVideo.
   File riêng (không thêm vào hl-pages.css — file đó dùng chung với nhiều trang). Có HAI bản:
   platform/themes/ninico/public/css và public/themes/ninico/css — trình duyệt đọc bản public.
   ========================================================================== */

/* ---- danh sách đánh giá: ô video đứng trước hàng ảnh ---- */
.hl-rvitem__mediarow { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.hl-rvitem__mediarow > .hl-rvitem__media { padding-top: 0; }

.hl-rvvid {
    position: relative; flex: 0 0 auto; display: block; width: 80px; height: 80px; margin: 0; padding: 0;
    border: 0; border-radius: 13px; overflow: hidden; cursor: pointer;
    background: #2B2418; color: #fff; font-family: inherit;
}
.hl-rvvid img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .88; }
.hl-rvvid__play { position: absolute; inset: 0; display: grid; place-items: center; }
.hl-rvvid__play span {
    width: 30px; height: 30px; border-radius: 99px; display: grid; place-items: center;
    background: rgba(20, 16, 10, .55); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}
.hl-rvvid__dur {
    position: absolute; left: 5px; bottom: 5px; padding: 1px 5px; border-radius: 6px;
    background: rgba(20, 16, 10, .66); font-size: 10px; font-weight: 700; line-height: 1.45;
    font-variant-numeric: tabular-nums;
}
.hl-rvvid:hover img { opacity: 1; }
.hl-rvvid:focus-visible { outline: 2px solid var(--hl-link); outline-offset: 2px; }

/* ---- form: ô chọn video (cùng cỡ, cùng viền với ô "Thêm ảnh" của plugin) ---- */
.hl-rvvideo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hl-rvvideo__pick {
    position: relative; overflow: hidden; width: 74px; height: 74px; margin: 0; cursor: pointer;
    border-radius: 14px; border: 1.5px dashed #E8B84B; background: var(--hl-tile); color: var(--hl-link);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.hl-rvvideo__text { font-size: 9px; font-weight: 800; line-height: 1.2; }
.hl-rvvideo__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.hl-rvvideo__item {
    position: relative; width: 74px; height: 74px; border-radius: 14px; overflow: hidden; background: #2B2418;
}
.hl-rvvideo__item video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.hl-rvvideo__item .hl-rvvid__play { pointer-events: none; }
.hl-rvvideo__remove {
    position: absolute; z-index: 1; top: 4px; right: 4px; width: 20px; height: 20px; margin: 0; padding: 0;
    border: 0; border-radius: 99px; background: rgba(43, 36, 24, .62); color: #fff;
    display: grid; place-items: center; font-size: 14px; line-height: 1; cursor: pointer;
}
.hl-rvvideo__meta { font-size: 10.5px; line-height: 1.5; color: #756B59; font-variant-numeric: tabular-nums; }
.hl-rvvideo.is-picked .hl-rvvideo__pick { display: none; }

/* dòng trạng thái dưới nút gửi (thu nhỏ ảnh / tải video lên x%) */
.hl-rvform__status { margin: -2px 0 0; font-size: 11.5px; font-weight: 700; line-height: 1.5; color: var(--hl-link); text-align: center; }

/* ---- trình phát video ---- */
.hl-rvplayer {
    width: auto; max-width: min(94vw, 900px); margin: auto; padding: 0; border: 0; overflow: visible;
    background: transparent;
}
.hl-rvplayer::backdrop { background: rgba(20, 16, 10, .8); }
.hl-rvplayer video {
    display: block; width: auto; max-width: min(94vw, 900px); max-height: 84vh; min-width: 240px;
    border-radius: 14px; background: #000;
}
.hl-rvplayer__close {
    position: absolute; top: -14px; right: -14px; width: 34px; height: 34px; margin: 0; padding: 0;
    border: 0; border-radius: 99px; background: #fff; color: #2B2418; font-size: 20px; line-height: 1;
    display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.hl-rvplayer__msg {
    margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .92);
    font-size: 12.5px; line-height: 1.5; color: #2B2418; text-align: center;
}

@media (max-width: 600px) {
    .hl-rvvid { width: 64px; height: 64px; border-radius: 11px; }
    .hl-rvplayer__close { top: 6px; right: 6px; }
}