﻿/*!
 * home.css
 * Version - 1.0
 * Website: anphe
 * Author: KhanhHV
 * Copyright (c) 2021 bicweb.com
 */
.logo h1 {
    margin: 0;
    font-size: 1rem;
}

.gd_box__title {
    text-align: center;
}

    .gd_box__title .gd_text {
        font-size: 30px;
        color: #083190;
        font-family: 'Open Sans', sans-serif;
        font-weight: bold;
        margin-bottom: 30px;
        position: relative;
        padding-bottom: 10px;
    }

        .gd_box__title .gd_text::after {
            content: "";
            width: 70px;
            height: 1px;
            background-color: #008ed4;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }

.kh_module {
    padding: 50px 0;
}

/*********************************************
    1. Banner
**********************************************/
    .gd_banner {
        clear: both;
    }

        .gd_banner img.bg_slider {
        }

    .gd_banner_image {
        margin: 0;
    }

    .gd_banner .owl-nav [class^="owl-"] {
        color: #dedcdcf5;
        line-height: 1;
        /*opacity: 0;*/
        position: absolute;
        text-align: center;
        top: 50%;
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        transition: all 0.3s ease-in 0s;
        /*visibility: hidden;*/
        z-index: 100;
        height: 65px;
        width: 40px;
        cursor: pointer;
        font-size: 48px;
    }

    .gd_banner .owl-prev {
        left: 40px;
    }

    .gd_banner .owl-next {
        right: 40px;
    }

 /*   .gd_banner:hover .owl-nav [class^="owl-"] {
        opacity: 1;
        visibility: visible;
    }*/

/*    .gd_banner .owl-nav.disabled {
        display: none;
    }*/


    .gd_banner .owl-dots {
        position: absolute;
        bottom: 25px;
        left: calc((100vw - var(--content-size)) / 2);
        display: flex;
        padding: 3px 10px;
        border-radius: 5px 5px 0 0;
    }

        .gd_banner .owl-dots::after, .gd_banner .owl-dots:before {
            content: "";
            bottom: 0;
            position: absolute;
            display: none;
        }

        .gd_banner .owl-dots::after {
            border-left: 0px solid transparent;
            border-right: 15px solid transparent;
            right: -14px;
            border-bottom: 24px solid #fff;
        }

        .gd_banner .owl-dots::before {
            border-left: 15px solid transparent;
            border-top: 0px solid transparent;
            border-bottom: 24px solid #fff;
            left: -14px;
        }

    .gd_banner .owl-dot {
        padding: 5px;
    }

    .gd_banner .owl-dots .owl-dot span {
        display: block;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background: #fff;
        transition: all 300ms ease-in 0ms;
    }

    .gd_banner .owl-dot.active span {
        width: 50px;
    }

    .gd_box_testimonial .owl-dots {
        background: none;
        bottom: -20px;
    }

    .owl-nav.disabled {
        display: none;
    }


/*********************************************
    2. Module đối tượng sử dụng
**********************************************/
    /*Lục giác*/
        .kh_item_obj {
            position: relative;
            flex: 0 0 22%;
            max-width: 22%;
            height: 250px;
        }
        .button {
            position: absolute;
            transform: rotate(30deg);
        }

        .button::before {
            content: '';
            width: 80%;
            height: 80%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) rotate(-30deg);
            
            background-repeat: no-repeat;
            background-size: cover;
        }
        /* End of container */
        .button {
            cursor: pointer;
            width: 200px;
            height: 173.2px;
            float: left;
        }
        .button:last-child {
            margin-right: 0;
        }
        .button:hover .hex:last-child {
            opacity: 1;
            transform: scale(1.1);
        }
        .button:hover .hex:first-child {
            opacity: 1;
            transform: scale(1.05);
        }
        .button:hover .hex:first-child div:before, .button:hover .hex:first-child div:after {
            height: 15px;
        }

        .hex {
            position: absolute;
            top: 0;
            left: 50px;
            width: 100px;
            height: 173.2050807569px;
            opacity: 0.5;
        }
        .hex:first-child {
            transform: scale(0.9);
            transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
            z-index: 0;
        }
        .hex:last-child {
            transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
            z-index: 1;
        }
        .hex div {
            box-sizing: border-box;
            position: absolute;
            top: 0;
            width: 100px;
            height: 173.2px;
            transform-origin: center center;
        }
        .hex div:before, .hex div:after {
            content: " ";
            position: absolute;
            background: #000;
            width: 100%;
            height: 2px;
            transition: height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        .hex div:before {
            top: 0;
        }
        .hex div:after {
            bottom: 0;
        }
        .hex div:nth-child(1) {
            transform: rotate(-30deg);
        }
        .hex div:nth-child(2) {
            transform: rotate(30deg);
        }
        .hex div:nth-child(3) {
            transform: rotate(90deg);
        }
        .hex:first-child div::before, .hex:first-child div::after {
            background: transparent;
        }
        .button:hover .hex:first-child div::before, .button:hover .hex:first-child div::after {
            background: var(--c);
        }
    /*End*/

    .kh_module.kh_module_object {
        padding-top: 150px;
    }
    .kh_module.kh_module_object {
        padding-top: 150px;
    }
    .kh_video_box {
    }
    .kh_video_box .kh_img_video {
        height: calc(0.22 * var(--content-size));
        padding-right: 30px;
        position: relative;
        margin-bottom: 50px;
    }
    .kh_video_box .kh_img_video .img-fluid {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .kh_video_box .kh_img_video .kh_btn_play {
        display: block;
        position: absolute;
        top: 50%;
        left: 45%;
        transform: translate(-50%, -50%);
        font-size: 55px;
        color: #fff;
    }
    .kh_video_box .kh_img_video .kh_btn_play i.fas{
        border: 5px solid rgb(45, 113, 56, 0.6);
        width: 80px;
        height: 80px;
        position: relative;
        border-radius: 50%;
        padding: 8px 18px;
        z-index: 1;
        -webkit-box-shadow: 0 0 0 0 #2d7138;
        -moz-box-shadow: 0 0 0 0 #2d7138;
        -ms-box-shadow: 0 0 0 0 #2d7138;
        -o-box-shadow: 0 0 0 0 #2d7138;
        box-shadow: 0 0 0 0 #2d7138;
        -webkit-animation: ripple 2s infinite;
        -moz-animation: ripple 2s infinite;
        -ms-animation: ripple 2s infinite;
        -o-animation: ripple 2s infinite;
        animation: ripple 2s infinite;
    }
    .kh_video_box .kh_img_video .kh_btn_play i.fas:after{
        content: '';
        position: absolute;
        border-radius: 50%;
        top: -2px;
        left: -5px;
        width: 80px;
        height: 80px;
       -webkit-box-shadow: 0 0 0 0 #2d7138;
       -moz-box-shadow: 0 0 0 0 #2d7138;
       -ms-box-shadow: 0 0 0 0 #2d7138;
       -o-box-shadow: 0 0 0 0 #2d7138;
       box-shadow: 0 0 0 0 #2d7138;
       -webkit-animation: ripple 2s infinite;
       -moz-animation: ripple 2s infinite;
       -ms-animation: ripple 2s infinite;
       -o-animation: ripple 2s infinite;
       animation: ripple 2s infinite;
    }
    /*--------------*/
    @-webkit-keyframes ripple {
        70% {
            box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
        }

        100% {
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        }
    }

    @keyframes ripple {
        70% {
            box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
        }

        100% {
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        }
    }
    /*--------------*/
    .kh_video_box .kh_des_video {
        text-align: center;
        font-size: 1.2rem;
        line-height: 1.2;
        color: #4c4c4c;
        font-weight: 700;
    }
    .kh_video_box .kh_readmore {
        text-align: center;
        background: #195904;
        -webkit-mask-image: url("../images/icon/button_icon.png");
        mask-image: url("../images/icon/button_icon.png");
        -webkit-mask-repeat: no-repeat;
        height: 61px;
        width: 263px;
        margin: 0 auto;
    }
    .kh_video_box .kh_readmore a {
        font-family: 'UTM Alexander', sans serif;
        line-height: 3.4;
        color: #fff;
        text-transform: uppercase;
        padding: 25px 85px; 
    }
  
    .kh_video_box .kh_readmore:hover{
        background: #e65c5c;
    }
    .kh_video_box .kh_readmore:hover a{
        color: #fff;
    }
    .kh_title {
        text-transform: uppercase;
        font-weight: 700;
        color: var(--c);
        font-size: 2.2rem;
        text-align: center;
    }
    .kh_obj_box {
    }
    .kh_obj_box .kh_list_obj {
        display: flex;
        width: 100%;
        padding: 50px 0;
    }
    .kh_des_obj {
        position: absolute;
        height: 85px;
        font-size: 10px;
        text-align: center;
        padding-left: 17px;
        width: 190px;
        font-weight: 700;
    }
    .kh_item_obj.kh_obj_up:first-child .hex div:before, 
    .kh_item_obj.kh_obj_up:first-child .hex div:after{
/*         position: relative; */
    }
    .kh_item_obj.kh_obj_down {
    }
    .kh_item_obj.kh_obj_up .button {
        top: 0;
    }
    .kh_item_obj.kh_obj_down .button {
        bottom: 0;
    }
    .kh_item_obj.kh_obj_up .kh_des_obj {
        bottom: 0;
        display: flex;
        align-items: flex-end;
    }
    .kh_item_obj.kh_obj_down .kh_des_obj {
    }
    .kh_item_obj.kh_obj_up .kh_des_obj p {
        margin-bottom: 0;
    }
    .kh_des_obj:before {
        content: '';
        position: absolute;
        height: 35px;
        left: 53%;
        transform: translateX(-50%);
        border-left: 2px dotted #222;
        top: 10px;
    }
    .kh_item_obj.kh_obj_down .kh_des_obj:before {
        top: unset;
        bottom: 10px;
    }

/*********************************************
    2. Module Dược liệu sạch chuẩn hóa
**********************************************/
    .kh_module.kh_module_part {
        background-repeat: no-repeat;
        background-position: bottom;
    }

    .kh_title_logo {
        /*! background-color: #fff; */
        /*! background-image: linear-gradient(90deg, #fff0, #fff, #fff0); */
        text-align: center;
        position: relative;
        z-index: 2;
    }
    .kh_title_logo:before {
        content: '';
        position: absolute;
        width: 33.3333%;
        height: 100%;
        left: 0;
        top: 0;
        background-image: linear-gradient(90deg, #fff0, #fff);
        z-index: -1;
    }
    .kh_title_logo::after {
        content: '';
        position: absolute;
        width: 33.3333%;
        height: 100%;
        right: 0;
        top: 0;
        background-image: linear-gradient(-90deg, #fff0, #fff);
        z-index: -1;
    }
    .kh_center_title {
        position: absolute;
        width: 35%;
        height: 100%;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        background-color: #fff;
        z-index: -1;
    }
    .kh_title_logo .kh_wrap_title {
        padding: 10px 0;
    }
    .kh_title_logo .kh_wrap_title p {
        margin-bottom: 0;
        text-transform: uppercase;
        font-weight: 600;
    }
    .kh_title_logo .kh_wrap_title p:last-child {
        /*! text-transform: uppercase; */
        font-size: 1.3rem;
        font-weight: 700;
    }
    .kh_img_logo {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .kh_content_part.row {
        padding-top: 80px;
    }

    /*box list part*/
        .kh_list_part {
            position: relative;
            padding-left: 80px; 
        }
        .kh_wrap_part {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .kh_item_part {
            position: absolute;
            width: 100%;
        }
        .kh_item_part:nth-child(1) {
            top: 0%;
        }
        .kh_item_part:nth-child(2) {
            top: 35%;
        }
        .kh_item_part:nth-child(3) {
            top: 70%;
        }
        .kh_item_part:before {
            content: '';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 25px;
            height: 25px;
            border: 3px solid #0f330d;
            border-radius: 50%;
            left: -88px;
        }
        .kh_item_part:after {
            content: '';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 15px;
            height: 15px;
            /*! border: 3px solid #0f330d; */
            border-radius: 50%;
            left: -83px;
            background: #fff;
        }
        .kh_list_part .kh_line_left {
            width: 10px;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: #638e56;
            opacity: 0.8;
            border-radius: 5px;
        }
        .kh_inner_part {
            display: flex;
            align-items: center;
        }
        .kh_inner_part .kh_line_img .kh_img_part {
            margin-bottom: 0;
            position: sticky;
            z-index: 2;
        }
        .kh_line_img {
            padding: 10px;
            border-radius: 50%;
            border: 2px solid var(--c);
            position: relative;
            cursor: pointer;
        }
        .kh_line_x {
            position: absolute;
            height: 5px;
            width: 65px;
            top: 50%;
            transform: translateY(-50%);
            background-color: var(--c);
            left: -65px;
        }
        .kh_line_img:before {
            content: unset;
            top: -2px;
            left: -2px;
            border-radius: 100% 0 0 0;
            position: absolute;
            width: 50%;
            height: 50%;
            border: 2px dotted var(--c);
            z-index: 1;
        }
        .kh_line_img:after {
            position: absolute;
            content: '';
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            border-radius: 50%;
            z-index: 1;
        }
        .kh_img_part {
            padding: 8px;
            background: var(--c);
            border-radius: 50%;
        }
        .kh_line_img:hover .kh_img_part img {
            transform: scale(1.3) !important;
        }
        .kh_inner_part .kh_line_img .kh_img_part .img-fluid {
            transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
            transform: scale(1);
        }
        .kh_dotted_top {
            position: absolute;
            width: 13px;
            height: 13px;
            top: -6.5px;
            left: 50%;
            transform: translateX(-50%);
            border: 2px solid var(--c);
            border-radius: 50%;
        }
        .kh_dotted_top::before {
            content: '';
            position: absolute;
            width: 7px;
            height: 7px;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: var(--c);
            border-radius: 50%;
            top: 49%;
        }
        .kh_line_link {
            position: absolute;
            width: 13px;
            height: 13px;
            bottom: -6.5px;
            left: 50%;
            transform: translateX(-50%);
            border: 2px solid var(--c);
            border-radius: 50%;
        }
        .kh_line_link::before {
            content: '';
            position: absolute;
            width: 7px;
            height: 7px;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: var(--c);
            border-radius: 50%;
            top: 49%;
        }
        .kh_line_link::after {
            content: "";
            position: absolute;
            width: 3px;
            height: 40px;
            left: 50%;
            top: 2px;
            transform: translateX(-50%);
            background-color: var(--c);
        }
        .kh_item_part:nth-child(3) .kh_line_link {
            bottom: unset;
            top: -6.5px;
        }
        .kh_item_part:nth-child(3) .kh_line_link::after {
            content: unset;
        }
        .kh_des_part {
            padding-left: 20px;
            flex: 1;
        }
        .kh_des_part .kh_inner_des {
            background-image: linear-gradient(45deg, #fff, #fff0);
            width: 90%;
            padding: 10px 0 10px 015px;
            font-weight: 500;
            font-size: 1.2rem;
            line-height: 1.2;
        }

    /*End*/

/*********************************************
    3. Cẩm nang sức khỏe
**********************************************/
    .kh_module.kh_module_news {
        background: url(../images/cam_nang_background.jpg) no-repeat center center;
        background-size: cover;
        padding-bottom: 90px;
    }

    .hb_news_wrap {
    }
    .hb_news_wrap .kh_title {
        display: inline-block;
        position: relative;
        padding: 15px 80px;
        background-color: var(--c);
        color: #fff;
        border-radius: 30px;
        margin-bottom: 0;
    }
    .hb_news_wrap .kh_inner_title {
        text-align: center;
        padding: 50px 0;
        position: relative;
    }
    .hb_news_wrap .kh_title:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-top: 30px solid transparent;
        border-right: 40px solid var(--c);
        border-bottom: 30px solid transparent;
        top: 50%;
        transform: translateY(-50%);
        left: -28px;
    }
    .hb_news_wrap .kh_title::after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-top: 30px solid transparent;
        border-left: 40px solid var(--c);
        border-bottom: 30px solid transparent;
        top: 50%;
        transform: translateY(-50%);
        right: -28px;
    }
    .hb_news_wrap .kh_inner_title:before {
        content: '';
        position: absolute;
        height: 3px;
        background-color: var(--c);
        top: 50%;
        left: 50%;
        width: 85%;
        transform: translate(-50%, -50%);
    }
    .hb_news_item {
        margin-bottom: 20px;
    }
    .hb_news_images {
        height: calc(2/3 * var(--content-size)/4 - 30px);
    }
    .hb_news_item_inner .hb_news_images a* {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-transition: all 0.6s ease;
      transition: all 0.6s ease;
    }
    .hb_news_item_inner .hb_news_images a:after,
    .hb_news_item_inner .hb_news_images a:before {
          background: #ffffff;
          width: 0;
          height: 100%;
          position: absolute;
          content: '';
          opacity: 0.5;
          -webkit-transition: all 0.4s ease-in-out;
          transition: all 0.4s ease-in-out;
          z-index: 1;
    }
    .hb_news_item_inner .hb_news_images a:after {
          top: 0;
          left: 0;
    }
    .hb_news_item_inner .hb_news_images a:before {
          right: 0;
          bottom: 0;
    }
    .hb_news_item_inner .hb_news_images a img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 1;
    }

    .hb_news_item_inner .hb_news_images a{
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
    }
    .hb_news_item_inner .hb_news_images a:hover img {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }
    .hb_news_item_inner .hb_news_images a:hover:after,
    .hb_news_item_inner .hb_news_images a:hover:before {
      width: 100%;
      height: 100%;
    }


    .hb_news_images .img-fluid {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .hb_news_item_name {
        font-size: 1.2rem;
        font-weight: 400;
        line-height: 1.2;
        text-align: center;
        display: -webkit-box !important;
        max-width: 100%;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .hb_news_item_title {
    }
    .hb_news_item_title a {
        color: unset;
    }

/*********************************************
    4. Sản phẩm
**********************************************/
    
    .kh_module.kh_module_product {
        background: url(../images/hai_thuong_background.jpg) no-repeat center center;
        background-size: cover;
    }
    .kh_module.kh_module_product .kh_title {
        display: inline-block;
        background: url("../images/background_text.png");
        background-position-x: 0%;
        background-position-y: 0%;
        background-repeat: repeat;
        background-size: auto;
        background-position-x: 0%;
        background-position-y: 0%;
        background-repeat: repeat;
        background-size: auto;
        background-repeat: no-repeat;
        color: #fff;
        background-size: 100% 100%;
        background-position: center;
        padding: 25px 70px;
        margin-bottom: 50px;
        font-size: 2.8rem;
    }
    .kh_module.kh_module_product .kh_inner_title {
        text-align: center;
    }
    .kh_sub_title {
        font-family: 'UTM Dinh Tran', sans serif;
        text-align: center;
        font-size: 4rem;
        line-height: 0.6;
        color: #000;
        padding: 0 0 20px;
    }
    .kh_prod_img {
        display: flex;
        justify-content: center;
        align-items: center;
        height: calc(0.8 * var(--content-size)/3 - 15px);
        transition: transform 1.5s;
    }
   /* figure.kh_prod_img.hb_product_zoom:hover{
        -ms-transform: scale(1.5);
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }*/
    .kh_inner_prod {
        text-align: center;
    }
    .kh_name_prod {
        display: inline-block;
        background-color: var(--c);
        color: #fff;
        padding: 8px 30px;
        font-weight: 600;
        font-size: 1.25rem;
        margin-bottom: 10px;
    }
    .kh_des_prod {
        color: #4c4337;
        font-weight: 600;
    }

/*********************************************
    5. Lịch sử phát triển
**********************************************/
    .gd_module_history{
        padding: 0 0 50px;
    }
    .kh_list_history {
        padding: 0 50px;
        position: relative;
    }
    .kh_wrap_img {
        padding: 20px 30px 30px;
        /*width: 250px;*/
        background-color: var(--c);
        border-radius: 20px;
        transform: scaleX(1);
        transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        margin-bottom: 50px;
        margin: 0 auto 50px;
        position: relative;
    }
    .kh_img_history {
        height: calc(3/7 * var(--content-size)/3 - 15px);
        transform: scaleY(1);
        transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    .kh_list_history .owl-item.active.center .kh_wrap_img .kh_img_history {
        height: calc(3/7 * var(--content-size)/3);
    }
    .kh_wrap_img .kh_img_history * {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-transition: all 0.6s ease;
      transition: all 0.6s ease;
    }
    .kh_wrap_img .kh_img_history:after,
    .kh_wrap_img .kh_img_history:before {
          background: #ffffff;
          width: 0;
          height: 100%;
          position: absolute;
          content: '';
          opacity: 0.5;
          -webkit-transition: all 0.4s ease-in-out;
          transition: all 0.4s ease-in-out;
          z-index: 1;
    }
    .kh_wrap_img .kh_img_history:after {
          top: 0;
          left: 0;
    }
    .kh_wrap_img .kh_img_history:before {
          right: 0;
          bottom: 0;
    }
    .kh_wrap_img .kh_img_history img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 1;
    }

    .kh_wrap_img .kh_img_history {
        /*display: block;*/
        width: 100%;
        /*height: 100%;*/
        overflow: hidden;
        position: relative;
    }
    .kh_wrap_img .kh_img_history:hover img {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }
    .kh_wrap_img .kh_img_history:hover:after,
    .kh_wrap_img .kh_img_history:hover:before {
      width: 100%;
      height: 100%;
    }
    .kh_img_history img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    .kh_list_history .owl-item.active.center {
    }
    .kh_list_history .owl-item.active.center .kh_wrap_img {
        transform: scaleX(110%);
        padding: 20px 25px 15px;
        width: 300px;
    }
    .kh_name_history {
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
        display: -webkit-box !important;
        max-width: 100%;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
    }
    .kh_list_history .owl-stage-outer {
        position: relative;
    }
    .kh_list_history .owl-stage-outer::before {
        content: '';
        position: absolute;
        bottom: 50px;
        width: 69%;
        left: 50%;
        height: 10px;
        background-color: var(--c);
        transform: translateX(-50%);
    }

    .kh_inner_year {
        padding-top: 30px;
        position: relative;
        font-weight: 600;
        font-size: 1.2rem;
    }
    .kh_inner_year:before {
        content: ;
        content: '';
        position: absolute;
        width: 30px;
        height: 30px;
        background-color: var(--c);
        top: -4px;
        border-radius: 50%;
        left: 50%;
        transform: translateX(-50%);
    }
    .kh_list_history .owl-item.active.center .kh_inner_year {
        font-size: 1.5rem;
    }
    .kh_list_history .owl-nav {
        position: absolute;
        bottom: 0;
        width: 100%;
        /*! height: 100%; */
        left: 50%;
        transform: translateX(-50%);
    }
    .kh_list_history .owl-nav .owl-prev, .kh_list_history .owl-nav .owl-next {
        position: absolute;
        bottom: 30px;
        font-size: 2rem;
        left: 75px;
        font-weight: 600;
        cursor: pointer;
    }
    .kh_list_history .owl-nav .owl-next {
        left: unset;
        right: 75px;
    }
    .kh_wrap_img:before {
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-top: 50px solid var(--c);
        bottom: -40px;
        z-index: 1;
        left: 50%;
        transform: translateX(-50%) rotate(0deg);
    }

/*********************************************
    7. Module XXX
**********************************************/
    @media screen and (max-device-width: 1600px) and (min-device-width: 1440px) {

    }
    @media screen and (min-device-width: 1600px) and (max-device-width: 1800px) {

    }
    @media screen and (max-device-width: 1536px) and (min-device-width: 1440px) {

    }
    @media screen and (min-device-width: 1200px) and (max-device-width: 1440px) {
        .kh_item_obj {
            flex: 0 0 23%;
            max-width: 23%;
        }
        .kh_wrap_part {
            width: 90%;
        }
        .kh_list_history .owl-stage-outer::before {
            bottom: 45px;
        }
        .kh_module.kh_module_object{
            padding-top: 100px
        }
        .kh_list_history .owl-item.active.center .kh_wrap_img{
            width: 100%;
        }
    }

    @media only screen and (max-width: 1024px) and (min-width: 768px) {
        .hex {
            width: 80px;
            height: 150.205px;
        }

        .hex div {
            width: 60px;
            height: 105.2px;
        }

        .button::before {
            width: 60%;
            height: 60%;
            left: 40%;
            top: 31%;
        }
        .kh_module.kh_module_object {
            padding-top: 40px;
        }
        .kh_item_obj {
            flex: 0 0 17%;
            max-width: 17%;
            height: 275px;
        }

        .kh_item_obj.kh_obj_up .button {
            top: 50px;
        }

        .kh_obj_box .kh_list_obj {
            padding: 25px 0;
        }

        .kh_img_part {
            padding: 0px;
        }

        .kh_des_part .kh_inner_des {
            width: 60%;
        }
        .button:hover .hex:first-child {
            opacity: unset;
            transform: unset;
        }
        .button:hover .hex:last-child {
            opacity: unset;
            transform: unset;
        }

        .kh_wrap_part {
            width: 85%;
        }

        .kh_list_part {
            padding-left: 50px;
        }

        .kh_line_x {
            left: -35px;
        }

        .kh_item_part::before {
            left: -57px;
        }

        .kh_item_part::after {
            left: -52.5px;
        }

        .kh_des_part .kh_inner_des {
            width: 80%;
        }

        .kh_prod_img {
            height: calc(1.2 * var(--content-size)/3 - 15px);
        }
        .kh_line_img:hover .kh_img_part img {
            transform: scale(1.18) !important;
        }
        .kh_list_history .owl-item.active.center .kh_wrap_img {
            padding: 20px 15px 15px;
        }
        .kh_wrap_img {
            padding: 20px 20px 30px;
            width: 100%;
        }
        .kh_list_history .owl-stage-outer::before {
            bottom: 47px;
        }
        .kh_item_obj_mb {
            flex: 0 0 50%;
            max-width: 50%;
            padding: 0 10px;
        }
        .kh_img_obj_mb {
            height: calc(1/2 * var(--content-size)/3 - 30px);
        }
        .kh_img_obj_mb .img-fluid {
            height: 100%;
        }
        .kh_img_obj_mb {
            display: flex;
            justify-content: center;
        }
        .kh_item_obj_mb {
            margin-bottom: 20px;
        }
        .kh_obj_box .kh_list_obj {
            flex-wrap: wrap;
            margin: 0 -10px;
        }
        .hb_news_wrap .kh_title::before {
            left: -23px;
        }
        .hb_news_wrap .kh_title::after {
            right: -23px;
        }
        .kh_line_link::after {
            height: 50px;
        }
        .hb_doi_tuong_img_mb,
        .hb_cong_dung_img_mb,
        .hb_thanh_pham_img_mb{
            margin: 0 auto;
            width: 60%;
            align-items: center;
            justify-content: center;
            display: flex;
        }
        .hb_doi_tuong_img_mb img,
        .hb_cong_dung_img_mb img,
        .hb_thanh_pham_img_mb img{
            max-width: 60%;
        }
    }


    @media screen and (max-device-width: 834px) and (min-device-width: 768px) {
        .kh_wrap_part {
            width: 90%;
        }
        .kh_list_part {
            padding-left: 35px;
        }
        .kh_line_x {
            left: -20px;
        }
        .kh_item_part::before {
            left: -42px;
        }
        .kh_item_part::after {
            left: -37.5px;
        }
        .kh_title_logo .kh_wrap_title p {
            font-size: 10px;
        }
        .kh_title_logo .kh_wrap_title p:last-child {
            font-size: 1.1rem;
        }
        .kh_prod_img img {
            max-width: 80%;
        }
        .kh_module.kh_module_object {
            padding-bottom: 0;
        }
        .hb_news_wrap .kh_inner_title {
            padding: 0;
            margin-bottom: 40px;
        }
        .kh_img_history {
            height: calc(1 * var(--content-size)/3 - 15px);
        }
        .kh_list_history .owl-stage-outer::before {
            bottom: 40px;
        }
        .kh_video_box .kh_img_video {
            padding-right: unset;
            margin-bottom: 20px;
        }
        .kh_video_box .kh_img_video .kh_btn_play {
            font-size: 40px;
        }
        .kh_video_box .kh_des_video {
            font-size: 1.1rem;
        }
        .kh_line_img {
            flex: 0 0 25%;
            max-width: 25%;
        }
        .kh_des_part .kh_inner_des {
            font-size: 1rem;
        }
        .kh_line_link::after {
            height: 60px;
        }
        .kh_module.gd_module_history {
            padding-bottom: 0;
        }
        .kh_img_history {
            height: calc(1.4 * var(--content-size)/3 - 15px);
        }
    }

    @media only screen and (max-width: 767px) and (min-width: 577px) {
    }

    @media screen and (max-device-width: 576px) {
        .kh_title{
            font-size: 1.72rem;
        }
        .kh_module{
            padding: 30px 0;
        }
        .gd_banner .owl-dots{
            bottom: 0;
        }
        .kh_list_history .owl-nav .owl-prev{
            left: 0;
        }
        .kh_list_history .owl-nav .owl-next {
            right: 0;
        }
        .gd_banner_items .owl-nav{
            display: none;
        }
    /*Module object*/
        .kh_module.kh_module_object{
            padding:30px 0 ;
        }
        .kh_video_box .kh_img_video{
            height: auto;
            padding-right: 0;
            margin-bottom: 30px;
        }
        .kh_video_box .kh_img_video .kh_btn_play{
            font-size: 50px;
        }
        .kh_video_box .kh_img_video .kh_btn_play{
            left: 50%;
        }
        .kh_video_box .kh_readmore{
            margin-top: 30px;
            margin-bottom: 30px;
            display: none;
        }
        .kh_obj_box .kh_list_obj{
            flex-wrap: wrap;
            padding: 30px 0 0;
        }
        .kh_item_obj_mb{
            flex: 0 0 100%;
            max-width: 100%;
            margin-bottom: 30px;
        }
        .kh_item_obj_mb:last-child{
            margin-bottom: 0;
        }
        .kh_inner_obj_mb .kh_img_obj_mb img{
            margin: 0 auto;
            display: block;
            max-width: 60%;
        }
        .kh_list_obj .owl-dots {
            position: absolute;
            bottom: -15%;
            display: flex;
            padding: 3px 10px;
            border-radius: 5px 5px 0 0;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .kh_list_obj .owl-dots:before, .kh_list_obj .owl-dots::after{
            content: "";
            bottom: 0;
            position: absolute;
            display: none;
        }

        .kh_list_obj .owl-dots::after {
            border-left: 0px solid transparent;
            border-right: 15px solid transparent;
            right: -14px;
            border-bottom: 24px solid #fff;
        }

        .kh_list_obj .owl-dots::before {
            border-left: 15px solid transparent;
            border-top: 0px solid transparent;
            border-bottom: 24px solid #fff;
            left: -14px;
        }

        .kh_list_obj .owl-dot{
            padding: 5px;
        }

        .kh_list_obj .owl-dots .owl-dot span{
            display: block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background:#2d7138; 
            transition: all 300ms ease-in 0ms;
        }

        .kh_list_obj .owl-dot.active span {
            width: 70px;
            background: #2d7138;
            border-radius: 25px;
        }

        .kh_des_obj_mb{
            width: 80%;
            margin: 0 auto;
            text-align: center;
        }
    /*End*/

    /*Module part*/
        .kh_module_part{
            height: 150vh;
            background-size: cover;
        }
        .kh_content_part.row{
            padding-top: 30px;
        }
        .kh_wrap_part{
            left: 0;
            margin-top: 30px;
            padding: 0 15px;
        }
        .kh_item_part{
            position: relative;
        }
        .kh_item_part:nth-child(1){
            margin-bottom: 35px;
        }
        .kh_item_part:nth-child(2){
            margin-bottom: 35px;
        }
        .kh_item_part:after{
            display: none;
        }
        .kh_item_part:before{
            display: none;
        }
        .kh_line_x{
            display: none;
        }
        .kh_des_part .kh_inner_des{
            width: 100%;
        }
        .kh_dotted_top{
            left: 47.5%;
            top: -7px;
        }
       .kh_dotted_top::before{
            width: 6px;
            height: 6px;
            left: 46.99%;
            top: 45%;
       }
        .kh_des_part{
            flex:inherit;
        }
    /*End*/

    /*Module News*/
        .kh_module.kh_module_news{
            padding-bottom: 30px;
        }
        .hb_news_wrap .kh_inner_title:before{
            display: none;
        }
        .hb_news_wrap .kh_title{
            padding: 22px 40px;
        }
        .hb_news_wrap .kh_inner_title{
            padding: 0 0 30px;
        }
        .hb_news_images{
            height: calc(40/15 * var(--content-size)/4 - 30px);
        }
        .hb_news_item_wrap_inner .owl1slider .owl-nav {
            display: block;
            position: absolute;
            top: 30%;
            transform: translateY(-35%);
            width: 100%;
            color: #fff;
        }
        .hb_news_item_wrap_inner .owl1slider .owl-nav .owl-prev {
            position: absolute;
            left: 0;
            font-size: 2rem;
            cursor: pointer;
            background: #2d7138;
            width: 49px;
            height: 49px;
            text-align: center;
            padding: 5px 0;
        }

        .hb_news_item_wrap_inner .owl1slider .owl-nav .owl-next {
            position: absolute;
            right: 0;
            font-size: 2rem;
            cursor: pointer;
            background: #2d7138;
            width: 49px;
            height: 49px;
            text-align: center;
            padding: 5px 0;
        }
    /*End*/
    /*Module product*/
        .kh_sub_title{
            font-size: 3rem;
        }
        .kh_module.kh_module_product .kh_title{
            padding: 20px 50px;
            margin-bottom: 30px;
            font-size: 1.8rem;
        }
        .kh_prod_img{
            height: unset;
        }
        .kh_prod_img img{
            width: 100%;
        }
        .kh_name_prod{
            font-size: 1rem;
        }
        .kh_item_prod.col-md-7.col-sm-12.col-12 .kh_des_prod{
            margin-bottom: 30px;
        }
    /*End*/
    
    /*Module history"*/
        .gd_module_history{
            padding: 30px 0 0;
        }
        .kh_inner_year{
            padding-top: 40px;
        }
        .kh_list_history .owl-nav{
            bottom: 3px;
        }
        .kh_img_history{
            height: unset;
        }
    /*End*/
    }

    @media screen and (max-device-width: 414px) {
        .side-contact::before{
            left: 14%;
        }
    }

    @media screen and (max-device-width: 375px) {
        .kh_img_logo{
            margin: 0;
        }
        .kh_title_logo .kh_wrap_title p{
            font-size: 0.6rem;
        }
        .side-contact::before{
            left: 15%;
        }
        .kh_module_part {
            height: 125vh;
            background-size: cover;
        }
        .kh_module_about {
            height: 100vh;
        }
    /*Module Mews*/
        .hb_news_wrap .kh_title{
            padding: 22px 25px;
        }
    /*End*/
    }
@media screen and (max-width: 360px){
    .kh_module_part {
        height: 150vh;
        background-size: cover;
    }
}
@media screen and (max-width: 320px){
    .kh_module_part{
        height: 165vh;
    }
}