/* section 2 */
.section_head {
    text-align: center;
    max-width: 1020px;
    width: 100%;
    margin: auto;
}

.section_linhvuc {
    padding: 60px 0;
}

@media screen and (min-width:768px) {
    .section_title {
        font-size: 36px;

    }

    /* .section_desc {
        font-size: 18px;
    } */
}

.linhvuc-item {
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
}

.lv_content {
    background-color: var(--c-067940);
    padding: 16px;
    height: 100%;
}

.lv_content .title,
.lv_content .desc {
    color: #fff;
    text-align: center;
}

.section_linhvuc .box-btn {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.section_linhvuc .box-btn a {
    padding: 12px 20px;

    border-radius: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #fff !important;
    font-weight: 500;
}

.section_linhvuc .box-btn a svg {
    width: 20px;
    height: 20px;
}

.section_linhvuc .box-btn a.btn-lh {
    background-color: rgb(117, 175, 66, 1);
}

.section_linhvuc .box-btn a.btn-lh:hover {
    background-color: rgb(2, 97, 61, 1);
}

.section_linhvuc .box-btn a.btn-gp {
    background-color: #fff;
    border: solid 1px rgb(2, 97, 61);
    color: rgb(2, 97, 61) !important;
}

.section_linhvuc .box-btn a.btn-gp svg {
    fill: #fff;
}

.section_linhvuc .box-btn a.btn-gp svg path {
    stroke: rgb(2, 97, 61);
}

.section_linhvuc .box-btn a.btn-gp:hover {
    color: #fff !important;
    background-color: rgb(2, 97, 61);
}

.section_linhvuc .box-btn a.btn-gp:hover svg {
    fill: rgb(2, 97, 61);
}

.section_linhvuc .box-btn a.btn-gp:hover svg path {
    stroke: #fff;
}

/* rgb(2 97 61 */
/* section 3 */
.section_sanphamnoibat {
    padding: 60px 0;
}

.section_sanphamnoibat .section_title {
    color: #0f2c49;
}

.section_sanphamnoibat .lte-watermark {
    top: 40px;
}

.lte-watermark {
    white-space: nowrap;
    font-size: 250px;
    font-weight: 800;
    line-height: 260px;
    overflow: hidden;
    display: block;
    position: absolute;
    top: 26%;
    pointer-events: none;
    z-index: 0;
    margin-top: -2px;
    padding-left: 20px;
    padding-right: 20px;
    zoom: 1;
    opacity: .08;
    color: transparent;
    -webkit-text-stroke: 1px #000;
    box-sizing: border-box;
    letter-spacing: 0;
    font-family: "barlow", sans-serif;
    transform: translate(-50%, -50%);
    margin-left: 0;
    left: 50%;
}

.spnb_slide .swiper-pagination {
    bottom: 0 !important;
}

.spnb_slide .swiper-pagination-bullet-active {
    background-color: #067940 !important;
}

/* section 4 */
.section_gioithieu {
    padding: 60px 0;
}

.section_gioithieu .section_head .section_title {
    text-transform: uppercase;
    position: relative;
    margin-bottom: 70px;
}

.section_gioithieu .section_head .section_title::after {
    background: url(./images/logoshiga_favicon.png) no-repeat;
    bottom: -35px;
    content: "";
    background-size: 100%;
    height: 25px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 26px;
}

.section_gioithieu .section_head .section_title span {
    position: relative;
}

.section_gioithieu .section_head .section_title span:after,
.section_gioithieu .section_head .section_title span:before {
    background: var(--c-067940);
    bottom: -25px;
    content: "";
    height: 1px;
    position: absolute;
    width: calc(50% - 20px);
    right: 0;
}

.section_gioithieu .section_head .section_title span:before {
    left: 0;
}

.section_gioithieu .box_right .box-btn {}

/* section 5 */
.section_camket .section_head {
    margin-bottom: 40px;
}

.section_camket {
    padding: 60px 0;
}

.commit-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.commit-item {
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    border-radius: 20px;
}

.commit-icon {
    margin-bottom: 20px;
}

.commit-item .commit-icon img {
    display: block;
    transition: transform 0.5s linear;
    /* quay mượt trong 1s */
}

.commit-item:hover .commit-icon img {
    transform: rotateY(360deg);
    /* quay quanh trục Y (trái -> phải) */
}

.commit-box .commit-title {
    color: #333;
    position: relative;
    text-transform: capitalize;
}

.commit-box .commit-title::after {

    content: "";
    width: 60px;
    height: 5px;
    background-color: var(--c-067940);
    position: relative;
    left: 0;
    bottom: 0;
    display: block;
    margin-top: 20px;
    transition: width 0.9s ease;
    /* hiệu ứng mượt */
}

.commit-item:hover .commit-title::after {
    transition: width 0.9s ease;
    width: 100%;
}

.commit-des {
    font-style: italic;

}

/*  */
.section_duan {
    /* background-color: #f4f8f4; */
    margin: 0px 0px 0px 0px;
    padding: 60px 0 60px 0;
}

.section_duan .section_head {
    margin-bottom: 60px;
}

.project-carousel .project-style-1 .banner-content {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.project-carousel .project-style-1 .banner-content-1:before {
    content: "";
    background: linear-gradient(0deg, #018C81 0%, rgba(168, 227, 4, 0) 100%);
    width: 100%;
    height: 0%;
    display: block;
    position: absolute;
    bottom: 0;
    transition: all .4s;
}

.project-carousel .project-style-1 .banner-content:hover:before {
    height: 65%;
}

.project-style-1.project-style-1 .banner-text {
    padding: 35px 30px;
}

.project-style-1.project-style-1 .banner-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;

}

.project-style-1 .banner-text {
    position: absolute;
}

.banner-text {

    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.project-style-1 .banner-content-2 .banner-text {
    max-width: 86.67%;
    margin: -50px auto 0;
    border-radius: 12px;
    transition: all .4s;
    position: relative;
}

.project-style-1 .banner-content h3.sub-heading {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 30px;
    background: #FFFFFF75;
    font-weight: 600;
    font-size: 11px;
    line-height: 18px;
    text-transform: uppercase;
    border: 1px solid #FFFFFF2E;
    backdrop-filter: blur(36px);
    width: fit-content;
}

.project-style-1.banner-content-2 h3.sub-heading {
    border: 1px solid #E9EAE9;
    backdrop-filter: blur(36px);
}

i.icon-base,
i.icon-base-2 {
    display: inline-block;
}

.btn-line .icon-base-2,
.btn-line-black .icon-base-2 {
    height: 20px;
}

i.icon-base:before,
i.icon-base-2:before {
    content: url(./images/arrow-2.png);
    vertical-align: -6px;
    display: inline-block;
    margin-left: 1px;
    height: 20px;
}

.project-style-1 .banner-content-2 i.icon-base-2:before {
    transition: all .4s;
}

.project-style-1 .button.btn-line {
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    text-transform: capitalize;
    position: unset;
}

.project-style-1 .button.btn-line::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.project-style-1 .button.btn-line:hover {
    box-shadow: none;
}

.project-carousel .project-style-1 .banner-content-1 .wrapper-button {
    display: none;
    transition: all .4s;
}

.project-carousel .banner-content-1:hover .wrapper-button {
    display: block;
}

.project-carousel .box-btn {
    margin-top: 60px;
}

/* style 2 */
.project-item.project-style-2 {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.project-style-2 .project-thumb {
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
    border-radius: 8px;
}

.project-style-2 .project-thumb img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    object-position: center;
}

.project-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.project-meta span {
    background-color: #def7ec;
    padding: 2px 10px;
    border-radius: 8px;
    color: var(--color-4);
    font-size: 12px;
    font-weight: 600;
}

.project-desc {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* number of lines to show */
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* .project-style-2.hover-zoom{
    transition: ease-in-out 0.3s;
}
.project-style-2.hover-zoom:hover img{
    transform: scale(1.1);
} */
/* Section 7 */
.homepage_section_7 {
    padding: 60px 0;
    background-color: #f9fafb;
}

.section_doitac .section_head {
    text-align: left;
}

.homepage_section_7 .swiper-container {
    overflow: hidden;
}

.doitac_item:hover {
    border: solid 1px #eee;
    border-radius: 8px;
    overflow: hidden;
}

/* section 8 */
.section_lh {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
}

.section_lh .form_contact .input-wrap {
    position: relative;
}

.input-wrap::after {
    content: "";
    width: 25px;
    height: 25px;
    position: absolute;
    left: 10px;
    top: 11px;

    background-image: url(./images/user.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.section_lh .form_contact .input-wrap input[type="email"] {
    padding-left: 50px;
    padding-right: 102px;
    height: 46px !important;
    border-radius: 8px !important;
    margin-bottom: 0;
    background-color: #f9fafb;
    border: solid 1px #d1d5db;
    box-shadow: none !important;
}

.section_lh .form_contact .wpcf7-submit {
    margin: 0;
    position: absolute;
    top: 0;
    right: 0;
    height: 46px !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    text-transform: inherit;
}

.section_lh .form_contact .wpcf7-spinner {
    display: none;
}

/* reponsive */
@media screen and (min-width:375px) {
    .section_gioithieu .section_head .section_title br {
        display: none;
    }
}

@media screen and (max-width:768px) {
    .homepage_section_2 .row>.col {
        margin-bottom: 20px;
    }

    .commit-box {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media screen and (max-width:387px) {
    .commit-box {
        grid-template-columns: repeat(1, 1fr);
    }

    .section_gioithieu .section_head .section_title span {
        width: 100%;
        display: block;
    }
}

@media screen and (max-width:375px) {
    .commit-box {
        grid-template-columns: repeat(1, 1fr);
    }

    .homepage_section_8.section_lh .section_head {
        font-size: 16px;
    }
}