:root {
  --pri-color-banking: #54DACA;

}
.pri-color,
.pri-color * {
  color: var(--pri-color-banking);
}
.pri-box-right {
      padding: 30px !important;
    background-color: transparent;
    background-image: linear-gradient(240deg, #286a76 0%, #0c2849 100%);
    border-radius: 24px !important;
    border: solid 1px var(--pri-color-banking);
}
.text-intro-banking span {
  color: #fff;
}
.text-intro-banking .elementor-widget-container {
  display: flex;
    align-items: center;
}
.text-intro-banking .elementor-widget-container::before {
  content: "";
    background: url(/wp-content/uploads/2026/03/Line-Star-Icons.svg) no-repeat;
    width: 100px;
    display: block;
    height: 10px;
    margin-right: 15px;
    transform: rotate(180deg);
}
.text-intro-banking .elementor-widget-container::after {
  content: "";
    background: url(/wp-content/uploads/2026/03/Line-Star-Icons.svg) no-repeat;
    width: 100px;
    display: block;
    height: 10px;
    margin-left: 15px;
}
/* button */
.btn-intro-banking a {
  padding: 12px 24px 12px 5px;
  background: rgb(23 188 213 / 5%);
  border-radius: 8px;
  border: solid 2px rgb(23 188 213 / 5%);
  color: var(--pri-color-banking);
}
.btn-intro-banking a:hover {
  color: var(--pri-color-banking);
}
.btn-intro-banking a .elementor-button-text span {
  margin-right: 10px;
  border-radius: 8px;
  padding: 5px 15px;
  box-shadow: inset 0px 0px 8px 1px rgba(255, 255, 255, 0.15), inset 2px 1px 4px rgba(0, 0, 0, 0.2);
}

/* Hero */
.banking-hero {

}
.banking-hero .banking-hero-img {
  
}
.banking-hero .banking-hero-img .img1 {
      position: absolute;
    left: 17%;
    top: 150%;
    width: 25%;
    z-index: 9;
}
.banking-hero .banking-hero-img .img2 {
  position: absolute;
  left: 37%;
  top: 0;
  width: 25%;
  /* transform: translate(-50%, 0); */
  z-index: 9;
}
.banking-hero .banking-hero-img .img3 {
  position: absolute;
    right: 19%;
    top: 300%;
    width: 27%;
    z-index: 9;
}
.banking-hero .hero-bg {
  width: 100%;
    position: absolute;
}
.banking-hero .hero-bg img {
  width: 100%;
}
/* Tổng quan khóa học */
.banking-tong-quan {

}
.banking-tong-quan .left-col .bgr {
  position: absolute;
    left: 1%;
    top: -11%;
    width: 83% !important;
}
/* Sec 3 */
.banking-sec-3 .box-circle .img1::after {
      /* box-shadow: 1px 1px 85px 47px rgb(69 150 176 / 40%) inset;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: solid 2px var(--pri-color-banking);
    stroke-dasharray: 317;
    stroke-dashoffset: 314;
    animation: growLineFromLeft 1s ease-out forwards; */
}
.banking-sec-3 .box-circle .img-effec {
      position: absolute;
    top: 50%;
    left: 17%;
}
/* Đặt tâm biến dạng ở chính giữa bức ảnh */
.banking-sec-3 .box-circle {
  margin-top: -200px;
}
.banking-sec-3 .box-circle .img-effec img {
    transform-origin: center center;
    animation: rippleEffect 2.5s infinite linear;
}
.banking-sec-3 .box-circle .img1 {
  z-index: 2;
}
.banking-sec-3 .box-circle .circle {
  display: flex;
    border-radius: 999px;
    width: 150px;
    height: 150px;
    box-shadow: 1px 1px 15px 2px #4596B0 inset;
    background-color: transparent;
    background-image: linear-gradient(180deg, #011D3C 0%, #174A71 100%);
    align-items: center;
    justify-content: center;
    /* position: absolute; */
}
/* 2. CẤU HÌNH GỐC CHO 4 CỤC TRÒN */
.banking-sec-3 .box-circle .circle-1, 
.banking-sec-3 .box-circle .circle-2, 
.banking-sec-3 .box-circle .circle-3, 
.banking-sec-3 .box-circle .circle-4 {
    /* Bắt buộc xếp 4 cục tròn nằm đè lên nhau ở ngay tâm hình cầu trung tâm */
    position: absolute !important;
    top: 50%;
    left: 50%;
    
    /* Căn lại tâm (Thay số 50px bằng đúng 1 nửa chiều rộng/cao của cục tròn thực tế) */
    margin-top: -50px; 
    margin-left: -50px;

    /* Cho phép xoay 1 vòng mất 20 giây, chạy mượt và lặp lại vô hạn */
    animation: orbitEllipse 20s infinite linear;
}

/* 3. CHIA ĐỀU 4 CỤC RẢI RÁC TRÊN QUỸ ĐẠO (Bằng độ trễ âm) */
.banking-sec-3 .box-circle .circle-1   { animation-delay: 0s; }
.banking-sec-3 .box-circle .circle-2 { animation-delay: -2s; }
.banking-sec-3 .box-circle .circle-3 { animation-delay: -4s; }
.banking-sec-3 .box-circle .circle-4 { animation-delay: -6s; }

/* Lộ trình khóa học */
.banking-lo-trinh-khoa-hoc .banking-tab-lo-trinh {

}
.banking-tab-lo-trinh .e-n-tabs {
  align-items: center;
}
.banking-tab-lo-trinh .e-n-tabs .e-n-tabs-content {
  display: none;
}
.banking-tab-lo-trinh .e-n-tabs .e-n-tabs-heading  {
  width: fit-content;
  background-color: transparent;
  background-image: linear-gradient(90deg, #062b48 0%, #3a6080 100%);
  border-radius: 30px;
}
.banking-tab-lo-trinh .e-n-tabs .e-n-tabs-heading button  {
/* border-radius: 30px;
  padding: 5px 10px; */
  /* justify-content: flex-end; */
  /* flex-basis: 100%; */
  background-color: unset !important;
  padding: 0;
}
.banking-tab-lo-trinh .e-n-tabs .e-n-tabs-heading button span {
  /* text-align: right !important; */
  font-weight: 700;
  font-size: 12px;
  padding: 10px 24px;
  border-radius: 30px;
  background-color: #fff;
  color: #000;
}
.banking-tab-lo-trinh .e-n-tabs .e-n-tabs-heading button[aria-selected="false"] span  {
  background-color: transparent !important;
  color: #fff;
}
.banking-tab-lo-trinh .e-n-tabs .e-n-tabs-heading button:hover span  {
  background-color: #fff !important;
  color: #000;
}

.banking-lo-trinh-khoa-hoc #banking-main-section-1 {
  
}
.banking-lo-trinh-khoa-hoc .img-bgr {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,0);
}
.banking-lo-trinh-khoa-hoc #banking-main-section-2 {
  
}
/* Container cha chứa các box */
.bank-box-flip {
    position: relative; 
}

/* Các box con bên trong */
.bank-box-flip .bank-flip {
    position: sticky !important;
    top: 150px; 
    transform-origin: top center;
    will-change: transform, opacity;
    transition: transform 0.1s ease-out, opacity 0.1s ease-out; 
}


@keyframes growLineFromLeft {
    to {
        stroke-dashoffset: 0;
    }
}
/* Khởi tạo chu kỳ tỏa vòng tròn */
@keyframes rippleEffect {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    100% {
        transform: scale(3); /* Chỉnh số 1.3 to hơn nếu muốn vòng tỏa rộng hơn */
        opacity: 0;
    }
}
/* 1. ĐỊNH NGHĨA QUỸ ĐẠO ELIP VÀ HIỆU ỨNG 3D (TRƯỚC/SAU) */
@keyframes orbitEllipse {
    0% {
        /* Điểm bắt đầu (Bên phải) */
        transform: scaleY(0.25) rotate(0deg) translateX(600px) rotate(0deg) scaleY(4);
        z-index: 2;
    }
    25% {
        /* Vòng ra phía TRƯỚC MẶT (z-index cao nhất) */
        transform: scaleY(0.25) rotate(90deg) translateX(600px) rotate(-90deg) scaleY(4);
        z-index: 3;
    }
    50% {
        /* Vòng sang (Bên trái) */
        transform: scaleY(0.25) rotate(180deg) translateX(600px) rotate(-180deg) scaleY(4);
        z-index: 2;
    }
    75% {
        /* Vòng ra phía SAU LƯNG (z-index thấp nhất để chìm ra sau quả cầu) */
        transform: scaleY(0.25) rotate(270deg) translateX(600px) rotate(-270deg) scaleY(4);
        z-index: 1;
    }
    100% {
        /* Trở về điểm xuất phát */
        transform: scaleY(0.25) rotate(360deg) translateX(600px) rotate(-360deg) scaleY(4);
        z-index: 2;
    }
}
@media (max-width: 1024px) {
  .banking-tab-lo-trinh 
  .banking-tab-lo-trinh .e-n-tabs {
    background-color: #fff;
    overflow: scroll;
  }

  .banking-tab-lo-trinh .e-n-tabs .e-n-tabs-heading {
    padding: 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start !important;
  }

  .banking-tab-lo-trinh .e-n-tabs .e-n-tabs-heading button {
    margin-bottom: unset !important;
    margin-top: unset !important;
    text-wrap-mode: nowrap;
  }
  .banking-tab-lo-trinh .e-n-tabs-heading button span {
    font-size: 12px;
    padding: 10px 20px;
  }

  .banking-tab-lo-trinh .e-n-tabs .e-n-tabs-content {
    display: none;
  }
 
} 
@media (max-width: 767px) {
  .btn-intro-banking a .elementor-button-text span { 
    margin-bottom: 5px;
    display: block;
  }
}