/*
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.   ***************/
/* Icon đăng ký lắc lắc */
@keyframes shakeImg {
  0%,100% { transform: translate(0,0) rotate(0); }
  15% { transform: translateX(-3px) rotate(-2deg); }
  30% { transform: translateX(3px) rotate(2deg); }
  45% { transform: translateX(-3px) rotate(-2deg); }
  60% { transform: translateX(3px) rotate(2deg); }
  75% { transform: translateX(-2px) rotate(-1deg); }
  90% { transform: translateX(2px) rotate(1deg); }
}

.shake-btn {
  display: inline-block; /* để animation mượt */
  animation: shakeImg 1.2s ease-in-out infinite;
  transform-origin: center;
}

/* Slide xuống 1 lần khi load */
/* Keyframes chạy từ trên xuống */
@keyframes slideInTop {
  0% {
    opacity: 0;
    transform: translateY(-150px); /* bắt đầu từ trên */
  }
  100% {
    opacity: 1;
    transform: translateY(0);      /* về vị trí gốc */
  }
}

/* Áp dụng cho phần tử gán class slide-in-top */
.slide-in-top {
  display: inline-block;
  overflow: hidden; /* tránh ảnh hưởng layout */
}

/* Nhắm thẳng vào ảnh trong Flatsome */
.slide-in-top img,
.slide-in-top .img-inner > img {
  animation: slideInTop 1s ease-out forwards;
  transform-origin: center;
}

@keyframes slideInTopOnce {
  0% {
    opacity: 0;
    transform: translateY(-150px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Zoom to nhỏ liên tục */
@keyframes pulseZoom {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(0) scale(1.2); /* zoom to nhẹ */
  }
}

.slide-in-top-zoom {
  display: inline-block;
  transform-origin: center;
  animation: 
    slideInTopOnce 1s ease-out forwards,   /* chạy 1 lần */
    pulseZoom 2s ease-in-out infinite;     /* lặp liên tục */
  animation-delay: 0s, 1s; /* slide bắt đầu ngay, pulse bắt đầu sau 1s */
}


/* Trái */
@keyframes slideLoopLeft {
  0%   { opacity: 0; transform: translateX(-150px); }
  15%  { opacity: 1; transform: translateX(0); }   /* trượt vào */
  70%  { opacity: 1; transform: translateX(0); }   /* đứng yên */
  85%  { opacity: 0; transform: translateX(-150px);} /* trượt ra */
  100% { opacity: 0; transform: translateX(-150px);} /* chờ vòng lặp */
}

/* Phải */
@keyframes slideLoopRight {
  0%   { opacity: 0; transform: translateX(150px); }
  15%  { opacity: 1; transform: translateX(0); }
  70%  { opacity: 1; transform: translateX(0); }
  85%  { opacity: 0; transform: translateX(150px);}
  100% { opacity: 0; transform: translateX(150px);}
}

/* Base */
.slide-loop {
  display: inline-block;
  opacity: 0;
  transform-origin: center;
}

/* Thứ tự lần lượt – mỗi cái trễ hơn 1 chút */
.slide-in-left-1 {
  animation: slideLoopLeft 10s ease-in-out infinite;
  animation-delay: 0s;
}
.slide-in-left-2 {
  animation: slideLoopLeft 10s ease-in-out infinite;
  animation-delay: 2s;
}
.slide-in-left-3 {
  animation: slideLoopLeft 10s ease-in-out infinite;
  animation-delay: 4s;
}

.slide-in-right-1 {
  animation: slideLoopRight 10s ease-in-out infinite;
  animation-delay: 0s;
}
.slide-in-right-2 {
  animation: slideLoopRight 10s ease-in-out infinite;
  animation-delay: 2s;
}
.slide-in-right-3 {
  animation: slideLoopRight 10s ease-in-out infinite;
  animation-delay: 4s;
}




/* Trượt từ trên xuống – đứng yên – đi ra – lặp lại */
@keyframes slideLoopTop {
  0%   { opacity: 0; transform: translateY(-150px); }
  15%  { opacity: 1; transform: translateY(0); }   /* trượt xuống vào */
  70%  { opacity: 1; transform: translateY(0); }   /* đứng yên */
  85%  { opacity: 0; transform: translateY(-150px);} /* đi ra lại */
  100% { opacity: 0; transform: translateY(-150px);} /* chờ lặp */
}

/* Base: ẩn mặc định */
.slide-in-top-1,
.slide-in-top-2,
.slide-in-top-3,
.slide-in-top-4,
.slide-in-top-5 {
  opacity: 0;
  display: inline-block;
  transform-origin: center;
}

/* Lần lượt từng cái (delay lệch nhau) */
.slide-in-top-1 {
  animation: slideLoopTop 15s ease-in-out infinite;
  animation-delay: 0s;
}
.slide-in-top-2 {
  animation: slideLoopTop 15s ease-in-out infinite;
  animation-delay: 2s;
}
.slide-in-top-3 {
  animation: slideLoopTop 15s ease-in-out infinite;
  animation-delay: 4s;
}
.slide-in-top-4 {
  animation: slideLoopTop 15s ease-in-out infinite;
  animation-delay: 6s;
}
.slide-in-top-5 {
  animation: slideLoopTop 15s ease-in-out infinite;
  animation-delay: 8s;
}







.page-id-13 .col, .page-id-381 .col {
    padding: 0;
}

.entry-divider.is-divider.small {
    display: none;
}

span.widget-title {
    background: #f00;
    color: #fff;
    padding: 8px;
    display: inline-block;
    width: 100%;
    margin-bottom: 5px;
}

.widget .is-divider {
    display: none;
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}