.elementor-490 .elementor-element.elementor-element-6355fbf{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--background-transition:0.3s;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#DFDFDF;--border-color:#DFDFDF;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-490 .elementor-element.elementor-element-6355fbf, .elementor-490 .elementor-element.elementor-element-6355fbf::before{--border-transition:0.3s;}.elementor-490 .elementor-element.elementor-element-e80fb2e{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-around;--background-transition:0.3s;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-490 .elementor-element.elementor-element-e80fb2e:not(.elementor-motion-effects-element-type-background), .elementor-490 .elementor-element.elementor-element-e80fb2e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-490 .elementor-element.elementor-element-e80fb2e, .elementor-490 .elementor-element.elementor-element-e80fb2e::before{--border-transition:0.3s;}.elementor-490 .elementor-element.elementor-element-e80fb2e.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-490 .elementor-element.elementor-element-cb69c1b{--display:flex;--background-transition:0.3s;}.elementor-490 .elementor-element.elementor-element-676d262 > .elementor-widget-container:hover{--e-transform-scale:1.02;}.elementor-490 .elementor-element.elementor-element-0b7bef0{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--background-transition:0.3s;}.elementor-490 .elementor-element.elementor-element-0b7bef0:not(.elementor-motion-effects-element-type-background), .elementor-490 .elementor-element.elementor-element-0b7bef0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F7F7F7;}.elementor-490 .elementor-element.elementor-element-0b7bef0, .elementor-490 .elementor-element.elementor-element-0b7bef0::before{--border-transition:0.3s;}.elementor-490 .elementor-element.elementor-element-38d7753 > .elementor-widget-container{margin:50px 0px 0px 50px;}.elementor-490 .elementor-element.elementor-element-5247786 > .elementor-widget-container{padding:0px 0px 0px 50px;}.elementor-490 .elementor-element.elementor-element-5247786 .cart button, .elementor-490 .elementor-element.elementor-element-5247786 .cart .button{transition:all 0.2s;}.woocommerce .elementor-490 .elementor-element.elementor-element-5247786 form.cart table.variations tr th, .woocommerce .elementor-490 .elementor-element.elementor-element-5247786 form.cart table.variations tr td{padding-top:calc( 0px/2 );padding-bottom:calc( 0px/2 );}.elementor-490 .elementor-element.elementor-element-3602224{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;}.elementor-490 .elementor-element.elementor-element-a533f92{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;--margin-top:80px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-490 .elementor-element.elementor-element-a8a1be7{text-align:center;}.elementor-490 .elementor-element.elementor-element-4964f6e .jet-woo-products .jet-woo-products__item{--columns:5;padding:0px 0px 0px 0px;}.elementor-490 .elementor-element.elementor-element-4964f6e .jet-woo-carousel .swiper-slide{--space-between:10px;}.elementor-490 .elementor-element.elementor-element-4964f6e .jet-woo-products:not(.swiper-wrapper){margin-right:-0px;margin-left:-0px;}.elementor-490 .elementor-element.elementor-element-4964f6e .jet-woo-products .jet-woo-product-thumbnail{border-style:solid;border-width:1px 1px 1px 1px;border-color:#E2E2E2;border-radius:5px 5px 5px 5px;order:1;}.elementor-490 .elementor-element.elementor-element-4964f6e .jet-woo-products .jet-woo-product-title, .elementor-490 .elementor-element.elementor-element-4964f6e .jet-woo-products .jet-woo-product-title a{font-size:17px;font-weight:600;}.elementor-490 .elementor-element.elementor-element-4964f6e .jet-woo-products .jet-woo-product-title a{color:#000000;}.elementor-490 .elementor-element.elementor-element-4964f6e .jet-woo-products .jet-woo-product-title{color:#000000;text-align:left;order:1;}.elementor-490 .elementor-element.elementor-element-4964f6e .jet-woo-products .jet-woo-product-badge{display:inline-flex;}.elementor-490 .elementor-element.elementor-element-4964f6e .jet-woo-products .jet-woo-product-badges{top:0px;bottom:auto;}.elementor-490 .elementor-element.elementor-element-4964f6e .jet-woo-products__not-found{text-align:center;}@media(max-width:767px){.elementor-490 .elementor-element.elementor-element-38d7753 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-490 .elementor-element.elementor-element-5247786{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-490 .elementor-element.elementor-element-5247786 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-490 .elementor-element.elementor-element-5247786.elementor-element{--align-self:stretch;}.elementor-490 .elementor-element.elementor-element-4964f6e .jet-woo-products .jet-woo-products__item{--columns:2;}.elementor-490 .elementor-element.elementor-element-4964f6e .jet-woo-products .jet-woo-product-title, .elementor-490 .elementor-element.elementor-element-4964f6e .jet-woo-products .jet-woo-product-title a{font-size:15px;}.elementor-490 .elementor-element.elementor-element-4964f6e .jet-woo-carousel .swiper-pagination{bottom:0px;top:auto;}}@media(min-width:768px){.elementor-490 .elementor-element.elementor-element-e80fb2e{--width:61.557%;}.elementor-490 .elementor-element.elementor-element-cb69c1b{--width:70%;}.elementor-490 .elementor-element.elementor-element-0b7bef0{--width:50%;}}/* Start custom CSS for woocommerce-product-add-to-cart, class: .elementor-element-5247786 */.woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th {
    border: 0;
    line-height: 2em;
    vertical-align: top;
    BACKGROUND: rgb(247, 247, 247)
}
:is(.elementor-widget-woocommerce-product-add-to-cart,.woocommerce div.product .elementor-widget-woocommerce-product-add-to-cart,.elementor-widget-wc-add-to-cart,.woocommerce div.product .elementor-widget-wc-add-to-cart) form.cart.variations_form .woocommerce-variation-add-to-cart, :is(.elementor-widget-woocommerce-product-add-to-cart,.woocommerce div.product .elementor-widget-woocommerce-product-add-to-cart,.elementor-widget-wc-add-to-cart,.woocommerce div.product .elementor-widget-wc-add-to-cart) form.cart:not(.grouped_form):not(.variations_form) {
    display: flex
;
    flex-wrap: nowrap;
    visibility: hidden;
}

table td, table th {
    border: 1px solid hsla(0, 0%, 50%, .502);
    line-height: 1.5;
    padding: 5px;
    vertical-align: top;
}
/*************************************************
 * 1. Ẩn nút "Xóa" mặc định
 *************************************************/
body.single-product a.reset_variations {
    display: none !important;
}

/*************************************************
 * 2. Layout chung cho grid màu
 *************************************************/
body.single-product .woo-variation-swatches .variable-items-wrapper {
    display: flex;
    flex-wrap: wrap;
    column-gap: 18px;
    row-gap: 18px;
}

/* Bỏ margin default của từng item */
body.single-product .woo-variation-swatches .variable-items-wrapper li.variable-item {
    margin: 0 !important;
}

/*************************************************
 * 3. Ô “+20 More” xuống 1 dòng riêng & làm giống Casio
 *************************************************/


/* Link bên trong “+20 More” */
body.single-product .woo-variation-swatches 
.variable-items-wrapper li.woo-variation-swatches-variable-item-more > a {
    display: flex;
    align-items: center;
    gap: 14px;

    width: 100%;
    padding: 12px 18px;

    border-radius: 999px;
    border: 1px solid #eaeaea;
    background: #ffffff;

    font-size: 14px;
    font-weight: 500;
    color: #222222;
    text-decoration: none;
    cursor: pointer;
}

/* Mũi tên bên phải giống kiểu Casio */
body.single-product .woo-variation-swatches 
.variable-items-wrapper li.woo-variation-swatches-variable-item-more > a::after {
    content: "›";
    font-size: 20px;
    color: #b5b5b5;
    margin-left: auto;
}

/*************************************************
 * 4. Bỏ tick, bỏ nền xanh – chỉ dùng viền để thể hiện đang chọn
 *************************************************/

/* Tắt mọi ::before / ::after của swatch (tick, overlay, v.v.) */
body.single-product .woo-variation-swatches 
.variable-items-wrapper li.variable-item::before,
body.single-product .woo-variation-swatches 
.variable-items-wrapper li.variable-item::after,
body.single-product .woo-variation-swatches 
.variable-items-wrapper li.variable-item .wvs-selected-checkmark {
    content: none !important;
    display: none !important;
    box-shadow: none !important;
    background: none !important;
}

/* Nội dung bên trong swatch luôn nền trắng, không shadow */
body.single-product .woo-variation-swatches 
.variable-items-wrapper li.variable-item .variable-item-contents {
    background: #ffffff !important;
    box-shadow: none !important;
    transition: border-color .2s ease, border-width .2s ease;
}

/* Viền bình thường */
body.single-product .woo-variation-swatches 
.variable-items-wrapper li.variable-item {
    border: 1px solid #e1e1e1 !important;
}

/* Hover */
body.single-product .woo-variation-swatches 
.variable-items-wrapper li.variable-item:hover {
    border-color: #999999 !important;
}

/* ĐANG CHỌN: chỉ viền đậm màu đen */
body.single-product .woo-variation-swatches 
.variable-items-wrapper li.variable-item.selected,
body.single-product .woo-variation-swatches 
.variable-items-wrapper li.variable-item[aria-checked="true"] {
    border-width: 2px !important;
    border-color: #000000 !important;
}


/* Khung nút */
li.woo-variation-swatches-variable-item-more > a {
    width: 300px !important;  /* Thu nhỏ đúng yêu cầu */
    max-width: 90%;
    padding: 14px 20px;
    border-radius: 999px;
    border: 1px solid #e1e1e1;
    background: #fff;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;

    font-size: 15px !important;
    font-weight: 500;
    color: #222 !important;
    text-decoration: none !important;
}

/* Mũi tên bên phải */
li.woo-variation-swatches-variable-item-more > a::after {
    content: "›";
    font-size: 22px;
    color: #c2c2c2;
    margin-left: auto;
}
/* Nút Xem thêm – text ở giữa, mũi tên bên phải */
li.woo-variation-swatches-variable-item-more {
    display: flex !important;
    justify-content: center !important;   /* căn giữa cái <a> */
    width: 100% !important;
    margin-top: 18px !important;
    list-style: none;
}

/* Khung nút */
li.woo-variation-swatches-variable-item-more > a {
    position: relative;              /* để đặt mũi tên absolute */
    width: 300px !important;         /* bạn có thể tăng lên 300–400 nếu muốn */
    max-width: 90%;
    padding: 14px 40px;              /* chừa chỗ bên phải cho mũi tên */
    border-radius: 999px;
    border: 1px solid #e1e1e1;
    background: #fff;

    display: flex !important;
    align-items: center;
    justify-content: center;         /* chữ đúng giữa ô */

    font-size: 15px !important;
    font-weight: 500;
    color: #222 !important;
    text-decoration: none !important;
}

/* Mũi tên bên phải */
li.woo-variation-swatches-variable-item-more > a::after {
    content: "›";
    position: absolute;
    right: 20px;                     /* cách mép phải 20px */
    font-size: 22px;
    color: #c2c2c2;
}

/* ======== GRID SWATCH RESPONSIVE ======== */

/* Desktop: 5 cột */
@media (min-width: 1024px) {
    body.single-product 
    .woo-variation-swatches .variable-items-wrapper li.variable-item {
        width: calc(20% - 15px) !important;   /* 100/5 = 20% */
    }
}

/* Tablet: 4 cột */
@media (min-width: 768px) and (max-width: 1023px) {
    body.single-product 
    .woo-variation-swatches .variable-items-wrapper li.variable-item {
        width: calc(25% - 12px) !important;   /* 100/4 = 25% */
    }
}

/* Mobile: 3 cột */
@media (max-width: 767px) {
    body.single-product 
    .woo-variation-swatches .variable-items-wrapper li.variable-item {
        width: calc(33.333% - 10px) !important;   /* 100/3 = 33.33% */
    }

    /* Nút Xem Thêm nằm 1 dòng riêng luôn */
    body.single-product 
    li.woo-variation-swatches-variable-item-more {
        width: 100% !important;
        order: 99;
        margin-top: 12px !important;
    }

    li.woo-variation-swatches-variable-item-more > a {
        width: 90% !important;
        margin: 0 auto !important;
    }
}

/* Ẩn cột label của bảng biến thể (MÀU SẮC : …) */
body.single-product table.variations td.label,
body.single-product table.variations th.label {
    display: none !important;
}/* End custom CSS */