/*
body {
    background-color: #f6f6f6;
}
*/

*, html {
    font-size: 16px;
}

.bg-primary {
    background: #356C07;
}

.border-primary {
    border-color: #356C07;
}

.border-secondary {
    border-color: #68C114;
}

.bg-accent {
    background: #ECF0E9;
}

.text-primary {
    color: #356C07;
}

.border-primary {
    border-color: #356C07;
}

.bg-secondary {
    background: #68C114;
}

.copyright {
    background: #FFFFFF;
    opacity: 0.4;
}

nav .menu-item:hover {
    color: #356C07
}


.my-ribbon {
    background: url('img/product-card/ic_ribbon.svg');
    background-size: cover;
    height: 56px;
    width: 55px;
}

.my-ribbon-mobile {
    background: url('img/product-card/ic_ribbon_mobile.svg');
    background-size: cover;
    height: 32px;
    width: 32px;
}


@media only screen and (min-width: 769px) {
    .card-product:hover .card-title {
        color: #356C07
    }
}

.card-product .icon-cart {
    /*ref https://codepen.io/yoksel/pen/JDqvs*/
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.7429 15.0908C14.1748 15.0908 13.7143 15.5514 13.7143 16.1197V18.8634C13.7143 19.4316 14.1748 19.8923 14.7429 19.8923C15.3109 19.8923 15.7714 19.4316 15.7714 18.8634V16.1197C15.7714 15.5514 15.3109 15.0908 14.7429 15.0908Z' fill='%23A1A1A1'/%3E%3Cpath d='M8.22857 16.1197C8.22857 15.5514 8.68908 15.0908 9.25714 15.0908C9.82521 15.0908 10.2857 15.5514 10.2857 16.1197V18.8634C10.2857 19.4316 9.82521 19.8923 9.25714 19.8923C8.68908 19.8923 8.22857 19.4316 8.22857 18.8634V16.1197Z' fill='%23A1A1A1'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.2235 1.54353C14.9395 1.05141 15.108 0.422142 15.6 0.138019C16.092 -0.146105 16.721 0.0225066 17.0051 0.514623L19.7479 5.26692C19.789 5.33812 19.8206 5.41218 19.8432 5.48766H20.2286C22.3115 5.48766 24 7.17673 24 9.2603C24 10.4389 23.4597 11.4913 22.6134 12.1831L21.6987 18.4727L21.086 21.3443C20.7189 23.0647 19.3149 24.3716 17.573 24.614C13.8755 25.1287 10.1245 25.1287 6.42701 24.614C4.68512 24.3716 3.28106 23.0647 2.91397 21.3443L2.3013 18.4727L1.38664 12.1831C0.540297 11.4913 0 10.4389 0 9.2603C0 7.17673 1.68852 5.48766 3.77143 5.48766H4.15684C4.17938 5.41218 4.21099 5.33812 4.25208 5.26692L6.99494 0.514623C7.27897 0.0225066 7.90804 -0.146105 8.4 0.138019C8.89196 0.422142 9.06051 1.05141 8.77648 1.54353L6.50007 5.48766H17.4999L15.2235 1.54353ZM3.58839 13.0286C3.64904 13.0315 3.71006 13.0329 3.77143 13.0329H20.2286C20.2899 13.0329 20.351 13.0315 20.4116 13.0286L19.6727 18.1094L19.0742 20.9147C18.8877 21.7888 18.1744 22.4527 17.2895 22.5758C13.7801 23.0643 10.2199 23.0643 6.71051 22.5758C5.82559 22.4527 5.1123 21.7888 4.92581 20.9147L4.32727 18.1095L3.58839 13.0286ZM21.9429 9.2603C21.9429 8.31322 21.1753 7.54546 20.2286 7.54546H3.77143C2.82465 7.54546 2.05714 8.31322 2.05714 9.2603C2.05714 10.2074 2.82465 10.9751 3.77143 10.9751H20.2286C21.1753 10.9751 21.9429 10.2074 21.9429 9.2603Z' fill='%23A1A1A1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.card-product:hover .icon-cart {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.7429 15.0908C14.1748 15.0908 13.7143 15.5514 13.7143 16.1197V18.8634C13.7143 19.4316 14.1748 19.8923 14.7429 19.8923C15.3109 19.8923 15.7714 19.4316 15.7714 18.8634V16.1197C15.7714 15.5514 15.3109 15.0908 14.7429 15.0908Z' fill='%2368C114'/%3E%3Cpath d='M8.22857 16.1197C8.22857 15.5514 8.68908 15.0908 9.25714 15.0908C9.82521 15.0908 10.2857 15.5514 10.2857 16.1197V18.8634C10.2857 19.4316 9.82521 19.8923 9.25714 19.8923C8.68908 19.8923 8.22857 19.4316 8.22857 18.8634V16.1197Z' fill='%2368C114'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.2235 1.54353C14.9395 1.05141 15.108 0.422142 15.6 0.138019C16.092 -0.146105 16.721 0.0225066 17.0051 0.514623L19.7479 5.26692C19.789 5.33812 19.8206 5.41218 19.8432 5.48766H20.2286C22.3115 5.48766 24 7.17673 24 9.2603C24 10.4389 23.4597 11.4913 22.6134 12.1831L21.6987 18.4727L21.086 21.3443C20.7189 23.0647 19.3149 24.3716 17.573 24.614C13.8755 25.1287 10.1245 25.1287 6.42701 24.614C4.68512 24.3716 3.28106 23.0647 2.91397 21.3443L2.3013 18.4727L1.38664 12.1831C0.540297 11.4913 0 10.4389 0 9.2603C0 7.17673 1.68852 5.48766 3.77143 5.48766H4.15684C4.17938 5.41218 4.21099 5.33812 4.25208 5.26692L6.99494 0.514623C7.27897 0.0225066 7.90804 -0.146105 8.4 0.138019C8.89196 0.422142 9.06051 1.05141 8.77648 1.54353L6.50007 5.48766H17.4999L15.2235 1.54353ZM3.58839 13.0286C3.64904 13.0315 3.71006 13.0329 3.77143 13.0329H20.2286C20.2899 13.0329 20.351 13.0315 20.4116 13.0286L19.6727 18.1094L19.0742 20.9147C18.8877 21.7888 18.1744 22.4527 17.2895 22.5758C13.7801 23.0643 10.2199 23.0643 6.71051 22.5758C5.82559 22.4527 5.1123 21.7888 4.92581 20.9147L4.32727 18.1095L3.58839 13.0286ZM21.9429 9.2603C21.9429 8.31322 21.1753 7.54546 20.2286 7.54546H3.77143C2.82465 7.54546 2.05714 8.31322 2.05714 9.2603C2.05714 10.2074 2.82465 10.9751 3.77143 10.9751H20.2286C21.1753 10.9751 21.9429 10.2074 21.9429 9.2603Z' fill='%2368C114'/%3E%3C/svg%3E%0A");
}

.card-product .cta-buy-now {
    display: none;
}

.card-product:hover .cta-buy-now {
    display: flex;
}

@media screen and (max-width: 414px) {
    .card-product .cta-buy-now {
        display: none !important;
    }
}

/*customize owl-carousel*/
.owl-theme .owl-stage-outer {
    /* height: 26rem;*/
    /*border:1px solid red;*/
    /* overflow-y: auto !important;*/
    padding-bottom: 10px;
}

.owl-theme .owl-prev {
    position: absolute;
    left: 0px;
    top: 25%;
    bottom: 50%;
    background: rgba(128, 128, 128, 0.46) !important;
    width: 50px;
}


.owl-theme .owl-next {
    position: absolute;
    right: 0px;
    top: 25%;
    bottom: 50%;
    background: rgba(128, 128, 128, 0.46) !important;
    width: 50px;
}

.owl-theme .owl-nav {
    color: white !important;
}

.owl-theme .owl-dots {
    margin-top: 2rem;
}


.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #68C114 !important;
}

.card-post .icon-caret {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.34501 11.0084L5.16584 9.83087L8.99918 5.99753L5.16584 2.1642L6.34501 0.991699L11.3533 6.00003L6.34584 11.0084H6.34501ZM1.82418 11.0084L0.645844 9.83087L4.47918 5.99753L0.645844 2.17003L1.82418 0.991699L6.83334 6.00003L1.82501 11.0084H1.82418Z' fill='%234F4F4F'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.card-post:hover .icon-caret {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.345 11.0084L5.16584 9.83087L8.99917 5.99753L5.16584 2.1642L6.345 0.991699L11.3533 6.00003L6.34584 11.0084H6.345ZM1.82417 11.0084L0.645836 9.83087L4.47917 5.99753L0.645836 2.17003L1.82417 0.991699L6.83334 6.00003L1.825 11.0084H1.82417Z' fill='%2368C114'/%3E%3C/svg%3E%0A");
}

.card-post:hover .title {
    color: #68C114;
}

.card-post:hover .text-detail {
    color: #68C114;
}


.nav a.nav-item {
    position: relative;
    font-width: bold;
}

.nav a.nav-item:hover,
.nav a.nav-item.active {
    color: #68C114;
}


.nav a.nav-item:hover:after,
.nav a.nav-item.active:after {
    display: block;
}

.nav a.nav-item:after {
    content: "";
    position: absolute;
    height: 0.2rem;
    left: 10px;
    right: 10px;
    bottom: -10px;
    left: 1rem;
    right: 1rem;
    background: #68C114;
    display: none;
}

aside .category-block a.active {
    background: rgba(53, 108, 7, 0.1);
}

.dancing-script-font {
    font-family: 'Dancing Script', cursive;
    font-style: italic;
}

.my-rotate-90 {
    transform: rotate(90deg);
}

.pagination {
    gap: 1rem;
}

.pagination .page-numbers {
    display: inline-block;
    height: 2rem;
    width: 2rem;
    border: 1px solid #ccc;
    border-radius: 999px;
    text-align: center;
    padding-top: 0.2rem;
    color: #c8c8c8;
}

.pagination span.page-numbers {
    display: inline-block;
    height: 2rem;
    width: 2rem;
    border: 1px solid #ccc;
    background: #356C07;
    color: #fff;
    border-radius: 999px;
    text-align: center;
    padding-top: 0.2rem;
}

.line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 1536px) {
    .container {
        max-width: 1170px !important;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1170px !important;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}


/* Tooltip container */
.my-tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.my-tooltip .tooltip-text {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    left: -45px;
    bottom: -30px
}

/* Show the tooltip text when you mouse over the tooltip container */
.my-tooltip:hover .tooltip-text {
    visibility: visible;
}

.owl-theme .owl-prev {
    position: absolute;
    left: 0px;
    top: 25%;
    bottom: 50%;
    background: #343434 !important;
    width: 50px;
    opacity: 50%;
    left: -50px
}

.owl-theme .owl-next {
    position: absolute;
    right: 0px;
    top: 25%;
    bottom: 50%;
    background: #343434 !important;
    width: 50px;
    opacity: 50%;
    right: -50px
}

@media only screen and (max-width: 600px) {
    .owl-theme .owl-prev {
        display: none !important;
    }

    .owl-theme .owl-next {
        display: none !important;
    }
}


.woo-sctr-shortcode-countdown-1 {
    background: #ffffff;
    padding-left: 10px;
    padding-right: 10px;
}

@media only screen and (max-width: 600px) {
    .owl-stage {
      /*  transform: translate3d(-85px, 0px, 0px) !important;*/
    }
}