/* =========================================================
   HERO CAROUSEL
   ========================================================= */

.hero-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--navy-950);
}

/*
 * Viewport chịu trách nhiệm cắt phần slide
 * nằm ngoài màn hình.
 */
.hero-carousel__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  touch-action: pan-y;
}

/*
 * Track chứa tất cả slide trên một hàng ngang.
 * JavaScript thay đổi translateX để chuyển ảnh.
 */
.hero-carousel__track {
  display: flex;
  width: 100%;
  will-change: transform;

  transition:
    transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
}

/*
 * Dùng khi JavaScript chuyển tức thời từ ảnh clone
 * về ảnh thật để tạo vòng lặp vô hạn.
 */
.hero-carousel__track.is-resetting {
  transition: none !important;
}

/*
 * Mỗi slide luôn chiếm đúng 100% chiều rộng.
 */
.hero-carousel__slide {
  min-width: 0;
  flex: 0 0 100%;
  position: relative;
}

.hero-carousel__link {
  width: 100%;
  display: block;
  height: auto;
}

/*
 * Ảnh thiết kế hiện tại có tỷ lệ 1672 × 941.
 * Giữ height auto để không mất chữ nằm trong banner.
 */
.hero-carousel__slide img {
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 1280 / 720;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

/* =========================================================
   NÚT TRÁI / PHẢI
   ========================================================= */

.hero-carousel__arrow {
  position: absolute;
  z-index: 5;
  top: 50%;

  width: 52px;
  height: 52px;

  display: grid;
  place-items: center;

  transform: translateY(-50%);

  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;

  background: rgba(7, 27, 74, 0.58);
  color: #fff;

  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.22);

  backdrop-filter: blur(10px);

  cursor: pointer;

  opacity: 0.82;

  transition:
    opacity 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease;
}

.hero-carousel__arrow>span {
  display: block;
  margin-top: -4px;
  font-size: 42px;
  font-weight: 300;
  line-height: 1;
}

.hero-carousel__arrow:hover {
  opacity: 1;
  background: rgba(20, 143, 197, 0.9);
}

.hero-carousel__arrow:active {
  transform:
    translateY(-50%) scale(0.94);
}

.hero-carousel__arrow--previous {
  left: clamp(12px, 2.5vw, 46px);
}

.hero-carousel__arrow--next {
  right: clamp(12px, 2.5vw, 46px);
}

/* =========================================================
   THANH ĐIỀU KHIỂN DƯỚI CAROUSEL
   ========================================================= */

/* =========================================
   CỤM ĐIỀU KHIỂN NẰM TRÊN BANNER
   ========================================= */

.hero-carousel__controls {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 20;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  width: max-content;
  margin: 0;
  padding: 8px;

  transform: translateX(-50%);

  background: rgba(6, 49, 132, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;

  box-shadow: 0 8px 24px rgba(5, 35, 91, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero-carousel__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.hero-carousel__dot {
  width: 9px;
  height: 9px;
  padding: 0;

  background: rgba(255, 255, 255, 0.55);
  border: 0;
  border-radius: 50%;

  cursor: pointer;

  transition:
    width 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s ease;
}

.hero-carousel__dot:hover {
  background: rgba(255, 255, 255, 0.85);
  transform: scale(1.12);
}

.hero-carousel__dot.is-active {
  width: 25px;
  background: #ffffff;
  border-radius: 999px;
}

.hero-carousel__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;
  padding: 0;

  color: #ffffff;
  font-size: 13px;
  line-height: 1;

  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;

  cursor: pointer;

  transition:
    background-color 0.25s ease,
    transform 0.25s ease;
}

.hero-carousel__toggle:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: scale(1.06);
}

.hero-carousel__toggle:focus-visible,
.hero-carousel__dot:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.9);
  outline-offset: 3px;
}

/* =========================================================
   PROMISE STRIP — ĐIỂM KHÁC BIỆT
   ========================================================= */

.promise-strip {
  position: relative;
  z-index: 10;

  padding: 28px 0 34px;

  background: #ffffff;

  border-bottom: 1px solid #e4edf6;

  box-shadow:
    0 16px 44px rgba(18, 61, 107, 0.055);
}


/* Container riêng cho 4 card */
.promise-strip__inner {
  width: min(calc(100% - 48px),
      1500px);

  margin-inline: auto;
}


/* =========================================================
   GRID
   ========================================================= */

.promise-strip__grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 18px;
}


/* =========================================================
   CARD
   ========================================================= */

.promise-strip__item {
  position: relative;

  min-width: 0;
  min-height: 170px;

  display: grid;

  /*
     * Cố định 3 cột để cả 4 card
     * thẳng hàng tuyệt đối.
     */
  grid-template-columns:
    34px 50px minmax(0, 1fr);

  align-items: center;

  gap: 12px;

  overflow: hidden;

  padding:
    25px 18px;

  border:
    1px solid rgba(35, 135, 179, 0.20);

  border-radius: 18px;

  background:
    linear-gradient(145deg,
      #ffffff 0%,
      #ffffff 72%,
      #fbfdff 100%);

  box-shadow:
    0 10px 28px rgba(18, 61, 107, 0.055);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}


/* =========================================================
   ĐƯỜNG NHẤN TRÊN CARD
   ========================================================= */

.promise-strip__item::before {
  top: 0;
  right: 14px;
  left: 14px;

  height: 3px;

  border-radius:
    0 0 999px 999px;

  background:
    linear-gradient(90deg,
      #176b96,
      #2794bf);
}


/* =========================================================
   WATERMARK TRANG TRÍ
   ========================================================= */

.promise-strip__item::after {
  position: absolute;

  right: -44px;
  bottom: -55px;

  width: 142px;
  height: 142px;

  content: "";

  border:
    19px solid rgba(35, 135, 179, 0.065);

  border-radius: 50%;

  pointer-events: none;
}


/* =========================================================
   SỐ 01 / 02 / 03 / 04
   ========================================================= */

.promise-strip__number {
  position: relative;
  z-index: 2;

  width: 34px;

  display: block;

  color: #2387b3;

  font-size: 25px;
  font-weight: 850;

  line-height: 1;

  letter-spacing: -0.04em;
}


/* =========================================================
   ICON
   ========================================================= */

.promise-strip__icon {
  position: relative;
  z-index: 2;

  width: 50px;
  height: 50px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(35, 135, 179, 0.19);

  border-radius: 14px;

  background:
    linear-gradient(145deg,
      #f0faff,
      #e5f5fb);

  color: #2387b3;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95);

  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}


.promise-strip__icon i {
  font-size: 17px;

  line-height: 1;
}


/* =========================================================
   NỘI DUNG
   ========================================================= */

.promise-strip__content {
  position: relative;
  z-index: 2;

  min-width: 0;
}


/* Hỗ trợ cả h2 hiện tại và h3 nếu đổi semantic */
.promise-strip__content h2,
.promise-strip__content h3 {
  margin:
    0 0 7px;

  color: #123d6b;

  font-size: 19px;
  font-weight: 800;

  line-height: 1.22;

  letter-spacing: -0.02em;
}


.promise-strip__content p {
  margin: 0;

  color: #687d92;

  font-size: 14px;
  font-weight: 500;

  line-height: 1.65;
}

/* =========================================================
   FINAL POLISH - PROMISE STRIP
   ========================================================= */

.promise-strip__item {
  min-height: 172px;

  grid-template-columns:
    86px minmax(0, 1fr);

  align-items: start;

  gap: 12px;

  padding:
    27px 18px 22px;
}


/* Gom số và icon thành một điểm nhận diện thống nhất. */
.promise-strip__marker {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: 30px 48px;
  align-items: center;
  gap: 8px;

  margin-top: 1px;
}

.promise-strip__marker::after {
  position: absolute;
  top: 50%;
  left: 30px;

  width: 8px;
  height: 1px;

  content: "";

  background: rgba(35, 135, 179, 0.28);
}


/* Số thứ tự */
.promise-strip__number {
  width: 30px;

  font-size: 24px;
  font-weight: 850;

  line-height: 1;
}


/* Icon */
.promise-strip__icon {
  width: 48px;
  height: 48px;

  border-radius: 14px;
}


.promise-strip__icon i {
  font-size: 16px;
}


/* Content */
.promise-strip__content {
  padding-top: 2px;
}


/* Tiêu đề */
.promise-strip__content h2,
.promise-strip__content h3 {
  margin: 0 0 7px;

  color: #123d6b;

  font-size: 18px;
  font-weight: 800;

  line-height: 1.22;

  letter-spacing: -0.025em;

  white-space: nowrap;
}


/* Mô tả */
.promise-strip__content p {
  margin: 0;

  color: #687d92;

  font-size: 13.5px;
  font-weight: 500;

  line-height: 1.65;
}

/* =========================================================
   KHÓA HỌC NỔI BẬT — BỐ CỤC SECTION
   ========================================================= */

.featured-courses-section {
  position: relative;
  overflow: hidden;

  padding: 56px 0 96px;

  background: #f6fafc;

  border-bottom: 1px solid #e2edf4;
}

.featured-courses-section::before {
  position: absolute;
  top: -100px;
  right: -90px;

  width: 310px;
  height: 310px;

  border: 55px solid #e7f4f9;
  border-radius: 50%;

  content: "";
  pointer-events: none;
}

.featured-courses__heading {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns:
    minmax(0, 1.25fr) minmax(320px, 0.75fr);

  align-items: end;
  gap: 70px;

  margin-bottom: 44px;
}

.featured-courses__heading-main {
  max-width: 720px;
}

.featured-courses__heading h2 {
  max-width: 710px;
  margin: 12px 0 0;

  color: var(--navy-900);

  font-size: clamp(38px,
      3.3vw,
      52px);

  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.featured-courses__heading-side {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 4px;
}

.featured-courses__heading-side p {
  max-width: 520px;
  margin: 0;

  color: var(--muted);

  font-size: 15px;
  line-height: 1.75;
}

.featured-courses__all-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  color: var(--blue);

  font-size: 15px;
  font-weight: 750;

  transition:
    color 0.2s ease,
    gap 0.2s ease;
}

.featured-courses__all-link i {
  font-size: 15px;
}

.featured-courses__all-link:hover {
  gap: 14px;
  color: var(--navy-900);
}

/* =========================================================
   VÌ SAO CHỌN TIẾNG TRUNG HERO — MÀU PHẲNG
   ========================================================= */

.why-section {
  position: relative;

  overflow: hidden;

  padding: 86px 0 92px;

  background:
    linear-gradient(135deg,
      #f4fbfe 0%,
      #eef8fc 100%);

  border-top:
    1px solid #dcebf3;

  border-bottom:
    1px solid #dcebf3;
}


/* =========================================================
   GRID CHÍNH
   ========================================================= */

.why-about {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr) minmax(0, 1.1fr);

  align-items: center;

  gap: clamp(48px, 4vw, 68px);

  /*
     * Khoảng thở bên trong section
     */
  padding:
    34px 36px;
}


/* =========================================================
   ẢNH BÊN TRÁI
   ========================================================= */

.why-about__media {
  position: relative;

  width: 100%;
  min-width: 0;

  /*
     * Không làm hẹp cột.
     * Chỉ tạo khoảng trống quanh bản thân ảnh.
     */
  padding:
    10px 0 10px 10px;
}


.why-about__image-wrap {
  position: relative;

  width: 90%;

  aspect-ratio: 1.20 / 1;

  overflow: hidden;

  margin-inline: auto;

  border-radius:
    58px 24px 58px 24px;

  background: #dff3fa;

  box-shadow:
    0 20px 48px rgba(18, 61, 107, 0.13);
}


.why-about__image {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center;

  transition:
    transform 0.5s ease;
}

/* =========================================================
   NHÃN TRÊN ẢNH
   ========================================================= */

.why-about__brand {
  position: absolute;

  z-index: 3;

  top: 24px;
  left: 26px;

  padding:
    7px 12px;

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.92);

  color:
    #176b96;

  box-shadow:
    0 7px 20px rgba(18, 61, 107, 0.10);

  font-size: 10px;
  font-weight: 850;

  letter-spacing: 0.08em;
}


/* =========================================================
   PLAY
   ========================================================= */

.why-about__play {
  position: absolute;

  z-index: 4;

  top: 50%;
  left: 50%;

  width: 82px;
  height: 82px;

  display: grid;
  place-items: center;

  padding: 0;

  transform:
    translate(-50%, -50%);

  border:
    7px solid rgba(255, 255, 255, 0.24);

  border-radius: 50%;

  background:
    #2387b3;

  background-clip:
    padding-box;

  color: #fff;

  box-shadow:
    0 16px 36px rgba(18, 61, 107, 0.25);

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}


.why-about__play i {
  margin-left: 4px;

  font-size: 23px;
}


.why-about__play:hover {
  transform:
    translate(-50%, -50%) scale(1.06);

  background:
    #176b96;
}


/* =========================================================
   CONTENT
   ========================================================= */

.why-about__content {
  min-width: 0;
}


/* Eyebrow */

.why-about__eyebrow {
  position: relative;

  display: inline-block;

  padding-bottom: 9px;

  color:
    #2387b3;

  font-size: 13px;
  font-weight: 850;

  letter-spacing: 0.1em;
}


.why-about__eyebrow::after {
  position: absolute;

  bottom: 0;
  left: 0;

  width: 56px;
  height: 2px;

  content: "";

  border-radius: 999px;

  background:
    #2387b3;
}


/* =========================================================
   HEADING
   ========================================================= */

.why-about__content h2 {
  max-width: 720px;

  margin:
    22px 0 20px;

  color:
    #123d6b;

  font-size:
    clamp(38px,
      3.25vw,
      52px);

  font-weight: 850;

  line-height: 1.1;

  letter-spacing:
    -0.04em;
}


.why-about__content h2 span {
  color:
    #176b96;
}


/* =========================================================
   LEAD
   ========================================================= */

.why-about__lead {
  max-width: 720px;

  margin:
    0 0 29px;

  color:
    #62788c;

  font-size: 15px;

  line-height: 1.75;
}


/* =========================================================
   FEATURE CHECKLIST
   ========================================================= */

.why-about__features {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  column-gap: 30px;

  row-gap: 17px;
}


.why-about__feature {
  min-width: 0;

  display: grid;

  grid-template-columns:
    21px minmax(0, 1fr);

  align-items: start;

  gap: 10px;
}


.why-about__feature i {
  margin-top: 2px;

  color:
    #2387b3;

  font-size: 16px;
}


.why-about__feature span {
  color:
    #123d6b;

  font-size: 14px;

  font-weight: 750;

  line-height: 1.5;
}


/* =========================================================
   ACTION
   ========================================================= */

.why-about__actions {
  margin-top: 31px;
}


.why-about__button {
  min-height: 48px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  padding:
    0 20px;

  border:
    1px solid #2387b3;

  border-radius: 11px;

  background:
    #2387b3;

  color:
    #fff;

  box-shadow:
    0 10px 25px rgba(35, 135, 179, 0.18);

  font-size: 13px;

  font-weight: 800;
}


.why-about__button:hover {
  border-color:
    #176b96;

  background:
    #176b96;

  color: #fff;
}

/* =========================================================
   HERO SYSTEM SECTION
   "TIẾNG TRUNG HERO MANG LẠI GÌ?"
   ========================================================= */

.hero-process-section {
  position: relative;

  overflow: hidden;

  padding:
    82px 0 92px;

  background:
    linear-gradient(180deg,
      #f4fbfe 0%,
      #edf8fc 52%,
      #f5fbfd 100%);

  border-top:
    1px solid #dcebf3;

  border-bottom:
    1px solid #dcebf3;
}


/* =========================================================
   HEADING
   ========================================================= */

.hero-process__heading {
  width:
    min(100%, 920px);

  margin:
    0 auto 52px;

  text-align: center;
}


.hero-process__eyebrow {
  position: relative;

  display: inline-block;

  padding-bottom: 12px;

  color:
    #2387b3;

  font-size:
    15px;

  font-weight:
    850;

  line-height: 1;

  letter-spacing:
    0.12em;
}


.hero-process__eyebrow::after {
  position: absolute;

  bottom: 0;
  left: 50%;

  width: 155px;
  height: 2px;

  transform:
    translateX(-50%);

  content: "";

  border-radius:
    999px;

  background:
    #2387b3;
}


.hero-process__heading h2 {
  max-width:
    860px;

  margin:
    22px auto 16px;

  color:
    #123d6b;

  font-size:
    clamp(36px,
      3.6vw,
      52px);

  font-weight:
    850;

  line-height:
    1.1;

  letter-spacing:
    -0.04em;
}


.hero-process__heading h2 span {
  display: block;

  color:
    #176b96;
}


.hero-process__heading p {
  max-width:
    1280px;

  margin: 0 auto;

  color:
    #647b90;

  font-size:
    14.5px;

  line-height:
    1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.hero-process__grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 14px;

  align-items: stretch;
}


/* =========================================================
   CARD
   ========================================================= */

.hero-process-card {
  position: relative;

  min-width: 0;
  min-height: 365px;

  display: flex;
  flex-direction: column;

  overflow: visible;

  border: 1px solid rgba(35, 135, 179, 0.16);

  border-radius:
    34px 18px 24px 18px;

  background:
    rgba(255, 255, 255, 0.96);

  box-shadow:
    0 14px 34px rgba(18, 61, 107, 0.07);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}


/* Card đầu và card cuối bo khác nhẹ để gợi tinh thần CNO */
.hero-process-card:first-child {
  border-radius:
    44px 18px 34px 18px;
}

.hero-process-card:last-child {
  border-radius:
    34px 44px 18px 34px;
}


/* =========================================================
   ARROW NỐI GIỮA CÁC CARD
   ========================================================= */

/* =========================================================
   ARROW FLOW ĐẸP HƠN
   ========================================================= */

/* Đường nối */
.hero-process-card:not(:last-child)::before {
  position: absolute;

  top: 160px;
  right: -18px;

  width: 22px;
  height: 2px;

  content: "";

  z-index: 5;

  background:
    linear-gradient(90deg,
      rgba(35, 135, 179, 0.12),
      rgba(35, 135, 179, 0.9));
}


/* Badge tròn chứa mũi tên */
.hero-process-card:not(:last-child)::after {
  position: absolute;

  top: 144px;
  right: -37px;

  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  content: "→";

  z-index: 6;

  border:
    1px solid rgba(255, 255, 255, 0.75);

  border-radius: 50%;

  background:
    radial-gradient(circle at 35% 30%,
      #59c3e6 0%,
      #2a97c3 38%,
      #176b96 100%);

  color:
    #ffffff;

  box-shadow:
    0 8px 18px rgba(23, 107, 150, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);

  font-size: 15px;
  font-weight: 800;

  line-height: 1;
}


/* =========================================================
   COVER
   ========================================================= */
/* =========================================================
   PROCESS GRID
   ========================================================= */

.hero-process__grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 18px;

  align-items: stretch;
}


/* =========================================================
   CARD
   ========================================================= */

.hero-process-card {
  min-width: 0;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border:
    1px solid rgba(35, 135, 179, 0.18);

  border-radius: 22px;

  background: #ffffff;

  box-shadow:
    0 14px 34px rgba(18, 61, 107, 0.07);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}


/* =========================================================
   COVER VUÔNG
   ========================================================= */

.hero-process-card__cover {
  width: calc(100% - 24px);

  aspect-ratio: 1 / 1;

  margin:
    12px 12px 0;

  overflow: hidden;

  border-radius: 17px;

  background: #eaf6fb;
}


/* Ảnh vuông */
.hero-process-card__thumb {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;

  transition:
    transform 0.45s ease;
}


/* =========================================================
   CONTENT
   ========================================================= */

.hero-process-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;

  align-items: center;

  padding:
    16px 20px 20px;

  text-align: center;
}


/* TITLE */
.hero-process-card__content h3 {
  width: 100%;

  margin:
    0 0 8px;

  color: #0f477b;

  font-size: 18px;
  font-weight: 850;

  line-height: 1.24;

  letter-spacing: -0.025em;

  text-align: center;
}


/* DESCRIPTION */
.hero-process-card__content p {
  max-width: 96%;

  margin: 0;

  color: #667d91;

  font-size: 13.5px;
  font-weight: 500;

  line-height: 1.62;

  text-align: center;
}


/* Bỏ số/mũi tên còn sót */
.hero-process-card__number,
.hero-process-card::before,
.hero-process-card::after {
  display: none !important;
}


/* =========================================================
   HOVER
   ========================================================= */

@media (hover: hover) {

  .hero-process-card:hover {
    transform: translateY(-5px);

    border-color:
      rgba(35, 135, 179, 0.32);

    box-shadow:
      0 20px 44px rgba(18, 61, 107, 0.11);
  }


  .hero-process-card:hover .hero-process-card__thumb {
    transform: scale(1.035);
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

  .hero-process__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 1100px) {

  .program-ecosystem__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-template-rows:
      none;
  }


  .program-group-card {
    grid-row: auto;

    display: flex;
    flex-direction: column;
  }


  .program-group-card__body {
    display: block;
  }


  .program-group-card__list {
    display: grid;

    grid-template-rows: none;

    gap: 10px;
  }


  .program-group-card__list li {
    min-height: 62px;

    margin: 0;
  }


  .program-group-card__footer {
    margin-top: auto;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

  .hero-process__grid {
    grid-template-columns: 1fr;

    gap: 14px;
  }

}

/* =========================================================
   NỚI RIÊNG CONTAINER CỦA HERO PROCESS
   Không ảnh hưởng container toàn site
   ========================================================= */
.hero-process-section .container {
  width: min(calc(100% - 40px), 1540px);
}

.roadmap-section {
  padding: 78px 0 88px;
  background: #fff;
}

.roadmap {
  max-width: 1120px;
  margin-inline: auto;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.roadmap::before {
  position: absolute;
  top: 31px;
  right: 12%;
  left: 12%;
  height: 3px;
  content: "";
  background: #2b98c7;
}

.roadmap li {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 0 20px;
  text-align: center;
}

.roadmap li>span {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border: 6px solid #fff;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 1px var(--line);
  font-size: 16px;
  font-weight: 900;
}

.roadmap strong {
  margin-top: 17px;
  font-size: 16px;
  font-weight: 800;
}

.roadmap small {
  max-width: 245px;
  margin-inline: auto;
  font-size: 13px;
  line-height: 1.65;
}

.roadmap li:nth-child(even)>span {
  background: var(--indigo);
}

.roadmap li:last-child>span {
  background: #ffc400;
  color: #302700;
}

.roadmap strong {
  display: block;
  margin: 15px 0 6px;
  color: var(--navy-900);
  font-size: 15px;
}

.roadmap small {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.proof-section {
  background: #f6fafc;
  color: var(--ink);
}

.testimonial-section {
  background: var(--soft);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.testimonial-grid blockquote {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 15px 45px rgba(7, 39, 96, .07);
}

.testimonial-grid blockquote>p {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-primary);
  font-size: 18px;
  line-height: 1.75;
}

.testimonial-grid footer {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.testimonial-grid footer strong {
  color: var(--navy-900);
  font-family: var(--font-primary);
  font-size: 15px;
}

.testimonial-grid footer small {
  margin-top: 4px;
  color: var(--muted);
  font-family: var(--font-primary);
  font-size: 15px;
}

/* =========================================================
   CAMPUS SECTION
   ========================================================= */

.campus-section {
  padding: 88px 0 96px;
  background: #f7fbfd;
  border-top: 1px solid #dceaf2;
}

.campus-section__heading,
.article-section__heading {
  display: grid;
  grid-template-columns:
    minmax(0, 1.1fr) minmax(320px, 0.9fr);
  align-items: end;
  gap: 70px;
  margin-bottom: 38px;
}

.campus-section__heading h2,
.article-section__heading h2 {
  max-width: 680px;
  margin: 12px 0 0;
  color: var(--brand-navy);
  font-size: clamp(38px, 3.7vw, 52px);
  font-weight: 800;
  line-height: 1.13;
  letter-spacing: -0.035em;
}

.campus-section__intro p,
.article-section__heading>div:last-child p {
  max-width: 520px;
  margin: 0 0 17px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.75;
}

.campus-card-grid,
.campus-status-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.campus-card,
.campus-status-card {
  min-height: 270px;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid #cfe3ed;
  border-radius: 19px;
  background: #fff;
  box-shadow:
    0 16px 42px rgba(25, 76, 123, 0.07);
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

.campus-card:hover,
.campus-status-card:hover {
  transform: translateY(-5px);
  border-color: #84c5df;
  box-shadow:
    0 24px 55px rgba(25, 76, 123, 0.12);
}

.campus-card__top,
.campus-status-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.campus-card__icon,
.campus-status-card__icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #dff3fa;
  color: var(--brand-blue);
  font-size: 20px;
}

.campus-card__status,
.campus-status-card__badge {
  padding: 7px 11px;
  border: 1px solid #cfe2ed;
  border-radius: 999px;
  background: #f4fafc;
  color: #177ca7;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.campus-card h3,
.campus-status-card h3 {
  margin: 24px 0 10px;
  color: var(--brand-navy);
  font-size: 23px;
  font-weight: 800;
}

.campus-card p,
.campus-status-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.75;
}

.campus-card__link,
.campus-status-card>a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 24px;
  color: var(--brand-blue);
  font-size: 13px;
  font-weight: 750;
}

/* =========================================================
   PROOF SECTION
   ========================================================= */

.proof-section {
  padding: 92px 0;
  background: var(--brand-navy);
  color: #fff;
}

.proof-section__grid {
  display: grid;
  grid-template-columns:
    minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 72px;
}

.proof-section__content h2 {
  max-width: 600px;
  margin: 13px 0 22px;
  color: #fff;
  font-size: clamp(38px, 3.8vw, 54px);
  font-weight: 800;
  line-height: 1.13;
  letter-spacing: -0.035em;
}

.proof-section__content>p {
  max-width: 590px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.8;
}

.proof-section__button {
  margin-top: 30px;
  border-color: var(--brand-gold);
  background: var(--brand-gold);
  color: #362b00;
}

.proof-checklist {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.proof-checklist article {
  display: grid;
  grid-template-columns:
    50px minmax(0, 1fr);
  gap: 14px;
  min-height: 155px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.19);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.08);
}

.proof-checklist article>span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--brand-gold);
  color: #342900;
  font-size: 17px;
}

.proof-checklist strong {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
}

.proof-checklist p {
  margin: 7px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12.5px;
  line-height: 1.65;
}

/* =========================================================
   ARTICLE SECTION
   ========================================================= */

.article-section {
  padding: 90px 0 100px;
  background: #fff;
}

.article-card-grid {
  width: min(100%, 1120px);
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(330px, 1fr));
  gap: 24px;
  margin-inline: auto;
}

.article-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #cfe3ed;
  border-radius: 19px;
  background: #fff;
  box-shadow:
    0 17px 45px rgba(25, 76, 123, 0.08);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.article-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 26px 58px rgba(25, 76, 123, 0.13);
}

.article-card__cover {
  position: relative;

  min-height: 190px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #dff3fa;
}

.article-card:hover {
  transform: translateY(-6px);

  box-shadow:
    0 26px 58px rgba(25, 76, 123, 0.13);
}

.article-card__cover>span {
  color: var(--brand-blue);
  font-size: 72px;
  font-weight: 800;
  line-height: 1;
}

.article-card__cover small {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 7px 11px;
  border: 1px solid #c5dfeb;
  border-radius: 999px;
  background: #fff;
  color: #267ea5;
  font-size: 10px;
  font-weight: 700;
}

.article-card__body {
  padding: 25px;
}

.article-card__body time {
  color: #7990a5;
  font-size: 10.5px;
  font-weight: 600;
}

.article-card__body h3 {
  margin: 13px 0 11px;
  color: var(--brand-navy);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.45;
}

.article-card__body p {
  min-height: 48px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.7;
}

.article-card__body>a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  color: var(--brand-blue);
  font-size: 13px;
  font-weight: 750;
}

.article-empty-state {
  display: grid;
  grid-template-columns:
    60px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 28px;
  border: 1px solid #cfe3ed;
  border-radius: 17px;
  background: #f7fbfd;
}

.article-empty-state>span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #dff3fa;
  color: var(--brand-blue);
  font-size: 22px;
}

/* =========================================================
   FAQ SECTION
   ========================================================= */

.faq-section {
  padding: 88px 0 96px;
  background: #eef8fc;
  border-top: 1px solid #dceaf2;
}

.faq-section__grid {
  display: grid;
  grid-template-columns:
    minmax(0, 0.75fr) minmax(0, 1.25fr);
  align-items: start;
  gap: 75px;
}

.faq-section__intro {
  position: sticky;
  top: 115px;
}

.faq-section__icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  border-radius: 16px;
  background: var(--brand-blue);
  color: #fff;
  font-size: 23px;
}

.faq-section__intro h2 {
  max-width: 500px;
  margin: 12px 0 20px;
  color: var(--brand-navy);
  font-size: clamp(38px, 3.7vw, 51px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.035em;
}

.faq-section__intro>p {
  max-width: 480px;
  margin: 0 0 22px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.75;
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-item {
  overflow: hidden;
  border: 1px solid #cfe3ed;
  border-radius: 14px;
  background: #fff;
}

.faq-item summary {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  color: var(--brand-navy);
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary i {
  color: var(--brand-blue);
  font-size: 13px;
  transition: transform 0.2s ease;
}

.faq-item[open] summary i {
  transform: rotate(45deg);
}

.faq-item__answer {
  padding: 0 20px 20px;
  border-top: 1px solid #e5eef4;
}

.faq-item__answer p {
  margin: 17px 0 0;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.75;
}

/* =========================================================
   CONSULTATION SECTION
   ========================================================= */

.consultation-section {
  padding: 94px 0;
  background: var(--brand-navy);
  color: #fff;
}

.consultation-section__grid {
  display: grid;
  grid-template-columns:
    minmax(0, 0.82fr) minmax(520px, 1.18fr);
  align-items: start;
  gap: 75px;
}

.consultation-section__content {
  padding-top: 26px;
}

.consultation-section__content h2 {
  max-width: 560px;
  margin: 13px 0 22px;
  color: #fff;
  font-size: clamp(40px, 4vw, 55px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.038em;
}

.consultation-section__content>p {
  max-width: 560px;
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 14px;
  line-height: 1.8;
}

.consultation-benefits {
  display: grid;
  gap: 15px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.consultation-benefits li {
  display: grid;
  grid-template-columns:
    42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.consultation-benefits li>span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-gold);
  color: #352a00;
  font-size: 13px;
}

.consultation-benefits strong,
.consultation-benefits small {
  display: block;
}

.consultation-benefits strong {
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.consultation-benefits small {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  line-height: 1.55;
}

.consultation-contact-note {
  display: grid;
  grid-template-columns:
    46px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, 0.19);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
}

.consultation-contact-note>i {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.13);
  color: var(--brand-gold);
}

.consultation-contact-note small,
.consultation-contact-note strong {
  display: block;
}

.consultation-contact-note small {
  color: rgba(255, 255, 255, 0.65);
  font-size: 10.5px;
}

.consultation-contact-note strong {
  margin-top: 3px;
  color: #fff;
  font-size: 12.5px;
  line-height: 1.55;
}

.consultation-section__form {
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  color: var(--text-primary);
  box-shadow:
    0 26px 65px rgba(0, 0, 0, 0.2);
}

.consultation-section__form-heading {
  padding: 27px 30px 20px;
  border-bottom: 1px solid #dce8ef;
}

.consultation-section__form-heading>span {
  color: var(--brand-blue);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.consultation-section__form-heading h3 {
  margin: 7px 0 5px;
  color: var(--brand-navy);
  font-size: 25px;
  font-weight: 800;
}

.consultation-section__form-heading p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12.5px;
}

.consultation-section__form .lead-form {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.schedule-demo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 34px;
}

.schedule-demo-card {
  display: flex;
  flex-direction: column;
  padding: 25px;
  border: 1px solid var(--home-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--home-shadow);
}

.schedule-demo-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.schedule-demo-card__top>span {
  color: var(--home-blue);
  font-size: 15px;
  font-weight: 800;
}

.schedule-demo-card__top small {
  padding: 6px 10px;
  border-radius: 999px;
  background: #dff2f8;
  color: var(--home-blue);
  font-size: 10px;
  font-weight: 700;
}

.schedule-demo-card h3 {
  margin: 20px 0;
  font-size: 21px;
  font-weight: 800;
}

.schedule-demo-card dl {
  display: grid;
  gap: 11px;
  margin: 0 0 24px;
}

.schedule-demo-card dl>div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e3edf2;
}

.schedule-demo-card dt {
  color: #7a8da0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.schedule-demo-card dd {
  margin: 0;
  color: var(--home-navy);
  font-size: 12.5px;
  font-weight: 700;
  text-align: right;
}

.schedule-demo-card .button {
  width: 100%;
  margin-top: auto;
}

.schedule-demo-note {
  margin: 22px 0 0;
  text-align: center;
  font-size: 12px;
}

/* =========================================================
   HOME CONSULTATION CTA SECTION
   ========================================================= */

.home-consultation-cta {
  position: relative;

  width: 100%;

  overflow: hidden;

  padding:
    68px 24px 72px;

  border-top:
    1px solid #d8e9f2;

  border-bottom:
    1px solid #d8e9f2;

  background:
    #f7fbfe;

  text-align: center;
}

.home-consultation-cta::before {
  position: absolute;

  top: -180px;
  left: 50%;

  width: 620px;
  height: 320px;

  content: "";

  border-radius: 50%;

  background:
    rgba(30, 115, 190, 0.055);

  filter: blur(2px);

  transform:
    translateX(-50%);

  pointer-events: none;
}


.home-consultation-cta::after {
  position: absolute;

  bottom: -170px;
  left: 50%;

  width: 500px;
  height: 260px;

  content: "";

  border-radius: 50%;

  background:
    rgba(244, 189, 50, 0.045);

  transform:
    translateX(-50%);

  pointer-events: none;
}


.home-consultation-cta__inner {
  position: relative;

  z-index: 1;

  width: min(100%, 920px);

  margin-inline: auto;
}

.home-consultation-cta__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
}

@media (max-width: 560px) {
  .home-consultation-cta__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .home-consultation-cta__actions .button {
    width: 100%;
  }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1020px) {

  .campus-section__heading,
  .article-section__heading,
  .proof-section__grid,
  .faq-section__grid,
  .consultation-section__grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .consultation-section__grid {
    max-width: 780px;
    margin-inline: auto;
  }

  .faq-section__intro {
    position: static;
  }
}

@media (max-width: 720px) {

  .campus-section,
  .proof-section,
  .article-section,
  .faq-section,
  .consultation-section {
    padding: 62px 0 70px;
  }

  .campus-card-grid,
  .campus-status-grid,
  .proof-checklist {
    grid-template-columns: 1fr;
  }

  .article-card-grid {
    grid-template-columns: 1fr;
  }

  .article-empty-state {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .consultation-section__form-heading {
    padding-inline: 22px;
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {
  .hero-carousel__arrow {
    width: 46px;
    height: 46px;
  }

  .hero-carousel__arrow>span {
    font-size: 36px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {
  .hero-carousel__arrow {
    width: 38px;
    height: 38px;
  }

  .hero-carousel__arrow>span {
    margin-top: -3px;
    font-size: 30px;
  }

  .hero-carousel__arrow--previous {
    left: 7px;
  }

  .hero-carousel__arrow--next {
    right: 7px;
  }

  .hero-carousel__controls {
    min-height: 42px;
    padding-block: 6px;
  }

  .hero-carousel__dot {
    width: 8px;
    height: 8px;
  }

  .hero-carousel__dot.is-active {
    width: 26px;
  }

  .hero-carousel__toggle {
    width: 30px;
    height: 30px;
  }
}

/*
 * Tôn trọng thiết lập giảm chuyển động
 * của người sử dụng.
 */
@media (prefers-reduced-motion: reduce) {
  .hero-carousel__track {
    transition-duration: 0.01ms;
  }
}

@media (max-width: 1080px) {
  .promise-strip__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .promise-strip__item {
    min-height: 132px;
  }

  .promise-strip__content h2 {
    font-size: 20px;
  }

  .promise-strip__content p {
    font-size: 15px;
  }

  .why__grid {
    grid-template-columns: .7fr 1.3fr;
    gap: 40px;
  }
}

@media (max-width: 820px) {

  .why__grid {
    grid-template-columns: 1fr;
  }

  .why__visual {
    min-height: 360px;
  }

  .roadmap {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 35px;
  }

  .roadmap::before {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .hero-carousel__controls {
    bottom: 10px;
    gap: 9px;
    padding: 6px 10px;
  }

  .hero-carousel__dot {
    width: 7px;
    height: 7px;
  }

  .hero-carousel__dot.is-active {
    width: 20px;
  }

  .hero-carousel__toggle {
    width: 25px;
    height: 25px;
    font-size: 11px;
  }
}

@media (max-width: 620px) {
  .promise-strip {
    padding: 18px 0 22px;
  }

  .promise-strip__inner {
    width: calc(100% - 28px);
  }

  .promise-strip__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .promise-strip__item {
    min-height: 0;

    grid-template-columns:
      38px 48px minmax(0, 1fr);

    gap: 12px;

    padding: 19px 17px;

    border-radius: 15px;
  }

  .promise-strip__number {
    min-width: 38px;
    font-size: 23px;
  }

  .promise-strip__icon {
    width: 48px;
    height: 48px;

    flex-basis: 48px;

    border-radius: 13px;

    font-size: 18px;
  }

  .promise-strip__content h2 {
    font-size: 20px;
  }

  .promise-strip__content p {
    margin-top: 5px;
    font-size: 15px;
  }
}

@media (max-width: 560px) {

  .promise-strip__grid,
  .roadmap {
    grid-template-columns: 1fr;
  }

  .why__list {
    grid-template-columns: 1fr;
  }

  .why__visual {
    display: none;
  }

  .roadmap li {
    min-height: 160px;
  }
}

@media (max-width: 820px) {
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .testimonial-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   HOVER
   ========================================================= */

@media (hover: hover) {

  .promise-strip__item:hover {
    transform:
      translateY(-5px);

    border-color:
      rgba(35, 135, 179, 0.38);

    box-shadow:
      0 20px 46px rgba(18, 61, 107, 0.12);
  }


  .promise-strip__item:hover .promise-strip__icon {
    transform:
      translateY(-2px);

    border-color:
      #2387b3;

    background:
      #2387b3;

    color:
      #ffffff;

    box-shadow:
      0 8px 18px rgba(35, 135, 179, 0.18);
  }


  .promise-strip__item:hover .promise-strip__number {
    color:
      #176b96;
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1080px) {

  .promise-strip {
    padding:
      24px 0 28px;
  }


  .promise-strip__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 16px;
  }


  .promise-strip__item {
    min-height: 150px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

  .promise-strip {
    padding:
      18px 0 22px;
  }


  .promise-strip__inner {
    width:
      calc(100% - 28px);
  }


  .promise-strip__grid {
    grid-template-columns:
      1fr;

    gap: 12px;
  }


  .promise-strip__item {
    min-height: 0;

    grid-template-columns:
      84px minmax(0, 1fr);

    gap: 11px;

    padding:
      20px 16px;

    border-radius: 15px;
  }


  .promise-strip__number {
    width: 30px;

    font-size: 22px;
  }


  .promise-strip__marker {
    grid-template-columns: 30px 46px;
  }


  .promise-strip__icon {
    width: 46px;
    height: 46px;

    border-radius: 13px;
  }


  .promise-strip__icon i {
    font-size: 16px;
  }


  .promise-strip__content h2,
  .promise-strip__content h3 {
    margin-bottom: 5px;

    font-size: 18px;
  }


  .promise-strip__content p {
    font-size: 13.5px;

    line-height: 1.55;
  }

}

@media (max-width: 1280px) {

  .promise-strip__content h2,
  .promise-strip__content h3 {
    white-space: normal;
  }

}

@media (hover: hover) {

  .why-about__image-wrap:hover .why-about__image {
    transform: scale(1.03);
  }

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1020px) {

  .why-section {
    padding:
      68px 0 74px;
  }


  .why-about {
    grid-template-columns:
      1fr;

    gap: 46px;
  }


  .why-about__media {
    width:
      min(100%, 720px);

    margin-inline:
      auto;
  }


  .why-about__content {
    width:
      min(100%, 760px);

    margin-inline:
      auto;
  }

}


@media (max-width: 620px) {

  .why-section {
    padding:
      54px 0 60px;
  }


  .why-about {
    gap: 34px;
  }


  .why-about__image-wrap {
    border-radius:
      42px 18px 42px 18px;
  }


  .why-about__play {
    width: 68px;
    height: 68px;
  }


  .why-about__content h2 {
    font-size: 34px;
  }


  .why-about__lead {
    font-size: 14px;
  }


  .why-about__features {
    grid-template-columns:
      1fr;

    gap: 14px;
  }


  .why-about__button {
    width: 100%;
  }

}


/* =========================================================
   HOVER
   ========================================================= */

@media (hover: hover) {

  .hero-process-card:hover {
    transform: translateY(-5px);

    border-color:
      rgba(35, 135, 179, 0.30);

    box-shadow:
      0 20px 44px rgba(18, 61, 107, 0.11);
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1150px) {

  .hero-process__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 16px;
  }

  .hero-process-card:not(:last-child)::before,
  .hero-process-card:not(:last-child)::after {
    display: none;
  }

  .hero-process-card {
    min-height: 390px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .hero-process-section {
    padding:
      58px 0 64px;
  }

  .hero-process__heading {
    margin-bottom: 34px;
  }

  .hero-process__eyebrow {
    font-size: 12px;
  }

  .hero-process__heading h2 {
    font-size: 32px;
  }

  .hero-process__heading p {
    font-size: 13.5px;
    line-height: 1.65;
  }

  .hero-process__grid {
    grid-template-columns: 1fr;
  }

  .hero-process-card {
    min-height: 0;

    border-radius:
      24px 16px 20px 16px;
  }

  .hero-process-card__cover {
    height: 150px;
    padding: 14px;
  }

  .hero-process-card__cover-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
  }

  .hero-process-card__cover-icon i {
    font-size: 24px;
  }

  .hero-process-card__content {
    padding:
      8px 18px 20px;
  }

  .hero-process-card__content h3 {
    font-size: 18px;
  }

}

/* =========================================================
   HERO PROCESS CARD
   THÊM THUMBNAIL + THU GỌN KHOẢNG CÁCH
   ========================================================= */

/* Grid giữ card rộng đều */
.hero-process__grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 18px;

  align-items: stretch;
}


/* Card tổng */
.hero-process-card {
  position: relative;

  min-width: 0;
  min-height: 330px;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border:
    1px solid rgba(35, 135, 179, 0.16);

  border-radius:
    34px 18px 24px 18px;

  background:
    rgba(255, 255, 255, 0.97);

  box-shadow:
    0 14px 34px rgba(18, 61, 107, 0.07);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.hero-process-card:first-child {
  border-radius:
    42px 18px 24px 18px;
}

.hero-process-card:last-child {
  border-radius:
    24px 42px 18px 24px;
}


/* Bỏ mũi tên và số nếu còn */
.hero-process-card::before,
.hero-process-card::after,
.hero-process-card__number {
  display: none !important;
}



/* Ảnh thumbnail */
.hero-process-card__thumb {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center;
}


/* Overlay xanh nhẹ để đồng bộ màu Hero */
.hero-process-card__cover-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(135deg,
      rgba(15, 74, 127, 0.45) 0%,
      rgba(35, 135, 179, 0.30) 55%,
      rgba(70, 185, 224, 0.22) 100%);
}


/* =========================================================
   CONTENT
   KHOẢNG CÁCH GIỮA ẢNH - TITLE - TEXT THẤP HƠN
   ========================================================= */
.hero-process-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;

  align-items: center;

  padding:
    12px 20px 18px;

  text-align: center;
}


/* Title nằm chính giữa và không quá cách xa ảnh */
.hero-process-card__content h3 {
  width: 100%;

  margin:
    0 0 8px;

  color: #0f477b;

  font-size: 17px;
  font-weight: 850;

  line-height: 1.22;

  letter-spacing: -0.02em;

  text-align: center;
}


/* Mô tả sát hơn */
.hero-process-card__content p {
  max-width: 96%;

  margin: 0;

  color: #667d91;

  font-size: 13.5px;
  font-weight: 500;

  line-height: 1.62;

  text-align: center;
}


/* Hover */
@media (hover: hover) {

  .hero-process-card:hover {
    transform: translateY(-5px);

    border-color:
      rgba(35, 135, 179, 0.30);

    box-shadow:
      0 20px 44px rgba(18, 61, 107, 0.11);
  }

}


/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 1150px) {

  .hero-process__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 16px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 640px) {

  .hero-process__grid {
    grid-template-columns: 1fr;
  }

  .hero-process-card {
    min-height: 0;
  }

  .hero-process-card__cover {
    height: 150px;

    padding:
      12px 14px 8px;
  }

  .hero-process-card__content {
    padding:
      12px 18px 18px;
  }

  .hero-process-card__content h3 {
    font-size: 18px;
  }

}

/* =========================================================
   PROGRAM ECOSYSTEM
   HỆ SINH THÁI HỌC TẬP
   ========================================================= */

.program-ecosystem {
  width: 100%;
}


/* =========================================================
   HEADING
   ========================================================= */

.program-ecosystem__heading {
  width: min(100%, 850px);

  margin:
    0 auto 42px;

  text-align: center;
}


.program-ecosystem__eyebrow {
  position: relative;

  display: inline-block;

  padding-bottom: 11px;

  color: #2387b3;

  font-size: 14px;
  font-weight: 850;

  line-height: 1;

  letter-spacing: 0.13em;
}


.program-ecosystem__eyebrow::after {
  position: absolute;

  bottom: 0;
  left: 50%;

  width: 175px;
  height: 2px;

  transform: translateX(-50%);

  content: "";

  border-radius: 999px;

  background: #2387b3;
}


.program-ecosystem__heading h2 {
  margin:
    21px 0 15px;

  color: #123d6b;

  font-size:
    clamp(34px,
      3vw,
      46px);

  font-weight: 850;

  line-height: 1.1;

  letter-spacing: -0.04em;
}


.program-ecosystem__heading h2 span {
  display: block;

  color: #176b96;
}


.program-ecosystem__heading p {
  max-width: 1300px;

  margin: 0 auto;

  color: #667d91;

  font-size: 14px;
  font-weight: 500;

  line-height: 1.7;
}


/* =========================================================
   GRID
   ========================================================= */

.program-ecosystem__grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 18px;

  align-items: stretch;
}


/* =========================================================
   CARD
   ========================================================= */

.program-group-card {
  min-width: 0;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border:
    1px solid rgba(35, 135, 179, 0.18);

  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 14px 34px rgba(18, 61, 107, 0.07);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}


/* =========================================================
   CARD HEADER
   ========================================================= */

/* =========================================================
   CARD HEADER - ĐỒNG BỘ MÀU HERO
   ========================================================= */
.program-group-card__header {
  position: relative;

  overflow: hidden;

  background: #1e73be !important;
}


.program-group-card__header::after {
  position: absolute;

  top: -55px;
  right: -45px;

  width: 150px;
  height: 150px;

  content: "";

  border:
    1px solid rgba(255, 255, 255, 0.12);

  border-radius: 50%;

  pointer-events: none;
}

.program-group-card__header,
.program-group-card:nth-child(1) .program-group-card__header,
.program-group-card:nth-child(2) .program-group-card__header,
.program-group-card:nth-child(3) .program-group-card__header,
.program-group-card:nth-child(4) .program-group-card__header {
  min-height: 112px;

  display: grid;

  grid-template-columns:
    54px minmax(0, 1fr);

  align-items: center;

  gap: 14px;

  padding: 20px;

  background: #1e73be !important;

  color: #ffffff !important;
}

/* =========================================================
   HEADER ICON
   ========================================================= */

.program-group-card__icon {
  width: 52px;
  height: 52px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(255, 255, 255, 0.38);

  border-radius: 14px;

  background:
    rgba(255, 255, 255, 0.12);

  color: #ffffff !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}


.program-group-card__icon i,
.program-group-card__hanzi {
  color: #ffffff !important;
}


.program-group-card__icon i {
  font-size: 19px;
}


.program-group-card__hanzi {
  font-size: 21px;
  font-weight: 800;

  line-height: 1;
}


/* =========================================================
   CARD HEADING
   ========================================================= */

.program-group-card__heading {
  min-width: 0;
}


.program-group-card__label {
  display: block;

  margin-bottom: 5px;

  color:
    rgba(255, 255, 255, 0.72);

  font-size: 9px;
  font-weight: 750;

  line-height: 1.2;

  letter-spacing: 0.08em;
}


.program-group-card__header h3 {
  margin: 0;

  color: #ffffff;

  font-size: 17px;
  font-weight: 800;

  line-height: 1.25;
}


/* =========================================================
   BODY
   ========================================================= */

.program-group-card__body {
  flex: 1;

  padding:
    13px 13px 6px;

  background: #f5f8fa;
}


/* =========================================================
   LIST
   ========================================================= */

.program-group-card__list {
  display: grid;

  gap: 9px;

  margin: 0;

  padding: 0;

  list-style: none;
}


.program-group-card__list li {
  min-height: 50px;

  display: grid;

  grid-template-columns:
    24px minmax(0, 1fr);

  align-items: center;

  gap: 9px;

  padding:
    9px 11px;

  border:
    1px solid #edf2f5;

  border-radius: 11px;

  background: #ffffff;

  color: #617588;

  font-size: 12.5px;
  font-weight: 500;

  line-height: 1.42;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}


/* Check */

.program-group-card__check {
  width: 20px;
  height: 20px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #2387b3;

  color: #ffffff;

  font-size: 9px;
}


/* =========================================================
   CARD FOOTER
   ========================================================= */

.program-group-card__footer {
  padding:
    7px 13px 13px;

  background: #f5f8fa;
}


.program-group-card__footer a {
  min-height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  border:
    1px solid #2387b3;

  border-radius: 999px;

  background: #ffffff;

  color: #2387b3;

  font-size: 12.5px;
  font-weight: 600;

  text-decoration: none;

  transition:
    gap 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}


.program-group-card__footer a:hover {
  gap: 12px;

  background: #2387b3;

  color: #ffffff;

  box-shadow:
    0 8px 18px rgba(35, 135, 179, 0.16);
}


/* =========================================================
   CARD HOVER
   ========================================================= */

@media (hover: hover) {

  .program-group-card:hover {
    transform: translateY(-5px);

    border-color:
      rgba(35, 135, 179, 0.32);

    box-shadow:
      0 21px 46px rgba(18, 61, 107, 0.11);
  }


  .program-group-card:hover .program-group-card__list li {
    border-color:
      rgba(35, 135, 179, 0.13);
  }

}


/* =========================================================
   CTA - XEM TẤT CẢ KHÓA HỌC
   ========================================================= */

.program-ecosystem__all {
  display: flex;
  justify-content: center;

  margin-top: 34px;
}


/* Button */
.program-ecosystem__all a {
  min-height: 50px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  padding:
    0 20px 0 24px;

  border:
    1px solid #1e73be;

  border-radius: 12px;

  background: #1e73be;

  color: #ffffff;

  box-shadow:
    0 10px 24px rgba(30, 115, 190, 0.16);

  font-size: 13.5px;
  font-weight: 650;

  line-height: 1;

  text-decoration: none;

  transition:
    transform 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}


/* Text */
.program-ecosystem__all a span {
  color: inherit;

  font-weight: inherit;
}


/* =========================================================
   ICON TRÒN BÊN PHẢI
   ========================================================= */

.program-ecosystem__all a i {
  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  flex: 0 0 28px;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.16);

  color: #ffffff;

  font-size: 10px;

  transition:
    transform 0.22s ease,
    background-color 0.22s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

@media (hover: hover) {

  .program-ecosystem__all a:hover {
    transform:
      translateY(-2px);

    border-color:
      #155f9d;

    background:
      #155f9d;

    color:
      #ffffff;

    box-shadow:
      0 15px 30px rgba(30, 115, 190, 0.22);
  }


  .program-ecosystem__all a:hover i {
    transform:
      translateX(3px);

    background:
      rgba(255, 255, 255, 0.24);
  }

}


/* =========================================================
   ACTIVE
   ========================================================= */

.program-ecosystem__all a:active {
  transform:
    translateY(0);

  box-shadow:
    0 7px 16px rgba(30, 115, 190, 0.14);
}


/* =========================================================
   KEYBOARD FOCUS
   ========================================================= */

.program-ecosystem__all a:focus-visible {
  outline:
    3px solid rgba(30, 115, 190, 0.20);

  outline-offset:
    3px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

  .program-ecosystem__all {
    margin-top:
      26px;
  }


  .program-ecosystem__all a {
    width: 100%;
    max-width: 320px;

    min-height: 48px;

    padding:
      0 18px 0 22px;
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

  .program-ecosystem__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

  .program-ecosystem__heading {
    margin-bottom: 30px;
  }


  .program-ecosystem__heading h2 {
    font-size: 31px;
  }


  .program-ecosystem__grid {
    grid-template-columns: 1fr;

    gap: 14px;
  }

}

/* =========================================================
   PROGRAM ECOSYSTEM
   KHÓA CHIỀU RỘNG ĐỒNG BỘ VỚI CÁC SECTION KHÁC
   ========================================================= */

.program-ecosystem {
  width: 100%;
}


/*
 * Không cho 4 card kéo tràn toàn màn hình.
 * 1380px khá hợp với layout desktop hiện tại của Hero.
 */
.program-ecosystem__inner {
  width: min(calc(100% - 48px),
      1380px);

  margin-inline: auto;
}


/* Heading vẫn hẹp hơn grid để dễ đọc */
.program-ecosystem__heading {
  width: min(100%, 850px);

  margin:
    0 auto 42px;

  text-align: center;
}


/* 4 card */
.program-ecosystem__grid {
  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 18px;

  align-items: stretch;
}

/* =========================================================
   PROGRAM ECOSYSTEM - SPACING FINAL
   Tạo khoảng thở với đường phân cách section trên/dưới
   ========================================================= */

.program-ecosystem {
  width: 100%;

  /*
     * Khoảng cách với gạch phía trên và phía dưới.
     */
  padding:
    58px 0 48px;
}

/* =========================================================
   PROGRAM ECOSYSTEM
   AUTO HEIGHT + ALIGN ROW ACROSS ALL CARDS
   ========================================================= */

.program-ecosystem__grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  grid-auto-rows: 1fr;

  column-gap: 20px;

  align-items: stretch;
}


/* =========================================================
   CARD
   Ba vùng rõ ràng giúp body của mọi card bắt đầu cùng cao độ.
   ========================================================= */

.program-group-card {
  display: grid;

  grid-template-rows:
    112px minmax(0, 1fr) auto;

  min-width: 0;

  overflow: hidden;

  border:
    1px solid rgba(35, 135, 179, 0.18);

  border-radius: 18px;

  background: #f5f8fa;

  box-shadow:
    0 14px 34px rgba(18, 61, 107, 0.07);
}

/* =========================================================
   BODY + LIST
   ========================================================= */

.program-group-card__body {
  min-width: 0;
  min-height: 0;

  padding:
    0 13px;

  background: #f5f8fa;
}


.program-group-card__list {
  width: 100%;
  min-width: 0;

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  list-style: none;
}

.program-group-card__list li {
  min-width: 0;

  /*
     * Ít nhất 62px.
     * Nếu 3 dòng thì tự cao thêm.
     */
  min-height: 62px;

  display: grid;

  grid-template-columns:
    22px minmax(0, 1fr);

  align-items: center;

  gap: 10px;

  margin:
    5px 0;

  padding:
    10px 12px;

  box-sizing: border-box;

  border:
    1px solid #e3ebf1;

  border-radius: 11px;

  background: #ffffff;

  color: #5f7487;

  font-size: 14px;

  /*
     * Chữ bình thường
     */
  font-weight: 400;

  line-height: 1.45;
}

.program-group-card__list li>span:last-child {
  min-width: 0;

  display: block;

  overflow: visible;

  color: #5f7487;

  font-size: 14px;

  font-weight: 400 !important;

  line-height: 1.45;

  white-space: normal;

  overflow-wrap: break-word;
}

/* =========================================================
   CHỮ HEADER CARD
   ========================================================= */

.program-group-card__header,
.program-group-card__header *,
.program-group-card__heading,
.program-group-card__heading * {
  color: #ffffff !important;
}

.program-group-card__label {
  display: block;

  margin-bottom: 6px;

  color:
    rgba(255, 255, 255, 0.82) !important;

  font-size: 10px;

  font-weight: 800;

  line-height: 1.2;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.program-group-card__header h3 {
  margin: 0;

  color: #ffffff !important;

  font-size: 17px;

  font-weight: 800;

  line-height: 1.25;
}

/* =========================================================
   PROGRAM ECOSYSTEM
   CĂN ĐỀU CÁC Ô NỘI DUNG TRONG CARD
   ========================================================= */

/* Phần body của 4 card phải đồng nhất */
.program-group-card__body {
  flex: 1;

  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 0;

  padding:
    14px 13px 8px;

  background: #f5f8fa;
}


/* =========================================================
   4 HÀNG CỦA MỖI CARD
   Cố định chiều cao để tất cả thẳng hàng
   ========================================================= */

.program-group-card__list {
  width: 100%;
  min-width: 0;

  flex: 1;

  display: grid;

  grid-template-rows:
    repeat(4, minmax(0, 1fr));

  gap: 10px;

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  list-style: none;
}


/* =========================================================
   TỪNG Ô
   ========================================================= */

.program-group-card__list li {
  width: 100%;
  min-width: 0;

  display: grid;

  grid-template-columns:
    22px minmax(0, 1fr);

  align-items: center;

  gap: 10px;

  padding:
    10px 12px;

  margin: 0;

  border:
    1px solid #e5edf3;

  border-radius: 11px;

  background: #ffffff;

  color: #5f7487;

  /*
     * CHỮ BÌNH THƯỜNG
     */
  font-size: 14px;
  font-weight: 400;

  line-height: 1.45;

  box-sizing: border-box;
}


/* Nội dung thực tế trong mỗi item là thẻ p. */
.program-group-card__list li p {
  min-width: 0;

  margin: 0;

  color: inherit;

  font: inherit;
  line-height: inherit;

  white-space: normal;
  overflow-wrap: anywhere;
}


/* =========================================================
   CHỮ TRONG Ô
   Ép bỏ bold từ CSS cũ
   ========================================================= */

.program-group-card__list li>span:last-child {
  min-width: 0;

  color: #5f7487;

  font-weight: 400 !important;

  line-height: 1.45;
}


/* Nếu bên trong còn strong/b do dữ liệu cũ */
.program-group-card__list li strong,
.program-group-card__list li b {
  font-weight: 400 !important;
}


/* =========================================================
   ICON CHECK
   ========================================================= */

.program-group-card__check {
  width: 20px;
  height: 20px;

  display: grid;
  place-items: center;

  flex: 0 0 20px;

  border-radius: 50%;

  background: #2387b3;

  color: #ffffff;

  font-size: 9px;

  line-height: 1;
}


.program-group-card__check i {
  color: #ffffff;

  font-size: 9px;
}


/* =========================================================
   FOOTER
   Giữ CTA của tất cả card nằm cùng một hàng
   ========================================================= */

.program-group-card__footer {
  margin-top: auto;

  padding:
    10px 13px 13px;

  background: #f5f8fa;
}


/* Khi card xếp dọc, mỗi card trở về chiều cao nội dung tự nhiên. */
@media (max-width: 620px) {
  .program-ecosystem__grid {
    grid-auto-rows: auto;
  }

  .program-group-card {
    grid-template-rows:
      112px auto auto;
  }

  .program-group-card__list {
    flex: none;

    grid-template-rows: none;
    grid-auto-rows: minmax(62px, auto);
  }
}

/* =========================================================
   SCHEDULE PREVIEW
   ========================================================= */

.schedule-preview {
  position: relative;

  padding:
    62px 0 68px;

  background: #ffffff;

  border-top:
    1px solid #dcebf3;

  border-bottom:
    1px solid #dcebf3;
}


/* =========================================================
   HEADING TRONG SCHEDULE
   ========================================================= */

.schedule-preview .home-section-heading {
  margin-bottom:
    36px;
}


/* =========================================================
   LIST
   ========================================================= */

.schedule-list {
  width:
    min(100%, 1240px);

  display: grid;

  gap: 13px;

  margin-inline:
    auto;
}


/* =========================================================
   MỖI HÀNG LỊCH
   ========================================================= */

.schedule-row {
  min-width: 0;

  display: grid;

  grid-template-columns:
    92px minmax(240px, 1.45fr) minmax(180px, 0.85fr) minmax(160px, 0.75fr) 170px;

  align-items: center;

  gap: 18px;

  padding:
    15px 17px;

  border:
    1px solid #dbe8f0;

  border-radius:
    16px;

  background:
    #ffffff;

  box-shadow:
    0 10px 28px rgba(18, 61, 107, 0.055);

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}


@media (hover: hover) {

  .schedule-row:hover {
    transform:
      translateY(-3px);

    border-color:
      rgba(30, 115, 190, 0.30);

    box-shadow:
      0 16px 36px rgba(18, 61, 107, 0.09);
  }

}


/* =========================================================
   DATE
   ========================================================= */

.schedule-row__date {
  min-height: 82px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  border:
    1px solid rgba(30, 115, 190, 0.12);

  border-radius:
    13px;

  background:
    #eef8fc;

  color:
    #1e73be;
}


.schedule-row__day {
  display: block;

  font-size:
    29px;

  font-weight:
    850;

  line-height:
    1;
}


.schedule-row__month {
  display: block;

  margin-top:
    6px;

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.075em;
}


/* =========================================================
   COURSE
   ========================================================= */

.schedule-row__course {
  min-width: 0;
}


.schedule-row__category {
  display: block;

  margin-bottom:
    5px;

  color:
    #2387b3;

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.schedule-row__course h3 {
  margin:
    0 0 6px;

  color:
    #123d6b;

  font-size:
    17px;

  font-weight:
    800;

  line-height:
    1.28;
}


.schedule-row__opening {
  display: block;

  color:
    #728598;

  font-size:
    11.5px;

  font-weight:
    400;

  line-height:
    1.4;
}


/* =========================================================
   META
   ========================================================= */

.schedule-row__schedule,
.schedule-row__campus {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap:
    7px;
}


.schedule-row__meta-label {
  color:
    #8a9aaa;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.schedule-row__schedule strong,
.schedule-row__schedule>span:not(.schedule-row__meta-label),
.schedule-row__campus strong {
  display:
    inline-flex;

  align-items:
    flex-start;

  gap:
    7px;

  color:
    #5f7487;

  font-size:
    12.5px;

  font-weight:
    400;

  line-height:
    1.5;
}


.schedule-row__schedule i,
.schedule-row__campus i {
  flex:
    0 0 auto;

  margin-top:
    2px;

  color:
    #2387b3;
}


/* =========================================================
   ACTION
   ========================================================= */

.schedule-row__action {
  display: flex;

  flex-direction: column;

  align-items: stretch;

  gap:
    10px;
}


/* Status */
.schedule-row__status {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  color:
    #39815d;

  font-size:
    10.5px;

  font-weight:
    650;
}


.schedule-row__status i {
  color:
    #43a66d;

  font-size:
    7px;
}


/* Button */
.schedule-row__button {
  min-height:
    40px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  padding-inline:
    13px;

  border:
    1px solid #1e73be;

  border-radius:
    10px;

  background:
    #1e73be;

  color:
    #ffffff;

  font-size:
    11.5px;

  font-weight:
    700;

  text-decoration:
    none;

  white-space:
    nowrap;

  transition:
    gap 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}


.schedule-row__button:hover {
  gap:
    11px;

  border-color:
    #17639f;

  background:
    #17639f;

  color:
    #ffffff;
}


/* =========================================================
   NOTICE
   ========================================================= */

.schedule-preview__notice {
  width:
    min(100%, 980px);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  margin:
    28px auto 0;

  padding:
    12px 16px;

  border:
    1px solid #dceaf2;

  border-radius:
    11px;

  background:
    #f6fafc;

  color:
    #687e91;
}


.schedule-preview__notice-icon {
  flex:
    0 0 auto;

  color:
    #2387b3;

  font-size:
    14px;
}


.schedule-preview__notice p {
  margin: 0;

  color:
    #687e91;

  font-size:
    12.5px;

  font-weight:
    400;

  line-height:
    1.5;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

  .schedule-row {
    grid-template-columns:
      84px minmax(0, 1fr) minmax(160px, 0.75fr) 155px;
  }


  .schedule-row__campus {
    display:
      none;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

  .schedule-preview {
    padding:
      52px 0 58px;
  }


  .schedule-row {
    grid-template-columns:
      72px minmax(0, 1fr);

    gap:
      12px 14px;

    padding:
      13px;
  }


  .schedule-row__date {
    grid-row:
      1 / span 2;

    min-height:
      76px;
  }


  .schedule-row__schedule {
    grid-column:
      2;
  }


  .schedule-row__campus {
    grid-column:
      2;

    display:
      flex;
  }


  .schedule-row__action {
    grid-column:
      1 / -1;

    flex-direction:
      row;

    align-items:
      center;

    justify-content:
      space-between;

    padding-top:
      11px;

    border-top:
      1px solid #e7eef3;
  }


  .schedule-row__button {
    min-height:
      38px;
  }


  .schedule-preview__notice {
    align-items:
      flex-start;

    width:
      100%;
  }

}

/* =========================================================
   TEACHER HOME
========================================================= */

.teacher-home {
  width: 100%;

  /*
     * Không để heading sát gạch trên
     * và CTA sát gạch dưới.
     */
  padding:
    54px 0 58px;
}


/* =========================================================
   HEADING
========================================================= */

.teacher-home__heading {
  width: min(100%, 900px);

  margin:
    0 auto 30px;

  text-align: center;
}


.teacher-home__eyebrow {
  display: block;

  color: #1e73be;

  font-size: 14px;
  font-weight: 800;

  line-height: 1.2;

  letter-spacing: 0.16em;
}


/* gạch xanh ngắn giống ảnh mẫu */
.teacher-home__line {
  width: 72px;
  height: 2px;

  display: block;

  margin:
    10px auto 22px;

  border-radius: 999px;

  background: #1e73be;
}


.teacher-home__heading h2 {
  margin:
    0 0 14px;

  color: #123d6b;

  font-size:
    clamp(30px,
      2.6vw,
      40px);

  font-weight: 850;

  line-height: 1.15;

  letter-spacing: -0.035em;
}


.teacher-home__heading p {
  width: min(100%, 820px);

  margin-inline: auto;

  color: #61798c;

  font-size: 14px;
  font-weight: 400;

  line-height: 1.7;
}

/* =========================================================
   TEACHER STANDARDS
========================================================= */

.teacher-home__standards {
  width: min(calc(100% - 40px), 1240px);

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 0;

  overflow: hidden;

  margin:
    0 auto 30px;

  border:
    1px solid #dce9f1;

  border-radius: 15px;

  background: #f7fbfd;
}


.teacher-standard {
  min-width: 0;

  display: grid;

  grid-template-columns:
    42px minmax(0, 1fr);

  align-items: center;

  gap: 12px;

  padding:
    14px 18px;

  /*
     * Bỏ card riêng của từng item
     */
  border: 0;

  border-radius: 0;

  background: transparent;
}


/* đường chia giữa */
.teacher-standard+.teacher-standard {
  border-left:
    1px solid #dce9f1;
}


.teacher-standard__icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  background: #eaf6fc;

  color: #1e73be;

  font-size: 14px;
}


.teacher-standard__content {
  min-width: 0;
}


.teacher-standard__content strong {
  display: block;

  margin-bottom: 3px;

  color: #123d6b;

  font-size: 12.5px;
  font-weight: 700;

  line-height: 1.3;
}


.teacher-standard__content span {
  display: block;

  color: #718598;

  font-size: 11px;
  font-weight: 400;

  line-height: 1.45;
}

/* =========================================================
   TEACHER GRID
========================================================= */

.teacher-home__grid {
  width: min(calc(100% - 40px), 1240px);

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 24px;

  margin-inline: auto;
}


/* =========================================================
   CARD
========================================================= */

.teacher-home-card {
  position: relative;
  min-width: 0;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border:
    1px solid rgba(30, 115, 190, 0.17);

  /*
     * Không còn hình hộp vuông thông thường.
     */
  border-radius:
    28px 14px 28px 14px;

  background: #ffffff;

  box-shadow:
    0 16px 38px rgba(18, 61, 107, 0.075);

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.teacher-home-card:nth-child(2) {
  border-radius:
    14px 28px 14px 28px;
}

.teacher-home-card:nth-child(3) {
  border-radius:
    28px 14px 28px 14px;
}

/* =========================================================
   TEACHER PHOTO
========================================================= */

.teacher-home-card__media {
  position: relative;

  aspect-ratio: 4 / 4.15;

  overflow: hidden;

  background: #eef7fb;
}


.teacher-home-card__media img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center top;

  transition:
    transform .45s ease;
}


/* badge */
.teacher-home-card__badge {
  position: absolute;

  top: 14px;
  left: 14px;

  min-height: 27px;

  display: inline-flex;

  align-items: center;

  padding:
    0 10px;

  border:
    1px solid rgba(255, 255, 255, .75);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, .92);

  color: #1e73be;

  box-shadow:
    0 7px 17px rgba(18, 61, 107, .10);

  font-size: 9px;
  font-weight: 800;

  line-height: 1;

  letter-spacing: .07em;
}

/* =========================================================
   CARD BODY
========================================================= */

.teacher-home-card__body {
  flex: 1;

  display: flex;
  flex-direction: column;

  padding:
    17px 18px 18px;
}


/* NAME */

.teacher-home-card__heading {
  padding-bottom: 13px;

  border-bottom:
    1px solid #e7eef3;
}


.teacher-home-card__heading h3 {
  margin:
    0 0 5px;

  color: #123d6b;

  font-size: 18px;

  font-weight: 800;

  line-height: 1.25;
}


.teacher-home-card__role {
  display: block;

  color: #1e73be;

  font-size: 11.5px;

  font-weight: 600;

  line-height: 1.4;
}

/* =========================================================
   TEACHER META
========================================================= */

.teacher-home-card__meta {
  display: flex;

  align-items: center;

  gap: 8px;

  margin-top: 14px;
}


.teacher-home-card__meta span {
  min-height: 36px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 7px;

  padding:
    0 11px;

  border:
    1px solid #dfeaf1;

  border-radius: 9px;

  background: #f5fafc;

  color: #607789;

  font-size: 10.5px;

  font-weight: 500;

  line-height: 1;

  white-space: nowrap;
}


/*
 * HSK6 ngắn nên không cần chiếm nhiều diện tích.
 */
.teacher-home-card__meta span:first-child {
  flex: 0 0 auto;
}


/*
 * Kinh nghiệm lấy phần không gian còn lại.
 */
.teacher-home-card__meta span:last-child {
  flex: 1 1 auto;
}


.teacher-home-card__meta i {
  flex: 0 0 auto;

  color: #1e73be;

  font-size: 10px;
}

/* =========================================================
   DESCRIPTION
========================================================= */

.teacher-home-card__description {
  flex: 1;

  margin:
    13px 0 15px;

  color: #687f91;

  font-size: 11.5px;

  font-weight: 400;

  line-height: 1.6;
}

/* =========================================================
   XEM HỒ SƠ - OUTLINE CTA
========================================================= */

.teacher-home-card__link {
  width: 100%;
  min-height: 42px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 9px;

  margin-top: auto;

  padding:
    0 14px;

  border:
    1px solid #1e73be;

  border-radius: 999px;

  background: #ffffff;

  color: #1e73be;

  font-size: 11.5px;
  font-weight: 600;

  line-height: 1;

  text-decoration: none;

  transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}


/* Không cần vòng tròn riêng quanh arrow nữa */
.teacher-home-card__arrow {
  width: auto;
  height: auto;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  border-radius: 0;

  background: transparent;

  color: inherit;

  font-size: 10px;

  transition:
    transform .2s ease;
}

@media (hover: hover) {

  .teacher-home-card:hover {
    transform: translateY(-6px);

    border-color:
      rgba(30, 115, 190, .30);

    box-shadow:
      0 23px 50px rgba(18, 61, 107, .12);
  }


  .teacher-home-card:hover .teacher-home-card__media img {
    transform:
      scale(1.035);
  }


  .teacher-home-card__link:hover {
    transform: translateY(-2px);

    border-color: #1e73be;

    background: #1e73be;

    color: #ffffff;

    box-shadow:
      0 8px 18px rgba(30, 115, 190, 0.15);
  }


  .teacher-home-card__link:hover .teacher-home-card__arrow {
    transform: translateX(3px);
  }

}

/* =========================================================
   VIEW ALL
========================================================= */

.teacher-home__all {
  display: flex;

  justify-content: center;

  margin-top: 28px;
}


.teacher-home__all a {
  min-height: 48px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  padding:
    0 21px;

  border:
    1px solid #1e73be;

  border-radius: 12px;

  background: #1e73be;

  color: #ffffff;

  box-shadow:
    0 10px 24px rgba(30, 115, 190, .15);

  font-size: 12.5px;

  font-weight: 650;

  text-decoration: none;

  transition:
    transform .2s ease,
    background-color .2s ease,
    box-shadow .2s ease;
}


.teacher-home__all a:hover {
  transform: translateY(-2px);

  background: #17639f;

  color: #ffffff;

  box-shadow:
    0 15px 30px rgba(30, 115, 190, .20);
}

@media (max-width: 960px) {

  .teacher-home__standards {
    grid-template-columns: 1fr;
  }


  .teacher-home__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 640px) {

  .teacher-home__heading h2 {
    font-size: 30px;
  }


  .teacher-home__grid {
    grid-template-columns: 1fr;
  }


  .teacher-home-card__media {
    aspect-ratio: 4 / 4.25;
  }


  .teacher-home__all a {
    width: 100%;

    max-width: 320px;
  }

}

/* =========================================================
   NEWS HOME
========================================================= */

.news-home {
  width: 100%;

  /*
     * Không chạm gạch section trên/dưới
     */
  padding:
    56px 0 60px;
}


/* =========================================================
   HEADING
========================================================= */

.news-home__heading {
  width: min(100%, 920px);

  margin:
    0 auto 34px;

  text-align: center;
}


.news-home__eyebrow {
  display: block;

  color: #1e73be;

  font-size: 14px;
  font-weight: 800;

  line-height: 1.2;

  letter-spacing: 0.16em;
}


.news-home__line {
  width: 72px;
  height: 2px;

  display: block;

  margin:
    10px auto 22px;

  border-radius: 999px;

  background: #1e73be;
}


.news-home__heading h2 {
  margin:
    0 0 14px;

  color: #123d6b;

  font-size:
    clamp(30px,
      2.6vw,
      40px);

  font-weight: 850;

  line-height: 1.16;

  letter-spacing: -0.035em;
}


.news-home__heading p {
  width: min(100%, 760px);

  margin: 0 auto;

  color: #61798c;

  font-size: 14px;

  font-weight: 400;

  line-height: 1.7;
}

/* =========================================================
   NEWS EDITORIAL LAYOUT
========================================================= */

.news-home__layout {
  width: min(calc(100% - 48px), 1240px);

  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr) minmax(0, 0.85fr);

  gap: 22px;

  margin-inline: auto;

  align-items: stretch;
}

/* =========================================================
   FEATURED NEWS
========================================================= */

.news-featured {
  min-width: 0;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border:
    1px solid #dce8ef;

  border-radius:
    26px 14px 26px 14px;

  background: #ffffff;

  box-shadow:
    0 16px 38px rgba(18, 61, 107, 0.075);
}


/* IMAGE */
.news-featured__media {
  position: relative;

  display: block;

  aspect-ratio: 16 / 8.5;

  overflow: hidden;

  background: #eef6fa;
}


.news-featured__media img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform .45s ease;
}


/* BADGE */
.news-featured__badge {
  position: absolute;

  top: 16px;
  left: 16px;

  min-height: 28px;

  display: inline-flex;
  align-items: center;

  padding:
    0 11px;

  border-radius: 999px;

  background: #1e73be;

  color: #ffffff;

  font-size: 9px;

  font-weight: 800;

  line-height: 1;

  letter-spacing: .08em;
}

.news-featured__content {
  flex: 1;

  display: flex;

  flex-direction: column;

  padding:
    21px 23px 22px;
}


/* =========================================================
   COMMON META
========================================================= */

.news-meta {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 10px;
}


.news-meta__category {
  color: #1e73be;

  font-size: 10px;

  font-weight: 800;

  line-height: 1.2;

  letter-spacing: .07em;
}


.news-meta time {
  display: inline-flex;

  align-items: center;

  gap: 5px;

  color: #8798a6;

  font-size: 10px;

  font-weight: 400;
}


/* TITLE */
.news-featured__content h3 {
  margin:
    0 0 10px;

  font-size: 21px;

  font-weight: 800;

  line-height: 1.32;
}


.news-featured__content h3 a {
  color: #123d6b;

  text-decoration: none;
}


/* DESCRIPTION */
.news-featured__content>p {
  margin:
    0 0 18px;

  color: #687f91;

  font-size: 12.5px;

  font-weight: 400;

  line-height: 1.68;
}

.news-featured__action {
  width: fit-content;

  display: inline-flex;

  align-items: center;

  gap: 9px;

  margin-top: auto;

  color: #1e73be;

  font-size: 11.5px;

  font-weight: 650;

  text-decoration: none;
}


.news-featured__action i {
  transition:
    transform .2s ease;
}


.news-featured__action:hover i {
  transform: translateX(4px);
}

/* =========================================================
   SIDE NEWS
========================================================= */

.news-home__side {
  display: grid;

  grid-template-rows:
    repeat(2, minmax(0, 1fr));

  gap: 18px;
}


.news-side-card {
  min-width: 0;

  display: grid;

  grid-template-columns:
    42% minmax(0, 1fr);

  overflow: hidden;

  border:
    1px solid #dce8ef;

  border-radius:
    16px;

  background: #ffffff;

  box-shadow:
    0 12px 30px rgba(18, 61, 107, 0.055);

  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}


/* IMAGE */
.news-side-card__media {
  min-width: 0;

  display: block;

  overflow: hidden;

  background: #edf6fa;
}


.news-side-card__media img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform .4s ease;
}


/* CONTENT */
.news-side-card__content {
  min-width: 0;

  display: flex;

  flex-direction: column;

  padding:
    16px 17px;
}

.news-side-card__content .news-meta {
  margin-bottom: 7px;
}


.news-side-card__content h3 {
  margin:
    0 0 8px;

  font-size: 15px;

  font-weight: 800;

  line-height: 1.38;
}


.news-side-card__content h3 a {
  color: #123d6b;

  text-decoration: none;
}


.news-side-card__content>p {
  display: -webkit-box;

  overflow: hidden;

  margin:
    0 0 12px;

  color: #6b8092;

  font-size: 11px;

  font-weight: 400;

  line-height: 1.55;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.news-side-card__action {
  width: fit-content;

  display: inline-flex;

  align-items: center;

  gap: 7px;

  margin-top: auto;

  color: #1e73be;

  font-size: 10.5px;

  font-weight: 650;

  text-decoration: none;
}


.news-side-card__action i {
  font-size: 9px;

  transition:
    transform .2s ease;
}


.news-side-card__action:hover i {
  transform: translateX(3px);
}

@media (hover: hover) {

  .news-featured:hover .news-featured__media img {
    transform:
      scale(1.035);
  }


  .news-side-card:hover {
    transform:
      translateY(-4px);

    border-color:
      rgba(30, 115, 190, .28);

    box-shadow:
      0 18px 38px rgba(18, 61, 107, .10);
  }


  .news-side-card:hover .news-side-card__media img {
    transform:
      scale(1.045);
  }

}

/* =========================================================
   VIEW ALL
========================================================= */

.news-home__all {
  display: flex;

  justify-content: center;

  margin-top: 30px;
}


.news-home__all a {
  min-height: 48px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  padding:
    0 21px;

  border:
    1px solid #1e73be;

  border-radius: 12px;

  background: #1e73be;

  color: #ffffff;

  box-shadow:
    0 10px 24px rgba(30, 115, 190, .15);

  font-size: 12.5px;

  font-weight: 650;

  text-decoration: none;

  transition:
    transform .2s ease,
    background-color .2s ease,
    box-shadow .2s ease;
}


.news-home__all a:hover {
  transform:
    translateY(-2px);

  background: #17639f;

  color: #ffffff;

  box-shadow:
    0 15px 30px rgba(30, 115, 190, .20);
}

@media (max-width: 960px) {

  .news-home__layout {
    grid-template-columns: 1fr;
  }


  .news-home__side {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-template-rows: auto;
  }


  .news-side-card {
    grid-template-columns: 1fr;
  }


  .news-side-card__media {
    aspect-ratio: 16 / 9;
  }

}


@media (max-width: 640px) {

  .news-home {
    padding:
      44px 0 48px;
  }


  .news-home__layout {
    width:
      calc(100% - 28px);
  }


  .news-home__side {
    grid-template-columns: 1fr;
  }


  .news-featured__media {
    aspect-ratio: 16 / 10;
  }


  .news-home__all a {
    width: 100%;

    max-width: 330px;
  }

}

/* =========================================================
   FINAL CONSULTATION CTA
   ========================================================= */

.home-consultation-cta {
  position: relative;

  width: 100%;

  padding:
    64px 24px 68px;

  border-top:
    1px solid #dce9f1;

  border-bottom:
    1px solid #dce9f1;

  background: #ffffff;
}


.home-consultation-cta__inner {
  width:
    min(100%, 920px);

  margin-inline:
    auto;

  text-align:
    center;
}


/* =========================================================
   HEADING
   ========================================================= */

.home-consultation-cta__heading {
  width:
    min(100%, 820px);

  margin-inline:
    auto;
}


.home-consultation-cta__eyebrow {
  display: block;

  color: #1e73be;

  font-size: 14px;
  font-weight: 800;

  line-height: 1.2;

  letter-spacing: 0.18em;
}


.home-consultation-cta__line {
  width: 72px;
  height: 2px;

  display: block;

  margin:
    11px auto 23px;

  border-radius: 999px;

  background: #1e73be;
}


.home-consultation-cta__heading h2 {
  margin:
    0 0 16px;

  color: #123d6b;

  font-size:
    clamp(32px, 2.7vw, 42px);

  font-weight: 850;

  line-height: 1.14;

  letter-spacing: -0.04em;
}


.home-consultation-cta__heading p {
  width: min(100%, 720px);

  margin: 0 auto;

  color: #60798c;

  font-size: 14px;
  font-weight: 400;

  line-height: 1.75;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.home-consultation-cta__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    12px;

  margin-top:
    30px;
}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.home-consultation-cta__primary {
  min-height: 52px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 12px;

  padding:
    0 17px 0 24px;

  border:
    1px solid #f4bd32;

  border-radius: 12px;

  background:
    #f4bd32;

  color:
    #173d53;

  box-shadow:
    0 12px 26px rgba(201, 151, 24, 0.18);

  font-size:
    13px;

  font-weight:
    750;

  line-height:
    1;

  text-decoration:
    none;

  transition:
    transform .2s ease,
    background-color .2s ease,
    box-shadow .2s ease;
}


/* icon tròn */
.home-consultation-cta__primary-icon {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.32);

  color:
    #173d53;

  font-size:
    11px;

  transition:
    transform .22s ease,
    background-color .22s ease;
}


/* =========================================================
   SECONDARY BUTTON
   ========================================================= */

.home-consultation-cta__secondary {
  min-height: 52px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 9px;

  padding:
    0 22px;

  border:
    1px solid #b7d6e8;

  border-radius: 12px;

  background:
    rgba(255, 255, 255, .82);

  color:
    #123d6b;

  font-size: 13px;

  font-weight: 650;

  line-height: 1;

  text-decoration: none;

  transition:
    transform .2s ease,
    border-color .2s ease,
    background-color .2s ease,
    color .2s ease;
}


.home-consultation-cta__secondary i {
  color:
    #1e73be;

  font-size:
    10px;

  transition:
    transform .2s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

@media (hover: hover) {

  .home-consultation-cta__primary:hover {
    transform:
      translateY(-3px);

    background:
      #f2b91f;

    color:
      #173d53;

    box-shadow:
      0 17px 32px rgba(201, 151, 24, 0.24);
  }


  .home-consultation-cta__primary:hover .home-consultation-cta__primary-icon {
    transform:
      translate(2px, -2px);

    background:
      rgba(255, 255, 255, .48);
  }

  .home-consultation-cta__secondary:hover {
    transform:
      translateY(-2px);

    border-color:
      #1e73be;

    background:
      #eef7fd;

    color:
      #1e73be;
  }


  .home-consultation-cta__secondary:hover i {
    transform:
      translateX(3px);
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  /* Partial hiện dùng chính phần inner làm section ngoài cùng. */
  .home-consultation-cta__inner {
    width: 100%;
    padding:
      48px 18px 52px;

    border-top:
      1px solid #dce9f1;

    border-bottom:
      1px solid #dce9f1;

    background: #ffffff;
  }


  .home-consultation-cta__eyebrow {
    font-size:
      12px;

    letter-spacing:
      0.12em;
  }


  .home-consultation-cta__heading h2 {
    font-size:
      clamp(26px, 7.6vw, 30px);

    line-height:
      1.18;
  }


  .home-consultation-cta__heading p {
    font-size:
      14px;

    line-height:
      1.65;
  }


  .home-consultation-cta__actions {
    width:
      100%;

    gap:
      10px;

    margin-top:
      24px;

    flex-direction:
      column;
  }


  .home-consultation-cta__primary,
  .home-consultation-cta__secondary {
    width:
      100%;

    max-width:
      340px;
  }

  .home-consultation-cta__primary {
    padding:
      0 14px 0 20px;
  }

}

/* =========================================================
   MOBILE HOME AUDIT
   Quy tắc cuối cùng cho toàn bộ các section đang hiển thị.
   Đặt cuối file để không bị các block desktop khai báo sau ghi đè.
   ========================================================= */

@media (max-width: 640px) {
  #site-root.home-page .site-header {
    border-bottom-color: rgba(255, 255, 255, 0.18);
    background: #2387b3;
    box-shadow: 0 6px 20px rgba(18, 61, 107, 0.16);
  }

  #site-root.home-page .site-header .brand__content strong {
    color: var(--brand-navy);
  }

  #site-root.home-page .site-header.is-scrolled .brand__content strong {
    color: #ffffff;
  }

  #site-root.home-page .site-header .brand__content small {
    color: rgba(255, 255, 255, 0.82);
  }

  #site-root.home-page .site-header .menu-toggle {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.12);
  }

  #site-root.home-page .site-header .menu-toggle>span:not(.sr-only) {
    background: #ffffff;
  }

  .home-page__content {
    width: 100%;
    overflow: clip;
  }

  /* Giới thiệu */
  .why-about {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding: 34px 20px 50px;
  }

  .why-about__media,
  .why-about__content {
    width: 100%;
    min-width: 0;
    padding-inline: 0;
  }

  .why-about__image-wrap {
    width: 100%;
    max-width: 440px;
  }

  .why-about__content h2 {
    margin: 18px 0 16px;
    font-size: clamp(29px, 8.6vw, 34px);
    line-height: 1.14;
  }

  .why-about__lead {
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.68;
  }

  .why-about__actions {
    margin-top: 26px;
  }

  /* Quy trình */
  .hero-process-section {
    padding: 52px 0 58px;
  }

  .hero-process-section .container {
    width: min(calc(100% - 32px), 1540px);
  }

  .hero-process__heading {
    margin-bottom: 30px;
  }

  .hero-process__eyebrow {
    font-size: 11px;
    line-height: 1.35;
  }

  .hero-process__heading h2 {
    margin-top: 18px;
    font-size: clamp(28px, 8.4vw, 32px);
    line-height: 1.16;
  }

  .hero-process__heading p {
    font-size: 14px;
    line-height: 1.65;
  }

  .hero-process__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .hero-process-card {
    width: 100%;
    min-height: 0;
  }

  /* Hệ sinh thái khóa học */
  .program-ecosystem {
    padding: 52px 0 54px;
  }

  .program-ecosystem__inner {
    width: min(calc(100% - 32px), 1380px);
  }

  .program-ecosystem__heading {
    margin-bottom: 30px;
  }

  .program-ecosystem__eyebrow {
    max-width: 290px;
    font-size: 12px;
    line-height: 1.35;
  }

  .program-ecosystem__eyebrow::after {
    width: 120px;
  }

  .program-ecosystem__heading h2 {
    font-size: clamp(28px, 8.5vw, 32px);
    line-height: 1.16;
  }

  .program-ecosystem__heading p {
    font-size: 14px;
    line-height: 1.65;
  }

  .program-ecosystem__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 16px;
  }

  .program-group-card {
    width: 100%;
    grid-template-rows: auto auto auto;
  }

  .program-group-card__header,
  .program-group-card:nth-child(1) .program-group-card__header,
  .program-group-card:nth-child(2) .program-group-card__header,
  .program-group-card:nth-child(3) .program-group-card__header,
  .program-group-card:nth-child(4) .program-group-card__header {
    min-height: 100px;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
  }

  .program-group-card__icon {
    width: 50px;
    height: 50px;
  }

  .program-group-card__body {
    padding: 14px 13px 8px;
  }

  .program-group-card__list {
    display: grid;
    grid-template-rows: none;
    grid-auto-rows: minmax(58px, auto);
    gap: 9px;
  }

  .program-group-card__list li {
    min-height: 58px;
    padding: 9px 12px;
  }

  /* Giáo viên */
  .teacher-home {
    padding: 52px 0 54px;
  }

  .teacher-home__heading {
    padding-inline: 20px;
  }

  .teacher-home__heading h2 {
    font-size: clamp(28px, 8.3vw, 31px);
    line-height: 1.18;
  }

  .teacher-home__heading p {
    font-size: 14px;
    line-height: 1.65;
  }

  .teacher-home__standards,
  .teacher-home__grid {
    width: min(calc(100% - 32px), 1240px);
  }

  .teacher-standard+.teacher-standard {
    border-top: 1px solid #dce9f1;
    border-left: 0;
  }

  .teacher-home__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .teacher-home-card__media {
    aspect-ratio: 4 / 4;
  }

  .teacher-home-card__meta {
    flex-wrap: wrap;
  }

  /* Tin tức */
  .news-home {
    padding: 52px 0 56px;
  }

  .news-home__heading {
    padding-inline: 20px;
  }

  .news-home__heading h2 {
    font-size: clamp(28px, 8.3vw, 31px);
    line-height: 1.18;
  }

  .news-home__heading p {
    font-size: 14px;
    line-height: 1.65;
  }

  .news-home__layout {
    width: calc(100% - 32px);
  }

  .news-home__side {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 360px) {

  .why-about,
  .teacher-home__heading,
  .news-home__heading {
    padding-inline: 16px;
  }

  .hero-process-section .container,
  .program-ecosystem__inner,
  .teacher-home__standards,
  .teacher-home__grid,
  .news-home__layout {
    width: calc(100% - 24px);
  }

  .program-group-card__header,
  .program-group-card:nth-child(1) .program-group-card__header,
  .program-group-card:nth-child(2) .program-group-card__header,
  .program-group-card:nth-child(3) .program-group-card__header,
  .program-group-card:nth-child(4) .program-group-card__header {
    padding: 16px;
  }
}

/* =========================================================
   FINAL CTA - NỀN XANH NHẠT GIỐNG FOOTER CŨ
   ========================================================= */

.home-consultation-cta__inner {
  position: relative;
  z-index: 0;

  padding-top: 48px;
  padding-bottom: 52px;

  background: transparent;
}

.home-consultation-cta__inner::before {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;

  width: 100vw;

  content: "";
  transform: translateX(-50%);

  border-top: 1px solid #d4e5ee;
  border-bottom: 1px solid #d4e5ee;
  background: #f1f8fc;
}

/* =========================================================
   FINAL CTA - DESKTOP COLOR + SPACING
   Chỉ áp dụng desktop/tablet lớn.
   Mobile hiện tại giữ nguyên.
========================================================= */

@media (min-width: 721px) {

  .home-consultation-cta {
    position: relative;

    width: 100%;

    /*
         * Tăng khoảng thở trên dưới.
         * Hiện tại đang hơi sát đường phân cách section.
         */
    padding:
      82px 24px 86px;

    /*
         * Màu giống footer sáng hiện tại.
         */
    background:
      #eef8fc;

    /*
         * Giữ đường phân cách nhưng nhẹ hơn.
         */
    border-top:
      1px solid #d5e6ef;

    border-bottom:
      1px solid #d5e6ef;
  }


  .home-consultation-cta__inner {
    width:
      min(100%, 920px);

    margin-inline:
      auto;

    text-align:
      center;
  }


  .home-consultation-cta__heading {
    width:
      min(100%, 820px);

    margin-inline:
      auto;
  }


  .home-consultation-cta__actions {
    margin-top:
      32px;
  }

}
.home-cms-highlight {
  color: var(--brand-blue);
}