/* Mission Section - Responsive theo format mới */
.mission {
  position: static;
  z-index: 1;
  padding: 120px 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;

  @media (max-width: 1024px) {
    padding: 100px 0;
  }

  @media (max-width: 768px) {
    padding: 120px 0 60px;
  }
}

.mission-content {
  position: relative;
  max-width: 1280px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 64px;

  @media (max-width: 768px) {
    padding: 0 24px;
  }
}

.mission-bg-shape {
  position: absolute;
  top: -120px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.mission-bg-shape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mission-form {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 80px;
  max-width: 760px;
  width: 100%;

  @media (max-width: 768px) {
    gap: 60px;
  }
}

.section-title {
  font-weight: 700;
  font-size: 172px;
  line-height: 206px;
  letter-spacing: -3.44px;
  background: radial-gradient(
    109.11% 109.11% at 50% 50%,
    #93b3e9 0%,
    #efc081 44.23%,
    #fba61c 71.63%,
    #ff6b51 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-text-stroke-color: #f2f2f2;
  text-align: left;

  @media (max-width: 1024px) {
    font-size: 140px;
    line-height: 168px;
    letter-spacing: -2.8px;
  }

  @media (max-width: 768px) {
    font-size: 86px;
    line-height: 103px;
    letter-spacing: -1.72px;
  }
}

.mission-headline {
  font-weight: 700;
  font-size: 72px;
  line-height: 86px;
  letter-spacing: -1.44px;
  width: 100%;
  color: #ffffff;
  text-align: left;
  margin-bottom: 24px;

  background: linear-gradient(87deg, rgba(255, 255, 255, 0.70) 47.33%, rgba(147, 179, 233, 0.70) 74.26%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  @media (max-width: 768px) {
    font-size: 48px;
    line-height: 58px;
    letter-spacing: -0.96px;
  }
}

.headline-frame {
  display: flex;
  flex-direction: column;
  gap: 42px;
}

.headline-frame h4 {
  font-weight: 700;
  font-size: 36px;
  line-height: 43px;
  letter-spacing: -0.72px;
  color: #ffffff;
  text-align: left;

  @media (max-width: 1024px) {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.64px;
  }

  @media (max-width: 768px) {
    font-size: 24px;
    line-height: 29px;
    letter-spacing: -0.48px;
  }
}

.headline-frame p {
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.1px;
  color: #cccccc;
  text-align: left;
  width: 100%;

  @media (max-width: 768px) {
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.08px;
  }
}