/* ==========================================================================
   FSB — TRANG GIẢNG VIÊN (khối [fsb_faculty] · [fsb_faculty_member])
   Desktop theo artboard 1920, mobile theo artboard 390.
   .gv-circle  nền trắng, ảnh tròn 234 (mobile 112), lưới 4 cột (mobile 2)
   .gv-card    nền ảnh xanh, ảnh vuông 338 + thẻ kính mờ, lưới 3 cột (mobile 1)
   ========================================================================== */
.gv-sec { padding: 55px 0 83px; text-align: center; }
.gv-h { font-family: var(--font-2); font-weight: 700; font-size: 26px; line-height: 32px; color: #363636; }
.gv-sub {
  margin: 21px auto 0;
  font-family: var(--font);
  font-weight: 600;
  font-size: 32px;
  line-height: 32px;
  letter-spacing: -1px;
  text-transform: uppercase;
  color: #2885f1;
}
.gv-grid { display: grid; margin: 76px auto 0; }
.gv-item { min-width: 0; }
.gv-photo { display: block; margin: 0 auto; object-fit: cover; }
.gv-name { font-family: var(--font-2); font-weight: 700; font-size: 16.2px; line-height: 21px; letter-spacing: .05em; text-transform: uppercase; }

/* ---------- Ảnh tròn ---------- */
.gv-circle .gv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 112px; }
.gv-circle .gv-photo { width: 234px; height: 234px; border-radius: 50%; background: #5b5b5b; }
.gv-circle .gv-body { max-width: 273px; margin: 11px auto 0; }
.gv-circle .gv-name { color: #363636; }
.gv-circle .gv-info {
  margin-top: 3px;
  font-family: var(--font-2);
  font-weight: 300;
  font-size: 13px;
  line-height: 21.5px;
  letter-spacing: .81px;
  text-transform: uppercase;
  color: rgba(54, 54, 54, .7);
}

/* ---------- Thẻ nền xanh ---------- */
.gv-card { min-height: 920px; padding: 54px 0 76px; background: #0b2a7a center / cover no-repeat; }
.gv-card .gv-h { font-size: 25.6px; line-height: 33px; color: #fff; }
.gv-card .gv-sub { margin-top: 17px; line-height: 33px; color: #55a4ff; }
.gv-card .gv-grid { grid-template-columns: repeat(3, 338px); justify-content: center; column-gap: 78px; row-gap: 40px; margin-top: 45px; align-items: start; }
.gv-card .gv-photo { width: 100%; height: auto; aspect-ratio: 1; }
.gv-card .gv-body {
  position: relative;
  margin-top: -38px;
  padding: 45px 22px 24px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(79, 103, 162, .1) 0%, #2885f1 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-align: left;
  color: #fff;
}
.gv-card .gv-name { margin-bottom: 12px; text-align: center; color: #fff; }
.gv-card .gv-info { font-family: var(--font-2); font-size: 14.4px; line-height: 23px; }
.gv-card .gv-info + .gv-info { margin-top: 12px; }

/* ---------- Tablet ---------- */
@media (max-width: 1199.98px) {
  .gv-circle .gv-photo { width: 200px; height: 200px; }
  .gv-card .gv-grid { grid-template-columns: repeat(3, minmax(0, 300px)); column-gap: 32px; }
}
@media (max-width: 991.98px) {
  .gv-circle .gv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 64px; }
  .gv-card .gv-grid { grid-template-columns: repeat(2, minmax(0, 320px)); row-gap: 40px; }
}

/* ---------- Mobile (artboard 390) ---------- */
@media (max-width: 767.98px) {
  .gv-sec { padding: 70px 0 50px; }
  .gv-h { font-size: 24px; line-height: 32px; }
  .gv-sub { margin-top: 5px; font-size: 20px; line-height: 23px; }
  .gv-grid { margin-top: 56px; }

  .gv-circle .gv-grid { grid-template-columns: repeat(2, minmax(0, 120px)); justify-content: center; column-gap: 40px; row-gap: 49px; }
  .gv-circle .gv-photo { width: 112px; height: 112px; }
  .gv-circle .gv-body { margin-top: 10px; }
  .gv-circle .gv-name { font-size: 15px; line-height: 19px; letter-spacing: .75px; }
  .gv-circle .gv-info { margin-top: 2px; font-size: 12px; line-height: 19.5px; letter-spacing: .75px; }

  .gv-card { min-height: 0; margin: 0 15px; padding: 48px 0 40px; }
  .gv-card .gv-h { font-size: 24px; line-height: 32px; }
  .gv-card .gv-sub { margin-top: 5px; line-height: 23px; }
  .gv-card .gv-grid { grid-template-columns: minmax(0, 290px); row-gap: 29px; margin-top: 56px; }
  .gv-card .gv-body { margin-top: -30px; padding: 37px 20px 20px; }
  .gv-card .gv-name { letter-spacing: 0; }
}