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

.group-menu {

    padding: 15px 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;

}



/* sản phẩm */

.product-info h3 .product-name {

    font-size: 18px;

    font-weight: bold;

    margin: 20px 0px 12px 0px;

    font-family: 'font4';

    transition: 0.7s;

    height: 50px;

    color: black;

    text-transform: uppercase;

    line-height: 28px;
}


.product-info .product-name:hover {

    color: #c0031b;

    transition: 0.7s;

}



.product-info .product-desc {

    font-family: 'font1'



}



/* tin tức */

.wrap-news {

    padding: 50px 0px;

}



.news-info a .news-name {

    font-size: 17px;

    font-weight: bold;

    margin: 20px 0px 10px 0px;

    font-family: 'font4';

    line-height: 25px;

    height: 50px;

    transition: 0.7s;

    color: black;

    text-transform: uppercase;

}



a .news-name:hover {

    color: #c0031b;

    transition: 0.7s;

}



.news-info .news-desc {

    font-family: 'font1';

}



.news-info .news-about {

    float: right;

    margin: 0px 20px;

    padding: 10px 20px;

    background: #c0031b;



}



.news-info .news-about a {

    color: white;

}





.button {

    display: inline-block;

    padding: 12px 24px;

    border: none;

    border-radius: 0px;

    transition: all 0.2s ease-in;

    position: relative;

    overflow: hidden;

    font-size: 15px;

    cursor: pointer;

    color: white;

    z-index: 1;

    float: right;

    margin: 0px 20px;

    background: #c0031b;

}



.button:before {

    content: "";

    position: absolute;

    left: 50%;

    transform: translateX(-50%) scaleY(1) scaleX(1.25);

    top: 100%;

    width: 140%;

    height: 180%;

    background-color: rgba(0, 0, 0, 0.05);

    border-radius: 50%;

    display: block;

    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);

    z-index: -1;

}



.button:after {

    content: "";

    position: absolute;

    left: 55%;

    transform: translateX(-50%) scaleY(1) scaleX(1.45);

    top: 180%;

    width: 160%;

    height: 190%;

    background-color: #39bda7;

    border-radius: 50%;

    display: block;

    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);

    z-index: -1;

}



.button:hover {

    color: #c0031b;

    border: 1px solid #c0031b;

}



.button:hover:before {

    top: -35%;

    background-color: white;

    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);

}



.button:hover:after {

    top: -45%;

    background-color: white;

    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);

}



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

.wrap-contact {

    background: #c0031b;

    padding: 15px 0px;

    color: white;

}



/* dịch vụ */

.wrap-dichvu {

    padding: 60px 0px;

}



.box-main-dichvu {

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

    background-size: cover;

    padding: 10px;

}



.dichvu-item {}



.dichvu-item img {

    border: 1px solid white;

    position: relative;



}



.dichvu-info {

    color: white;

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    padding: 0px 20px;

    background: #00000090;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    cursor: pointer;

    pointer-events: none;

}



.box-all:hover .dichvu-info .dichvu-name {

    color: #fc0;



}



/* 

.dichvu-name:hover {

    color: #fc0;



} */



.dichvu-info .dichvu-name {

    text-align: center;

    font-size: 20px;

    font-family: 'font1';

    font-weight: 900;

}



.dichvu-info .dichvu-desc {

    font-size: 14px;

    font-family: 'font1';

    font-weight: 500;

}



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

}



/* dự án */

.wrap-duan {

    padding: 50px 0px;

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

    background-size: 100% 100%;

}



.duan-image-item {

    position: relative;

    height: 100%;

}



.duan-image-item img {

    height: 100%;

}



.duan-txt {

    position: absolute;

    height: auto;

    padding: 10px;

    text-align: center;

    top: 50%;

    left: 50%;

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

    color: black;

    background: #ffffffe0;

    font-size: 1.1rem;

    text-transform: uppercase;

    opacity: 0;

    transition: 0.2s all;

    width: auto;

    font-family: 'font1';

}



.duan-image-item:hover .duan-txt {

    opacity: 1;

}



.box-main-duan {

    display: grid;

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

    gap: 20px;

}



.duan-image-item-0 {

    grid-column: 1/2;

    grid-row: 1/2;

}



.duan-image-item-1 {

    grid-column: 2/4;

    grid-row: 1/2;

}



.duan-image-item-2 {

    grid-column: 1/2;

    grid-row: 2/3;

}



.duan-image-item-3 {

    grid-column: 2/3;

    grid-row: 2/3;

}



.duan-image-item-4 {

    grid-column: 3/4;

    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;

    position: relative;


}



.box-video a strong {

    border: 5px solid #ea1e25;

    border-radius: 60px;

    position: relative;

}



/* .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-video img {
    border: 2px solid white;
}


.logo::before {

    content: '';

    position: absolute;

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

    bottom: -70px;

    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-top: 20px;

    justify-content: center;
}



.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: -35%;

    top: 60%;

    left: unset;

    width: 50px;

    height: 50px;

}



.slick-youtube .slick-prev img {

    width: 50px;

    height: 50px;

}



.slick-youtube .slick-next {

    right: -42%;

    top: 60%;

    left: unset;

    width: 50px;

    height: 50px;

}



.slick-youtube .slick-next img {

    width: 50px;

    height: 50px;

}





/* đặt bàn */

.wrap-datban {

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

    background-size: cover;

    padding: 50px 0px;

}



.input-group1 {

    position: relative;

}



.input {

    border: solid 1.5px black;

    background: none;

    padding: 1rem;

    width: 100%;

    font-size: 1rem;

    color: #A6966B;

    transition: border 150ms cubic-bezier(0.4, 0, 0.2, 1);

    height: 40px;

}



textarea.input {

    border: solid 1.5px black;

    background: none;

    padding: 1rem;

    width: 100%;

    font-size: 1rem;

    color: #A6966B;

    transition: border 150ms cubic-bezier(0.4, 0, 0.2, 1);

    height: 100px;

}



.user-label {

    position: absolute;

    left: 15px;

    color: black;

    pointer-events: none;

    transform: translateY(10px);

    transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);

}



/* .input:focus,

input:valid {

    outline: none;

    border: 1.5px solid #A6966B;

} */



.input:focus~label,

input:valid~label {

    transform: translateY(-50%) scale(0.8);

    /* background-color: white; */

    padding: 0 .2em;

    color: #A6966B;

    /* font-size: 15px; */

}



.contact-form .row {

    margin: 20px 100px;

}



/*xem thêm */

.xemthem {

    content: "";

    position: absolute;

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

    background-size: cover;

    height: 42px;

    width: 138px;

    color: white;

    display: flex;

    justify-content: center;

    align-items: center;

    right: 8%;

    bottom: 13%;

    font-weight: 700;

}



.xemthem:hover {

    color: #fc0;

    transition: 0.5s;

}



.xemthem-gioithieu {

    content: "";

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

    background-size: cover;

    height: 42px;

    width: 138px;

    color: #2E8B57;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-top: 45px;

    font-weight: 700;

}



.xemthem-gioithieu:hover {

    color: #fc0;

    transition: 0.5s;

}



/*  */

.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: #c0031b;

}

.group-search-menuicon {
    display: flex;
    align-items: center;
}