/*
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.   ***************/

.no-margin {margin: 0 !important}
.no-margin > * {margin: 0 !important}
.no-paddding {padding: 0 !important}
.no-paddding > *{padding: 0 !important}
.row-no-padding-bottom .col{padding-bottom: 0 !important}

.owl-nav.disabled{display: none !important;}
.owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-prev {left: 0}
.owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-next {right: 0;}
.absolute-footer {display: none !important;}

:root {
    --main-color: #009f49;
    --se-color: #81bc00;
    --text-color: #262626;
    --divider-color: #e8e812;
}

/* top bar */
.info-bar {
    display: flex;
    align-items: center;
    
}
.info-bar i {
    margin-right: 3px;
    font-size: 15px !important;
    color: #fff;
}

.info-bar span {
    font-size: 15px;
    color: #fff;
}

.social-icons.follow-icons a i {
    font-size: 20px;
    margin-right: 8px;
}

/* nav main */
.header-nav-main .menu-item {
    margin-right: 5px;
    padding-left: 10px;
    padding-right: 10px;
}
.header-nav-main .menu-item a {
    font-size: 14px;
}

.header-nav-main .menu-item.active {
    border: 2px solid var(--main-color);
    border-bottom-left-radius: 20px;
    border-top-right-radius: 20px;
}

/* mege-menu */
.mega-menu-page .sub-menu{
    padding: 30px 40px;
    border-radius: 10px;
}
.mega-menu-page .col {
    padding-bottom: 0;
}

.mega-menu-page .sub-menu .label-menu p {
    font-size: 22px;
    color: #1b5633;
    font-weight: 700;
    margin-bottom: 20px;
}

.mega-menu-page .menu-item {
    padding-left: 0;
    padding-right: 0;
}

.mega-menu-page .sub-menu .ux-menu .ux-menu-link__link {
    color: var(--text-color);
    transition: all 0.3s ease-in-out;
}
.mega-menu-page .sub-menu .ux-menu .ux-menu-link__link:hover {
    color: #000;
    text-decoration: underline;
}

.mega-menu-page .ux-menu-link__text {
    font-size: 16px;
    color: var(--text-color);
}

/* service */
.title-service h2 {
    text-transform: uppercase;
    margin-bottom: 0;
}
.title-service p {
    color: var(--text-color);
    font-size: 18px;
    margin-bottom: 10px;
}
.service-img-box img {
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}
.service-img-box .box-text {
    background: #fff;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* feeback */
.slider-fb-cl .flickity-page-dots {
    bottom: 0;
}
.icon-box-fb-cl .icon-inner {
    width: 150px;
    height: 150px;
    border-radius: 99px;
    overflow: hidden;
}

.text-fb-slide {
    text-align: justify;
    padding: 15px;
    border-radius: 5px;
    background: linear-gradient(to right, var(--se-color), var(--main-color));
    color: #fff;
}

/* system */
.icon-box-sys {
    align-items: center;
}

.icon-box-sys .icon-box-text {
    color: var(--main-color);
    
    font-size: 16px;
}

.tabs-products .nav {
    margin-top: 20px;
    margin-bottom: 40px;
}

.tabs-products .nav .tab {
    margin: 0 10px;
}

.tabs-products .nav .tab:not(.active) span{
    color: var(--text-color);
}

.tabs-products .nav .tab.active a{
    border-color: var(--se-color) !important;
    color: var(--text-color);
}

.tabs-products .nav .tab a:hover {
    border-color: var(--se-color) !important;
    color: var(--text-color);
}

 .product-small.box {
    border: 1px solid var(--main-color);
    margin-right: 5px;
}

 .product-small .box-text-products {
   padding: 20px;
   background: var(--main-color);
}

 .product-small .box-text-products .name a{
   color: #fff;
   font-size: 14px;
}

.image-certificate {
    padding: 10px;
    border: 2px solid var(--text-color);
}

.bai-viet-lien-quan {
    margin-top: 20px;
    border: 1px solid #cecccc;
    padding: 20px;
}

.list-bai-viet {
    list-style: none;
}

.list-bai-viet .row:last-child .col {
    padding-bottom: 0px !important;
}

.list-bai-viet img {
    border-radius: 10px;
}

.bai-viet-lien-quan h3 {
    color: var(--text-color);
    text-transform: uppercase;
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}