/*
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.   ***************/


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


}


/* Desktop (>=1025px) */
@media (min-width: 1025px) {
  .module2-item-1 {
    top: 100%;
    left: 10%;
  }
  .module2-item-2 {
    top: 100%;
    right: 5%;
  }
  .module2-item-3 {
    top: 150%;
    left: 5%;
  }
  .module2-item-4 {
    top: 150%;
    right: 10%;
  }
  .module2-item-5 {
    top: 200%;
    left: 10%;
  }
  .module2-item-6 {
    top: 200%;
    right: 5%;
  }
  .module2-item-7 {
    top: 250%;
    left: 5%;
  }
  .module2-item-8 {
    top: 250%;
    right: 10%;
  }
}
/* Tablet (between 768px and 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .module2-item-1 {
    top: 100%;
    left: 10%;
  }
  .module2-item-2 {
    top: 100%;
    right: 5%;
  }
  .module2-item-3 {
    top: 150%;
    left: 5%;
  }
  .module2-item-4 {
    top: 150%;
    right: 10%;
  }
  .module2-item-5 {
    top: 200%;
    left: 10%;
  }
  .module2-item-6 {
    top: 200%;
    right: 5%;
  }
  .module2-item-7 {
    top: 250%;
    left: 5%;
  }
  .module2-item-8 {
    top: 250%;
    right: 10%;
  }
}
/* Mobile (<= 767px) */
@media (max-width: 767px) {
.module2 {
    min-height:600px;
}
  .module2-item {
    position: static !important;
    margin: 0 auto;
    margin-bottom: 1rem;
  }
  .module2-item-1 {
    top: 100%;
    left: 10%;
  }
  .module2-item-2 {
    top: 100%;
    right: 5%;
  }
  .module2-item-3 {
    top: 130%;
    left: 5%;
  }
  .module2-item-4 {
    top: 130%;
    right: 10%;
  }
  .module2-item-5 {
    top: 160%;
    left: 10%;
  }
  .module2-item-6 {
    top: 160%;
    right: 5%;
  }
  .module2-item-7 {
    top: 190%;
    left: 5%;
  }
  .module2-item-8 {
    top: 190%;
    right: 10%;
  }
}
.module2 {
  align-items: flex-start;
}
.animated-border {
  background: transparent;
  border-radius: 10px;
  overflow: visible;
  z-index: 0;
  --border-width: 1px;
}
/* Dùng ::before để tạo hiệu ứng viền chạy */
.animated-border::before {
  content: "";
  position: absolute; /* Đẩy pseudo-element ra ngoài để tạo vùng border */
  top: calc(-1 * var(--border-width));
  left: calc(-1 * var(--border-width));
  right: calc(-1 * var(--border-width));
  bottom: calc(-1 * var(--border-width));
  border-radius: inherit;
  /* Background gradient dùng cho hiệu ứng border */
  background: linear-gradient(90deg, transparent, #ffd700, transparent);
  background-size: 200% 100%;
  animation: borderAnimation 2s linear infinite;
  z-index: -1; /* Đảm bảo nó nằm sau nội dung */
  pointer-events: none;
  /* DÙNG MASK để cắt bỏ phần giữa, chỉ hiển thị vùng border */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  padding: var(--border-width);
}
/* Keyframes cho animation chuyển động gradient */
@keyframes borderAnimation {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 200% 50%;
  }
}