/* Sản phẩm */
.best-products {
    background: white;
}

.product-card {
    padding: 20px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px #f0eeee solid;
}



@media only screen and (max-width: 1024px) {
    .product-card {
        padding: 10px;
        background: #ffffff;
        border-radius: 4px;
        border: 1px #f0eeee solid;
    }

    .product-card .product-name {
        font-size: 0.8rem;
        min-height: 2.4rem;
    }

    .show-price {
        font-size: 0.7rem;
        font-weight: bold;
        margin-right: 10px;
        color: #d30e00;
    }

    .show-original-price {
        font-size: 0.6rem;
        text-decoration: line-through;
        color: #999;
    }

    .show-product-price {
        font-size: 1.4rem;
        font-weight: bold;
        margin-right: 15px;
        color: #d30e00;
    }

    .show-product-original-price {
        font-size: 1.0rem;
        text-decoration: line-through;
        color: #999;
    }

}

@media only screen and (min-width: 1025px) {
    .product-card .product-name {
        font-size: 1rem;
        min-height: 3rem;
    }

    .show-price {
        font-size: 1.0rem;
        font-weight: bold;
        margin-right: 10px;
        color: #d30e00;
    }

    .show-original-price {
        font-size: 0.8rem;
        text-decoration: line-through;
        color: #999;
    }

    .show-product-price {
        font-size: 1.6rem;
        font-weight: bold;
        margin-right: 15px;
        color: #d30e00;
    }

    .show-product-original-price {
        font-size: 1.1rem;
        text-decoration: line-through;
        color: #999;
    }

}


.product-card:hover {
    box-shadow: 0 0 5px silver;
}

@media only screen and (min-width: 1420px) {
    .product-card img {
        max-width: 100%;
        min-width: 150px;
    }
}

@media only screen and (min-width: 1420px) {
    .product-card img {
        max-width: 100%;
        min-width: 12px;
    }
}

/* LOGO */
.header-desktop--navigation .logo {
    position: absolute;
    top: 0;
    left: 0px;
    width: 100px;
    height: 100px;
}

@media only screen and (min-width: 1164px) and (max-width: 1419px) {
    .header-desktop--navigation .logo {
        top: 0;
        left: 0px;
        width: 100px;
        height: 100px;
    }
}

@media only screen and (min-width: 1420px) {
    .header-desktop--navigation .logo {
        left: 0px;
        width: 100px;
        height: 100px;
    }
}

.header-desktop--navigation .logo a {
    display: block;
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100%
}




.header-mobile .header-mobile--main .logo {
    position: relative;
    left: 0;
    display: block;
    width: 60px;
    height: 60px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100%
}

.footer {
    min-height: 300px;
    background: #176A37;
}

.footer .logo {
    position: relative;
    left: 0;
    display: block;
    margin: 0 auto;
    width: 110px;
    height: 110px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100%;
}

.footer .logo a {
    display: block;
    margin: 0 auto;
    width: 110px;
    height: 110px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100%;

}


/* HEADER MENU */
.w-menu {
    max-width: 1576px !important;
}



.header.sticky .header-wrapper {
    transform: translateY(calc(-100% - 75px))
}

.header.sticky.fixed .header-wrapper {
    position: fixed
}

.header.sticky.visible .header-wrapper {
    transform: translateY(0)
}

.header-wrapper {
    position: absolute;
    width: 100%;
    transition: transform .15s cubic-bezier(.83, 0, .17, 1);
}

.header-wrapper .header-desktop {
    display: none
}

@media only screen and (min-width: 908px) {
    .header-wrapper .header-desktop {
        display: flex;
        position: fixed;
        z-index: 100;
    }
}

.header-wrapper .header-mobile {
    display: block;
    position: fixed;
    z-index: 100;
    width: 100%;
}

@media only screen and (min-width: 908px) {
    .header-wrapper .header-mobile {
        display: none;
    }
}

.header-desktop {
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    color: #1c7120
}


.header-desktop--container {
    position: relative;
    z-index: 30;
    width: 100%;
    background-color: #176A37;
}




.header-desktop--navigation .header-desktop--links,
.header-desktop--navigation .navigation--page-list {
    display: flex;
    align-items: center
}

.header-desktop--navigation .header-desktop--links {
    justify-content: space-between;
    height: 100px;
    max-height: 100px;

    /* margin-top: 40px; */
}

@media only screen and (min-width: 1420px) {
    .header-desktop--navigation .header-desktop--links {
        margin-left: 15px;

    }
}

@media only screen and (min-width: 1676px) {
    .header-desktop--navigation .header-desktop--links {
        margin-left: 0;
    }
}

@media only screen and (min-width: 1164px) {
    .header-desktop--navigation .header-desktop--social {
        display: inline-flex
    }
}


.header-desktop--navigation .header-desktop--social svg {
    transition: color .15s cubic-bezier(.5, 1, .89, 1)
}

.header-desktop--navigation .header-desktop--social a:hover svg {
    color: #6df696
}


.header-desktop--navigation .navigation--link {
    position: relative;
    display: block;
    margin-right: 1.25em;
    color: #fff;
    font-size: 19px;
    letter-spacing: .5px;
    text-align: center;
}

@media only screen and (min-width: 1024px) and (max-width: 1400px) {
    .header-desktop--navigation .navigation--link {
        margin-right: .8em;
        font-size: 17px
    }
}


.header-desktop--navigation .navigation--link:after {
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 0;
    height: 4px;
    background-image: url(/i/underline.svg);
    background-repeat: no-repeat;
    background-size: cover;
    transform: rotate(0deg);
    transition: width .15s cubic-bezier(.5, 1, .89, 1), transform .15s cubic-bezier(.5, 1, .89, 1);
    content: ""
}

.header-desktop--navigation .navigation--link.current:after,
.header-desktop--navigation .navigation--link:hover:after {
    width: 100%;
    transform: rotate(-2deg)
}

.header-desktop--navigation .header-desktop--utilities {
    display: flex;
    align-items: center
}



.header-desktop--content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .15s cubic-bezier(.5, 1, .89, 1)
}

.header-desktop--content .container {
    padding: 60px 0
}

.header-desktop--content .header--content-list {
    display: flex
}

.header-desktop--content .header--content-list .hidden {
    display: none
}

@media only screen and (min-width: 1164px) {
    .header-desktop--content .header--content-list .hidden {
        display: block
    }
}

.header-desktop--content .header--content-title h2 {
    margin-bottom: 15px;
    color: #176A37;
    text-transform: uppercase
}

.header-desktop--content .header--content-title a:hover {
    background-color: #176A37
}

.header-desktop--content .header--content-items {
    display: flex;
    flex-wrap: wrap
}

.header-desktop--content .header--content-items a {
    width: 50%;
    color: #fff;
    font-size: 24px;
    line-height: 1.5;
    transition: color .15s cubic-bezier(.5, 1, .89, 1)
}

.header-desktop--content .header--content-items a.current,
.header-desktop--content .header--content-items a:hover {
    color: #6dcff6
}

.header-desktop--content .header--content-preview {
    min-width: 190px
}

.header-desktop--content .header--content-preview .category-previews {
    position: relative
}

.header-desktop--content .header--content-preview .category-previews img {
    position: absolute;
    top: 0;
    opacity: 0
}

.header-desktop--content .header--content-preview .category-previews img.show,
.header-desktop--content .header--content-preview .category-previews img:first-child {
    opacity: 1
}


body.mobile-active .header-mobile .header-mobile--main .hamburger {
    transform: rotate(45deg)
}

body.mobile-active .header-mobile .header-mobile--main .hamburger span:first-child {
    transform: translateY(10px)
}

body.mobile-active .header-mobile .header-mobile--main .hamburger span:nth-child(2) {
    opacity: 0
}

body.mobile-active .header-mobile .header-mobile--main .hamburger span:nth-child(3) {
    transform: translateY(-10px) rotate(90deg)
}

body.mobile-active .header .header-wrapper,
body.mobile-active .header.sticky .header-wrapper {
    position: fixed;
    transform: translateY(0)
}

body.mobile-active .header-mobile--navigation {
    opacity: 1;
    pointer-events: all
}

.header-mobile {
    position: relative;
    z-index: 150;
    margin-bottom: -7px
}

.header-mobile .header-mobile--main {
    position: relative;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    height: var(--header-height-lg);
    padding: 0 20px;
}

.header-mobile .header-mobile--utilities {
    display: flex;
    align-items: center
}

.header-mobile--main {
    position: fixed;
    box-shadow: 0 0 5px black;
}

.header-mobile--navigation {
    position: fixed;
    top: 0;
    width: 100%;
    padding-top: 100px;
    padding-top: calc(var(--header-height-lg) + 30px);
    background-color: #176A37;
    box-shadow: 0 60px 60px rgba(0, 0, 0, .5);
    opacity: 0;
    display: none;
    pointer-events: auto;
}

.header-mobile--navigation .wave {
    position: relative;
    top: 5%;
    transform: rotate(180deg)
}

.header-mobile--navigation .wave svg {
    color: #176A37 !important
}

.header-mobile--navigation a {
    display: block;
    margin: 0.5em 0;
    color: #fff;
    font-size: 1.0rem;
    text-align: center
}

.header-mobile--navigation .header-mobile--social a {
    margin: 1em 1em;
    color: #fff;
}

.header-mobile--navigation .header-mobile--social .social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-top: thin solid silver;
}

.header-mobile--navigation .header-mobile--social .social .social-instagram img {}

.wave-splash-wrapper .basic-hero {
    padding-bottom: 14.1975308642%
}

.wave-splash-wrapper .splash {
    position: relative;
    top: 2px;
    margin-top: -14.1975308642%
}

@media only screen and (min-width: 1164px) {
    .wave-splash-wrapper .splash {
        padding-top: 60px
    }
}

.wave-splash-wrapper .splash svg {
    color: #fafafa
}


.header-desktop--container {
    position: relative;
    z-index: 30;
    width: 100%;
    background-color: #176A37;
}




.header-desktop--navigation .header-desktop--links,
.header-desktop--navigation .navigation--page-list {
    display: flex;
    align-items: center
}

.header-desktop--navigation .header-desktop--links {
    justify-content: space-between
}

@media only screen and (min-width: 1420px) {
    .header-desktop--navigation .header-desktop--links {
        margin-left: 15px
    }
}

@media only screen and (min-width: 1676px) {
    .header-desktop--navigation .header-desktop--links {
        margin-left: 0
    }
}


.header-desktop--navigation .header-desktop--utilities {
    display: flex;
    align-items: center
}




.header-desktop--content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .15s cubic-bezier(.5, 1, .89, 1)
}

.header-desktop--content .container {
    padding: 60px 0
}

.header-desktop--content .header--content-list {
    display: flex
}

.header-desktop--content .header--content-list .hidden {
    display: none
}

@media only screen and (min-width: 1164px) {
    .header-desktop--content .header--content-list .hidden {
        display: block
    }
}

.header-desktop--content .header--content-title h2 {
    margin-bottom: 15px;
    color: #176A37;
    text-transform: uppercase
}

.header-desktop--content .header--content-title a:hover {
    background-color: #176A37
}

.header-desktop--content .header--content-items {
    display: flex;
    flex-wrap: wrap
}

.header-desktop--content .header--content-items a {
    width: 50%;
    color: #fff;
    font-size: 24px;
    line-height: 1.5;
    transition: color .15s cubic-bezier(.5, 1, .89, 1)
}

.header-desktop--content .header--content-items a.current,
.header-desktop--content .header--content-items a:hover {
    color: #6dcff6
}

.header-desktop--content .header--content-preview {
    min-width: 190px
}

.header-desktop--content .header--content-preview .category-previews {
    position: relative
}

.header-desktop--content .header--content-preview .category-previews img {
    position: absolute;
    top: 0;
    opacity: 0
}

.header-desktop--content .header--content-preview .category-previews img.show,
.header-desktop--content .header--content-preview .category-previews img:first-child {
    opacity: 1
}


body.mobile-active .header .header-wrapper,
body.mobile-active .header.sticky .header-wrapper {
    position: fixed;
    transform: translateY(0)
}

body.mobile-active .header-mobile--navigation {
    opacity: 1;
    pointer-events: all
}

.header-mobile {
    position: relative;
    z-index: 150;
    margin-bottom: -7px
}

.header-mobile .header-mobile--main {
    position: relative;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    height: var(--header-height-lg);
    padding: 0 20px;
}


.header-mobile .header-mobile--main .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 20px;
    min-height: 20px;
    padding: 3.5px 15px;
    cursor: pointer;
    margin-top: -3px;
}

.header-mobile .header-mobile--main .hamburger span {
    display: block;
    width: 20px;
    height: 3px;
    background-color: #fff;
    border-radius: 999px
}

.header-mobile .header-mobile--utilities {
    display: flex;
    align-items: center
}



.header-mobile--main {
    position: fixed
}

.header-mobile--navigation {
    position: fixed;
    top: 0;
    width: 100%;
    padding-top: 100px;
    padding-top: calc(var(--header-height-lg) + 30px);
    background-color: #176A37;
    box-shadow: 0 60px 60px rgba(0, 0, 0, .5);
    opacity: 0;
    pointer-events: auto
}

.header-mobile--navigation .wave {
    position: relative;
    top: 5%;
    transform: rotate(180deg)
}

.header-mobile--navigation .wave svg {
    color: #176A37 !important
}

.wave-splash-wrapper .basic-hero {
    padding-bottom: 14.1975308642%
}

.wave-splash-wrapper .splash {
    position: relative;
    top: 2px;
    margin-top: -14.1975308642%
}

@media only screen and (min-width: 1164px) {
    .wave-splash-wrapper .splash {
        padding-top: 60px
    }
}

.wave-splash-wrapper .splash svg {
    color: #fafafa
}

/* Gallery SOCIAL */
.gallery {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background-color: white;

}

@media only screen and (max-width: 500px) {
    .gallery a {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

}

@media only screen and (min-width: 501px) and (max-width: 767px) {
    .gallery a {
        width: 33%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

}

@media only screen and (min-width: 768px) {
    .gallery a {
        width: 20%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }
}

.gallery a img {
    width: 100%;
    border: thin whitesmoke solid;
}

.gallery a.center-item div {
    scale: 1.05;
}

.gallery a.center-item div svg {
    max-width: 50%;
}

/* 
.gallery a.center-item div {
    animation-name: center-scale;
    animation-duration: 4s;
    animation-iteration-count: infinite;
  }
  
  @keyframes center-scale {
    0% {scale: 1}
    40% {scale: 1.05}
    100% {scale: 1}
  }
 */

.follow-strip--insta,
.follow-strip--insta>div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.follow-strip--insta>div {
    background-color: #176A37;
    border-radius: 15px;
    box-shadow: 0 0 22px rgba(0, 0, 0, .1), 0 6px 12px rgba(0, 0, 0, .1), 0 12px 22px rgba(0, 0, 0, .1);
    transition: background-color .15s cubic-bezier(.5, 1, .89, 1);
    color: white;
}

/* SOCIAL ICON FB YT */
div.social {
    display: inline-flex;
    flex-wrap: nowrap;
}

div.social a {
    color: white;
    width: 1.3rem;
    margin: 0 4px;
}

/* SEARCH */

.header-search {
    background-color: #fff;
    border-radius: 100px;
    position: relative;
    padding: 5px 20px;
    width: 200px;
}

@media screen and (min-width: 501px) and (max-width: 1267px) {
    .header-search {
        width: 150px;
        margin: 0 auto;
    }

}

@media screen and (max-width: 500px) {
    .header-search {
        width: 100%;
        margin: 0 auto;
    }

}

.header-search input {
    background-color: transparent;
    border: none;
    width: 80%;
}

.header-search input:focus {
    outline: none;
}

.header-search button {
    background-color: transparent;
    border: none;
    width: 30px;
    height: 30px;
    outline: none;
    position: absolute;
    right: 10px;
}

.header-mobile--search {
    padding: 10px 20px;
}

.header-desktop--content,
.header-desktop--navigation,
.header-desktop--wave {
    width: 100%;
    color: #fff;
}

img.product-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border: thin solid whitesmoke;
}

.cart {
    position: fixed;
    top: 50%;
    right: 5px;
    z-index: 1000;

}

@media screen and (max-width: 500px) {
    .cart {
        display: none;
        position: fixed;
        top: 50%;
        right: 5px;
        z-index: 1000;
    }

}

.cart a {
    color: white;
    background-color: #176A37;
    border-radius: 8px;
    border: thin solid white;
    box-shadow: #1c7120 0px 0px 5px;
}

.btn-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 15px;
    right: 15px;
    opacity: 0.7;
    color: white;
    background: darkgreen;
    border: thick solid darkseagreen;
}

a.btn-cart:hover {
    text-decoration: none;
    opacity: 1;
    color: white;
}

/* FEATURE TEXTS */

.features {
    box-shadow: 0 1px 10px silver;
    background-color: white;
}

.features .features-container {
    border-right: seagreen thin dashed;
}

.features .features-container:last-child {
    border-right: none;
}

.features .features-item {
    align-items: center;
    display: flex;
    justify-content: flex-start;
}

.features .features-item .feature-icon {
    text-align: center;
    width: 50px;
}

@media screen and (min-width: 1025px) {
    .features .features-item .feature-icon {
        text-align: center;
        width: 70px;
    }

}



.features .features-item img {
    height: 30px;
    width: auto;
    filter: brightness(4);
    margin-right: 5px;
}

.features .features-title {
    font-size: 1rem;
    color: #ffcc48;
}

.features .features-text {
    font-size: 0.8rem;
    color: #fff;
}

@media only screen and (max-width: 1024px) {
    .features .features-item img {
        height: 22px;
        width: auto;
        filter: brightness(4);
        margin-right: 5px;
    }

    .features .features-title {
        font-weight: 600;
        font-size: 0.8rem;
        color: #ffffff;
    }

    .features .features-text {
        font-size: 0.7rem;
        color: #fff;
    }
}

.product-features {}

.product-features .features-item {
    text-align: center;
}

.product-features .features-item img {
    width: auto;
    height: 40px;
}

.product-features .features-item h4 {
    font-size: 1.3rem;
    color: grey;
    text-align: center;
    padding: 7px 0;
}

.button-cart {
    background-color: #176A37;
    color: white;
    border: 3px solid #28a859;
}

.button-cart:hover {
    background-color: #28a859;
    color: whitesmoke;
}

.post-image {
    width: 100%;
    height: auto;
    aspect-ratio: 4/2;
    object-fit: cover;
    border-radius: 20px;
}

.post-title {}


.fadeInDown {
    opacity: 0;
}

.intro-slide .slide-text {
    position: absolute;
    bottom: 0;
    background-color: rgba(0, 0, 0, .1);
    color: #fff;
    font-weight: 600;
    padding: 4px;
    min-height: 3rem;
    text-align: justify;
    z-index: 1;

}

.intro-slide .slide-text .slide-text-inner {
    padding: 10px;
    border-left: darkgreen 6px solid;
    z-index: 1;
}

.intro-slide .slide-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1.7;
    object-fit: cover;
    border: whitesmoke thin solid;
    filter: brightness(80%);
    z-index: 0;
}

.intro-carousel .owl-dots {
    position: absolute;
    right: 30px;
    top: -30px;
}

.banner-carousel .owl-nav [class*=owl-] {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

.banner-carousel .owl-nav [class*=owl-]:hover {
    background-color: rgba(0, 0, 0, 0.8) !important;

}

.banner-carousel .owl-dots {
    position: absolute;
    left: 10px;
    bottom: 10px;
}

.desktop-wave {
    height: 31px;
    margin-top: -1px;
}

@media screen and (min-width: 1500px) {
    .desktop-wave {
        margin-top: -1px;
        height: 31px;
    }
}


.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.maxLine_1,
.maxLine_2,
.maxLine_3,
.maxLine_4,
.maxLine_5 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
}

.maxLine_1 {
    -webkit-line-clamp: 1;
}

.maxLine_2 {
    -webkit-line-clamp: 2;
}

.maxLine_3 {
    -webkit-line-clamp: 3;
}

.maxLine_4 {
    -webkit-line-clamp: 4;
}

.maxLine_5 {
    -webkit-line-clamp: 5;
}

.header-mobile--utilities div {
    padding: 0 12px;
}

.header-mobile--cart {
    position: relative;
}

.header-mobile--cart span.cart-counter {
    position: absolute;
    right: 0px;
    top: -7px;
}

span.cart-counter {
    position: absolute;
    right: 20px;
    top: 0;
}