/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/
@font-face {
    font-family: 'Helvetica';
    src: url('/wp-content/uploads/2025/12/Helvetica.woff') format('woff');
    font-weight: 400; 
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Helvetica';
    src: url('/wp-content/uploads/2025/12/Helvetica-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
body, p, a, span, li, input, textarea, div {
    font-family: 'Helvetica', sans-serif !important;
}
h1, h2, h3, h4, h5, h6, .header-nav, strong, b {
    font-family: 'Helvetica', sans-serif !important;
    font-weight: 700;
}

.footer__social {
    margin: 0;
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
}




































/* css choi review */

/* 1. Cấu hình chung cho bảng */
.cr-histogramTable {
    width: 100%;
    border-collapse: separate; /* Để sử dụng border-radius */
    border-spacing: 0 8px; /* Khoảng cách giữa các dòng */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
}

/* 2. Cột đầu tiên (Số sao): 5 Star, 4 Star... */
.ivole-histogramCell1 {
    width: 60px; /* Chiều rộng cố định cho cột nhãn */
    white-space: nowrap;
    vertical-align: middle;
    font-size: 0; /* Ẩn chữ "star" mặc định */
    color: #333;
}

/* Tạo lại nội dung hiển thị số + icon ngôi sao */
.ivole-histogramCell1::before {
    font-size: 14px;
    font-weight: 500;
    margin-right: 4px;
    vertical-align: middle;
    /* Dùng counter hoặc nth-child để điền số tương ứng */
}
.ivole-histogramCell1::after {
content: "\2605";
    font-size: 16px;
    color: #ddfc46;
    -webkit-text-stroke: 0.5px #000;
    text-shadow: none; 
    vertical-align: middle;
}

/* Hack CSS để hiển thị đúng số cho từng dòng (vì HTML không có class riêng cho từng số) */
.ivole-histogramRow:nth-child(1) .ivole-histogramCell1::before { content: "5"; }
.ivole-histogramRow:nth-child(2) .ivole-histogramCell1::before { content: "4"; }
.ivole-histogramRow:nth-child(3) .ivole-histogramCell1::before { content: "3"; }
.ivole-histogramRow:nth-child(4) .ivole-histogramCell1::before { content: "2"; }
.ivole-histogramRow:nth-child(5) .ivole-histogramCell1::before { content: "1"; }

/* 3. Cột giữa (Thanh Progress Bar) */
.ivole-histogramCell2 {
    width: 100%; /* Chiếm toàn bộ khoảng trống còn lại */
    padding: 0 15px; /* Khoảng cách 2 bên */
    vertical-align: middle;
}

.ivole-meter {
    background-color: #f1f1f1; /* Màu nền của thanh trượt (xám nhạt) */
    height: 10px; /* Độ dày thanh */
    border-radius: 5px; /* Bo tròn đầu */
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

.ivole-meter-bar {
    background-color: #a0a0a0; /* Màu xám đậm của phần đã fill (như ảnh mẫu) */
    height: 100%;
    border-radius: 5px; /* Bo tròn thanh fill */
    display: block;
    font-size: 0; /* Ẩn số "100" nằm lọt bên trong thanh trong HTML gốc */
}

/* 4. Cột cuối (Phần trăm/Số lượng) */
.ivole-histogramCell3 {
    width: 40px;
    text-align: right;
    vertical-align: middle;
    color: #999; /* Màu chữ xám nhạt */
}


.oso-review-productpage .accordion-inner {
    padding: 0em 0em;
}


.cr-average-rating span {
    font-size: 20px;
}
.cr-total-rating-count {
    font-size: 12px !important;
    color: #878787;
}

#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-add-review
 {
    padding: 10px 30px !important;
    background: #000 !important;
    color: #fff !important;
}
#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-add-review:hover
 {
    background: #8e75f5 !important;
    color: #fff !important;
}
.ivole-meter .ivole-meter-bar {
    border-radius: 10px !important;
    background-color: #c9c9c9 !important;
    box-shadow:none !important;
	background: #adadad !important;
}
.ivole-meter {
    background-color: #f3f3f3 !important;
    height: 10px !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    border: solid 1px #c5c5c5 !important;
}
button.cr-show-more-reviews-prd {
    background-color: #000 !important;
    color: #fff !important;
    height: 50px !important;
}
button.cr-show-more-reviews-prd:hover {
    background-color: #8e75f5 !important;
}
button.single_add_to_cart_button.ajax_add_to_cart.button.alt.button-buy-now {
    display: none;
}
div#base-mobile-sticky-add-to-cart {
    display: none;
}
#reviews.cr-reviews-ajax-reviews .cr-count-row {
    background-color: #fff !important;
    border-bottom: solid 1px #c8c8c8;
}



#accordion-reviews .accordion-title {
    display: none !important;
}
#accordion-reviews .accordion-inner {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
}

#accordion-reviews {
    border: none !important;
}






.woocommerce-tabs .wc-tabs {
  display: none !important;
}
.woocommerce-tabs .woocommerce-Tabs-panel {
  display: none !important;
}
.woocommerce-tabs #tab-reviews {
  display: block !important;
}
    .woocommerce #reviews #comments {
        width: 100%;
    }
    
#reviews .cr-summaryBox-wrap .cr-overall-rating-wrap, .cr-all-reviews-shortcode .cr-summaryBox-wrap .cr-overall-rating-wrap, .cr-all-reviews-shortcode .cr-summaryBox-wrap .cr-add-review-wrap, .cr-reviews-grid .cr-summaryBox-wrap .cr-overall-rating-wrap, .cr-reviews-grid .cr-summaryBox-wrap .cr-add-review-wrap {
    display: flex;
    justify-content: flex-start !important;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 10px;
    align-items: center !important;
}
#reviews .cr-summaryBox-wrap, .cr-all-reviews-shortcode .cr-summaryBox-wrap, .cr-reviews-grid .cr-summaryBox-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    padding: 2px;
    align-items: flex-start;
    flex-direction: column !important;
}
.cr-summaryBox-wrap .cr-histogramTable
 {
    margin-bottom: 0px;
    border-collapse: collapse;
    border: 0px;
    width: 100% !important;
    max-width: 100% !important;
    min-width: auto;
     margin: 0 !important; 
}
h2.woocommerce-Reviews-title,
p.cr-ajax-reviews-cus-images-title
 {
    display: none;
}


.cr-summaryBox-wrap{
  display: flex !important;
  float: left;
  width: 40% !important;
  box-sizing: border-box;
}
.cr-ajax-reviews-cus-images-div {
  display: flex !important;
  float: left;
  width: 60% !important;
  box-sizing: border-box;
}

/* Clear float cho phần dưới, nếu bị dính */
.cr-clear {
  clear: both;
}
.cr-summaryBox-wrap {
  flex-direction: column !important; 
  align-items: stretch !important;   
}

.cr-summaryBox-wrap > .cr-overall-rating-wrap,
.cr-summaryBox-wrap > .ivole-summaryBox {
  width: 100% !important;
  flex: 0 0 100% !important;  
}
#reviews .cr-summaryBox-wrap {
    background-color: #fff !important;
}

/* Hàng chứa các hình */
.cr-ajax-reviews-cus-images-div2 {
  display: flex;
  gap: 8px;
}

/* Mỗi ô ảnh: BẮT BUỘC vuông và chiếm full chiều cao của nó */
.cr-comment-image-top {
  flex: 1 1 0;
  aspect-ratio: 1 / 1 !important;  /* ô vuông */
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
  display: flex;
}

/* Ảnh bên trong: phủ kín ô, không để khoảng trắng */
.cr-comment-image-top-item {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;  /* crop cho đầy ô */
  display: block;
}
.cr-comment-image-top,
.cr-comment-image-top-item {
  max-height: none !important;
}
.cr-ajax-reviews-cus-images-div2 {
  display: flex;
  overflow-x: auto;              /* cuộn ngang */
  gap: 8px;
  scroll-snap-type: x mandatory; /* cuộn “hít” từng ảnh */
  -webkit-overflow-scrolling: touch;
}

/* Mỗi ô ảnh: đúng 1/6 chiều rộng khung -> luôn hiển thị 6 tấm */
.cr-comment-image-top {
  flex: 0 0 calc(100% / 6);      /* 6 ảnh / 1 view */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  scroll-snap-align: start;
  border-radius: 8px;            /* nếu bạn đang dùng bo góc */
}

/* Ảnh bên trong: fill đủ ô, crop cho đẹp */
.cr-comment-image-top-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Cột hình: xếp title trên, list ảnh dưới */
.cr-ajax-reviews-cus-images-div {
  display: flex;
  flex-direction: column;
}

/* Title phía trên, cách list một chút */
.cr-ajax-reviews-cus-images-title {
  margin-bottom: 8px;
}

/* LIST ẢNH: kéo xuống sát đáy cột */
.cr-ajax-reviews-cus-images-div2 {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-top: auto;      /* dòng này đẩy cả list xuống sát đáy */
}

/* Mỗi ô ảnh */
.cr-comment-image-top {
  flex: 0 0 calc(100% / 6);      /* 6 ảnh / view (giữ như trước nếu bạn đang dùng) */
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* Ảnh bên trong: fill ô, crop đẹp */
.cr-comment-image-top-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-div{
    margin: 100px 0 0 0 !important;
}
#reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments .cr-ajax-reviews-list {
    list-style-type: none;
    margin: 0px;
     padding: 20px 10px 10px 10px !important; 
    display: block;
    position: relative;
}

@media (max-width: 768px) {
  .cr-summaryBox-wrap,
  .cr-ajax-reviews-cus-images-div {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
  }
    .cr-comment-image-top {
    flex: 0 0 calc(100% / 3);    /* mobile: 3 ảnh / view */
  }
    .cr-summaryBox-wrap,
  .cr-ajax-reviews-cus-images-div {
    width: 100% !important;
    float: none !important;
    padding-right: 0;
    padding-left: 0;
  }

  #reviews .cr-summaryBox-wrap {
    margin-bottom: 16px;
  }

  .cr-comment-image-top {
    flex: 0 0 calc(100% / 3); 
  }
}
    
/* css choi review - end */