/*
 Theme Name:   Futuresparq theme
 Template:     hello-elementor
 Theme URI:    https://elementor.com/hello-theme/
 Description:  A child theme of Hello Elementor
 Author:       Diem Bui
 Version:      1.0
*/


.gadient_pink{
  background: linear-gradient(223.32deg, #EC297D 53.49%, #8F59A3 105.58%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;              /* ẩn màu chữ, chỉ thấy gradient */
/* nếu cần text mịn hơn trên WebKit cũ */
  -webkit-text-fill-color: transparent;
}
.text_pink .elementor-icon-list-item a{
    background: linear-gradient(223.32deg, #EC297D 53.49%, #8F59A3 105.58%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;              /* ẩn màu chữ, chỉ thấy gradient */
/* nếu cần text mịn hơn trên WebKit cũ */
  -webkit-text-fill-color: transparent;
}
.title_gardient .elementor-icon-list-text{
    background: linear-gradient(223.32deg, #EC297D 53.49%, #8F59A3 105.58%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;              /* ẩn màu chữ, chỉ thấy gradient */
/* nếu cần text mịn hơn trên WebKit cũ */
  -webkit-text-fill-color: transparent;
}
.elementor-button {
     border-radius: 30px;
  border: 1.5px solid transparent !important; /* cần border để có border-box */
  cursor: pointer !important;

  /* 2 lớp background:
     - lớp trắng bên trong (padding-box)
     - lớp gradient cho viền (border-box) */
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(223.32deg, #EC297D 53.49%, #8F59A3 105.58%) border-box !important;
}
.elementor-button:hover{
background: linear-gradient(223.32deg, #EC297D 53.49%, #8F59A3 105.58%) !important;

}

.border_color_pink{
  background: #fff;
  border-radius: 20px;
  padding: 24px 24px 32px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  position: relative;
  transition: box-shadow .35s cubic-bezier(.22,.61,.36,1),
              transform .35s cubic-bezier(.22,.61,.36,1);
}

.border_color_pink::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border-right: 4px solid #EC297D;
  border-bottom: 4px solid #EC297D;
  pointer-events: none;

  /* THÊM PHẦN NÀY ĐỂ MƯỢT HƠN */
  transform-origin: bottom right;
  transform: scale(1);
  opacity: 1;
  transition: transform .45s cubic-bezier(.22,.61,.36,1),
              opacity .45s cubic-bezier(.22,.61,.36,1);
}

/* Hover nút bên trong như cũ */
.border_color_pink:hover .elementor-button{
  background: linear-gradient(223.32deg, #EC297D 53.49%, #8F59A3 105.58%) !important;
  color: #fff !important;
}

/* Hover card – border thu nhỏ + mờ dần */
.border_color_pink:hover::after {
  transform: scale(0.88);  /* thu nhẹ về góc phải dưới */
  opacity: 0;              /* mờ dần rồi biến mất */
}

.border_color_pink:hover{
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  transform: translateY(-2px);
}
.border_color_pink .elementor-button{
     border-radius: 30px !important;
  border: 1.5px solid transparent !important; /* cần border để có border-box */
  cursor: pointer !important;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(223.32deg, #EC297D 53.49%, #8F59A3 105.58%) border-box !important;
}
.border_color_pink:hover{
  background:
    /* Cục 1: góc trên-phải */
    radial-gradient(120% 120% at 100% 0%,
      rgba(236, 41, 125, 0.20) 0%,
      rgba(255, 255, 255, 0) 60%),

    /* Cục 2: góc dưới-trái */
    radial-gradient(120% 120% at 0% 100%,
      rgba(236, 41, 125, 0.20) 0%,
      rgba(255, 255, 255, 0) 60%),

    /* nền trắng */
    #ffffff;

  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  transform: translateY(-2px);
}


.border_color_purple{
  background: #fff;
  border-radius: 20px;
  padding: 24px 24px 32px;
  position: relative;
  /* viền tím dạng box-shadow lệch 5px */
  box-shadow:
    0 10px 30px rgba(0,0,0,.06),
    5px 5px 0px 0px #8F59A3;
  transition: background .45s ease, box-shadow .35s ease, transform .35s ease;
}

/* hover: 2 cục tím + border tím mờ dần */
.border_color_purple:hover{
  background:
    radial-gradient(120% 120% at 100% 0%,
      rgba(143, 89, 163, 0.20) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(120% 120% at 0% 100%,
      rgba(143, 89, 163, 0.20) 0%, rgba(255, 255, 255, 0) 60%),
    #ffffff;
  /* bỏ viền tím, chỉ giữ shadow mềm */
  box-shadow: 0 18px 50px rgba(0,0,0,.14);
  transform: translateY(-2px);
}

.border_color_purple .elementor-button{
     border-radius: 30px !important;
  border: 1.5px solid transparent !important; /* cần border để có border-box */
  cursor: pointer !important;
  border: 1.5px solid;
   background:
    linear-gradient(#ffffff, #ffffff) padding-box,
   linear-gradient(223.32deg, #8F59A3 53.49%, #5C60AB 105.58%) border-box !important;
  
}

.border_color_purple:hover .elementor-button{
  background: linear-gradient(223.32deg, #8F59A3 53.49%, #5C60AB 105.58%) !important;
  color: #fff !important;
}

.border_color_blue{
  background: #fff;
  border-radius: 20px;
  padding: 24px 24px 32px;
  position: relative;
  /* viền xanh lệch 5px */
  box-shadow:
    0 10px 30px rgba(0,0,0,.06),
    5px 5px 0px 0px #318AFB;
  transition: background .45s ease, box-shadow .35s ease, transform .35s ease;
}

/* hover: 2 cục xanh + bỏ viền xanh cứng */
.border_color_blue:hover{
  background:
    radial-gradient(120% 120% at 100% 0%,
      rgba(49, 138, 251, 0.20) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(120% 120% at 0% 100%,
      rgba(49, 138, 251, 0.20) 0%, rgba(255, 255, 255, 0) 60%),
    #ffffff;
  box-shadow: 0 18px 50px rgba(0,0,0,.14);
  transform: translateY(-2px);
}
.border_color_blue .elementor-button{
     border-radius: 30px !important;
  border: 1.5px solid transparent !important; /* cần border để có border-box */
  cursor: pointer !important;
  border: 1.5px solid;
   background:
    linear-gradient(#ffffff, #ffffff) padding-box,
   linear-gradient(223.32deg, #318AFB 53.49%, #59ECF5 105.58%) border-box !important;
  
}
.border_color_blue:hover .elementor-button{
 background: linear-gradient(223.32deg, #318AFB 53.49%, #59ECF5 105.58%) !important;

  color: #fff !important;
}
.back_gradient{
  background: linear-gradient(270deg, rgba(143, 89, 163, 0.9) 0%, rgba(236, 41, 125, 0.9) 98.92%);

}
/* Slider 3 hình – hình giữa rõ, 2 bên mờ */
.fsq-slider .elementor-image-carousel-wrapper {
  overflow: visible; /* cho hình 2 bên hơi tràn ra ngoài nếu cần */
}

.fsq-slider .swiper-slide {
  transition: transform .4s ease, opacity .4s ease, filter .4s ease;
  transform: scale(.9);
  opacity: .25;
  filter: grayscale(1) brightness(1.3); /* cho cảm giác nhạt/mờ */
}

/* Slide đang active (ở giữa) */
.fsq-slider .swiper-slide-active {
  transform: scale(1);
  opacity: 1;
  filter: none;
}

/* Nếu muốn 2 slide liền kề đỡ mờ hơn 1 chút */
.fsq-slider .swiper-slide-prev,
.fsq-slider .swiper-slide-next {
  opacity: .45;
  filter: grayscale(.5) brightness(1.1);
}
.faq .elementskit-card.active .elementskit-card-header .elementskit-btn-link{
background: linear-gradient(223.32deg, #EC297D 53.49%, #8F59A3 105.58%);
border-radius: 10px;
}
.faq .elementskit-card.active {
      border-radius: 15px !important;
  border: 2px solid transparent !important; /* cần border để có border-box */
  cursor: pointer !important;

  /* 2 lớp background:
     - lớp trắng bên trong (padding-box)
     - lớp gradient cho viền (border-box) */
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
   linear-gradient(223.32deg, #EC297D 53.49%, #8F59A3 105.58%) border-box !important;


}
.register_home .elementor-button{
  position: absolute;
}
.founder_home {
  padding: 0;
}
.founder_home .pp-info-box-icon-wrap{
    flex: 0 0 40%;
    width: 40%;
    max-width: 40%;
}
.swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right{
  background-image: linear-gradient(to left, rgb(254 250 250 / 50%), rgba(0, 0, 0, 0)) !important;
    border-radius: 16px !important;
}
.back_pink{
  background: linear-gradient(270deg, rgba(143, 89, 163, 0.05) 0%, rgba(236, 41, 125, 0.05) 98.92%);

}
.text_color_pink .e-n-tab-title[aria-selected=true] .e-n-tab-title-text{
 background: linear-gradient(223.32deg, #EC297D 53.49%, #8F59A3 105.58%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;              /* ẩn màu chữ, chỉ thấy gradient */
/* nếu cần text mịn hơn trên WebKit cũ */
  -webkit-text-fill-color: transparent;
}
.text_color_pink .e-n-tab-title .e-n-tab-title-text:hover{
 background: linear-gradient(223.32deg, #EC297D 53.49%, #8F59A3 105.58%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;              /* ẩn màu chữ, chỉ thấy gradient */
/* nếu cần text mịn hơn trên WebKit cũ */
  -webkit-text-fill-color: transparent;
}
.text_color_pink .e-n-tab-title{
  background: transparent !important;
}
.text_color_pink .e-n-tab-title[aria-selected=true]{
  border-radius: 15px !important;
  border: 1px solid transparent !important; /* cần border để có border-box */
  cursor: pointer !important;

  /* 2 lớp background:
     - lớp trắng bên trong (padding-box)
     - lớp gradient cho viền (border-box) */
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
   linear-gradient(223.32deg, #EC297D 53.49%, #8F59A3 105.58%) border-box !important;

}
.why_about .pp-icon{
    margin-top: -50px;
}
.why_about{
      box-shadow: 0px 4px 10px 0px #0000001A;
}
.gadient_tim{
  background: linear-gradient(223.32deg, #8F59A3 53.49%, #5C60AB 105.58%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;              /* ẩn màu chữ, chỉ thấy gradient */
/* nếu cần text mịn hơn trên WebKit cũ */
  -webkit-text-fill-color: transparent;
}
.gadient_blue{
    background: linear-gradient(223.32deg, #318AFB 53.49%, #59ECF5 105.58%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;              /* ẩn màu chữ, chỉ thấy gradient */
/* nếu cần text mịn hơn trên WebKit cũ */
  -webkit-text-fill-color: transparent;
}
.back_tim{
  background: linear-gradient(223.32deg, #8F59A3 53.49%, #5C60AB 105.58%);

}
.back_blue{
  background: linear-gradient(223.32deg, #318AFB 53.49%, #59ECF5 105.58%);

}
.elementor-field-option{
      display: flex;
    gap: 0 6px;
}
.lakit-nav__sub{
        width: 300px !important;
}
.wpml-ls-menu-item a{
	padding:0 5px !important;
}
@media (max-width: 568px){
  .founder_home .pp-info-box-icon-wrap{
     max-width: 100%;
  }
  .register_home .elementor-button{
    position: relative;
            margin-top: 20px;
  }
}