.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-6355fbf.e-con{--flex-grow:0;--flex-shrink:0;}.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-7b462b3 > .elementor-widget-container{padding:50px 0px 0px 0px;}.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;
}
/* ================================
   CARNIVAL - Variation Swatches UI
   PC: 4 cột | Mobile: 2 cột
   Full width - căn đều 2 bên
================================ */

/* 1) Bắt đúng vùng variations */
.single-product .variations_form .woo-variation-swatches .variable-items-wrapper{
  /* grid full width */
  display: grid !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  /* PC 4 cột */
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

  /* căn đều 2 bên */
  justify-content: stretch !important;
  align-content: start !important;

  /* khoảng cách đều */
  gap: 14px !important;

  /* reset kiểu list */
  list-style: none !important;
}

/* Mobile 2 cột */
@media (max-width: 767px){
  .single-product .variations_form .woo-variation-swatches .variable-items-wrapper{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* 2) Mỗi item chiếm full ô grid */
.single-product .variations_form .woo-variation-swatches .variable-item{
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;

  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  background: #fff !important;
  overflow: hidden !important;

  box-shadow: 0 6px 18px rgba(0,0,0,.06) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

/* Hover */
.single-product .variations_form .woo-variation-swatches .variable-item:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.10) !important;
  border-color: rgba(0,0,0,.14) !important;
}

/* 3) Nội dung bên trong: fix lệch + ép chiều cao đẹp nhất */
.single-product .variations_form .woo-variation-swatches .variable-item .variable-item-contents{
  /* ép card theo tỷ lệ “ảnh đồng hồ” nhìn sang hơn vuông */
  aspect-ratio: 4 / 5 !important;   /* muốn vuông đổi thành 1/1 */
  padding: 12px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  line-height: 1 !important;
  box-sizing: border-box !important;
}

/* 4) Ảnh swatch: căn giữa + fit đẹp */
.single-product .variations_form .woo-variation-swatches .image-variable-item img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;

  object-fit: contain !important;
  object-position: center !important;

  margin: 0 !important;
}

/* 5) Selected: viền rõ + shadow sang */
.single-product .variations_form .woo-variation-swatches .variable-item.selected{
  border-color: rgba(0,0,0,.65) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.14) !important;
}

/* 6) Nếu plugin có set width/height kiểu inline, ép nó về auto */
.single-product .variations_form .woo-variation-swatches .variable-item,
.single-product .variations_form .woo-variation-swatches .variable-item *{
  max-width: 100% !important;
}

/* 7) Tránh bị căn trái do theme */
.single-product .variations_form .woo-variation-swatches{
  width: 100% !important;
}
.single-product .elementor-widget-container{
  width: 100% !important;
}/* End custom CSS */