/*
Theme Name: Staging Inde
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
.button, button, input[type=button], input[type=reset], input[type=submit]{font-weight: 500}
.col, .columns, .gallery-item{padding-bottom: 20px}
.box-shadow, .box-shadow-2, .box-shadow-2-hover:hover, .row-box-shadow-2 .col-inner, .row-box-shadow-2-hover .col-inner:hover {
    box-shadow: 0 3px 6px 0px rgba(0, 0, 0, .1), 0 3px 6px rgba(0, 0, 0, .1);
}
.product-section{border-top-width: 0}
.slide-btn{border: 1px solid #fff}
.is-divider{display: none}
.breadcrumbs{font-weight: 400}
.dn-list.icon-box-left{align-items: center; margin-bottom: 15px}
.kn-list.icon-box-left, .lv-list.icon-box-left{align-items: center} 
.wpcf7-form{margin-bottom: 0}
.wpcf7-spinner{position: absolute;}
.wpcf7-form .col{padding-bottom: 0}
.wpcf7 form .wpcf7-response-output{margin-top: 0}
.wpcf7-form input, .wpcf7-form select{border-radius: 10px;}
.nhan-bao-gia{background: transparent; box-shadow: none}
.nhan-bao-gia .wpcf7-submit{width: 100%; background-color: #c6c6c6; text-transform: uppercase; color: #000}
.nhan-bao-gia .wpcf7-submit:hover{background-color: var(--fs-experimental-link-color-hover); color: #fff}
.nhan-bao-gia form .wpcf7-response-output{color: #fff}
.woocommerce-pagination{margin: 20px 0}
.nav-pagination>li>a, .nav-pagination>li>span{border-radius: 4px; border: 1px solid #787878; font-weight: 400; line-height: 2.2em}
.nav-pagination>li>.current, .nav-pagination>li>a:hover, .nav-pagination>li>span:hover{}
.lightbox-content{background: transparent; box-shadow: none}
.single-product div#tab-description{padding-bottom: 50px !important}

.hwp-slider-dn .img-inner, .lv-img  .img-inner{border-radius: 20px; overflow: hidden}

.col.post-item{padding-bottom: 0}
.box-blog-post .post-title{margin-bottom: 10px; margin-top: 10px}
.box-blog-post .post-title a {overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical;/*min-height: 40px;*/}
.blog-post-inner .post-meta{margin-top: 15px; background: url('./images/icon-date.png') no-repeat left top 0; padding-left: 25px; font-size: 14px}
.home-p-tabs li{padding: 5px}
.home-p-tabs .nav-outline>li>a{border: 1px solid #eaeaea; border-radius: 8px; font-size: 1em; letter-spacing: 0; text-transform: inherit; padding: 3px 30px}
.home-p-tabs .nav-outline>li.active>a, .home-p-tabs .nav-outline>li>a:hover{border-color: var(--fs-experimental-link-color-hover); background-color: var(--fs-experimental-link-color-hover); color: #fff}


.product.product-small .col-inner{background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.25); border: 1px solid #eaeaea}
.product-small .box-image{height: 0; padding-bottom: 100%; position: relative;}
.product-small .box-image>div{position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%,-50%);transform: translate(-50%, -50%); width: 100%; }
.product-small .box-image img{max-width: 100%;max-height: 100%; width: auto}
.product-small .box-text{padding-top: 1.4em}
.product-small .box-text .product-title{font-size: 16px; font-weight: 400}
.product-small .box-text .product-title a, .product-small .box-text{color: #5C5C5C}
.product-small .box-text .product-title a:hover, .hwp-btn-p{color: var(--fs-experimental-link-color-hover);}
.hwp-btn-p{display: inline-block; padding-top: 5px}
.hwp-btn-p:hover{text-decoration: underline;}
.hwp-btn-p img{margin-left: 5px}

.gt-banner {border-radius: 20px; overflow: hidden}
.row-solid .gt-icon-box.col:before{border-left: 3px solid #000}
.row-solid .gt-icon-box.col:first-child:before{border-left-width: 0}
.gt-icon-box .icon-box{padding: 10px 50px}
.bg-cc .fill{width: 50%}
.gt-cc-slider .flickity-prev-next-button{opacity: 1; position: static; transform: translateX(0);}
.gt-cc-slider .flickity-prev-next-button svg {border-width: 0;background-color: #fff; padding: 30%}
.gt-cc-slider .flickity-prev-next-button svg .arrow{fill: #000;}
.gt-cc-slider .flickity-prev-next-button:hover svg{ background-color: #fff; border-color: #fff; opacity: 1}
.gt-cc-slider .flickity-prev-next-button:hover svg .arrow{fill: #C91119 !important}
.gt-cc-slider .flickity-prev-next-button.next{margin-left: 15px}

/*SHOP*/
.category-page-title{border-radius: 20px; overflow: hidden; margin: 30px 0; padding: 50px 0}
.category-page-title h1{margin-bottom: 0; text-transform: uppercase; font-size: 30px}
.category-page-title img{margin: 13px 0}
.hwp-shop-filter{margin-bottom: 30px}
.woocommerce-ordering{margin: 0}
.woocommerce-ordering select{ border: 1px solid #252525 !important;border-radius: 8px; margin: 0}

.widget-title{display: block; background-color: #C91119; color: #fff; text-align: center; padding: 15px; border-radius: 10px 10px 0 0}
.widget_nav_menu .menu{box-shadow: 0 4px 4px rgba(0, 0, 0, .25); border-radius: 0 0 10px 10px; padding: 15px}
.widget_nav_menu .menu .sub-menu{border-left-width: 0}

/*Single Product*/
.single-product h1{margin-bottom: 0}
.flash-title{background: #C91119; color: #fff; padding: 10px; border-radius: 10px 10px 0 0; margin-top: -1px}
.woocommerce-product-rating{margin-bottom: 10px}
.woocommerce-Reviews .col{flex-basis: 100%;max-width: 100%}
ul.product_list_widget li{min-height: 100px; padding-left: 120px; display: flex; flex-wrap: wrap; align-items: center}
ul.product_list_widget li >*{display: block}
ul.product_list_widget li img{width: 100px; height: 80px; object-fit: contain;}
ul.product_list_widget li span{display: block}
.p-list-vm{color: #C91119; margin-top: 5px}
.p-list-vm .fa{color: #000}

.woocommerce-tabs .tabs.nav-line{border-bottom: 1px solid #807D7D}
.woocommerce-tabs .tabs.nav-line>li>a{font-size: 20px}
.woocommerce-tabs .tabs.nav-line>li>a:before{top: auto; bottom: 0; background-color: #5c5c5c}

/*Blogs*/

.hwp-blogs{background: url('/wp-content/uploads/2025/06/bg-shop.jpg') no-repeat center center; background-size: cover; border-radius: 20px; padding: 80px 0; color: #fff}
.hwp-blogs h1{font-size: 30px; margin-bottom: 0px; color: #fff}
.hwp-blogs a{color: #fff}
#hwp-breadcrumbs{font-size: 12px}
.blog-archive >.row{margin-top: 30px}
.blog-archive .col.post-item{padding-bottom: 20px}
.blog-archive .box-blog-post .post-title{font-size: 20px}
.blog-archive .blog-post-inner .post-meta{background: url('./images/uis_calender.png') no-repeat left center; font-size: 12px; padding-left: 20px}
.hwp-readmore{font-weight: 600; color: #C91119; display: block !important; margin-top: 10px !important; font-size: 18px}
.hwp-readmore:hover{text-decoration: underline;}
ul.links.page-numbers{margin-top: 20px}

.hwp-recent-box{padding: 20px 10px; box-shadow: 0 4px 4px rgba(0,0,0,.25)}
.hwp-recent-box li{padding: 8px 0; border-top-width: 0 !important}
.hwp-recent-box li:first-child{padding-top: 0}
.hwp-recent-post{width: 100%; display: table}
.hwp-recent-post>div{display: table-cell; vertical-align: middle;}
.hwp-recent-post .box-image{width: 95px;}
.hwp-recent-post .box-image .overlay-icon{width: 30px; height: 30px; line-height: 30px}
.hwp-recent-post:hover .box-image .overlay-icon{transform: scale(1.1);}
.hwp-recent-post .box-image .image-cover{border-radius: 10px}
.box-text-link{padding-left: 15px;}
.box-text-link a{overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical;}
.box-text-link .meta-post{font-size: 12px; margin-top: 10px; color: #666; margin-bottom: 0}

/*Single Post*/
.blog-single #hwp-breadcrumbs{font-size: 14px; margin-bottom: 10px}
.blog-single #hwp-breadcrumbs a{color: #C91119}
.blog-single h1.entry-title{border-bottom: 1px solid #252525; padding-bottom: 20px}
.tp-post-meta .fa{margin-right: 3px; color: #C91119}
.tp-post-meta span{margin-right: 20px}
.tp-post-meta span:last-child{margin-right: 0}

.blog-share{margin-top: 30px}
.blog-share ul{margin: 0; padding: 0; display: table; width: 100%}
.blog-share ul li{list-style: none; width: 33.3333%; float:left; margin: 0; padding-left: 20px}
.blog-share ul li:first-child{padding-left: 0}
.blog-share ul li a{ font-size: 14px;color: #fff; display: block; border-radius: 8px; padding: 8px; text-align: center; position: relative; cursor: pointer}
.blog-share ul li a img{position: absolute; top: 8px; left: 10px; z-index: 1}
.blog-share ul li.facebook a{background-color: #0063E0}
.blog-share ul li.gmail a{background-color: #C5221F}
.blog-share ul li.print a{background-color: #828282}

.relate-top{margin-bottom: 30px}
.related-head{font-size: 30px; text-align: center; font-weight: bold; margin-bottom: 0; line-height: 1.3em}
.relate-image {position: relative;overflow: hidden; background-size: cover;background-position: center;}
.relate-image::before {content: "";display: block;padding-top: 65%;}
.relate-image .image{position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}
.related-title{margin: 12px 0;}
.related-title a{font-size: 15px;color: #000; font-weight: bold; line-height: 1.3em}
.related-box .hwp-date{font-style:italic; font-size: 14px; margin-top: 3px}
.relate-item:hover .related-title a{color: #3f7cbd}

/*Liên hệ*/
.lh-banner{border-radius: 20px; overflow: hidden}

/*Tuyển dụng*/
.td-list{position: relative; background-color: #F6F6F6; border-radius: 20px; min-height: 75px; padding:20px 175px 20px 20px;}
.td-list .td-box-title{margin-bottom: 0} 
.td-list span{background-color: #C91119;color: #fff; position: absolute; top: 20px; right: 20px; z-index: 1; padding: 5px 10px; border-radius:8px}

.portfolio-single-page{margin-top: 30px}
.td-top .col{padding-bottom: 15px}
.td-info{background-color:#F1F1F1; padding: 20px; border-radius: 10px}
.portfolio-related{margin-bottom: 50px}
.td-relate-title {font-size: 28px}

@media only screen and (min-width: 1200px){
	.wpcf7-form input, .wpcf7-form select{ height: 45px}
	.portfolio-single-page h1{font-size: 30px}
	.portfolio-top .page-wrapper{max-width: 800px}
}
@media only screen and (max-width: 991px){
	.gt-icon-box .icon-box{padding: 15px 20px}
}

@media only screen and (max-width: 849px){
	.medium-logo-left .flex-left{flex: 0}
	#logo{width: 80px !important}

}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	.blog-share ul li{width: 100%; float: none; padding: 0; margin-top: 15px}
	.category-page-row{padding-top: 0}
}

@media only screen and (max-width: 549px){
	.bg-cc .fill{width: 100%}
	.category-page-title{padding: 0}
	.hwp-blogs{padding: 50px 0}
	.row-solid .gt-icon-box.col:before{border-left-width: 0}
	.home-p-tabs .nav-outline>li>a{padding: 3px 15px}
	.banner h1{font-size: 3em}
	.woocommerce-tabs .tabs.nav-line>li{width: auto; margin-right: 20px !important}
	.td-list span{font-size: 14px}
	.row-btn-dn{text-align: center}
	.row-btn-dn .button{margin: 0}
}