/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
.blured-circle-holder:not(.home .blured-circle-holder){
	display: none;
}
.hero-blured-circle {
    width: 350px;
    height: 350px;
    min-height: 350px;
    min-width: 350px;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
}

.hero-blured-circle-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blured-circle-holder {
    z-index: -1;
    justify-content: center;
    align-items: center;
    display: flex;
    position: fixed;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}

.hero-image-decord::before{
    width: 140px;
	height: 140px;
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	background-color: rgba(191, 140, 78, .4);
	border-radius: 4px;
	justify-content: center;
	align-items: center;
	display: flex;
	position: absolute;
	top: auto;
	bottom: -57px;
	left: -82px;
	right: auto;
}
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).button-variable-item.selected:not(.no-stock){
	background-color: #bf8c4e !important;
	border-color: #bf8c4e !important;
	box-shadow: none;
	border-style: none;
	color: #fff;
	margin: 0;
} 
.woo-variation-swatches .wvs-style-squared.variable-items-wrapper .variable-item:not(.radio-variable-item).button-variable-item{
	background-color: #ececec !important;
	border-color: #ececec !important;
	box-shadow: none;
	border-style: none;
	margin: 0;
	font-size: 16px;
	font-weight: 500;
}
.woo-variation-swatches.wvs-show-label .variations th .woo-selected-variation-item-name{
	display: none;
}
.woocommerce div.product form.cart .variations th, .woocommerce div.product form.cart .variations td{
	background: transparent;
	padding: 0;
}
.woo-variation-swatches .variable-items-wrapper{
	gap: 8px;
	margin-bottom: 18px;
}
.woocommerce div.product form.cart .variations label {
	margin-bottom: 8px;
}
.woocommerce-variation-add-to-cart label.qty{ 
	margin-bottom: 8px;
	color: #bf8c4e; 
	font-family: "PLUSJAKARTASANS-SEMIBOLD", Sans-serif;
	font-size: 12px;
	text-transform: uppercase;
}

.button.single_add_to_cart_button {
	background-image: url("https://assets.website-files.com/62f3719eed276382ac6eeb38/63033b716c45113b8c921e41_Shoping%20Card%20White.svg") !important;
	background-position: 11% !important;
	background-repeat: no-repeat !important;
	background-size: auto !important;
	padding-top: 16px !important;
	padding-bottom: 16px !important;
	padding-left: 58px !important;
	margin-top: 30px !important;
}
.woo-variation-gallery-thumbnail-position-bottom-bottom .woo-variation-gallery-container .woo-variation-gallery-thumbnail-wrapper{
	position: absolute;
	bottom: 15px;
}
.woo-variation-gallery-wrapper .woo-variation-gallery-thumbnail-slider{
	display: flex !important;
	justify-content: center !important;
	gap: 8px !important;
}
.woo-variation-gallery-wrapper .wvg-gallery-thumbnail-image{
	max-width: 80px;
	border-radius: 3px;
	overflow: hidden;
	opacity: 1;
}

 /* custom-product-grid.css */

.custom-product-grid-wrapper {
    padding: 20px 0;
}

.custom-product-grid {
    display: grid;
    gap: 30px;
}

/* Các cột mặc định và tùy chỉnh */
.custom-product-grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}
.custom-product-grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}
.custom-product-grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}
.custom-product-grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
}


.custom-product-item {
    background-color: #fff;
    border-radius: 6px;
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.custom-product-image-container {
    position: relative;
    width: 100%; 
    overflow: hidden;
    cursor: pointer;
	min-height: 360px;
}

.custom-product-image-front,
.custom-product-image-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: opacity 0.1s; /* Chỉ chuyển đổi opacity */ 
}

.custom-product-image-front {
    z-index: 2;
    opacity: 1;
}


.custom-product-image-back {
    opacity: 0; /* Mặc định ảnh back ẩn */
    z-index: 2;
}

.custom-product-item.has-fade:hover .custom-product-image-back {
    opacity: 1; /* Khi hover ảnh back hiện ra */
}

.custom-product-info {
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Căn lề trái cho tên và giá */
    position: relative; /* Để icon giỏ hàng có thể căn chỉnh */
}

.custom-product-grid-wrapper .custom-product-title {
	font-family: "PLUSJAKARTASANS-SEMIBOLD", Sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin: 0;
    text-align: left;
    width: 100%; /* Đảm bảo tên sản phẩm chiếm đủ chiều rộng */
}
.custom-product-grid-wrapper .custom-product-title a{
	color: #000;
}

.custom-product-price {
	font-size: 18px;
	font-weight: 400;
	color: #888;
	text-align: left;
	width: 100%;
	margin: 0;
	font-family: "PLUSJAKARTASANS-MEDIUM", Sans-serif;
}

.custom-product-grid-wrapper .ajax_add_to_cart.add_to_cart_button{
	width: 24px;
	height: 24px;
	min-height: 24px;
	min-width: 24px;
	background-color: rgba(0, 0, 0, 0);
	background-image: url("https://giuliodogido.com/wp-content/uploads/2025/07/62f3b8fe29620bfade0370ac_Add-To-Card-Icon.svg");
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: auto;
	padding: 0;
	font-size: 0;
	transition: all .3s;
	position: absolute;
	top: 15px;
	right: 20px;
}
.custom-product-grid-wrapper .ajax_add_to_cart.add_to_cart_button:hover{
	background-image: url("https://giuliodogido.com/wp-content/uploads/2025/07/630cbb03cd03305b1caa616c_Cart-Gold.svg");
}

.custom-add-to-cart {
    position: absolute; /* Đặt icon giỏ hàng ở góc */
    bottom: 15px; /* Điều chỉnh vị trí theo ý muốn */
    right: 15px; /* Điều chỉnh vị trí theo ý muốn */
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 20px; /* Kích thước icon */
    color: #888; /* Màu icon */
    transition: color 0.2s ease-in-out;
}

.custom-add-to-cart:hover {
    color: #000; /* Màu khi hover */
}

.sale-badge-container {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}
.sale-circle-container {
  width: 170px;
  height: 170px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}
.sale-circle{
	width: 100%;
	-webkit-animation:spin 10s linear infinite;
    -moz-animation:spin 10s linear infinite;
    animation:spin 10s linear infinite;
}
.sale-badge-holder {
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.sale-logo-mark {
  width: 85px;
}

.sale-sticker-holder {
  justify-content: flex-end;
  align-items: center;
  display: flex;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.sale-sticker-container {
  width: 83px;
  height: 83px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  left: 25px;
}

.sale-sticker {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.sale-sticker-text-holder {
  z-index: 1;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}
._12px-text {
  color: #fff;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
}

.sale-text {
  color: #fff;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 700;
}

/* --- Container cho Hiệu ứng Sticky --- */
.sticky-container {
	height: 220vh; /* Tăng chiều cao để có nhiều không gian cuộn hơn */
	position: relative;
}

/* --- Phần tử được Ghim (Sticky) --- */
.sticky-element {
	position: sticky;
	top: 0;
	height: 100vh;
	width: 100%;
	color: #000;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/* --- Wrapper chính cho nội dung hiệu ứng --- */
.feature-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	height: 60%;
	gap: 5%;
}

/* --- Cột Văn bản & Cột Hình ảnh --- */
.text-column, .image-column {
	position: relative; /* Quan trọng để định vị các phần tử con */
	width: 47.5%;
	height: 100%;
}

.text-column {
	display: flex;
	align-items: center; /* Căn giữa text block theo chiều dọc */
}

/* --- Khối văn bản --- */
.text-block {
	position: absolute;
	width: 100%;
	opacity: 0;
	/* Trạng thái mặc định: ẩn và ở bên dưới */
	transform: translateY(40px);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
	font-family: "PLUSJAKARTASANS-MEDIUM", Sans-serif; 
}

/* Trạng thái văn bản đang hiển thị */
.text-block.is-active {
	opacity: 1;
	transform: translateY(0);
}

/* Trạng thái văn bản vừa được xem qua */
.text-block.was-active {
	opacity: 0;
	/* Di chuyển lên trên và mờ đi */
	transform: translateY(-40px);
}

.text-block h3 {
	font-size: clamp(1.5rem, 3vw, 2.5rem);
	margin-top: 0;
	margin-bottom: 1rem;
}

.text-block p {
	font-size: clamp(0.9rem, 1.5vw, 1.1rem);
	line-height: 1.6;
}

/* --- Khối hình ảnh --- */
.image-block {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.8s ease-in-out; /* Hiệu ứng mờ dần mượt hơn */
}

.image-block img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Trạng thái hình ảnh đang hiển thị */
.image-block.is-active {
	opacity: 1;
}

.infinite-loop-banner {
  z-index: 2;
  background-color: #e4e1de;
  position: absolute;
  top: -45px; 
  bottom: auto;
  left: 0%;
  right: 0%;
  transform: rotate(1deg);
}

.infinite-loop-container {
  width: 100vw;
  height: 100%;
  align-items: center;
  display: flex;
    overflow: hidden;
	background: #e4e1de;
}

.infinite-loop-holder {
  height: 100%;
  grid-column-gap: 30px;
  flex: none;
  align-items: center;
  padding-left: 30px;
  padding-right: 30px;
  display: flex;
} 

.infinite-loop-text-holder {
  height: 100%;
  align-items: center;
  display: flex;
}

.infinite-loop-logo-holder {
  width: 50px;
}

.infinite-loop-logo {
  width: 100%;
}

.infinite-loop-dot-container {
  padding-left: 35px;
  padding-right: 35px;
}

.dot {
  width: 12px;
  height: 12px;
  background-color: #000;
  border-radius: 30px;
}

.infinite-loop-text {
  margin-top: 0;
  margin-bottom: 0;
}

.infinite-text {
  text-transform: uppercase;
  font-size: 3vw;
}

.infinite-loop {
  grid-column-gap: 40px;
  display: flex;
}

.infinite-loop-holder[data-animated="true"] .infinite-loop {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
}

.custom-search-results-title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    text-align: center;
    margin-bottom: 30px;
    padding-top: 20px;
}

/* Styling cho phân trang */
.custom-pagination {
    margin-top: 40px;
    text-align: center;
    padding-bottom: 20px;
}

.custom-pagination .page-numbers {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 5px;
    background-color: #f0f0f0;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    border: 1px solid #ddd;
}

.custom-pagination .page-numbers:hover {
    background-color: #e0e0e0;
    color: #000;
}

.custom-pagination .page-numbers.current {
    background-color: #BF8C4E; /* Màu xanh của nút active */
    color: #fff;
    border-color: #BF8C4E;
    font-weight: bold;
}

.custom-pagination .page-numbers.dots {
    background-color: transparent;
    border: none;
    cursor: default;
}

.text-center{
	text-align: center !important;
}
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout{
	margin-inline: 0 !important;
	margin-bottom: 90px !important;
}
.page-header .entry-title{
	font-size: 35px;
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}

@keyframes scroll-seamless-loop {
  0% {
    transform: translate3d(0%, 0px, 0px);
  }
  100% {
    transform: translate3d(-50%, 0px, 0px); /* Cuộn 50% tổng chiều rộng của container chứa 2 bản sao */
  } 
} 

/* Responsive adjustments (đảm bảo số cột luôn là 4 khi shortcode là 4) */
@media (max-width: 992px) {
    .custom-product-grid-cols-4 {
        grid-template-columns: repeat(3, 1fr);
    }
    .custom-product-grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .custom-product-grid-cols-4,
    .custom-product-grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
	.infinite-loop-logo-holder {
	  width: 35px;
	} 
	.dot {
	  width: 8px;
	  height: 8px;
	}
	.infinite-loop-text .infinite-text{
		font-size: 18px;
		font-weight: 500;
	}
	
	
	/* Điều chỉnh lại chiều cao container để cuộn hợp lý hơn trên mobile.
	   Giảm chiều cao sẽ làm cho các khối chuyển đổi nhanh hơn,
	   khắc phục vấn đề nội dung bị khuất trước khi chuyển. */
	.sticky-container {
		height: 200vh;
	}

	.sticky-element .section-title {
		top: 40px; /* Đẩy tiêu đề lên cao hơn */
		font-size: clamp(1.5rem, 6vw, 2rem); /* Giảm kích thước chữ tiêu đề */
		text-align: center;
		width: 90%;
	}

	.feature-wrapper {
		flex-direction: column; /* Xếp chồng các cột */
		width: 100%;
		height: 80%; /* Tăng chiều cao để nội dung không bị chật */
		gap: 5%; /* Giảm khoảng cách */ 
	}

	.image-column {
		width: 100%;
		height: 45%; /* Dành không gian cho hình ảnh */
		order: 1; /* Đảm bảo hình ảnh ở trên */
	}

	.text-column {
		width: 100%;
		height: 50%; /* Dành không gian cho văn bản */
		order: 2; /* Đảm bảo văn bản ở dưới */
		text-align: center; /* Căn giữa văn bản */
		justify-content: flex-start; /* Căn văn bản từ trên xuống */
		padding-top: 20px;
	}

	.text-block h3 {
		font-size: clamp(1.3rem, 5vw, 1.8rem);
	}
	
	.text-block p {
		font-size: clamp(0.85rem, 4vw, 1rem);
	}
}

@media (max-width: 576px) {
    .custom-product-grid-cols-4,
    .custom-product-grid-cols-3,
    .custom-product-grid-cols-2 {
        grid-template-columns: repeat(1, 1fr);
    }
}

@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}