/* Theme Name: Puta Theme
 * Version: 1.0
 */

@font-face {
  font-family: 'F5 Magistral Book';
  src: url("fonts/FSMagistralBook.woff") format("woff"), url("fonts/FSMagistralBook.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'F5 Magistral Book Italic';
  src: url("font/FSMagistralBookItalic.woff2") format("woff2"), url("font/FSMagistralBookItalic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap; }


:root{
  --primary:  #923a63;
  --secondary:  #8d2858;
  --size-title: 65px;
  --font-title: 'F5 Magistral Book';
  --family:  'F5 Magistral Book';
  --border: #d7d7d7;
  --bg: #e7f3f7;

}
select, input, textarea{
  -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
}
li{list-style-type: none;}
.primary-color{color: var(--primary)}
.second-color{color: var(--secondary)}
.third-color{color: var(--third);}
.four-color{color: var(--four);}
.five-color{color: var(--five)}
.font-title{font-family: var(--font-title);font-weight: normal;-webkit-font-smoothing: antialiased; font-size: 65px;}
.row-collapse{margin:  0}
.row-collapse>.col{padding:0}

/* ::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--primary); 
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary); 
} */

body{font-family: var(--family);font-weight: normal; font-size: 17px; z-index: 1;-webkit-font-smoothing: antialiased; line-height: 1.42857143; -webkit-tap-highlight-color: transparent;}
h2{font-size: 38px}
h3{font-size: 35px;}
h4{font-size: 25px}
input, button, textarea, select{outline: none}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
p {line-height: 30px; font-size: 18px}

.z-1{z-index: 1}
.z-2{z-index: 2; position: relative;}
section{position: relative}
.color-white{color: white}

#gallery-home .slick-initialized .slick-slide img{height:  100%; width: 100%; object-fit: cover}
#gallery-home .slick-initialized .slick-slide{height: 100vh}
.row-not-container{overflow: hidden;}

.slick-dots>li{border: 3px solid #c3c3c3;
  width: 12px;
  height: 12px;
  border-radius: 50%;}
.slick-dots>.slick-active{border-color: var(--primary)}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
} 
.col-1-5{flex: 0 0 20%; max-width: 20%;position:relative; width: 100%; padding-left: 15px; padding-right: 15px;}
main, footer{position: relative}
.overlay{position: absolute;width: 100%; height: 100%;top: 0; left: 0;background-color: #000; opacity: 0.4;}
.flex-space{display: flex; justify-content: space-between;}
.wrap-slide-home img{width: 100%; min-height: 586px; object-fit: cover;}

.home-title{font-size: 40px; margin-bottom: 30px; font-weight: normal;text-transform: uppercase; position: relative; display: inline-block;}
.home-title::before{
  position: absolute;
  width: 100%;
  top: -35px;
  text-align: center;
  font-size: 20px;
  text-transform: none;
}

.box-shadow{box-shadow: 0px 10px 40px rgb(239 0 50 / 15%)}
.box-shadow-dark{box-shadow: 0px 0px 20px rgb(0 0 0 / 15%)}
.breadcrumb{padding-bottom: 40px; color:  #676767}
.breadcrumb_last{color: var(--primary)}
.breadcrumb .divider{margin: 0 10px;}

.icon{margin-right: 10px; transition: 0.5s; display: inline-block}
.icon-right{margin-left: 10px; transition: 0.5s; display: inline-block}

.success{color: #28a745}
.alert{color: rgb(160, 14, 14)}
.warning{color: #ffc107}

.page-template-title{color: var(--primary); font-size: 25px; margin-bottom: 10px}
.page-template-sub-title{color: #4d4d4d; font-style: italic;margin-bottom: 20px}
.page-template main{padding: 60px 0 50px}

.read-more-btn{padding: 10px 25px 15px;
    display: inline-block;
    margin-top: 30px;
    color: #fff;
	border: 1px solid var(--secondary);
	background-color: var(--secondary);
	transition: 0.5s;
}
.hover_effect_2{position: relative; overflow: hidden}
.hover_effect_2 span{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
	background: var(--secondary);
	transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	top: 0;
	left: 0;
}
.hover_effect_2:hover{color: var(--secondary); background-color: transparent}
.hover_effect_2:hover span{transform: scale(0)}
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
}
.pagination li .page-numbers {
    width: 45px;
    height: 45px;
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
	transition: 0.5s;
}
.pagination li .page-numbers.current, .pagination li .page-numbers:hover {
	background-color: var(--primary);
	color: #fff;
}
.pagination li + li {margin-left: 8px}

/*================== style header ======================*/
#main-header{}
.wrap-main-header{display: flex; align-items: center; justify-content: space-between; padding: 14px 0; flex-wrap: wrap;}
.logo-wrap{display: inline-block;}
.logo-wrap img{width: 120px;}
.wrap-main-menu{display: flex; align-items:  center;}
.wrap-icon-header{display: flex}
.icon-header{display: inline-flex;
    width: 50px;
    height: 50px;
    padding: 15px;
    border: 1px solid;
    border-right: none;
    position: relative;
    cursor: pointer; 
	transition: 0.5s;
}
.icon-header:hover{background:var(--primary)}
.wrap-icon-header a:last-child .icon-header{border-right: 1px solid;}
.icon-header b{
    position: absolute;
    background: var(--secondary);
    color: #fff;
    width: 17px;
    height: 17px;
    font-size: 13px;
    border-radius: 50%;
    padding: 2px;
    top: 4px;
    right: 5px;
	display: flex;
	align-items: center; justify-content: center;
	z-index: 2
}

.wrap-bottom-menu{padding: 10px 0; position: relative;}
.wrap-bottom-menu .row{border: 1px dashed #fff;}
#bottom-menu{display: flex; justify-content: space-evenly;}
.menu-item{font-size:  18px}
.main-menu>.menu-item{padding: 15px; position: relative; padding-bottom: 0;}
.main-menu>.menu-item a {font-size: 16px}
.main-menu>.menu-item::before{
  position: absolute;
  width: 100%;
  height: auto;
  text-align: center;
  font-size: 15px;
  top: -10px;
  left: 0;
  color:  #666666;
}
.main-menu .current-menu-item::before{color: var(--primary); font-weight: normal;}
.menu-item .sub-menu{position: absolute;
    z-index: 99;
    min-width: 250px;
    background: #fff;
    top: 100%;
    opacity: 0;
    transition: 0.5s;
    transform: translateX(10px);
    visibility: hidden;
    left: 0;
    padding: 10px 0;
}
.sub-menu>.menu-item{padding: 0 30px}
.sub-menu .menu-item>a{
    display: block;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
    padding-left: 25px;
    position: relative;
    transition: 1s;
}

#bototm-menu .sub-menu .menu-item:last-child>a{border: none}
.sub-menu .menu-item>a:after{
    content: '\eaa0';
    position: absolute;
    top: 7px;
    left: -5px;
    font-family: IcoFont!important;
    font-size: 16px;
    transition: 0.5s;
}
.sub-menu .menu-item a:hover{color: var(--primary); font-weight: bold}
.sub-menu .menu-item>a:hover:after{transform: translateX(7px)}
.menu-item:hover>.sub-menu{opacity: 1;
    transform: translateX(0);
    visibility: visible;}
.main-menu .current-menu-item{font-weight: bold;
    color: var(--primary);}
.wrap-list-cate{position: relative;padding: 14px 0;}
.cate-title{font-size: 20px; margin: 0; cursor: pointer;}

#header-cover .overlay{background-color: var(--primary); opacity: 0.4;}
.page-title{position: relative;color: #fff;}
.page-title{text-align: center;font-weight: normal; font-size:55px; line-height: 80px}

#menu-mobile{position: fixed;
  top: 0;
  right: -100%;
  z-index: 102;
  width: 100%;
  height: 100%;
  transition: 0.5s;
}
  .menu-icon{position: fixed;
   background: var(--secondary);
    border-radius: 50%;
	display: none;
	color: #fff;
	top: 30%;
	right: 10px;
	z-index: 101;
	opacity: 0.7;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
}

#header-cover{padding: 125px 0}

/* style form search */
.main-search{position: fixed;
    top: 0;
    right: 0px; border-radius: 30px;color: var(--primary);
    opacity: 0; z-index: -1;
    transition: 0.4s; width: 100%; height: 100%; padding: 0 20px}
.main-search #searchform{position: relative;
    z-index: 1;
    text-align: center;
    top: 20%;
    max-width: 500px;
    margin: 0 auto;
    background: #000;
    border-radius: 30px;}
.active.main-search{opacity: 1; z-index: 9999;}
.main-search .form-search-control{width: 100%;
    padding: 5px 15px 10px 20px;
    border-radius: 30px;
    outline: none;
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    font-size: 25px;
height: 50px;}
#close-form{position: absolute;
    z-index: 3;
    width: 50px;
    height: 50px;
    top: 0;
    right: 0px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;}
#load-data ul{border-radius: 30px;
    padding: 0 23px 30px;
    text-align: left;}
#load-data ul li{padding: 10px 0; border-bottom: 1px dashed var(--primary); color: #fff}
#load-data ul li:lastchild{border-bottom: none;}

/* style header home */
#header-home{position: absolute;
    z-index: 100;
    width: 100%;}
#header-home .icon-header, #header-home .menu-item, #header-home .menu-item::before{color: #fff; transition: 0.5s}
 .menu-item:hover, .menu-item:hover::before{color: var(--primary)!important}
#header-home .current-menu-item, #header-home .current-menu-item::before{font-weight: bold}
#header-home .icon-header img{filter: brightness(0) invert(1); transition: 0.5s}
.icon-header:hover img{filter: brightness(0) invert(1);}
#header-home .wrap-top-header{display: flex; align-items:  center; justify-content: space-between; padding:  35px 0}
#header-home .wrap-main-header{justify-content: center;}
#header-home .main-menu>.menu-item{padding: 15px 30px}
#header-home .main-menu>.menu-item a {font-size: 18px}
/*============= style footer ================*/
footer{padding: 70px 0 30px}
h3.widgettitle{font-size: 20px;margin-bottom: 20px; text-transform: uppercase; font-weight: normal}
.logo-footer-wrap.widget-footer { width: 250px; height: 100%; }
.logo-footer-wrap.widget-footer img { width: 100%; height: 100%; object-fit: cover;}
.widget-footer{margin-bottom: 35px}
.wrap-footer{padding-bottom: 30px; display: flex; flex-wrap: wrap; color: #666666;justify-content: space-between;}
.wrap-widget-main{display: flex;}
.footer-info{max-width: 350px}
.footer-info .info-item{padding-bottom: 10px;}
li.widget_nav_menu{padding-left: 50px;}
.widget_nav_menu .menu-item{
  position: relative;
  padding-bottom: 10px;
  padding-left: 30px;
  transition: 0.5s;
}
.widget_nav_menu .menu-item::before{
  position: absolute;
  content: '\eab8';
  top: 0;
  left: 0;
  font-family: 'IcoFont';
}
#logo-footer{display: flex;
  justify-content: space-between;
  align-items: center; flex-wrap: wrap ;}

.social{display: inline-block; margin-right: 15px;}
.social:last-child{margin: 0}
.social a{width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  font-size: 20px;
  align-items: center;
  justify-content: center;
  color: var(--primary);
background:  #fff; transition: 0.5s;}
.social a:hover{background: var(--four); color: #fff}

.copyright{text-align: center;}

/*-------------style home ----------- */
.wrap-gallery-content{
  position: absolute;
    text-align: center;
    width: 100%;
    bottom: 25%;
    z-index: 2;
    color: #fff;
}
.gallery-btn{
      font-size: 18px;
    border: 1px solid;
    padding: 10px 50px 10px;
    display: inline-block;
    border-radius: 50px;
	overflow: hidden;
	position: relative;
}
.gallery-btn:before{
	content: '';
    width: 100%;
    position: absolute;
    height: 100%;
    top: 0;
    left: 100%;
    background: var(--primary);
    transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    z-index: -1;
}
.gallery-btn:hover:before{
	left: 0;
}
.gallery-title{
  font-size: 100px;
  font-family: var(--font-title);
  padding-bottom: 80px;
}

#about-home{padding: 85px 0; overflow: hidden;}
#about-home::before{
  content: '';
  position: absolute;
  z-index: -1;
  width: 50%;
  height: 110%;
  background: #f9f6f1;
      top: -35%;
    right: -94px;
    transform: rotate(-18deg);
	transition: 0.8s;
	
}
#about-home:hover::before{
	background: var(--primary);
}
.section-product{padding-top: 70px;}

.section-product .content{margin-bottom: 50px}
.section-product .home-title{margin-bottom: 60px;}

#about-home .wrap-about-content{padding-bottom: 30px; padding-right: 70px; }
/* #new-products .home-title::before, #tool-gift .home-title::before, #food .home-title::before, #about-home .home-title::before{content: attr(data-text);} */
.banner-ads{padding-top:  50px}
.wrap-home-title{text-align: center;}
/*============ style product layout ==============*/
.wrap-thumb{position: relative; overflow: hidden; height: 450px}
.wrap-thumb a{ width: 100%;}
.wrap-thumb img{width: 100%; height: 100%; object-fit: cover; transition: 0.6s;}
.wrap-thumb img:hover{transform: scale(1.04)}
.wrap-thumb .product_thumb_2{position: absolute; top: 0; left: 0;
    opacity: 0; transition: 0.7s; transform: scale(0); transform-origin: center;
}
.wrap-thumb:hover .product_thumb_2{opacity: 1; transform: scale(1)}
.wrap-wishlist{
	position: absolute;
    bottom: 0;
    right: -51px;
	transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrap-wishlist .wishlist{
	border: 1px solid;
	transition: 0.5s;
}
.wrap-wishlist .wishlist:hover img{filter: unset}
.wrap-thumb:hover .wrap-wishlist{right: 0;}
.wrap-wishlist .wishlist:hover{border-color: var(--primary); background: transparent}
.wrap-wishlist.added_wishlist{right: 0}
.wrap-wishlist.added_wishlist .wishlist{
	background: var(--primary)!important;
	border-color: var(--primary);
	display: inline-flex;
} 
.wrap-wishlist.added_wishlist img{filter: brightness(0) invert(1)!important;}

.wrap-product{margin-bottom: 30px}
.product_title{ margin: 0;margin-top: 30px;margin-bottom: 10px; font-size: 20px;
    transition: 0.5s; overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;}
.product_title:hover{color: var(--primary); transition: 0.5s;}
.product_price .price, .product_price .sale_price{
  font-size: 22px;
  margin-right: 10px;
}
.product_price .old_price{font-size: 16px; color: #666666; text-decoration: line-through;}
.product_link{
  border: 1px solid var(--primary);
    color: var(--primary);
    position: relative;
    overflow: hidden;
    transition: 0.5s;
    text-transform: uppercase;
    padding-top: 5px;
    padding-bottom: 10px;
    text-align: center;
    transition: 0.5s;
}
.hover_effect span{
    position: absolute;
    width: 25%;
    height: 100%;
    background-color: var(--primary);
    transform: translateY(150%);
    border-radius: 50%;
    left: calc((var(--n) - 1) * 25%);
    transition: 0.5s;
    transition-delay: calc((var(--n) - 1) * 0.1s);
    z-index: -1;
}
.hover_effect:hover{color: #fff}
.hover_effect:hover span{
    transform: translateY(0) scale(2);
}
.hover_effect span:nth-child(1) {
    --n: 1;
}
.hover_effect span:nth-child(2) {
    --n: 2;
}
.hover_effect span:nth-child(3) {
    --n: 3;
}
.hover_effect span:nth-child(4) {
    --n: 4;
}

.post_title{
  font-weight: bold;
    font-size: 20px;
    font-style: italic;
	line-height: 38px;
}

.post_desc{
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 25px;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    margin-bottom: 20px;
    max-height: 50px;
}
.post_link{display: inline-block; color:  var(--secondary); font-style: italic;}
.list-post-cate{padding-top: 15px;}
.wrap-post{ margin-bottom: 75px; position: relative; }
.wrap-post .wrap-thumb {height: 200px}
.wrap-post::before{
  position: absolute;
    width: 97%;
    height: 112%;
    border: 1px
 solid var(--secondary);
    top: -6%;
    left: 30px;
    content: '';
}
.wrap-post .wrap-content{padding-left: 40px; position: relative}
#post-home{padding: 60px 0 0}
.wrap-post-home{margin-bottom:  60px}
.wrap-banner-blog img{width: 100%}
#post-home .home-title::before{content: 'News'}
.post-home-item{padding: 25px; margin-bottom: 25px; border: 8px solid #f9f6f1; display: block; transition: 0.6s}
.post-home-item .wrap-thumb{height: 140px;}
.post-home-item:hover{border-color: var(--primary)}

.page-template-page-gioithieu #feedback{margin-top: 40px}
.wrap-feedback{position: relative; margin-bottom: 70px}
.wrap-feedback .overlay{
    background-color: #a71409;
    opacity: 0.6;
}
.icon-quote{
    position: absolute;
    z-index: 3;
    color: #fff;
    font-size: 40px;
}
.icon-quote.left{
    top: 35%;
    left: 10%;
}
.icon-quote.right{
    right: 10%;
    top: 60%;
}
.feedback-list{
    max-width: 840px;
    margin: 0 auto;
    position: relative;
    color: #fff;
    text-align: center;
    padding: 60px 0 90px;
}
.feedback-item{padding: 0 20px}
.feedback-thumb{    
    width: 80px;
    height: 80px;
    border-radius: 50%;
    
    margin: 0 auto;
    margin-bottom: 30px;
}
.feedback-content{
        display: block;
    text-align: left;
    font-size: 24px;
    font-style: italic;
}
.feedback-name{font-size: 24px;font-weight: bold}
.feedback-list .slick-dots{
    bottom: 30px;
}
.feedback-list .slick-dots>li{
    background: #ffffffa6;
    border-color: transparent;
}
.feedback-list .slick-dots>.slick-active{background: #fff; border-color: transparent}

#logo-slide{margin-bottom: 50px}
.wrap-logo-slide{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
/*=============== style taxonomy and single ===============*/

.archive main, .single main{padding: 90px 0}
.tag-label{font-weight: bold; color: var(--primary)}
    .tag-item{display: inline-block;
    padding: 3px 20px;
    background: #fff6e4;
    color: var(--third);
    margin-left: 10px;
    border-radius: 15px;}
    .lis-tag-wrap{padding: 20px 0; border-top: 2px solid #f0f0f0; border-bottom: 2px solid #f0f0f0}
    .wrap-product-related .product_price{background: #fff;border: 1px solid #979797;color: var(--third)}
.related-post{padding-top:  30px}  
.related-title{font-weight: bold; font-size:  20px;}  
.list-news li{list-style-type: circle;}
    .wrap-product-related .wrap-product:hover .product_price{background: var(--primary); border-color: transparent; color: #fff}
.single-post-title{font-size: 25px;padding-bottom: 20px;border-bottom: 2px solid; margin-bottom: 20px;}
.wrap-single-content img{width:  100%;height: auto;}
 
.template-congtrinh .wrap-post{border:  none; padding-bottom:  0; position: relative; transition: 0.5s}
.template-congtrinh .wrap-post:hover{transform: translateY(10px)}
.template-congtrinh .wrap-thumb{width:  100%; height: 480px;position: relative;}

.template-congtrinh .wrap-content{color: #fff;
  padding:  30px;
    position: absolute;
    width: 100%;
    bottom: 0;
  }
.template-congtrinh .post_link{width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--four);
    display: inline-flex;
    align-items: center;
    justify-content: center; padding: 0;}
.template-congtrinh .post_title{color:  #fff}
.page #page-content{padding: 50px 0}
.gallery{margin-top: 50px}
.wrap-gallery-item{width: 100%; height: 290px; margin-bottom:  20px}
.wrap-gallery-item img{width: 100%; height: 100%; object-fit: cover; border-radius: 20px;}
#why-us{background:  var(--primary); color:  #fff; overflow: hidden;}
.wrap-banner{position:  relative;width: 100%; height: 100%;}
.wrap-banner img{width: 100%; height: 100%; object-fit: cover;}
#why-us .wrap-content{padding: 50px 50px 30px}
.icon-play{position: absolute;
    left: calc((100% - 80px)/2);
    top: calc((100% - 80px)/2);
    font-size: 22px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fff;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center; cursor: pointer; transition: 0.7s;}
.icon-play i{margin-left: 5px; transition:  0.5s;}
 .icon-play i::after{position: absolute; content: '';
    width: 80px; height: 80px; background: var(--primary);
    transform: scale(0);transform-origin: center;
    border-radius: 50%;
    transition: 0.5s;
    top: 0;
    left: 0;
    z-index: 1;
} 
.icon-play i::before{position: relative; z-index: 2;}
.icon-play:hover{color: #fff}
.icon-play:hover i::after{transform: scale(1);}

.wrap-content .home-title{color: #fff}
.wrap-content .item{margin-bottom: 30px;}
.wrap-content .sub-title{font-size: 20px;
    color: var(--five);
    text-transform: uppercase; margin-bottom: 15px}
.wrap-content .divider{display: block;
    width: 115px;
    height: 5px;
    background: var(--four);}
.list li i{background: var(--four);
    border-radius: 50%;
}
ul.list li{padding-bottom: 15px;}

#about-us{overflow: hidden;}
#about-us .box{padding: 60px 50px}
#about-us .title{}
#about-us .content{font-size: 16px;}
.countdown{margin-top: 60px; color:  var(--primary)}
p.number{font-size: 45px;
    font-weight: bold;
    margin-bottom: 0;}
.label{    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;}

#quytrinh{text-align: center;padding: 80px 0; background: #f4f5f0;}
#quytrinh .title{}
#quytrinh .sub-title{max-width: 635px;
    margin: auto;}
.list-step{margin-top: 70px;}
.box-step{margin-bottom: 40px;}
.box-icon{text-align: center;
    position: relative;
    display: block;
    width: 115px;
    margin: auto;
    height: 115px;
    background: #fff;
    padding-top: 25px;
    border-radius: 20px;}
.box-title{font-size: 22px;
    color: var(--primary);
    font-weight: bold;
    margin: 20px 0;}
.box-icon span{position: absolute;
    width: 30px;
    height: 30px;
    color: #fff;
    background: var(--four);
    border-radius: 50%;
    font-size: 16px;
    padding-top: 4px;
    top: -10px;}

/*============style contact ========*/
.wrap-form-contact{}
    .wrap-form-contact .form-control{
    font-size: 16px;
    padding: 8px 20px;}
    .form-control::placeholder{font-style: italic;}
    .contact-social{margin:  30px 0}
    .contact-social .social a{background: #f2f8ec}
  /*=========== style sidebar========== */
  aside{padding-right: 35px;}
.box-sidebar{
  padding: 20px;
  border: 1px dashed var(--secondary);
  margin-bottom: 45px;
}
.box-sidebar-title{
  font-size: 20px;
    color: #fff;
	background: var(--secondary);
    padding: 10px 0 15px;
    text-align: center;
    font-weight: normal;
    margin-bottom: 35px;
}
.item{margin-bottom: 35px;}
.item-thumb{width: 100%; height: 100px; background:  #faf9f5}
.item-thumb img{width: 100%;
    height: 100%;
    object-fit: contain;}
.item-title{font-size: 18px; font-weight:  normal; line-height: 30px; min-height: 43px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.item-price{margin-bottom: 2px;}
.item-btn{color:  var(--secondary);}
.item-price .old_price{
  margin-left: 10px;
    text-decoration: line-through;
    color: #666666;
    font-size: 15px;
}

/*============= style form ========================*/
.form-control{border: 1px solid var(--border);
  padding: 5px 15px;
  width: 100%; transition:  0.5s; border-radius: unset}
.form-control:focus{border:  1px solid var(--primary); background: #f2f8ec}
  .form-control-wrap{margin-bottom: 20px; position: relative;}
  .btn-form{width: 100%; border: none; background: var(--primary); color: #fff; padding: 12px 0 12px; font-size: 20px}
.btn-form#cf-submit .circle-loading {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   position: relative;
   margin: 0 auto;
}

.btn-form#cf-submit .circle-loading:before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: inherit;
   border: 5px solid transparent;
   border-right-color: var(--primary);
   border-bottom-color: var(--primary);
   animation: circleLoading 1s forwards infinite linear;
}

@keyframes circleLoading {
   to {
      transform: rotate(360deg);
   }
}
.wrap-contact-info{padding: 40px 60px; border: 1px dashed var(--secondary); margin-bottom: 30px}
  .form-title{font-size: 30px; margin-bottom: 20px}
  #submit_request{background: var(--third); border-radius: 30px;padding: 10px 0}
  #form-request #file{    background: transparent;
    position: relative;
    z-index: 2;
    padding: 7px 20px;
    color: transparent; cursor: pointer;}
    .form-file{background: #fff; border-radius: 30px;}

  input#file::-webkit-file-upload-button {
    visibility: hidden;
  }
  #file::before {
    content: 'File: JPG, PNG...(2MB)';width: 70%;
    display: inline-block;
    padding: 3px 8px;
    outline: none;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    font-size: 18px;
    color: #bfbfbf;
    font-style: italic;
    
  }
.icon-upload{right: 0px;
  position: absolute;
  font-size: 40px;
  background: var(--third);
  color: #fff;
  width: 23%;
  text-align: center;
  border-radius: 0 30px 30px 0;
  height: 100%;
  cursor: pointer;display: inline-flex;
  align-items: center;
  justify-content: center;
}
  .page-template-title.request{color: var(--third); margin-bottom: 30px}
    .wrap-page-request{padding: 60px 140px;
    background: var(--bg);}
    .form-request .form-control{border: none; border-radius: 30px; padding: 10px 25px;background: #fff}
    .form-request .form-control::placeholder{font-style: italic; color: #bfbfbf}
/*========== media max width 1305px ====*/
@media(max-width: 1305px){
    
   .main-menu>.menu-item{padding: 15px 17px; padding-bottom: 0}
   
}
/*======================== media max width 1200px =========*/
@media(max-width: 1200px){
#header-home .main-menu>.menu-item{padding: 15px}
#header-default #logo{order: 1}
#header-default .wrap-icon-header {order: 2}
#header-default .wrap-main-menu{order: 3; margin-top: 30px; margin-bottom: 30px}
	.wrap-service-item{
	padding-right: 30px;
    padding-left: 40px;
	}
	#about-us .box{padding: 30px}
#text-cover{display: none;}

#main-sidebar .widgettitle{font-size: 20px;}
.wrap-page-request{padding: 50px 80px}
	.wrap-service-contact{padding: 40px}
li.widget_nav_menu{padding-left: 0}
.widget-footer, .wrap-widget-main .widget_nav_menu{width: 50%}
.wrap-widget-main{width: 100%}
#about-home::before{
    top: -257px;
    right: -63px;
    }
.product_title{height: 56px; margin-bottom: 0}
.icon-quote.right{right: 0; top: 68%}
.icon-quote.left{top: 26%; left: 0}
.post-home-item .wrap-thumb{height: 120px}
}
/*=========== media max width 992px ==============*/
@media(max-width: 992px){
    header .wrap-main-menu{display: none}
	.wrap-main-header{justify-content: space-between}
  .header-info-mail{display: none}
	.header-info-phone{border: none}
  #menu-mobile .overlay{background-color: transparent;}
  #logo{max-width: 40%;}
	#logo .logo-wrap {width: 150px; height: 100%}
  .logo-wrap img{width: 100%}
  .menu-pc{display: none!important}
  #menu-mobile.active-menu{right: 0}
  .menu-icon{display: flex}
  .wrap-menu-mobile{width: 100%;
    height: 100%;
    position: relative;
    background: var(--primary);
    padding: 40px;
    font-size: 22px;
	  overflow: auto;
  }
  .wrap-menu-mobile>a{display: block; width: 100%}
  .wrap-menu-mobile>a>img{display: block; max-width: 375px; margin: 0 auto}
  .hide-menu{position: absolute;
    color: #fff;
    font-size: 40px;
    top: 0;
    right: 10px;}
    #main-mobile-menu .sub-menu{position: relative;
    opacity: 1;
    visibility: visible;
    background: transparent;}
    
  .wrap-menu-mobile .main-menu .current-menu-item{color: var(--four)}
	#about-home .wrap-about-content{padding-bottom: 50px; padding-right:0;}
	#about-home::before{
	    width: 100%;height: 100%;
	    right: -81px;
	}
	#post-home{padding: 60px 0 30px}
    /*.wrap-menu-mobile .menu-mobile{display: none}*/
    .wrap-slide-home img{min-height: 100%;}
    .page-title{font-size: 50px;}
    #main-mobile-menu{ color: #fff;margin-top: 30px;}
    #main-mobile-menu .sub-menu li{padding: 0}
    
    .active-main .main-menu{display: block;}
    .active-cate .cate-menu{display: block}
    /*footer */
    .copyright, .design{text-align: center;}
    #logo-footer{justify-content: center;}
    #logo-footer .logo-wrap{margin-bottom: 20px;}
    .wrap-widget-main>li{margin-bottom: 20px;}

    .order_2{order: 2;}
.order_1{order:1}

aside{padding-right: 0; padding-top: 30px}
 .gallery-title{font-size: 100px}  
 .product_title{margin-bottom: 10px; height: auto}
 .archive main, .single main{padding: 40px 0}
 .wrap-product-meta{padding: 0}
	
.wrap-wishlist{right: 0}
}
/*=========== media max width 768px============ */
@media(max-width: 768px){

  .header-info-phone{display: none}
  #logo{max-width: 100%; margin-bottom: 10px;}
  .wrap-form-footer{display: block}
  .form-control.footer-input{
    width: 100%;
    display: flex;
  }
	 .contact-menu{display: none}
	 .wrap-menu-mobile .contact-menu{display: inline-block;
    margin-left: 0;
    margin-top: 20px;
    }
  .page-title{font-size: 40px; line-height: 60px}
  .form-control.footer-submit{width: 100%; padding: 20px;}
  .form-control.footer-submit button{width: 100%;}
	#header-cover{padding: 90px 0}

  .form-control.footer-input input{width: 100%}
	.logo-footer-wrap a{display: inline-block; max-width: 400px; }
	.logo-footer-wrap img{width: 100%}
	.gallery-title{font-size: 60px; padding-bottom: 20px}
	.author{display: block}
	.gallery-btn{
	    font-size: 18px;
    padding: 5px 30px 10px;
	}
    .logo-item.slick-slide img{margin: 0 auto}
    .product_title{margin-top: 10px; margin-bottom: 0px; -webkit-line-clamp: 2; height: 56px}
	.wrap-gallery-content{bottom: 5%}
	#about-home{padding-bottom: 30px}
  .section-product{padding-top: 40px}
  .section-product .home-title, .wrap-post-home{margin-bottom: 30px}
	.icon-quote{font-size: 20px}
}
/*============ media max width 576px ==============*/
@media(max-width: 576px){
	.wpb_text_column.wpb_content_element {text-align: justify}
	.logo-wrap {max-width: 60px;}
     .icon-header img{width: 16px; height: 16px}
    .icon-header{
        width: 40px;
        height: 40px;
        padding: 11px;
    }
    .icon-header b {
	width: 15px;
    height: 15px;
    font-size: 10px;
    top: 1px;
    right: 1px;
    line-height: 8px;
    }
	.home-label{font-size: 22px}
	.home-title{font-size: 25px}
    .post-home-item{padding: 15px}
    .post-home-item .post_title{font-size: 16px}
	.wrap-product .wrap-content{padding: 0}
  .textwidget .widget{padding-left: 70px}
	.page-title {font-size: 30px; line-height: 50px}
	#header-cover{padding: 50px 0}
  #menu-danh-muc-san-pham-footer>.menu-item{margin-right: 7px;}
  #menu-danh-muc-san-pham-footer>.menu-item:last-child{margin-right: 0}
  .upload-file-title{width: 80%}
  .upload-file-desc{width: 20%;}
  .wrap-page-request{padding: 20px 30px}
  .page-template-title.request, .page-template-title{font-size: 25px}
  .gallery-title{font-size: 45px}
  .widget-footer{width: 100%}
  .logo-footer-wrap{text-align: center}
  .post-home-item .wrap-thumb{height: auto}
	.post_desc {line-height: unset; max-height: unset}
  
  .banner-ads{padding-top: 10px}
  .product_price .price{font-size: 18px}
  .post_title{font-size: 20px;overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; line-height: 30px; font-weight: unset}
  .post_title, .post_desc{margin-bottom: 10px}
  .wrap-post::before{display: none}
  .wrap-post {flex-direction: column; border: 1px solid var(--primary); margin: 0 0 45px 0; padding: 20px 0; }
	.row-collapse>.col {padding: 0 15px}
  .wrap-post .wrap-content{padding-left: 20px; padding-top: 20px}
  .wrap-contact-info{padding: 20px 30px}
	.wrap-gallery-content{bottom: 35%}
	p.product_price{height: 53px}
	.product_price .old_price{display: block}
	.wrap-logo-slide .logo-item {
		margin-right: 32px;
		display: flex !important;
		align-items: center;
		justify-content: center;
		height: 98px;
	}
	.widget-footer, .wrap-widget-main .widget_nav_menu {width: 100%}
	.wrap-widget-main { flex-wrap: wrap	}
	.wrap-footer {padding-bottom: 0}
	.widget-footer {margin-bottom: 0; margin-top: 35px}
	footer { padding: 50px 0 100px; }
	.logo-footer-wrap.widget-footer {margin: 35px auto 0}
}