/* Xóa đường kẻ ngang/dọc giữa các card do theme tạo */
.owl-item > .product,
ul.products > li.product,
ul.products > li.product-card {
    border-bottom: none !important;
}

.owl-item > .product::after,
ul.products > li.product::after,
ul.products > li.product-card::after {
    display: none !important;
}

/* ============================================================
   product-carousel — Base card
   ============================================================ */
.owl-item .product .product-inner,
.owl-item .product .product-item__inner {
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    outline: 1px solid #e8e8e8;
    outline-offset: -1px;
    transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                outline-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: box-shadow;
}

.owl-item .product:hover .product-inner,
.owl-item .product:hover .product-item__inner {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    outline-color: #fed700;
}

/* Image zoom */
.owl-item .product .product-loop-header img,
.owl-item .product .product-item__header img {
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.owl-item .product:hover .product-loop-header img,
.owl-item .product:hover .product-item__header img {
    transform: scale(1.06);
}

/* ============================================================
   Price: giá gốc (del) lên trên, giá sale (ins) xuống dưới
   ============================================================ */
.owl-item .product .electro-price {
    display: inline-flex;
    flex-direction: column-reverse;
    gap: 1px;
    min-height: 38px;
    justify-content: flex-end;
}

.owl-item .product .price ins {
    text-decoration: none;
    order: 1;
}

.owl-item .product .price ins .woocommerce-Price-amount bdi {
    font-weight: 700;
    color: #e53935;
}

.owl-item .product .price del {
    order: 2;
}

.owl-item .product .price del .woocommerce-Price-amount bdi {
    font-size: 11px;
    font-weight: 400;
    color: #aaa;
}

.owl-item .product .price > .woocommerce-Price-amount bdi {
    font-size: 15px;
    font-weight: 700;
    color: #e53935;
}

.owl-item .product .contact-price {
    font-size: 14px;
    font-weight: 700;
    color: #1565c0;
}

/* Add to cart — hover đổi vàng */
.owl-item .product:hover .add-to-cart-wrap .button.ajax_add_to_cart {
    background: #fed700 !important;
    color: #1a1a1a !important;
    transition: background 0.2s ease !important;
}

/* Cố định chiều cao tên sản phẩm */
.owl-item .product .woocommerce-loop-product__title {
    height: 2.4em !important;
    line-height: 1.2em !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    line-clamp: 2;
}

@media (max-width: 767px) {
    .owl-item > .product {
        padding: 4px;
    }
}

/* ============================================================
   product-card section (layout ngang)
   ============================================================ */
/*ul.products li.product-card .product-inner {*/
/*    border-radius: 10px;*/
/*    overflow: hidden;*/
/*    outline: 1px solid #e8e8e8;*/
/*    outline-offset: -1px;*/
/*    transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),*/
/*                outline-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);*/
/*    will-change: box-shadow;*/
/*    backface-visibility: hidden;*/
/*    -webkit-backface-visibility: hidden;*/
/*}*/

/*ul.products li.product-card:hover .product-inner {*/
/*    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);*/
/*    outline-color: #fed700;*/
/*}*/

/* Image zoom */
ul.products li.product-card .card-media-left {
    overflow: hidden;
}

ul.products li.product-card .card-media-left img {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

ul.products li.product-card:hover .card-media-left img {
    transform: scale(1.06) translateZ(0);
}

/*!* Add to cart hover *!*/
/*ul.products li.product-card:hover .add-to-cart-wrap .button.ajax_add_to_cart {*/
/*    background: #fed700 !important;*/
/*    color: #1a1a1a !important;*/
/*    transition: background 0.2s ease !important;*/
/*}*/

/* Bỏ hiệu ứng di chuyển sang phải của theme trên product-card */
ul.products li.product-card .hover-area {
    display: none !important;
}

/* Fix: theme đổi .product-inner sang position:absolute khi hover → gây dịch chuyển sang phải */
ul.products li.product-card .product-inner,
ul.products li.product-card:hover .product-inner {
    position: relative !important;
    min-height: 0 !important;
}

/* ============================================================
   Camera section — border, hover, image zoom
   ============================================================ */

/* Base: border xám bọc quanh card */
.products-8-1 ul.products li.product .product-inner {
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    outline: 1px solid #e8e8e8;
    outline-offset: -1px;
    position: relative;
    transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                outline-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: box-shadow;
}

/* Hover: border vàng + shadow, fix position:absolute và height của theme */
.products-8-1 ul.products li.product:hover .product-inner {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    outline-color: #fed700;
    position: relative !important;
    min-height: 0 !important;
    height: auto !important;
}

/* Fix: footer cần overflow visible để giá gốc (position:absolute) không bị clip */
.products-8-1 ul.products li.product .product-item__footer {
    overflow: visible !important;
}

/* Fix: price-add-to-cart — giữ layout gốc của theme, chỉ override height */
.products-8-1 ul.products li.product .price-add-to-cart {
    position: relative !important;
    height: auto !important;
    min-height: 2.571em !important;
    overflow: visible !important;
}

.products-8-1 ul.products li.product .price-add-to-cart .price {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

.products-8-1 ul.products li.product .price-add-to-cart .add-to-cart-wrap {
    flex: 0 0 auto !important;
    align-self: flex-end !important;
}

/* Fix: bỏ position absolute của del, dùng flex column như carousel */
.products-8-1 ul.products li.product .electro-price {
    display: inline-flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.products-8-1 ul.products li.product .price del {
    order: unset !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
}

.products-8-1 ul.products li.product .price ins {
    order: unset !important;
    text-decoration: none !important;
}

.products-8-1 ul.products li.product .price ins .woocommerce-Price-amount bdi {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #e53935 !important;
}

.products-8-1 ul.products li.product .price del .woocommerce-Price-amount bdi {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #aaa !important;
}

.products-8-1 ul.products li.product .price > .woocommerce-Price-amount bdi {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

/* Image zoom — grid 8 sản phẩm */
.products-8-1 .products-8 ul.products li.product .product-thumbnail {
    overflow: hidden;
}

.products-8-1 .products-8 ul.products li.product .product-thumbnail img {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.products-8-1 .products-8 ul.products li.product:hover .product-thumbnail img {
    transform: scale(1.06) translateZ(0);
}

/* Khôi phục height:100% cho featured product (theme yêu cầu để fill container) */
.products-8-1 .product-main-8-1 ul.products li.product .product-inner,
.products-8-1 .product-main-8-1 ul.products li.product:hover .product-inner {
    height: 100% !important;
}

/* Fix: theme shrink flex-div thành calc(100%-35px) khi hover → footer bị co lên */
.products-8-1 .product-main-8-1 ul.products li.product:hover .flex-div {
    height: 100% !important;
}

/* Image zoom — featured sản phẩm bên phải */
.products-8-1 .product-main-8-1 ul.products li.product .images {
    overflow: hidden;
}

.products-8-1 .product-main-8-1 ul.products li.product .images img {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.products-8-1 .product-main-8-1 ul.products li.product:hover .images img {
    transform: scale(1.06) translateZ(0);
}

/* ============================================================
   Add to Cart — redesigned pill button
   ============================================================ */
.vertical_button {
    position: initial !important;
}

/* Reset float từ theme */
.owl-item > .product .vertical_button .button {
    float: none !important;
}

/* Layout: giá + button cùng hàng, button không bao giờ bị che */
.owl-item > .product .price-add-to-cart {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 5em !important;
}

.owl-item > .product .price-add-to-cart .price {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

.owl-item > .product .price-add-to-cart .add-to-cart-wrap {
    flex: 0 0 auto !important;
}

ins {
    font-weight: 700;
}

/* ============================================================
   Section Header — Bold & prominent
   ============================================================ */
header.section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
    padding: 10px 16px !important;
    background: linear-gradient(90deg, #fff9d6 0%, #ffffff 60%) !important;
    border-left: 5px solid #fed700 !important;
    border-bottom: none !important;
    border-radius: 0 6px 6px 0 !important;
    box-shadow: inset 0 0 0 1px rgba(254,215,0,0.25) !important;
}

/* Title */
header.section-header h2.section-header__title,
header.section-header .section-header__title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 23px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    background: transparent !important;
    border: none !important;
    text-shadow: none !important;
    position: static !important;
}

/* Icon tag vàng trước chữ */
/* header.section-header h2.section-header__title::before,
header.section-header .section-header__title::before {
    content: '' !important;
    display: inline-block !important;
    position: static !important;
    transform: none !important;
    width: 6px !important;
    height: 26px !important;
    border-radius: 3px !important;
    background: #fed700 !important;
    flex-shrink: 0 !important;
    box-shadow: 2px 0 6px rgba(254,215,0,0.5) !important;
} */

/* Nav arrows */
header.section-header .owl-nav {
    display: flex !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

header.section-header .owl-nav a,
header.section-header .slider-prev,
header.section-header .slider-next {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 2px solid #fed700 !important;
    color: #1a1a1a !important;
    background: #fff !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    transition: background 0.18s, color 0.18s !important;
    box-shadow: 0 2px 6px rgba(254,215,0,0.3) !important;
}

header.section-header .owl-nav a:hover,
header.section-header .slider-prev:hover,
header.section-header .slider-next:hover {
    background: #fed700 !important;
    color: #1a1a1a !important;
}

/* Nav inline (show-nav variant) */
header.section-header .nav-inline {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
    gap: 4px !important;
}

@media (max-width: 575px) {
    header.section-header {
        padding: 8px 12px !important;
        margin-bottom: 14px !important;
    }

    header.section-header h2.section-header__title,
    header.section-header .section-header__title {
        font-size: 17px !important;
    }

    header.section-header h2.section-header__title::before,
    header.section-header .section-header__title::before {
        width: 4px !important;
        height: 20px !important;
    }
}

/* ============================================================
   Footer Product Item — hover zoom only
   ============================================================ */
ul.product_list_widget > li a img {
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

ul.product_list_widget > li:hover a img {
    transform: scale(1.08);
}