/* ==========================================================================
   BỐ CỤC NHIỀU ẢNH KIỂU LDP GIÁO DỤC
   Hero có du học sinh tách nền + thẻ số liệu nổi, ảnh ghép, ảnh dọc cạnh
   danh sách lý do, thẻ chuyên gia có ảnh, lưới ảnh cộng đồng học viên.
   Màu vẫn là màu phẳng theo brand guideline (đỏ #BE1E2D, vàng #FFDA00).
   ========================================================================== */

/* ---------- HERO: nền đỏ phẳng, người thật bên phải ---------- */
.hero--cutout { background-image: none; padding-block: 48px 0; }
.hero--cutout .hero-grid { align-items: end; }
.hero--cutout .hero-info { grid-template-columns: repeat(2, 1fr); max-width: 560px; }
.hero--cutout .hero-grid > div:first-child { padding-bottom: 56px; }

.hero-value { display: flex; flex-direction: column; font-size: 13px; color: rgba(255, 255, 255, .85); line-height: 1.3; }
.hero-value b { color: var(--gold); font-size: 20px; }

.hero-visual { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 520px; }
.hv-circle {
  position: absolute;
  bottom: 40px; left: 50%;
  width: 400px; height: 400px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--gold);
}
.hv-person { position: relative; z-index: 1; max-height: 540px; width: auto; }
.hv-badge {
  position: absolute;
  z-index: 2;
  background: #fff;
  color: var(--ink);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: var(--shadow-lg);
  font-size: 12.5px;
  line-height: 1.35;
  /* Xếp dọc cho thẻ hẹp → nằm gọn ở mép ảnh, không che mặt người */
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: hv-float 5s ease-in-out infinite;
}
.hv-badge b { color: var(--red); font-size: 26px; line-height: 1; }
.hv-badge--1 { top: 40px; left: -24px; }
.hv-badge--2 { top: 200px; right: -24px; animation-delay: -1.6s; }
.hv-badge--3 { bottom: 80px; left: -12px; animation-delay: -3.2s; }
@keyframes hv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

@media (max-width: 980px) {
  /* Màn hẹp: đưa ảnh lên NGAY DƯỚI tiêu đề để màn hình đầu có người thật như desktop.
     display:contents "mở" cột chữ ra, các phần tử con thành ô lưới riêng nên sắp lại được bằng order. */
  .hero--cutout { padding-block: 36px 40px; }
  .hero--cutout .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero--cutout .hero-grid > div:first-child { display: contents; }
  .hero--cutout .hero-badge { order: 1; align-self: flex-start; }
  .hero--cutout h1 { order: 2; }
  .hero--cutout .hero-visual { order: 3; margin: 4px 0 18px; }
  .hero--cutout .hero-sub { order: 4; }
  .hero--cutout .hero-info { order: 5; }
  .hero--cutout .hero-actions { order: 6; }

  .hero-visual { min-height: 300px; border-bottom: 3px solid rgba(255, 255, 255, .25); }
  .hv-circle { width: 240px; height: 240px; bottom: 16px; }
  .hv-person { max-height: 300px; }
  /* Màn hẹp: mặt người chiếm giữa phía trên → thẻ chỉ đặt ở góc phải trên và nửa dưới bên trái */
  .hv-badge--1 { top: auto; bottom: 110px; left: 0; }
  .hv-badge--2 { top: 16px; right: 0; }
  .hv-badge--3 { bottom: 24px; left: auto; right: 0; }
}
@media (max-width: 420px) {
  .hv-badge { padding: 8px 10px; font-size: 11.5px; gap: 7px; }
  .hv-badge b { font-size: 19px; }
  .hv-circle { width: 210px; height: 210px; }
  .hero-visual { min-height: 260px; }
  .hv-person { max-height: 260px; }
}

/* ---------- Bố cục 2 cột ảnh + nội dung ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.split h2 { text-wrap: balance; }
.split .big-questions { margin: 22px 0 0; }
@media (max-width: 980px) { .split { grid-template-columns: 1fr; gap: 32px; } }

/* Ảnh ghép: ảnh lớn + ảnh nhỏ đè góc + thẻ chữ đỏ */
.photo-stack { position: relative; padding: 0 0 70px 0; }
.photo-stack img { border-radius: var(--radius-lg); object-fit: cover; }
.photo-stack img:first-child { width: 88%; aspect-ratio: 4 / 3; box-shadow: var(--shadow); }
.photo-stack img:nth-child(2) {
  position: absolute;
  right: 0; bottom: 0;
  width: 52%;
  aspect-ratio: 4 / 3;
  border: 6px solid #fff;
  box-shadow: var(--shadow-lg);
}
.photo-stack__tag {
  position: absolute;
  left: 18px; bottom: 14px;
  max-width: 42%;
  background: var(--red);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  padding: 12px 14px;
  border-radius: 12px;
}
@media (max-width: 480px) {
  .photo-stack { padding-bottom: 96px; }
  .photo-stack img:first-child { width: 100%; }
  .photo-stack__tag { max-width: 44%; font-size: 12px; left: 0; bottom: 0; }
}

/* ---------- S02: ảnh dọc + 6 lý do ---------- */
.reasons-split { grid-template-columns: .8fr 1.2fr; align-items: stretch; }
.tall-photo { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; min-height: 420px; }
.tall-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.tall-photo figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 60px 22px 20px;
  background: linear-gradient(transparent, rgba(35, 31, 32, .88));
  color: rgba(255, 255, 255, .85);
  font-size: 14px;
}
.tall-photo figcaption b { display: block; color: var(--gold); font-size: 17px; }

.reason-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.reason {
  display: flex;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.reason-num {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--red);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
}
.reason h3 { font-size: 16.5px; margin-bottom: 4px; }
.reason p { margin: 0; font-size: 14.5px; color: var(--muted); }
@media (max-width: 980px) {
  .reasons-split { grid-template-columns: 1fr; }
  .tall-photo { min-height: 0; aspect-ratio: 4 / 5; }
  .tall-photo img { object-position: center 15%; }
}
@media (max-width: 640px) { .reason-list { grid-template-columns: 1fr; gap: 12px; } }

#vi-sao .sub-title { margin-top: 48px; }
@media (max-width: 640px) { .audience-grid { grid-template-columns: 1fr 1fr; gap: 12px; } }

/* ---------- S03: thẻ chuyên gia có ảnh ---------- */
.expert-card { background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.expert-photo { display: block; width: 100%; height: 300px; object-fit: cover; object-position: center 20%; }
/* Chưa có ảnh: nền đỏ nhạt + vòng tròn chữ viết tắt, thấp hơn ảnh thật cho đỡ trống */
.expert-photo--initials {
  display: grid;
  place-items: center;
  background: var(--red-soft);
  color: var(--red);
  font-size: 0;
}
.expert-photo--initials::before {
  content: attr(data-initials);
  width: 120px; height: 120px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid var(--red);
  display: grid;
  place-items: center;
  font-size: 40px;
  font-weight: 800;
}
.expert-body { padding: 20px 22px 24px; border-top: 5px solid var(--gold); }
.expert-body h3 { font-size: 18px; margin-bottom: 2px; text-transform: uppercase; }
.expert-body ul { list-style: none; padding: 0; margin: 0; font-size: 14.5px; color: var(--ink-2); }
.expert-body li { padding: 4px 0 4px 20px; position: relative; }
.expert-body li::before { content: '✓'; position: absolute; left: 0; color: var(--red); font-weight: 800; }
@media (max-width: 980px) { .expert-photo { height: 260px; } }

/* ---------- S04: lưới ảnh cộng đồng ---------- */
.photo-mosaic {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  gap: 12px;
  margin-bottom: 32px;
}
.photo-mosaic img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.photo-mosaic img:first-child { grid-row: span 2; }
.photo-mosaic img:last-child { grid-column: span 2; }
@media (max-width: 640px) {
  .photo-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 180px 120px 120px; gap: 8px; }
  .photo-mosaic img:first-child { grid-row: auto; grid-column: span 2; }
  .photo-mosaic img:last-child { grid-column: span 2; }
}

/* ---------- S06: form trên nền ảnh tối ---------- */
.section--photo-bg {
  background-image:
    linear-gradient(rgba(35, 31, 32, .9), rgba(35, 31, 32, .9)),
    url('../img/class-3.jpg');
  background-size: cover;
  background-position: center;
}
.result-list--dark .check { background: var(--gold); color: var(--ink); }