/* Theme Name: Puta Digital Print
 * Version: 1.0
 */
 @font-face {
  font-family: 'SVN-MessyScript';
  src: url('fonts/SVN-MessyScript.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
 @font-face {
  font-family: 'Iciel Century Gothic Pro';
  src: url('fonts/ICIELCENTURYGOTHICPRO-BOLD.OTF') format('opentype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Iciel Century Gothic Pro';
  src: url('fonts/ICIELCENTURYGOTHICPRO-BOLDITALIC.OTF') format('opentype');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Iciel Century Gothic Pro';
  src: url('fonts/ICIELCENTURYGOTHICPRO-ITALIC.OTF') format('opentype');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Iciel Century Gothic Pro';
  src: url('fonts/ICIELCENTURYGOTHICPRO-REGULAR.OTF') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'iCielRomantically-Regular';
  src: url('fonts/iCielRomantically-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
  --primary:  #085f7b;
  --third: #e25286;
  --secondary: #10bef0;
  --four:  #96c93e;
  --size-title: 65px;
  --font-title: 'iCielRomantically-Regular';
  --family:  'Iciel Century Gothic Pro';
  --border: #e0e0e0;
  --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);}
.font-title{font-family: var(--font-title);font-weight: normal;-webkit-font-smoothing: antialiased; font-size: 54px;}
.row-collapse>.col{padding:0}
/* width */
::-webkit-scrollbar {
  width: 10px;
}

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

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--primary); 
}

.aic {
	align-items: center;
}

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

.z-1{z-index: 1}
.z-2{z-index: 2; position: relative;}
.z-3{position: relative; z-index: 3}
section{position: relative}
.color-white{color: white}
.slick-slide img{width: 100%}
#feedback .slick-dots{transform: rotate(90deg);
  width: auto;
  bottom: 50%;
  left: -10%;}
.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;}

.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: 45px 0 55px;}
.breadcrumb_last{color: #fff}
.breadcrumb .divider{margin: 0 10px;}

.icon{margin-right: 10px;}
.icon-right{margin-left: 10px;}

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

.page-template-title{color: var(--primary); font-size: 30px; margin-bottom: 10px}
.page-template-sub-title{color: #4d4d4d; font-style: italic;margin-bottom: 20px}
.page-template main{padding: 60px 0 50px}
/* style header */
#top-header{padding: 10px 0;
  border-bottom: 1px solid #e0e0e0;}
.wrap-top-header{display: flex; justify-content: space-between;}
.top-header-info{color: var(--primary);}
.header-info-local{padding-right: 15px;
  margin-right: 15px;
  border-right: 1px solid #e0e0e0;}
.top-header-social .social{margin-left: 10px;}

.wrap-main-header{display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0; flex-wrap: wrap;}
.logo-wrap a{position: relative; display: block;}
.wrap-main-header .logo-wrap a:before{position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    user-select: none;
    overflow: hidden;
    background: linear-gradient(
90deg
, transparent, #ffffffb3, transparent);
    background-size: 30%;
    background-repeat: no-repeat;
    animation: animate 10s linear infinite;
}
@keyframes animate{
	0%{
		background-position: -500%;
	}
	100%{
		background-position: 500%;
	}
}
#hotline-header a{font-size: 22px;
  display: block;
  position: relative;
  padding-left: 60px;}
#hotline-header .icon-phone{position: absolute;
  top: 5px;
  color: var(--four);
  left: 0;}
/* css animation phone */
.phone-icon{display:inline-block;width:50px;height:50px;stroke-width:0;stroke:currentColor;fill:currentColor}.wave{animation:waveIn 1.2s infinite ease-out;transform-origin:50% 50%}.wave-sm{animation-delay:.3s}.wave-md{animation-delay:.45s}.wave-lg{animation-delay:.6s}@keyframes waveIn{from{opacity:0;transform:scale(.3) translate(-20px,10px)}50%{transform:translate(0,0);opacity:1}}
/* end phone */
.phone-number{display: block;
  color: var(--third);}
.sub-phone{color: var(--secondary)}
.sub-phone i{color:var(--primary)}

#search-header{position: relative;}
#search-header form{position: relative; z-index: 6}
#load-data{position: absolute; z-index: 5;right: 0;top: 22px; padding-top: 30px; background: var(--secondary); color: #fff}
#load-data ul li{padding: 5px 10px; border-bottom: 1px dashed #fff;}
#load-data ul li:last-child{border: none}
.wrap-form-search{    background: var(--primary);
  border-radius: 30px;}
.wrap-form-search input{padding: 10px 20px;
  border: 1px solid #e0e0e0;
  border-radius: 30px; display: block; width: 95%;}
.btn-search{background: transparent; border: none}
.icon-search{color: #fff; cursor: pointer; padding: 0 20px 0 15px ;}
.wrap-input{display: inline-block;
  min-width: 250px;
  background: #fff;
  border-radius: 30px;}

#bottom-header{background: var(--primary);
  color: #fff;position: relative;}
#bottom-header .overlay-bottom-header{position: absolute;
height: 100%;
background: var(--secondary);
top: 0;
left: 0; }
.wrap-bottom-menu{padding: 10px 0; position: relative;}
.border-animate{border: 1px dashed #fff;transition: 0.5s; position: relative;}
.border-animate:before,.border-animate:after{
	content: ''; position: absolute; width: 0; height: 0;border: 1px solid transparent; transition: 1s all;
}
 .border-animate:before{top: -1px; left: -1px;}
.border-animate:after{bottom: -1px; right: -1px;}
.border-animate:hover:before, .border-animate:hover:after{width: 100.2%; height: 100.1%; border-width: 2px}
.border-animate:hover:before{
	border-top-color: #fff; border-right-color: #fff;
	transition:
      width 0.5s ease-out,
      height 0.5s ease-out 0.5s;
}
.border-animate:hover:after{
	border-bottom-color: #fff; border-left-color: #fff;
	transition:border-color 0s ease-out 1s,
      width 0.5s ease-out 0.75s,
      height 0.75s ease-out 1s;
}
#bottom-menu{display: flex; justify-content: space-evenly;}
.main-menu>.menu-item{padding: 15px 20px}
.main-menu>.menu-item>a{transition: 0.5s}
.main-menu>.menu-item>a:hover{color: var(--secondary);}
.wrap-list-cate{position: relative;padding: 14px 0;}
.cate-title{font-size: 20px; margin: 0; cursor: pointer;}
#cate-menu{position: absolute;
  width: 105.5%;
  background: #fff;
  color: #000;
  top: 100px;
left: -16px; z-index: 999; opacity: 0; visibility: hidden; transition: 0.5s all}
#cate-menu.active-menu{opacity: 1; visibility: visible; top: 66px;}
#cate-menu>.menu-item{transition: 0.5s}
#cate-menu>.menu-item>a>img{transition: 0.5s}
#cate-menu>.menu-item:hover{background: var(--primary);}
#cate-menu>.menu-item:hover>a>img{filter: brightness(0) invert(1)}
#cate-menu>.menu-item:hover .menu-image-title{border-bottom-color: transparent; color: #fff}
#cate-menu>.menu-item>.menu-image-title-after{display: flex; align-items: center;margin: 0 15px;}
.menu-item .menu-image-title-after.menu-image-title{
  display: inline-block;
  padding: 11px 0!important;
  flex-grow: 1;
/*   border-bottom: 1px dashed #b1b1b1; */
  margin-left: 10px;
	transition: 0.5s;
}

footer .menu-item .menu-image-title-after.menu-image-title {
	 display: inline-block;
	  padding: 0!important;
	  flex-grow: 1;
	/*   border-bottom: 1px dashed #b1b1b1; */
	  margin-left: 10px;
	transition: 0.5s;
	margin-bottom: 20px;
}
.menu-item:nth-child(11) .menu-image-title-after.menu-image-title{border: none;}
#menu-item-69{padding: 10px 0;text-align: center; background: var(--secondary); color: #fff; margin-top: 7.5px;}

#header-cover .overlay{background-color: #426b7d; opacity: 0.8;}
.page-title, .breadcrumb{position: relative;color: #fff;}
.page-title{text-align: center;font-weight: normal; font-size:60px ;}

#menu-mobile{position: fixed;
  top: 0;
  left: -100%;
  z-index: 100;
  width: 100%;
  height: 100%;
  transition: 0.5s;}
  .menu-icon{position: absolute;
    top: 15%;
    right: 15px;
    background: var(--secondary);
    padding: 6px 10.2px;
    border-radius: 50%;display: none;}
/* style footer */
footer{color: #fff;padding-top: 70px;}
h3.widgettitle{font-size: 22px;margin-bottom: 20px; padding-bottom: 15px;}
.widget-footer{margin-bottom: 35px}
#footer-top{  padding-bottom: 35px;
  border-bottom: 1px solid var(--border);}
#logo-footer{display: flex;
  justify-content: space-between;
  align-items: center; flex-wrap: wrap ;}
#text-cover{max-width: 520px; padding-left: 30px; border-left: 1px solid var(--border);}
.top-footer-social .social{display: inline-block; margin-left: 15px;}
.top-footer-social .social a{width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  font-size: 20px;
  align-items: center;
  justify-content: center;}
.top-footer-social .fb a{background: var(--primary)}
.top-footer-social .tw a{background: var(--third)}
.top-footer-social .yt a{background: var(--four)}

#footer-main .wrap-widget-main{display: flex; justify-content: space-between; flex-wrap: wrap;}
.textwidget .widget{position: relative;
  padding-left: 90px; margin-bottom: 25px}
.widget .icon-info{position: absolute;
  width: 50px;
  height: 50px;
  font-size: 25px;
  justify-content: center;
  align-items: center;
  display: flex;
  border-radius: 50%;
  left: 0;}
  .widget .address{background: var(--secondary)}
  .widget .time{background: var(--third)}
  .widget .phone{background: var(--four)}
 .widget_nav_menu .menu .menu-image-title-after.menu-image-title{padding: 0!important;border: none; margin-bottom: 20px;}
  #menu-danh-muc-san-pham-footer{display: flex;}
  #menu-danh-muc-san-pham-footer>.menu-item{margin-right: 50px}
  #menu-danh-muc-san-pham-footer>.menu-item>a{display: none}

  .wrap-form-footer{display: flex;
    width: 100%;position: relative;}
.form-control.footer-input{width: 84%;
  display: inline-flex;
  background: var(--primary);padding: 15px 0}  
  .wrap-form-ft{display: block; width: 50%;}
  .wrap-form-ft:first-child{border-right: 3px solid #2a4647}
.form-control.footer-input input{background: transparent;
    border: none;
    padding: 10px 5%;
    min-width: 49%; color: #fff}
    
.form-control.footer-input input::placeholder{color: #9e9e9e; font-style: italic}
.form-control.footer-submit{width: 16%;
  display: inline-flex;background: var(--secondary); align-items: center; justify-content: center; font-size: 20px;}
.footer-submit button{border: none; background: transparent;color: white;}
.form-result{opacity:0; visibility: hidden; position:absolute; width: 100%; height: 100%; top: 0;left: 0; transition: 0.5s;display: flex; align-items: center; justify-content: center;}
.form-result #result{position: relative;
    z-index: 2;
    text-align: center;
    display: inline-block;
    padding: 10px 15px;
    background: #fff;
    color: var(--primary);
    border-radius: 20px;
   }
.form-loading.form-result{opacity: 1; visibility: visible}
#copyright{padding: 70px 0 50px; background: #0e1d1e;margin-top: -72px;}
.design{text-align: right;}
.scrollTop{position: fixed;
    width: 50px;
    height: 50px;
    display: inline-flex;
    bottom: -15%;
    right: 2%;
    background: var(--secondary);
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 25px;
    border-radius: 50%;
	transition: 1s;
	z-index: 100;
	}
.scrollTop.show{bottom: 15%;}
/* style product layout */
.wrap-thumb a{display: block; width: 100%; height: 275px;}
.wrap-thumb img{width: 100%; height: 100%; object-fit: cover}
.wrap-content{padding: 50px 30px 30px;
position: relative;}
.product_price{position: absolute;
    background: linear-gradient(to right, var(--third) 50%, var(--primary)50%);
    width: calc(100% - 60px);
    padding: 10px;
    background-size: 200% 100%;
    text-align: center;
    border-radius: 30px;
    color: #fff;
    font-weight: bold;
    top: -25px;
    background-position: 100% 0;
    transition: 0.5s;}
.product_price:hover{background-position: 0 100%}
.product_title{transition: 0.5s}
.product_title:hover{color: var(--primary)}
.wrap-product{ box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.09);overflow: hidden; margin-bottom: 30px; transition: 0.5s}
.wrap-product:hover{transform: scale(1.02); box-shadow: 0px 0px 30px 0px rgb(0 0 0 / 20%)}

.product_link{    position: absolute;
width: 85px;
height: 85px;
background: #c0e0ea;
color: #8b8d8e;
border-radius: 50%;
bottom: -35px;
font-size: 30px;
padding-left: 15px;
right: -30px;
padding-top: 8px;transition: 0.4s}
.product_link:hover{background: var(--secondary); color: #fff}

/* style taxonomy and single */

.archive main, .single main{padding: 50px 0}
.tag-label{font-weight: bold; color: var(--primary)}
    .tag-item{display: inline-block;
    padding: 3px 10px;
    background: #f0f0f0;
    color: #979797;
    margin-left: 10px; transition: 0.5s; margin-bottom: 10px;}
.tag-item:hover{color: #fff; background: var(--secondary)}
    .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)}
    .wrap-product-related .wrap-product:hover .product_price{background: var(--primary); border-color: transparent; color: #fff}
.single-post-title{font-size: 25px;color: var(--primary);padding-bottom: 20px;border-bottom: 2px solid var(--primary); margin-bottom: 20px;}
  /* style sidebar */
  #main-sidebar #menu-danh-muc-san-pham{padding: 15px 0}
#main-sidebar .widgettitle{color: var(--third); border-bottom: 4px solid var(--third)}
#main-sidebar .menu-item>a{display: flex;
  align-items: center;
  padding: 7px 0 7px 20px;
  margin-bottom: 10px;
  border: 1px dashed #666666;}
#main-sidebar .menu-item>a>img{order:2;padding: 0 20px;
  border-left: 1px dashed #666666;}
#main-sidebar .menu-item>a>span{order:1; margin:0}
.widget_media_image img{width: 100%}
.upload-file{border-radius: 40px;
  overflow: hidden;
  color: #fff;
  display: flex;
  align-items: center;margin-bottom: 35px}
.upload-file-title{display: inline-block;
  padding: 12px 30px;
  background: var(--third);min-height: 50px;}
.upload-file-desc{color: #666666;
  display: flex;
  align-items: center;
  flex-grow: 1;
  justify-content: space-between;
  border: 1px dashed var(--third);
  border-radius: 0 40px 40px 0;
  border-left: none;
  min-height: 50px;
padding: 0 30px}
.upload-file-desc .icofont-cloud-upload{font-size: 45px; color: var(--third)}

.post-sb-item{padding: 20px 0; border-bottom: 1px dashed #979797; display: block;}
.post-sb-item:last-child{border: none}
.widget-sb-single{background: var(--bg); padding: 20px 40px; margin-bottom: 35px}
.sidebar-title{font-size: 25px; color: var(--primary)}
.post-sb-thumb img{width: 100%;}

.wrap-single-content{line-height: 25px;}
.wrap-single-content p{margin-bottom: 15px}
.wrap-single-content p img{width: 100%;height: auto}

/* style form */
.form-control{border: 1px solid var(--primary);
  padding: 5px 15px;
  width: 100%;}
  .form-control-wrap{margin-bottom: 20px; position: relative;}
  .btn-form{width: 100%;
  border: none;
  background: var(--primary);
  color: #fff;
  padding: 6px;}.wrap-contact-info{padding-left: 30px}
  #submit_request, #submit_yeucau{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;}

  .wpcf7-file::-webkit-file-upload-button {
    visibility: hidden;
  }
  .wpcf7-file::before, .wpcf7-file::after {
    content: '';
    position:absolute;
    outline: none;
	 width: 50px;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
	  height: 34px;
  }
.wpcf7-file::before{ background: url('https://puta.vn/notel/wp-content/uploads/2021/07/upload.png') no-repeat;z-index: 2;}
.wpcf7-file::after{background: var(--third);
    z-index: 1;
    left: 0;
    border-radius: 30px 0 0 30px;
    width: 95px;
    height: 100%;
    top: 0;}
.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 1200px */
@media(max-width: 1200px){
#hotline-header{display: none;}
#text-cover{display: none;}
#custom_html-2{order:1}
#nav_menu-3{order: 3}
#nav_menu-4{order: 2}
.upload-file-title{width: 40%}
.upload-file-desc{width: 60%}
.upload-file-desc i:first-child{font-size: 15px;}
#main-sidebar .widgettitle{font-size: 20px;}
.wrap-page-request{padding: 50px 80px}
}
/* media max width 992px */
@media(max-width: 992px){
  .header-info-mail{display: none}
  #menu-mobile .overlay{background-color: transparent;}
  #logo{max-width: 40%;}
  .logo-wrap img{width: 100%}
  .menu-pc{display: none!important}
  #menu-mobile.active-menu{left: 0}
  .menu-icon{display: block}
  .wrap-menu-mobile{width: 70%;
    height: 100%;
    background: #fff;
    position: relative;
    box-shadow: 0px 0px 25px rgb(0 0 0 / 50%);
  }
    #cate-menu.menu-mobile{
      width: 100%;
    position: relative;
    opacity: 1;
    visibility: visible;
    left: 0;
    top: 0;
    }
    .wrap-menu-mobile #cate-menu li:last-child{padding: 10px 20px; background: var(--primary); color: #fff;text-align: center;}
    .wrap-menu-mobile .menu-mobile{display: none}
    .wrap-slide-home img{min-height: 100%;}
    .page-title{font-size: 50px;}
    #main-mobile-menu{background: var(--primary); color: #fff; height: 100%}
    #main-mobile-menu li{border-bottom: 1px dashed var(--secondary);}
    #menu-mobile.active-main, #menu-mobile.active-cate{
      left: 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;}
    .wrap-widget-main h3.widgettitle{margin: 0}

    .order_2{order: 2;}
.order_1{order:1}
.wrap-contact-info{padding: 0; margin-bottom: 30px}

    
}
/* media max width 768px */
@media(max-width: 768px){
  .wrap-top-header, .wrap-main-header{justify-content: center;}
  .header-info-local{display: none}
  #logo{max-width: 100%; margin-bottom: 10px;}
  .wrap-form-footer{display: block; }
  .form-control.footer-input{
    width: 100%;
    display: flex;
  }
  .page-title{font-size: 30px;}
  .form-control.footer-submit{width: 100%; padding: 20px;}
  .form-control.footer-submit button{width: 100%;}
  #copyright{margin-top: -106px; padding-top: 100px}
  .upload-file-title{width: 75%}
  .upload-file-desc{width: 25%; justify-content: center;}
  .upload-file-desc i:first-child{display: none;}
  .wrap-page-request{padding: 30px 50px}
  .form-control.footer-input input{width: 100%}
}
/* media max width 576px */
@media(max-width: 576px){
	.wrap-slide-home img{min-height: 250px; object-position: 80%}
  .textwidget .widget{padding-left: 70px}
  #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, .widget-sb-single{padding: 20px 30px}
  .page-template-title.request, .page-template-title{font-size: 25px}
}

@media(max-width: 376px){
	.label {
		font-size: 21px;
		line-height: 78px;
	}
	
	.fb-sub {
		font-size: 22px;
		line-height: 62px;
	}
}