/* Khống chế chiều cao tổng thể của Slide */
  .product-swiper {
      padding: 2rem 0 4rem 0 !important; /* Dùng rem để giãn cách đồng đều */
      width: 100%;
      height: fit-content;
      overflow: hidden;
  }
  /* FIX LỖI VỠ HÌNH SLIDE */
  .product-swiper .swiper-slide {
      height: auto;
      justify-content: center;
      width: 25%; /* Mặc định 4 hình trên PC */
  }
  
  @media (max-width: 992px) { .product-swiper .swiper-slide { width: 50%; } }
  @media (max-width: 576px) { 
    .product-swiper .swiper-slide { 
        width: 100%; 
    } 
    .buy-group-wrapper {
        justify-content: center !important; /* Mobile căn giữa sẽ đẹp hơn */
    }

    .product-video-wrapper {
        max-width: 100%;
        margin-top: 1rem;
    }
    
    .btn-buy-now {
        width: 8.5rem; /* Nhỏ lại một chút cho màn hình hẹp */
        height: 3rem;
        background-size: 550%;
    }
}

  .product-card {
      background: #ffffff;
      border: none; /* Bỏ viền cứng */
      border-radius: 1.25rem; /* Bo góc mềm mại hơn */
      padding: 1.5rem !important;
      margin: 1rem 0.5rem; /* Tạo khoảng trống cho bóng đổ hiển thị */
      
      display: flex;
      flex-direction: column;
      justify-content: space-between; /* Đẩy nút xuống dưới cùng */
      align-items: center;
      text-align: center;
      
      min-height: 26rem; 
      height: 100%;
      
      /* Đổ bóng tầng thấp: giúp card trông như nổi nhẹ trên nền */
      box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.05);
      transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
      position: relative;
  }

  /* Hiệu ứng Hover: Card nhô cao và bóng đổ sâu hơn */
  .product-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 1.5rem 3rem rgba(206, 18, 18, 0.12); /* Bóng đổ mang sắc đỏ nhạt của thương hiệu */
  }

  /* 2. Xử lý ảnh sản phẩm: Tạo hiệu ứng ánh sáng nội tại */
  .product-card .img-wrapper {
      width: 100%;
      background: radial-gradient(circle, rgba(238, 238, 238, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
      border-radius: 1rem;
  }

  .product-card .menu-img {
      width: 100%;
      height: 12rem; /* Tăng kích thước ảnh cho bắt mắt */
      object-fit: contain;
      filter: drop-shadow(0 0.5rem 1rem rgba(0,0,0,0.1)); /* Tạo chiều sâu cho vật thể ảnh */
      transition: transform 0.5s ease;
  }

  .product-card:hover .menu-img {
      transform: scale(1.08); /* Ảnh to nhẹ khi di chuột */
  }

  /* 3. Typography: Phân cấp thông tin rõ ràng */
  .product-card h2 {
      font-size: 1.25rem; /* 20px - Tên loại sản phẩm (Ví dụ: YESMOM) */
      text-transform: uppercase;
      letter-spacing: 2px;
      margin-bottom: 0.5rem;
      font-weight: 500;
  }

  .product-card .ingredients {
      font-size: 1.1rem; /* 18px - Tên sản phẩm cụ thể */
      color: #333;
      font-weight: 700;
      line-height: 1.4;
      height: 3rem; /* Khống chế 2 dòng */
      margin-bottom: 1.5rem;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
  }

  /* 4. Nút bấm: Hiện đại hơn */
  .btn-xem-nhanh {
      background: transparent;
      border: 1.5px solid #ce1212;
      color: #ce1212;
      padding: 0.6rem 2rem;
      font-weight: 700;
      font-size: 0.85rem;
      border-radius: 50px; /* Nút bo tròn hoàn toàn nhìn sang hơn */
      transition: all 0.3s ease;
      text-transform: uppercase;
      letter-spacing: 1px;
  }

  .product-card:hover .btn-xem-nhanh {
      background: #ce1212;
      color: #fff;
      box-shadow: 0 4px 12px rgba(206, 18, 18, 0.3);
  }
  /* BREADCRUMBS TƯƠI SÁNG */
  .breadcrumbs {
      padding: 2rem 0 0 0 !important;
      background-size: cover;
      background-position: center;
      position: relative;
  }
  .breadcrumbs::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(206, 18, 18, 0.8) 0%, rgba(0, 0, 0, 0.4) 100%);
      z-index: 1;
  }
  .breadcrumbs h2 {
      font-family: var(--default-font) !important;
      position: relative;
      z-index: 2;
      color: #fff;
      font-size: 2.1rem;
      font-weight: 800;
  }

  .product-card {
      background: #fff;
      border: 0.0625rem solid #eee; /* 1px */
      border-radius: 1rem;
      padding: 1.2rem !important;
      
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      
      /* Thay vì height cố định, ta dùng min-height bằng rem */
      min-height: 24rem; /* Khoảng 384px, gọn hơn mức 492px cũ */
      height: 100%;      /* Để Swiper kéo đều các card */
      
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      margin: 0.5rem;
  }
  .cooking-steps .icon-box {
      width: 60px; 
      height: 60px; 
      border: 2px dashed #ce1212; 
      border-radius: 50%; 
      display: flex; 
      align-items: center; 
      justify-content: center; 
      margin: 0 auto 1rem; 
      transition: all 0.4s ease; /* Hiệu ứng chuyển cảnh mượt */
  }

  .cooking-steps .step-item:hover i {
      color: #fff;              /* Icon chuyển trắng */
  }

  .cooking-steps .step-item:hover p {
      color: #ce1212;           /* Chữ bên dưới đổi màu */
      font-weight: bold;
  }

  .cooking-steps .step-item:hover .icon-box {
      background: #ce1212;      /* Lấp đầy nền đỏ */
      border-style: solid;      /* Chuyển viền sang nét liền */
      transform: scale(1.1);    /* Phóng to nhẹ */
      box-shadow: 0 0.5rem 1rem rgba(206, 18, 18, 0.3);
  }
.product-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.625rem; /* ~10px */
}
.brand-logo-wrapper {
    /* Tăng lên một chút so với 60px để logo thoải mái hơn */
    height: 4.375rem; /* ~70px */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 0.625rem; /* ~10px */
}
.brand-logo {
    max-height: 100%;
    max-width: 9.375rem; /* ~150px */
    object-fit: contain;
}
.product-name-container {
    /* Đặt chiều cao đủ cho 2 dòng dựa trên line-height */
    /* 1.2rem (font-size) * 1.4 (line-height) * 2 (dòng) = 3.36rem */
    min-height: 3.5rem; 
    display: flex;
    align-items: flex-start; /* Để chữ bắt đầu từ trên xuống */
    justify-content: center;
    width: 100%;
}
.product-name {
    font-size: 1.125rem; /* ~18px - làm nổi bật tên sản phẩm */
    font-weight: 700;
    color: #cc2027;
    text-transform: uppercase;
    margin: 0;
    text-align: center;
    line-height: 1.4;
    
    /* Giới hạn 2 dòng để không bao giờ bị lệch hàng */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
  .product-info h2 {
    font-family: var(--default-font) !important;
    color: #ce1212; 
    font-weight: 600; 
    font-size: 1.2rem;
  }
  /* CSS STYLE CŨ CỦA BẠN (GIỮ NGUYÊN) */
  .product-title { color: #ce1212; font-weight: 400; font-size: 1.2rem; font-family: var(--default-font) !important; }
  .feature-list { list-style: none; padding: 0; }
  .feature-list i { color: #ce1212; margin-right: 10px; }
    
  .btn-buy-red { background: #ce1212; color: white; padding: 14px 40px; border-radius: 50px; font-weight: bold; text-decoration: none; display: inline-block; }
  .pulse-animation { animation: pulse-red 2s infinite; }
  @keyframes pulse-red { 0% { box-shadow: 0 0 0 0 rgba(206, 18, 18, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(206, 18, 18, 0); } 100% { box-shadow: 0 0 0 0 rgba(206, 18, 18, 0); } }
  .btn-xem-nhanh { border: 2px solid #ce1212; color: #ce1212; padding: 5px 20px; font-weight: 600; text-decoration: none; border-radius: 5px; align-self: center; }
  .swiper-button-next, .swiper-button-prev { color: #ce1212; }
  .swiper-pagination-bullet-active { background: #ce1212; }

  /* Buy group */

/* Container chính */
    .buy-group {
        margin-top: 3rem !important; 
    }

    .buy-label {
        font-size: 1.25rem; /* Tăng nhẹ font chữ nhãn "Mua tại" lên 20px */
        font-weight: 700;
        color: #333;
        margin-bottom: 0.5rem;
    }

    /* Định dạng Link Icon - ĐÃ TĂNG KÍCH THƯỚC */
    .icon-shop-link {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 4.375rem;  /* Tăng lên 70px */
        height: 4.375rem; /* Tăng lên 70px */
        border-radius: 50%;
        margin: 0 0.75rem; /* Tăng khoảng cách giữa 2 icon */
        background: #fff;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        z-index: 1;
        border: 1px solid #f1f1f1; /* Thêm viền cực mảnh để icon nổi trên nền trắng */
    }

    .icon-shop-link img {
        height: 4rem; /* Ảnh icon bên trong to hơn (48px) */
        width: 6rem;
        object-fit: contain;
    }

    /* Hiệu ứng khi rê chuột: To hơn nữa và xoay nhẹ */
    .icon-shop-link:hover {
        transform: scale(1.1) rotate(5deg);
        border-color: transparent;
    }

    /* Hiệu ứng Pulse Shopee - Tăng độ lan tỏa */
    .pulse-shopee {
        animation: pulse-shopee-large 2s infinite;
    }

    @keyframes pulse-shopee-large {
        0% { box-shadow: 0 0 0 0 rgba(238, 77, 45, 0.8); }
        70% { box-shadow: 0 0 0 1.25rem rgba(238, 77, 45, 0); } /* Lan tỏa rộng hơn (20px) */
        100% { box-shadow: 0 0 0 0 rgba(238, 77, 45, 0); }
    }
    .video-frame {
        border-radius: 1rem;
        overflow: hidden;
        border: 1px solid #eee;
        background-color: #000;
    }
    .product-video-wrapper {
        width: 100%;
        max-width: 30.25rem; /* Giới hạn độ rộng video khoảng 500px để không bị quá choán chỗ */
    }
    /* Hiệu ứng Pulse TikTok - Tăng độ lan tỏa */
    .pulse-tiktok {
        animation: pulse-tiktok-large 2s infinite;
    }

    @keyframes pulse-tiktok-large {
        0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3); }
        70% { box-shadow: 0 0 0 1.25rem rgba(0, 0, 0, 0); }
        100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
    }
    

    /* Responsive cho mobile: Giữ kích thước vừa phải để không bị thô */
    @media (max-width: 48rem) {
        .icon-shop-link {
            width: 3.75rem;  /* 60px trên mobile */
            height: 3.75rem;
        }
        .icon-shop-link img {
            height: 2.5rem;
        }
        .btn-buy-now {
            width: 5rem;   /* Nhỏ lại một chút trên mobile */
            height: 2rem;
            margin-right: 0.5rem !important;
            background-size: 350%; /* Giữ nguyên độ phóng đại */
        }
        
        .social-buy {
            gap: 0.5rem; /* Tạo khoảng cách đều giữa các phần tử */
        }
        .product-video-wrapper {
            max-width: 100%; /* Trên mobile thì cho hiển thị hết chiều ngang */
            margin-top: 1rem;
        }
    }


    .product-info-section,.product-slider-section {
        margin-top:2rem;
    }
    
    .btn-buy-now {
        display: inline-block;
        background-image: url('/frontend/img/icon-mua-ngay.png'); /* Đường dẫn tuyệt đối */
        background-repeat: no-repeat;
        
        /* Chỉnh 55% để đẩy nội dung chữ trong ảnh qua phải một tí như bạn muốn */
        background-position: 47% center; 
        background-size: 650%; 
        
        width: 14rem;
        height: 3.5rem;
        cursor: pointer;
        transition: transform 0.3s ease;
    }
    .btn-buy-now:hover {
        transform: scale(1.05);
    }

    .product-action-container {
        width: 100%;
    }

    .custom-title-style {
        font-family: var(--playfair-font);
        text-align: center;
        margin-bottom: 1.5rem;
        margin-top: 1.5rem;
        position: relative;
    }

    .custom-title-style p {
        font-size: 2rem; /* Tăng kích thước chữ */
        font-weight: 700;
        color: #333;
        text-transform: uppercase;
        letter-spacing: 2px; /* Tạo độ thoáng cho chữ */
        margin: 0;
        display: inline-block;
    }

    .custom-title-style p span {
        color: #c92127; /* Màu đỏ thương hiệu Thiên Hương */
        position: relative;
    }

    /* Tạo đường gạch chân trang trí chuyên nghiệp */
    .custom-title-style::after {
        content: "";
        display: block;
        width: 60px;
        height: 4px;
        background: #c92127;
        margin: 15px auto 0;
        border-radius: 2px;
    }

    /* Hiệu ứng bóng đổ nhẹ cho chữ nổi bật trên nền trắng */
    .custom-title-style p {
        text-shadow: 1px 1px 0px rgba(255,255,255,1), 
                    2px 2px 5px rgba(0,0,0,0.05);
    }

    @media (max-width: 768px) {
        .custom-title-style p {
            font-size: 1.5rem;
        }
    }

/*logo shopee*/
#shopeeRegionModal .list-group-item {
transition: background 0.2s;
border-left: 4px solid transparent;
}

#shopeeRegionModal .list-group-item:hover {
    background-color: #fff5f2; /* Màu cam nhạt shopee */
    border-left-color: #ee4d2d; /* Màu cam đậm shopee */
}

#shopeeRegionModal .fw-bold {
    color: #333;
}

#shopeeRegionModal .list-group-item:hover .fw-bold {
    color: #ee4d2d;
}

#tiktokRegionModal .list-group-item {
transition: background 0.2s;
border-left: 4px solid transparent;
}

#tiktokRegionModal .list-group-item:hover {
    background-color: #fff5f2; /* Màu cam nhạt shopee */
    border-left-color: #ee4d2d; /* Màu cam đậm shopee */
}

#tiktokRegionModal .fw-bold {
    color: #333;
}

#tiktokRegionModal .list-group-item:hover .fw-bold {
    color: #ee4d2d;
}

/* Fix lỗi padding của modal nhỏ trên mobile */
@media (max-width: 576px) {
    .modal-dialog-centered {
        margin: 1rem;
    }
}
/* CSS dùng toàn bộ rem */
.product-video-slider-container {
    padding: 0 3rem; /* Khoảng trống cho mũi tên */
    margin-top: 2rem;
}

.video-slide-item {
    padding: 0 0.5rem;
}

.video-card {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}

/* Tùy chỉnh mũi tên trượt */
.slick-prev:before, .slick-next:before {
    color: #ce1212 !important; /* Màu đỏ thương hiệu */
    font-size: 1.5rem !important;
}

.slick-prev { left: -2.5rem !important; top:20% !important}
.slick-next { right: -2.5rem !important; top:20% !important}

@media (max-width: 48rem) {
.slick-prev { left: -2.5rem !important; top: 7% !important}
.slick-next { right: -2.5rem !important; top: 7% !important}
}
.slick-dotted.slick-slider {
    margin-bottom: 0 !important;
}
.description-text {
    text-align: justify;
    line-height: 1.6;
    display: block;
    word-break: break-word; 
}
.use-instructions {
    text-align: justify;
    line-height: 1.6;
    display: block;
    word-break: break-word; 
}
@media (max-width: 450px) {
    .slick-prev { left: -1.8rem !important; top: 18% !important}
    .slick-next { right: -1.8rem !important; top: 18% !important}
}

@media (max-height: 900px) {
    .slick-prev { top: 55% !important}
    .slick-next { top: 55% !important}
}