/*
Theme Name:           Flatsome
Theme URI:            http://flatsome.uxthemes.com
Author:               UX-Themes
Author URI:           https://uxthemes.com
Description:          Multi-Purpose Responsive WooCommerce Theme
Version:              3.19.8
Requires at least:    6.4
Requires PHP:         7.4
WC requires at least: 8.3
Text Domain:          flatsome
License:              https://themeforest.net/licenses
License URI:          https://themeforest.net/licenses
*/


/***************
All custom CSS should be added to Flatsome > Advanced > Custom CSS,
or in the style.css of a Child Theme.
***************/
/* Container .box-image
  Bạn đã có 'border-radius: 100%' rồi,
  nhưng cần thêm 2 thuộc tính này:
*/
 .cirhome .box-image {
  position: relative;  /* Để định vị cho lớp giả ::after */
  overflow: hidden;    /* Quan trọng: để "cắt" ánh gương theo hình tròn */
  
  /* Bạn đã có cái này: */
  border-radius: 100%; 
}

/* Lớp giả tạo hiệu ứng ánh gương */
 .cirhome .box-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%; /* Độ rộng của vệt sáng */
  height: 100%;

  /* Vệt sáng là một dải gradient nghiêng */
  background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0) 0%,       /* Trong suốt */
    rgba(255, 255, 255, 0.4) 50%,    /* Màu trắng mờ ở giữa */
    rgba(255, 255, 255, 0) 100%     /* Lại trong suốt */
  );
  
  /* Làm vệt sáng bị nghiêng (skew) */
  transform: skewX(-25deg);
  
  /* Trạng thái ban đầu: 
    ẩn vệt sáng ở bên ngoài, bên trái 
  */
  transform: skewX(-25deg) translateX(-150%);
  
  /* Hiệu ứng chuyển động */
  transition: transform 0.6s ease-in-out;
}

/* Khi di chuột vào .box-image */
 .cirhome .box-image:hover::after {
  /* Trạng thái khi hover: 
    Di chuyển vệt sáng sang hết bên phải 
  */
  transform: skewX(-25deg) translateX(250%);
}

/* Tùy chọn: Đảm bảo ảnh luôn lấp đầy
  khung hình tròn một cách chính xác 
*/
 .cirhome .box-image img {
  display: block; /* Bỏ khoảng trống thừa dưới ảnh */
  width: 100%;
  height: auto;
}
.hotline-phone-ring-wrap {
    left: 15px !important;
}

/* ==== FIX ICON KHÔNG CO ==== */
.buttonizer-button {
  display: flex;
  align-items: center;
}

.buttonizer-button i {
  display: inline-block;
  font-size: 20px;
  line-height: 1;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* ==== RUNG GỌI MỜI – KHÔNG SCALE ==== */
@keyframes call-attention {
  0%, 80%, 100% { transform: rotate(0); }
  84% { transform: rotate(-12deg); }
  88% { transform: rotate(12deg); }
  92% { transform: rotate(-8deg); }
  96% { transform: rotate(8deg); }
}

/* CHỈ rung icon gọi điện */
.buttonizer-group i {
  animation: call-attention 3.5s infinite;
}

/* ==== TĂNG SIZE SỐ ĐIỆN THOẠI ==== */
.buttonizer-group .buttonizer-label {
  font-size: 16px !important;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 6px;
}

/* Chuẩn hóa khoảng cách các section */
.section {
  padding-top: 29px;
  padding-bottom: 29px;
	
}

@media (max-width: 768px) {
  .section {
    padding-top: 36px;
    padding-bottom: 36px;
  }
}

/* Tiêu đề section */
.section-title,
h2.section-title-main {
  margin-bottom: 12px;
}

/* Dòng mô tả dưới tiêu đề */
.section-subtitle,
.section-title p {
  margin-top: 0;
  margin-bottom: 24px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  color: #555;
}
/* Card sản phẩm đồng đều */
.product-small,
.box.product {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Ảnh sản phẩm */
.box-image {
  background: #f7f7f7;
  border-radius: 10px;
  overflow: hidden;
}

/* Nội dung dưới ảnh */
.box-text {
  flex: 1;
  padding: 12px 10px;
  text-align: center;
}
/* Giảm độ gắt text phụ */
.section small,
.section .is-small {
  opacity: 0.75;
}

/* Icon trang trí */
.icon-box .icon {
  opacity: 0.85;
}
/* Các section trắng - tạo nền tách nhẹ */
.section.bg-white {
  background: #fff;
  border-radius: 16px;
  margin: 0 auto 40px;
  max-width: 1200px;
}
/* ==== BIẾN NÚT XEM THÊM THÀNH TEXT LINK ==== */
.button.load-more,
.button.primary,
a.button {
  background: transparent !important;
  border: none !important;
  color: #0a7cff !important;
  padding: 6px 0 !important;
  font-weight: 600;
  text-transform: none;
}

/* Gạch chân tinh tế */
.button.load-more span,
a.button span {
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* Hover nhẹ */
.button.load-more:hover,
a.button:hover {
  opacity: 0.8;
}
/* ==== KHỐI SẢN PHẨM DẠNG BẢNG ==== */
.products .product-small,
.row .product-small {
  border: 1px solid #e6e6e6;
  margin: 0 !important;
  padding: 10px 8px;
  background: #fff;
}
/* CHỈ áp dụng cho các hàng sản phẩm nằm trong Section có class 'home-grid' (Bạn nên đặt class này cho section ở trang chủ) */
/* Hoặc nếu muốn nhanh, chỉ áp dụng cho trang chủ và loại trừ phần 'Sản phẩm tương tự' */

.home:not(.single-product) .products .col, 
.home:not(.single-product) .row:not(.row-slider) .col {
    padding: 0 !important;
}

/* Sửa lỗi card sản phẩm: Chỉ áp dụng ở trang chủ, tránh áp dụng vào slider */
.home .row:not(.row-slider) .product-small {
    border: 1px solid #e6e6e6;
    margin: 0 !important;
    padding: 10px 8px;
    background: #fff;
    height: 100%;
}

/* Đảm bảo Slider ở trang sản phẩm luôn có chiều cao */
.related-products-wrapper .flickity-viewport {
    height: auto !important;
    min-height: 400px;
}