/* add_lh */
.lh ul{list-style: none;}
.lh ul li a:hover{color: var(--hover);}
.lh iframe{display: block; width: 100%; height: 500px;}
/* header_banner */
.banner{height: 350px; 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: var(--main);}
.breadcrumb ul li{list-style: none; display: inline;}
.breadcrumb ul li+li:before{content: '/';}
.breadcrumb ul li a{color: var(--wite);}
/* header_menu */
header #menu{display: none;}
.menu-bar{background-color: var(--main);}
.menu{position: relative; z-index: 2;}
.menu ul{list-style: none;}
.menu ul li{position: relative;}
.menu ul li.display{display: none;}
.menu ul li a{display: block; font-size: 14px; font-weight: 700; text-transform: uppercase; line-height: 50px; letter-spacing: 0.5px; color: var(--wite);}
.menu ul li a i{margin-left: 0.25rem; font-size: 12px; color: var(--wite); }
.menu ul li ul{position: absolute; top: 100%; min-width: 150px; opacity: 0; pointer-events: none; transition: all 0.5s ease 0s;}
.menu ul li ul li a{padding: 0 1rem; background-color: var(--wite); text-wrap: nowrap;color: var(--text);}
.menu ul li ul li a:hover{background-color: var(--hover); color: var(--wite);}
.menu > ul{display: flex;}
.menu > ul > li{flex: 0 0 auto;}
.menu > ul > li+li{margin-left: 3rem;}
.menu > ul > li > a{}
.menu > ul > li:hover > a{color: var(--hover);}
.menu > ul > li.active > a{color: var(--wite);}
.menu > ul > li > ul:before{content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 15px rgb(0 0 0 / 15%);}
.menu > ul > li:hover > ul{top: 100%; opacity: 1; pointer-events: auto;}
.mm-listitem__text i{display: none;}
/* header_slide */
.slide img{width: 100%; height: 100%; object-fit: cover;}
.slide .owl-nav button{position: absolute; top: 0; bottom: 0; width: 50px; height: 50px; margin: auto; background-color: rgb(255 255 255 / 25%); border-radius: 50%;}
.slide .owl-nav button.owl-prev{left: 30px;}
.slide .owl-nav button.owl-next{right: 30px;}
.slide .owl-nav button:hover{background-color: var(--wite);}
.slide .owl-nav button i{display: block; font-size: 24px; color: var(--main); transition: all 0.5s ease 0s;}
@media all and (max-width: 576px){
    .slide .owl-nav{display: none;}
}
/* home_gioithieu */
.gt{background-color: var(--wite);}
.gt-prev p{margin-bottom: 15px;}
.gt-prev ul{list-style: none; padding-top: 12px;}
.gt-prev ul li{position: relative; padding-left: 2.5rem;}
.gt-prev ul li+li{margin-top: 0.5rem;}
.gt-prev ul li:before{content: '\f058'; position: absolute; top: 0; left: 1rem; font-family: "Font Awesome 6 Pro"; font-size: 14px; font-weight: 700; line-height: 24px; color: var(--main);}.ohd-cnt ul{list-style: none;}
.gt-pic img{position: relative; border-radius: 15px; transform: scale(90%); z-index: 2; transition: all 0.25s ease 0s;}
.gt-pic img:hover{transform: scale(1); border-radius: 0 15px;}
.gt-pic:before, .gt-pic:after{content: ''; position: absolute; width: 50%; height: 50%; z-index: 1;}
.gt-pic:before{top: 0; right: 0; border-top: 1px solid var(--main); border-right: 1px solid var(--main); border-radius: 0 15px 0 0;}
.gt-pic:after{bottom: 0; left: 0; border-bottom: 1px solid var(--main); border-left: 1px solid var(--main); border-radius: 0 0 0 15px;}
.gt-speed{top: 0; bottom: 0; left: 0; width: 150px; height: 150px; opacity: 5%; animation: float 4s linear infinite;}
.gt-speed:before, .gt-speed:after{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.gt-speed:before{background: url(/theme/images/speed1.png) no-repeat center / 100% auto;}
.gt-speed:after{background: url(/theme/images/speed2.png) no-repeat center / 100% auto; animation: speed 4s infinite;}
@keyframes float{0%{transform: translatey(0)} 25%{transform: translatey(1rem)} 50%{transform: translatey(0)} 75%{transform: translatey(-1rem)} 100%{transform: translatey(0)}}
@keyframes speed{0%{transform: rotate(0)} 25%{transform: rotate(-180deg)} 50%{transform: rotate(0)} 60%{transform: rotate(5deg)} 65%{transform: rotate(-5deg)}
                 70%{transform: rotate(5deg)} 75%{transform: rotate(-5deg)} 80%{transform: rotate(5deg)} 85%{transform: rotate(-5deg)} 100%{transform: rotate(0)}}
/* home_khuyenmai */
.km{background-color: var(--wite);}
.km-item{box-shadow: 0 0 30px rgb(0 0 0 / 15%);}
.km-more:after{content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: var(--hover); transition: all 0.5s ease 0s;}
.km-more:hover a{color: var(--hover);}
.km-more:hover:after{width: 100%;}
.km-cog{top: 0; right: -141px; bottom: 0; width: 282px; height: 282px; background: url(/theme/images/cog.png) no-repeat center / 100% auto; opacity: 2.5%; animation: km-cog 12s linear infinite;}
@keyframes km-cog{0%{transform: rotate(0)} 100%{transform: rotate(360deg)}}
/* home_sanpham */
.sp-img a{padding-top: 65%; background-color: var(--wite);}
.sp-img a img{position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: calc(100% - 3rem); margin: auto;}
.sp-img:hover a img{animation: sp-img 2s linear infinite;}
@keyframes sp-img{0%{transform: translatex(0);} 25%{transform: translatex(5px);} 50%{transform: translatex(0);} 75%{transform: translatex(-5px);} 100%{transform: translatex(0);}}
.sp-info{background-color: var(--wite);padding-bottom: 30px;}
.sp-more{border-radius: 20px; line-height: 40px;}
.sp-more:before{content: ''; position: absolute; right: 0; bottom: 0; width: 0; height: 100%; background-color: var(--main); transition: all 0.5s ease 0s;}
.sp-more a{background: linear-gradient(to right, var(--hover), var(--hover) 50%, var(--main) 50%) 100% / 200% 100%; -webkit-text-fill-color: transparent; -webkit-background-clip: text;}
.sp-more:hover:before{width: 100%}
.sp-more:hover a{background-position: 0;}
.car-specs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 8px;
  column-gap: 0;
  padding: 0;
  margin: 12px 0 0;
  list-style: none;
}

.car-specs li {
  width: 50%;
  font-size: 16px;
  line-height: 1.4;
}
/* home_tintuc */
.tt-item{background-color: var(--wite); box-shadow: 0 0 30px rgb(0 0 0 / 15%);}
.tt-more:after{content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: var(--hover); transition: all 0.5s ease 0s;}
.tt-more:hover a{color: var(--hover);}
.tt-more:hover:after{width: 100%;}
/* product_detail */
 .card-img-top {aspect-ratio: 16 / 10;object-fit: cover;}
 .main-other h3{text-transform: uppercase;}
.product{margin-top: -3rem;}
.product-head{background-color: var(--wite); box-shadow: 0 15px 15px -15px rgb(0 0 0 / 15%);}
.product-title{background: url(/theme/images/detail.png) no-repeat bottom left / cover;}
.product-title h1{font-size: inherit; line-height: 1.5;}
.room-carousel{box-shadow: 0 0 15px rgb(0 0 0 / 25%);}
.room-carousel .room-info{}
.room-carousel .room-item{height: 0; padding-top: 67%;}
.room-carousel .room-item img{top: 0; right: 0; bottom: 0; left: 0; max-width: calc(100% - 3rem);}
.room-carousel .room-item > div{right: 0; bottom: -3rem; left: 0; opacity: 0; transition: all 0.5s ease 0.25s;}
.room-carousel .room-item > div > div{background-color: var(--main); border-radius: 15px 15px 0 0;}
.room-carousel .slick-current .room-item > div{bottom: 0; opacity: 1;}
.room-nav .room-img{height: 0; padding-top: 50%; cursor: pointer;}
.room-nav .room-img img{top: 0; right: 0; bottom: 0; left: 0; max-width: calc(100% - 3rem);}
.room-nav .slick-list{max-width: calc(100% - 30px); margin: 0 auto;}
.room-nav .slick-arrow{position: absolute; top: 0; bottom: 0; width: 30px; height: 30px; margin: auto; background-color: var(--main); border-radius: 50%;}
.room-nav .slick-arrow:hover{background-color: var(--hover);}
.room-nav .slick-arrow i{line-height: 30px; color: var(--wite);}
.room-nav .slick-prev{left: 0;}
.room-nav .slick-next{right: 0;}
.product-info h1{border-bottom: 1px solid var(--bord);}
.product-info ul{list-style: none; border-top: 1px solid var(--bord); border-left: 1px solid var(--bord); }
.product-info ul li{padding: 0.5rem 0.5rem 0.5rem calc(40px + 1rem); border-right: 1px solid var(--bord); border-bottom: 1px solid var(--bord); line-height: 20px;}
.product-info ul li img{top: 0.5rem; left: 0.5rem; opacity: 75%;}
.product-info .main-button a{background-color: var(--hover); border-color: var(--hover); color: var(--wite);}
.product-info .main-button a:hover{background-color: var(--main); border-color: var(--main); color: var(--hover);}
.product-info > a:hover{color: var(--hover);}
.product-tabs{list-style: none;}
.product-tabs li{flex: 0 0 auto; line-height: 50px;}
.product-tabs li a{display: block; padding: 0 1.5rem; text-transform: uppercase; color: var(--text);}
.product-tabs li a.active{background-color: var(--wite); color: var(--main);}
.product-content{background-color: var(--wite); box-shadow: 0 0 30px rgb(0 0 0 / 15%);}
.product-content .main-other{border-width: 1px; font-family: Lexend, 'Helvetica Neue', Arial, sans-serif; font-weight: 400; color: var(--main);}
.product-content .main-other *:before{height: 1px; background-color: var(--hover);}
@media all and (max-width: 992px){
	.room-carousel img{width: calc(100% - 4rem);}
}
@media all and (max-width: 576px){
	.room-carousel .slick-arrow{width: 40px; height: 40px;}
    .room-carousel .slick-arrow i{line-height: 40px;}
    .room-carousel .slick-prev{left: 0.5rem;}
    .room-carousel .slick-next{right: 0.5rem;}
    .room-nav .slick-arrow{display: none!important;}
    .product-tabs li a{padding: 0 1rem; text-transform: none;}
}
/* service */
.sv-item img{position: relative; border-radius: 15px; transform: scale(95%); z-index: 2; transition: all 0.25s ease 0s;}
.sv-item img:hover{transform: scale(1); border-radius: 0 15px;}
.sv-item:before, .sv-item:after{content: ''; position: absolute; width: 50%; height: 50%; z-index: 1;}
.sv-item:before{top: 0; right: 0; border-top: 1px solid var(--main); border-right: 1px solid var(--main); border-radius: 0 15px 0 0;}
.sv-item:after{bottom: 0; left: 0; border-bottom: 1px solid var(--main); border-left: 1px solid var(--main); border-radius: 0 0 0 15px;}
.sv-item h3{right: 0; bottom: 2rem; left: 0; z-index: 3;}
.sv-item h3:before, .sv-item h3:after{content: ''; position: absolute; top: 0; right: 2rem; height: 100%; margin: 0 auto; border-radius: 5px;}
.sv-item h3:before{width: calc(100% - 4rem); background-color: rgb(255 255 255 / 75%);}
.sv-item h3:after{width: 0; background-color: var(--main); transition: all 0.5s ease 0s;}
.sv-item h3 a{position: relative; z-index: 2;}
.sv-item h3:hover:after{width: calc(100% - 4rem);}
/* side */
aside{background-color: var(--wite); box-shadow: 0 0 30px rgb(0 0 0 / 15%);}
.side-title{background-color: var(--main); border-bottom: 3px solid var(--hover); border-radius: 5px 5px 0 0; color: #fff;}
.side-dm ul{list-style: none;}
.side-dm ul li+li{border-top: 1px dashed var(--border);}
.side-dm ul li a:hover{padding-left: 0.5rem; color: var(--hover);}
.side-dm ul li.active a{color: var(--hover);}
.side-ht img{width: 40px;}
.side-ht a:last-child{border-top: 1px solid #d7d7d7;}
.side-ht a:last-child img{width: 21px; vertical-align: top;}
.side-bv h3{display: -webkit-box; width: calc(100% - 120px - 1rem); -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;}
/* z_popup */
.popup{width: calc(100% - 1rem);  max-width: 576px; margin: 0 auto;}
.popup-title{padding: 0 15px; background-color: var(--main); border-radius: 20px 20px 0 0; line-height: 50px; color: #fff;}
.popup-form{background-color: #fff; border-radius: 0 0 20px 20px;}
.loading-indicator-overlay, .loading-indicator{z-index: 99993!important;}
.fancybox-close-small{width: 50px; height: 50px;}
.fancybox-close-small:after{top: 10px; right: 10px; color: #fff;}
