/*
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.20.5
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.
***************/
.elementskit-infobox .elementskit-box-header .elementskit-info-box-icon{
    margin:0px!important;
}

.section-icon-box .elementskit-infobox{
    height: 300px;
}
#elementor-header-button .elementor-menu-cart__footer-buttons .elementor-button--view-cart{
	background:#F4B02E!important;
	border:#F4B02E!important;
	display:block!important;
}
#elementor-header-button .elementor-menu-cart__footer-buttons .elementor-button--view-cart span{
	color:black;
}
#elementor-header-button .elementor-menu-cart__footer-buttons .elementor-button--checkout{
	background:black!important;
	border:black!important;
}
.sidebar-inner {
	background: #fff;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.sidebar-inner h4{
	font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #32231e;
}
.sidebar-inner .sidebar-inner-filter li{
	list-style:none;
}

.sidebar-inner .sidebar-inner-filter li.active a {
    color: #32231e;
    font-weight: 600;
}

.sidebar-inner .sidebar-inner-filter li a {
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
	font-size:14px;
}
.sidebar-inner-filter li:hover, .sidebar-inner-filter li.active{
	    background: #fdf3d7;
}
.sidebar-inner-filter li {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
    transition: all 0.3s ease;
}
.product-card-item{
	background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;

}
.product-card-item .product-card-image{
	height: 250px;
    display: block;
    overflow: hidden;
    background: #fff;
    padding: 0;
    position: relative;

}
.product-small .box-image .image-fade_in_back > a {
	height:250px;
}
.box-image img{
	height:100%;
}
.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 15px;
    background: #f9f9f9;
}

.product-categories {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #32231e;
    color: #fff;
    padding: 5px 12px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
}

.product-card-item .product-info {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.product-card-item .product-info .sku, .product-card-item .product-info .origin{
	font-size:13px;
	padding:0;
	margin:0;
	font-weight:600;
}
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 cột bằng nhau */
    gap: 20px; /* khoảng cách giữa các card */
}
.product-card-item .product-info .product-desc {
    font-size: 14px;
    
    margin-bottom: 15px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
	    border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
.product-card-item .product-info .product-meta{
	margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.product-card-item .product-info .btn{
	    flex: 1;
    padding: 8px 15px;
    font-size: 14px;
	text-align:center;
	font-weight:700;
}
.product-card-item .product-info .btn-primary{
	background:var(--e-global-color-639e8dd);
	border:var(--e-global-color-639e8dd);
	border-radius:10px;
	    transition: background 0.3s ease, color 0.3s ease; /* thêm dòng này */

}
.product-card-item .product-info .product-action{
	display:flex; 
	gap:10px;
}
.product-card-item .product-info .btn-primary:hover{
	background:black;
	color:white;
	
}
.product-card-item .product-info .btn-outline-primary{
	background: black;
	border: black;
	color:white;
	border-radius:10px;
	    transition: background 0.3s ease, color 0.3s ease; /* thêm dòng này */

}
.product-card-item .product-info .btn-outline-primary:hover{
	
}

@media (max-width: 1000px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Khi màn hình <= 500px: 1 cột */
@media (max-width: 500px) {
    .products-grid {
        grid-template-columns: 1fr;
    }
}
/* Bỏ chữ 'Trước' và 'Tiếp', chỉ giữ mũi tên */
.products-pagination .prev, 
.products-pagination .next {
  font-size: 0; /* Ẩn chữ */
  position: relative;
  width: 2em;  /* chỉnh kích thước phù hợp */
  height: 2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Hiển thị mũi tên bằng ::before */
.products-pagination .prev::before {
  content: '«';
  font-size: 1.5em;
  color: #333;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.products-pagination .next{
	display:none!important;
	opacity:0!important;
}
.products-pagination .prev{
		display:none!important;
	opacity:0!important;
}
.products-pagination .next::before {
  content: '»';
  font-size: 1.5em;
  color: #333;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Ảnh sản phẩm hình vuông, chiều cao = chiều rộng */
.products-grid .product-card-image img {
  width: 100%;
  aspect-ratio: 1 / 1; /* CSS hiện đại làm hình vuông tự động */
  object-fit: cover;    /* Giữ tỉ lệ, cắt phần thừa nếu cần */
  border-radius: 6px;   /* nếu bạn muốn bo góc nhẹ */
}
/* Container phân trang căn giữa, khoảng cách các số */
.products-pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 20px 0;
  font-family: Arial, sans-serif;
}

/* Các số trang (bao gồm .current và <a>) */
.products-pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  text-decoration: none;
  border: 1px solid #ccc;
  border-radius: 6px;
  color: #333;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Số trang active */
.products-pagination .page-numbers.current {
  background-color: #f5a623;  /* màu vàng nổi bật */
  color: white;
  border-color: #f5a623;
  cursor: default;
}

/* Hover số trang chưa active */
.products-pagination .page-numbers:not(.current):hover {
  background-color: #ffe6a1;
  border-color: #f5a623;
  color: #f5a623;
}
.innolabs-sub-menu-right>.col-inner{
	height:100%!important;
}
.floating-contact {
  position: fixed;
  right: 5%;
  bottom: 0%;
  transform: translateY(-50%);
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: visible;
}

.floating-contact .fc-item {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: transparent;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  position: relative;
  overflow: visible;

  opacity: 0;
  transform: translateY(-40px) scale(0.8);

  animation:
    floatDrop 0.6s ease forwards,
    btnShake 2s infinite 0.6s,
    btnPulse 2s infinite 0.6s;
}

/* delay từng nút */
.floating-contact .fc-item:nth-child(1) {
  animation-delay: 0.1s, 0.7s, 0.7s;
}
.floating-contact .fc-item:nth-child(2) {
  animation-delay: 0.25s, 0.85s, 0.85s;
}
.floating-contact .fc-item:nth-child(3) {
  animation-delay: 0.4s, 1s, 1s;
}
.floating-contact .fc-item:nth-child(4) {
  animation-delay: 0.55s, 1.15s, 1.15s;
}

.floating-contact .fc-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.15);
  animation: btnWave 2s infinite;
  z-index: -1;
}

.floating-contact .fc-item:nth-child(1)::after { animation-delay: 0.7s; }
.floating-contact .fc-item:nth-child(2)::after { animation-delay: 0.85s; }
.floating-contact .fc-item:nth-child(3)::after { animation-delay: 1s; }
.floating-contact .fc-item:nth-child(4)::after { animation-delay: 1.15s; }

.floating-contact .fc-item:hover {
  animation-play-state: paused;
  transform: scale(1.08);
}

.floating-contact img {
  width: 100%;
  height: 100%;
}

.floating-contact .fc-phone {
  font-size: 24px;
	
  color: #fff;
  background: #25d366;
}
.floating-contact .fc-phone img{
		width:20px;
	height:20px;
}

.floating-contact .fc-facebook {
  font-size: 30px;
  font-weight: bold;
  color: #1877f2;
}

.floating-contact .fc-calendar {
  font-size: 22px;
}

@keyframes floatDrop {
  0% {
    opacity: 0;
    transform: translateY(-60px) scale(0.6);
  }
  60% {
    opacity: 1;
    transform: translateY(8px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes btnShake {
  0% { transform: translateY(0) scale(1); }
  10% { transform: translateY(-3px) scale(1); }
  20% { transform: translateY(3px) scale(1); }
  30% { transform: translateY(-3px) scale(1); }
  40% { transform: translateY(3px) scale(1); }
  50% { transform: translateY(0) scale(1); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes btnPulse {
  0% { box-shadow: 0 0 0 0 rgba(0,0,0,0.4); }
  70% { box-shadow: 0 0 0 15px rgba(0,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

@keyframes btnWave {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}
/* Ẩn nút Quick View */
.quick-view {
    display: none !important;
}
	.image-tools {
    display: none !important;
}


.flickity-slider .col {
  height: 100px; /* đồng bộ với viewport */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-gallery-slider img{
	height:400px;
	object-fit:contain;
}
.flickity-slider .col img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* không cắt */
}
.woocommerce .elementor-59 .elementor-element.elementor-element-35c179d0 .woocommerce-tabs ul.wc-tabs li a{
	font-size:15px;
}
.elementor-59 .elementor-element.elementor-element-c79d58e.elementor-element p {
	font-size:15px
}