/* ================================================
   HOME — Hero
   ================================================ */
.hero {
  position: relative;
  height: 40.5729vw;
  overflow: hidden;
  background: #0a1628;
}

.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.hero-inner { position: relative; z-index: 3; height: 100%; }

.hero-text {
  padding-top: 3.9583vw;
  max-width: 38.5417vw;
  position: relative;
  z-index: 2;
}

.hero-title {
  font-size: 4.1667vw;
  font-weight: 900;
  color: var(--color-white);
  line-height: 5.2083vw;
  letter-spacing: 0.0833vw;
}

.hero-subtitle {
  margin-top: 1.5625vw;
  font-size: 1.0417vw;
  font-weight: 500;
  color: var(--color-text-hero-sub);
  line-height: 2.0833vw;
  letter-spacing: 1px;
  max-width: 29.1146vw;
}

.hero-buttons { margin-top: 2.1875vw; display: flex; gap: 1.0417vw; }

.hero-video {
  position: absolute;
  right: 0;
  top: 5.7813vw;
  width: 37.5vw;
  height: 29.0625vw;
  background: rgba(0, 0, 0, 0.42);
  border-radius: 0.7813vw;
  z-index: 5;
  padding: 1.5625vw 1.7708vw;
  display: flex;
  flex-direction: column;
}

.hero-video-title {
  font-size: 1.6667vw;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0.1667vw;
  line-height: 2.0833vw;
  margin-bottom: 0.7813vw;
}

.video-thumbnail { position: relative; flex: 1; border-radius: 0.4167vw; overflow: hidden; }
.video-thumbnail img { width: 100%; height: 100%; object-fit: cover; }

.play-btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 4.1667vw; height: 4.1667vw;
  background: rgba(255,255,255,0.25); border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.3s; border: 0.1042vw solid rgba(255,255,255,0.5);
}
.play-btn:hover { background: rgba(255,255,255,0.4); }
.play-btn::after {
  content: ''; width: 0; height: 0;
  border-left: 1.1458vw solid white; border-top: 0.7292vw solid transparent;
  border-bottom: 0.7292vw solid transparent; margin-left: 0.2604vw;
}

.hero-video-desc {
  margin-top: 0.7292vw; font-size: 0.9375vw; font-weight: 500;
  color: var(--color-white); letter-spacing: 0.9px; line-height: 1.7188vw;
}

/* ================================================
   HOME — Learning Path
   ================================================ */
.path { background: var(--color-bg-path); padding: 3.75vw 0 4.1667vw; }
.path-cards { display: flex; gap: 1.7188vw; margin-top: 1.0417vw; }
.path-card { position: relative; flex: 1; }

.step-badge {
  position: absolute; top: -1.1458vw; left: -0.9896vw;
  width: 4.1667vw; height: 4.1667vw;
  background: var(--color-bg-badge); border-radius: 1.1458vw;
  box-shadow: 0 0.2083vw 0.2083vw rgba(0,0,0,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6667vw; font-weight: 700; letter-spacing: 0.1667vw; z-index: 2;
}

.path-card-body {
  background: var(--color-white); border-radius: 0.9375vw;
  padding: 2.9688vw 2.0833vw 1.5625vw; min-height: 26.6146vw;
  display: flex; flex-direction: column;
}

.path-card-icon { text-align: center; margin-bottom: 1.0417vw; }
.path-card-icon img { width: 5.1042vw; height: auto; margin: 0 auto; }

.path-card-title {
  text-align: center; font-size: 1.6667vw; font-weight: 700;
  letter-spacing: 0.1667vw; line-height: 2.7604vw; margin-bottom: 0.8333vw;
}

.path-card-list { list-style: disc; padding-left: 1.5625vw; margin-bottom: auto; }
.path-card-list li { font-size: 1.0417vw; font-weight: 500; color: var(--color-text-body); line-height: 2.0833vw; letter-spacing: 1px; }

.path-card-link {
  display: block; text-align: center; font-size: 1.0417vw; font-weight: 700;
  color: var(--color-accent); letter-spacing: 0.1042vw; line-height: 2.7604vw;
  margin-top: 0.8333vw; transition: opacity 0.3s;
}
.path-card-link:hover { opacity: 0.8; }

/* ================================================
   HOME — Courses
   ================================================ */
.courses { background: var(--color-white); padding: 5.8854vw 0 5.2083vw; }
.courses-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2.6042vw; }
.courses-header .section-header { margin-bottom: 0; }

.courses-tabs {
  display: flex; align-items: center; background: var(--color-bg-badge);
  border-radius: 0.9375vw; height: 4.3229vw; padding: 0 0.9375vw; gap: 3.125vw; flex-shrink: 0;
}

.tab {
  font-size: 1.0417vw; font-weight: 500; color: var(--color-text-body);
  background: none; border: none; cursor: pointer;
  padding: 0.4167vw 0.8333vw; border-radius: 0.6771vw; transition: all 0.3s; white-space: nowrap;
}
.tab.active { background: var(--color-accent); color: var(--color-white); padding: 0.7292vw 1.5625vw; }

.courses-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4063vw; }

.course-card {
  background: var(--color-white); border-radius: 0.9375vw; overflow: hidden;
  box-shadow: 0 0.1042vw 0.625vw rgba(0,0,0,0.06); transition: box-shadow 0.3s, transform 0.3s;
}
.course-card:hover { box-shadow: 0 0.4167vw 1.5625vw rgba(0,0,0,0.12); transform: translateY(-0.2083vw); }

.course-card-img { height: 13.75vw; overflow: hidden; }
.course-card-img img { width: 100%; height: 100%; object-fit: cover; }
.course-card-body { padding: 1.25vw 1.4583vw 1.0417vw; }

.course-card-title { font-size: 1.25vw; font-weight: 700; letter-spacing: 0.125vw; line-height: 1.7708vw; margin-bottom: 0.7292vw; min-height: 3.5417vw; }
.course-card-desc { font-size: 0.8333vw; font-weight: 500; color: var(--color-text-body); letter-spacing: 0.8px; line-height: 1.7188vw; margin-bottom: 0.5208vw; }
.course-card-meta { display: flex; align-items: center; gap: 1.0417vw; font-size: 0.8333vw; font-weight: 500; color: var(--color-text-muted); line-height: 2.0833vw; }

/* ================================================
   HOME — Teachers
   ================================================ */
.teachers { position: relative; padding: 4.9479vw 0 4.1667vw; overflow: hidden; }
.teachers-bg { position: absolute; inset: 0; z-index: 0; }
.teachers-bg img { width: 100%; height: 100%; object-fit: cover; }
.teachers > .container { position: relative; z-index: 1; }

.teachers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.0833vw; margin-top: 3.6458vw; }
.teacher-card { text-align: center; }
.teacher-photo { width: 11.1458vw; height: 11.1458vw; border-radius: 50%; object-fit: cover; margin: 0 auto 1.0417vw; }
.teacher-name { font-size: 1.875vw; font-weight: 700; letter-spacing: 0.36px; line-height: 2.2396vw; margin-bottom: 0.1042vw; }
.teacher-name--en { font-size: 1.6667vw; }
.teacher-title { font-size: 1.25vw; font-weight: 500; color: var(--color-accent); letter-spacing: 0.24px; line-height: 2.2396vw; margin-bottom: 0.7292vw; }
.teacher-desc { font-size: 1.0417vw; font-weight: 500; color: var(--color-text-body); letter-spacing: 0.2px; line-height: 1.8229vw; max-width: 12.5521vw; margin: 0 auto; }

/* ================================================
   HOME — BG Wrapper / Advantages / Authority / Testimonials
   ================================================ */
.bg-wrapper { background: var(--color-bg-advantages); }

.advantages { padding: 3.9063vw 0 0; }
.advantages-grid { display: flex; gap: 0.9896vw; margin-top: 2.6042vw; }
.advantage-card {
  flex: 1; min-width: 0; background: linear-gradient(to bottom, var(--color-accent), var(--color-advantage-end));
  border-radius: 1.5104vw; padding: 3.6458vw 1.7188vw 0; height: 34.5313vw;
  display: flex; flex-direction: column; overflow: hidden; position: relative;
}
.advantage-text { position: relative; z-index: 2; }
.advantage-text h3 { font-size: 1.6667vw; font-weight: 700; color: var(--color-white); letter-spacing: 0.1667vw; line-height: 2.0833vw; margin-bottom: 2.3438vw; }
.advantage-text p { font-size: 0.9375vw; font-weight: 500; color: var(--color-white); letter-spacing: 0.9px; line-height: 1.7188vw; }
.advantage-img { flex: 1; position: relative; margin-top: 1.0417vw; display: flex; align-items: flex-end; justify-content: center; }
.advantage-img img { width: 140%; max-width: none; height: auto; object-fit: contain; margin-bottom: -0.5208vw; }

.authority { padding: 5.2083vw 0 0; }
.authority-subtitle { font-family: var(--font-display); font-size: 1.25vw; font-weight: 400; color: var(--color-text-muted); letter-spacing: 1.625vw; line-height: 1.7188vw; text-align: center; margin-top: 1.0417vw; padding-left: 1.625vw; }
.authority-bar { margin-top: 2.0833vw; background: var(--color-white); border-radius: 1.9271vw; height: 6.7188vw; display: flex; align-items: center; justify-content: space-around; padding: 0 3.125vw; }
.authority-logo { display: flex; flex-direction: column; align-items: center; gap: 0.3125vw; }
.authority-logo img { max-height: 4.2708vw; max-width: 12.5521vw; object-fit: contain; }
.authority-logo span { font-size: 0.8333vw; font-weight: 900; color: var(--color-text-authority); }

.testimonials { position: relative; padding: 5.2083vw 0 7.7083vw; overflow: hidden; }
.testimonials-decor { position: absolute; inset: -10.4167vw -24.0625vw 0; z-index: 0; opacity: 0.25; pointer-events: none; }
.testimonials-decor img { width: 100%; height: 100%; object-fit: cover; }
.testimonials > .container { position: relative; z-index: 1; }
.testimonials-counter { font-size: 1.25vw; font-weight: 400; text-align: left; letter-spacing: 0.3125vw; line-height: 1.7188vw; margin: 3.125vw 0 2.6042vw; }
.testimonials-counter strong { font-weight: 400; }
.testimonials-grid { display: flex; gap: 1.7188vw; }
.testimonial-card { flex: 1; background: var(--color-white); border-radius: 0.9375vw; padding: 2.1875vw 2.3958vw 1.5625vw; min-height: 16.3021vw; display: flex; flex-direction: column; }
.testimonial-quote { font-size: 1.0417vw; font-weight: 400; color: var(--color-text-nav); line-height: 2.0313vw; flex: 1; }
.testimonial-author { display: flex; align-items: center; gap: 0.8333vw; margin-top: 0.8333vw; }
.testimonial-avatar { width: 3.5938vw; height: 3.5938vw; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.testimonial-name { font-size: 1.0417vw; font-weight: 700; line-height: 2.0313vw; }
.testimonial-location { font-size: 0.7813vw; font-weight: 400; color: var(--color-text-body); line-height: 2.0313vw; }

/* ================================================
   HOME — Responsive ≤1023px
   ================================================ */
@media (max-width: 1023px) {
  .hero, .path, .courses, .teachers, .bg-wrapper { max-width: 100vw; overflow-x: hidden; }

  .hero { height: auto; min-height: auto; padding-bottom: 36px; }
  .hero-inner { height: auto; }
  .hero-text { padding-top: 28px; max-width: 100%; }
  .hero-title { font-size: 32px; line-height: 42px; }
  .hero-subtitle { font-size: 15px; line-height: 26px; max-width: 100%; }
  .hero-buttons { flex-direction: column; gap: 10px; margin-top: 20px; }

  .hero-video {
    position: relative; right: auto; top: auto;
    width: 100%; max-width: 100%; height: auto; aspect-ratio: 720/558;
    margin: 24px auto 0; border-radius: 12px; padding: 18px;
  }
  .hero-video-title { font-size: 18px; line-height: 24px; letter-spacing: 1px; margin-bottom: 10px; }
  .hero-video-desc { font-size: 14px; line-height: 22px; }
  .play-btn { width: 52px; height: 52px; border-width: 2px; }
  .play-btn::after { border-left-width: 15px; border-top-width: 9px; border-bottom-width: 9px; margin-left: 3px; }

  .path { padding: 32px 0 40px; }
  .path-cards { flex-direction: column; gap: 24px; }
  .path-card { flex: none; width: 100%; }
  .path-card-body { min-height: auto; padding: 32px 20px 18px; border-radius: 14px; }
  .path-card-icon img { width: 60px; }
  .path-card-title { font-size: 22px; line-height: 32px; letter-spacing: 1px; }
  .path-card-list li { font-size: 15px; line-height: 30px; }
  .path-card-link { font-size: 15px; }
  .step-badge { width: 48px; height: 48px; font-size: 20px; top: -12px; left: -8px; border-radius: 14px; }

  .courses { padding: 36px 0 40px; }
  .courses-header { flex-direction: column; gap: 16px; margin-bottom: 24px; }
  .courses-tabs { width: 100%; justify-content: center; gap: 16px; height: 50px; padding: 0 12px; border-radius: 14px; }
  .tab { font-size: 14px; padding: 5px 12px; }
  .tab.active { padding: 8px 18px; }
  .courses-grid { grid-template-columns: 1fr; gap: 16px; }
  .course-card { border-radius: 14px; }
  .course-card-img { height: 200px; }
  .course-card-body { padding: 16px 20px; }
  .course-card-title { font-size: 18px; line-height: 26px; min-height: auto; letter-spacing: 1px; }
  .course-card-desc { font-size: 14px; line-height: 24px; }
  .course-card-meta { font-size: 13px; }

  .teachers { padding: 36px 0 40px; }
  .teachers-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; margin-top: 28px; }
  .teacher-photo { width: 110px; height: 110px; margin-bottom: 10px; }
  .teacher-name { font-size: 20px; line-height: 28px; }
  .teacher-name--en { font-size: 18px; }
  .teacher-title { font-size: 14px; line-height: 24px; margin-bottom: 6px; }
  .teacher-desc { font-size: 14px; line-height: 24px; max-width: none; }

  .advantages { padding: 36px 0 0; }
  .advantages-grid { flex-direction: column; gap: 14px; display: flex; }
  .advantage-card { flex: none; width: 100%; height: auto; min-height: 180px; flex-direction: row; padding: 24px 18px; align-items: center; border-radius: 16px; }
  .advantage-text { flex: 1; }
  .advantage-text h3 { font-size: 20px; line-height: 28px; margin-bottom: 12px; letter-spacing: 1px; }
  .advantage-text p { font-size: 14px; line-height: 24px; }
  .advantage-img { width: 110px; flex: 0 0 110px; margin-top: 0; margin-left: 14px; }
  .advantage-img img { width: 100%; max-width: 100%; margin-bottom: 0; }

  .authority { padding: 36px 0; }
  .authority-subtitle { font-size: 12px; letter-spacing: 6px; padding-left: 6px; }
  .authority-bar { height: auto; padding: 18px; flex-wrap: wrap; gap: 14px; justify-content: center; border-radius: 16px; }
  .authority-logo img { max-height: 36px; max-width: 100px; }
  .authority-logo span { font-size: 11px; }

  .testimonials { padding: 36px 0 48px; }
  .testimonials-counter { font-size: 15px; letter-spacing: 2px; margin: 24px 0; }
  .testimonials-grid { flex-direction: column; gap: 14px; }
  .testimonial-card { flex: none; width: 100%; padding: 22px 18px; min-height: auto; border-radius: 14px; }
  .testimonial-quote { font-size: 15px; line-height: 28px; }
  .testimonial-avatar { width: 48px; height: 48px; }
  .testimonial-name { font-size: 16px; line-height: 26px; }
  .testimonial-location { font-size: 13px; line-height: 22px; }
}