/*

Theme Name: Shost Theme

Description: Giao diện website được thiết kế bởi Shost.vn

Author: UX Themes

Template: flatsome

Version: 3.0

*/



/*************** ADD CUSTOM CSS HERE.   ***************/





@media only screen and (max-width: 48em) {

/*************** ADD MOBILE ONLY CSS HERE  ***************/





}

/* ==========================================================================
   3D CARD FLIP ANIMATION FOR FEATURED PRODUCTS
   ========================================================================== */

.flip-card-circle .icon-box-img {
  perspective: 1000px !important;
  cursor: pointer;
}

.flip-card-circle .icon-box-img-inner,
.flip-card-circle .icon-box-img img {
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s ease !important;
  transform-style: preserve-3d !important;
  border-radius: 50% !important;
  will-change: transform;
}

.flip-card-circle:hover .icon-box-img-inner,
.flip-card-circle:hover .icon-box-img img {
  transform: rotateY(360deg) scale(1.06) !important;
  box-shadow: 0 15px 30px rgba(77, 139, 85, 0.3) !important;
}

@keyframes flipInCascade {
  0% {
    opacity: 0;
    transform: perspective(800px) rotateY(-90deg) scale(0.8);
  }
  70% {
    transform: perspective(800px) rotateY(15deg) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: perspective(800px) rotateY(0deg) scale(1);
  }
}

.col:nth-child(1) .flip-card-circle { animation: flipInCascade 0.9s cubic-bezier(0.25, 1, 0.5, 1) 0.1s both; }
.col:nth-child(2) .flip-card-circle { animation: flipInCascade 0.9s cubic-bezier(0.25, 1, 0.5, 1) 0.25s both; }
.col:nth-child(3) .flip-card-circle { animation: flipInCascade 0.9s cubic-bezier(0.25, 1, 0.5, 1) 0.4s both; }
.col:nth-child(4) .flip-card-circle { animation: flipInCascade 0.9s cubic-bezier(0.25, 1, 0.5, 1) 0.55s both; }