/* Approved homepage color rhythm. Only surfaces and colors change here. */
.svlf-home {
  --sv-section-blue: #0754c8;
  --sv-section-navy: #0b2348;
  --sv-section-ink: #10223f;
  --sv-section-copy: #475467;
  --sv-section-gold: #ffcb66;
  --sv-section-light-copy: #e7f0ff;
}

/* White reading sections separate the stronger brand surfaces. */
.svlf-home main.lrn-main-wrapper > .lrn-hero-area-2 {
  background-color: #fff;
}
.svlf-home main.lrn-main-wrapper > :is(.lrn-card-area, .svlf-testimonials, .lrn-event-head, .lrn-event-2) {
  background-color: #fff !important;
  background-image: none !important;
}
.svlf-home .lrn-card-area > .lrn-card-wrapper {
  background: transparent !important;
}

/* One decorative surface spans the weekly heading and cards without a seam. */
.svlf-home .svlf-weekly-section {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #fff;
}
.svlf-home .svlf-weekly-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: clamp(480px, 52vw, 1000px);
  pointer-events: none;
  background-image:
    url("../images/backgrounds/weekly-wave-mesh.svg"),
    radial-gradient(ellipse 160px 180px at 10% 28%, rgba(7, 84, 200, .1), transparent 75%),
    radial-gradient(ellipse 260px 180px at 50% 0%, rgba(255, 189, 122, .22), transparent 75%),
    radial-gradient(ellipse 180px 100px at 94% 40%, rgba(7, 84, 200, .14), transparent 75%);
  background-size: max(100%, 1100px) auto, 100% 100%, 100% 100%, 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;
  mask-image: linear-gradient(#000 0%, #000 60%, transparent 100%);
}
.svlf-home .svlf-weekly-section > :is(.lrn-event-head, .lrn-event-2) {
  background-color: transparent !important;
  background-image: none !important;
}

/* Blue anchors: programs near the top and achievements further down. */
.svlf-home main.lrn-main-wrapper > :is(.svlf-training-programs, .svlf-achievements) {
  --color-secondary-100: #fff;
  --color-secondary-200: #fff;
  --color-secondary-700: var(--sv-section-light-copy);
  color: var(--sv-section-light-copy);
  background-color: var(--sv-section-blue) !important;
  background-image:
    url("../images/backgrounds/section-wave-white.svg"),
    radial-gradient(ellipse at top right, rgba(99, 207, 255, .08), transparent 65%) !important;
  background-size: max(100%, 1000px) auto, 100% 100%;
  background-position: center bottom, center;
  background-repeat: no-repeat;
  border-color: transparent;
}
/* Extended wave canvas avoids clipping at the top; section edges fade gently. */
.svlf-home main.lrn-main-wrapper > .svlf-achievements {
  position: relative;
  isolation: isolate;
  background-image: radial-gradient(ellipse at top right, rgba(99, 207, 255, .08), transparent 65%) !important;
  background-size: 100% 100%;
}
.svlf-home .svlf-achievements::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: url("../images/backgrounds/achievement-wave-mesh.svg") center bottom / max(100%, 1000px) auto no-repeat;
  mask-image: linear-gradient(transparent, #000 80px, #000 calc(100% - 80px), transparent);
}

/* Robotics gradient with a bluer cyan end stop for harmony with the course art. */
.svlf-home main.lrn-main-wrapper > .svlf-training-programs {
  --sv-section-blue: #0757c8;
  background-color: #0757c8 !important;
  background-image:
    url("../images/backgrounds/program-ambient-pattern-v3.svg"),
    url("../images/backgrounds/program-soft-dots.svg"),
    linear-gradient(135deg, #0757c8 0%, #0879ee 58%, #169de2 100%) !important;
  background-size: cover, 240px 160px, 100% 100%;
  background-position: center, center, center;
  background-repeat: no-repeat, repeat, no-repeat;
}
/* A continuous surface and contained decoration keep the section boundary clean. */
.svlf-home main.lrn-main-wrapper > .svlf-featured-courses {
  overflow: hidden;
  background-color: #f5f8ff !important;
}
.svlf-home .svlf-featured-courses .lrn-card-wrapper {
  max-width: none;
  border-radius: 0;
  background-color: transparent !important;
}
.svlf-home .svlf-featured-courses .lrn-card-svg {
  top: 24px;
  width: 104px;
  opacity: .45;
  pointer-events: none;
}
.svlf-home .svlf-featured-courses .lrn-card-svg img {
  display: block;
  width: 100%;
}
.svlf-home main.lrn-main-wrapper > .svlf-training-programs .lrn-section-head :is(h2, .title),
.svlf-home main.lrn-main-wrapper > .svlf-achievements :is(h2, .lrn-cta-title) {
  color: #fff !important;
}
.svlf-home main.lrn-main-wrapper > .svlf-training-programs .lrn-section-head p,
.svlf-home main.lrn-main-wrapper > .svlf-achievements .lrn-aboutus-2-content p,
.svlf-home main.lrn-main-wrapper > .svlf-achievements .row-gap-5 p {
  color: var(--sv-section-light-copy) !important;
}
.svlf-home main.lrn-main-wrapper > :is(.svlf-training-programs, .svlf-achievements, .svlf-admission-countdown) .lrn-gradient-splite,
.svlf-home main.lrn-main-wrapper > :is(.svlf-training-programs, .svlf-achievements, .svlf-admission-countdown) .lrn-gradient-splite * {
  color: var(--sv-section-gold) !important;
  -webkit-text-fill-color: var(--sv-section-gold) !important;
  background-image: none !important;
}

/* White cards retain their own dark copy, independently of the blue section. */
.svlf-home main.lrn-main-wrapper > .svlf-training-programs .svlf-training-card,
.svlf-home main.lrn-main-wrapper > .svlf-achievements .lrn-card-3 {
  --color-secondary-100: var(--sv-section-ink);
  --color-secondary-700: var(--sv-section-copy);
  color: var(--sv-section-copy);
  background: #fff !important;
  border-color: #dce7f6 !important;
  box-shadow: 0 12px 30px rgba(7, 26, 61, .16);
}
.svlf-home main.lrn-main-wrapper > .svlf-training-programs .svlf-training-card :is(h3, h3 a) {
  color: #093fb4 !important;
  -webkit-text-fill-color: #093fb4 !important;
}
.svlf-home main.lrn-main-wrapper > .svlf-training-programs .svlf-training-card :is(p, .svlf-training-card__desc) {
  color: var(--sv-section-copy) !important;
}
.svlf-home main.lrn-main-wrapper > .svlf-training-programs .svlf-training-card:hover {
  border-color: var(--sv-section-gold) !important;
}
.svlf-home main.lrn-main-wrapper > .svlf-achievements .row-gap-5 h2,
.svlf-home main.lrn-main-wrapper > .svlf-achievements :is(.counter, .odometer) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* White sections give the page breathing room between the blue surfaces. */
.svlf-home main.lrn-main-wrapper > .svlf-learning-journey {
  background: #fff !important;
}
.svlf-home main.lrn-main-wrapper > .svlf-learning-journey .lrn-border-gradient-1 {
  background: #fff !important;
  border-color: #dce7f6;
}
.svlf-home main.lrn-main-wrapper > .lrn-blog {
  background: #fff !important;
}
.svlf-home main.lrn-main-wrapper > .lrn-blog .lrn-blog-card {
  background: #fff;
  border-color: #dce7f6;
}
.svlf-home main.lrn-main-wrapper > .svlf-teachers {
  background: #eff6ff !important;
}
.svlf-home .svlf-teachers-head {
  max-width: 760px;
  margin-inline: auto;
}
.svlf-home .svlf-teachers-head p {
  color: var(--sv-section-copy);
}
.svlf-home .svlf-teachers-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.svlf-home .svlf-teacher-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 22px;
  background: #fff;
  border: 1px solid #dce7f6;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(16, 47, 92, .06);
}
.svlf-home .svlf-teacher-photo {
  display: block;
  width: 112px;
  height: 112px;
  margin-bottom: 18px;
  border: 4px solid #edf5ff;
  border-radius: 50%;
  object-fit: cover;
}
.svlf-home .svlf-teacher-card h3 {
  color: var(--sv-section-ink);
}
.svlf-home .svlf-teacher-specialty {
  margin-top: 7px;
  color: var(--sv-section-blue);
  font-size: 15px;
  font-weight: 600;
}
.svlf-home .svlf-teacher-bio {
  margin-top: 12px;
  color: var(--sv-section-copy);
  font-size: 15px;
  line-height: 1.6;
}
@media (max-width: 1199px) {
  .svlf-home .svlf-teachers-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .svlf-home .svlf-teachers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575px) {
  .svlf-home .svlf-teachers-grid {
    grid-template-columns: 1fr;
  }
}

/* A light blue surround keeps the offer bright between white sections. */
.svlf-home main.lrn-main-wrapper > .svlf-admission-countdown {
  --color-secondary-100: #fff;
  --color-secondary-700: var(--sv-section-light-copy);
  color: var(--sv-section-light-copy);
  background: #eff6ff !important;
  background-image:
    url("../images/backgrounds/section-curve-cyan.svg"),
    url("../images/backgrounds/section-curve-gold.svg") !important;
  background-size: 220px auto, 180px auto;
  background-position: left -60px bottom, right -35px top -80px;
  background-repeat: no-repeat;
}
.svlf-home main.lrn-main-wrapper > .svlf-admission-countdown .lrn-counter-wrapper {
  background: transparent !important;
  border-color: #b9d6fc;
}
.svlf-home main.lrn-main-wrapper > .svlf-admission-countdown .lrn-section-head h2 {
  color: #fff !important;
}
.svlf-home main.lrn-main-wrapper > .svlf-admission-countdown .lrn-section-head p {
  color: var(--sv-section-light-copy) !important;
}
.svlf-home main.lrn-main-wrapper > .svlf-admission-countdown .lrn-counter-inner {
  --color-secondary-100: var(--sv-section-ink);
  --color-secondary-700: var(--sv-section-copy);
  background: #fff !important;
  border-color: #dce7f6;
}
.svlf-home main.lrn-main-wrapper > .svlf-admission-countdown .lrn-counter-inner :is(h3, span) {
  color: var(--sv-section-ink) !important;
  -webkit-text-fill-color: var(--sv-section-ink) !important;
}

/* Badges and slider controls stay light on dark surfaces. */
.svlf-home main.lrn-main-wrapper > :is(.svlf-training-programs, .svlf-achievements) .lrn-badge-gradient-1 {
  color: var(--sv-section-blue) !important;
  background: #fff !important;
  border-color: #dce7f6;
}
.svlf-home main.lrn-main-wrapper > :is(.svlf-training-programs, .svlf-achievements) .lrn-badge-gradient-1 :is(span, .lrn-gradient-100) {
  color: var(--sv-section-blue) !important;
  -webkit-text-fill-color: var(--sv-section-blue) !important;
}
.svlf-home main.lrn-main-wrapper > .svlf-achievements .rbt-swiper-arrow {
  color: var(--sv-section-blue);
  background: #fff !important;
  border-color: #dce7f6;
}
.svlf-home main.lrn-main-wrapper > .svlf-achievements .rbt-swiper-arrow:hover,
.svlf-home main.lrn-main-wrapper > .svlf-achievements .rbt-swiper-arrow:focus-visible {
  color: var(--sv-section-ink);
  background: var(--sv-section-gold) !important;
}

/* A blue closing CTA with white copy and a navy action. */
.svlf-home main.lrn-main-wrapper > .lrn-newsletter {
  --color-secondary-100: #fff;
  --color-secondary-700: var(--sv-section-light-copy);
  color: var(--sv-section-light-copy);
  background: var(--sv-section-blue) !important;
  background-image: url("../images/backgrounds/section-curve-white.svg") !important;
  background-size: 400px auto;
  background-position: right -100px bottom -130px;
  background-repeat: no-repeat;
}
.svlf-home main.lrn-main-wrapper > .lrn-newsletter .lrn-cta-wrapper {
  background: transparent !important;
}
.svlf-home main.lrn-main-wrapper > .lrn-newsletter :is(h2, .lrn-gradient-splite, .lrn-gradient-splite *) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background-image: none !important;
}
.svlf-home main.lrn-main-wrapper > .lrn-newsletter p {
  color: var(--sv-section-light-copy) !important;
  -webkit-text-fill-color: var(--sv-section-light-copy) !important;
}
.svlf-home main.lrn-main-wrapper > .lrn-newsletter .lrn-badge-gradient-1 {
  background: #fff !important;
  border-color: #dce7f6;
}
.svlf-home main.lrn-main-wrapper > .lrn-newsletter .lrn-badge-gradient-1 :is(span, .lrn-gradient-100) {
  color: var(--sv-section-blue) !important;
  -webkit-text-fill-color: var(--sv-section-blue) !important;
}
.svlf-home .svlf-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  text-align: left;
  position: relative;
  z-index: 3;
}
.svlf-home .svlf-course-icon {
  display: block;
  width: 24px;
  height: 24px;
}
.svlf-home .svlf-contact-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 8px;
  line-height: 1.5;
  font-size: 16px;
  font-weight: 700;
}
.svlf-home .svlf-contact-actions .svlf-contact-phone {
  color: #fff;
  border: 1px solid #fff;
  background: transparent;
}
.svlf-home main.lrn-main-wrapper > .lrn-newsletter .svlf-contact-zalo::before {
  display: none;
}
.svlf-home .svlf-contact-actions .svlf-contact-phone:hover {
  color: #0754c8;
  background: #fff;
}
.svlf-home .svlf-contact-actions a:focus-visible {
  outline: 3px solid #ffd64b;
  outline-offset: 4px;
}
.svlf-home #lich-khai-giang {
  scroll-margin-top: 100px;
}
.svlf-home main.lrn-main-wrapper > .lrn-newsletter .lrn-btn-primary,
.svlf-home main.lrn-main-wrapper > .lrn-newsletter .lrn-btn-primary::before {
  color: #fff !important;
  background: var(--sv-section-navy) !important;
  border-color: var(--sv-section-navy) !important;
  box-shadow: 0 10px 24px rgba(11, 35, 72, .18);
}
.svlf-home main.lrn-main-wrapper > .lrn-newsletter .lrn-btn-primary:hover,
.svlf-home main.lrn-main-wrapper > .lrn-newsletter .lrn-btn-primary:focus-visible,
.svlf-home main.lrn-main-wrapper > .lrn-newsletter .lrn-btn-primary:hover::before,
.svlf-home main.lrn-main-wrapper > .lrn-newsletter .lrn-btn-primary:focus-visible::before {
  background: #071a3d !important;
  border-color: #071a3d !important;
}

/* Navy footer completes the white/blue/navy sequence. */
.svlf-home main.lrn-main-wrapper > .lrn-footer {
  --color-secondary-100: #fff;
  --color-secondary-200: #fff;
  --color-secondary-700: #d4dfef;
  color: #d4dfef;
  background: #071a3d !important;
}
.svlf-home main.lrn-main-wrapper > .lrn-footer :is(p, li, .color-secondary-700, .lrn-footer-item a) {
  color: #d4dfef !important;
}
.svlf-home main.lrn-main-wrapper > .lrn-footer :is(.h5, .color-secondary-100) {
  color: #fff !important;
}
.svlf-home main.lrn-main-wrapper > .lrn-footer .lrn-footer-item a:hover,
.svlf-home main.lrn-main-wrapper > .lrn-footer .lrn-footer-item a:focus-visible {
  color: var(--sv-section-gold) !important;
}

/* Smaller edge decorations leave the center of mobile sections clear. */
@media (max-width: 767px) {
  .svlf-home main.lrn-main-wrapper > :is(.svlf-training-programs, .svlf-achievements) {
    background-size: 780px auto, 100% 100%;
  }
  .svlf-home main.lrn-main-wrapper > .svlf-achievements {
    background-size: 100% 100%;
  }
  .svlf-home .svlf-achievements::before {
    background-size: 780px auto;
    mask-image: linear-gradient(transparent, #000 48px, #000 calc(100% - 48px), transparent);
  }
  .svlf-home main.lrn-main-wrapper > .svlf-admission-countdown {
    background-size: 160px auto, 140px auto;
    background-position: left -40px bottom, right -50px top -40px;
  }
  .svlf-home main.lrn-main-wrapper > .lrn-newsletter {
    background-size: 240px auto;
    background-position: right -70px bottom -60px;
  }
}

@media (max-width: 575px) {
  .svlf-home .lrn-header-search-overlay .lrn-header-search-submit {
    width: 44px;
    height: 44px;
  }
}