body.global-color-scheme-light {
    --color-white: #FFF;
    --color-gray-100: rgba(0, 0, 0, 0.05);
    --color-gray-200: rgba(0, 0, 0, 0.1);
    --color-gray-300: rgba(0, 0, 0, 0.2);
    --color-gray-400: rgba(0, 0, 0, 0.35);
    --color-gray-500: rgba(0, 0, 0, 0.45);
    --color-gray-600: rgba(0, 0, 0, 0.55);
    --color-gray-700: rgba(0, 0, 0, 0.7);
    --color-gray-800: #333;
    --color-gray-900: #111;

    --bgcolor-black-rgb: 0, 0, 0;
    --bgcolor-white-rgb: 255, 255, 255;

    --bgcolor-white: #FFF;
    --bgcolor-gray-100: #f8f8f8;
    --bgcolor-gray-200: #f1f1f1;
    --bgcolor-gray-300: #e8e8e8;
    --bgcolor-gray-400: #ddd;

    --brdcolor-gray-200: rgba(0, 0, 0, 0.08);
    --brdcolor-gray-300: rgba(0, 0, 0, 0.12);
    --brdcolor-gray-400: rgba(0, 0, 0, 0.18);
    --brdcolor-gray-500: rgba(0, 0, 0, 0.25);

    --wd-text-color: rgba(0, 0, 0, 0.75);
    --wd-title-color: #111;
    --wd-widget-title-color: var(--wd-title-color);
    --wd-entities-title-color: #222;
    --wd-entities-title-color-hover: rgba(0, 0, 0, 0.6);

    --wd-link-color: #222;
    --wd-link-color-hover: #000;

    --wd-form-brd-color: rgba(0, 0, 0, 0.15);
    --wd-form-brd-color-focus: rgba(0, 0, 0, 0.25);
    --wd-form-placeholder-color: rgba(0, 0, 0, 0.45);

    --wd-main-bgcolor: #FFF;

    color: var(--wd-text-color);
}

body.global-color-scheme-dark {
    --color-white: #FFF;
    --color-gray-100: rgba(255, 255, 255, 0.1);
    --color-gray-200: rgba(255, 255, 255, 0.18);
    --color-gray-300: rgba(255, 255, 255, 0.28);
    --color-gray-400: rgba(255, 255, 255, 0.4);
    --color-gray-500: rgba(255, 255, 255, 0.55);
    --color-gray-600: rgba(255, 255, 255, 0.65);
    --color-gray-700: rgba(255, 255, 255, 0.75);
    --color-gray-800: #EEE;
    --color-gray-900: #FFF;

    --bgcolor-black-rgb: 0, 0, 0;
    --bgcolor-white-rgb: 255, 255, 255;

    --bgcolor-white: #0f0f0f;
    --bgcolor-gray-100: #141414;
    --bgcolor-gray-200: #1a1a1a;
    --bgcolor-gray-300: #1f1f1f;
    --bgcolor-gray-400: #262626;

    --brdcolor-gray-200: rgba(255, 255, 255, 0.08);
    --brdcolor-gray-300: rgba(255, 255, 255, 0.12);
    --brdcolor-gray-400: rgba(255, 255, 255, 0.18);
    --brdcolor-gray-500: rgba(255, 255, 255, 0.25);

    --wd-text-color: rgba(255, 255, 255, 0.75);
    --wd-title-color: #FFF;
    --wd-entities-title-color: #FFF;
    --wd-entities-title-color-hover: rgba(255, 255, 255, 0.7);

    --wd-link-color: #EEE;
    --wd-link-color-hover: #FFF;

    --wd-form-brd-color: rgba(255, 255, 255, 0.15);
    --wd-form-brd-color-focus: rgba(255, 255, 255, 0.25);
    --wd-form-placeholder-color: rgba(255, 255, 255, 0.45);

    color: var(--wd-text-color);
}

/* =========================================================
   LIGHT THEME – WOODMART + ELEMENTOR + WOOCOMMERCE
   Tone: #FFFFFF / #F5F5F5 / #E8E8E8
   ========================================================= */

/* ---------------------------------------------------------
   1. NỀN TỔNG WEBSITE
--------------------------------------------------------- */
html,
.wrapper,
.page-wrapper,
#main-content {
    background-color: #FFFFFF !important;
}

/* .site-content {
    background-color: #F5F5F5 !important;
} */


/* ---------------------------------------------------------
   2. NỀN HEADER + MENU
--------------------------------------------------------- */
/* header,
.navbar,
.wd-header-main,
.wd-header-nav,
.mobile-nav,
.mobile-nav .menu,
.mobile-nav .wd-nav {
    background-color: #FFFFFF !important;
} */

.whb-general-header {
    background-color: rgb(250 250 252) !important;
}

.wd-tools-element.wd-design-7>a>:is(.wd-tools-inner, .wd-tools-icon) {
    background-color: #dfdfdf !important;
}


/* ---------------------------------------------------------
   3. NỀN FOOTER
--------------------------------------------------------- */
footer,
.footer-container,
.footer-sidebar {
    background-color: #FFFFFF !important;
}


/* ---------------------------------------------------------
   4. TEXT MÀU ĐEN TOÀN SITE
--------------------------------------------------------- */
p,
span,
h1, h2, h3, h4, h5, h6,
a,
.wd-heading,
.elementor-widget,
.elementor-widget-container,
.woocommerce-product-details__short-description,
.product_meta {
    color: #2c2c2c !important;
}

.banner-title,
.product-labels span,
.wd-add-btn span,
.banner-btn-wrapper span {
    color: #fff !important;
}


/* ---------------------------------------------------------
   5. LINK HOVER
--------------------------------------------------------- */
a:hover {
    color: #000000 !important;
}


/* ---------------------------------------------------------
   6. BORDER COLOR
--------------------------------------------------------- */
*, *:before, *:after {
    border-color: #E8E8E8 !important;
}


/* ---------------------------------------------------------
   7. FORM FIELDS
--------------------------------------------------------- */
input,
textarea,
select {
    background-color: #FFFFFF !important;
    color: #2c2c2c !important;
    border-color: #E8E8E8 !important;
}

input:focus,
textarea:focus,
select:focus {
    background-color: #F5F5F5 !important;
    border-color: #2c2c2c !important;
}

input::placeholder,
textarea::placeholder {
    color: #2c2c2c;
}


/* ---------------------------------------------------------
   8. BUTTON
--------------------------------------------------------- */
button,
.wd-btn,
.btn,
.single_add_to_cart_button,
.add_to_cart_button,
.product_type_variable,
.product_type_simple,
.wd-sticky-btn-cart .button {
    color: #ffff !important;
    /* background-color: #F5F5F5 !important;
    border: 1px solid #E8E8E8 !important; */
}

/* button:hover,
.wd-btn:hover,
.btn:hover,
.single_add_to_cart_button:hover,
.add_to_cart_button:hover {
    background-color: #E8E8E8 !important;
} */


/* ---------------------------------------------------------
   9. SHOP PAGE – GRID
--------------------------------------------------------- */
.product-grid-item,
.product-grid-item .product-wrapper,
.product-grid-item .product-element-top,
.product-grid-item .product-info {
    background-color: #FFFFFF !important;
}

.product-grid-item:hover {
    background-color: #F5F5F5 !important;
}


/* ---------------------------------------------------------
   10. SINGLE PRODUCT PAGE
--------------------------------------------------------- */

/* Xóa background Elementor template */
.elementor-1055 [class*="elementor-element"] {
    background-color: transparent !important;
}

.elementor-1055 .elementor-element.elementor-element-3e3eea0,
.elementor-1055 .elementor-element.elementor-element-3e3eea0 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: transparent !important;
}

/* Product gallery */
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image,
.single-product .wd-carousel-container,
.single-product .wd-carousel-item {
    background-color: transparent !important;
}

/* Thumbnail */
.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
    background-color: #F5F5F5 !important;
    border: 1px solid #E8E8E8 !important;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active {
    border-color: #2c2c2c !important;
}

/* Title, price, summary */
.single-product .product_title,
.single-product .price,
.single-product .summary,
.title {
    color: #2c2c2c !important;
}

/* Stock */
.single-product p.stock,
.wd-product-stock {
    color: #28a745 !important;
}

.single-product p.stock:before {
    color: #28a745 !important;
    filter: none;
}

/* Product meta */
.single-product .product_meta,
.single-product .product_meta a {
    color: #666666 !important;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E8E8E8 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: #666666 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #2c2c2c !important;
    border-color: #2c2c2c !important;
}

.woocommerce div.product .woocommerce-tabs .panel {
    background: #FFFFFF !important;
    color: #2c2c2c !important;
}

/* Variation swatches */
.single-product .variations td,
.single-product .variations label {
    color: #2c2c2c !important;
}

.single-product .wd-swatch {
    background: #F5F5F5 !important;
    border: 1px solid #E8E8E8 !important;
}

.single-product .wd-swatch.selected {
    border-color: #2c2c2c !important;
}

/* Breadcrumb */
.wd-breadcrumbs,
.wd-breadcrumbs a {
    color: #666666 !important;
}

.wd-breadcrumbs a:hover {
    color: #2c2c2c !important;
}

/* Related products */
.single-product .related,
.single-product .upsells {
    background: #FFFFFF !important;
}

.single-product .product-grid-item {
    background: #F5F5F5 !important;
    border: 1px solid #E8E8E8 !important;
}

.single-product .product-grid-item .product-title a {
    color: #2c2c2c !important;
}


/* ---------------------------------------------------------
   11. BLOG
--------------------------------------------------------- */
/* .blog article,
.blog #main-content,
.single-post article,
.single-post #main-content {
    background-color: #FFFFFF !important;
    color: #2c2c2c !important;
}

.blog article:hover {
    background-color: #F5F5F5 !important;
} */

.blog-design-meta-image.blog-style-bg .wd-post-inner {
    background-color: #f7f7f7 !important;
}


/* ---------------------------------------------------------
   12. WIDGETS
--------------------------------------------------------- */
.sidebar-container {
    background-color: transparent;
    color: #2c2c2c !important;
}

.elementor-10763 .elementor-element.elementor-element-8e522a5:not(.elementor-motion-effects-element-type-background),
.elementor-10763 .elementor-element.elementor-element-8e522a5>.elementor-motion-effects-container>.elementor-motion-effects-layer {
    background-image: linear-gradient(160deg, #0000000d 61%, #333333 90%) !important;
    /* background-image: linear-gradient(54deg, #000000 14%, #00000029 88%) !important; */
}

/* ---------------------------------------------------------
   13. SVG ICONS → BLACK
--------------------------------------------------------- */
svg,
.wd-icon svg,
.wd-action-btn svg,
.wd-nav-icon svg {
    fill: #2c2c2c !important;
    stroke: #2c2c2c !important;
}

.wd-product.wd-hover-fw-button .wd-add-btn>a:hover {
    color: #fff !important;
}

#fc-floating-contacts svg {
    filter: none !important;
    stroke: none !important;
}


/* ---------------------------------------------------------
   14. ICON BACKGROUND (arrow/menu/close…)
--------------------------------------------------------- */
.wd-arrow,
.owl-prev,
.owl-next,
.menu-opener,
.close-side,
.slick-arrow {
    filter: none !important;
}


/* ---------------------------------------------------------
   15. SLIDER DOTS
--------------------------------------------------------- */
.slick-dots li button {
    background-color: #E8E8E8 !important;
}

.slick-dots li.slick-active button {
    background-color: #2c2c2c !important;
}


/* ---------------------------------------------------------
   16. CART + CHECKOUT
--------------------------------------------------------- */
.woocommerce-cart table,
.woocommerce-checkout,
.woocommerce-info,
.woocommerce-message,
.cart_totals,
.woocommerce-error {
    background-color: transparent !important;
    color: #2c2c2c !important;
}


/* ---------------------------------------------------------
   17. POPUP
--------------------------------------------------------- */
.wd-popup,
.mfp-content,
.mfp-wrap {
    background-color: #FFFFFF !important;
}


/* ---------------------------------------------------------
   18. ELEMENTOR SECTION RESET
--------------------------------------------------------- */
.elementor-section,
.elementor-column,
.elementor-widget-container {
    background-color: transparent !important;
}


/* ---------------------------------------------------------
   19. WOODMART WHITELIST FIX
--------------------------------------------------------- */
body body .color-scheme-light {
    background-color: transparent !important;
    color: #2c2c2c !important;
}


/* ---------------------------------------------------------
   20. ICON STOCK + MENU + IMG SVG
--------------------------------------------------------- */

/* Stock icon */
p.stock.wd-style-default.in-stock:before {
    color: #28a745 !important;
    filter: none !important;
}

/* Vertical menu arrow */
.wd-nav-vertical > li.menu-item-has-children > a:after {
    filter: none !important;
}

/* Category icon dạng <img>.svg */
.woodmart-nav-link img {
    filter: none !important;
}


/* ---------------------------------------------------------
   21. XÓA TOÀN BỘ DARK BACKGROUND BỊ BỎ XÓT
--------------------------------------------------------- */
.single-product [style*="background-color:#101010"],
.single-product [style*="background-color: #101010"],
.single-product [style*="background-color:#333"],
.single-product [style*="background-color: #333"] {
    background-color: transparent !important;
}


/* ---------------------------------------------------------
   22. FIX PRODUCT BG + HOVER + BORDER
--------------------------------------------------------- */

/* Chặn background tối Woodmart */
.wd-products-with-bg,
.wd-products-with-bg .wd-product {
    --wd-prod-bg: #FFFFFF !important;
    --wd-bordered-bg: #F5F5F5 !important;
}

/* Hover không bị đổi sang tối */
.wd-products-with-bg .wd-product:hover {
    --wd-prod-bg: #F5F5F5 !important;
    --wd-bordered-bg: #E8E8E8 !important;
}

/* Chặn hover hiệu ứng Woodmart */
.wd-product.wd-hover-fw-button:hover,
.wd-product.wd-hover-with-fade:hover {
    background-color: #F5F5F5 !important;
}


/* ---------------------------------------------------------
   23. CUSTOM ELEMENTOR BLOCKS
--------------------------------------------------------- */

/* Xóa background cho Elementor block 34936cb */
.elementor-10763 .elementor-element.elementor-element-34936cb,
.elementor-10763 .elementor-element.elementor-element-34936cb > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: transparent !important;
}

/* Đổi màu gradient fade cho collapsible content */
.elementor-10763 .elementor-element.elementor-element-8e842d3.wd-collapsible-content.e-con:not(.wd-opened)::after {
    color: rgba(255, 255, 255, 0.75) !important;
}

.wd-collapsible-content.elementor-column:not(.wd-opened)::after,
.wd-collapsible-content.e-con:not(.wd-opened)::after {
    color: rgba(255, 255, 255, 0.75) !important;
}


/* ---------------------------------------------------------
   24. SPECS WIDGET (Thông tin kỹ thuật)
--------------------------------------------------------- */
.specs-widget .dropdown-box {
    border: 1px solid #E8E8E8;
    background-color: #FFFFFF;
}

.specs-widget .dropdown-header {
    border-top: 1px solid #E8E8E8;
    border-left: 1px solid #E8E8E8;
    border-right: 1px solid #E8E8E8;
}

.specs-widget .dropdown-header:hover {
    background-color: #F5F5F5;
}

.specs-widget .dropdown-box table tr:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.wd-tools-count {
    color: #000000 !important;
}


/* ---------------------------------------------------------
   25. MENU DROPDOWN
--------------------------------------------------------- */

/* Nền cho dropdown của menu cha */
.menu-item-has-children .wd-dropdown-menu {
    background-color: #FFFFFF;
}

/* Nền cho container bên trong */
.menu-item-has-children .wd-dropdown-menu .container.wd-entry-content {
    background-color: #FFFFFF;
}

/* Hover item con */
.menu-item-has-children .wd-sub-menu > li:hover > a {
    background-color: rgba(0, 0, 0, 0.05);
    color: #2c2c2c;
}

.wd-toolbar .wd-tools-count,
.wd-toolbar .wd-cart-number {
    color: #2c2c2c !important;
}


/* ---------------------------------------------------------
   26. CART RIGHTSIDE
--------------------------------------------------------- */
.cart-widget-side .button.btn-cart {
    background-color: #28a745;
    
}

.cart-widget-side .button.btn-cart:hover {
    background-color: #23963c;
}

.cart-widget-side .button {
   color: #ffff !important;
}

.cart-widget-side .button:hover {
   color: #ffff !important;
}

.wd-side-hidden {
    background-color: #ffff !important
}

.cart-widget-side .woocommerce-mini-cart .mini_cart_item:hover {
    background-color: #54545414 !important;
}


/* ---------------------------------------------------------
   27. CHECKOUT
--------------------------------------------------------- */

/* Làm nền trong suốt cho container trong Checkout */
.elementor-element.elementor-element-9d6f1a7,
.elementor-element.elementor-element-695ea74,
.elementor-element.elementor-element-f57a155 {
    background-color: transparent !important;
}

#form-checkout {
    background-color: rgba(255, 255, 255, 1);
}

/* Style nút Đặt hàng */
#place_order.button.alt {
    color: #fff !important;
}

#place_order.button.alt:hover {
    background-color: #23963c !important;
}


.wd-checkout-steps span,
.wd-checkout-steps a,
.wc-proceed-to-checkout a {
    color: #fff !important;
}

/* ---------------------------------------------------------
   28. HOMEPAGE ELEMENTOR
--------------------------------------------------------- */
.elementor-1625 .elementor-element.elementor-element-35032e6:not(.elementor-motion-effects-element-type-background),
.elementor-1625 .elementor-element.elementor-element-35032e6 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-1625 .elementor-element.elementor-element-49d0e5d:not(.elementor-motion-effects-element-type-background),
.elementor-1625 .elementor-element.elementor-element-49d0e5d > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: transparent !important;
}


/* ---------------------------------------------------------
   29. COUNT-UP COLOR
--------------------------------------------------------- */
.countup h2 {
    color: #ff003a !important;
}


/* ---------------------------------------------------------
   30. SIDEBAR CATEGORY
--------------------------------------------------------- */
.elementor-widget-wd_sidebar .elementor-widget-container {
    background-color: #FFFFFF !important;
}

/* abc */

/* .wd-page-wrapper {
    position: relative;
    background-color: #ffffff !important;
} */

.site-logo img, 
.logo {
    filter: invert(1);
}

/* .wd-product.wd-hover-fw-button .wd-add-btn>a {

    background-color: rgb(28, 97, 231);;
} */


/* Cart info */

.quantity .btn {
    color: #2c2c2c !important;
}

#productDetailReadMoreBtn {
        background-color: #ffffff;
}

.wd-nav[class*="wd-style-"]>li:is(.wd-has-children, .menu-item-has-children)>a:after {
    color: #2c2c2c !important;
}

/* Search area */

.wd-suggestion,
.wd-scroll-content,
.wd-all-results {
	background-color: #fff !important;
}

.wd-suggestion .wd-entities-title {
    color: #000
}

/* Add to cart btn */
.wd-add-btn-replace .add-to-cart-loop:after {
    color: #fff;
}


/* label */
.discount-label-text,
.installment-label-text {
    color: #fff !important;
}


/* checkout form */
.select2-dropdown {
    background-color: #fff !important;
    color: black !important;
    border: 1px solid #aaa;
    border-radius: 4px;
    box-sizing: border-box;
    display: block;
    position: absolute;
    left: -100000px;
    width: 100%;
    z-index: 1051;
}

.select2-results__options,
.select2-selection,
.select2-selection__rendered,
.select2-search.select2-search--dropdown {
    background-color: #fff !important;
}

.select2-search.select2-search--dropdown {
    padding: 0 !important
}


@media (max-width: 767px) {
    .wd-tools-count {
        background-color: rgb(230 230 230) !important;
    }
}

.product-element-top {
    background: url('./img/lightmode-bg.jpg') center / cover no-repeat;
}

.wd-product {
    border-radius: 14px;
    border: 3px solid transparent;

    background:
        /* nền card */
        linear-gradient(#8f8f8f, #8f8f8f) padding-box,

        /* viền vàng + trắng highlight ở góc */
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f9f5dc 12%,
            #e8d28c 30%,
            #d4af37 50%,
            #e8d28c 70%,
            #f9f5dc 88%,
            #ffffff 100%
        ) border-box;

    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.05),
        0 8px 24px rgba(0, 0, 0, 0.08);
}