/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

.nav-column>li>a,
.nav-dropdown>li>a,
.nav-vertical-fly-out>li>a,
.nav>li>a {
    color: #000;
    transition: all .2s;
}

[data-icon-label]:after {

    color: #000;

}

.nav>li.cart-item>a>i {
    font-size: 30px;
    transition: color .3s;
    vertical-align: middle;
}


.nav-column li.active>a,
.nav-column li>a:hover,
.nav-dropdown li.active>a,
.nav-dropdown>li>a:hover,
.nav-vertical-fly-out>li>a:hover,
.nav>li.active>a,
.nav>li.current>a,
.nav>li>a.active,
.nav>li>a.current,
.nav>li>a:hover {
    color: hsl(0deg 0% 7%);
}

.img-xoay-tron img {
    display: inline-block;
    animation: spin 25s linear infinite;
    transform-origin: center center;
}

.img-box-lemon:hover img {
    filter: brightness(0) saturate(100%) invert(57%) sepia(87%) saturate(659%) hue-rotate(10deg) brightness(97%) contrast(96%);
    cursor: pointer;
}

p.name.product-title.woocommerce-loop-product__title a {
    font-size: 22px;
    color: #000;
    font-weight: 700;
}

p.name.product-title.woocommerce-loop-product__title {
    margin-bottom: 26px;
}

.price-hover-wrap .hover-price {
    display: none;
}

.product-small:hover .price-hover-wrap .default-price {
    display: none;
}

.product-small:hover .price-hover-wrap .hover-price {
    display: block;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


span.price .amount {
    border-width: 4px 4px 4px 4px;
    border-radius: 0px 0px 0px 0px;
    padding: 10px 20px 10px 20px;
    border-color: #000 !important;
    border-style: solid;
}

a.hover-text.add_to_cart_button.ajax_add_to_cart,
.price-wrapper.hover-price span.hover-text {
    border-width: 4px 4px 4px 4px;
    border-radius: 0px 0px 0px 0px;
    padding: 10px 20px 10px 20px;
    border-color: #000 !important;
    border-style: solid;
    font-weight: 800;
    transition: all .3s ease;
}

a.hover-text.add_to_cart_button.ajax_add_to_cart:hover {
    background-color: #000 !important;
    color: #fff;

}

.absolute-footer.dark {
    display: none;
}

.section-footer span.ux-menu-link__text {
    color: #fff;
    font-size: 20px;
    transition: all .3s ease;
}

.section-footer span.ux-menu-link__text:hover {
    cursor: pointer;
}

.stars a.active:after,
.stars a:hover:after {
    color: #000;
}

.button.alt,
.button.checkout,
.checkout-button,
.secondary {
    background-color: #000000;
}



.banner-story-after {
    position: relative;
    padding-top: 900px;
    background: transparent !important;
    background-color: transparent !important;
    z-index: 1;
}

.banner-story-after .banner-inner,
.banner-story-after .banner-bg {
    background: transparent !important;
    background-color: transparent !important;
}

.banner-story-after .img-story-after {
    width: 69%;
    margin: 0 auto;
}

.banner-story-after .img-inner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-story-after .img-inner img {
    width: 100%;
    object-fit: cover;
}

.banner-story-after .text-box {
    position: relative;
    z-index: 3;
    width: 69%;
}




.box-blog-post a.plain {
    text-transform: uppercase;
}

.flickity-page-dots {
    bottom: -15px;

}


aside#woocommerce_product_categories-2 {
    background: #38920c;
    padding: 10px 20px;
    color: #fff;
}

aside#woocommerce_product_categories-2 * {
    color: #fff;
}


ul.breadcrumb {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    font-size: 15px;
    justify-content: center;
}

ul.breadcrumb li {
    display: flex;
    align-items: center;
    color: white;
}

ul.breadcrumb li a {
    color: white;
    text-decoration: none;
}

ul.breadcrumb li:last-child span {
    color: #38920c;
    font-weight: normal;
}

ul.breadcrumb .mr_lr {
    margin: 0 -5px 0 18px;
    display: inline-block;
    color: white;
}

ul.breadcrumb svg {
    width: 10px;
    height: 10px;
    fill: currentColor;
}


input.wpcf7-form-control.wpcf7-submit.has-spinner {
    background: #0c9b22;
    color: #fff;
    border: initial;
    padding: 0 20px;
    line-height: 35px;
    font-size: 14px;
    border-radius: 8px;
}


input[type=email],
input[type=number],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 8px;
}

.section-footer a.ux-menu-link__link.flex span {
    color: #000;
    font-size: 16px;
}

.form-flex {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
    /* Căn giữa theo chiều dọc */
}


.form-flex p {
    display: flex;
}


.form-flex input[type=email] {
    width: 748px;
    border-radius: 8px 0px 0px 8px;
}

.my-email-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin: 0;
}

.my-submit-button {
    padding: 10px 20px;
    background-color: #2e7d32;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    margin: 0;
}

.form-flex input.wpcf7-form-control.wpcf7-submit.has-spinner {
    position: relative;
    z-index: 99;
    margin-left: -10px;
}

@media only screen and (max-width: 48em) {

    /*************** ADD MOBILE ONLY CSS HERE  ***************/
    .form-flex input[type=email] {
        width: 250px;
        border-radius: 8px 0px 0px 8px;
    }

    .section-insta p {
        padding: 0 15px;
    }

    .woocommerce .products .product .box-image img.product-image,
    .woocommerce .products .product .box-image .gallery-image,
    .fruit-picker-container .box-image img.product-image,
    .fruit-picker-container .box-image .gallery-image {
        height: unset !important;
    }

    .fruit-icon.active .fruit-label {
        font-size: 14px !important;
    }

    .fruit-svg {
        width: 100px !important;
        height: 100px !important;
    }

}