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

/*************** ADD CUSTOM CSS HERE.   ***************/
.social-contact-style3 {
    --social-pc-vertical: 100px;
    --social-pc-horizontal: 10px;
    --social-mb-vertical: 100px;
    --social-mb-horizontal: 10px;
    --social-pc-display: block;
    --social-mb-display: block;
    --mainColor: black;
    --txtColor: white;
    position: fixed;
    z-index: 21;
    /*    display: flex;*/
    justify-content: center;
    align-items: center;
    background: #d2302c;
/*     transform: translateY(-50%); */
    flex-direction: column;
    padding: 10px;
}

.social-contact-style3.social-mb-bottomLeft {
    left: 0;
    bottom: 100px;
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
    animation-name: fadeInLeft;
    /*    width: 100%;*/
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-contact-style3:before,
.social-contact-style3:after {
    content: "";
    position: absolute;
    height: 30px;
    width: 60px;
    pointer-events: none;
}

.social-contact-style3.social-mb-bottomLeft:before,
.social-contact-style3.social-mb-topLeft:before {
    top: -30px;
    left: 0px;
    border-radius: 0 0 0 50px;
    box-shadow: -30px 0 0 0 #d2302c;
}

.social-contact-style3.social-bottomRight:after,
.social-contact-style3.social-topRight:after {
    bottom: -30px;
    left: 0px;
    border-top-left-radius: 50px;
    box-shadow: -30px 0 0 0 #d2302c;
}

.social-contact-style3>a {
    /*    width: 25%;*/
    text-align: center;
}

.social-contact-style3>a>img {
    width: 30px;
}

.social-contact-item.phone-box {
    animation: play0 1.5s ease infinite;
}

.social-contact-item {
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*    background: var(--mainColor);*/
    position: relative;
    color: var(--txtColor);
    font-size: 30px;
    margin: 5px 0;
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    ,
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes play0 {
    0% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }

    10% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }

    20% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }

    30% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }

    40% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }

    50% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }

    100% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }
}
.section-diem-noi-bat .icon-box-center .icon-box-img{
	margin:auto;
	height: 40px;
}
.section-doi-tac .flickity-slider{
	display: flex;
    align-items: center;
}
.catalog-product-text{
	display:flex;
}
.phone-bt{
	background: rgb(210 48 44);
	margin-right:20px;
}
.zalo-bt{
	background: rgb(242 196 13);
}
.phone-bt:hover{
	color:rgb(242 196 13);
}
.zalo-bt:hover{
	color: rgb(210 48 44);
}
.lienhe-button {
  display: flex;
  align-items: center;
  font-family: inherit;
  font-weight: 500;
  font-size: 17px;
  padding: 5px 20px;
  color: white;
  border: none;
  box-shadow: 0 0.7em 1.5em -0.5em rgba(59, 48, 78, 0.527);
  letter-spacing: 0.05em;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
}

.lienhe-button svg {
  margin-right: 8px;
  width: 20px;
}

.lienhe-button:hover {
  box-shadow: 0 0.5em 1.5em -0.5em rgba(88, 71, 116, 0.627);
}

.lienhe-button:active {
  box-shadow: 0 0.3em 1em -0.5em rgba(88, 71, 116, 0.627);
}

.lienhe-button::before {
  content: "";
  width: 4px;
  height: 40%;
  background-color: white;
  position: absolute;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  left: 0;
  transition: all 0.2s;
}

.lienhe-button::after {
  content: "";
  width: 4px;
  height: 40%;
  background-color: white;
  position: absolute;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  right: 0;
  transition: all 0.2s;
}

.lienhe-button:hover::before,
.lienhe-button:hover::after {
  height: 60%;
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
.social-contact-style3.social-mb-bottomLeft {
        width: calc(100% - 60px);
        margin: auto;
        flex-direction: unset;
        bottom: 0;
        left: 30px;
        border-radius: unset !important;
    }
	.social-contact-style3:before,
    .social-contact-style3:after {
        content: "";
        position: absolute;
        height: 56px;
        width: 30px;
        pointer-events: none;
    }
.social-contact-style3 {
    padding: 5px;
}
    .social-contact-style3.social-mb-bottomLeft:before,
    .social-contact-style3.social-mb-topLeft:before {
        top: 0px;
        left: 1px;
        border-radius: 50px 0 0 0;
        box-shadow: -30px 0 0 0 #d2302c;
    }

    .social-contact-style3.social-bottomRight:after,
    .social-contact-style3.social-topRight:after {
        bottom: 0px;
        left: unset;
        right: -59px;
        border-radius: 0 50px 0 0;
        box-shadow: -30px 0 0 0 #d2302c;
    }

    .social-contact-style3>a {
        width: 25%;
        text-align: center;
    }

}