/*
Theme Name: TaPhaCo Child
Description: This is a child theme for TaPhaCo Theme
Author: TaPhaCo
Template: taphaco
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
body{font-size:18px;}
#header-contact{ font-size:18px;}
#header-contact span{font-weight:bold;}
.home .slider-taphaco .img .img-inner {
    border-radius: 16px;
}
#secondary .widget .is-divider, #product-sidebar .widget .is-divider{display: none !important;}
/* Product */
.product-small.col .col-inner{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.product-small.col .col-inner .box-text.box-text-products{
	padding-left: .7em;
    padding-right: .7em;
}
.name.product-title.woocommerce-loop-product__title a{
	color: #623718;
    font-weight: bold;
    font-size: 16px;
}
/*widget*/
.widget span.widget-title{
	background: #fe9900;
    padding: 10px;
    display: block;
}
.widget .is-divider{
	background: transparent;
}
.single-post .entry-content, .single-product .tab-panels #tab-description.entry-content{
	font-size: larger;
}
.bai-viet-lien-quan {
    margin-top: 15px;
}
.bai-viet-lien-quan h3 {
    font-size: 19px;
    color: black;
}
.bai-viet-lien-quan ul {
    margin-bottom: 0;
    display: inline-block;
    width: 100%;
}
.bai-viet-lien-quan ul li {
    list-style: none;
    width: 25%;
    color: graytext;
    float: left;
    padding-left: 4px;
    padding-right: 5px;
}
.bai-viet-lien-quan ul li .box-image img {
    height: 120px;
    border-radius: 4px;
    object-fit: cover;
    object-position: center;
}
.bai-viet-lien-quan h4 {
    font-size: 15px;
    color: black;
    line-height: 19px;
    padding-top: 7px;
    height: 64px;
    overflow: hidden;
}
/*footer*/
#footer {
    padding-bottom: 50px;
}
#footer i.fas{padding-right:5px;}
#footer .col{margin-bottom:0px;}
#footer .widget span.widget-title{font-size:20px;}
/*** Hieu ung anh*/
.post-item .box-image, .bai-viet-lien-quan ul li .box-image {
	border-radius:20px;
}
.post-item .box-image:hover::before, .product-small .box-image:hover::before, .bai-viet-lien-quan ul li .box-image:hover::before{
	-webkit-animation:shine .75s;
	animation:shine .75s;
}
@-webkit-keyframes shine{
	100%{left:125%}
}
@keyframes shine{
	100%{left:125%}
}
.post-item .box-image::before, .product-small .box-image::before, .bai-viet-lien-quan ul li .box-image::before{
	position:absolute;
	top:0;
	left:-75%;
	z-index:2;
	display:block;
	content:'';
	width:50%;
	height:100%;
	background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);
	background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);
	-webkit-transform:skewX(-25deg);transform:skewX(-25deg)
}
/* button contact */
.devvn_toolbar {
   position: fixed;
   bottom: 20px;
   left: 10px;
   z-index: 99999999;
}
.devvn_toolbar ul {
   list-style: none;
   margin: 0;
   padding: 0;
}
.devvn_toolbar ul li {
   padding: 10px 0px;
   margin: 0;
   list-style: none;
}
.devvn_toolbar ul li a {
   display: block;
   position: relative;
}
.devvn_toolbar ul li a#devvn_contact_1 span:after {
    border-right-color: #13990a;
}
.devvn_toolbar ul li a#devvn_contact_1 span {
    color: #ffffff;
     background-color: #13990a;
}
 .devvn_toolbar ul li a#devvn_contact_1 > div {
   box-shadow: 0 0 0 0 #13990a;
}
.devvn_toolbar ul li a#devvn_contact_2 span:after {
    border-right-color: #00acd3;
}
.devvn_toolbar ul li a#devvn_contact_2 span {
     color: #ffffff;
     background-color: #00acd3;
}
.devvn_toolbar ul li a > div {
     width: 42px;
     height: 42px;
     border-radius: 50%;
     -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     margin: 0 0 5px;
     position: relative;
     background-position: 50% 50%;
     background-size: cover;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .devvn_toolbar ul li a br {
      display: none;
}
.devvn_toolbar ul li a span {
     font-weight: 400;
     color: #333;
     position: absolute;
     top: 50%;
     left: calc(100% + 10px);
     left: -webkit-calc(100% + 10px);
     left: -moz-calc(100% + 10px);
     margin-top: -12.5px;
     font-size: 14px;
     height: 25px;
     line-height: 25px;
     padding: 0 10px;
     border-radius: 5px;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     white-space: nowrap;
     opacity: 0;
     visibility: hidden;
}
.devvn_toolbar ul li a:hover span {
     opacity: 1;
     visibility: visible;
}
.devvn_toolbar ul li a span:after {
     right: 100%;
     top: 50%;
     border: solid transparent;
     content: " ";
     height: 0;
     width: 0;
     position: absolute;
     pointer-events: none;
     border-color: rgba(136, 183, 213, 0);
     border-right-color: #333;
     border-width: 5px;
     margin-top: -5px;
}
.devvn_toolbar ul li a img {
     width: auto;
     height: auto;
     max-width: 42px;
     max-height: 42px;
     margin: 0;
     box-shadow: none;
     border: 0;
}
.devvn_toolbar ul li a > div {
   background: transparent !important;
}
.devvn_toolbar ul li a.animation_tada > div {
    animation-name: devvn_tada;
    -webkit-animation-name: devvn_tada;
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    cursor: pointer;
    box-shadow: 0 0 0 0 #c31d1d;
}
.devvn_toolbar ul li a.animation_zoom > div {
     animation-name: devvn_zoom;
     -webkit-animation-name: devvn_zoom;
     animation-delay: 0s;
     -webkit-animation-delay: 0s;
     animation-duration: 1.5s;
     -webkit-animation-duration: 1.5s;
     animation-iteration-count: infinite;
     -webkit-animation-iteration-count: infinite;
     cursor: pointer;
     box-shadow: 0 0 0 0 #c31d1d;
}
 @-webkit-keyframes devvn_tada {
                    0% {
                        -webkit-transform: scale(1);
                        transform: scale(1)
                    }

                    10%, 20% {
                        -webkit-transform: scale(.9) rotate(-3deg);
                        transform: scale(.9) rotate(-3deg)
                    }

                    30%, 50%, 70%, 90% {
                        -webkit-transform: scale(1.1) rotate(3deg);
                        transform: scale(1.1) rotate(3deg)
                    }

                    40%, 60%, 80% {
                        -webkit-transform: scale(1.1) rotate(-3deg);
                        transform: scale(1.1) rotate(-3deg)
                    }

                    100% {
                        -webkit-transform: scale(1) rotate(0);
                        transform: scale(1) rotate(0)
                    }
}
@keyframes devvn_tada {
                    0% {
                        -webkit-transform: scale(1);
                        -ms-transform: scale(1);
                        transform: scale(1)
                    }

                    10%, 20% {
                        -webkit-transform: scale(.9) rotate(-3deg);
                        -ms-transform: scale(.9) rotate(-3deg);
                        transform: scale(.9) rotate(-3deg)
                    }

                    30%, 50%, 70%, 90% {
                        -webkit-transform: scale(1.1) rotate(3deg);
                        -ms-transform: scale(1.1) rotate(3deg);
                        transform: scale(1.1) rotate(3deg)
                    }

                    40%, 60%, 80% {
                        -webkit-transform: scale(1.1) rotate(-3deg);
                        -ms-transform: scale(1.1) rotate(-3deg);
                        transform: scale(1.1) rotate(-3deg)
                    }

                    100% {
                        -webkit-transform: scale(1) rotate(0);
                        -ms-transform: scale(1) rotate(0);
                        transform: scale(1) rotate(0)
                    }
}
@-webkit-keyframes devvn_zoom {
                    0% {
                        transform: scale(.9)
                    }

                    70% {
                        transform: scale(1);
                        box-shadow: 0 0 0 15px transparent
                    }

                    100% {
                        transform: scale(.9);
                        box-shadow: 0 0 0 0 transparent
                    }
}
@keyframes devvn_zoom {
                    0% {
                        transform: scale(.9)
                    }

                    70% {
                        transform: scale(1);
                        box-shadow: 0 0 0 15px transparent
                    }

                    100% {
                        transform: scale(.9);
                        box-shadow: 0 0 0 0 transparent
                    }
}
.devvn_toolbar ul li a.animation_swing img {
    animation-name: devvn_swing;
    -webkit-animation-name: devvn_swing;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    animation-timing-function: ease-in;
    -webkit-animation-timing-function: ease-in;
}
 @-webkit-keyframes devvn_swing {
                    20% {
                        -webkit-transform: rotate3d(0,0,1,15deg);
                        transform: rotate3d(0,0,1,15deg)
                    }

                    40% {
                        -webkit-transform: rotate3d(0,0,1,-10deg);
                        transform: rotate3d(0,0,1,-10deg)
                    }

                    60% {
                        -webkit-transform: rotate3d(0,0,1,5deg);
                        transform: rotate3d(0,0,1,5deg)
                    }

                    80% {
                        -webkit-transform: rotate3d(0,0,1,-5deg);
                        transform: rotate3d(0,0,1,-5deg)
                    }

                    to {
                        -webkit-transform: rotate3d(0,0,1,0deg);
                        transform: rotate3d(0,0,1,0deg)
                    }
}
@keyframes devvn_swing {
                    20% {
                        -webkit-transform: rotate3d(0,0,1,15deg);
                        transform: rotate3d(0,0,1,15deg)
                    }

                    40% {
                        -webkit-transform: rotate3d(0,0,1,-10deg);
                        transform: rotate3d(0,0,1,-10deg)
                    }

                    60% {
                        -webkit-transform: rotate3d(0,0,1,5deg);
                        transform: rotate3d(0,0,1,5deg)
                    }

                    80% {
                        -webkit-transform: rotate3d(0,0,1,-5deg);
                        transform: rotate3d(0,0,1,-5deg)
                    }

                    to {
                        -webkit-transform: rotate3d(0,0,1,0deg);
                        transform: rotate3d(0,0,1,0deg)
                    }
}
body .devvn_toolbar.devvn_toolbar_right {
   left: auto;
   bottom: 10px;
   right: 10px;
}
body .devvn_toolbar.devvn_toolbar_right ul li a span {
     right: calc(100% + 10px);
     right: -webkit-calc(100% + 10px);
     right: -moz-calc(100% + 10px);
     left: auto
}
.devvn_toolbar.devvn_toolbar_right ul li a span:after {
      left: 100%;
      right: 0;
      transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -webkit-transform: rotate(180deg)
}
/* Footer contact */
#metu .mmt-app {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    display: flex;
    flex-direction: row;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    justify-content: center;
    box-sizing: border-box;
    background: #f00;
	color:#fff;
    min-height: 48px;
    padding: 8px 0 4px;
    -webkit-transition: .24s;
    transition: .24s;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    z-index: 9;
}
#metu .mmt-menu__item:not(:first-of-type) {
    border-left: 1px solid hsla(0, 0%, 100%, .38);
}
#metu a {
    color: #fff;
}
#metu .mmt-button {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    align-self: stretch;
    padding: 0 25px;
    flex-direction: row;
    cursor: pointer;
}
#metu .mmt-button__icon {
    font-size: 24px;
    line-height: 24px;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    padding: 2px;
    box-sizing: border-box;
}
#metu .mmt-app .cls-1 {
    fill: hsla(0, 0%, 100%, 0.86) !important;
}
#metu .mmt-button__label {
    font-size: 16px;
	font-weight:bold;
    line-height: 1.2em;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-height: 32px;
	-webkit-animation: my 700ms infinite;
    -moz-animation: my 700ms infinite;
    -o-animation: my 700ms infinite;
    animation: my 700ms infinite;
}
.mt-tooltip {
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
}
.mt-tooltip__text {
    position: absolute;
    visibility: hidden;
    z-index: 1;
    background: #232f34;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    min-width: 120px;
    max-width: 240px;
    bottom: calc(100% + 5px);
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-size: 12px;
    box-sizing: border-box;
	display:none;
}
/* hieu ung chu nhap nhay */
@-webkit-keyframes my {
	0% { color: #F8CD0A; }
	50% { color: #fff; }
	100% { color: #F8CD0A; }
}
@-moz-keyframes my {
	0% { color: #F8CD0A; }
	50% { color: #fff; }
	100% { color: #F8CD0A; }
}
@-o-keyframes my {
	0% { color: #F8CD0A; }
	50% { color: #fff; }
	100% { color: #F8CD0A; }
}
@keyframes my {
	0% { color: #F8CD0A; }
	50% { color: #fff; }
	100% { color: #F8CD0A; }
}
@media only screen and (min-width: 850px) {
	#product-sidebar, .post-sidebar{padding-left:15px !important;}
}       
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	.single-product .woocommerce-tabs .tab-panels{padding:15px !important;}
	.single-product .chat-facebook .col{padding-bottom:0px !important;}
	.bai-viet-lien-quan ul li{width:50% !important}
	#metu .mmt-button__label{display: none !important;}
	#metu .mmt-button__icon{
		font-size:32px;
		width:32px;
		height:32px;
	}
}