.banner{height: 500px; padding-top: 97px; background: no-repeat center / cover; color: #fff;}
.banner:before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0 0 0 / 50%);}
.breadcrumb{background-color: #f7f7f7;}
.breadcrumb ul{list-style: none;}
.breadcrumb ul li{display: inline; font-weight: 700; font-size: 14px; color: #555;}
.breadcrumb ul li:after{content: '/'; padding: 0 5px;}
.breadcrumb ul li:last-child:after{display: none;}
.breadcrumb ul li a{color: #555;}
@media only screen and (max-width: 1200px){

}
@media only screen and (max-width: 820px){

}
@media only screen and (max-width: 420px){
    .banner{height: 300px;}
}.header #menu{display: none;}
.menu{position: relative; z-index: 2;}
.menu ul{list-style: none;}
.menu ul li{position: relative;}
.menu ul li a{display: block; line-height: 40px; transition: all 0.5s ease 0s;}
.menu ul li a i{margin-left: 5px; font-size: 12px;}
.menu ul li a:hover i{transform: scaley(-1);}
.menu ul li ul{position: absolute; top: calc(100% + 10px); width: 225px; padding: 23px 0 10px; opacity: 0; pointer-events: none; transition: all 0.5s ease 0s;}
.menu ul li ul:before{content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: calc(100% - 13px); background-color: #555;}
.menu ul li:hover ul{top: 100%; opacity: 1; pointer-events: auto;}
.menu ul li ul li a{padding: 0 10px; font-weight: 500; line-height: 40px; color: #fff;}
.menu ul li ul li a:hover{background-color: #fff; color: var(--man);}
.menu > ul > li{float: left;}
.menu > ul > li+li{margin-left: 30px;}
.menu > ul > li > a{position: relative; font-weight: 600; letter-spacing: 1px; color: #ccc;}
.menu > ul > li > a:after{content: ''; position: absolute; bottom: 5px; left: 0; width: 0; height: 1px; background-color: #fff; opacity: 0; transition: all 0.5s ease 0s;}
.menu > ul > li:hover > a, .menu > ul > li.active > a{color: #fff;}
.menu > ul > li:hover > a:after, .menu > ul > li.active > a:after{width: 100%; opacity: 1;}
.mm-listitem__text i{display: none;}.thuonghieu{margin-bottom: 30px;}
.thuonghieu ul{list-style: none; padding: 15px; background-color: #f7f7f7;}
.thuonghieu ul li{background: no-repeat center;}
.thuonghieu ul li img{opacity: 0;}
.thuonghieu ul li a{position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; margin: auto; align-items: center; justify-content: center; z-index: 0;}
.thuonghieu ul li a:before, .thuonghieu ul li a:after{content: ''; position: absolute; top: 0; bottom: 0; width: 0; margin: auto; background-color: #231f20; opacity: 0; z-index: -1; transition: all 0.25s ease 0s;}
.thuonghieu ul li a:before{left: 0;}
.thuonghieu ul li a:after{right: 0;}
.thuonghieu ul li a span{display: block; font-size: 20px; font-weight: 300; text-transform: uppercase; text-align: center; letter-spacing: 1px; color: #ea6424; opacity: 0; transition: all 0.5s ease 0s;}.slide-item{position: relative; height: calc(100vh + 75px);}
.slide-item img{width: 100%; height: 100%; object-fit: cover;}
.slide-txt{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.slide-txt h2{max-width: 620px; letter-spacing: 2px; color: #fff; text-shadow: 2px 2px 2px var(--main), -3px -2px 3px rgb(0 0 0 / 15%); transform: translatex(-50px); opacity: 0; transition: all 1s ease 0s;}
.slide-txt a{display: block; padding: 0 30px; background-color: var(--main); box-shadow: 0 0 15px rgb(0 0 0 / 25%); transform: translatex(50px); line-height: 50px; letter-spacing: 1px; color: #fff; opacity: 0; transition: all 0.5s ease 0s;}
.slide-txt a:hover{background-color: #fff; box-shadow: 0 3px 15px rgb(0 0 0 / 75%); transform: translatey(-3px)!important; color: var(--main);}
.slide .owl-nav{display: block; opacity: 0; transition: all 0.5s ease 0s;}
.slide .owl-nav button{position: absolute; top: 0; bottom: 0; width: 50px; height: 50px; background-color: transparent; margin: auto;}
.slide .owl-nav button.owl-prev{left: 30px;}
.slide .owl-nav button.owl-next{right: 30px;}
.slide .owl-nav button i{display: block; font-size: 40px; color: #fff; transition: all 0.5s ease 0s;}
.slide .owl-nav button:hover i{color: var(--main);}
.slide .owl-item.active .slide-txt h2,
.slide .owl-item.active .slide-txt a{transform: translatex(0); opacity: 1;}
.slide:hover .owl-nav{opacity: 1;}.construct{background: #f5f5f5;border-top: 1px solid #e4e3e3;border-bottom: 1px solid #e4e3e3;}
.construct-img{overflow: hidden;}
.construct-img img{transition: all 1s ease 0s;}
.construct-img:hover img{transform: scale(1.1);}
.construct-group{transform: translatey(-15px); background-color: #fff; box-shadow: 0 0 15px rgb(0 0 0 / 25%);}
.construct-group span{display: block; padding: 0 15px; font-size: 14px; line-height: 30px; color: #777; transition: all 0.5s ease 0s;}
.construct-group span:hover{background-color: var(--main); color: #fff;}
.construct-name{height: 57px; overflow: hidden;}
.construct-name a{width: 100%; background-image: linear-gradient(transparent calc(100% - 2px), var(--main) 2px); background-repeat: no-repeat; background-size: 0% 100%; color: var(--title); transition: all 0.5s ease 0s;}
.construct-name a:hover{background-size: 100% 100%;}
.construct-prev{font-size: 14px; letter-spacing: 1px; color: #555;}
.construct-more{padding: 5px 0 3px; border-bottom: 2px solid var(--main);}
.construct-more:before{content: ''; position: absolute; bottom: 0; width: 100%; height: 0; background-color: var(--main); transition: all 0.5s ease 0s;}
.construct-more a{padding: 0 10px; font-size: 14px; color: #777; transition: all 0.5s ease 0s;}
.construct-more a i{margin-left: 5px; transform: translatey(1px);}
.construct-more:hover:before{height: 100%;}
.construct-more:hover a{color: #fff;}
.construct-all{line-height: 50px; letter-spacing: 1px;}
.construct-all a{display: inline-block; padding: 0 30px; background-color: #fff; box-shadow: 0 0 15px rgb(0 0 0 / 25%); color: var(--main); transition: all 0.5s ease 0s;}
.construct-all a:hover{box-shadow: 0 3px 15px rgb(0 0 0 / 75%); transform: translatey(-3px);}
@media all and (max-width: 576px){
    .construct-name{height: auto;}
}.design{background-color: var(--main);}
.design-title{color: #fff;}
.design-preview{max-width: 425px; font-size: 14px; letter-spacing: 1px; color: #ddd;}
.design-all{position: absolute; bottom: 7px; right: 0; padding: 10px 0 5px; border-bottom: 5px solid #fff; letter-spacing: 1px;}
.design-all:before{content: ''; position: absolute; bottom: 0; width: 100%; height: 0; background-color: #fff; transition: all 0.5s ease 0s;}
.design-all a{padding: 0 15px; color: #fff; transition: all 0.5s ease 0s;}
.design-all a i{margin-left: 10px; transform: translatey(2px);}
.design-all:hover:before{height: 100%;}
.design-all:hover a{color: var(--main);}
.design-item{overflow: hidden;}
.design-item img{transition: all 1s ease 0s;}
.design-text{top: 0; left: 0; background-color: rgb(0 0 0 / 50%); color: #fff; opacity: 0; transition: all 0.5s ease 0s;}
.design-name{letter-spacing: 1px;}
.design-group{padding-left: 30px; font-size: 12px; letter-spacing: 5px;}
.design-group:before{content: ''; position: absolute; top: 7px; left: 0; width: 20px; height: 1px; background-color: #fff;}
.design-item a{top: 0; left: 0;}
.design-item:hover img{transform: scale(1.1);}
.design-item:hover .design-text{opacity: 1;}
.design-carousel .slick-arrow{position: absolute; bottom: 10px; width: 50px; height: 50px; margin: 0 auto; background-color: #fff;}
.design-carousel .slick-arrow i{font-size: 30px; line-height: 50px; color: var(--main);}
.design-carousel .slick-arrow:hover i{}
.design-carousel .slick-prev{right: 60px; left: 0;}
.design-carousel .slick-next{right: 0; left: 60px;}
@media all and (max-width: 576px){
    .design-all{position: relative; margin-bottom: 3rem;}
}.intro-wrap{padding: 225px 75px 0;}
.intro-picture, .intro-picture:before{position: absolute; width: 100%; height: 100%;}
.intro-picture{top: 0; left: 0;}
.intro-picture:before{content: ''; bottom: 0; background-image: linear-gradient(to top, rgb(255 255 255 / 100%) 0%, transparent 100%);}
.intro-picture img{width: 100%; height: 100%; object-fit: cover;}
.intro-text{padding: 75px; background-color: rgb(255 255 255 / 75%); box-shadow: 0 0 50px rgb(0 0 0 / 5%);}
.intro-title{padding-left: 85px; background: url(/theme/images/intro.png) no-repeat center left / auto calc(100% - 10px);}
.intro-title h2{color: var(--title);}
.intro-title h3{font-size: 14px; letter-spacing: 1px; color: #777;}
.intro-preview{color: #555;}
.intro-more{padding: 10px 0 5px; border-bottom: 5px solid var(--main); letter-spacing: 1px;}
.intro-more:before{content: ''; position: absolute; bottom: 0; width: 100%; height: 0; background-color: var(--main); transition: all 0.5s ease 0s;}
.intro-more a{padding: 0 15px; color: #777; transition: all 0.5s ease 0s;}
.intro-more a i{margin-left: 10px; transform: translatey(2px);}
.intro-more:hover:before{height: 100%;}
.intro-more:hover a{color: #fff;}
@media all and (max-width: 767px){
    .intro-wrap{padding: 0;}
    .intro-picture{position: relative;}
    .intro-picture:before{display: none;}
    .intro-text{padding: 3rem 0 0; box-shadow: none;}
}.news-img{font-size: 14px; line-height: 50px; letter-spacing: 3px; color: #fff;}
.news-img span{position: absolute; bottom: 0; left: 0; padding: 0 30px; background-color: var(--main);}
.news-img a{display: block; overflow: hidden;}
.news-name{height: 57px; overflow: hidden;}
.news-name a{width: 100%; background-image: linear-gradient(transparent calc(100% - 2px), var(--main) 2px); background-repeat: no-repeat; background-size: 0% 100%; color: var(--title); transition: all 0.5s ease 0s;}
.news-name a:hover{background-size: 100% 100%;}
.news-prev{font-size: 14px; letter-spacing: 1px; color: #555;}
.news-more{padding: 5px 0 4px; border-bottom: 1px solid var(--main);}
.news-more:before{content: ''; position: absolute; bottom: 0; width: 100%; height: 0; background-color: var(--main); transition: all 0.5s ease 0s;}
.news-more a{padding: 0 10px; font-size: 14px; color: #777; transition: all 0.5s ease 0s;}
.news-more a i{margin-left: 5px; transform: translatey(1px);}
.news-more:hover:before{height: 100%;}
.news-more:hover a{color: #fff;}
.news-all{line-height: 50px; letter-spacing: 1px;}
.news-all a{display: inline-block;padding: 0 30px; background-color: #fff; box-shadow: 0 0 15px rgb(0 0 0 / 25%); color: var(--main); transition: all 0.5s ease 0s;}
.news-all a:hover{box-shadow: 0 3px 15px rgb(0 0 0 / 75%); transform: translatey(-3px);}
@media all and (max-width: 576px){
    .news-name{height: auto;}
}.work{margin-top: -75px; z-index: 2;}
.work-item{background-color: #fff; box-shadow: 0 10px 40px rgb(0 0 0 / 5%);}
.work-img{width: 64px;}
.work-name:after{content: ''; display: block; width: 15px; height: 1px; margin: 15px 0 20px; background-color: var(--title);}
.work-prev{font-size: 14px; letter-spacing: 1px; color: #555;}.col-help{text-align: center;}
.col-help li a{color: #333;}
.col-help li:nth-child(1){margin-bottom: 15px; text-transform: uppercase;}
.col-help li:nth-child(1) a b{font-size: 18px; color: #ed1c24;}
.col-help li:nth-child(2),
.col-help li:nth-child(3){display: inline-block; width: 40px; margin: 0 3px; border-radius: 50%; vertical-align: top; overflow: hidden;}
.col-help li:nth-child(4){padding-top: 15px;}
.col-help li:nth-child(4) img{display: inline-block; width: 20px; margin-right: 5px; vertical-align: top;}
.col-help li:nth-child(4) a{font-size: 15px;}.col ul{padding: 15px; border-top: 2px solid var(--main); list-style: none;}
.col-title{padding: 12px 0 7px; font-size: 16px; font-weight: 500; text-transform: uppercase; text-align: center;}
.col-title img{display: inline-block;}
.col-menu li{list-style: none;}
.col-menu li a{display: block; line-height: 40px; color: #333;}
.col-menu li a:hover{color: var(--main);}
.col-menu li a i{width: 25px; transform: translateX(5px); font-size: 12px; color: var(--main); transition: all 0.3s ease 0s;}
.col-menu li a:hover i{transform: translateX(9px);}
.col-menu li ul{padding: 0; border-top: none;}
.col-menu li ul li{padding-left: 25px;}
.col-menu li ul li:first-child{border-top: 1px dashed #d7d7d7;}
.col-menu li ul li+li a{border-top: 1px dashed #d7d7d7;}
.col-menu li ul li.active a{color: #f8c811;}
.col-menu li ul li a i{font-size: 10px;}
.col-menu > li{position: relative;}
.col-menu > li+li{border-top: 1px dashed #d7d7d7;}
.col-menu > li.active > a{color: #f8c811;}
.col-menu > li > a{font-size: 16px;}
.col-menu > li > i{position: absolute; top: 0; right: 0; width: 40px; font-size: 12px; text-align: center; line-height: 40px; cursor: pointer;}.col-news li+li{margin-top: 15px; padding-top: 15px; border-top: 1px dashed #d7d7d7;}
.col-news li a{position: relative; display: block; line-height: 22px;}
.col-news li a > span{position: absolute; top: 0; right: 0; bottom: 0; display: flex; width: calc(100% - 114px); margin: auto; align-items: center;}
.col-news li a > span span{display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; color: #333; overflow: hidden; transition: all 0.3s ease 0s;}
.col-news li a:hover > span span{color: var(--main);}.col-sers{box-sizing: border-box;}
.col-sers li{position: relative; overflow: hidden;}
.col-sers li a{position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background-image: linear-gradient(transparent 70%, rgb(0 0 0 / 85%) 100%); transition: all 0.3s ease 0s;}
.col-sers li a span{position: absolute; right: 0; bottom: 0; left: 0; margin: auto; padding: 15px; font-weight: 500; color: #fff;}
.col-sers li:hover a{background-color: rgb(0 0 0 / 50%);}
.col-sers .owl-dots{height: 10px; margin-top: 10px; text-align: center; line-height: 1;}
.col-sers .owl-dots button{display: inline-block; width: 10px; height: 100%; background-color: var(--main); margin: 0 2.5px; border-radius: 50%; vertical-align: top; opacity: 50%; transition: all 0.3s ease 0s;}
.col-sers .owl-dots button.active{opacity: 1;}.about1_1{}
.about1_1 .container{box-shadow: 0 0 50px rgb(0 0 0 / 25%);}
.about1_1-wrap{padding: 75px; border: 10px solid rgb(0 0 0 / 5%);}
.about1_1-wrap > h3{letter-spacing: 1px;}
.about1_1-wrap > div{letter-spacing: 1px;}
.about1_1-wrap > span{max-width: 50%; color: #999;}
.about1_1-wrap > span:before{content: ''; position: absolute; top: 18px; left: 0; width: 100%; height: 1px; border-bottom: 1px dashed #999; z-index: -1;}
.about1_1-wrap > span i{padding: 0 15px; background-color: #fff; font-size: 40px;}

.about1_2{letter-spacing: 1px;}
.about1_2-left:before{content: ''; position: absolute; top: 35px; right: -50px; width: 75%; height: 35%; background-color: rgb(0 0 0 / 3%); z-index: -1;}
.about1_2-left h2{color: #777;}
.about1_2-left p:after{content: ''; display: block; width: 30px; height: 1px; margin-top: 2rem; background-color: #555;}
.about1_2-right{}

.about1_3{padding-top: 150px; background: no-repeat top center / cover; overflow: hidden;}
.about1_3:before{position: absolute; width: 100%; height: 100%;}
.about1_3:before{content: ''; bottom: 0; background-image: linear-gradient(to top, rgb(255 255 255 / 100%) 0%, transparent 100%);}
.about1_3-wrap{padding: 75px; background-color: rgb(255 255 255 / 75%); box-shadow: 0 -25px 50px rgb(0 0 0 / 15%);}
.about1_3-wrap > div{letter-spacing: 1px;}

@media all and (max-width: 992px){
    .about1_2-left:before{display: none;}
}
@media all and (max-width: 576px){
    .about1_1-wrap{padding: 50px 1.5rem; border-width: 5px;}
    .about1_3-wrap{padding: 75px 50px;}
}.lienhe-info ul{list-style: none;}
.lienhe-info ul li i{position: absolute; top: 5px; left: 0; color: var(--hover);}
.lienhe-info ul li b{display: block; color: var(--main);}
.lienhe-info ul li a{color: var(--text);}
.lienhe-map iframe{display: block!important; width: 100%!important; height: 500px!important;}.thietke-txt-1{text-align: right;}
.thietke-group a{display: inline-block; border-bottom: 1px solid #d7d7d7; color: #777;}
.thietke-name a{width: 100%; background-image: linear-gradient(transparent calc(100% - 2px), var(--main) 2px); background-repeat: no-repeat; background-size: 0% 100%; color: var(--title); transition: all 0.5s ease 0s;}
.thietke-name a:hover{background-size: 100% 100%;}
.thietke-more{line-height: 50px; letter-spacing: 1px;}
.thietke-more a{display: block; padding: 0 30px; background-color: #fff; box-shadow: 0 0 15px rgb(0 0 0 / 25%); color: var(--main); transition: all 0.5s ease 0s;}
.thietke-more a:hover{box-shadow: 0 3px 15px rgb(0 0 0 / 75%); transform: translatey(-3px);}
.thietke-more a i{margin-left: 10px;}.gallery-img a{display: block; overflow: hidden;}
.gallery-img a img{width: 100%; transition: all 1s ease 0s;}
.gallery-txt{position: absolute; right: 0; bottom: 0; background-color: rgb(255 255 255 / 90%); transition: all 0.5s ease 0s;}
.gallery-txt-1{right: initial; left: 0; text-align: right;}
.gallery-name a{width: 100%; background-image: linear-gradient(transparent calc(100% - 2px), var(--main) 2px); background-repeat: no-repeat; background-size: 0% 100%; color: var(--title); transition: all 0.5s ease 0s;}
.gallery-name a:hover{background-size: 100% 100%;}
.gallery-item:hover .gallery-img a img{transform: scale(1.1);}
.gallery-item:hover .gallery-txt{}
@media all and (max-width: 576px){
    .gallery-img{margin-bottom: 1.5rem;}
    .gallery-txt{position: relative; bottom: 0; box-shadow: none!important;}
	.gallery-txt-1{text-align: left;}
}.news-detail-title:after{content: ''; display: block; width: 30px; height: 2px; margin-top: 1.5rem; background-color: var(--main);}
.news-detail-toc{top: 102px; border: 1px solid #ebebeb;}
.news-detail-toc-button{position: absolute; top: 15px; right: 15px; cursor: pointer;}
.news-detail-toc-button i{width: 30px; text-align: center; line-height: 30px; color: var(--text);}
.news-detail-toc-list{margin-top: 15px;}
.news-detail-toc-list ul{list-style: none; margin-top: 10px;}
.news-detail-toc-list ul li{position: relative; padding-left: 20px;}
.news-detail-toc-list ul li:before{content: ''; position: absolute; top: 10px; left: 0; width: 6px; height: 6px; border-radius: 50%; background-color: var(--main);}
.news-detail-toc-list ul li a:hover{color: #000!important;}
.news-detail-toc-list ul ul{padding-left: 20px;}
.news-detail-toc-list ul ul li:before{background-color: transparent; border: 1px solid var(--main)}
.news-detail-other{border-left: 5px solid var(--main);}
.news-detail-other:before{content: ''; position: absolute; top: 0; left: 1px; width: 2px; height: 100%; background-color: var(--main);}
.news-detail-col h3 span{width: 100%; background-image: linear-gradient(transparent calc(100% - 2px), var(--main) 2px); background-repeat: no-repeat; background-size: 0% 100%; transition: all 0.5s ease 0s;}
.news-detail-col:hover h3 span{background-size: 100% 100%;}
.news-detail-col a{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}