/* Text Hide */



.text-split {

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: normal !important;

    -webkit-box-orient: vertical !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 3 !important;

}



.text-split-1 {

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: normal !important;

    -webkit-box-orient: vertical !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 1 !important;

}



.text-split-2 {

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: normal !important;

    -webkit-box-orient: vertical !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 2 !important;

}



.text-split-3 {

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: normal !important;

    -webkit-box-orient: vertical !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 3 !important;

}



.text-split-4 {

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: normal !important;

    -webkit-box-orient: vertical !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 4 !important;

}



.text-split-5 {

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: normal !important;

    -webkit-box-orient: vertical !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 5 !important;

}



.text-split-6 {

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: normal !important;

    -webkit-box-orient: vertical !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 6 !important;

}



.text-split-7 {

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: normal !important;

    -webkit-box-orient: vertical !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 7 !important;

}



.text-split-10 {

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: normal !important;

    -webkit-box-orient: vertical !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 10 !important;

}



/* header */

.head-top {

    height: 20px;

    background: #D09600;

}



.group-menu {

    position: relative;

}



.logo-menu {

    width: 70px;

}



.logo-head {

    position: absolute;

    top: -10px;

    left: 0px;

}



.nhanbaogia {

    background: #c0031b;

    border-radius: 5px;

    padding: 10px 10px;

}



.nhanbaogia a {

    color: white;

    font-weight: bold;

}



/*  */

.grid-product-menu {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-left: 5px solid #2E8B57;

    border-top: 5px solid #2E8B57;

}



.grid-product-menu .box-product .item-product {

    border-right: 5px solid #2E8B57;

    border-bottom: 5px solid #2E8B57;

}



.show_padding {

    position: relative;

}



.grid-product-seller {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

}



.grid-product-seller .box-product .item-product {

    border: 5px solid #2E8B57;

    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

    margin-bottom: 15px;

}



.owl-page .box-product .item-product {

    border: 5px solid #2E8B57;

    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

    margin-bottom: 15px;

}



/* Tiêu chí */

.wrap-tieuchi {

    padding: 70px 0px 20px 0px;

    background: url(../imgs/bgr_tieuchi.png) no-repeat;

    background-size: cover;

}



.tieuchi-item {

    height: 130px;

    /* width: 250px; */

    /* border: 5px solid transparent; */

    background: radial-gradient(circle, #ffde59, #ff914d);

    background-clip: border-box;

    padding: 5px;

    border-radius: 5px;

}



.tieuchi-info {

    background: white;

    height: -webkit-fill-available;

    width: -webkit-fill-available;

    border-radius: 5px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}



.tieuchi-info .tieuchi-name {

    color: #e2a300;

    font-size: 21px;

    font-weight: bold;

    text-transform: uppercase;

}



.tieuchi-info .tieuchi-desc {

    color: #e2a300;

    font-size: 33px;

    font-weight: bold;

}



.slogan-tieuchi {

    text-align: center;

    color: white;

    font-size: 20px;

    width: 900px;

    margin: auto;

    margin-top: 20px;

}



/* giới thiệu */



.wrap-gioithieu {

    padding: 50px 0px;

}



.box-main-gioithieu {

    display: flex;

    gap: 50px;

}



.img-gioithieu {

    width: 50%;

    border-radius: 5px;

}



.info-gioithieu {

    padding: 40px 0px;

    width: 50%;

}



/* .desc-gioithieu p {

    line-height: 30px;

} */



.desc-gioithieu {

    line-height: 30px;

    color: black;

}



.info-gioithieu a button {

    margin-top: 15px;

}



/* sản phẩm */

.product-info .product-name {

    font-size: 18px;

    font-weight: bold;

    margin: 20px 0px 12px 0px;

    font-family: 'font4'

}



.product-info .product-desc {

    font-family: 'font1'



}



/* khách hàng và video */

.wrap-group-khachhang-video {

    background: url(../imgs/bgr_video.png) no-repeat;

    background-size: cover;

    padding: 50px 0px;

}



.title-group {

    margin-bottom: 10px;

}



.title-group span {

    font-size: 22px;

    color: #f1ca00;

    font-weight: bold;

    text-transform: uppercase;

}



.wrap-group-khachhang-video .wrap-content {

    display: flex;

    gap: 30px;

}



.group-khachhang,

.group-video {

    width: 50%;

}



.slick-slide {

    margin-bottom: 20px;

}



.khachhang-item {

    display: flex;

    background: white;

    position: relative;

}



img.phay {

    position: absolute;

    top: 15px;

    left: 15px;

}



.khachhang-info {

    width: calc(100% - 275px);

    padding: 30px 20px 0px 40px;

}





.khachhang-img {

    width: 275px;

}



.khachhang-info .khachhang-name {

    font-size: 18px;

    color: #004aad;

    font-weight: bold;

    text-align: center;

}



.khachhang-info .khachhang-desc {

    color: black;

}



/* tin tức */

.wrap-news {

    padding: 50px 0px;

    position: relative;

}



.xem-them-news {

    position: absolute;

    bottom: 70px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 2;

}



.news-info .news-name {

    font-size: 17px;

    font-weight: bold;

    margin: 20px 0px 10px 0px;

    line-height: 25px;

    transition: 0.7s;

    color: black;

}



.news-name:hover {

    color: #fc0;

    transition: 0.7s;

}



.news-info .news-desc {

    font-family: 'font1';

    color: gray;

}



.news-info .news-about {

    float: right;

    margin: 0px 20px;

    padding: 10px 20px;

    background: #c0031b;



}



.news-info .news-about a {

    color: white;

}





/* liên hệ chúng tôi */

.wrap-contact {

    background: #c0031b;

    padding: 15px 0px;

    color: white;

}



/* dịch vụ */

.wrap-dichvu {

    padding: 50px 0px;

}



.box-main-dichvu {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

}



a.center {

    display: flex;

    justify-content: center;

    margin-top: 20px;

}



.dichvu-img {

    border-radius: 5px;

}



.dichvu-info {

    margin-top: 10px;

}



.dichvu-info .dichvu-name {

    color: black;

    text-align: center;

    font-size: 18px;

    transition: 0.7s;

}



.dichvu-info .dichvu-name:hover {

    transition: 0.7s;

    color: #fc0;

}



.dichvu-info .dichvu-desc {

    color: gray;

}



/* đăng ký và tuyển dụng */

.wrap-dangky-tuyendung {

    background: url(../imgs/bgr_dangky.png) no-repeat;

    background-size: 100% 100%;

    padding: 50px 0px;

}



.wrap-dangky-tuyendung .wrap-content {

    display: flex;

    gap: 30px;

}



.group-dangky {

    width: 50%;

}



.group-dangky p {

    color: white;

}



.group-tuyendung {

    width: 50%;

}



.tuyendung-item {

    display: flex;

    background: white;

}





.tuyendung-item:hover .tuyendung-info .tuyendung-name {

    color: #f1ca00;

    transition: 0.5s;

}



.tuyendung-item .tuyendung-img {

    width: 235px;

}



.tuyendung-item .tuyendung-info {

    width: calc(100% - 235px);

    padding: 40px 20px;

}



.tuyendung-info .tuyendung-name {

    color: black;

    font-size: 18px;

    font-weight: bold;

    transition: 0.5s;

}



.tuyendung-info .tuyendung-desc {

    color: black;

}



/* From Uiverse.io by Na3ar-17 */

.container {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    display: flex;

    justify-content: center;

    align-items: center;

}



.label {

    position: relative;

    display: block;

    width: 100%;

    display: flex;

    border-radius: 6px;

    border: 1px solid #373737;

    padding: 8px 10px;

    text-align: left;

    background: #f4f8fab0;



    .icon {

        position: absolute;

        top: 53%;

        right: 0;

        transform: translate(-50%, -50%);

        transition: all 0.3s ease;

        color: gray;

    }



    .input {

        background-color: transparent;

        outline: none;

        border: none;

        color: white;

        font-size: 16px;

        resize: none;

    }

}



.input-group-newsleter {

    margin-bottom: 15px;

}



.input-group-newsleter textarea {

    width: 100%;

    padding: 8px 10px;

    background-color: transparent;

    color: white;

    font-size: 16px;

    resize: none;

    border-radius: 6px;

    border: 1px solid #373737;

    background: #f4f8fab0;

}





/* menu seller */

/* menu */

.box-main-menu {

    display: flex;

    justify-content: space-between;

}



.nav-menu {

    width: 280px;

    background: #2E8B57;

}







.choose_list {

    display: flex;

    flex-direction: column;

    align-items: center;

    padding-top: 45px;

}



.choose_list span {

    color: white;

    cursor: pointer;

    font-size: 25px;

    font-family: 'font2';

}



.title-menu {

    font-size: 30px !important;

    font-family: 'font1' !important;

    font-weight: 600 !important;

}



/* feedback */

.wrap-feedback {

    background: url(../imgs/bgr_feedback.png) no-repeat;

    background-size: cover;

    padding: 45px 0px;

}



.feedback-item img {

    border-radius: 50%;

    border: 1px dashed white;

    width: 170px;

    height: 170px;

}



.feedback-item {

    display: flex;

    flex-direction: column;

}



.box-main-feedback {

    height: 535px;

}



.img-feedback {

    width: 170px;

    height: 170px;

    margin-bottom: 20px;

}



.owl-item.active.center .feedback-item {

    margin-top: 330px;

    transition: all .2s linear;

    flex-direction: row;

}



.owl-item.active.center .feedback-item .info-feedback {

    position: absolute;

    z-index: 1000;

    right: -200px;

    margin-left: 190px;

}



.info-feedback {

    color: white;

}



.info-feedback .desc-feedback {

    font-size: 14px;

    font-family: 'font1';

    font-weight: 500;

}



.info-feedback .name-feedback {

    font-size: 14px;

    font-family: 'font1';

    font-weight: 800;

}



/* album */

.wrap-album {

    padding: 50px 0px;

}



.box-main-album {

    display: grid;

    grid-template-columns: repeat(15, 1fr);

    gap: 20px;

}



.album-image-item img {

    width: 100%;

    height: 100%;

    object-fit: fill;

}



.album-image-item {

    height: 295px;

}



.album-image-item-0 {

    grid-column: 1/5;

    grid-row: 1/2;

}



.album-image-item-1 {

    grid-column: 5/9;

    grid-row: 1/2;

}



.album-image-item-2 {

    grid-column: 9/16;

    grid-row: 1/2;

}



.album-image-item-3 {

    grid-column: 1/9;

    grid-row: 2/3;

}



.album-image-item-4 {

    grid-column: 9/16;

    grid-row: 2/3;

}



/* video */

/* .wrap-video {

    position: relative;

}



.section-video {



    width: 280px;

    position: absolute;

    top: 45px;

    right: 130px;

}





.slider-nav .slick-slider {

    margin: 0 -15px;

}



.slider-nav .slick-slide {

    margin: 10px;

    text-align: center;

}



.slider-nav .slick-list {

    height: 530px !important

}



.slider-nav img {

    border: 1px solid white !important;

    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

}



.slider-nav .slider-for .slick-slide {

    padding: 10px;

}



.slider-for .box-video a strong::after {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translateX(-50%);

    transform: translateY(-50%);

    width: 90px;

    height: 90px;

    background: url(../imgs/video.png) center center no-repeat;

    background-size: 100% 100%;

    content: '';

}



.box-video a strong img {

    height: 600px !important;

} */



.wrap-video {

    padding: 50px 0px;

}



.box-main-video {

    display: flex;

    position: relative;

}



.box-video {

    margin: 0px 5px;

}



.box-video a strong {

    border: 5px solid #ea1e25;

    border-radius: 60px;

}



.item-video {

    position: relative;

}



.box-video a .play-video {

    position: absolute;

    left: calc(50% - 80px / 2);

    top: calc(50% - 80px / 2);

    right: 0;

    bottom: 0;

    width: 80px;

    height: 80px;

    background: url(../imgs/play2.png) center center no-repeat;

    background-size: 100% 100%;

    content: '';

    z-index: 5;

}



.logo {

    position: relative;

}



.logo::before {

    content: '';

    position: absolute;

    background: url(../imgs/map.png) no-repeat;

    bottom: -50px;

    left: 0px;

    height: 138px;

    width: 125px;

}



.slick-youtube {

    width: 60%;

    z-index: 2;

    left: -100px;

}



.operation {

    width: 50%;

    height: 170px;

    display: flex;

    background: #c0031b;

    position: absolute;

    right: 0px;

    top: 50%;

    transform: translateY(-50%);

    z-index: 1;

    padding-left: 80px;

}



.operation .title-video {

    font-size: 50px;

    color: white;

    font-weight: bold;

    padding: 0px 20px;

}



.slick-youtube .slick-prev:before {

    display: none
}



.slick-youtube .slick-next:before {

    display: none
}



.slick-youtube .slick-prev {



    right: -34%;

    top: 60%;

    left: unset;

    width: 50px;

    height: 50px;

}



.slick-youtube .slick-prev img {

    width: 50px;

    height: 50px;

}



.slick-youtube .slick-next {

    right: -40%;

    top: 60%;



    left: unset;

    width: 50px;

    height: 50px;

}



.slick-youtube .slick-next img {

    width: 50px;

    height: 50px;

}









/*xem thêm */

.button {

    position: relative;

    transition: all 0.3s ease-in-out;

    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);

    padding-block: 0.5rem;

    padding-inline: 1.25rem;

    background-color: #e2a300;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffff;

    gap: 10px;

    border: 3px solid #e2a300;

    outline: none;

    overflow: hidden;

    font-size: 15px;

    cursor: pointer;

}



.icon {

    width: 24px;

    height: 24px;

    transition: all 0.3s ease-in-out;

}



.button:hover {

    transform: scale(1.05);

    border-color: #e2a300;

}



.button:hover .icon {

    transform: translate(4px);

}



.button:hover::before {

    animation: shine 1.5s ease-out infinite;

}



.button::before {

    content: "";

    position: absolute;

    width: 100px;

    height: 100%;

    background-image: linear-gradient(120deg,

            rgba(255, 255, 255, 0) 30%,

            rgba(255, 255, 255, 0.8),

            rgba(255, 255, 255, 0) 70%);

    top: 0;

    left: -100px;

    opacity: 0.6;

}



@keyframes shine {

    0% {

        left: -100px;

    }



    60% {

        left: 100%;

    }



    to {

        left: 100%;

    }

}





/*  */

.quick_contact {

    position: fixed;

    bottom: 50px;

    left: 60px;

    z-index: 20;

}



.quick_contact a {

    display: block;

    position: relative;

    font-size: 18px;

    color: #fff;

    padding: 0 20px 0 35px;

    height: 44px;

    line-height: 44px;

    text-decoration: none;

    border-radius: 0 40px 40px 0;

}



.quick_contact a span {

    display: flex;

    width: 45px;

    height: 45px;

    line-height: 40px;

    border-radius: 50%;

    text-align: center;

    position: absolute;

    left: -25px;

    /* color: #2E8B57; */

    top: -2.5px;

    border: solid 5px #fc0;

    align-items: center;

    justify-content: center;

}



.button_gradient {

    background-image: linear-gradient(90deg, #2E8B57 0%, #2E8B57 100%);

    border: 2px #fff solid;

}



.contact-phone {

    float: left;

    width: 100%;

    text-align: center;

    color: white;

    font-size: 20px;

    line-height: 1.2;

    font-family: 'font1';

    line-height: 45px;

    animation-duration: 800ms;

    animation-name: chopchop;

    animation-iteration-count: infinite;

    animation-direction: alternate;

    line-height: 40px;

}



.quick_contact a span:before {

    content: "";

    position: absolute;

    top: -30px;

    left: -27px;

    width: 95px;

    height: 95px;

    background: url(../imgs/contact_rotate.png) center no-repeat;

    animation: rotate 3s linear infinite;

}





.quick_contact2 {

    position: fixed;

    bottom: 150px;

    left: 60px;

    z-index: 20;

}



.quick_contact2 a {

    display: block;

    position: relative;

    font-size: 18px;

    color: #fff;

    padding: 0 20px 0 35px;

    height: 44px;

    line-height: 44px;

    text-decoration: none;

    border-radius: 0 40px 40px 0;

}



.quick_contact2 a span {

    display: flex;

    width: 45px;

    height: 45px;

    line-height: 40px;

    border-radius: 50%;

    text-align: center;

    position: absolute;

    left: -25px;

    /* color: #2E8B57; */

    top: -2.5px;

    border: solid 5px #fc0;

    align-items: center;

    justify-content: center;

}



.quick_contact2 a span:before {

    content: "";

    position: absolute;

    top: -30px;

    left: -27px;

    width: 95px;

    height: 95px;

    background: url(../imgs/contact_rotate.png) center no-repeat;

    animation: rotate 3s linear infinite;

}



@-webkit-keyframes rotate {



    from {



        -webkit-transform: rotate(0deg);



        transform: rotate(0deg)
    }







    to {



        -webkit-transform: rotate(360deg);



        transform: rotate(360deg)
    }



}



@keyframes rotate {



    from {



        -webkit-transform: rotate(0deg);



        -moz-transform: rotate(0deg);



        -ms-transform: rotate(0deg);



        transform: rotate(0deg)
    }







    to {



        -webkit-transform: rotate(360deg);



        -moz-transform: rotate(360deg);



        -ms-transform: rotate(360deg);



        transform: rotate(360deg)
    }



}



@keyframes chopchop {

    0% {

        transform: scale(1);

        color: #fff;

    }



    50% {

        transform: scale(1.1);

        color: #ec2d3f;

    }



    100% {

        transform: scale(1);

        color: #fc0;

    }

}



/* liên hệ chúng tôi */

.group-contact {

    display: flex;

    align-items: center;

    gap: 20px;

}



.info-contact h3 {

    font-size: 30px;

    margin: 0px;

    font-family: 'font4';

}



.info-contact p {

    margin: 0px;

    font-family: 'font1';

}



.name-product:hover {

    color: #fc0;

    transition: 0.7s;

}





/* From Uiverse.io by xetrov47 */

.search {

    display: flex;

    align-items: center;

    text-align: center;

}



.search__input {

    font-family: inherit;

    font-size: inherit;

    border: 1px solid #767676;

    color: #767676;

    padding: 5px 10px;

    border-radius: 4px;

    margin-right: -1.5rem;

    height: 30px;

    width: 15rem;

}



.search__input::-webkit-input-placeholder {

    font-weight: 400;

    color: #767676;

    font-size: 14px;

}



.search__button {

    border: none;

    background-color: #fff;

    margin-top: 0.1em;

}



.search__button:hover {

    cursor: pointer;

}



.search input:focus {

    outline: none;

}

.line {
    background: url(../imgs/line.png) no-repeat;
    width: 135px;
    height: 5px;
    margin: 5px auto 15px;
}

.info-news.thay {
    width: calc(100% - 370px);
}