/* bo goc form tim kiem */
form.pc-searchform input.search-input {   border-radius: 10px; }
/* tăng size line hover main menu va khoang cach tư menu xuong mega category*/
#navigation .menu > ul.sub-menu > li > a:before,
#navigation ul.menu > li > a:before,
.navigation .menu > ul.sub-menu > li > a:before,
.navigation ul.menu > li > a:before {
  height: 2px;
  bottom: calc(45% - 25px);
}



body .pc-builder-element.pc-main-menu .navigation .menu li.current-menu-item > a,
body .pc-builder-element.pc-main-menu .navigation .menu > li.current_page_item > a,
body .pc-builder-element.pc-main-menu .navigation .menu > li.current-menu-ancestor > a,
body .pc-builder-element.pc-main-menu .navigation .menu > li.current-menu-item > a {
   box-shadow: inset 0 -3px 0 0 var(--pcaccent-cl);
    /*color: var(--pcaccent-cl); /* Nếu bạn muốn thay đổi màu chữ */
    text-decoration: none; /* Đảm bảo không có gạch chân */
    transition: box-shadow 0.3s ease, color 0.3s ease; /* Thêm hiệu ứng chuyển đổi mượt mà */
}











/* Tăng font chữ phần mô tả cat*/
.post-entry.penci-category-description p {
    font-size: 18px;
}

/*css cho danh mục sản phẩm */
.mc4wp-form {text-align: left;}





.penci-soledad-product .penci-product-loop-inner-content .penci-product-loop-title{
text-align: left;
}
/*.penci-soledad-product .penci-product-loop-inner-content .penci-product-loop-title .penci-swatches-list{
justify-content: left;
}
*/



/* ✅ Căn chỉnh nội dung danh mục sản phẩm */
.penci-soledad-product .penci-product-loop-inner-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Căn trái */
    background: #fff;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease-in-out;
}
/*
.penci-soledad-product .penci-product-loop-inner-content:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
*/
/* ✅ Căn chỉnh hình ảnh sản phẩm */



.penci-soledad-product .penci-product-loop-top {
    align-self: center; /* Chỉ căn giữa ảnh */
}



/* ✅ Căn chỉnh tiêu đề sản phẩm */
.woocommerce-loop-product__title.penci-loop-title a, .penci-product-loop-title h3 a {
   /* text-align: left; /* Căn trái đúng theo tiêu chuẩn của bạn */
    margin-top: 10px;
}

.woocommerce-loop-product__title.penci-loop-title a, .penci-product-loop-title h3 a {
   /* font-size: 16px;
    font-weight: bold;*/
    color: #3FB127;
    margin-bottom: 10px;
}


/* ✅ Căn chỉnh phần giá tổng thể */
.penci-soledad-product .penci-product-loop-inner-content .penci-product-loop-title .price {
    display: flex;
    align-items: center;
    gap: 6px; /* Khoảng cách giữa giá gốc và giá khuyến mãi */
    margin-bottom: 8px;
}

/* ✅ Giá gốc (bị gạch ngang) - Nhỏ hơn và ít nổi bật */
.penci-soledad-product .penci-product-loop-inner-content .penci-product-loop-title .price del > .woocommerce-Price-amount {
    font-size: 14px; /* Nhỏ hơn giá khuyến mãi */
   color: #808089; /* Màu xám nhạt */
    text-decoration: line-through;
}

/* ✅ Giá khuyến mãi - To hơn và nổi bật */
.penci-soledad-product .penci-product-loop-inner-content .penci-product-loop-title .price ins > .woocommerce-Price-amount {
    font-size: 18px; /* To hơn giá gốc */
    font-weight: 500;
    color: #E53935; /* Màu cam nổi bật */
    text-decoration: none;
}

/* ✅ Nếu sản phẩm không có giá khuyến mãi, giữ giá mặc định */
.penci-soledad-product .penci-product-loop-inner-content .penci-product-loop-title .price > .woocommerce-Price-amount {
    font-size: 18px;
    font-weight: 500;
    Color: #212121;
}







/* ✅ Điều chỉnh khoảng cách giữa giá và nút "Mua Ngay" */
.penci-soledad-product .penci-product-loop-inner-content .custom-cta-button {
    margin-top: 12px; /* Tạo khoảng cách hợp lý */
  	margin-bottom: 10px;
}




/* ✅ Điều chỉnh khoảng cách giữa giá và nút "Mua Ngay" */
.penci-soledad-product .penci-product-loop-inner-content .custom-cta-button {
    margin-top: 10px; /* Tạo khoảng cách hợp lý */
}



/* ✅ Căn chỉnh nút "MUA NGAY" */
.penci-soledad-product .penci-product-loop-inner-content .custom-cta-button {
    display: flex;
    justify-content: flex-start; /* Căn trái */
    margin-top: 8px;
}

/* ✅ Thiết kế nút "MUA NGAY" */
.penci-soledad-product .penci-product-loop-inner-content .custom-cta-button a.cta-icon {
    display: inline-flex;
    align-items: center;
    background: #0866FF;
    color: white;
    font-weight: bold;
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 14px;
    min-width: auto;
    border: none;
}

/* ✅ Hover nhẹ nhàng cho nút */
.penci-soledad-product .penci-product-loop-inner-content .custom-cta-button a.cta-icon:hover {
    background: #3FB127;
    opacity: 0.9;
    transform: scale(1.05);
}

/* ✅ Căn chỉnh phần swatches màu (nếu có) */
.penci-soledad-product .penci-product-loop-inner-content .penci-product-loop-title .penci-swatches-list {
    text-align: left; /* Căn trái theo chuẩn bạn đề xuất */
    display: flex;
    gap: 5px;
    margin-top: 8px;
}

.penci-soledad-product .penci-product-loop-inner-content .penci-product-loop-title .penci-swatches-list .penci-swatch-item {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: all 0.3s;
}

.penci-soledad-product .penci-product-loop-inner-content .penci-product-loop-title .penci-swatches-list .penci-swatch-item:hover {
    transform: scale(1.1);
    border-color: #ff4081;
}

/* ✅  mô tả ngắn */
/* giới hạn độ dài */
/*.penci-soledad-product .penci-product-loop-inner-content .product-excerpt {
    font-size: 14px;
    color: #666;
    max-height: 45px; /* Giới hạn chiều cao */
 /*   overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Chỉ hiển thị 2 dòng */
 /*   -webkit-box-orient: vertical;
}
*/
/* ✅ Giữ định dạng sẵn có của mô tả ngắn */
.penci-soledad-product .penci-product-loop-inner-content .cus-product-excerpt {
    font-size: 15px; /* Kích thước chữ lớn hơn để dễ đọc */
    line-height: 1.6; /* Giãn dòng giúp nội dung thoáng hơn */
    color: #555; /* Màu chữ dịu hơn, không quá tối */
    font-weight: 400;
    margin-top: 8px;
    word-break: break-word; /* Ngắt từ hợp lý, tránh tràn layout */
}

/* ✅ Giữ nguyên thẻ xuống dòng và đoạn văn */
.penci-soledad-product .penci-product-loop-inner-content .cus-product-excerpt p {
    margin-bottom: 6px; /* Khoảng cách giữa các đoạn */
}

/* ✅ Hỗ trợ hiển thị danh sách bullet */
.penci-soledad-product .penci-product-loop-inner-content .cus-product-excerpt ul {
    list-style-type: disc; /* Dấu chấm đầu dòng */
    margin-left: 10px;
    padding-left: 0;
}

.penci-soledad-product .penci-product-loop-inner-content .cus-product-excerpt li {
    margin-bottom: 4px; /* Khoảng cách giữa các mục */
	
}

/* ✅ Nếu có chữ đậm, giữ nguyên & làm nổi bật hơn */
.penci-soledad-product .penci-product-loop-inner-content .cus-product-excerpt strong {
    color: #E53935; /* Màu cam nổi bật */
    font-weight: bold;
}
.penci-soledad-product .penci-product-loop-inner-content div.cus-product-excerpt  ul li strong {
	display: inline-block;/* ngăn thẻ li xuong dòng*/
	Color: #555;
}
/* ✅ Nếu có liên kết, hiển thị đúng */
.penci-soledad-product .penci-product-loop-inner-content .cus-product-excerpt a {
    color: #ff4081; /* Màu nổi bật cho link */
    text-decoration: none;
    font-weight: bold;
}

.penci-soledad-product .penci-product-loop-inner-content .cus-product-excerpt a:hover {
    text-decoration: underline;
}

/* ✅ Thêm icon nhẹ nhàng nếu muốn làm đẹp hơn */
.penci-soledad-product .penci-product-loop-inner-content .cus-product-excerpt::before {
   /* content: "📝 "; /* Icon mô tả sản phẩm */
    font-size: 16px;
    color: #ff4081;
}

/* ✅ Khoảng cách hợp lý giữa mô tả và các phần khác */
.penci-soledad-product .penci-product-loop-inner-content .price {
    margin-bottom: 12px;
}

.penci-soledad-product .penci-product-loop-inner-content .custom-cta-button {
    margin-top: 14px;
}









/* ✅ Tiêu đề "REVIEW" canh trái */
.penci-soledad-product .penci-product-loop-inner-content .penci-product-loop-title .penci-wrapper-smalllist h3 {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    /*text-transform: uppercase;*/
    display: block;
    margin-top: 12px;
    position: relative;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 12px;
    text-align: left; /* Canh trái */
}




/* ✅ Gạch ngang full width */
.penci-soledad-product .penci-product-loop-inner-content .penci-product-loop-title .penci-wrapper-smalllist h3:before {
    content: "";
    display: block;
    width: 100%; /* Full chiều rộng */
    height: 2px;
    background: #333; /* Màu gạch */
    position: absolute;
    top: 0;
    left: 0;
}

/* ✅ Tiêu đề bài viết liên quan */
.penci-soledad-product .penci-product-loop-inner-content .penci-product-loop-title .penci-wrapper-smalllist .pcsl-title a {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
	
}



@media (max-width: 1024px) {
    .pcsl-content {
        width: 100%; /* Chiếm đủ chiều rộng để tránh ngắt dòng */
    }

    .pcsl-title a {
        word-break: normal; /* Tránh ngắt từ xuống dòng bất thường */
        overflow-wrap: break-word; /* Chỉ ngắt khi cần thiết */
        hyphens: auto;
    }

    .pcsl-inner.pcsl-grid {
        display: flex;
        flex-direction: column;
    }

    .pcsl-item {
        width: 100%;
        margin-bottom: 15px; /* Khoảng cách giữa các item */
    }

    .pcsl-thumb {
        width: 100%;
        margin-bottom: 10px;
    }
}













/* Định dạng hộp mã giảm giá */
.penci-soledad-product .penci-product-loop-inner-content .discount-code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 9px;
    background-color: #e6f7e6; /* Màu nền nhẹ nhàng */
    color: #2d7f2d;
    font-weight: bold;
    border: 2px dashed #2d7f2d;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease-in-out;
    position: relative;
    font-size: 14px;
  	margin-top: 20px;
  	margin-bottom: 12px;
}

/* Hiệu ứng khi hover vào hộp mã giảm giá */
.penci-soledad-product .penci-product-loop-inner-content .discount-code:hover {
    background-color: #d4edda;
}

/* Phần text mã giảm giá */
.penci-soledad-product .penci-product-loop-inner-content .product-coupon {
    margin: 0;
    font-weight: bold;
}

.penci-soledad-product .penci-product-loop-inner-content .discount-code .coupon-text {
    text-transform: uppercase; /* Viết hoa toàn bộ */
    font-weight: bold; /* In đậm */
    letter-spacing: 1px; /* Giãn chữ một chút để dễ đọc hơn */
}


/* Biểu tượng copy */
.penci-soledad-product .penci-product-loop-inner-content .copy-icon {
     font-size: 18px;
    color: #2f6c2f;
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%) rotate(160deg); /* Xoay ngược lại */
    background: none; /* Loại bỏ nền */
}

/* Khi click vào sẽ đổi trạng thái */
.penci-soledad-product .penci-product-loop-inner-content .discount-code.copied {
    background-color: #c8e6c9;
    color: #1b5e20;
}


/* mã giam giá trang chi tiết */


.custom-product-info .discount-code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 9px;
    background-color: #e6f7e6; /* Màu nền nhẹ nhàng */
    color: #2d7f2d;
    font-weight: bold;
    border: 2px dashed #2d7f2d;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease-in-out;
    position: relative;
    font-size: 14px;
  	margin-top: 20px;
  	margin-bottom: 12px;
}

/* Hiệu ứng khi hover vào hộp mã giảm giá */
.custom-product-info .discount-code:hover {
    background-color: #d4edda;
}

/* Phần text mã giảm giá */
.custom-product-info .product-coupon {
    margin: 0;
    font-weight: bold;
}

.custom-product-info .discount-code .coupon-text {
    text-transform: uppercase; /* Viết hoa toàn bộ */
    font-weight: bold; /* In đậm */
    letter-spacing: 1px; /* Giãn chữ một chút để dễ đọc hơn */
}


/* Biểu tượng copy */
.custom-product-info .copy-icon {
     font-size: 18px;
    color: #2f6c2f;
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%) rotate(160deg); /* Xoay ngược lại */
    background: none; /* Loại bỏ nền */
}

/* Khi click vào sẽ đổi trạng thái */
.custom-product-info .discount-code.copied {
    background-color: #c8e6c9;
    color: #1b5e20;
}






/* trang chủ */

/*
 mục list khuyến mại 
*/
/* 📌 Điều chỉnh phần hiển thị giá tổng thể */
.home-small-list-product .pcsl-inner .pcsl-content .pcsl-price {
    display: flex;
    flex-direction: column; /* Hiển thị giá theo hàng dọc */
    align-items: flex-start;
    gap: 1px; /* Giữ khoảng cách đồng đều giữa giá gốc & giá khuyến mãi */
}

/* 📌 Làm nổi bật giá khuyến mãi */
.home-small-list-product .pcsl-inner .pcsl-content .pcsl-price ins {
    font-size: 18px;
    font-weight: 600; /* Giảm độ đậm xuống */
    color: #D32F2F; /* Màu đỏ nhẹ nhàng hơn */
    text-decoration: none;
    display: block;
    /*margin-top: 2px; /* Tạo khoảng cách với giá gốc */
}

/* 📌 Làm giá gốc nhỏ hơn và mờ đi một chút */
.home-small-list-product .pcsl-inner .pcsl-content .pcsl-price del {
    font-size: 14px;
    color: #AAAAAA; /* Xám nhạt hơn để không quá gắt */
    text-decoration: line-through;
}

/* 📌 Tạo khoảng cách giữa từng sản phẩm Deals */
/*.home-small-list-product .pcsl-inner .pcsl-item {
    padding: 12px 0;
    border-bottom: 1px solid #EFEFEF; /* Đường ngăn cách mềm mại hơn */
/*}
.home-small-list-product .pcsl-inner .pcsl-item:last-child {
    border-bottom: none;
}
/* 📌 Khi hover vào sản phẩm, làm nổi bật toàn bộ */
/*.home-small-list-product .pcsl-inner .pcsl-item:hover {
    background-color: #F9F9F9;
    transition: background-color 0.3s ease-in-out;
}*/

@media (max-width: 768px) {
	.home-small-list-product .pcsl-inner .pcsl-content .pcsl-price ins {
    font-size: 16px;
    font-weight: 600; /* Giảm độ đậm xuống */
}

/* 📌 Làm giá gốc nhỏ hơn và mờ đi một chút */
.home-small-list-product .pcsl-inner .pcsl-content .pcsl-price del {
    font-size: 12px;
}
}











/* tiêu đề */

/* 📌 Điều chỉnh font chữ tiêu đề để trông mềm mại hơn */
.home-small-list-product .penci-homepage-title h3 span{
  
    font-size: 1.5rem;
  	font-weight: 500;
    /*color: #212121; /* Màu chữ trung tính, không quá gắt */
}

/* 📌 Căn chỉnh icon ⚡ hoặc thanh xanh để nhìn tự nhiên hơn */
.home-small-list-product .penci-homepage-title span {
    display: flex;
    align-items: center;
    gap: 6px; /* Tạo khoảng cách giữa icon & chữ */
}

/* list review */

.cus-home-small-list .penci-homepage-title h3 span{
     font-size: 1.5rem;
  	font-weight: 500;
    text-transform: capitalize; /* Viết hoa chữ cái đầu */
    color: #212121; /* Màu chữ trung tính, không quá gắt */
}



/* Mẫu 1 */
.cus-home-style-1 .penci-homepage-title h3 span{
     font-size: 30px;
  	/* font-weight: 500;*/
}
/* Mẫu 2 */
.cus-home-style-2 .penci-homepage-title h3 span{
     font-size: 30px;
  	/* font-weight: 500;*/
}

.cus-home-style-2 .penci-grid > li.grid-style {
  text-align: left;
}



/* test tìm kiếm */
/* CSS cho form lọc */
/*#deals-search-wrapper {
    margin-bottom: 20px;
    padding: 15px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.deals-search-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

#deal-search-input {
    width: 300px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

#deal-search-btn {
    background-color: #ff6600;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
}

.deals-filters {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.deals-filters select {
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ddd;
}
*/

/* phan trang */
/* Vùng chứa phân trang */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

/* Phân trang chính */
.custom-pagination {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Các số trang */
.custom-pagination .page-link {
    padding: 8px 12px;
    border-radius: 5px;
    background: #f4f4f4;
    text-decoration: none;
    font-weight: bold;
    color: #333;
    transition: 0.3s;
}

.custom-pagination .page-link:hover {
    background: #3FB127;
    color: #fff;
}

/* Trang hiện tại */
.custom-pagination .page-link.active {
    background: #3FB127;
    color: white;
}

/* Nút chuyển trang */
.custom-pagination .prev-page,
.custom-pagination .next-page {
    padding: 8px 14px;
    border-radius: 5px;
    background: #ddd;
    text-decoration: none;
    font-weight: bold;
    color: #333;
    transition: 0.3s;
}

.custom-pagination .prev-page:hover,
.custom-pagination .next-page:hover {
    background: #3FB127;
    color: white;
}






/*hom nay */

/* ✅ 1. Căn chỉnh vùng chứa bộ lọc */
.deals-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
   /* padding: 12px 20px;*/
   /* background: #ffffff;*/
    /*border-radius: 8px;*/
    margin-bottom: 30px;
    /*box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);*/
}

/* ✅ 2. Nhóm bộ lọc (Category, Percent Off, Sort By) */
.filter-group {
    position: relative;
    padding: 8px 14px;
    border-radius: 6px;
    background: #f8f8f8;
    border: 1px solid #ddd;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 130px;
    text-align: left;
    transition: all 0.3s ease;
}

.filter-group:hover {
    /*background: #e6f7ff;*/
    border-color: var(--pcaccent-cl);
	/*color: var(--pcaccent-cl);*/
	.filter-header{
		 color: var(--pcaccent-cl);
	}
}

/* ✅ 3. Tiêu đề bộ lọc & Mũi tên ▼ */
.filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
}

/* ✅ Mũi tên dropdown (▼) */
.filter-header .arrow {
    display: inline-block;
    font-size: 12px;
    color: #666;
    transition: transform 0.2s ease-in-out;
}

/* ✅ Khi mở dropdown, mũi tên xoay lên */
.filter-group:focus-within .arrow,
.filter-group:hover .arrow {
    transform: rotate(180deg);
}

/* ✅ 4. Dropdown bộ lọc */
.filter-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 230px;
    background: white;
    border-radius: 6px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
    padding: 12px;
    z-index: 10;
    border: 1px solid #ddd;
}

/* ✅ 5. Hiển thị dropdown khi nhấn */
.filter-group:focus-within .filter-options,
.filter-group:hover .filter-options {
    display: block;
}

/* ✅ 6. Danh sách checkbox trong dropdown */
.filter-options label {
    display: flex;
    align-items: center;
    font-size: 14px;
    padding: 6px 10px;
    cursor: pointer;
    transition: background 0.3s;
}

/* ✅ 7. Checkbox và radio to hơn */
.filter-options input[type="checkbox"],
.filter-options input[type="radio"] {
    margin-right: 8px;
    transform: scale(1.1);
}

/* ✅ 8. Tạo hiệu ứng hover khi chọn danh mục */
.filter-options label:hover {
    /*background: #f0f0f0;*/
	color: var(--pcaccent-cl);
}

/* ✅ 9. Ô tìm kiếm căn chỉnh đẹp */
/* Căn chỉnh ô tìm kiếm đồng bộ với Filter, Sort */
.filter-search input[type="text"] {
    height: 47px; /* Đồng bộ chiều cao với các nút Filter */
    border-radius: 6px; /* Viền bo tròn giống nút */
    border: 1px solid #ccc; /* Viền tương tự các nút */
    padding: 5px 12px;
    font-size: 14px;
    background: white; /* Màu nền đồng bộ */
    transition: all 0.3s ease;
}

/* Hiệu ứng khi focus vào ô tìm kiếm */
.filter-search input[type="text"]:focus {
    border-color: #0073e6; /* Hiệu ứng viền nổi bật khi nhập */
    box-shadow: 0px 0px 5px rgba(0, 115, 230, 0.4);
}

/* Điều chỉnh icon tìm kiếm */
.filter-search input[type="text"]::placeholder {
    color: #888;
    font-style: italic;
}

/* ✅ 10. Bộ lọc đã chọn hiển thị ngay */
.selected-filters {
    display: flex;
    gap: 10px;
    margin-top: 5px;
    padding: 5px 10px;
}


.filter-search {
        flex-grow: 1; /* Ô tìm kiếm mở rộng hết phần còn lại */
    }







/* ✅ 11. Tag bộ lọc đã chọn */
.filter-tag {
    display: flex;
    align-items: center;
    background: #f8f8f8;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    color: #008577;
    font-weight: 600;
    border: 1px solid #008577;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ✅ 12. Nút "X" để xóa bộ lọc (Bên trái) */
.filter-tag .remove-filter {
    font-size: 14px;
    font-weight: bold;
    margin-right: 8px;
    cursor: pointer;
    color: red;
}

.filter-tag:hover {
    background: #008577;
    color: white;
}

.filter-tag:hover .remove-filter {
    color: white;
}

/* Ẩn nút trên desktop */
/* Ẩn nút mobile trên desktop */
.mobile-controls {
    display: none;
}

/* ✅ CSS CHO BỘ LỌC MOBILE MỚI */


@media (max-width: 768px) {
    /* Đặt header chứa các bộ lọc và tìm kiếm */
    .deals-filters {
        flex-direction: row;
        justify-content: space-between;
        padding: 8px 10px;
		gap: 8px;
    }

    /* Chỉnh lại cho từng nút bộ lọc để chúng chỉ hiển thị biểu tượng hoặc thu gọn */
    .filter-group {
        display: none; /* Tạm thời ẩn các nút này và sẽ xử lý hiển thị trong JavaScript */
		width: 100%;
        justify-content: space-between;
    }
	.filter-options {
        width: 100%;
        left: 0;
    }

    /* Ô tìm kiếm chiếm toàn bộ chiều rộng */
    .filter-search input {
        width: calc(100% - 20px); /* Giảm 20px để tính đến padding */
        margin: 0;
    }

    /* Thêm nút để mở menu bộ lọc */
    .filter-menu-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 1px solid #ccc;
        border-radius: 50%;
        background-color: #fff;
        cursor: pointer;
    }

    /* Hiệu ứng cho nút bộ lọc */
    .filter-menu-button:hover {
        background-color: var(--pcaccent-cl);
    }

    /* Khi bộ lọc được kích hoạt, hiển thị các nút bộ lọc */
    .filter-group.active {
        display: flex;
        width: 100%; /* Đảm bảo chiếm toàn bộ chiều rộng khi hiển thị */
        justify-content: space-between;
        background-color: #fff; /* Nền trắng cho nổi bật */
        padding: 10px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000; /* Đảm bảo nằm trên cùng */
        box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Thêm bóng cho dễ nhận diện */
    }
}


@media (max-width: 768px) {
    /* Thanh điều khiển bộ lọc */
    .deals-filters {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #f4f4f4;
        padding: 8px;
        gap: 5px;
        flex-wrap: nowrap; /* Đảm bảo trên cùng một hàng */
        position: relative; /* Giữ menu bám theo */
    }

    /* Nút "FILTER" & "SORT" */
    .mobile-controls {
        display: flex;
        gap: 5px;
        flex-shrink: 0;
        position: relative; /* Để menu dropdown bám theo nút */
    }

    .mobile-controls button {
        height: 34px;
        width: 65px;
        border: 1px solid #ccc;
        background-color: white;
        border-radius: 5px;
        padding: 3px;
        font-size: 13px;
        font-weight: 600;
        color: #333;
        text-align: center;
        white-space: nowrap;
        cursor: pointer;
    }

    .mobile-controls button:hover {
        background: var(--pcaccent-cl);
        color: white;
    }

    /* Ô tìm kiếm tự động co giãn tối đa */
    .filter-search {
        flex-grow: 1; /* Ô tìm kiếm mở rộng hết phần còn lại */
    }

    .filter-search input[type="text"] {
        width: 100%;
        height: 34px;
        border: 1px solid #ccc;
        background-color: white;
        border-radius: 5px;
        padding: 3px 8px;
        font-size: 14px;
        color: #555;
    }

    /* Menu Filter & Sort */
    .mobile-filter-menu,
    .mobile-sort-menu {
        display: none;
        position: absolute;
        top: 100%; /* Hiển thị ngay dưới nút */
        left: 0; /* Căn chỉnh sát nút */
        width: 250px; /* Kích thước vừa đủ */
        background: white;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 12px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        z-index: 1000;
    }

    /* Khi mở menu, đảm bảo đúng vị trí */
    .mobile-controls .mobile-filter-menu {
        left: 0; /* Ngay dưới nút "FILTER" */
    }

    .mobile-controls .mobile-sort-menu {
        left: 70px; /* Ngay dưới nút "SORT" */
    }

    /* Định dạng danh mục & bộ lọc */
    .mobile-filter-menu h3,
    .mobile-sort-menu h3 {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 6px;
        padding-bottom: 5px;
        border-bottom: 1px solid #ddd;
    }

    .filter-section {
        margin-bottom: 8px;
    }

    .filter-section label {
        display: block;
        padding: 3px 0;
    }

    .filter-section input {
        margin-right: 5px;
    }
	/* Fix vị trí menu Sort */
    .mobile-sort-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 250px;
        background: white;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 12px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        z-index: 1000;
    }

    /* Căn chỉnh radio button trong Sort */
    .mobile-sort-menu label {
        display: flex;
        align-items: center; /* Căn giữa theo chiều dọc */
        gap: 8px; /* Tạo khoảng cách giữa nút radio và text */
        padding: 6px 0; /* Tạo khoảng cách đều giữa các dòng */
        font-size: 14px;
        cursor: pointer;
    }

    .mobile-sort-menu input[type="radio"] {
        margin: 0; /* Xóa khoảng cách thừa */
        width: 16px;
        height: 16px;
    }
}

/* khắc phục tiêu đề không hiển thị quitview trong trang deals */
/*:root {
  /*  --page-title-display: block !important;
}*/

.mfp-content .penci-content-quickview .product .entry-summary-wrapper .entry-summary h1.entry-title{
	display:block;
}



/*penci-search-form penci-builder-element pc-search-form-desktop pc-search-form search-style-default  penci-search-form**/
/* chỉnh menu penci_bottombar */
/* Khi màn hình nhỏ hơn, thu hẹp ô tìm kiếm nhưng không để menu xuống dòng */





.penci_bottombar .penci_nav_right {
    display: none; /* Nếu không cần phần này, có thể ẩn đi */
}

.