@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//paroma.vn/wp-content/themes/woodmart/fonts/woodmart-font-1-400.woff2?v=8.0.6") format("woff2");
}

@font-face {
	font-family: "star";
	font-weight: 400;
	font-style: normal;
	src: url("//paroma.vn/wp-content/plugins/woocommerce/assets/fonts/star.eot?#iefix") format("embedded-opentype"), url("//paroma.vn/wp-content/plugins/woocommerce/assets/fonts/star.woff") format("woff"), url("//paroma.vn/wp-content/plugins/woocommerce/assets/fonts/star.ttf") format("truetype"), url("//paroma.vn/wp-content/plugins/woocommerce/assets/fonts/star.svg#star") format("svg");
}

@font-face {
	font-family: "WooCommerce";
	font-weight: 400;
	font-style: normal;
	src: url("//paroma.vn/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.eot?#iefix") format("embedded-opentype"), url("//paroma.vn/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff") format("woff"), url("//paroma.vn/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.ttf") format("truetype"), url("//paroma.vn/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.svg#WooCommerce") format("svg");
}

:root {
	--wd-text-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #767676;
	--wd-text-font-size: 16px;
	--wd-title-font: "Playfair Display", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 600;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Tenor Sans", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 400;
	--wd-entities-title-transform: none;
	--wd-entities-title-color: rgb(36,36,36);
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Josefin Sans", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Oswald", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 700;
	--wd-widget-title-transform: none;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Montserrat", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 600;
	--wd-header-el-transform: capitalize;
	--wd-header-el-font-size: 15px;
	--wd-primary-color: #F7F4EA;
	--wd-alternative-color: rgb(95,171,18);
	--wd-link-color: #333333;
	--wd-link-color-hover: #242424;
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: rgb(194,122,122);
	--btn-accented-bgcolor-hover: rgb(153,98,96);
	--wd-form-brd-width: 0px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
}
.wd-popup.wd-age-verify {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: rgb(248,248,248);
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center top;
	--wd-popup-width: 800px;
}
.woodmart-woocommerce-layered-nav .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title {
	background-color: rgb(40,89,184);
	background-image: none;
	background-size: cover;
	background-position: center center;
}
.wd-footer {
	background-color: #ffffff;
	background-image: none;
}
html .wd-nav.wd-nav-secondary > li > a {
	font-family: "Mulish", Arial, Helvetica, sans-serif;
	font-weight: 800;
}
html .product.category-grid-item .wd-entities-title, html .product.category-grid-item.cat-design-replace-title .wd-entities-title, html .wd-masonry-first .category-grid-item:first-child .wd-entities-title, html .product.wd-cat .wd-entities-title {
	font-size: 18px;
	text-transform: none;
}
html .wd-nav-mobile > li > a {
	text-transform: none;
}
.whb-general-header .wd-nav.wd-nav-secondary > li > a {
	font-weight: 400;
	color: rgb(119,119,119);
}
.whb-general-header .wd-nav.wd-nav-secondary > li:hover > a, .whb-general-header .wd-nav.wd-nav-secondary > li.current-menu-item > a {
	color: rgb(36,36,36);
}
.page .wd-page-content {
	background-color: rgb(247,244,234);
	background-image: none;
}
.woodmart-archive-shop:not(.single-product) .wd-page-content {
	background-color: rgb(247,244,234);
	background-image: none;
}
.single-product .wd-page-content {
	background-color: rgb(247,244,234);
	background-image: none;
}
.woodmart-archive-blog .wd-page-content {
	background-color: rgb(247,244,234);
	background-image: none;
}
.single-post .wd-page-content {
	background-color: rgb(247,244,234);
	background-image: none;
}
.woodmart-archive-portfolio .wd-page-content {
	background-color: rgb(247,244,234);
	background-image: none;
}
.single-portfolio .wd-page-content {
	background-color: rgb(247,244,234);
	background-image: none;
}
html .entry-summary .single_add_to_cart_button, .wd-single-add-cart .single_add_to_cart_button, html .wd-sticky-btn-cart .single_add_to_cart_button, html .wd-sticky-add-to-cart, html .wd-sticky-btn.wd-quantity-overlap div.quantity input[type] {
	background: rgb(95,171,18);
}
html .entry-summary .single_add_to_cart_button:hover, .wd-single-add-cart .single_add_to_cart_button:hover, html .wd-sticky-btn-cart .single_add_to_cart_button:hover, html .wd-sticky-add-to-cart:hover, html .wd-sticky-btn.wd-quantity-overlap .cart:hover > div.quantity input[type], html .wd-sticky-btn.wd-quantity-overlap .cart:hover > div.quantity+.button {
	background: rgb(84,157,10);
}
body, [class*=color-scheme-light], [class*=color-scheme-dark], .wd-search-form[class*="wd-header-search-form"] form.searchform, .wd-el-search .searchform {
	--wd-form-color: rgb(119,119,119);
	--wd-form-placeholder-color: rgb(119,119,119);
	--wd-form-bg: rgba(15,15,15,0.04);
}
.product-labels .product-label.onsale {
	background-color: rgb(194,122,122);
}
.wd-popup.popup-quick-view {
	--wd-popup-width: 920px;
}
.woocommerce-product-gallery {
	--wd-gallery-gap: 15px;
}

@media (max-width: 1024px) {
	html .product.category-grid-item .wd-entities-title, html .product.category-grid-item.cat-design-replace-title .wd-entities-title, html .wd-masonry-first .category-grid-item:first-child .wd-entities-title, html .product.wd-cat .wd-entities-title {
		font-size: 16px;
	}
	.woocommerce-product-gallery {
		--wd-gallery-gap: 10px;
	}

}

@media (max-width: 768.98px) {
	html .product.category-grid-item .wd-entities-title, html .product.category-grid-item.cat-design-replace-title .wd-entities-title, html .wd-masonry-first .category-grid-item:first-child .wd-entities-title, html .product.wd-cat .wd-entities-title {
		font-size: 16px;
	}
	.woocommerce-product-gallery {
		--wd-gallery-gap: 4px;
	}

}
:root{
--wd-container-w: 1390px;
--wd-form-brd-radius: 0px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 0px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-default-box-shadow-active: none;
--btn-default-bottom: 0px;
--btn-accented-bottom-active: -1px;
--btn-accented-brd-radius: 0px;
--btn-accented-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
--btn-accented-box-shadow-hover: inset 0 -2px 0 rgba(0, 0, 0, .15);
--wd-brd-radius: 0px;
}

@media (min-width: 1407px) {
.platform-Windows .wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}

@media (min-width: 1390px) {
html:not(.platform-Windows) .wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


/* Container */
.paroma-owl-wrapper {
    width: 100%;
    margin: 30px 0;
}

/* Card Style */
.blog-card-item {
    text-align: left;
}

.blog-thumb {
    position: relative;
    margin-bottom: 15px;
    overflow: hidden;
}

.blog-thumb img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    transition: 0.5s ease;
}

.blog-card-item:hover img {
    transform: scale(1.05);
}

.blog-cat-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #a68a58;
    color: #fff;
    font-size: 10px;
    padding: 4px 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.blog-title {
    font-family: "Playfair Display", serif;
    font-size: 17px;
    line-height: 1.4;
    margin-top: 10px;
}

.blog-title a {
    color: #222 !important;
    text-decoration: none !important;
}

.blog-date {
    font-size: 11px;
    color: #a68a58;
    text-transform: uppercase;
}

/* --- OWL PAGINATION CUSTOM (HÌNH VUÔNG) --- */
.paroma-owl-blog .owl-dots {
    text-align: center;
    margin-top: 30px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.paroma-owl-blog .owl-dot {
    outline: none;
}

.paroma-owl-blog .owl-dot span {
    width: 12px !important;
    height: 12px !important;
    margin: 0 5px !important;
    background: #D6D6D6 !important; /* Màu chưa active */
    display: block;
    transition: all 0.3s ease !important;
    border-radius: 0 !important; /* ÉP HÌNH VUÔNG */
}

/* Khi Active biến thành thanh ngang dài */
.paroma-owl-blog .owl-dot.active span {
    width: 40px !important; /* Kéo dài ra */
    background: #a68a58 !important; /* Màu vàng của bạn */
    border-radius: 0 !important;
}























/* PHẦN CHUYỂN BÀI */
.post-navigation-custom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.nav-box {
    flex: 1;
    max-width: 50%;
}

.nav-box a {
    text-decoration: none !important;
    display: block;
}

.nav-label {
    display: block;
    font-size: 11px;
    letter-spacing: 2px;
    color: #a68a58;
    margin-bottom: 15px;
}

.nav-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.nav-content img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 2px;
    transition: transform 0.3s;
}

.nav-title {
    font-size: 15px;
    font-weight: 600;
    color: #222;
    line-height: 1.4;
}

/* Hiệu ứng khi hover */
.nav-box:hover img {
    transform: scale(1.05);
}

.nav-box:hover .nav-title {
    color: #a68a58;
}

/* Căn lề cho bài tiếp theo sang phải */
.next-box {
    text-align: right;
}
.next-box .nav-content {
    justify-content: flex-end;
}

/* Responsive cho mobile */
@media (max-width: 600px) {
    .post-navigation-custom {
        flex-direction: column;
        gap: 40px;
    }
    .nav-box {
        max-width: 100%;
    }
}
.elementor-section, .elementor-container, .elementor-column, .elementor-widget-wrap {
    overflow: visible !important;
}
/* Container chính */
.blog-container-custom {
    display: flex;
    gap: 40px;
    align-items: flex-start !important; /* Bắt buộc để cột sidebar không cao bằng cột chính */
    overflow: visible !important;
}

.main-content-blog {
    flex: 1;
    min-width: 0;
}

.sidebar-blog-custom {
    width: 300px;
    flex-shrink: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 90px; /* Khoảng cách từ đỉnh màn hình, chỉnh lại tùy theo Header của bạn */
    z-index: 99;
}

/* HIỆU ỨNG DÍNH TRONG KHUNG HÌNH */
.sidebar-sticky-wrap {
    position: -webkit-sticky;
    position: sticky;
    top: 20px; /* Khoảng cách từ mép trên trình duyệt khi dính */
    max-height: calc(100vh - 40px); /* Đảm bảo sidebar không dài quá màn hình */
    overflow-y: auto; /* Nếu sidebar quá dài thì có thể tự lướt trong nó */
    padding-right: 5px;
}

/* Ẩn thanh cuộn của sidebar để nhìn cho mượt */
.sidebar-sticky-wrap::-webkit-scrollbar {
    width: 0px;
}

/* Style Widget bài viết mới */
.recent-post-item {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    text-decoration: none !important;
    align-items: center;
}

.recent-thumb img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 2px;
}

.recent-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #222;
    display: block;
    margin-bottom: 4px;
}

.recent-date {
    font-size: 11px;
    color: #a68a58;
    letter-spacing: 1px;
}

/* Widget Banner */
.inner-banner {
    background: #000; /* Đổi sang nền đen cho sang trọng */
    color: #fff;
    padding: 40px 25px;
    text-align: center;
}

.inner-banner h4 {
    font-family: "Playfair Display", serif;
    letter-spacing: 3px;
    margin-bottom: 15px;
}

.btn-banner {
    border: 1px solid #a68a58;
    padding: 10px 25px;
    color: #a68a58 !important;
    font-size: 10px;
    letter-spacing: 2px;
    margin-top: 20px;
    display: inline-block;
    transition: all 0.3s;
}

.btn-banner:hover {
    background: #a68a58;
    color: #fff !important;
}

/* Responsive */
@media (max-width: 1024px) {
    .blog-container-custom { flex-direction: column; }
    .sidebar-blog-custom { width: 100%; }
    .sidebar-sticky-wrap { position: static; max-height: none; }
}
.luxury-single-post {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.post-header-image {
    margin-bottom: 40px;
    box-shadow: 0 15px 45px rgba(0,0,0,0.07);
}

.post-header-image img {
    width: 100%;
    height: auto;
    display: block;
}

.post-meta-wrap {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 13px;
    color: #a68a58; /* Màu vàng đồng của bạn */
    margin-bottom: 15px;
}

.post-main-title {
    font-family: "Playfair Display", serif !important; /* Font sang trọng */
    text-align: center;
    font-size: clamp(28px, 5vw, 42px);
    line-height: 1.3;
    margin-bottom: 40px;
    color: #222;
}

.post-content-body {
    font-size: 17px;
    line-height: 1.8;
    color: #444;
    text-align: justify;
}

.post-content-body p {
    margin-bottom: 25px;
}















/* Chỉ áp dụng cho màn hình máy tính (PC) */
@media (min-width: 1025px) {

    /* 1. Phá bỏ giới hạn chiều cao của tất cả các thẻ bao quanh logo */
    .whb-column.whb-col-left,
    .site-logo,
    .wd-logo,
    .wd-main-logo {
        height: auto !important;
        max-height: none !important;
        display: flex !important;
        align-items: center !important;
    }

    /* 2. Cưỡng bức kích thước ảnh logo */
    .site-logo img.attachment-full {
        width: 200px !important; 
        max-width: 100vw !important; 
        max-height: none !important;
        height: auto !important;
    }

}

/* Mobile sẽ tự động bỏ qua đoạn trên và dùng cấu hình mặc định của Woodmart */


















/* --- 1. CẤU TRÚC CAROUSEL --- */
/* Đảm bảo khung container đủ rộng và các item không bị co */
.blog-home .elementor-loop-container.swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
    gap: 0 !important; /* Swiper sẽ tự quản lý khoảng cách bằng 'space-between' */
}

/* --- 2. GIỮ NGUYÊN HIỆU ỨNG LUXURY CHO CARD --- */
.elementor-3018 .elementor-element-22a1fa9 {
    margin-bottom: 25px !important;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03); 
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: hidden;
}

.elementor-3018 .elementor-element-22a1fa9 a {
    display: block !important;
    height: 200px !important; 
    background-color: #000;
}

.elementor-3018 .elementor-element-22a1fa9 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important; 
    transition: transform 2.5s cubic-bezier(0.1, 1, 0.3, 1), opacity 0.8s ease !important;
    opacity: 0.92;
}

/* Hiệu ứng Hover Card */
.blog-home .e-loop-item:hover .elementor-element-22a1fa9 {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.blog-home .e-loop-item:hover img {
    transform: scale(1.12);
    opacity: 1;
}

/* --- 3. TYPOGRAPHY & BUTTON (GIỮ NGUYÊN) --- */
.elementor-3018 .elementor-element-fd47304 .elementor-heading-title {
    font-family: "Playfair Display", serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.5 !important;
    height: 3.2em !important;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.blog-home .e-loop-item:hover .elementor-heading-title a {
    color: #a68a58 !important;
}

/* Nút Xem Chi Tiết */
.elementor-3018 .elementor-element-cac2d4d::after {
    content: "XEM CHI TIẾT";
    display: block;
    width: fit-content;
    margin: 10px auto;
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    letter-spacing: 3px;
    color: #444;
    border-bottom: 1px solid transparent;
    transition: all 0.4s ease;
}

.blog-home .e-loop-item:hover .elementor-element-cac2d4d::after {
    color: #a68a58;
    border-bottom: 1px solid #a68a58;
    letter-spacing: 4px;
}

/* --- 4. CHỈNH SỬA PAGINATION (DẤU CHẤM) SANG TRỌNG --- */
/* Căn chỉnh vị trí dots */
.blog-home .swiper-pagination {
    position: relative !important;
    bottom: -30px !important;
    margin-top: 20px;
}

/* Style cho dấu chấm bình thường */
.blog-home .swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    background: #ccc !important;
    opacity: 1 !important;
    margin: 0 6px !important;
    transition: all 0.4s ease !important;
    border-radius: 0 !important; /* Hình vuông hoặc hình chữ nhật nhìn sang hơn */
}

/* Style cho dấu chấm đang hoạt động (Active) */
.blog-home .swiper-pagination-bullet-active {
    width: 25px !important; /* Kéo dài ra kiểu thanh ngang hiện đại */
    background: #a68a58 !important; 
    border-radius: 0 !important;
}

/* --- 5. RESPONSIVE --- */
@media (max-width: 1024px) {
    .elementor-3018 .elementor-element-22a1fa9 a { height: 180px !important; }
}

@media (max-width: 767px) {
    .elementor-3018 .elementor-element-22a1fa9 a { height: 250px !important; }
}





/* 1. Thiết lập trạng thái ban đầu: Ẩn và đẩy sang trái cho TẤT CẢ phần tử header */
.site-logo, 
.wd-nav-main > li, 
.wd-header-search, 
.wd-header-wishlist, 
.wd-header-cart,
.wd-header-mobile-nav {
    opacity: 0;
    transform: translateX(-40px); /* Đẩy xa hơn một chút để hiệu ứng rõ rệt */
    animation: allHeaderSlideLeft 0.8s ease forwards;
}

/* 2. Định nghĩa chuyển động trượt từ trái sang */
@keyframes allHeaderSlideLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 3. Thứ tự xuất hiện (Delay) - Giống như dòng chảy từ trái qua phải */

/* Logo xuất hiện đầu tiên */
.site-logo { animation-delay: 0.1s; }

/* Các mục menu chính xuất hiện nối đuôi nhau */
.wd-nav-main > li:nth-child(1) { animation-delay: 0.2s; }
.wd-nav-main > li:nth-child(2) { animation-delay: 0.3s; }
.wd-nav-main > li:nth-child(3) { animation-delay: 0.4s; }
.wd-nav-main > li:nth-child(4) { animation-delay: 0.5s; }
.wd-nav-main > li:nth-child(5) { animation-delay: 0.6s; }
.wd-nav-main > li:nth-child(6) { animation-delay: 0.7s; }
.wd-nav-main > li:nth-child(7) { animation-delay: 0.8s; }

/* Các icon công cụ bên phải xuất hiện sau cùng */
.wd-header-search { animation-delay: 0.9s; }
.wd-header-wishlist { animation-delay: 1.0s; }
.wd-header-cart { animation-delay: 1.1s; }

/* 4. Loại bỏ các hiệu ứng Fade mặc định gây xung đột trên Woodmart */
.wd-tools-element > a, 
.wd-nav-main > li > a {
    transition: all 0.3s ease;
}

/* 5. Hiệu ứng cho Dropdown khi hover cũng slide từ trái sang để đồng bộ */
.wd-dropdown {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-20px) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    display: block !important;
}

.wd-event-hover:hover > .wd-dropdown,
.item-level-0:hover > .wd-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
}






















.pagination-custom {
    grid-column: 1 / -1; /* Trải dài hết các cột của grid sản phẩm */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
    padding: 20px 0;
}

.pagination-custom .page-node {
    display: inline-block;
    padding: 8px 15px;
    border: 1px solid #ddd;
    color: #333;
    text-decoration: none;
    transition: 0.3s;
}

.pagination-custom .current {
    background: #000;
    color: #fff;
    border-color: #000;
}

.pagination-custom a.page-node:hover {
    background: #f4f4f4;
}

.pagination-custom .nextPage svg {
    width: 14px;
    height: 14px;
    vertical-align: middle;
}

.pagination-custom .nextPage a {
    display: inline-block;
    padding: 8px 15px;
    border: 1px solid #ddd;
    color: #333;
}







.luxury-collection-wrapper {
    display: flex;
    gap: 40px;
    align-items: flex-start; /* Quan trọng để Sticky hoạt động */
    max-width: 1300px;
    margin: 0 auto;
    padding: 30px 15px;
}

/* --- FILTER SIDEBAR STICKY --- */
.luxury-filter-sidebar-sticky {
    flex: 0 0 280px;
    position: sticky;
    top: 100px; /* Cách mép trên cùng khi lướt (chỉnh theo chiều cao Header của bạn) */
    background: #FAF7F0; /* Màu kem nhạt như ảnh mẫu */
    padding: 25px;
    height: fit-content;
    max-height: 90vh; /* Giới hạn để không bị dài quá màn hình */
    overflow-y: auto; /* Nếu filter dài quá thì có thanh cuộn riêng */
    border-radius: 2px;
}

.filter-static-group { margin-bottom: 30px; }
.filter-heading {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 8px;
    letter-spacing: 1px;
}

/* Size grid */
.swatch-list-grid { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.swatch-box {
    border: 1px solid #ccc; width: 45px; height: 35px; display: flex;
    align-items: center; justify-content: center; cursor: pointer; background: #fff; font-size: 12px;
}
.swatch-box.active { background: #000; color: #fff; border-color: #000; }

/* Color list */
color-row { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    padding: 5px;
    cursor: pointer; 
    transition: 0.2s;
}
.color-row:hover { background: #eee; }
.color-row.active { font-weight: bold; }
.color-row.active .dot { border: 2px solid #000; box-shadow: 0 0 5px rgba(0,0,0,0.2); }

/* Nút Lọc */
.filter-action { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.btn-filter-main {
    background: #000; color: #fff; border: none; padding: 12px;
    font-weight: bold; cursor: pointer; transition: 0.3s;
}
.btn-filter-main:hover { background: #333; }
.btn-filter-reset {
    background: transparent; color: #666; border: 1px solid #ccc; padding: 8px;
    font-size: 12px; cursor: pointer;
}

/* Hiệu ứng loading */
#luxury-ajax-results.loading { opacity: 0.5; pointer-events: none; }

/* --- PRODUCT AREA --- */
.luxury-product-content { flex: 1; }
.product-grid-custom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* Hiệu ứng ảnh nét & Overlay lướt */
.product-image-area { position: relative; overflow: hidden; aspect-ratio: 2/3; }
.product-image-area img { width: 100%; height: 100%; object-fit: cover; }
.hover-img { position: absolute; top: 0; left: 0; opacity: 0; transition: 0.5s; }
.overlay-slide { 
    position: absolute; top: 0; left: -100%; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.4); transition: 0.5s; 
}

.product-card-item:hover .overlay-slide { left: 0; }
.product-card-item:hover .hover-img { opacity: 1; }
.btn-xem-them {
    position: absolute; top: 50%; left: -100%; width: 100%; 
    text-align: center; transition: 0.5s; z-index: 5; transform: translateY(-50%);
}
.btn-xem-them a { border: 1px solid #fff; color: #fff; padding: 10px 25px; text-decoration: none; }
.product-card-item:hover .btn-xem-them { left: 0; }

.product-detail { text-align: center; padding: 15px 0; }
.product-name a { color: #333; text-decoration: none; font-size: 13px; text-transform: uppercase; }
.product-price-val .amount {
    color: #000 !important;
    font-weight: bold;
}

/* 2. Giá hiện tại khi có khuyến mãi (nằm trong thẻ <ins>) - Đảm bảo màu đen */
.product-price-val ins .amount {
    color: #000 !important;
    text-decoration: none; /* Bỏ gạch chân nếu có */
}

/* 3. Giá cũ khi có khuyến mãi (nằm trong thẻ <del>) - Đổi sang màu C27A7A */
.product-price-val del .amount {
    color: #C27A7A !important;
    font-weight: normal; /* Thường giá cũ để font mảnh hơn */
    margin-right: 8px; /* Tạo khoảng cách với giá mới */
}

/* Tùy chỉnh thêm để giá tiền hiển thị sạch sẽ */
.product-price-val del {
    text-decoration: line-through;
    opacity: 0.8;
}

.product-price-val ins {
    text-decoration: none;
}

/* Mobile */
@media (max-width: 991px) {
    .luxury-collection-wrapper { flex-direction: column; }
    .luxury-filter-sidebar-sticky { position: static; width: 100%; flex: none; margin-bottom: 20px; }
    .product-grid-custom { grid-template-columns: repeat(2, 1fr); }
}























/* Tùy chỉnh Pagination (Dấu chấm) */
.luxury-slider.owl-theme .owl-dots {
    margin-top: -40px !important;
    text-align: center;
    line-height: 1;
}

.luxury-slider.owl-theme .owl-dot {
    outline: none;
}

.luxury-slider.owl-theme .owl-dot span {
    width: 10px !important;
    height: 10px !important;
    margin: 5px 6px !important;
    background: #D6D6D6 !important; /* Màu chưa active */
    display: block;
    transition: all 0.3s ease;
    border-radius: 0 !important; /* Biến thành hình vuông */
}

/* Hiệu ứng khi dấu chấm Active (Thanh ngang dài) */
.luxury-slider.owl-theme .owl-dot.active span {
    width: 35px !important; /* Kéo dài ra */
    background: #a68a58 !important; /* Màu vàng Luxury của bạn */
}

/* Loại bỏ các đoạn code cũ của nút Nav */
.slider-nav-btn { display: none !important; }

/* Giữ nguyên các định dạng Product Item của bạn phía dưới... */
.luxury-slider-wrapper { position: relative; padding: 20px 0; }
.pd-left5 { padding: 0 5px; }
.product-item-info { background-color: #F7F4EA; padding: 15px 5px; min-height: 100px; }
/* ... (Phần CSS hover màng đen và button giữ nguyên như cũ) */


.luxury-slider-wrapper {
    position: relative;
    padding: 0 10px;
}

/* Ẩn scrollbar mặc định nhưng vẫn giữ tính năng cuộn */
.luxury-slider::-webkit-scrollbar {
    display: none;
}
.luxury-slider {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Định dạng nút mũi tên */
.slider-nav-btn {
    position: absolute;
    top: 40%; /* Căn giữa theo phần ảnh sản phẩm */
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ddd;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    font-size: 18px;
}

.slider-nav-btn:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

.slider-nav-btn.prev {
    left: -15px;
}

.slider-nav-btn.next {
    right: -15px;
}

/* Ẩn nút trên mobile vì người dùng thường vuốt tay trực tiếp */
@media (max-width: 768px) {
    .slider-nav-btn {
        display: none;
    }
    .luxury-slider-wrapper {
        padding: 0;
    }
}
/* Layout & Grid - Giữ nguyên của bạn */
.mg-left-5 { margin: 0 -5px; }
.pd-left5 { padding: 0 5px; box-sizing: border-box; }

.luxury-slider {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0; 
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.owl-item-custom {
    flex: 0 0 25%; 
    min-width: 25%;
    scroll-snap-align: start;
}

@media (max-width: 768px) {
    .owl-item-custom { flex: 0 0 50%; min-width: 50%; }
}

.product-item {
    position: relative;
    background: #fff;
    margin-bottom: 20px;
}

.product-img {
    position: relative;
    overflow: hidden; /* Cực kỳ quan trọng để ẩn màng đen khi ở ngoài */
    aspect-ratio: 2/3; 
}

/* SỬA ĐỔI: Lớp màng đen lướt từ trái sang */
.product-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%; /* Đẩy hẳn sang trái */
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 1; /* Để sẵn opacity */
    transition: left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Cùng tốc độ với nút */
    z-index: 2;
}

.product-item:hover .product-img::before {
    left: 0; /* Trượt vào phủ kín ảnh */
}

.product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-img .img-loop {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    transition: opacity 0.6s ease;
}

.product-item:hover .img-loop {
    opacity: 1;
}

/* Nút XEM THÊM - Giữ nguyên logic trượt trái sang phải */
.product-actions {
    position: absolute;
    top: 50%;
    left: -100%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 4;
}

.product-item:hover .product-actions {
    left: 0;
    opacity: 1;
    visibility: visible;
}

.product-actions a {
    display: inline-block;
    text-transform: uppercase;
    font-size: 13px;
    color: #fff;
    letter-spacing: 2px;
    text-decoration: none;
    font-weight: 600;
    border: 1px solid #fff;
    padding: 10px 25px;
    transition: all 0.3s ease;
}

.product-actions a:hover {
    background: #fff;
    color: #000 !important;
}

/* Khống chế tiêu đề sản phẩm */
.product-title {
    padding: 0 10px; /* Tạo khoảng cách 2 bên */
    margin-bottom: 5px;
    
    /* Tạo chiều cao cố định cho 2 dòng để các card luôn bằng nhau */
    min-height: 40px; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-title a {
    color: #333;
    font-size: 13px;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 1.5; /* Khoảng cách dòng */
    
    /* Kỹ thuật giới hạn 2 dòng và tạo dấu ... */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Số dòng tối đa */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

/* Đảm bảo phần thông tin bên dưới luôn có chiều cao cố định */
.product-item-info {
    background-color: #F7F4EA;
    padding: 15px 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100px; /* Điều chỉnh tùy theo độ dài giá tiền của bạn */
}
/* Tùy chỉnh màu sắc giá tiền */
.product-price-home { 
    margin-top: 8px; 
    font-size: 14px; 
    font-weight: bold; 
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
}

/* Giá mới (Giá hiện tại) */
.product-price-home ins, 
.product-price-home .woocommerce-Price-amount.amount { 
    color: #000; 
    text-decoration: none; 
		font-size: 1.2em;
}

/* Giá cũ (Giá gạch ngang) */
.product-price-home del, 
.product-price-home del .woocommerce-Price-amount.amount { 
    color: #C27A7A; 
    font-weight: normal; 
    font-size: 1em;
}
.luxury-slider::-webkit-scrollbar { display: none; }

























/* 1. Thiết lập Grid Layout - Chia 2 hàng 3 cột bằng nhau */
.special-solutions-grid {
    list-style: none;
    padding: 0;
    max-width: 1600px; /* Tăng nhẹ độ rộng để tạo cảm giác thoáng đãng */
    margin: 50px auto;
    display: grid;
    /* Tạo 3 cột bằng nhau tuyệt đối */
    grid-template-columns: repeat(3, 1fr); 
    /* Tạo 2 hàng với chiều cao cố định */
    grid-template-rows: repeat(2, 350px); 
		align-items: stretch; /* Buộc các ô phải dài bằng nhau */
    gap: 20px; /* Khoảng cách giữa các ô */
}

/* 2. Reset lại vị trí Grid (Tất cả các ô tự động xếp vào 3 cột) */
.special-solutions-grid li {
    height: 100%;
    position: relative;
    overflow: hidden;
    background: #000;
}

/* 3. Hiệu ứng Ảnh (Zoom chậm kiểu Lookbook) */
.solution-item, .image-wrapper { 
    height: 100% !important; 
    width: 100% !important; 
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Zoom rất chậm và mượt trong 3 giây */
    transition: transform 3s cubic-bezier(0.25, 1, 0.5, 1); 
}

.special-solutions-grid li:hover img {
    transform: scale(1.1);
}

/* 4. Lớp phủ (Overlay) tinh tế */
.default-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25); /* Lớp phủ khói nhẹ */
    z-index: 1;
    transition: background 0.8s ease;
}

.special-solutions-grid li:hover .default-overlay {
    background: rgba(0, 0, 0, 0.5); /* Tối dần để làm nổi bật chữ trắng */
}

/* 5. Khối nội dung trình bày kiểu Tạp chí */
.description-box {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;
    text-align: center;
    padding: 30px;
    z-index: 3;
}

/* Tên danh mục: Mảnh - Rộng - Sang trọng */
.solution-name {
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 200 !important;
    text-transform: uppercase;
    letter-spacing: 6px !important; /* Khoảng cách chữ đặc trưng của hàng hiệu */
    margin: 0;
    padding-bottom: 15px;
    position: relative;
}

/* Đường gạch ngang mảnh khảnh khi hover */
.solution-name::after {
    content: "";
    position: absolute;
    bottom: 0; 
    left: 50%; 
    width: 40px; 
    height: 1px;
    background: #fff;
    transform: translateX(-50%) scaleX(0);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.special-solutions-grid li:hover .solution-name::after {
    transform: translateX(-50%) scaleX(1);
}

/* Mô tả sản phẩm (Hiện lên khi hover) */
.solution-docs {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px !important;
    line-height: 1.6;
    max-width: 90%;
    margin-top: 15px;
    font-weight: 300;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.7s ease;
    /* Giới hạn 2 dòng để đều layout */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Nút bấm (Minimalist Button) */
.slide-more-btn {
    display: inline-block;
    margin-top: 20px;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.5);
    padding: 10px 30px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-decoration: none;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.7s ease 0.1s;
}

.slide-more-btn:hover {
    background: #fff;
    color: #000 !important;
}

/* 6. Hiệu ứng Hover tổng thể */
.special-solutions-grid li:hover .solution-docs, 
.special-solutions-grid li:hover .slide-more-btn {
    opacity: 1;
    transform: translateY(0);
}

/* 7. Responsive cho Mobile (Xếp 1 cột) */
@media (max-width: 991px) {
    .special-solutions-grid {
        grid-template-columns: repeat(2, 1fr); /* Tablet chia 2 cột */
        grid-template-rows: auto;
    }
}

@media (max-width: 768px) {
    .special-solutions-grid {
        grid-template-columns: 1fr; /* Mobile 1 cột */
        grid-template-rows: auto;
    }
    .special-solutions-grid li {
        height: 350px;
    }
}










/* THIẾT LẬP KHOẢNG CÁCH GIỮA CÁC CARD (GRID) */

/* 1. Đối với danh sách sản phẩm */
.products.wd-grid-g {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 15px !important;                             /* Khoảng cách 15px giống hệt home-product-grid */
    border: none !important;
    margin: 0 !important;
}

/* 2. Responsive cho Mobile và Tablet */
@media (max-width: 1024px) {
    .products.wd-grid-g {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 cột trên điện thoại */
        gap: 20px !important;                             /* Khoảng cách 10px giống hệt home-product-grid */
    }
}

/* Đảm bảo khung bao ngoài không có border gây lệch khoảng cách */
.wd-product {
    margin: 0 !important;
}






















/* ============================================================
   HOME PRODUCT GRID - LUXURY 4-COLUMN LAYOUT
   ============================================================ */

/* ============================================================
   HOME PRODUCT GRID - CẤU HÌNH FULL KHUNG HÌNH 1024x747
   ============================================================ */

/* 1. LÀM CARD TO RA */

.home-product-grid .products.wd-grid-g {

    border: none !important; 

    gap: 15px !important; 

    margin: 0 !important;

    display: grid !important;

    grid-template-columns: repeat(4, 1fr) !important; 

}



@media (max-width: 1024px) {

    .home-product-grid .products.wd-grid-g {

        grid-template-columns: repeat(2, 1fr) !important;

        gap: 10px !important;

    }

}



.home-product-grid .product-grid-item {

    border: none !important; 

    box-shadow: none !important;

    padding: 0 !important; 

}



.home-product-grid .product-grid-item .product-wrapper {

    border: none !important;

    box-shadow: none !important;

    background: transparent !important;

    padding: 0 !important;

}



/* 2. HÌNH ẢNH: Tỉ lệ 3:4 */

.home-product-grid .product-element-top {

    margin-bottom: 12px !important;

    border-radius: 0px !important; 

    overflow: hidden;

}



.home-product-grid .product-image-link img {

    aspect-ratio: 5 / 6 !important; 

    object-fit: cover !important; 

    width: 100% !important;

}



/* 3. THÔNG TIN SẢN PHẨM & NÚT GIỎ HÀNG */

.home-product-grid .product-element-bottom {

    display: flex !important;

    flex-direction: column !important;

    text-align: left !important;

    padding: 0 !important;

    position: relative;

}



/* TẠO HÀNG NGANG CHO GIÁ VÀ NÚT */

.home-product-grid .product-element-bottom > .price {

    display: flex !important;

    flex-direction: row-reverse !important;

    justify-content: flex-end;

    align-items: center;

    gap: 10px;

    margin-bottom: 4px !important;

    width: 100%;

    order: 1 !important;

}



/* HIỂN THỊ NÚT GIỎ HÀNG BÊN PHẢI GIÁ */

.home-product-grid .wd-buttons {

    display: block !important; /* Mở lại hiển thị */

    position: absolute !important;

    right: 0;

    top: 0;

    height: 24px;

    order: 1 !important;

    z-index: 10;

}



/* 1. HIỂN THỊ NÚT WISHLIST VÀ GIỮ LẠI GIỎ HÀNG */

.home-product-grid .wd-buttons > div:not(.wd-add-cart-btn):not(.wd-wishlist-btn) {

    display: none !important;

}



/* 2. ĐỊNH VỊ CỤM NÚT (BOX CHỨA) */

.home-product-grid .wd-buttons {

    display: block !important;

    position: absolute !important;

    top: 15px !important;  

    right: 20px !important; 

    left: auto !important;

    bottom: auto !important;

    z-index: 30 !important;

    opacity: 1 !important;

    visibility: visible !important;

}



/* 3. TÙY CHỈNH NÚT WISHLIST MÀU HỒNG ĐẤT */

.home-product-grid .wd-wishlist-btn a {

    background-color: #ffffff !important; /* Màu hồng đất */

    color: #C27A7A !important;            /* Icon màu trắng */

    width: 32px !important;

    height: 32px !important;

    border-radius: 50% !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    box-shadow: 0 3px 10px rgba(0,0,0,0.15) !important;

    transition: all 0.3s ease !important;

}



/* Hiệu ứng khi di chuột vào (hover) */

.home-product-grid .wd-wishlist-btn a:hover {

    background-color: #C27A7A !important; /* Hồng đất đậm hơn chút */

color: #ffffff !important;

    transform: scale(1.1);

}



/* 4. ẨN CHỮ "ADD TO WISHLIST" ĐỂ CHỈ HIỆN ICON TRÒN */

.home-product-grid .wd-wishlist-btn a span {

    display: none !important;

}



/* 5. NẾU BẠN MUỐN NÚT GIỎ HÀNG CŨNG CÁCH RA (Tùy chọn) */

/* Nếu nút giỏ hàng bị đè lên wishlist, chúng ta tạo khoảng cách */

.home-product-grid .wd-buttons {

    display: flex !important;

    flex-direction: column !important;

    gap: 10px !important; /* Khoảng cách giữa nút giỏ hàng và wishlist */

}



/* Tùy chỉnh icon giỏ hàng nhỏ gọn tinh tế */

.home-product-grid .wd-add-cart-btn a {

    background: transparent !important;

    color: #333 !important;

    width: 30px !important;

    height: 30px !important;

}



.home-product-grid .wd-add-cart-btn a:before {

    font-size: 18px !important;

}



/* GIÁ TIỀN */

.home-product-grid .price ins,

.home-product-grid .price ins .amount,

.home-product-grid .price ins bdi,

.home-product-grid .price > .amount,

.home-product-grid .price > .amount bdi {

    color: #000000 !important;

    font-weight: 700 !important;

    font-size: 16px !important;

}



.home-product-grid .price del,

.home-product-grid .price del .amount,

.home-product-grid .price del bdi {

    color: #C27A7A !important;

    font-size: 12px !important;

    font-weight: 400 !important;

}



/* TÊN SẢN PHẨM */

.home-product-grid .wd-entities-title {

    order: 2 !important; 

    font-size: 14px !important; 

    line-height: 1.4 !important;

    margin: 0 !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 2 !important;

    -webkit-box-orient: vertical !important;

    overflow: hidden;

    min-height: 2.8em !important; 

}



.home-product-grid .wd-entities-title a {

    color: #666 !important; 

    font-weight: 400 !important;

}



/* 4. NHÃN GIẢM GIÁ */

.home-product-grid .product-labels {

    display: block !important;

}



.home-product-grid .product-labels .onsale {

    background-color: #C27A7A !important;

margin-top: 10px;

margin-left: 10px;

    font-size: 13px !important;

    border-radius: 50% !important;

}



/* 5. Loại bỏ các thành phần không cần thiết khác */

.home-product-grid .wd-product-stock,

.home-product-grid .wd-swatches-grid,

.home-product-grid .wd-product-grid-slider-pagin { 

    display: none !important;

}




.view-more-container {
    text-align: center;
    margin: 0px 0;
}

.btn-view-more-slide {
    position: relative;
    display: inline-block;
    height: 45px;
    line-height: 43px; /* Trừ đi 2px border để căn giữa chữ */
    padding: 0 60px;
    background-color: #F7F4EA; /* Nền ban đầu màu đỏ */
    color: #000 !important;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid #000;
    border-radius: 4px;
    overflow: hidden; /* Quan trọng: Để che dải màu trắng khi nó chưa chạy */
    transition: color 0.4s ease;
    z-index: 1;
}

/* Tạo dải màu trắng bằng phần tử giả ::before */
.btn-view-more-slide::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%; /* Nằm ẩn hoàn toàn bên trái */
    width: 100%;
    height: 100%;
    background-color: #C27A7A; /* Màu trắng sẽ chạy ra */
    transition: left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: -1; /* Nằm dưới lớp chữ */
}

/* Khi Hover: Dải màu chạy từ -100% về 0 */
.btn-view-more-slide:hover::before {
    left: 0;
}

/* Khi Hover: Đổi màu chữ sang đỏ */
.btn-view-more-slide:hover {
    color: #fff !important;
}

/* Đảm bảo chữ luôn nằm trên dải màu */
.btn-view-more-slide span {
    position: relative;
    z-index: 2;
}









/* 1. THÔNG BÁO (NOTICES) - Tinh tế hơn */
.woocommerce-message {
    border-top: 3px solid #BD7B7B !important;
    background-color: #fdf9f9 !important;
    color: #333 !important;
    font-weight: 500;
    padding: 15px 25px !important;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.woocommerce-message::before {
    color: #BD7B7B !important;
    position: absolute;
    transform: translateY(-50%);
    content: "\f00c"; /* Mã icon check của Woodmart, nếu lỗi hãy xóa dòng này */
    font-size: 18px;
}


/* 2. BẢNG GIỎ HÀNG (CART TABLE) */
.shop_table.cart {
    border-collapse: collapse !important;
    border: none !important;
    width: 100% !important;
    table-layout: fixed !important; /* Giữ cố định khung bảng để kiểm soát độ rộng cột */
}

* Thiết lập độ rộng cụ thể cho từng cột */
.shop_table.cart thead th.product-remove { width: 5%; }
.shop_table.cart thead th.product-thumbnail { width: 10%; }
.shop_table.cart thead th.product-name { width: 35%; } /* Thu nhỏ cột tên sản phẩm */
.shop_table.cart thead th.product-price { width: 15%; }
.shop_table.cart thead th.product-quantity { width: 20%; } /* Tăng diện tích cho cột số lượng */
.shop_table.cart thead th.product-subtotal { width: 15%; }

/* Tiêu đề bảng */
.shop_table.cart thead th {
    background-color: transparent !important;
    border-bottom: 2px solid #333 !important;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1.5px;
    padding: 15px 15px !important; /* Tăng padding ngang để tạo khoảng cách */
    color: #222;
    text-align: center !important; /* Căn giữa cho chuyên nghiệp */
}

/* Căn trái riêng cho cột Tên sản phẩm */
.shop_table.cart th.product-name, 
.shop_table.cart td.product-name {
    text-align: left !important;
}


/* Dòng sản phẩm */
.cart_item td {
    padding: 25px 15px !important; /* Tăng khoảng cách giữa các cột */
    border-bottom: 1px solid #eee !important;
    vertical-align: middle !important;
    text-align: center !important;
}

/* Ảnh sản phẩm */
.product-thumbnail img {
    max-width: 80px !important; /* Giảm nhẹ để dành chỗ cho khoảng trắng */
    height: auto;
    border-radius: 4px;
    border: 1px solid #f0f0f0;
}

.product-thumbnail img:hover {
    transform: scale(1.05);
}

.product-name {
    padding-right: 30px !important; /* Tạo khoảng trống ngăn cách với cột Giá */
}

.product-name a {
    font-weight: 600 !important;
    color: #222 !important;
    font-size: 14.5px !important; /* Giảm nhẹ size chữ để nhìn thanh thoát hơn */
    line-height: 1.4;
    display: block;
}

.product-name a:hover {
    color: #BD7B7B !important;
}

.variation {
    font-size: 12px !important;
    color: #888 !important;
    margin-top: 8px !important;
}

/* Giá và Tạm tính */
.product-price .amount, 
.product-subtotal .amount {
    font-weight: 600 !important;
    color: #333 !important;
    font-size: 16px;
}

.product-subtotal .amount {
    color: #BD7B7B !important; /* Điểm nhấn màu hồng đất */
}

/* 3. BỘ TĂNG GIẢM SỐ LƯỢNG (QUANTITY) */
.quantity {
    margin: 0 auto !important; /* Căn giữa bộ số lượng trong cột của nó */
    display: flex !important;
    justify-content: center;
    border: 1px solid #e0e0e0;
}

.quantity input.qty {
    border: none !important;
    font-weight: 600 !important;
    width: 45px !important;
}

.quantity .minus, .quantity .plus {
    background: transparent !important;
    border: none !important;
    font-size: 18px !important;
    width: 35px !important;
}

.quantity .minus:hover, .quantity .plus:hover {
    color: #BD7B7B !important;
}

/* 4. MÃ GIẢM GIÁ VÀ HÀNH ĐỘNG (COUPON & ACTIONS) */


.coupon.wd-coupon-form {
    display: flex;
    gap: 10px;
}

#coupon_code {
    border: 1px solid #ddd !important;
    border-radius: 0 !important;
    padding: 10px 20px !important;
    min-width: 200px;
}

button[name="apply_coupon"] {
    background-color: #333 !important; /* Màu đen sang trọng cho nút phụ */
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 25px !important;
    border-radius: 0 !important;
    transition: all 0.3s;
}

button[name="apply_coupon"]:hover {
    background-color: #BD7B7B !important;
}

/* 5. NÚT XÓA (REMOVE) */
.product-remove a.remove {
    font-size: 24px !important;
    color: #ccc !important;
    font-weight: 300 !important;
    line-height: 1 !important;
}

.product-remove a.remove:hover {
    color: #ff4d4d !important;
    background: transparent !important;
}

/* 6. RESPONSIVE CHO MOBILE */
@media (max-width: 768px) {
    .shop_table_responsive tr {
        border: 1px solid #eee !important;
        margin-bottom: 15px !important;
        display: block !important;
        border-radius: 8px;
    }
}

/* 1. TỔNG THỂ CÁC KHỐI (CONTAINER) - Tăng độ dày dặn và mềm mại */
.elementor-element-3328068, .elementor-element-f1323da {
    background: #fff !important;
    padding: 45px !important; /* Tăng padding để khối nhìn rộng rãi hơn */
    border-radius: 16px !important;
    border: 1px solid #f2f2f2 !important;
    margin-bottom: 40px !important;
    box-shadow: 0 15px 50px rgba(0,0,0,0.04) !important;
}





/* 3. THIẾT KẾ FORM NHẬP LIỆU & DROPDOWN - Đầy đặn và cao cấp */
.woocommerce-billing-fields__field-wrapper p label {
    font-weight: 600 !important;
    color: #444 !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 10px !important;
}
/* 1. Màu nền hồng đất và chữ trắng khi RE CHUỘT hoặc DI CHUYỂN phím mũi tên (Highlighted) */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #BD7B7B !important;
    color: #ffffff !important;
}

/* 2. Màu nền hồng đất và chữ trắng cho mục ĐANG ĐƯỢC CHỌN (Selected) */
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #BD7B7B !important;
    color: #ffffff !important;
}

/* 3. Tinh chỉnh khung tìm kiếm bên trong dropdown cho đồng bộ sang trọng */
.select2-search--dropdown .select2-search__field {
    border: 1px solid #ececec !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
}

/* 4. Tinh chỉnh thanh cuộn (scrollbar) để trông tinh tế hơn */
.select2-results__options::-webkit-scrollbar {
    width: 6px;
}

.select2-results__options::-webkit-scrollbar-thumb {
    background-color: #e0e0e0;
    border-radius: 10px;
}

/* 5. Khoảng cách các mục trong danh sách thoáng hơn */
.select2-results__option {
    padding: 10px 15px !important;
    transition: all 0.2s ease;
}
/* Chỉnh Input và Select2 đầy đặn hơn */
.woocommerce-billing-fields__field-wrapper input.input-text,
.woocommerce-billing-fields__field-wrapper select,
.select2-container--default .select2-selection--single {
    background-color: #f9f9f9 !important;
    border: 1.5px solid #ececec !important; /* Viền đậm hơn chút để rõ khối */
    border-radius: 8px !important;
    padding: 15px 20px !important; /* Tăng padding để form "đầy" */
    height: 55px !important;       /* Cố định chiều cao cho sang trọng */
    transition: all 0.3s ease;
}

/* Tinh chỉnh riêng cho chữ bên trong Dropdown Select2 */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 25px !important; /* Căn giữa chữ trong ô cao 55px */
    padding-left: 0 !important;
    color: #333 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 53px !important; /* Căn giữa mũi tên dropdown */
}

/* Hiệu ứng Focus */
.woocommerce-billing-fields__field-wrapper input.input-text:focus,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #C27A7A !important;
    background-color: #fff !important;
    box-shadow: 0 5px 15px rgba(189, 123, 123, 0.1) !important;
    outline: none !important;
}

/* 4. PHƯƠNG THỨC THANH TOÁN (PAYMENT METHODS) */
.wc_payment_method {
    margin-bottom: 20px !important;
    border: 1px solid #eee !important;
    border-radius: 12px !important;
    padding: 20px !important; /* Tăng độ dày cho box thanh toán */
}

.wc_payment_method:has(input:checked) {
    border-color: #BD7B7B !important;
    background-color: #fdfafb !important;
    box-shadow: 0 8px 20px rgba(189, 123, 123, 0.08) !important;
}

/* 5. NÚT ĐẶT HÀNG (PLACE ORDER BUTTON) */
#place_order {
    background-color: #BD7B7B !important;
    height: 65px !important; /* Nút to, đầy đặn và quyền lực */
    font-size: 16px !important;
    letter-spacing: 3px !important;
    border-radius: 12px !important; /* Chuyển từ bo tròn hẳn sang bo góc nhẹ cho hiện đại */
}

/* 6. TIÊU ĐỀ MỤC */
.woodmart-title-container.title {
    font-size: 22px !important;
    letter-spacing: 1.5px;
}

/* 1. Tổng thể container và Tiêu đề */
.elementor-element-855b10b {
    background: #ffffff !important;
    padding: 30px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important;
    border: 1px solid #f0f0f0 !important;
}

.woodmart-title-container.title {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    color: #333;
    margin-bottom: 25px !important;
}

/* 2. Thiết kế lại bảng Order Review */
.woocommerce-checkout-review-order-table {
    border-collapse: collapse !important;
    border: none !important;
}

.woocommerce-checkout-review-order-table thead th {
    background-color: #fcf8f8 !important; /* Hồng cực nhạt */
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    padding: 15px !important;
    border: none !important;
    color: #888;
}

/* 3. Dòng sản phẩm (Sạch sẽ và thoáng) */
.cart_item td {
    padding: 20px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.wd-checkout-prod-img img {
    border-radius: 8px;
    max-width: 80px !important;
    border: 1px solid #eee;
}

.cart-product-label {
    font-weight: 500 !important;
    color: #333 !important;
    font-size: 15px !important;
    line-height: 1.4;
}

/* 4. Bộ tăng giảm số lượng (Quantity) - Làm tối giản */
.quantity {
    margin-top: 10px;
    display: flex;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: fit-content;
    overflow: hidden;
}

.quantity input.qty {
    border: none !important;
    background: transparent !important;
    width: 40px !important;
}

.quantity .minus, .quantity .plus {
    background: #f9f9f9 !important;
    border: none !important;
    color: #333 !important;
    width: 30px !important;
}

/* 5. Khu vực Tổng tính toán (Footer) */
.shop_table tfoot tr th, 
.shop_table tfoot tr td {
    padding: 15px 0 !important;
    border: none !important;
    text-align: right !important;
}

.shop_table tfoot tr th {
    text-align: left !important;
    font-weight: 400;
    color: #666;
}

/* Dòng Tổng cộng nổi bật với màu hồng đất */
.order-total {
    border-top: 2px solid #BD7B7B !important;
}

.order-total th {
    font-size: 18px !important;
    color: #333 !important;
    font-weight: 600 !important;
}

.order-total .amount {
    font-size: 22px !important;
    color: #BD7B7B !important;
    font-weight: 700 !important;
}

/* 6. Thanh tiến trình Freeship (Shipping Progress Bar) */
.wd-free-progress-bar {
    background: #f9f9f9 !important;
    padding: 20px !important;
    border-radius: 8px !important;
    margin-top: 30px !important;
}

.wd-free-progress-bar .progress-msg {
    font-weight: 500 !important;
    color: #BD7B7B !important;
    margin-bottom: 10px !important;
    text-align: center;
}

.wd-free-progress-bar .progress-area {
    height: 6px !important;
    background-color: #eee !important;
    border-radius: 10px !important;
}

.wd-free-progress-bar .progress-bar {
    background-color: #BD7B7B !important; /* Màu hồng đất đồng bộ */
    border-radius: 10px !important;
}

/* 7. Nút xóa sản phẩm */
.wd-checkout-remove-btn:after {
    color: #ccc !important;
    transition: color 0.3s;
}

.wd-checkout-remove-btn:hover:after {
    color: #ff4d4d !important;
}

/* 1. Đổi màu nền của toàn bộ thanh tiêu đề */
.wd-page-title.page-title-default {
    background-color: #C27A7A !important; /* Màu hồng đất chủ đạo */
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    border: none !important;
}

/* 2. Đổi màu chữ của các bước (Shopping cart, Checkout, Order complete) */
.wd-checkout-steps li span, 
.wd-checkout-steps li a {
    color: rgba(255, 255, 255, 0.7) !important; /* Màu trắng mờ cho các bước không hoạt động */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 3. Đổi màu chữ và hiệu ứng cho bước đang hoạt động (Active) */
.wd-checkout-steps li.step-active a, 
.wd-checkout-steps li.step-active span {
    color: #ffffff !important; /* Trắng tinh khiết cho bước hiện tại */
    font-weight: 700;
}

/* 4. Tinh chỉnh dấu mũi tên/gạch nối giữa các bước thành màu trắng */
.wd-checkout-steps li:after {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* 5. Hiệu ứng hover cho các link */
.wd-checkout-steps li a:hover {
    color: #ffffff !important;
    opacity: 1;
}

/* 6. Loại bỏ các đường kẻ viền nếu có để nhìn sang trọng hơn */
.wd-page-title {
    box-shadow: none !important;
    border-bottom: none !important;
}

/* 1. Thiết lập các ô cao bằng nhau */
#carousel-5622 .wd-carousel-wrap {
    display: flex !important;
    padding-bottom: 25px;
}

#carousel-5622 .wd-testimon {
    background: #fff !important;
    border: 1.5px solid #e3c8c8 !important; 
    border-radius: 8px !important;
    padding: 30px !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    overflow: hidden; /* Để viền phụ không tràn ra ngoài */
}

/* 2. Hiệu ứng Hover */
#carousel-5622 .wd-testimon:hover {
    border-color: #BD7B7B !important;
    box-shadow: 0 15px 35px rgba(189, 123, 123, 0.15) !important;
    transform: translateY(-8px);
}

/* 3. Viền trang trí phụ bên trong */
#carousel-5622 .wd-testimon::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border: 1px solid rgba(189, 123, 123, 0.06);
    border-radius: 4px;
    pointer-events: none;
}

/* 4. CHỈNH SỬA ẢNH: To, rõ, không bị ép */
.wd-testimon-thumb {
    display: block;
    margin-bottom: 0px; /* Reset margin để căn chỉnh trong flex */
}

.wd-testimon-thumb img {
    width: 75px !important; /* Tăng kích thước ảnh to rõ */
    height: 75px !important; /* Chiều cao bằng chiều rộng */
    border-radius: 50% !important;
    border: 1.5px solid #BD7B7B !important;
    padding: 3px;
    background: #fff;
    /* QUAN TRỌNG: Chống ép ảnh */
    object-fit: cover !important; 
    object-position: center !important;
    display: block;
}

/* 5. Giới hạn 6 dòng văn bản */
.wd-testimon-text {
    flex-grow: 1;
    position: relative;
    z-index: 1;
}

.wd-testimon-text p {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #444 !important;
    font-style: italic;
    display: -webkit-box !important;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: calc(1.7em * 6);
    max-height: calc(1.7em * 6);
    margin-bottom: 0;
}

/* 6. Khu vực thông tin khách hàng phía dưới */
.wd-testimon-info {
    flex-shrink: 0;
    margin-top: 25px;
    border-top: 1px dashed rgba(189, 123, 123, 0.2);
    padding-top: 20px;
    display: flex;
    align-items: center; /* Căn giữa ảnh và tên theo chiều dọc */
    gap: 15px; /* Tạo khoảng cách giữa ảnh và chữ */
}

.wd-testimon-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    color: #222 !important;
    margin-bottom: 4px !important;
}

.star-rating {
    font-size: 10px !important;
    letter-spacing: 2px;
    color: #BD7B7B !important;
}

/* 7. Dấu ngoặc kép trang trí */
.wd-testimon-text:before {
    content: "“";
    font-family: serif;
    font-size: 80px;
    color: rgba(189, 123, 123, 0.08);
    position: absolute;
    top: -30px;
    right: -5px;
}

/* --- 8. FIX PAGINATION: BIẾN TRÒN THÀNH VUÔNG & THANH DÀI --- */
/* --- FIX TRIỆT ĐỂ: TẤT CẢ PHẢI LÀ HÌNH VUÔNG --- */

/* 1. Xóa bỏ cái vòng tròn bao quanh (pseudo-element) của Woodmart */
.wd-nav-pagin-item:after,
.wd-nav-pagin-item:before {
    display: none !important;
    content: none !important;
}

/* 2. Áp dụng cho TẤT CẢ các dấu chấm (Cả Active và Chưa Active) */
.wd-nav-pagin-item span {
    width: 10px !important;  /* Độ rộng ô vuông */
    height: 10px !important; /* Chiều cao ô vuông */
    border-radius: 0px !important; /* ÉP THÀNH HÌNH VUÔNG */
    background-color: #d6d6d6 !important; /* Màu xám cho cái chưa active */
    
    /* Các thuộc tính quan trọng để phá vỡ style mặc định của theme */
    clip-path: none !important; 
    -webkit-clip-path: none !important;
    transform: none !important;
    border: none !important;
    display: block !important;
    opacity: 1 !important;
    transition: all 0.4s ease !important;
}

/* 3. Style riêng cho dấu chấm ĐANG HOẠT ĐỘNG (Active) */
.wd-nav-pagin-item.wd-active span {
    width: 35px !important; /* Kéo dài thành thanh ngang */
    background-color: #a68a58 !important; /* Màu vàng Luxury */
    border-radius: 0px !important; /* Đảm bảo vẫn là hình vuông góc */
}

/* 4. Căn chỉnh lại hàng ngang chứa dấu chấm */
.wd-nav-pagin {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important; /* Khoảng cách giữa các ô */
    height: auto !important;
}

.wd-nav-pagin-item {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}




.products-bordered-grid  .product-wrapper {
    background-color: #fff !important;
    box-shadow: 0 10px 40px rgba(189, 123, 123, 0.12) !important;
    transform: translateY(-8px);
    z-index: 5;
    position: relative;
}
.wd-add-btn a:hover {
    background-color: #BD7B7B !important;
    color: white !important;
}

/* 8. Ẩn các icon so sánh/yêu thích khi không hover để giao diện sạch hơn */
.wd-buttons {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.wd-product:hover .wd-buttons {
    opacity: 1;
}


/* 1. Thiết kế lại tiêu đề "Sản phẩm tương tự" */
.related-products.with-title .element-title {
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 22px !important;
    font-weight: 500;
    margin-bottom: 40px;
    border-bottom: 2px solid #BD7B7B; /* Đường kẻ hồng đất dưới tiêu đề */
    display: inline-block;
    padding-bottom: 10px;
}

/* 2. Tạo đường kẻ ngăn cách giữa các sản phẩm (Border-Inline) */
.wd-carousel-item {
    border-right: 1px solid rgba(0, 0, 0, 0.05); /* Đường kẻ thanh mảnh bên phải */
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: 10px 15px;
}

.wd-carousel-item:last-child {
    border-right: none; /* Xóa đường kẻ ở sản phẩm cuối */
}

/* 3. Làm sạch khung sản phẩm */
.product-wrapper {
    background: transparent !important;
    transition: transform 0.4s ease;
}

/* Hiệu ứng khi hover vào từng sản phẩm */
.wd-carousel-item:hover {
    background: #fff;
    box-shadow: 0 10px 30px rgba(189, 123, 123, 0.1);
    transform: translateY(-8px);
    z-index: 10;
    border-right-color: transparent; /* Ẩn border khi nổi lên */
}

/* 4. Chỉnh sửa tên sản phẩm cho sang trọng */
.wd-entities-title a {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #333 !important;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.wd-entities-title a:hover {
    color: #BD7B7B !important;
}

/* 5. Thiết kế lại các chấm chuyển slide (Pagination dots) */
.wd-product-grid-slider-pagin .wd-product-grid-slider-dot {
    width: 6px !important;
    height: 6px !important;
    background-color: #ddd !important;
    border-radius: 50%;
    margin: 0 4px !important;
    transition: all 0.3s ease;
}

.wd-product-grid-slider-pagin .wd-product-grid-slider-dot.wd-active {
    background-color: #BD7B7B !important;
    transform: scale(1.3);
}

/* 6. Nút "Đọc tiếp" hoặc "Lựa chọn options" ẩn hiện tinh tế */
.wd-product-footer .wd-add-btn a {
    background-color: transparent !important;
    border: 1px solid #BD7B7B !important;
    color: #BD7B7B !important;
    text-transform: uppercase;
    font-size: 11px !important;
    letter-spacing: 1px;
    border-radius: 0; /* Vuông vức sang trọng */
    transition: all 0.3s ease;
}

.wd-product-footer .wd-add-btn a:hover {
    background-color: #BD7B7B !important;
    color: white !important;
}

/* 7. Ẩn bớt các icon không cần thiết để tối giản (tùy chọn) */
.wd-action-buttons {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.wd-carousel-item:hover .wd-action-buttons {
    opacity: 1;
}

/* 1. Container tổng quát */
.woocommerce-variation-add-to-cart {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px; /* Khoảng cách giữa các nút */
    align-items: stretch;
    margin-top: 20px;
}

/* 2. Thiết kế lại cụm số lượng (Quantity) */
.woocommerce-variation-add-to-cart .quantity {
    display: flex !important;
    background: #fcfcfc;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    height: 52px; /* Chiều cao cố định cho tất cả */
    padding: 0 5px;
}

.woocommerce-variation-add-to-cart .quantity input.btn {
    background: transparent !important;
    border: none !important;
    width: 35px !important;
    font-size: 18px !important;
    color: #222 !important;
    font-weight: 300 !important;
    cursor: pointer;
}

.woocommerce-variation-add-to-cart .quantity input.qty {
    border: none !important;
    width: 45px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    background: transparent !important;
    color: #222 !important;
}

/* 3. Nút Thêm vào giỏ hàng (Phong cách tối giản - Border) */
.single_add_to_cart_button {
    flex: 1; /* Tự động dãn */
    background-color: transparent !important;
    color: #BD7B7B !important; /* Màu hồng đất */
    border: 2px solid #BD7B7B !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px !important;
    height: 52px;
    transition: all 0.3s ease !important;
}

.single_add_to_cart_button:hover:not(:disabled) {
    background-color: #BD7B7B !important;
    color: white !important;
}

/* 4. Nút Buy Now (Phong cách nổi bật - Solid) */
.wd-buy-now-btn {
    display: none;
}


/* 5. Trạng thái khi chưa chọn biến thể (Disabled) */
.single_add_to_cart_button:disabled,
.woocommerce-variation-add-to-cart-disabled .wd-buy-now-btn {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(1);
    transform: none !important;
}

/* 6. Responsive cho điện thoại */
@media (max-width: 768px) {
    .woocommerce-variation-add-to-cart {
        flex-direction: column;
    }
    .woocommerce-variation-add-to-cart .quantity,
    .single_add_to_cart_button,
    .wd-buy-now-btn {
        width: 100% !important;
        flex: none;
    }
}



/* Đổi màu nền và màu chữ cho số đếm (Wishlist/Cart count) */
.wd-tools-count {
    background-color: #BD7B7B !important; /* Màu hồng đất */
    color: #ffffff !important;           /* Màu chữ trắng để nổi bật */
}

/* Nếu bạn muốn khi di chuột vào (hover) nó đổi sang màu đậm hơn một chút */
.wd-tools-element:hover .wd-tools-count {
    background-color: #E0C48F !important; /* Hồng đất đậm hơn */
}

/* Chỉnh màu giá hiện tại (giá sau khi giảm) */
.wrap-price ins .woocommerce-Price-amount {
    color: #BD7B7B !important; /* Màu hồng đất */
    font-weight: 700;          /* Làm đậm chữ để nổi bật */
    font-size: 1.1em;          /* Cho kích thước lớn hơn một chút nếu muốn */
    text-decoration: none;     /* Xóa bỏ gạch chân mặc định của thẻ ins */
}

/* Tùy chỉnh thêm: Chỉnh màu giá gốc (giá cũ) để trông hài hòa hơn */
.wrap-price del .woocommerce-Price-amount {
    color: #b5b5b5 !important; /* Màu xám nhạt cho giá cũ */
    font-size: 0.85em;         /* Cho nhỏ lại một chút */
}

/* Khoảng cách giữa giá cũ và giá mới */
.price ins {
    margin-left: 5px;
    text-decoration: none;
}
