.reviews { }
.reviews .topic-title {margin-bottom:30px;}
.reviews .reviews-content form { display:none; padding:10px; margin-top:20px; border:1px solid #DDD; box-sizing:border-box; box-shadow: 0 0 5px #DDD; }
.reviews .reviews-content form .table [class^=col-] {vertical-align:top;}
.reviews .reviews-content form .textbox {border-radius:20px;}
.reviews .reviews-content form .textarea {resize:none; border-radius:5px;}
.reviews .reviews-content form .f-name {padding-left:10px;}
.reviews .reviews-content .image-uploader {width:50px; height:50px; border-radius:100%;}
.reviews .reviews-content .image-uploader div a {font-size:2rem;line-height:50px;}
.reviews .reviews-content .image-uploader div a.bt { font-size:0.8rem; line-height: 1rem; top: unset; bottom: 0; text-indent:-9999px; background-color:#666; }
.reviews .reviews-content .image-uploader div a.bt:before {content:"x";position: absolute; top: 0; left: 50%; display: inline-block; color: #FFF; z-index: 100; text-indent: 0; transform: translateX(-50%); font-weight:bold; }

.reviews .reviews-content form #image_container {margin-bottom:20px;}
.reviews .reviews-content form #image_container .image-uploader {width:70px; height:70px; border-radius:unset; margin:0 5px 5px 0; }

.reviews .reviews-content .rc-stars, .reviews .reviews-content #rating_histogram {font-size:0.8em;}
.reviews .reviews-content .rc-stars svg, .reviews .reviews-content #rating_histogram svg, .product-detail .pd-content .pd-reviews svg, .product-detail .pd-content .pd-ocop svg {width:16px; margin-right:2px;cursor:pointer;}
.reviews .reviews-content #rating_histogram svg { width:14px; }
.reviews .reviews-content .rc-stars svg path, .reviews .reviews-content #rating_histogram svg path, .product-detail .pd-content .pd-reviews svg path, .product-detail .pd-content .pd-ocop svg path {fill:#DDD!important;}
.reviews .reviews-content .rc-stars svg.light path, .reviews .reviews-content #rating_histogram svg.light path, .product-detail .pd-content .pd-reviews svg.light path, .product-detail .pd-content .pd-ocop svg.light path {fill:rgb(255, 180, 0)!important; }

.reviews .reviews-content .button { border-radius: 5px; font-size: 1em; margin-top:10px; background-color: #921a27; border-color: #921a27; }
.reviews .reviews-content form .button {min-width:70px;}

.reviews .reviews-content #rating_histogram {padding-left:10px;}
.reviews .reviews-content #rating_histogram div {width:96%;}
.reviews .reviews-content #rating_histogram div span {width:calc(100% - 150px); box-shadow:inset 0 0 1px #666; position:relative; height:14px; display:inline-block; box-sizing:border-box; }
.reviews .reviews-content #rating_histogram div span span {position:absolute; top:0; left:0; height:100%; background-color:rgb(255, 180, 0)}

/* .reviews .reviews-content .rcf-stars {margin-left:10px;} */
.reviews .reviews-content .rcf-stars svg {width:16px; margin-right:2px;cursor:pointer;}
.reviews .reviews-content .rcf-stars svg path {fill:#DDD!important;}
.reviews .reviews-content .rcf-stars svg:hover path, .reviews .reviews-content .rcf-stars svg.light path {fill:rgb(255, 180, 0)!important;}

.reviews-list { display: flex; flex-wrap: wrap; margin-top:20px; }
.reviews-list .review-item { width:100%;display:inline-block; vertical-align:top; margin-bottom:20px; box-shadow: 0 0 5px #DDD; box-sizing:border-box; padding:20px; }

.reviews-list .review-item .review-info .review-name, .reviews-list .review-item .review-info .review-avatar {display:inline-block;}
.reviews-list .review-item .review-avatar .circle-image {width:50px;}
.reviews-list .review-item .review-name {font-weight:bold; vertical-align:top;padding-left:20px; color:var(--black); }
.reviews-list .review-item .review-name .review-date { font-weight:normal; color:var(--grey-dark); font-size:0.8em; display:block; }
.reviews-list .review-item .review-rating-stars {display:block;margin-top:5px;}
.reviews-list .review-item .review-rating-stars svg {width:16px; margin-right:2px;}
.reviews-list .review-item .review-rating-stars svg path {fill:#DDD;}
.reviews-list .review-item .review-rating-stars svg.light path {fill:rgb(255, 180, 0)!important; }
.reviews-list .review-item .review-images .square-image {display:inline-block; width:32%; margin-right:2%; margin-bottom:5px;}
.reviews-list .review-item .review-images .square-image:nth-child(3n+0) {margin-right:0;}

.reviews-list .reviews-buttons {text-align:center; flex-grow:1}

/* image uploader */

.image-uploader {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #efefef;
  position: relative;
  overflow: hidden;
  border: 1px solid #ccc;
  vertical-align: top;
}
.image-uploader:before {
  padding-top: 100%;
  content: "";
  display: block;
}
.image-uploader div {
  width: 100%;
  height: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: table;
}
.image-uploader div a {
  font-size: 3rem;
  text-align: center;
  color: #ddd;
  display: table-cell;
  vertical-align: middle;
}
.image-uploader div a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
.image-uploader div a.bt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 9;
  font-size: 0.8em;
  color: #fff;
  background-color: #f00;
}
.image-uploader.min {
  width: 40px;
  height: 40px;
}
.image-uploader.min div a {
  font-size: 2em;
}
.image-uploader.min div a.bt {
  font-size: 0.8em;
}

/* / image uploader */

/* --- HỆ THỐNG LƯỚI FLEXBOX CHO REVIEWS --- */

/* Reset & định hình lại class .table thành hàng (Row) */
.reviews .table {
    display: flex !important; /* Ghi đè thuộc tính display: table inline */
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
    width: calc(100% + 20px) !important;
}

/* Định dạng chung cho tất cả các cột con */
.reviews [class*="col-"],
.reviews .col {
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
}

/* --- CHIA TỶ LỆ CÁC CỘT (PC / TABLET) --- */

/* Cột lớn trái (Chứa điểm trung bình & biểu đồ 5 sao) */
.reviews .col-md-5 {
    flex: 0 0 41.666%;
    max-width: 41.666%;
}

/* Cột lớn phải (Chứa nút bấm & Form nhập review) */
.reviews .col-md-8 {
    flex: 0 0 58.333%;
    max-width: 58.333%;
}

/* Chia nhỏ các cột bên trong phần biểu đồ điểm số */
.reviews .col-4 {
    flex: 0 0 40% !important; /* Khớp với width: 40% inline của bạn */
    max-width: 40%;
}

.reviews .col-7 {
    flex: 0 0 60%;
    max-width: 60%;
}

/* Chia nhỏ các cột bên trong Form (Phần ảnh uploader và input tên) */
.reviews .col-1 {
    flex: 0 0 12%;
    max-width: 12%;
}

.reviews .col-11 {
    flex: 0 0 88%;
    max-width: 88%;
}

/* --- TỐI ƯU RESPONSIVE (MÀN HÌNH ĐIỆN THOẠI < 768PX) --- */
@media (max-width: 768px) {
    /* Đưa 2 khối lớn (Điểm số và Form) xếp chồng thành 1 cột dọc */
    .reviews .col-md-5,
    .reviews .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    /* Khu vực biểu đồ điểm số giữ nguyên tỉ lệ nhưng giãn khoảng cách */
    .reviews .col-md-5 .table {
        margin-bottom: 20px;
    }

    /* Trên mobile, ô chọn ảnh và ô nhập tên xếp dọc để không bị méo */
    .reviews #review_form .col-1,
    .reviews #review_form .col-11 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 10px;
    }
}

@media (min-width:768px){
    
	.reviews .reviews-content .button { margin-top:0; }
	
	.reviews-list .review-item {width:49%; margin-right:2%;}
	.reviews-list .review-item:nth-child(2n+0) {margin-right:0;}
	
	.reviews .reviews-content #rating_histogram div span {width:calc(100% - 120px);}
}

@media (min-width:992px){
    
	.reviews-list .review-item {width:32%;}
	.reviews-list .review-item:nth-child(2n+0) {margin-right:2%;}
	.reviews-list .review-item:nth-child(3n+0) {margin-right:0;}
}