/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/*font chữ trang*/
body {
	font-family: HelveticaNeue, sans-serif;
}
/*font chữ trang*/

/*custom chiều rộng popup thêm vào giỏ hàng*/
@media (min-width: 1024px) { /* máy tính laptop và desktop */
	.off-canvas-cart  {
		width: 20% !important;
		cursor: auto;
	}
}

@media (min-width: 768px) and (max-width: 1023px) { /*  tablet, iPad, thiết bị trung gian. */
	.off-canvas-cart  {
		width: 50% !important;
		cursor: auto;
	}
}
/*custom chiều rộng popup thêm vào giỏ hàng*/

/* Tùy chình danh sách sản phẩm
	/* Tùy chỉnh phần chọn biến thể */
	.product-variations .variation-select {
		width: 100%;
		max-width: 300px; /* Điều chỉnh kích thước phù hợp */
		padding: 4px 12px;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 15px;
		font-family: inherit;
		color: #333;
		background-color: #fff;
		margin-bottom: 0;
		appearance: none; /* Loại bỏ phong cách mặc định của trình duyệt */
		position: relative;
		height: 30px;
	}

	/* Tạo biểu tượng mũi tên xuống cho select */
	.product-variations .variation-select::after {
		content: '\25BE'; /* Mũi tên xuống */
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		pointer-events: none;
		font-size: 14px;
		color: #333;
	}

	/* Giá sản phẩm */
	.product-variations .product-price {
		font-size: 16px;
		font-weight: bold;
		margin: 10px 0;
		color: #000; /* Màu đen cho giá */
		text-align: center;
	}

	/* Nút Thêm vào giỏ hàng */
	.product-variations .add-to-cart-button {
		display: block;
		width: 100%;
		max-width: 300px;
		padding: 2px 6px;
		background-color: #000 ; /* Màu đen */
		color: #fff; /* Màu chữ trắng */
		font-size: 12px;
		font-weight: bold;
		text-transform: uppercase;
		text-align: center;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		transition: background-color 0.3s ease, transform 0.2s ease;
		margin: 10px auto;
	}

	/* Hiệu ứng hover cho nút */
	.product-variations .add-to-cart-button:hover {
		background-color: #ce0058; /* Màu hồng hơn khi hover */
		transform: scale(1.02); /* Phóng to nhẹ khi hover */
		opacity: .6;
	}

	/* Căn chỉnh chung */
	.product-variations {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		justify-content: flex-end;		
		height: 90px;
	}
	/* căn chỉnh chiều rộng xem nhanh*/
	.lightbox-content{
		max-width: 900px;
	}
	/*xóa nút bỏ cọn biến thể*/
	button.reset_variations {
    	display: none !important;
	}
/*nút thêm vào giỏ hàng trang chi tiết sản phẩm*/
.ux-quantity.quantity.buttons_added.form-minimal {
    margin: 10px auto;
}
.form-minimal.quantity .qty {
    height: auto;
}

button.single_add_to_cart_button.button.alt, a.button.add_to_cart_button {
	display: block;
		width: 100%;
		max-width: 300px;
		padding: 2px 6px;
		background-color: #000 ; /* Màu đen */
		color: #fff; /* Màu chữ trắng */
		font-size: 12px;
		font-weight: bold;
		text-transform: uppercase;
		text-align: center;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		transition: background-color 0.3s ease, transform 0.2s ease;
		margin: 10px auto;
}

button.single_add_to_cart_button.button.alt:hover {
	background-color: #ce0058 !important; /* Màu hồng hơn khi hover */
}

a.added_to_cart {
	padding: 0;
}

.button-view-all:hover {
	background-color: #ce0058 !important ; /* Màu hồng hơn khi hover */
	opacity: .6;
}
button.woocommerce-button.button.woocommerce-form-login__submit:hover {
	background-color: #ce0058 !important ; /* Màu hồng hơn khi hover */
	opacity: .6;
}
button.btn.button.ur-submit-button:hover {
	background-color: #ce0058 !important ; /* Màu hồng hơn khi hover */
	opacity: .6;
}

/*kích cỡ video*/
.iframe-wrap {
	width :100%;
	position:relative;
	height: 0;
	padding-bottom: 56.25%;
}
.iframe-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: auto;
	border: 0;
}
/*kích cỡ video*/

/*Trang ưu đãi video giới thiệu sản phẩm*/
		

	.video-title {
        	font-family: Arial, MillerDisplay;
        	margin: 0;
            padding: 0;
            color: #fff;
		    max-width: 1200px;
    		margin: 0 auto;
        }
      .container-video {
            display: flex;
            flex-wrap: nowrap;
            padding: 20px;
            gap: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        /* Video chính */
        .main-video {
            flex: 3;
            min-width: 600px; /* Kích thước tối thiểu để giống ảnh gốc */
        }

        .main-video iframe {
            width: 100%;
            height: 340px; /* Điều chỉnh kích thước chiều cao */
            border: none;
            border-radius: 6px;
        }

        /* Danh sách video liên quan - Desktop */
        .related-videos {
            flex: 1;
            min-width: 300px; /* Đảm bảo hiển thị rõ ràng các video phụ */
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .related-videos .video-item {
            cursor: pointer;
            transition: transform 0.2s;
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        .related-videos .video-item:hover {
            transform: scale(1.05);
        }

        .related-videos .video-item img {
            width: 120px; /* Đảm bảo kích thước hình ảnh giống ảnh gốc */
            height: 70px;
            object-fit: cover; /* Cắt gọn ảnh nếu kích thước không chuẩn */
            border-radius: 6px;
        }

        .related-videos .video-item p {
            font-size: 14px; /* Kích cỡ tiêu đề video phụ */
            margin: 0;
            color: #ccc;
            line-height: 1.2;
        }

        /* Mobile responsive: Hiển thị scroll ngang */
        @media (max-width: 768px) {
            .container-video {
                flex-direction: column;
            }

            .main-video {
                min-width: 100%; /* Video chính full màn hình */
            }

            .main-video iframe {
                height: 250px; /* Giảm chiều cao cho mobile */
            }

            .related-videos {
                flex-direction: row; /* Chuyển danh sách video sang hàng ngang */
                overflow-x: auto; /* Cuộn ngang */
                gap: 10px;
                padding-bottom: 10px;
            }

            .related-videos .video-item {
                flex-shrink: 0; /* Không thu nhỏ */
                width: 200px; /* Đặt kích thước cố định cho các video phụ */
            }

            .related-videos .video-item img {
                width: 100%;
                height: 80px; /* Điều chỉnh chiều cao cho phù hợp */
            }

            .related-videos .video-item p {
                font-size: 11px; /* Giảm kích thước tiêu đề trên mobile */
                line-height: 1.2;
      		  	overflow: hidden; /* Ẩn text tràn */
        		text-overflow: ellipsis; /* Thêm dấu "..." nếu bị tràn */
            }

            .related-videos::-webkit-scrollbar {
                height: 6px;
            }

            .related-videos::-webkit-scrollbar-thumb {
                background-color: #666;
                border-radius: 10px;
            }
			/*custom chiều rộng popup thêm vào giỏ hàng*/
			.off-canvas-cart  {
				width: 90% !important;
				cursor: auto;
			}
			/*custom chiều rộng popup thêm vào giỏ hàng*/
        }
/*Trang ưu đãi video giới thiệu sản phẩm*/

/* Điều chỉnh dropdown của năm trong flatpickr */
.flatpickr-calendar .flatpickr-month .numInputWrapper {
    width: auto !important;
    min-width: 90px !important;  /* Đảm bảo trường năm có đủ không gian */
}

/* Điều chỉnh kích thước cho input năm */
.flatpickr-calendar .flatpickr-month .numInputWrapper input {
    width: 100% !important;
    padding: 8px 10px !important;  /* Điều chỉnh khoảng cách padding */
    font-size: 16px !important;     /* Điều chỉnh kích thước font */
}

/* Đảm bảo calendar đủ không gian để hiển thị đầy đủ */
.flatpickr-calendar {
    width: auto !important;
    min-width: 350px !important;   /* Đảm bảo lịch không bị hạn chế về chiều rộng */
    max-width: 500px !important;   /* Đảm bảo lịch có chiều rộng lớn nếu cần */
    z-index: 9999 !important;      /* Đảm bảo calendar ở trên các phần tử khác */
}


/*css phần cuối của trang chủ */
div#row-218623579 {
    max-width: max-content;
    padding-bottom: 20px;
}

.c-quicklinks__link {
    border: 1px solid;
    border-radius: 100px;
    text-align: center;
    margin: 0 auto;
    display: flex;
    justify-self: center;
}

.c-quicklinks__link-title {
	height: 63px;
    line-height: 30px;
}
.absolute-footer {
    display: none;
}
/*css phần cuối của trang chủ */

/*phần kết quả tìm kiếm*/

.flex-row.relative {
    position: relative;
}
.live-search-results.text-left.z-top {
	width: 600px;
    position: absolute;
    transform: translate(-45%, 0);
    background-color: #fff;
}
.search-price {
    display: none;
}
/*phần kết quả tìm kiếm*/

/* Nút thêm vào giỏ hàng bị vô hiệu hóa */
button.single_add_to_cart_button.button.alt.disabled.wc-variation-is-unavailable:disabled {
    background-color: #000 !important;
    cursor: not-allowed;
}
.product-variations .add-to-cart-button:disabled {
     background-color: #000 !important;
    cursor: not-allowed;
}
button.single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed {
	background-color: #000 !important;
    cursor: not-allowed;
}

/* Thêm text trong form checkout để phân biệt vùng thông tin quà tặng */
#gift_from_field {
    position: relative;
}

#gift_from_field::before {
    content: "Thông tin quà tặng";
	font-size: 1.1em;
	font-weight: bolder;
	margin-top: 20px;
	margin-bottom: 10px;
	text-transform: uppercase;
/* 	font-style: normal; */
	font-family: Lato, sans-serif;
	display: block;   
	color: #555;
}
/* Thêm text trong form checkout để phân biệt vùng thông tin quà tặng */

/* sửa thanh trượt ở popup xem nhanh*/
	ol.flickity-page-dots {
	margin: -15px;
}
/* sửa thanh trượt ở popup xem nhanh*/

/* sửa font chữ số hàng trong kho*/
p.stock.in-stock {
    font-family: MillerDisplay;
    font-size: 18px;
	color: #777;
}
p.stock.available-on-backorder {
	font-family: MillerDisplay;
	font-size: 18px;
	color: #777;
	font-weight: 100;
}
p.stock.out-of-stock {
    font-family: MillerDisplay;
	font-size: 18px;
	color: #777;
}
/* sửa font chữ số hàng trong kho*/

/*text font chữ*/
h2.woocommerce-Reviews-title {
    font-size: 20px;
}
/*text font chữ*/

/*ẩn button X tại thanh review */
.cr-nav-right>svg {
    display: none;
}
/*ẩn button X tại thanh review */






@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
}