/** =================================================================
 * PRODUCT INFORMATION LAYOUT - Main Section Styles
 * ================================================================= */
.details-product {
    border: 1px solid rgba(0, 0, 0, .125) !important;
    border-radius: 5px;
    box-shadow: 0 12px 28px rgba(34, 102, 234, .08);
}

.product-detail-left {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.details-product .details-pro {
    --block-spacing: 10px;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

@media (min-width: 992px) {
    .details-product .details-pro {
        padding-left: 0;
    }
}

/** =================================================================
 * PRODUCT TITLE & META INFO
 * ================================================================= */

.title-product, .title-product a {
    font-weight: 700;
    font-size: 20px;
    color: var(--text-color)
}

@media (max-width: 767px) {
    .title-product {
        font-size: 1.2rem;
    }
}

/* Product Meta Line - Brand & Rating */
.pd-meta-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
    font-size: 16px;
    line-height: 1.5;
    // font-family: 'Segoe UI', Arial, sans-serif;
}

.pd-label {
    color: #222;
    font-weight: 600;
    font-size: 16px;
}

.pd-vendor a {
    color: #1767d8;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.2s;
}

.pd-vendor a:hover {
    color: #1191ff;
    text-decoration: underline;
}

.pd-sep {
    width: 1.5px;
    height: 18px;
    background-color: #e9e9e9;
    margin: 0 10px;
    flex-shrink: 0;
    border-radius: 1px;
}

/* Khung */
.pd-rating{
  display:inline-flex;
  align-items:center;
  gap:8px;                 /* nới khoảng cách sao ↔ text */
  line-height:1;
}

/* Cụm badge Starbap */
.pd-rating .starbaprv-widget{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* Sao (i/span/svg đều khớp) */
.pd-rating .starbaprv-widget .star,
.pd-rating .starbaprv-widget i{
  color:#ffd700 !important;
  font-size:18px;
  transition:transform .18s ease;
}
.pd-rating .starbaprv-widget svg{
  width:18px; height:18px;
  fill:#ffd700 !important;
  stroke:#ffd700 !important;
  transition:transform .18s ease;
}

/* Văn bản “x đánh giá” – đẩy lệch nhẹ xuống và sang phải */
.pd-rating .starbaprv-widget .rating-text,
.pd-rating .starbaprv-widget .starbaprv-badge__text,
.pd-rating .starbaprv-widget .starbaprv-preview-badge__text{
  position:relative;
  top:1px;                 /* hạ xuống 1px cho thẳng hàng baseline */
  margin-left:2px;
  font-size:14px;
  color:#666;
  transition:color .18s ease, transform .18s ease, opacity .18s ease;
}

/* Hiệu ứng nhẹ khi hover cả cụm: sao phóng nhẹ, text dịch 1px & đậm màu */
.pd-rating:hover .starbaprv-widget .star,
.pd-rating:hover .starbaprv-widget i,
.pd-rating:hover .starbaprv-widget svg{
  transform:scale(1.05);
}
.pd-rating:hover .starbaprv-widget .rating-text,
.pd-rating:hover .starbaprv-widget .starbaprv-badge__text,
.pd-rating:hover .starbaprv-widget .starbaprv-preview-badge__text{
  color:#444;
  transform:translateX(1px);
}

/* Mobile nhỏ */
@media (max-width:575px){
  .pd-rating{ gap:6px; }
  .pd-rating .starbaprv-widget .star,
  .pd-rating .starbaprv-widget i{ font-size:16px; }
  .pd-rating .starbaprv-widget svg{ width:16px; height:16px; }
  .pd-rating .starbaprv-widget .rating-text,
  .pd-rating .starbaprv-widget .starbaprv-badge__text,
  .pd-rating .starbaprv-widget .starbaprv-preview-badge__text{
    top:0;                 /* trên mobile giữ baseline tự nhiên */
    font-size:13px;
  }
}

/* Tôn trọng Reduce Motion */
@media (prefers-reduced-motion:reduce){
  .pd-rating *{ transition:none !important; }
}

/** =================================================================
 * PRODUCT STATUS & GROUP INFO
 * ================================================================= */

.details-pro .group-status .line {
    color: #999;
}

.details-pro .group-status {
    font-size: 14px;
}

.status_name, .status_name a {
    color: #007bff;
}

/* ====== META LINE (desktop mặc định cứ để như cũ) ====== */

/* 600–481px: giữ 1 hàng, cho cuộn ngang, thu nhỏ font/khoảng cách */
@media (max-width:600px){
  .pd-meta-line{
    display:flex; align-items:center;
    flex-wrap:nowrap !important;      /* luôn 1 hàng */
    overflow-x:auto; overflow-y:hidden; 
    gap:6px;
    -ms-overflow-style:none;          /* IE/Edge cũ */
    scrollbar-width:none;             /* Firefox */
    -webkit-overflow-scrolling:touch; /* iOS mượt */
    font-size:14px;                   /* thu chữ chung */
  }
  .pd-meta-line::-webkit-scrollbar{ display:none; }
  .details-pro .group-status .line{ display:none; }  /* ẩn vạch cũ */
  .pd-sep{ height:14px; margin:0 4px; }              /* vạch ngăn nhỏ lại */

  /* rating: thu sao + giữ cụm “x đánh giá” trên 1 dòng */
  .starbaprv-widget{ display:inline-flex; align-items:center; gap:6px; }
  .starbaprv-widget .star{ font-size:16px; }
  .starbaprv-widget .rating-text{ font-size:14px; white-space:nowrap; }
}

/* ≤480px: tự xuống 2 hàng gọn – không cuộn, ẩn vạch ngăn */
@media (max-width:480px){
  .pd-meta-line{
    flex-wrap:wrap !important; 
    overflow:visible;
    column-gap:10px; row-gap:6px;
  }
  .pd-sep{ display:none; }                   /* bỏ vạch ngăn để gọn */
  .starbaprv-widget{ gap:4px; }
  .starbaprv-widget .star{ font-size:15px; }
  .starbaprv-widget .rating-text{ font-size:13px; }
}

/** =================================================================
 * PRICE BOX - COMBINED STYLES (Fixed conflicts)
 * ================================================================= */

/* Main Price Box Container - UPDATED TO COMBINE BOTH VERSIONS */
.details-product .details-pro .price-box, 
#ega-sticky-addcart .price-box,
.price-box {
    position: relative;
    // margin: 10px 0;
    margin-top: -10px;
    background: transparent; /* Override old gray background */
    border-radius: 4px;
    display: flex; /* Override old block display */
    align-items: center;
    flex-wrap: wrap;
    padding-left: 0;
    padding-right: 0;
    margin-top: 10px;
    column-gap: 4px;
    font-family: Arial, 'Segoe UI', sans-serif;
    margin-bottom: 10px;
}

#ega-sticky-addcart .price-box {
    border-top: none;
}

/* Price Label - NEW */
.price-label {
    color: #222;
    font-size: 20px;
    font-weight: bold;
    vertical-align: middle;
    margin-right: 6px;
}

/* Product Price - UPDATED TO COMBINE */
.details-product .details-pro .product-price,
.special-price .price {
    font-size: 28px; /* Larger than original 20px */
    color: #e60000; /* Override var(--price-color) with specific red */
    line-height: 24px;
    font-family: inherit;
    font-weight: 700;
    vertical-align: middle;
    margin: 0;
}

/* Old Price - UPDATED TO COMBINE */
.details-product .details-pro .product-price-old,
.product-price-old,
.old-price del {
    font-size: 16px; /* Larger than original 16px and 14px */
    color: #555 !important; /* Override original #979797 */
    // margin-left: 5px;
    font-weight: normal;
    text-decoration: line-through;
    opacity: 0.6;
}

/* Discount Label - UPDATED TO COMBINE */
.details-product .price-box .label_product, 
#ega-sticky-addcart .label_product,
.label_product {
    border-radius: 5px;
    background: var(--label-background, #e60000); /* Fallback color */
    color: var(--label-color, white); /* Fallback color */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 16px; /* Larger than original 14px */
    padding: 3px 8px;
    font-weight: bold;
    margin-left: 4px; /* Reduced from 10px */
}

/* Save Price - UPDATED TO COMBINE */
.save-price {
    font-size: 16px; /* Larger than original 14px */
    color: #179c3c; /* Override original green */
    margin-left: 4px;
    font-weight: 500;
    /* Remove width: 100% to keep inline */
}

.save-price span {
    color: #179c3c; /* Override var(--price-color) */
    font-weight: 700; /* Stronger than original */
}

/* Sub Row for Additional Elements - NEW */
.price-sub-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    // margin-top: 4px;
}

/* Compare Product Link - NEW */
.pd-compare-product-add {
    color: #2196f3;
    text-decoration: none;
    font-size: 16px;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.pd-compare-product-add:hover {
    color: #0d6efd;
    text-decoration: underline;
}

.pd-compare-product-add i {
    font-size: 20px;
}

/** =================================================================
 * HIDE VAT DISPLAY
 * ================================================================= */

.price-box .vat,
.vat {
    display: none !important;
}
/** =================================================================
 * QUANTITY SELECTOR
 * ================================================================= */

.soluong.show {
    display: grid;
}

.soluong {
    align-items: center;
    grid-template-columns: 80px 1fr;
    margin-bottom: 20px;
}

.soluong label {
    margin: 0;
    font-weight: bold;
    color: #727272;
    justify-content: flex-start;
}

#ega-sticky-addcart .soluong {
    margin-bottom: 0;
}

.input_number_product, .custom-btn-number {
    border: none;
    display: flex;
    height: 36px;
    margin-bottom: 0;
    margin-top: 0;
    align-items: center;
}

button.btn.btn_num {
    border-radius: 0;
    padding: 4px;
    width: 30px;
    border: 1px solid #ced4da;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8c9196;
}

button.btn.btn_num.num_1 {
    border-right: none;
    border-radius: 4px 0 0 4px;
}

button.btn.btn_num.num_2 {
    border-radius: 0 4px 4px 0;
    border-left: none;
}

.prd_quantity {
    border: 0;
    width: 55px !important;
    text-align: center;
    border-top: 1px solid #ced4da;
    border-bottom: 1px solid #ced4da;
    border-radius: 0;
    height: 30px;
}

/** =================================================================
 * PRODUCT PROMOTION & MISC
 * ================================================================= */

.icon-button-play {
    width: 20px !important;
}

.product-promotion {
    background-color: var(--body-background);
    padding: 10px;
    margin-bottom: 10px;
}

.product-promotion__heading {
    color: #fff;
    margin-bottom: 8px;
    background-color: var(--primary-color);
    font-size: 14px;
    font-weight: 700;
    padding: 5px 10px;
}

.product-promotion ul {
    margin-bottom: 0;
    border-radius: 4px;
    padding: 8px 8px 8px 28px;
    background: #fff
}

.product-promotion ul li {
    padding: 3px 0;
}

.product-hotline a {
    font-weight: bold;
    color: var(--primary-color);
}

.details-product .product-promo-tag {
    margin-top: 5px;
    margin-bottom: 5px;
}

/** =================================================================
 * PRODUCT SPECIFICATIONS TABLE
 * ================================================================= */
.product-specifications {
    border: 1px solid rgba(0, 0, 0, .125) !important;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(34, 102, 234, .08);
}

.product-specifications table {
    border-collapse: unset;
    border-spacing: 0;
    max-width: 100%;
}

.product-specifications table td, #specification-modal table td {
    padding: 8px;
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.product-specifications table tr:nth-of-type(odd) {
    background-color: var(--body-background);
}

.product-specifications table tr:first-child td {
    border-top: 1px solid var(--border-color);
}

.product-specifications table tr td:first-child {
    border-left: 1px solid var(--border-color);
    width: 40%;
}

.product-specifications table tr:first-child td:first-child {
    border-top-left-radius: 8px;
}

.product-specifications table tr:first-child td:last-child {
    border-top-right-radius: 8px;
}

.product-specifications table tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
}

.product-specifications table tr:last-child td:first-child {
    border-bottom-left-radius: 8px;
}

.product-specifications table td {
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/** =================================================================
 * RESPONSIVE MOBILE STYLES
 * ================================================================= */
/* ===== MOBILE ≤600px — tinh chỉnh 3 mục phía dưới giá ===== */

@media (max-width:600px){
  /* Hàng phụ: xếp linh hoạt, khoảng cách đều */
  .details-product .price-box .price-sub-row{
    display:flex !important;
    flex-wrap:wrap !important;           /* tự xuống dòng khi chật */
    align-items:center !important;
    column-gap:10px !important;
    row-gap:6px !important;
    margin-top:6px !important;
    line-height:1.2 !important;
  }

  /* Giá gạch */
  .details-product .price-box .price-sub-row .old-price del{
    font-size:13px !important;
    color:#9aa0a6 !important;
    text-decoration-thickness:1px;
    text-decoration-color:rgba(0,0,0,.35);
  }

  /* Badge % giảm */
  .details-product .price-box .price-sub-row .label_product{
    font-size:13px !important;
    padding:2px 8px !important;
    border-radius:4px !important;
    line-height:1.1 !important;
    background:var(--label-background,#ff6a00) !important;
    color:var(--label-color,#fff) !important;
    box-shadow:0 2px 6px rgba(255,106,0,.18);
  }

  /* (Tiết kiệm: …) – nhỏ hơn giá chính, nhấn nhẹ màu xanh */
  .details-product .price-box .price-sub-row .save-price{
    font-size:13px !important;
    color:#2e7d32 !important;
    background:rgba(46,125,50,.08);
    border-radius:6px;
    padding:2px 6px;
    margin-left:0 !important;
  }
  .details-product .price-box .price-sub-row .save-price .money{
    font-weight:700 !important;
  }

  /* Link So sánh – giữ gọn và thẳng hàng */
  .details-product .price-box .price-sub-row .pd-compare-product-add{
    display:inline-flex !important;
    align-items:center !important;
    gap:4px;
    font-size:13px !important;
    margin-left:0 !important;
    color:#1a73e8 !important;
  }
  .details-product .price-box .price-sub-row .pd-compare-product-add i{
    font-size:16px !important;
    line-height:1 !important;
    vertical-align:-0.1em;
  }

  /* GIỮ lại cỡ chữ bạn yêu cầu cho phần trên cùng (nhắc lại để chắc chắn) */
  .price-label,
  .details-product .price-box .price-label{
    font-size:16px !important;
  }
  .special-price .price,
  .details-product .details-pro .product-price,
  .details-product .price-box .special-price .price{
    font-size:22px !important;
  }
}

/* RẤT NHỎ (≤420px): nén nhẹ hơn nữa cho đỡ lấn chỗ */
@media (max-width:420px){
  .details-product .price-box .price-sub-row{ column-gap:10px !important; }
  .details-product .price-box .price-sub-row .label_product{ font-size:12.5px !important; padding:2px 6px !important; }
  .details-product .price-box .price-sub-row .save-price{ font-size:12.5px !important; }
  .details-product .price-box .price-sub-row .pd-compare-product-add{ font-size:12.5px !important; }
}

@media (max-width: 575px) {
    .button_actions .btn {
        min-width: 100%;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
}

.details-product .quickview-info .price-box {
    margin-top: var(--block-spacing);
    padding-top: var(--block-spacing);
}

.quick-view-product .product-summary {
    padding: var(--block-spacing) 0;
}

/* ===== FIX PRICE BOX MOBILE (NO HTML CHANGE) ===== */
@media (max-width: 600px){
  /* Luôn là flex + wrap để xếp 2 hàng */
  .price-box{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    column-gap:8px;
    row-gap:6px;
  }

  /* Hàng 1: "Giá bán" + giá hiện tại + giá cũ (nếu có) */
  .price-box > .price-label,
  .price-box > .special-price,
  .price-box > .old-price{
    order:1;
    display:inline-flex;
    align-items:baseline;
    flex:0 0 auto;
    white-space:nowrap;
    width:auto !important;     /* ghi đè mọi width:100% */
    margin:0;
  }
  .price-box > .special-price .price{ white-space:nowrap; }

  /* Hàng 2: badge giảm + Tiết kiệm */
  .price-box > .label_product,
  .price-box > .save-price{
    order:2;
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
    white-space:nowrap;
    width:auto !important;
    margin:0;
  }

  /* So sánh đặt cuối hàng 2 */
  .price-box > .pd-compare-product-add{
    order:3;
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
    white-space:nowrap;
    width:auto !important;
    margin:0;
  }

  /* Hủy rule cũ làm .price-sub-row xếp dọc */
  .price-sub-row{
    order:2;
    display:flex;
    flex-wrap:wrap;
    flex-direction:row !important;
    align-items:center;
    gap:8px;
    width:100%;
    margin-top:4px;
  }
}

.price-box {
    font-family: Arial, 'Segoe UI', sans-serif;
    margin: 0 0 16px 0;
    display: block !important; /* Force block thay vì flex */
}
/* Hàng giá bán: luôn canh giữa theo trục dọc */
.price-main-row{
  display:flex !important;          /* thay vì block */
  align-items:center;               /* căn giữa dọc */
  gap:4px;                         /* khoảng cách giữa các phần */
  flex-wrap:wrap;                   /* đủ chỗ thì cùng hàng, thiếu chỗ thì xuống dòng */
  margin: 10px 0;
}

/* Nhãn “Giá bán:” */
.price-main-row .price-label{
  display:inline-flex !important;
  align-items:center;
  line-height:1;                    /* tránh thừa khoảng dọc */
  font-weight:700;
}

/* Giá chính */
.price-main-row .special-price{
  display:inline-flex !important;
  align-items:center;
  line-height:1;                    /* số lớn vẫn cân với nhãn */
}
.price-main-row .special-price .price{
  line-height:1;                    /* bảo đảm không đội dòng */
  display:inline-block;
}

/* Link so sánh */
.price-main-row .pd-compare-product-add{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:12px !important;      /* giữ spacing như bạn muốn */
  text-decoration:none;
}
.price-main-row .pd-compare-product-add i{
  line-height:1;                    /* icon không lệch */
}

/* Mobile: giảm khoảng cách một chút, cho phép xuống dòng gọn */
@media (max-width:575px){
  .price-main-row{ gap:6px; }
  .price-main-row .pd-compare-product-add{ margin-left:6px !important; }
}

.price-sub-row {
    display: block !important; /* Force block để xuống hàng */
    // margin-top: 4px !important;
    margin: 10px 0;
    width: 100% !important;
    clear: both !important; /* Clear float nếu có */
}

.price-sub-row > * {
    display: inline !important; /* Các element con inline với nhau */
    margin-right: 8px !important;
}

/* Override mọi flexbox cũ */
.price-box,
.price-box * {
    flex: none !important;
}

/* ===== RELATED: heading có gạch ngang đỏ ===== */
.related-product .custom-heading-bar{
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.related-product .custom-heading-bar::after{
  content:"";
  flex: 1;
  height: 2px;
  background-color:#e74c3c; /* cùng màu với tiêu đề */
}

/* Tiêu đề */
.related-product .custom-heading-bar__title{
  background:#fff;
  padding-right:20px;
  margin:0;
  font-size:20px;
  font-weight:700;
  text-transform:uppercase;
  position:relative;
  z-index:1;
  /* phòng khi theme tô màu trực tiếp lên h2 */
  color:#e74c3c !important;
}

/* MÀU CHO LINK BÊN TRONG TIÊU ĐỀ – quan trọng */
.related-product .custom-heading-bar__title a{
  color:#e74c3c !important;
  text-decoration:none !important;
}
.related-product .custom-heading-bar__title a:hover{
  color:#d94434 !important;
}

/* Mobile */
@media (max-width: 767px){
  .related-product .custom-heading-bar__title{
    font-size:16px;
    padding-right:15px;
  }
  .related-product .custom-heading-bar::after{ height:1.5px; }
  .related-product .custom-heading-bar{ margin-bottom:12px; }
}

/* ===== Heading đỏ kéo line cho section_brand ===== */
.section_brand{
  --brand-heading-color: #e74c3c;      /* màu tiêu đề + gạch */
}

.section_brand .custom-heading-bar{
  position: relative;
  margin-bottom: 15px;                 /* giống ảnh 2 */
  display: flex;
  align-items: center;
}

/* Tiêu đề */
.section_brand .custom-heading-bar__title{
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
  background: #fff;                    /* che phần gạch */
  padding-right: 20px;                 /* khoảng trắng bên phải chữ */
}

/* Link trong tiêu đề */
.section_brand .custom-heading-bar__title > a{
  color: var(--brand-heading-color);
  text-decoration: none;
}

/* Gạch ngang kéo dài */
.section_brand .custom-heading-bar::after{
  content: "";
  flex: 1;
  height: 2px;
  background: var(--brand-heading-color);
  margin-left: 0;
}

/* Responsive mobile */
@media (max-width: 767px){
  .section_brand .custom-heading-bar__title{ font-size: 16px; padding-right: 15px; }
  .section_brand .custom-heading-bar::after{ height: 1.5px; }
  .section_brand .custom-heading-bar{ margin-bottom: 12px; }
}

/* Ẩn style heading mặc định (nếu còn class cũ) */
.section_brand .title_module_main.heading-bar{ display: none; }

/* Khối wrapper */
.custom-heading-bar {
  position: relative;
  margin-bottom: 15px; /* Giảm từ 20px xuống 15px */
  display: flex;
  align-items: center;
}

/* Tiêu đề */
.custom-heading-bar__title {
  background: #fff;
  padding-right: 20px;
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  color: #e74c3c;
  white-space: nowrap;
  position: relative;
  text-transform: uppercase;
  z-index: 1;
}

/* Gạch ngang */
.custom-heading-bar::after {
  content: '';
  flex: 1;
  height: 2px;
  background-color: #e74c3c; /* Đỏ giống tiêu đề */
  margin-left: 0;
}

/* Responsive mobile */
@media (max-width: 767px) {
  .custom-heading-bar__title {
    font-size: 16px;
    padding-right: 15px;
  }
  
  .custom-heading-bar::after {
    height: 1.5px;
  }
  
  .custom-heading-bar {
    margin-bottom: 12px;
  }
}

/* ================= HEADER ================= */
/* H2 (1 hàng riêng) + hàng sau: summary trái, 2 nút phải */
#startbap_product_reviews .starbap-rev-widg__header {
    display: grid;
    grid-template-columns: 1fr auto auto;
    /* trái 1fr, phải 2 nút */
    align-items: center;
    column-gap: 12px;
    row-gap: 10px;
    // margin: 0 0 14px 0;
}

/* Tiêu đề + line đỏ */
#startbap_product_reviews .starbap-rev-widg__title {
    grid-column: 1 / -1;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #e74c3c;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2px;
    line-height: 1.2;
    font-size: 20px;
}

#startbap_product_reviews .starbap-rev-widg__title::after {
    content: "";
    height: 2px;
    background: #e74c3c;
    flex: 1;
    min-width: 32px;
}

/* ⭐ Summary sát mép trái */
#startbap_product_reviews .starbap-rev-widg__summary {
    grid-column: 1 / 2;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #555;
    font-size: 14px;
    margin: 0 !important;
    padding: 0 !important;
}

#startbap_product_reviews .starbap-rev-widg__summary i,
#startbap_product_reviews .starbap-rev-widg__summary .fa,
#startbap_product_reviews .starbap-rev-widg__summary svg {
    color: #f1c40f;
}

/* Hai nút gọn bên phải (cùng hàng) */
#startbap_product_reviews .starbap-ask-question-btn {
    grid-column: 2 / 3;
    justify-self: end;
}

#startbap_product_reviews .starbap-write-rev-link {
    grid-column: 3 / 4;
    justify-self: end;
    margin-left: 8px;
}

#startbap_product_reviews .starbap-ask-question-btn,
#startbap_product_reviews .starbap-write-rev-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    background: #fff;
    color: #333;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: all .18s ease;
}

#startbap_product_reviews .starbap-ask-question-btn:hover,
#startbap_product_reviews .starbap-write-rev-link:hover {
    border-color: #e74c3c;
    color: #e74c3c;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

/* --- BỎ 2 GẠCH NGĂN ngay sau header --- */
#startbap_product_reviews .starbap-rev-widg__header .starbap-rev__br,
#startbap_product_reviews>.starbap-rev__br {
    display: none !important;
}

// /* ================= SUBTABS ================= */
#startbap_product_reviews .starbap-subtab {
    display: flex;
    align-items: flex-end;
    gap: 32px;
    /* Tăng từ 18px lên 32px để cách xa hơn */
    border-bottom: 1px solid #eee;
    margin: 10px 0 0 0 !important;
    padding: 6px 0 8px 0 !important;
}

/* Reset & căn đều cho tab name */
#startbap_product_reviews .starbap-subtab__name {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    padding: 10px 4px 12px;
    /* Tăng padding hai bên từ 2px lên 4px */
    line-height: 1.2;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    text-decoration: none !important;
    transition: all 0.25s ease;
    /* Thêm transition cho tất cả thuộc tính */
}

/* Underline effect cho tab active */
#startbap_product_reviews .starbap-subtab__name::after {
    content: "";
    position: absolute;
    left: 4px;
    /* Điều chỉnh theo padding mới */
    right: 4px;
    bottom: -1px;
    height: 0;
    background: #111;
    border-radius: 2px;
    opacity: 0;
    transition: height .25s ease, opacity .25s ease;
}

/* Tab active state */
#startbap_product_reviews .starbap-subtab__name.starbap--active {
    color: #111;
    transform: translateY(-1px);
    /* Hiệu ứng nhẹ nâng lên */
}

#startbap_product_reviews .starbap-subtab__name.starbap--active::after {
    height: 3px;
    opacity: 1;
}

/* Badge số đếm */
#startbap_product_reviews .starbap-subtab__count {
    display: inline-block;
    margin-left: 10px;
    /* Tăng từ 8px lên 10px */
    padding: 3px 8px;
    /* Tăng padding dọc để đẹp hơn */
    background: #f5f5f5;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    color: #666;
    min-width: 20px;
    text-align: center;
    line-height: 1.3;
    transition: all 0.25s ease;
    /* Thêm transition cho badge */
}

/* Badge cho tab active */
#startbap_product_reviews .starbap-subtab__name.starbap--active .starbap-subtab__count {
    background: #e8f4fd;
    color: #1976d2;
    transform: scale(1.05);
    /* Hiệu ứng phóng to nhẹ */
}

/* Hover effects */
#startbap_product_reviews .starbap-subtab__name:hover:not(.starbap--active) {
    color: #333;
    transform: translateY(-0.5px);
    /* Hiệu ứng nâng nhẹ khi hover */
}

#startbap_product_reviews .starbap-subtab__name:hover:not(.starbap--active)::after {
    height: 2px;
    opacity: 0.4;
    background: #ccc;
}

#startbap_product_reviews .starbap-subtab__name:hover:not(.starbap--active) .starbap-subtab__count {
    background: #ebebeb;
    transform: scale(1.02);
    /* Hiệu ứng nhẹ cho badge khi hover */
}

/* Focus state */
#startbap_product_reviews .starbap-subtab__name:focus-visible {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
    border-radius: 6px;
}

/* Responsive cho mobile */
@media (max-width: 768px) {
    #startbap_product_reviews .starbap-subtab {
        gap: 24px;
        /* Giảm gap trên mobile nhưng vẫn rộng hơn ban đầu */
    }

    #startbap_product_reviews .starbap-subtab__name {
        padding: 8px 3px 10px;
        font-size: 14px;
    }

    #startbap_product_reviews .starbap-subtab__count {
        margin-left: 8px;
        padding: 2px 6px;
        font-size: 10px;
    }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 991px) {
    #startbap_product_reviews .starbap-rev-widg__title {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
  /* Header grid 2 cột, ép auto-flow theo hàng */
  #startbap_product_reviews .starbap-rev-widg__header{
    grid-template-columns: 1fr 1fr !important;
    grid-auto-flow: row dense;
  }

  /* H2: luôn hàng 1, span full */
  #startbap_product_reviews .starbap-rev-widg__title{
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: 16px;
    gap: 10px;
  }
  #startbap_product_reviews .starbap-rev-widg__title::after{ height: 1.5px; }

  /* Summary: hàng 2, span full (tránh kẹt cột) */
  #startbap_product_reviews .starbap-rev-widg__summary{
    grid-column: 1 / -1 !important;
    grid-row: 2;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Nút: cùng HÀNG 3, chia 2 cột 50/50 */
  #startbap_product_reviews .starbap-ask-question-btn{
    grid-column: 1 / 2 !important;
    grid-row: 3 !important;
    justify-self: stretch;
    min-width: 0;
  }
  #startbap_product_reviews .starbap-write-rev-link{
    grid-column: 2 / 3 !important;
    grid-row: 3 !important;
    justify-self: stretch;
    margin-left: 0 !important;
    min-width: 0;
  }
  #startbap_product_reviews .starbap-ask-question-btn,
  #startbap_product_reviews .starbap-write-rev-link{
    width: 100%;
    justify-content: center;
  }

  /* FORM (review/question) khi bật: luôn span full width, không kẹt cột */
  #startbap_product_reviews .starbap-form-wrapper,
  #startbap_product_reviews .starbap-question-form-wrapper{
    grid-column: 1 / -1 !important;
    grid-row: 4;               /* dưới hàng nút */
    width: 100%;
    max-width: 100%;
    display: block;
    margin-top: 10px;
  }
  /* Nếu plugin chia col bằng class col-*, ép về 1 cột */
  #startbap_product_reviews .starbap-form-wrapper [class*="col"],
  #startbap_product_reviews .starbap-question-form-wrapper [class*="col"]{
    width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ===============================
   RELATED PRODUCTS → CARD STYLE (match section_product_top)
   =============================== */

/* Khung ngoài giống ảnh 1 */
.related-product{
  --card-radius: 12px;
}
.related-product.card{
  background:#fff !important;
  border:1px solid #e6efff !important;
  border-radius:10px !important;
  box-shadow:0 12px 28px rgba(34,102,234,.08) !important;
  padding:10px !important;
  overflow:hidden !important;
}

/* BỎ lưới mặc định bên trong */
.product_related,
.product_related [class*="col-"],
.product_related .product-col{
  border:none !important;
  background:transparent !important;
}
.product_related [class*="col-"]::before,
.product_related [class*="col-"]::after{
  content:none !important;
}

/* Khoảng cách giữa các card */
.product_related{ margin-left:-6px; margin-right:-6px; }
.product_related .product-col{ padding:6px; box-sizing:border-box; }

/* CARD: viền + shadow + hover như ảnh 1 */
.product_related .item_product_main{
  height:100%;
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid #e9eef6;
  border-radius:10px;
  overflow:visible;
  box-shadow:
    0 10px 24px rgba(16,24,40,.12),
    0 1px 0 rgba(16,24,40,.06);
  transition: transform .22s, box-shadow .22s, border-color .22s;
  will-change: transform;
}
.product_related .item_product_main:hover{
  transform: translateY(-4px);
  box-shadow:
    0 22px 44px rgba(16,24,40,.16),
    0 2px 0 rgba(16,24,40,.06);
  border-color:#ffcaa6;
}

/* Nội dung trong card: padding/gap giống ảnh 1 */
.product_related .item_product_main .product-info,
.product_related .item_product_main .info,
.product_related .item_product_main .content{
  padding:10px 12px 12px;
  display:flex; flex-direction:column; gap:8px; flex:1;
}

/* Tên sản phẩm 2 dòng */
.product_related .product-title,
.product_related .item_product_main .product-name a{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  line-height:1.5;
  min-height:3em;
}

/* ===== Khi CHƯA init slick: vẫn hiển thị dạng lưới card đẹp ===== */
.product_related:not(.slick-slider){
  display:flex; flex-wrap:wrap; align-items:stretch;
  margin-left:-6px; margin-right:-6px;
}
.product_related:not(.slick-slider) .item.product-col{
  padding:6px;
}

/* ===== Khi ĐÃ init slick: thêm gutter giữa slide ===== */
.slickrelated.slick-slider .slick-list{ margin:0 -6px !important; }
.slickrelated.slick-slider .slick-slide{ padding:0 6px !important; }

/* Mobile tinh chỉnh nhẹ */
@media (max-width: 767.98px){
  .related-product.card{
    border-radius:10px !important;
    box-shadow:0 8px 18px rgba(16,24,40,.12), 0 1px 0 rgba(16,24,40,.06) !important;
    padding:8px !important;
  }
  .product_related .item_product_main .product-info{ padding:8px 10px 10px; gap:6px; }
}

// // Fix vỡ giao diện
// .product_related {
//   display: flex;
//   flex-wrap: nowrap;
//   overflow-x: auto;
//   scrollbar-width: none; /* Firefox */
//   -ms-overflow-style: none; /* IE và Edge */
// }

// .product_related .item.product-col {
//   flex: 0 0 auto;
//   min-width: 228px;    /* hoặc width tùy loại card, điều chỉnh tại đây */
//   max-width: 230px;
//   box-sizing: border-box;
// }

// .product_related::-webkit-scrollbar {
//   display: none; /* Chrome, Safari */
// }

// /* Bỏ CSS flex-wrap:wrap cho .product_related:not(.slick-slider) nếu đang xài cùng slick */
// .product_related:not(.slick-slider){
//   display: flex;
//   flex-wrap: nowrap;  /* ép nằm 1 hàng */
//   align-items: stretch;
// }

/* Canh icon + text gọn gàng */
.navigation .submenu__item--main .link,
.navigation .submenu__children .submenu__item .link{
  display:flex; align-items:center; gap:8px;
}
.navigation .mm-icon{
  border:1px solid #e9edf4; border-radius:50%;
  padding:4px; background:#fff; object-fit:contain;
}