@font-face {
  font-family: "Inter Display";
  src: url("../fonts/inter-display/InterVariable.ttf")
    format("truetype-variations");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

html,
body {
  margin: 0px;
  height: 100%;
  width: 100%;
  background-color: #f1fcfa;
  scroll-behavior: smooth;
  font-family: "Inter", sans-serif;
  font-weight: 500;
}

.gap-4 {
  gap: 4px !important;
}

.gap-8 {
  gap: 8px !important;
}

.gap-12 {
  gap: 12px !important;
}

.gap-16 {
  gap: 16px !important;
}

.gap-20 {
  gap: 20px !important;
}

.gap-24 {
  gap: 24px !important;
}

.gap-28 {
  gap: 28px !important;
}

.gap-32 {
  gap: 32px !important;
}

.gap-36 {
  gap: 36px !important;
}

.gap-40 {
  gap: 40px !important;
}

/* Site Badge - Premium Floating Design */
.site-badge {
  position: fixed;
  bottom: 13px;
  left: 24px;
  /* right: 20px; */
  /* left: 20px; */
  z-index: 9999;
  pointer-events: none;
}

.site-badge-content {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.85);
  height: 38px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 10px 18px 10px 14px;
  border-radius: 10px;
  box-shadow:
    rgba(0, 0, 0, 0.17) 0px 0.602187px 1.56569px -1.5px,
    rgba(0, 0, 0, 0.14) 0px 2.28853px 5.95019px -3px,
    rgba(0, 0, 0, 0.02) 0px 10px 26px -4.5px;
  border: 1px solid rgba(0, 0, 0 0.04);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  pointer-events: auto;
  transform-origin: bottom right;
}
.site-badge-content:hover {
  box-shadow:
    rgba(0, 0, 0, 0.25) 0px 4px 12px -2px,
    rgba(0, 0, 0, 0.18) 0px 8px 24px -4px;
  transform: translateY(-2px);
}

.site-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.site-badge-icon img {
  height: 20px;
  width: auto;
  display: block;
  object-fit: contain;
}

.site-badge-text {
  display: flex;
  flex-direction: column;
}

.site-badge-title {
  font-weight: 700;
  font-size: 13px;
  color: #000; /* Dark slate */
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Entrance Animation */
@keyframes badgeSlideIn {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.site-badge {
  animation: badgeSlideIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s backwards;
}

/* Triết lý và nền tảng */
.ed-about-section {
  padding: 120px 60px;
  background-color: #fafafa;
}

.ed-about-left {
  flex: 1 1 500px;
}

.ed-about-subtitle {
  font-size: 14px;
  font-weight: 400;
  color: #0d41e1;
  text-transform: uppercase;
  letter-spacing: 0em;
  line-height: 1.5em;
}

.ed-about-title {
  font-size: 60px;
  font-weight: 600;
  color: #000;
  line-height: 1.1em;
  letter-spacing: -3px;
}

.ed-about-title-highlight {
  font-family: "Playfair Display", serif;
  font-style: italic;
  color: #0d41e1;
  font-weight: 600;
  font-size: 60px;
  letter-spacing: -3px;
  line-height: 1.1em;
}

.ed-about-desc {
  font-size: 16px;
  line-height: 1.5em;
  color: #333333;
  font-weight: 500;
  letter-spacing: -0.1px;
}

.ed-about-desc strong {
  color: #000;
  font-weight: 600;
}

.ed-about-links {
  display: flex;
  flex-wrap: wrap;
}

.ed-about-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #0d41e1;
  text-decoration: none;
  padding: 8px 16px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 170%;
  font-family: "Geist", sans-serif;
}

.ed-about-link:hover {
  color: #0d41e1;
}

.ed-about-right {
  flex: 1 1 500px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ed-about-cards-row {
  display: flex;
  gap: 20px;
}

.ed-about-card {
  background: #edfaff;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid rgba(9, 9, 9, 0.1);
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Subtle background wave pattern for the card */
.ed-about-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q 25 20, 50 10 T 100 10' fill='none' stroke='%232b5fcd' stroke-width='1' stroke-opacity='0.1'/%3E%3C/svg%3E");
  background-size: 100px 20px;
  z-index: 0;
  pointer-events: none;
}

.ed-about-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.ed-about-card-title {
  font-size: 20px;
  font-weight: 600;
  color: #000;
  letter-spacing: -1px;
  line-height: 34px;
}

.ed-about-card-icon {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #1a56db;
}

.ed-about-card-text {
  font-size: 14px;
  letter-spacing: -0.1px;
  line-height: 22px;
  color: #333333;
  position: relative;
  z-index: 1;
  font-weight: 500;
}

.ed-about-card-wide {
  width: 100%;
}

/* Contact Section */
.ed-contact-section {
  padding: 120px 60px;
  background-color: #ffffff;
  min-height: 100vh;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.ed-contact-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: stretch;
  width: 100%;
}

.ed-contact-left {
  flex: 1 1 450px;
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 25px;
  padding: 0px 31px;
}

.ed-contact-title {
  font-size: 50px;
  font-weight: 500;
  color: #001666;
  line-height: 1.1em;
  letter-spacing: -1.4px;
}

.ed-contact-title-highlight {
  font-family: "Playfair Display", serif;
  font-style: italic;
  color: #0d41e1;
  font-weight: 700;
}

.ed-contact-desc {
  font-size: 16px;
  line-height: 1.5em;
  letter-spacing: -0.1px;
  color: #333333;
  font-weight: 500;
}

.ed-contact-list {
  margin-top: 16px;
  list-style-type: none;
  padding-left: 0;
}

.ed-contact-list li {
  font-size: 16px;
  line-height: 1.5em;
  letter-spacing: -0.1px;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333333;
  position: relative;
  padding-left: 20px;
}

/* Bullet pointer */
.ed-contact-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 20px;
  color: #333333;
}

.ed-contact-list li strong {
  color: #333333;
  font-weight: 700;
}

/* Right form */
.ed-contact-right {
  flex: 1 1 450px;
  background-color: #bad9ff;
  padding: 20px;
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ed-contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ed-form-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.ed-form-group label {
  font-size: 16px;
  font-weight: 500;
  color: #000;
  letter-spacing: -0.1px;
  line-height: 22px;
}

.ed-form-group input,
.ed-form-group textarea {
  padding: 16px;
  border: none;
  border-radius: 8px;
  border: 1px solid rgba(9, 9, 9, 0.1);
  font-size: 16px;
  font-family: inherit;
  background-color: #ffffff;
  font-weight: 400;
  color: #111112;
}

.ed-form-group textarea {
  min-height: 160px;
}

.ed-form-group input:focus,
.ed-form-group textarea:focus {
  outline: none;
  box-shadow: 0 0 0 1px #7189ff;
}

.ed-form-group input::placeholder,
.ed-form-group textarea::placeholder {
  color: #333333;
  font-weight: 500;
}

.ed-form-group textarea {
  resize: none;
}

.ed-form-row {
  display: flex;
  gap: 20px;
}

.ed-form-row .ed-form-group {
  flex: 1;
}

.ed-checkbox-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background-color: #ffffff;
  border: 1px solid rgba(9, 9, 9, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.ed-checkbox-card input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid #c2c2c2 !important;
  border-radius: 4px !important;
  cursor: pointer;
  margin: 0 !important;
  padding: 0 !important;
  outline: none !important;
  position: relative;
  background-color: #fff;
  flex-shrink: 0;
}

.ed-checkbox-card input[type="checkbox"]:checked {
  background-color: rgb(0, 153, 255);
  border: 2px solid rgb(204, 204, 204) !important;
}

.ed-checkbox-card input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ed-checkbox-card span {
  font-size: 16px;
  color: #333333;
  font-weight: 500;
}

.ed-form-submit {
  width: 100%;
  padding: 12px 28px;
  background-color: #10437c;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  border: none;
  border-radius: 28px;
  cursor: pointer;
  height: 46px;
}

.ed-form-submit:hover {
  background-color: #0a254b;
}

/* hero section */
.ed-hero-video-section {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: radial-gradient(
    50% 50%,
    rgb(30, 59, 138) 0%,
    rgb(30, 59, 138) 61.7821%,
    rgb(18, 33, 89) 100%
  );
}

.ed-video-container {
  width: 100%;
  height: 100%;
}

.ed-video-bg {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Hero loader: fixed toàn màn hình */
#loaderStage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 100;
  transform: translateY(0);
  transition: transform 1s cubic-bezier(0.44, 0, 0.56, 1);
}

#loaderStage.is-hiding {
  transform: translateY(-100%);
}

#loaderStage.is-hidden {
  display: none;
}

/* Programs Section */
.ed-programs-section {
  position: relative;
  z-index: 2;
  padding: 120px 160px;
  background-color: #fafafa;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.ed-programs-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  width: 1120px;
}

.ed-programs-header {
  width: 100%;
  padding: 0 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.ed-programs-title {
  font-size: 60px;
  font-weight: 600;
  color: #122159;
  text-align: center;
  line-height: 1.1em;
  letter-spacing: -3px;
}

.ed-programs-title-highlight {
  display: inline;
  font-family: "Playfair Display", serif;
  font-style: italic;
  color: #0d41e1;
  font-weight: 500;
}

.ed-programs-title .word {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(10px);
  white-space: pre;
  will-change: transform, opacity, filter;
}

.ed-programs-title .word.animate {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition:
    opacity 0.4s ease-out,
    filter 0.4s ease-out,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ed-programs-desc {
  font-size: 16px;
  line-height: 1.5em;
  color: #333333;
  text-align: center;
  font-weight: 500;
  letter-spacing: -0.1px;
  max-width: 1000px;
  margin: 0 auto;
}

.ed-word {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(10px);
  will-change: transform, opacity, filter;
  white-space: pre;
}

.ed-word.animate {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition:
    opacity 0.4s ease-out,
    filter 0.4s ease-out,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ed-program-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.card-wrapper {
  position: sticky;
  top: 120px;
  height: 516px;
  z-index: 1;
}

.card-wrapper:nth-child(1) { z-index: 1; }
.card-wrapper:nth-child(2) { z-index: 2; }
.card-wrapper:nth-child(3) { z-index: 3; }
.card-wrapper:nth-child(4) { z-index: 4; }
.card-wrapper:nth-child(5) { z-index: 5; }


.ed-program-card {
  display: flex;
  align-items: start;
  justify-content: start;
  gap: 40px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  overflow: hidden;
  height: 516px;
  transform-origin: center top;
  position: relative;
}

.ed-program-card:last-child {
  margin-bottom: 0;
}

.ed-program-card-content {
  flex: 1;
  padding: 24px 8px 24px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.ed-program-card-title {
  font-size: 22px;
  font-weight: 600;
  color: #000;
  letter-spacing: -1.2px;
  line-height: 28px;
  text-transform: uppercase;
}

.ed-program-card-subtitle {
  font-size: 18px;
  font-style: italic;
  color: #333333;
  font-weight: 400;
  letter-spacing: -1.2px;
  line-height: 28px;
}

.ed-program-card-text {
  font-size: 16px;
  line-height: 1.3em;
  letter-spacing: 0px;
  color: #333333;
  font-weight: 500;
  text-align: justify;
}

.ed-program-card-target {
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.1px;
  color: #000;
  text-align: left;
  font-weight: 700;
}

.ed-program-card-text p {
  margin: 0 0 16px 0;
}

.ed-program-card-text p:last-child {
  margin-bottom: 0;
}

.ed-program-card-text strong {
  color: #000;
  font-weight: 700;
}

.ed-program-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #122159;
  color: #ffffff;
  line-height: 22px;
  letter-spacing: -0.1px;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  align-self: flex-start;

  opacity: 0;
  transform: translateY(20px);
  transition:
    background-color 0.2s,
    opacity 0.5s cubic-bezier(0.44, 0, 0.56, 1),
    transform 0.5s cubic-bezier(0.44, 0, 0.56, 1);
  transition-delay: 0s, 0.3s, 0.3s;
}

.ed-program-btn.appeared {
  opacity: 1;
  transform: translateY(0);
}

.ed-program-btn:hover {
  background-color: #192f7d;
  color: #ffffff;
}

.ed-program-card-image {
  flex: 1;
  width: fit-content;
  padding: 8px;
  height: 100%;
  box-sizing: border-box;
  position: relative; /* Thêm để định vị overlay form bên trong */
}

.ed-program-card-image {
  position: relative;
  overflow: hidden;
}

.ed-program-card-image {
  position: relative;
}

.ed-program-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.ed-program-card-status {
  position: absolute;
  top: 16px;
  right: 16px;
  background-color: #f37021;
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 400;
  z-index: 10;
  letter-spacing: 0em;
  line-height: 1.2em;
}

/* FAQ Section */
.ed-faq-section {
  position: relative;
  z-index: 2;
  padding: 120px 60px;
  background-color: #fff;
}

.ed-faq-container {
  max-width: 100%;
  display: flex;
  align-items: start;
  gap: 24px;
}

.ed-faq-left {
  flex: 1;
}

.ed-faq-title {
  font-size: 60px;
  font-weight: 500;
  color: #000;
  line-height: 100%;
  letter-spacing: -0.04px;
}

/* --- Giữ nguyên CSS cũ của bạn ở đây --- */

.js-animate-text {
  perspective: 1000px;
}

.js-animate-text .word {
  display: inline-block;
  opacity: 0;
  transform: rotateX(-90deg) translateY(16px);
  transform-origin: bottom;

  transition:
    opacity 0.6s ease-out,
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.js-animate-text.animate .word {
  opacity: 1;
  transform: rotateX(0deg) translateY(0px);
}

.ed-faq-right {
  width: 66%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@keyframes faqBgFlash {
  0% {
    background-color: #d8d8d8;
  }
  100% {
    background-color: #fafafa;
  }
}

.ed-faq-item {
  border: 1px solid #d8d8d8;
  border-radius: 24px;
  overflow: hidden;
  padding: 24px;
  min-height: 76px;
}

.ed-faq-item.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: none;
}

.ed-faq-item.reveal.active-reveal {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.8s ease-out,
    transform 1s cubic-bezier(0.175, 0.885, 0.32, 1);
}

.ed-faq-right {
  will-change: transform;
}

.ed-faq-item.active {
  animation: faqBgFlash 0.5s ease-out forwards;
}

.ed-faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  color: #000;
  text-align: left;
  line-height: 140%;
  letter-spacing: 0em;
  padding: 0px !important;
}

.ed-faq-icon {
  font-size: 24px;
  font-weight: 300;
  color: #888888;
  transition:
    transform 0.3s ease,
    color 0.3s;
}

.ed-faq-item.active .ed-faq-icon {
  transform: rotate(45deg);
  color: #122159;
}

.ed-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.3s ease,
    padding 0.3s ease;
}

.ed-faq-item.active .ed-faq-question {
  color: #122159;
  font-weight: 500;
}

.ed-faq-item.active .ed-faq-answer {
  max-height: 500px;
  margin-top: 16px;
}

.ed-faq-answer p {
  margin: 0;
  /* color: rgba(0, 0, 0, 0.48); */
  color: #333333;
  font-size: 16px;
  line-height: 1.5em;
  letter-spacing: 0em;
  font-weight: 400;
}

/* Ed footer */
.ed-footer-section {
  position: relative;
  z-index: 2;
  padding: 48px 60px 80px 60px;
  background-color: #fff;
  font-family: "Manrope", sans-serif;
}

.ed-footer-container {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* Cột thông tin bên trái */
.ed-footer-info {
  width: 660px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ed-footer-logo-wrapper {
  display: flex;
  align-items: center;
}

/* .ed-footer-logo {
  width: 424px;
  height: 64px;
} */

.all-course .header-logo-png-2 {
  width: 260px;
  height: 44px;
  background-image: url(../img/footer-logo.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

.ed-footer-contact {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.45);
  line-height: 150%;
  letter-spacing: 0px;
  max-width: 600px;
  font-weight: 400;
}

.ed-footer-contact strong {
  font-weight: bolder;
}

/* Các cột link */
.ed-footer-links {
  flex: 0 1 220px;
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ed-footer-heading {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0em;
  line-height: 120%;
  color: rgba(0, 0, 0, 0.88);
}

.ed-footer-links a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.45);
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
}

/* Section */

.ed-stat-section {
  position: sticky;
  top: 0;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #122159;
  padding: 0px 60px;
  padding-bottom: 120px;
  margin-bottom: 230px;
  color: #ffffff;
  overflow: hidden;
  min-height: 100vh;
}

.ed-stat-container {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* --- 2. Header --- */
.ed-stat-header {
  font-size: 36px;
  letter-spacing: -1px;
  line-height: 1.3em;
  font-weight: 600;
  color: #f3f1ef;
  text-align: center;
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity 1.2s ease-out,
    transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
}

.ed-stat-header span {
  color: #8ac2ff;
}

/* Kích hoạt Header */
.ed-stat-section.is-active .ed-stat-header {
  opacity: 1;
  transform: translateY(0);
}

/* --- 3. Grid & Cột --- */
.ed-stat-grid {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 440px;
  gap: 30px;
  padding-top: 40px;
}

.ed-stat-column {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 15px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
}

.ed-stat-column {
  opacity: 0;
  transform: translateY(60px);
  transition:
    opacity 1s ease-out,
    transform 1s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
}

/* --- 4. Chart Box (Thanh màu xanh) --- */
.ed-stat-chart-wrap {
  height: 290px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
}

.ed-stat-box {
  background-color: #0d41e1;
  width: 100%;
  height: var(--percent, 0%);
  display: flex;
  align-items: flex-start;
  padding-top: 16px;
  padding-left: 16px;
  position: relative;
  transform: scaleY(0);
  transform-origin: bottom;
  opacity: 0;
  transition:
    transform 1.2s cubic-bezier(0.12, 1, 0.3, 1),
    opacity 0.4s ease;
}

.ed-stat-number {
  font-size: 28px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1;
}

.ed-stat-desc {
  font-size: 15px;
  line-height: 1.5em;
  color: #f3f1ef;
  text-align: left;
  min-height: 80px;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.ed-stat-desc strong {
  font-weight: 700;
  color: #ffffff;
}

/* --- 5. Trạng thái Kích hoạt (Dùng cho Timer/JS) --- */

/* Khi cột được thêm class .animate-in */
.ed-stat-column.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.ed-stat-box {
  opacity: 0;
  transform: scaleY(0) !important;
  transform-origin: bottom;
  transition:
    transform 1.5s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.5s ease;
}

.ed-stat-column.animate-in .ed-stat-box {
  opacity: 1;
  transform: scaleY(1) !important;
}

.ed-stat-desc {
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: 0.3s;
}

.ed-stat-column.animate-in .ed-stat-desc {
  opacity: 1;
}

/* Card khóa học */
.ed-course-section {
  background: radial-gradient(
    50% 50%,
    rgb(30, 59, 138) 0%,
    rgb(30, 59, 138) 61.7821%,
    rgb(18, 33, 89) 100%
  );
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 80px 20px;
  color: #ffffff;
  box-sizing: border-box;
}

.ed-course-container {
  width: 100%;
  margin: 0 auto;
  display: flex;
  gap: 40px;
  align-items: stretch;
}

/* Cột trái: Hình ảnh và Stats */
.ed-course-visual {
  flex: 0.6;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ed-course-image-wrapper {
  border-radius: 24px;
  overflow: hidden;
}

.ed-course-main-img {
  cursor: auto;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  display: block;
  object-fit: cover;
  background-color: rgba(0, 0, 0, 0);
  object-position: 50% 50%;
}

.ed-course-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    180deg,
    rgba(59, 130, 245, 0.4) 0%,
    rgba(7, 54, 130, 0) 100%
  );
  backdrop-filter: blur(10px);
  border: 1px solid #60a5fa;
  border-radius: 27px;
  padding: 0 30px;
  width: 100%;
  margin: 0 auto;
  height: 48px;
  gap: 10px;
}

.ed-stat-item {
  font-size: 14px;
  color: #f3f1ef;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0em;
  line-height: 1.2em;
  flex: 1;
  justify-content: center;
}

.ed-stat-divider {
  width: 1px;
  height: 50%;
  background-color: #60a5fa;
  flex-shrink: 0;
}

/* Cột phải: Content */
.ed-course-content {
  flex: 0.4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: auto;
}

.ed-course-badge {
  display: inline-block;
  padding: 8px 12px;
  width: fit-content;
  background: linear-gradient(rgba(59, 130, 245, 0.4) 0%, rgb(6, 54, 131) 100%);
  border: 1px solid #60a5fa;
  color: #f3f1ef;
  border-radius: 27px;
  font-size: 14px;
  letter-spacing: 0em;
  line-height: 1.2em;
  font-weight: 500;
}

.ed-course-title {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  /* Sử dụng 4 điểm màu để tạo dải sáng quét qua */
  /* Màu 1 - Màu 2 - Màu 3 (Sáng nhất) - Màu 2 - Màu 1 */
  background: linear-gradient(90deg, #eef6ff 0%, #bad9ff 25%, #53a1ff 50%);

  /* Tăng kích thước nền lên 300% để dải sáng lướt qua mượt và rõ rệt hơn */
  background-size: 200% auto;

  /* Clip vào chữ */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  /* Chạy liên tục 6 giây, kiểu 'ease-in-out' tạo cảm giác lướt sang trọng */
  animation: shine 6s ease-in-out infinite;
}

@keyframes shine {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.ed-course-instructor {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ed-course-instructor .ed-instructor-name {
  color: #f3f1ef;
  font-size: 16px;
  letter-spacing: 0em;
  line-height: 1.5em;
  font-weight: 400;
}

.ed-instructor-thumb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.ed-course-desc p {
  color: #f3f1ef;
  font-size: 16px;
  letter-spacing: 0em;
  line-height: 1.5em;
  font-weight: 400;
}

.ed-course-target {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ed-target-label {
  display: block;
  color: #f3f1ef;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0em;
  line-height: 1.5em;
}

.ed-target-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ed-tag {
  padding: 8px 12px;
  background: linear-gradient(
    rgba(59, 130, 245, 0.4) 0%,
    rgba(7, 54, 130, 0) 100%
  );
  border: 1px solid #60a5fa;
  border-radius: 27px;
  font-size: 14px;
  letter-spacing: 0em;
  line-height: 1.2em;
  font-weight: 500;
  color: #f3f1ef;
}

.ed-unmute-overlay-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 30px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  backdrop-filter: blur(4px);
  z-index: 10;
  transition: all 0.3s ease;
}
.ed-unmute-overlay-btn:hover {
  background: rgba(13, 65, 225, 0.9);
  border-color: rgba(13, 65, 225, 1);
  transform: scale(1.05);
}

/* Actions Nút bấm */
.ed-course-actions {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ed-btn-primary {
  position: relative;
  display: inline-flex;
  gap: 10px;
  width: 70%;
  background: #0d41e1;
  color: white;
  text-decoration: none;
  height: 50px;
  padding: 15px 35px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0em;
  line-height: 1.25em;
  transition: all 0.3s;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background-color 0.4s cubic-bezier(0.44, 0, 0.56, 1);
}

.ed-btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  background-color: #ffffff;
  z-index: 0;
  color: #0d41e1;
  transition: width 0.5s cubic-bezier(0.44, 0, 0.56, 1);
  border-radius: 999px;
}

.ed-btn-primary:hover::before {
  width: 100%;
}

.ed-btn-text {
  position: relative;
  z-index: 1;
  color: white;
  transition: color 0.4s cubic-bezier(0.44, 0, 0.56, 1);
}

.ed-btn-primary:hover .ed-btn-text {
  color: #0d41e1;
}

.ed-btn-primary:hover .ed-btn-text {
  color: #0d41e1;
}

.ed-btn-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    width 0.4s cubic-bezier(0.44, 0, 0.56, 1),
    opacity 0.3s cubic-bezier(0.44, 0, 0.56, 1);
}

.ed-btn-icon svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0; /* quan trọng: không cho svg bị co lại khi width: 0 */
  color: #0d41e1;
}

.ed-btn-primary:hover .ed-btn-icon {
  width: 18px;
  opacity: 1;
}

/* Hover: icon slide vào */
.ed-btn-primary:hover .ed-btn-icon {
  transform: translateX(0);
}

/* Active */
.ed-btn-primary:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

.ed-btn-link {
  width: 30%;
  color: white;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 170%;
  border-bottom: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px;
  border-radius: 999px;
  overflow: hidden;
  box-sizing: border-box;
  background-color: transparent;
  border: 1px solid transparent;
  transition:
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 0.5s cubic-bezier(0.44, 0, 0.56, 1),
    color 0.5s cubic-bezier(0.44, 0, 0.56, 1),
    border-color 0.5s cubic-bezier(0.44, 0, 0.56, 1);
}

.ed-btn-link:hover {
  background-color: #fff;
  border: 1px solid #0d41e1;
  color: #0d41e1;
  transform: scale(1.02);
}

.ed-btn-link:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

.ic-18 {
  width: 18px;
  height: 18px;
}

/* Section Triết lý và Nền tảng */
.ed-history-section {
  position: relative;
  z-index: 2;
  padding: 60px;
  background-color: #ffffff;
  text-align: center;
}

.ed-history-section .ed-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Header Styles */
.ed-main-title {
  font-size: 60px;
  color: #122159;
  font-weight: 600;
  letter-spacing: -3px;
  line-height: 1.1em;
}

.ed-italic {
  font-style: italic;
}

.ed-blue {
  color: #0d41e1;
}

.ed-playfair-text {
  font-family: "Playfair Display", serif;
}

/* Trạng thái mặc định trước khi xuất hiện */
.ed-header .ed-main-title,
.ed-header .ed-sub-lead {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(10px);
  transition:
    opacity 1s cubic-bezier(0.175, 0.885, 0.32, 1.1),
    filter 1s ease,
    transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.1);
  will-change: opacity, filter, transform;
}

.ed-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition-delay: 0.2s;
}

.ed-sub-lead {
  font-size: 24px;
  color: #122159;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.5em;
}

.ed-sub-lead {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(10px);
  transition:
    opacity 1s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 1s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* transition-delay: 0.2s; Có delay riêng cho sub-lead */
}

.is-in-view.ed-sub-lead,
.is-in-view.ed-main-title,
.is-in-view .ed-main-title,
.is-in-view .ed-sub-lead {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Timeline Styles */
.ed-history-section .ed-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.ed-timeline .ed-year-badge {
  display: inline-block;
  width: fit-content;
  border: 1px solid #222222;
  padding: 4px 20px;
  border-radius: 70px;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0em;
  line-height: 1.5em;
  color: #000;
}

.ed-timeline .ed-timeline-title {
  width: 60%;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 1.5em;
  color: #000;
}

.ed-timeline .ed-timeline-desc {
  width: 50%;
  font-size: 16px;
  letter-spacing: 0px;
  color: #333333;
  line-height: 1.5em;
}

.ed-timeline .ed-timeline-desc strong {
  font-weight: 700;
}

/* Trạng thái chuẩn bị chung cho cụm timeline */
.ed-year-badge,
.ed-timeline-title,
.ed-timeline-desc {
  opacity: 0;
  /* Theo hình Enter Effect: Scale là 1, Offset là 0 nên ta chỉ cần Opacity */
  /* Tuy nhiên thường các hiệu ứng này sẽ đẹp hơn nếu có tí Blur nhẹ hoặc Offset Y, 
       nhưng ở đây tôi tuân thủ đúng Opacity 0 trong hình của bạn */
  transition: opacity 1s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: opacity;
}

/* Thiết lập Delay riêng biệt theo yêu cầu */
.ed-year-badge {
  transition-delay: 0.2s;
}

.ed-timeline-title {
  transition-delay: 0.4s;
}

.ed-timeline-desc {
  transition-delay: 0.5s;
}

/* Khi cuộn tới (Trigger: Section in View) */
.is-in-view .ed-year-badge,
.is-in-view .ed-timeline-title,
.is-in-view .ed-timeline-desc {
  opacity: 1;
}

/* Cards Grid */
.ed-container .ed-cards-grid {
  display: flex;
  gap: 40px;
  width: 100%;
  position: relative;
}

/* Đường line xanh nối xuống */
.ed-history-section .ed-cards-grid .ed-line {
  position: absolute;
  left: 50%;
  top: -24px;
  bottom: -24px;
  width: 1px;
  background-color: rgb(201, 201, 201);
  z-index: 1;
  /* transform: translateX(-50%); */
}

.ed-history-section .ed-cards-grid .ed-line::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* Fill từ trên xuống dựa trên biến JS */
  height: calc(var(--line-progress, 0) * 1%);
  background-color: #2b5bc7;
  /* Độ mượt 0.1s giúp cảm giác cuộn không bị khựng */
  transition: height 0.1s ease-out;
}

.ed-history-section .ed-card {
  flex: 1;
  border: 1px solid #dedede;
  border-radius: 16px;
  text-align: left;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 20px;

  opacity: 0; /* Thông số Opacity trong hình */
  transform: translateY(60px); /* Thông số Offset Y trong hình */

  /* Transition 1.5s với hiệu ứng Spring (nảy nhẹ) */
  transition:
    opacity 1.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  will-change: opacity, transform;
}

.ed-cards-grid.is-in-view .ed-card {
  opacity: 1;
  transform: translateY(0);
}

.ed-history-section .ed-card .ed-card-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ed-history-section .ed-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 12px 24px;
  background-color: #eef6ff;
  color: #000;
  border-radius: 16px 16px 0 0;
}

.ed-history-section .ed-card-top-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.ed-history-section .ed-card-logo {
  height: 56px;
  width: 56px;
  object-fit: contain;
}

.ed-history-section .ed-arrow {
  width: 33px;
  height: 33px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: inline-flex;
}

.ed-history-section .ed-arrow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition:
    transform 0.4s,
    opacity 0.4s;
}

/* Grey: vị trí gốc */
.ed-history-section .ed-arrow img:first-child {
  transform: translate(0, 0);
  opacity: 1;
}

/* Blue: ẩn ở góc dưới-trái */
.ed-history-section .ed-arrow img:last-child {
  display: block !important;
  transform: translate(-100%, 100%);
  opacity: 0;
}

/* Hover: grey bay lên trên-phải, blue vào từ dưới-trái */
.ed-arrow:hover img:first-child {
  transform: translate(100%, -100%);
  opacity: 0;
}

.ed-arrow:hover img:last-child {
  transform: translate(0, 0);
  opacity: 1;
}

.ed-history-section .ed-card-title {
  font-size: 20px;
  font-weight: 700;
  color: #000;
  letter-spacing: 0em;
  line-height: 1.2em;
}

.ed-history-section .ed-card-text {
  font-size: 16px;
  color: #333333;
  letter-spacing: 0em;
  line-height: 1.5em;
  font-weight: 400;
  padding: 12px 24px;
}

/* Stats Row */
.ed-history-section .ed-stats-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 12px 24px;
}

.ed-history-section .ed-stat-value {
  font-size: 20px;
  font-weight: 800;
  color: #333333;
  margin-bottom: 5px;
}

.ed-history-section .ed-stats-row .ed-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  gap: 5px;
}

.ed-history-section .ed-item .ed-value {
  font-size: 20px;
  font-weight: 700;
  color: #000;
  letter-spacing: 0em;
  line-height: 1.5em;
}

.ed-history-section .ed-item .ed-label {
  font-size: 14px;
  color: #333333;
  line-height: 1.5em;
  font-weight: 400;
  letter-spacing: 0em;
}

.ed-history-section .ed-contrast-section {
  text-align: center;
  background-color: #fff;
  height: 250vh;
  position: relative;
}

.ed-contrast-section .ed-container {
  width: 100%;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ed-contrast-section .ed-text-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.ed-contrast-section .ed-title {
  font-size: 24px;
  font-weight: 500;
  color: #000;
  width: 100%;
  letter-spacing: 0px;
  line-height: 1.5em;
}

.ed-contrast-section .ed-subtitle {
  width: 1000px;
  font-size: 16px;
  color: #333333;
  line-height: 1.5em;
  font-weight: 500;
  letter-spacing: 0px;
}

/* 1. Thiết lập trạng thái ban đầu và Transition CHUNG */
.ed-text-content .ed-title,
.ed-text-content .ed-subtitle {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(10px);

  /* Khai báo transition một lần duy nhất tại đây */
  transition:
    opacity 1s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 1s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);

  will-change: opacity, filter, transform;
}

/* 2. Trạng thái khi hiển thị - THIẾT LẬP DELAY TẠI ĐÂY */
.ed-text-content.is-in-view .ed-title {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  /* Title hiện sau 0.2s */
  transition-delay: 0.2s;
}

.ed-text-content.is-in-view .ed-subtitle {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  /* Subtitle hiện sau 0.4s */
  transition-delay: 0.4s;
}

.ed-contrast-section .ed-subtitle span {
  font-weight: 700;
}

.ed-contrast-section .ed-comparison-wrapper {
  position: relative;
  width: 100%;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  overflow: hidden;
}

.ed-contrast-section .ed-comparison-display {
  display: flex;
  width: 100%;
  height: 100%;
  /* overflow: hidden; */
  position: relative;
  border-radius: 24px;
  z-index: 5;
  /* TRẠNG THÁI CHUẨN BỊ (ẨN) */
  opacity: 0;

  /* TRANSITION THEO THÔNG SỐ: Time 1.5s, Delay 0.7s */
  /* cubic-bezier(0.34, 1.56, 0.64, 1) giả lập Spring mượt mà */
  transition: opacity 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: 0.7s;

  will-change: opacity;
}

/* KHI VÀO TẦM MẮT (Section in View) */
.ed-comparison-display.is-in-view {
  opacity: 1;
}

.ed-contrast-section .ed-image-wrapper {
  flex: 1;
  height: 100%;
  transition: transform 0.1s ease-out;
  will-change: transform;
}

.ed-contrast-section .ed-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* display: block; */
}

.ed-contrast-section .ed-image-wrapper.ed-left-side,
.ed-contrast-section .ed-image-wrapper.ed-left-side img {
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}

.ed-contrast-section .ed-image-wrapper.ed-right-side,
.ed-contrast-section .ed-image-wrapper.ed-right-side img {
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}

.ed-contrast-section .gap-flow-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1; /* Nằm dưới */
  opacity: 0; /* Mặc định ẩn */
  border-radius: 24px; /* Trùng với ed-comparison-display */
  will-change: opacity, transform;
}

.ed-contrast-section .ed-gap-flow-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 480px;
  height: 428px;
}

/* Tiêu đề chính xanh lam */
.ed-contrast-section .main-title .ed-gap-flow-title {
  font-size: 40px;
  font-weight: 500;
  color: #0d41e1;
  display: flex;
  align-items: center;
  letter-spacing: 0em;
  line-height: 1.2em;
}

.ed-contrast-section .main-title {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 80px;
}

.ed-contrast-section .main-title .arrow-left-container,
.ed-contrast-section .main-title .arrow-right-container {
  width: 199px;
  height: 80px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  will-change: transform, opacity;
}

.ed-contrast-section .main-title .arrow-left-container {
  left: 0;
  justify-content: flex-start;
}

.ed-contrast-section .main-title .arrow-right-container {
  right: 0;
  left: auto;
  justify-content: flex-end;
}

.ed-contrast-section .main-title .arrow-left img,
.ed-contrast-section .main-title .arrow-right img {
  width: 32px;
  height: 50px;
}

.ed-contrast-section .flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 10px;
}

.flow-step .caret-down {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flow-step .caret-down img {
  width: 24px;
  height: 24px;
}

.ed-contrast-section .content-box {
  background-color: #f6f5f3;
  color: #000;
  padding: 16px 24px;
  border-radius: 16px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0em;
  line-height: 1.2em;
  text-align: center;
}

.flow-step > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

/* Class kích hoạt khi đủ điều kiện cuộn */
.flow-step > *.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ed-timeline-milestone {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  width: 100%;
}

.ed-timeline-line {
  width: 1px;
  height: 50px;
  background: #c9c9c9;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

/* Sửa lại đoạn CSS cũ ở bước 1 */
.ed-timeline-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0d41e1;
  /* Đọc giá trị từ JS gán vào, mặc định là -100% nếu chưa có */
  transform: translateY(var(--line-fill-y, -100%));
  transition: transform 0.1s cubic-bezier(0.12, 0.23, 0.17, 1);
  will-change: transform;
}

.ed-timeline-milestone .ed-year-badge-solid {
  background: #0d41e1;
  color: #fff;
  padding: 4px 20px;
  border-radius: 70px;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0em;
  line-height: 1.5em;
}

.ed-timeline-milestone .ed-milestone-title {
  font-size: 24px;
  color: #122159;
  font-weight: 500;
  width: 60%;
  letter-spacing: 0em;
  line-height: 1.5em;
}

.ed-timeline-milestone .ed-milestone-desc {
  width: 50%;
  font-size: 16px;
  color: #122159;
  font-weight: 500;
  letter-spacing: 0em;
  line-height: 1.5em;
}

.ed-mission-section {
  background: linear-gradient(#004cff 15.3998%, #001a57 100%);
  padding: 40px;
  border-radius: 24px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 60px;
}

.ed-mission-section .ed-mission-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.ed-mission-header .ed-mission-tag {
  border: 1px solid #60a5fa;
  background: linear-gradient(#3b82f5bd 15.4051%, #0d41e1 100%);
  padding: 8px 12px;
  border-radius: 27px;
  color: #f3f1ef;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0em;
  line-height: 1.2em;
}

.ed-mission-header .ed-mission-main-title {
  font-size: 60px;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 600;
  color: #f3f1ef;
  letter-spacing: 0em;
  line-height: 1.2em;
}

.ed-mission-header .ed-mission-subtitle {
  width: 100%;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0em;
  line-height: 1.5em;
}

.ed-mission-section .ed-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  height: 277px;
  align-items: center;
  gap: 20px;
}

.ed-mission-section .ed-value-card {
  background-color: #2929291a;
  border: 1px solid #8c8c8c80;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 20px;
  border-radius: 16px;
  text-align: left;
  color: #fff;
  height: fit-content;
}

.ed-mission-section .ed-value-icon {
  width: 55px;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ed-mission-section .ed-value-content {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 10px;
}

.ed-mission-section .ed-value-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0em;
  line-height: 1.2em;
  color: #fff;
}

.ed-mission-section .ed-value-text {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0em;
  line-height: 1.5em;
  color: #fff;
  height: 96px;
}

/* 1. Thiết lập trạng thái ban đầu và Transition CHUNG */
.ed-timeline-milestone .ed-year-badge-solid,
.ed-timeline-milestone .ed-milestone-title,
.ed-timeline-milestone .ed-milestone-desc,
.ed-mission-section .ed-mission-header .ed-mission-tag,
.ed-mission-section .ed-mission-header .ed-mission-main-title,
.ed-mission-section .ed-mission-header .ed-mission-subtitle,
.ed-mission-section .ed-value-card {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(20px);

  /* Khai báo transition một lần duy nhất tại đây */
  transition:
    opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);

  will-change: opacity, filter, transform;
}

/* 2. Trạng thái khi hiển thị - THIẾT LẬP DELAY TẠI ĐÂY */
.ed-timeline-milestone.is-in-view .ed-year-badge-solid,
.ed-timeline-milestone.is-in-view .ed-milestone-title,
.ed-timeline-milestone.is-in-view .ed-milestone-desc,
.ed-mission-section.is-in-view .ed-mission-header .ed-mission-tag,
.ed-mission-section.is-in-view .ed-mission-header .ed-mission-main-title,
.ed-mission-section.is-in-view .ed-mission-header .ed-mission-subtitle,
.ed-values-grid.is-in-view .ed-value-card {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.ed-timeline-milestone.is-in-view .ed-year-badge-solid {
  transition-delay: 0.1s;
}

.ed-timeline-milestone.is-in-view .ed-milestone-title {
  transition-delay: 0.2s;
}

.ed-timeline-milestone.is-in-view .ed-milestone-desc {
  transition-delay: 0.3s;
}

.ed-mission-section.is-in-view .ed-mission-header .ed-mission-tag {
  transition-delay: 0.1s;
}

.ed-mission-section.is-in-view .ed-mission-header .ed-mission-main-title {
  transition-delay: 0.2s;
}

.ed-mission-section.is-in-view .ed-mission-header .ed-mission-subtitle {
  transition-delay: 0.3s;
}

/* Hiệu ứng Stagger cho các Card giá trị cốt lõi - Kích hoạt khi Grid vào View */
.ed-values-grid.is-in-view .ed-value-card:nth-child(1) {
  transition-delay: 0.7s;
}
.ed-values-grid.is-in-view .ed-value-card:nth-child(2) {
  transition-delay: 1s;
}
.ed-values-grid.is-in-view .ed-value-card:nth-child(3) {
  transition-delay: 1.3s;
}

/* Form register ở card Chương trình đào tạo */
.ed-registration-form-overlay {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  width: 500px;
  height: auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
}

.ed-registration-form-overlay.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Container của Form */
.ed-form-container {
  width: 100%;
  background: #fff;
  padding: 16px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ed-form-container form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ed-form-container .ed-form-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
}

.ed-form-container .ed-form-group label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #888888;
  letter-spacing: 0em;
  line-height: 1.2em;
}

.ed-form-container .ed-form-group input {
  height: 40px;
}

.ed-form-container .ed-form-group input,
.ed-form-container .ed-form-group textarea {
  width: 100%;
  padding: 12px;
  background: #f4f4f4;
  border: 1px solid rgba(136, 136, 136, 0.1);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: 0.3s;
}

.ed-form-container .ed-form-group input:focus,
.ed-form-container .ed-form-group textarea:focus {
  border: 1px solid #0099ff;
  box-shadow: none;
}

.ed-form-container .ed-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.ed-form-container .ed-form-group textarea {
  min-height: 60px;
  height: 60px;
  resize: none;
}

.ed-form-container .ed-form-footer {
  display: flex;
  justify-content: flex-end;
}

.ed-form-container .ed-submit-btn {
  background: #333;
  color: #fff;
  border: none;
  padding: 0px 12px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
  height: 36px;
}

.ed-form-container .ed-submit-btn:hover {
  background: #595959;
}

.ed-form-container .ed-form-content-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ed-form-success-block {
  padding-top: 10px;
}

.ed-form-success-block .ed-success-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ed-form-success-block .ed-success-header {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2em;
  color: #888;
  letter-spacing: 0em;
}

.ed-success-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6em;
  color: #666;
  letter-spacing: -0.02em;
}

/* Header */

.all-course .header-container {
  box-shadow: none !important;
}

.all-course .frame-8 {
  display: flex;
  width: 100%;
  height: 80px;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  padding: 4px 50px !important ;
  background-color: var(--white);
  max-width: 100% !important;
  margin: 0 auto;
  transition: transform 0.4s ease;
  transform: translateY(-100%); /* Ẩn mặc định */
}

/* Thêm class để hiển thị header trở lại */
.all-course .header-container.header-active .frame-8 {
  transform: translateY(0);
}

.all-course .header-logo-png {
  position: relative;
  width: 320px;
  height: 72px;
  background-image: url(../img/header-logo.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

.all-course .frame-11 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  position: relative;
  flex: 0 0 auto;
  background-color: #153493;
  border-radius: 50px;
  font-size: 16px;
  height: 44px;
}

.all-course .frame-11:hover {
  background-color: #15559e;
}

.all-course .text-wrapper-2 {
  color: #10437c;
}

/* Sticky Header (mặc định ẩn) */
.all-course .header-container {
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100%;

  visibility: hidden;
  opacity: 0;
  transition:
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s ease,
    visibility 0.4s;
}

.all-course .header-container.header-active {
  visibility: visible;
  opacity: 1;
}

/* Sticky bottom trial course*/
.ed-sticky-footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #0d41e1;
  padding: 8px 60px;
  z-index: 9000;
  transform: translateY(150%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ed-sticky-footer-bar.active {
  transform: translateY(0);
}

.ed-sticky-container {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 40px;
}

.ed-sticky-text {
  color: #f6f6f6;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0em;
  line-height: 1.2em;
  transition: all 0.6s cubic-bezier(0.15, 0.85, 0.25, 1);
  transform-origin: right center;
}

.ed-sticky-text strong {
  font-weight: 700;
}

.ed-sticky-container:has(.ed-btn-trial-course:hover) .ed-sticky-text {
  transform: translateX(-4px) scale(0.98);
  background-clip: text;
  -webkit-background-clip: text;
  color: #ffffff;
}

.ed-sticky-footer-bar .ed-btn-trial-course {
  width: fit-content;
  height: 48px;
  position: relative;
  padding: 14px 30px;
  background-color: transparent;
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  border-radius: 34px;
  border: 1.5px solid #ffffff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.6s cubic-bezier(0.15, 0.85, 0.25, 1);
}

.ed-sticky-footer-bar .ed-btn-text {
  position: relative;
  z-index: 1;
  transition: color 0.6s cubic-bezier(0.15, 0.85, 0.25, 1);
}

.ed-sticky-footer-bar .ed-btn-trial-course:hover .ed-btn-text {
  color: #0d41e1;
}

.ed-sticky-footer-bar .ed-icon-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 20px;
  height: 20px;
  overflow: hidden;
}

.ed-sticky-footer-bar .ed-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  transition: transform 0.6s cubic-bezier(0.15, 0.85, 0.25, 1);
}

.ed-sticky-footer-bar .ed-icon-original {
  transform: translateX(0);
  color: #ffffff;
}

.ed-sticky-footer-bar .ed-icon-blue {
  transform: translateX(-120%);
  color: #0d41e1;
}

.ed-sticky-footer-bar .ed-btn-trial-course:hover {
  border-color: #ffffff;
  background-color: #ffffff;
  transform: translateX(4px) scale(0.98);
}

.ed-sticky-footer-bar .ed-btn-trial-course:hover .ed-icon-original {
  transform: translateX(120%);
}

.ed-sticky-footer-bar .ed-btn-trial-course:hover .ed-icon-blue {
  transform: translateX(0);
}

.ed-link {
  color: #10437c;
  text-decoration: underline;
  font-weight: 600;
  transition: 0.3s;
}

.ed-link:hover {
  color: #15559e;
  opacity: 0.8;
}

/* reponsive */
@media (max-width: 600px) {
  .mobile-only-break {
    display: inline;
  }

  .site-badge {
    bottom: 16px;
    right: 16px;
  }

  .site-badge-content {
    padding: 8px 14px 8px 10px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .site-badge-title {
    font-size: 12px;
  }

  .site-badge-icon img {
    height: 24px;
  }
}

@media (max-width: 768px) {
  .ed-about-cards-row {
    flex-direction: column;
  }

  .ed-about-container {
    gap: 40px;
  }

  .ed-about-title {
    font-size: 36px;
  }

  .ed-about-title-highlight {
    font-size: 40px;
  }
}

@media (max-width: 900px) {
  .ed-contact-container {
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .ed-contact-section {
    height: auto;
    padding: 60px 20px;
  }
  .ed-form-row {
    flex-direction: column;
    gap: 0;
  }
  .ed-contact-right {
    padding: 24px;
  }
  .ed-contact-title {
    font-size: 36px;
  }
}

@media (max-width: 1024px) {
  .ed-programs-section {
    padding: 60px 20px;
  }
  .ed-programs-container {
    width: 100%;
    max-width: 100%;
  }

  .ed-program-list {
    gap: 0;
  }

  .ed-program-card {
    display: flex;
    flex-direction: column-reverse;
    height: 70vh;
    gap: 0;
  }


  .ed-program-card-image {
    width: 100%;
    max-width: 100%;
    height: 400px;
  }

  .ed-program-card-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }


  /* .ed-program-card-text {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-clamp: 5;
  } */

  .ed-program-card-content {
    flex: 1;
    height: auto;
    gap: 16px;
    padding: 24px;
    box-sizing: border-box;
  }


  .card-wrapper {
    height: 70vh;
    display: block;
    margin-bottom: 0;
  }

  /* FAQ */
  .ed-faq-section {
    padding: 60px 20px;
  }
  .ed-faq-container {
    flex-direction: column;
    gap: 40px;
  }
  .ed-faq-right {
    width: 100% !important;
  }
  .ed-faq-title {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .ed-programs-title {
    font-size: 40px;
  }
  .ed-program-card {
    flex-direction: column-reverse;
  }
  .ed-program-card-image {
    max-width: 100%;
    height: 300px;
  }
  .ed-program-card-content {
    padding: 20px;
  }

  /* FAQ */
  .ed-faq-title {
    font-size: 32px;
  }
  .ed-faq-item {
    padding: 20px;
  }
}

@media (max-width: 1024px) {
  .ed-faq-container {
    gap: 60px;
  }
}

@media (max-width: 900px) {
  .ed-faq-section {
    padding: 80px 40px;
  }
  .ed-faq-container {
    flex-direction: column;
    gap: 40px;
  }
  .ed-faq-title {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .ed-faq-section {
    padding: 60px 20px;
  }
  .ed-faq-question {
    padding: 20px;
  }
  .ed-faq-answer {
    padding: 0 20px;
  }
  .ed-faq-item.active .ed-faq-answer {
    padding: 0 20px 20px 20px;
  }
}

@media (max-width: 768px) {
  .ed-footer-container {
    flex-direction: column;
  }
  .ed-footer-links {
    margin-bottom: 20px;
  }
}

@media (max-width: 1024px) {
  .ed-stat-grid {
    flex-direction: column;
    height: auto;
    align-items: stretch;
    gap: 40px;
  }

  .ed-stat-column {
    height: auto;
  }

  .ed-stat-chart-wrap {
    height: 150px;
  }

  .ed-stat-box {
    height: 100px !important;
    width: var(--percent, 0%) !important;
    transform: scaleX(0) !important;
    transform-origin: left !important;
    align-items: center;
    padding-top: 0;
    margin-bottom: 0px;
  }

  .ed-stat-column.animate-in .ed-stat-box {
    transform: scaleX(1) !important;
  }

  .ed-stat-column .ed-stat-desc {
    min-height: fit-content;
  }

  .ed-stat-header {
    font-size: 28px;
  }
}

@media (max-width: 992px) {
  .ed-stat-header {
    font-size: 22px;
  }
}

@media (max-width: 1024px) {
  .ed-course-section {
    padding: 60px 20px;
    height: auto;
    min-height: 100dvh;
  }
  .ed-course-container {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }
  .ed-course-visual {
    flex: 1;
    width: 100%;
    margin: 0 auto;
  }
  .ed-course-image-wrapper {
    aspect-ratio: 16/9;
    height: auto;
  }
  .ed-course-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .ed-course-instructor,
  .ed-target-tags,
  .ed-course-actions {
    justify-content: center;
  }
  .ed-course-stats {
    flex-wrap: wrap;
    gap: 15px;
    border-radius: 20px;
  }
}

@media (max-width: 1024px) {
  .ed-course-container {
    text-align: left !important;
  }
  .ed-course-content .d-flex.flex-column {
    align-items: flex-start !important;
  }
  .ed-course-instructor,
  .ed-target-tags,
  .ed-course-actions {
    justify-content: flex-start !important;
  }
  .ed-course-desc {
    text-align: left !important;
  }
  .ed-course-desc p {
    text-align: left !important;
  }

  .ed-course-content {
    gap: 20px;
  }
}

@media (max-width: 991px) {
  .ed-history-section .ed-cards-grid {
    grid-template-columns: 1fr;
  }
  .ed-history-section .ed-main-title {
    font-size: 32px;
  }

  .ed-stat-section{
    position: relative;
    margin-bottom: 0px;
  }
}

@media (max-width: 1024px) {
  .ed-contrast-section .ed-text-content {
    padding: 0 20px;
    box-sizing: border-box;
  }
  .ed-contrast-section .ed-subtitle {
    width: 100%;
  }

  .ed-history-section .ed-contrast-section {
    height: 200vh;
  }
}

/* Responsive cho mobile */
@media (max-width: 768px) {
  .ed-contrast-section .ed-comparison-display {
    flex-direction: column; /* Xếp chồng lên nhau trên điện thoại */
    border-radius: 20px;
  }

  .ed-contrast-section .ed-image-wrapper {
    height: 300px;
  }

  .ed-contrast-section .ed-title {
    font-size: 20px;
  }
}

@media (max-width: 1024px) {
  .ed-mission-section .ed-values-grid {
    grid-template-columns: 1fr;
    height: auto;
  }
  .ed-mission-section .ed-value-card {
    height: auto;
  }
  .ed-mission-section .ed-value-text {
    height: auto;
  }
  .ed-mission-header .ed-mission-main-title {
    font-size: 40px;
  }
}

@media (max-width: 1024px) {
  .ed-registration-form-overlay {
    width: calc(100% - 32px);
    max-width: 500px;
    top: 50%;
    left: 50%;
    bottom: auto;
    right: auto;
    transform: translate(-50%, -30%);
  }
  .ed-registration-form-overlay.is-active {
    transform: translate(-50%, -50%);
  }
  .ed-form-container .ed-form-row {
    grid-template-columns: 1fr;
  }
  .ed-form-container .ed-form-footer {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .ed-form-container .ed-submit-btn {
    width: 100%;
  }
}

/* Mobile responsive */
@media (max-width: 768px) {
  .ed-registration-form-overlay {
    width: 100%;
    left: 0;
    bottom: 0;
    right: 0;
    top: auto;
    transform: translateY(20px);
    border-radius: 16px 16px 0 0;
  }
  .ed-registration-form-overlay.is-active {
    transform: translateY(0);
  }
}

@media (max-width: 1024px) {
  .ed-sticky-footer-bar {
    padding: 8px 30px;
  }
  .ed-sticky-container {
    justify-content: center;
    gap: 24px;
  }

  .all-course .frame-23{
    padding-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .ed-sticky-footer-bar {
    z-index: 10001;
    padding: 12px 20px;
  }
  .ed-sticky-container {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .ed-sticky-text {
    font-size: 15px;
  }
}