/* =========================================================================
   XIXA — Trang "Góc chuyên gia" (/goc-chuyen-gia)
   5 phần: mở đầu (dải thẻ), tham vấn bác sĩ, gia đình (cột ảnh trôi dọc),
   đánh giá phụ huynh (dải chạy ngang), nhà sáng lập.
   Khung nội dung dùng đúng công thức lưới trang chủ: 80.7292vw, tối đa 3100px.
   Hiệu ứng chuyển động do /js/goc-chuyen-gia.js bật (lớp html.gcg-anim) —
   không có JS thì nội dung vẫn hiện đầy đủ, chỉ đứng yên.
   ========================================================================= */

.gcg-page {
  --gcg-ink: #151816;
  --gcg-text: #3b403d;
  --gcg-blue: #4fcdf6;
  --gcg-blue-deep: #1da7e0;
  --gcg-yellow: #ffe590;
  --gcg-pink: #ff6ccb;
  --gcg-pink-deep: #f23fae;
  --gcg-lime: #d7f542;
  --gcg-lime-deep: #b7e21b;
  --gcg-cream: #fdf2cf;
  --gcg-r: clamp(16px, 1.25vw, 40px);
  --gcg-gap: clamp(14px, 1.6vw, 56px);
  color: var(--gcg-text);
  overflow: hidden;          /* cắt thẻ tràn mép (dải thẻ, cột ảnh) — KHÔNG đặt trên body */
  /* kéo footer lên để sóng nằm trên nền xanh chanh của phần cuối, không hở dải trắng
     (phần cuối đã chừa thêm đúng chiều cao sóng ở padding-bottom) */
  margin-bottom: calc(-1 * (var(--wave-h, 6.285vw) - var(--wave-lap, .9vw)));
}
.gcg-page img { display: block; max-width: 100%; height: auto; }

.gcg-wrap { width: 100%; padding: 0 20px; margin: 0 auto; position: relative; z-index: 1; }
@media (min-width: 1081px) {
  .gcg-wrap { width: 80.7292vw; max-width: 3100px; padding: 0; }
}

.gcg-center { text-align: center; }
.gcg-kicker {
  font-size: clamp(11px, .62vw, 22px);
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6d7470;
  margin-bottom: clamp(10px, .9vw, 30px);
}
.gcg-h1 {
  font-size: clamp(32px, 3.55vw, 128px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--gcg-ink);
  max-width: 17em;
}
.gcg-h2 {
  font-size: clamp(26px, 2.35vw, 86px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--gcg-ink);
}
.gcg-h3 {
  font-size: clamp(19px, 1.55vw, 56px);
  line-height: 1.25;
  font-weight: 800;
  color: #1f5e0f;
}
.gcg-lead {
  font-size: clamp(15px, 1.02vw, 36px);
  line-height: 1.55;
  margin-top: clamp(12px, 1.1vw, 36px);
  color: #2f3431;
}
.gcg-lead.gcg-center { max-width: 44em; margin-left: auto; margin-right: auto; }

/* ---------- Nút ---------- */
.gcg-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 7px 7px 7px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: clamp(14px, .8vw, 28px);
  color: var(--gcg-ink);
  background: #fff;
  box-shadow: 0 6px 20px rgba(20, 30, 20, .08);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.gcg-btn i {
  width: clamp(30px, 1.8vw, 62px); height: clamp(30px, 1.8vw, 62px);
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gcg-ink); color: #fff;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.gcg-btn i svg { width: 45%; height: 45%; }
.gcg-btn i.gcg-i-pink { background: var(--gcg-pink); }
/* "Chia sẻ khác": mũi tên chỉ xuống, rê chuột thì nhích xuống thay vì xoay vòng */
.gcg-btn:hover i.gcg-i-pink { transform: translateY(3px); }
/* mũi tên nét mảnh, khối svg tách khỏi dòng chữ để nằm đúng tâm vòng tròn */
.gcg-btn i.gcg-i-pink svg { display: block; width: 46%; height: 46%; }
.gcg-btn i.gcg-i-pink svg path { stroke-width: 1.7; }
.gcg-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(20, 30, 20, .14); }
.gcg-btn:hover i { transform: rotate(-360deg) scale(1.08); }

.gcg-chip {
  display: inline-block;
  padding: .42em 1.05em;
  border-radius: 999px;
  background: #fff;
  color: var(--gcg-ink);
  font-weight: 400;
  font-size: clamp(12px, .72vw, 26px);
  line-height: 1.2;
}

/* Chữ X lớn làm nền (logo XIXA) */
.gcg-x { position: absolute; pointer-events: none; z-index: 0; }
.gcg-x path { fill: currentColor; }

/* =========================================================================
   1. MỞ ĐẦU
   ========================================================================= */
.gcg-hero {
  position: relative;
  padding: clamp(28px, 2.6vw, 100px) 0 clamp(40px, 5vw, 190px);
  background: #fff;
}
.gcg-x--hero {
  color: #eaf7c4;
  width: 46vw; height: 46vw;
  right: -9vw; top: 14vw;
  opacity: .9;
  transform: translate3d(0, var(--gcg-py, 0px), 0) rotate(var(--gcg-rot, 0deg));
}
.gcg-hero-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-bottom: clamp(24px, 2.2vw, 84px);
}
.gcg-arrows { display: flex; gap: clamp(8px, .55vw, 20px); flex: none; }
.gcg-arrow {
  width: clamp(38px, 2.1vw, 76px); height: clamp(38px, 2.1vw, 76px);
  border-radius: 50%;
  border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--gcg-ink); color: #fff;
  transition: background .25s, transform .25s, opacity .25s;
}
.gcg-arrow svg { width: 46%; height: 46%; }
.gcg-arrow:hover { background: #53a100; transform: scale(1.08); }
.gcg-arrow:disabled { opacity: .28; cursor: default; transform: none; background: var(--gcg-ink); }

/* Dải thẻ: canh lề trái theo khung nội dung, tràn ra mép phải màn hình */
.gcg-rail {
  --gcg-lead: 20px;
  position: relative; z-index: 1;
  display: flex; gap: var(--gcg-gap);
  overflow-x: auto;
  /* KHÔNG cho cuộn dọc: overflow-x:auto khiến trình duyệt tự đặt overflow-y:auto, mà các
     thẻ chưa lướt tới vẫn đang lệch xuống 80px chờ hiệu ứng trồi lên → dải thẻ dư chiều
     dọc, trên điện thoại vuốt dọc trúng thẻ là thẻ trượt lên xuống thay vì cuộn trang. */
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gcg-lead);
  scroll-padding-right: var(--gcg-lead);
  padding: 14px var(--gcg-lead) 30px;
  scrollbar-width: none;
  cursor: grab;
}
.gcg-rail::-webkit-scrollbar { display: none; }
.gcg-rail.is-drag { cursor: grabbing; scroll-snap-type: none; }
.gcg-rail.is-drag a { pointer-events: none; }
@media (min-width: 1081px) {
  .gcg-rail { --gcg-lead: max(9.6354vw, calc((100vw - 3100px) / 2)); }
}

.gcg-hcard {
  flex: none;
  width: clamp(270px, 24.5vw, 940px);
  aspect-ratio: 470 / 820;
  scroll-snap-align: start;
  border-radius: var(--gcg-r);
  --gcg-hpad: clamp(16px, 1.45vw, 56px);
  padding: var(--gcg-hpad);
  overflow: hidden;                        /* ảnh tràn sát mép thẻ, góc dưới theo bo thẻ */
  display: flex; flex-direction: column;
  color: var(--gcg-ink);
  position: relative;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
}
/* thẻ cuối bám mép phải — nếu không, vị trí bám của mấy thẻ cuối vượt quá chỗ cuộn
   tối đa và dải thẻ bị kẹt, không kéo tới hết thẻ cuối được */
.gcg-hcard:last-child { scroll-snap-align: end; }
.gcg-hcard--blue   { background: var(--gcg-blue); }
.gcg-hcard--yellow { background: var(--gcg-yellow); }
.gcg-hcard--pink   { background: var(--gcg-pink); }
.gcg-hcard--lime   { background: var(--gcg-lime); }
.gcg-hcard .gcg-chip { align-self: flex-start; }
.gcg-hcard-title {
  font-size: clamp(24px, 2.05vw, 76px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.015em;
  margin-top: clamp(14px, 1.3vw, 50px);
  max-width: 8.5em;
}
.gcg-hcard-desc {
  font-size: clamp(12px, .68vw, 24px);
  line-height: 1.5;
  margin-top: clamp(8px, .7vw, 26px);
  max-width: 26em;
  opacity: .85;
}
.gcg-hcard-media {
  /* tràn hết ra mép trái, phải, dưới của thẻ; chỉ bo 2 góc trên */
  margin: auto calc(-1 * var(--gcg-hpad)) calc(-1 * var(--gcg-hpad));
  position: relative;
  display: block;
  height: 57%;
  flex: none;
  border-radius: calc(var(--gcg-r) * 1.4) calc(var(--gcg-r) * 1.4) 0 0;
  overflow: hidden;
  background: rgba(255,255,255,.35);
}
.gcg-hcard-media img {
  width: 100%; height: 100% !important;
  object-fit: cover;
}
/* Nhãn trên ảnh (Chuyên gia ↓ …): kính mờ trắng trong, viền trắng mảnh, chữ thường,
   vòng tròn trắng đặc với mũi tên nét mảnh — đo theo bản thiết kế */
.gcg-pill {
  position: absolute;
  left: clamp(16px, 2.3vw, 88px); bottom: clamp(14px, 2.1vw, 80px);
  display: inline-flex; align-items: center; gap: 1.3em;
  padding: .2em .2em .2em 1.45em;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: clamp(13px, 1.05vw, 38px);
  font-weight: 400;
  color: #2b2d2c;
}
.gcg-pill i {
  width: 2.15em; height: 2.15em;
  border-radius: 50%; background: #fff;
  display: grid; place-items: center;
  color: #4a4d4b;
}
.gcg-pill i svg { width: 40%; height: 40%; }
.gcg-pill i svg path { stroke-width: 1.6; }
.gcg-hcard:hover { transform: translateY(-10px); box-shadow: 0 24px 40px -18px rgba(0,0,0,.28); }
.gcg-hcard:hover .gcg-pill i { animation: gcg-bob .9s ease-in-out infinite; }

/* =========================================================================
   2. THAM VẤN CỦA BÁC SĨ
   ========================================================================= */
.gcg-doctors {
  position: relative;
  padding: clamp(40px, 3.6vw, 140px) 0 clamp(60px, 5vw, 200px);
  background: linear-gradient(180deg, #fff 0%, #e8f7fd 38%, #f4fbfe 100%);
}
.gcg-doc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.2vw, 84px);
  width: min(100%, 77.6vw);
  margin: clamp(30px, 3.3vw, 126px) auto 0;
  align-items: start;
}
/* so le: thẻ 2 và 3 thấp hơn như bản thiết kế */
/* mỗi hàng 4 thẻ: thẻ 2 và 3 của hàng thấp hơn (đúng cả khi admin thêm bác sĩ) */
.gcg-doc:nth-child(4n+2), .gcg-doc:nth-child(4n+3) { margin-top: clamp(20px, 4.6vw, 170px); }

/* Thẻ bác sĩ: ảnh tràn sát mép trên/trái/phải; mép trên có "tai" như bìa hồ sơ
   (thẻ 1–2 tai bên trái, 3–4 tai bên phải — data-tab). Hình tai do JS vẽ bằng
   clip-path: path() theo đúng kích thước thật của thẻ (xem goc-chuyen-gia.js);
   không có JS thì thẻ là chữ nhật bo góc bình thường. */
.gcg-doc { perspective: 900px; }
.gcg-doc-in {
  --gcg-tab: clamp(12px, 1.05vw, 40px);   /* độ cao bậc tai */
  position: relative;
  background: #fff;
  border-radius: calc(var(--gcg-r) * 1.3);
  padding-top: var(--gcg-tab);
  transform: rotateX(var(--gcg-tx, 0deg)) rotateY(var(--gcg-ty, 0deg));
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.gcg-doc-in.has-tab { border-radius: 0; padding-top: 0; }
.gcg-doc-photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1.18;
  background: #dfe3e6;
  margin: 0;
}
.gcg-doc-in:not(.has-tab) .gcg-doc-photo { border-radius: calc(var(--gcg-r) * 1.3) calc(var(--gcg-r) * 1.3) 0 0; margin-top: calc(-1 * var(--gcg-tab)); }
.gcg-doc-photo img { width: 100%; height: 100% !important; object-fit: cover; object-position: center top; }
/* dải tên: xám nhạt ở đáy ảnh, mờ dần sang phải */
.gcg-doc-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(8px, .6vw, 22px) clamp(12px, .85vw, 32px);
  background: linear-gradient(90deg, rgba(238,239,240,.95) 0%, rgba(238,239,240,.9) 55%, rgba(238,239,240,0) 100%);
  display: flex; flex-direction: column; gap: 2px;
}
.gcg-doc-photo b { font-size: clamp(13px, .78vw, 28px); font-weight: 600; color: var(--gcg-ink); }
.gcg-doc-photo span { font-size: clamp(10px, .55vw, 20px); color: #5f6670; }
.gcg-doc-quote {
  font-size: clamp(12px, .68vw, 24px);
  line-height: 1.55;
  padding: clamp(14px, 1vw, 36px) clamp(16px, 1.25vw, 46px) clamp(54px, 3.3vw, 120px);
  color: #3e4441;
}
/* dấu nháy "99" nét viền xanh nhạt ngay sau lời trích */
.gcg-doc-quote::after {
  content: "";
  display: inline-block;
  width: 2.3em; height: 1.5em;
  margin-left: .35em;
  vertical-align: -.55em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 26'><g fill='none' stroke='%2378d2f3' stroke-width='1.6' stroke-linejoin='round'><path d='M9 2a7 7 0 0 1 7 7c0 7.5-4.6 13.4-11.3 15.6l-.9-1.9c3.4-1.8 5.4-4.3 6-7.4A7 7 0 1 1 9 2z'/><path d='M29 2a7 7 0 0 1 7 7c0 7.5-4.6 13.4-11.3 15.6l-.9-1.9c3.4-1.8 5.4-4.3 6-7.4A7 7 0 1 1 29 2z'/></g></svg>") center / contain no-repeat;
}
/* nút + nằm gọn trong thẻ, góc dưới phải — bấm mở hộp xem chia sẻ */
.gcg-doc-go {
  position: absolute; right: clamp(12px, .9vw, 34px); bottom: clamp(12px, .9vw, 34px);
  width: clamp(28px, 1.6vw, 58px); height: clamp(28px, 1.6vw, 58px);
  border: 0; padding: 0; cursor: pointer;
  border-radius: 50%;
  background: #5fd0f5; color: #1c2b33;
  display: grid; place-items: center;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), background .25s;
}
.gcg-doc-go svg { width: 50%; height: 50%; }
.gcg-doc-go:hover { background: #2fbdf0; transform: rotate(90deg) scale(1.08); }
.gcg-doc-go:focus-visible { outline: 2px solid #1da7e0; outline-offset: 2px; }

/* =========================================================================
   3. GIA ĐÌNH — 7 cột ảnh trôi dọc, 3 cột giữa mờ dần để nhường chỗ cho chữ
   ========================================================================= */
.gcg-families {
  position: relative;
  background: var(--gcg-cream);
  height: clamp(760px, 60vw, 2300px);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: clamp(40px, 3.6vw, 140px);
}
.gcg-fam-cols {
  position: absolute; top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 118vw;
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: var(--gcg-gap);
  z-index: 0;
}
.gcg-fcol {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.gcg-fcol--mid {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 48%, transparent 66%);
          mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 48%, transparent 66%);
}
.gcg-fset {
  display: flex; flex-direction: column; gap: var(--gcg-gap);
  padding-bottom: var(--gcg-gap);        /* = khoảng cách nối giữa 2 bản để vòng lặp liền mạch */
}
.gcg-fcol:nth-child(odd) .gcg-fset:first-child { margin-top: -6vw; }
.gcg-fcol:nth-child(even) .gcg-fset:first-child { margin-top: 3vw; }
.gcg-fcard {
  background: #fff;
  border-radius: var(--gcg-r);
  padding: clamp(10px, .7vw, 26px);
  box-shadow: 0 16px 34px -24px rgba(120, 90, 10, .45);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.gcg-fcard:hover { transform: scale(1.03) rotate(-.6deg); }
.gcg-fname { display: block; font-size: clamp(11px, .62vw, 22px); color: var(--gcg-ink); padding: 4px 4px 0; }
.gcg-fquote { font-size: clamp(10px, .55vw, 20px); line-height: 1.5; color: #555b57; padding: 6px 4px 10px; }
.gcg-fmedia {
  position: relative; display: block;
  border-radius: calc(var(--gcg-r) * .7);
  overflow: hidden;
  aspect-ratio: 4 / 3.4;
}
.gcg-fmedia img { width: 100%; height: 100% !important; object-fit: cover; transition: transform 1s; }
.gcg-fcard:hover .gcg-fmedia img { transform: scale(1.08); }
.gcg-fmedia--play::after {
  content: "";
  position: absolute; right: 10px; top: 10px;   /* nút video ở góc trên-phải ảnh */
  width: clamp(24px, 1.3vw, 46px); height: clamp(24px, 1.3vw, 46px);
  border-radius: 50%;
  background: rgba(255,255,255,.85) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 6.5v11l9-5.5z' fill='%23151816'/></svg>") center / 55% no-repeat;
  box-shadow: 0 0 0 0 rgba(255,255,255,.7);
  animation: gcg-ping 2.4s ease-out infinite;
}
/* Video trong thẻ: nằm đè lên ảnh (ảnh làm ảnh bìa), rê chuột thì chạy xem trước,
   bấm vào thẻ thì mở hộp xem video có tiếng */
.gcg-fvid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.gcg-fcard.is-preview .gcg-fvid { opacity: 1; }
.gcg-fcard.is-preview .gcg-fmedia--play::after { opacity: 0; }
.gcg-fcard:has(.gcg-fvid) { cursor: pointer; }
.gcg-fmedia--play::after { z-index: 1; transition: opacity .3s; }

.gcg-fam-text {
  position: relative; z-index: 2;
  max-width: min(92vw, 52vw + 200px);
  padding: 0 16px;
  text-align: center;
}
.gcg-fam-text .gcg-btn { margin-top: clamp(18px, 1.4vw, 52px); }
/* Nút "Cùng xem nhé": vòng tròn vàng nhạt cùng tông nền khu gia đình, chữ thường, không bóng */
#gcgWatch { font-weight: 400; box-shadow: none; }
#gcgWatch i { background: #fee79e; color: var(--gcg-ink); }
/* tam giác play: trọng tâm hình đã nằm đúng tâm khung 24×24 nên không đẩy lệch thêm */
#gcgWatch i svg { width: 56%; height: 56%; display: block; }
#gcgWatch:hover { box-shadow: 0 10px 24px -12px rgba(150, 110, 0, .35); }
#gcgWatch:hover i { background: #fdd85e; transform: scale(1.08); }

/* =========================================================================
   4. ĐÁNH GIÁ PHỤ HUYNH — dải chạy ngang vô tận
   ========================================================================= */
.gcg-reviews {
  position: relative;
  padding: clamp(46px, 4.4vw, 170px) 0 clamp(46px, 4vw, 150px);
  background: linear-gradient(180deg, #fbd3e9 0%, #ffb3de 45%, #ff86cf 100%);
}
.gcg-reviews .gcg-lead { max-width: 50em; }
.gcg-marquee {
  display: flex;
  margin: clamp(26px, 2.2vw, 84px) 0 clamp(30px, 2.8vw, 100px);
  padding: 10px 0 clamp(40px, 3.2vw, 120px);
}
.gcg-mset {
  flex: none;
  display: flex; align-items: flex-start;
  gap: var(--gcg-gap);
  padding-right: var(--gcg-gap);
}
.gcg-rcard {
  flex: none;
  width: clamp(220px, 15.4vw, 590px);
  background: #fff;
  border-radius: var(--gcg-r);
  --gcg-rpad: clamp(12px, .85vw, 32px);   /* lề chữ trong thẻ */
  padding: 0 0 clamp(14px, .9vw, 34px);
  overflow: hidden;                         /* ảnh tràn sát mép trên/trái/phải, góc theo bo thẻ */
  box-shadow: 0 20px 40px -26px rgba(170, 20, 110, .55);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s;
}
.gcg-rcard:nth-child(even) { margin-top: clamp(24px, 2.6vw, 100px); }
.gcg-rcard:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 30px 50px -26px rgba(170, 20, 110, .7); }
/* ảnh full thẻ, tỉ lệ 1,4 : 1 theo bản thiết kế */
.gcg-rmedia { display: block; overflow: hidden; aspect-ratio: 1.4 / 1; margin-bottom: 14px; }
.gcg-rmedia img { width: 100%; height: 100% !important; object-fit: cover; transition: transform 1s; }
.gcg-rcard:hover .gcg-rmedia img { transform: scale(1.08); }
.gcg-rname { display: block; padding: 0 var(--gcg-rpad); font-size: clamp(12px, .66vw, 24px); color: var(--gcg-ink); }
.gcg-rsub { display: block; padding: 2px var(--gcg-rpad) 0; font-size: clamp(10px, .55vw, 20px); color: #6b7280; }
.gcg-rquote { padding: 8px var(--gcg-rpad) 10px; font-size: clamp(11px, .58vw, 21px); line-height: 1.5; color: #4a504c; }
.gcg-rmeta { padding: 0 var(--gcg-rpad); font-size: clamp(10px, .55vw, 20px); color: #6b7280; line-height: 1.7; }
.gcg-rmeta a { color: var(--gcg-pink-deep); font-weight: 400; display: inline-flex; align-items: center; gap: 3px; }
.gcg-rmeta a svg { width: 1.1em; height: 1.1em; transition: transform .3s; }
.gcg-rmeta a:hover svg { transform: translateX(3px); }

/* =========================================================================
   5. NHÀ SÁNG LẬP
   ========================================================================= */
.gcg-founder {
  position: relative;
  background: var(--gcg-lime);
  padding: clamp(50px, 4.4vw, 170px) 0 calc(clamp(60px, 5vw, 190px) + var(--wave-h, 6.285vw));
}
.gcg-x--founder {
  color: rgba(255,255,255,.28);
  width: 40vw; height: 40vw;
  left: 32vw; top: 2vw;
  transform: translate3d(0, var(--gcg-py2, 0px), 0) rotate(var(--gcg-rot2, 0deg));
}
.gcg-founder-grid {
  display: grid;
  grid-template-columns: 1fr 1.55fr;
  gap: clamp(28px, 3.4vw, 130px);
  align-items: start;        /* chữ bám mép trên ảnh, chừa khoảng dưới cho nút đè góc ảnh */
}
.gcg-founder-text .gcg-h2 { color: #1f5e0f; max-width: 11em; }
.gcg-founder-text .gcg-h3 { margin-top: clamp(14px, 1.1vw, 40px); max-width: 15em; }
.gcg-founder-text p {
  font-size: clamp(13px, .66vw, 24px);
  line-height: 1.6;
  color: #2c3a22;
  margin-top: clamp(10px, .8vw, 30px);
  max-width: 34em;
}
.gcg-founder-text p b { color: #1c2a12; }
/* đoạn văn căn đều hai bên (dòng cuối vẫn canh trái); dòng ký tên giữ nguyên */
.gcg-founder-text p:not(.gcg-sign) { text-align: justify; text-align-last: left; }
.gcg-founder-text .gcg-sign {
  display: inline-block;
  padding: .5em 1.3em;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  margin-top: clamp(16px, 1.3vw, 48px);
}
.gcg-cta {
  display: inline-flex; align-items: center; gap: clamp(14px, 1.4vw, 52px);
  padding: clamp(8px, .6vw, 22px) clamp(8px, .6vw, 22px) clamp(8px, .6vw, 22px) clamp(22px, 2.3vw, 88px);
  border-radius: 999px;
  background: #fff;
  color: var(--gcg-ink);
  font-weight: 700;
  font-size: clamp(16px, 1.45vw, 54px);
  white-space: nowrap;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
.gcg-cta i {
  width: clamp(46px, 4.3vw, 160px); height: clamp(46px, 4.3vw, 160px);
  border-radius: 50%;
  background: var(--gcg-lime);
  display: grid; place-items: center;
  color: var(--gcg-ink);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), background .3s;
}
.gcg-cta i svg { width: 40%; height: 40%; }
.gcg-cta:hover { transform: translateX(4px); }
.gcg-cta:hover i { transform: translateX(6px); background: var(--gcg-lime-deep); }
.gcg-founder-photo {
  position: relative;
  border-radius: calc(var(--gcg-r) * 1.6);
  overflow: hidden;
  aspect-ratio: 1 / 1.02;
}
.gcg-founder-photo img {
  width: 100%; height: 118% !important;
  object-fit: cover;
  transform: translate3d(0, var(--gcg-par, -8%), 0);
  will-change: transform;
}
/* Khung ảnh + nút: nút nằm trong một "ổ" nền xanh chanh đè lên góc dưới-trái ảnh.
   --gcg-ring: độ dày viền ổ; --gcg-fil: bán kính góc lõm nơi mép ảnh gặp ổ. */
.gcg-founder-media {
  position: relative;
  --gcg-ring: clamp(10px, .75vw, 28px);
  --gcg-fil: clamp(16px, 1.3vw, 48px);
}
.gcg-cta-socket {
  position: absolute; z-index: 2;
  left: calc(-1 * clamp(120px, 12vw, 460px));
  bottom: 9%;
  padding: var(--gcg-ring);
  border-radius: 999px;
  background: var(--gcg-lime);
}
/* 2 góc lõm ngay trên và ngay dưới ổ, đúng tại mép trái của ảnh */
.gcg-cta-socket::before,
.gcg-cta-socket::after {
  content: "";
  position: absolute;
  left: clamp(120px, 12vw, 460px);          /* = mép trái ảnh */
  width: var(--gcg-fil); height: var(--gcg-fil);
  pointer-events: none;
}
.gcg-cta-socket::before {
  bottom: calc(100% - var(--gcg-ring) / 2 - 1px);
  background: radial-gradient(circle at 100% 0, transparent calc(var(--gcg-fil) - .5px), var(--gcg-lime) var(--gcg-fil));
}
.gcg-cta-socket::after {
  top: calc(100% - var(--gcg-ring) / 2 - 1px);
  background: radial-gradient(circle at 100% 100%, transparent calc(var(--gcg-fil) - .5px), var(--gcg-lime) var(--gcg-fil));
}
/* Ổ nền xanh chanh khoét vào góc trên-phải ảnh để chứa nhãn "Nhà sáng lập":
   bo góc dưới-trái + 2 góc lõm (ngay bên trái ổ ở mép trên, ngay dưới ổ ở mép phải). */
.gcg-notch {
  --gcg-ring: clamp(10px, .75vw, 28px);
  --gcg-fil: clamp(16px, 1.3vw, 48px);
  position: absolute; top: 0; right: 0; z-index: 2;
  padding: var(--gcg-ring);
  background: var(--gcg-lime);
  border-bottom-left-radius: calc(var(--gcg-ring) + 1.2em);
  font-size: clamp(13px, .95vw, 34px);   /* = cỡ chữ nhãn, để 1.2em ≈ nửa chiều cao nhãn */
}
.gcg-notch::before,
.gcg-notch::after {
  content: "";
  position: absolute;
  width: var(--gcg-fil); height: var(--gcg-fil);
  background: radial-gradient(circle at 0 100%, transparent calc(var(--gcg-fil) - .5px), var(--gcg-lime) var(--gcg-fil));
  pointer-events: none;
}
.gcg-notch::before { top: 0; right: calc(100% - 1px); }
.gcg-notch::after  { top: calc(100% - 1px); right: 0; }
.gcg-notch .gcg-chip { display: block; padding: .6em 1.7em; font-size: 1em; }

/* =========================================================================
   HỘP XEM VIDEO (JS dựng, gắn vào <body> — không nằm trong <main>)
   Tự dựng lớp phủ position:fixed thay vì Fullscreen API (nhiều webview từ chối im lặng)
   ========================================================================= */
.gcg-lb {
  position: fixed; inset: 0; z-index: 10050;
  display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2vw, 40px);
  padding: 20px;
  background: rgba(12, 16, 12, .86);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.gcg-lb.open { opacity: 1; visibility: visible; }
.gcg-lb-stage {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  transform: scale(.94); transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.gcg-lb.open .gcg-lb-stage { transform: scale(1); }
.gcg-lb video {
  display: block;
  max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px);
  max-width: min(92vw, 1100px);
  border-radius: 18px;
  background: #000;
}
.gcg-lb-cap { color: #fff; text-align: center; max-width: min(92vw, 520px); font-size: 14px; line-height: 1.5; }
.gcg-lb-cap b { display: block; font-size: 16px; margin-bottom: 2px; }
.gcg-lb-cap span { opacity: .8; }
.gcg-lb-btn {
  width: 46px; height: 46px; flex: none;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: background .2s, transform .2s;
}
.gcg-lb-btn:hover { background: #d7f542; color: #151816; transform: scale(1.06); }
.gcg-lb-btn svg { width: 45%; height: 45%; }
.gcg-lb-close { position: absolute; top: 16px; right: 16px; }
@media (max-width: 720px) {
  .gcg-lb { padding: 56px 10px 16px; }
  .gcg-lb-prev, .gcg-lb-next { position: absolute; bottom: 18px; }
  .gcg-lb-prev { left: calc(50% - 56px); } .gcg-lb-next { right: calc(50% - 56px); }
  .gcg-lb video { max-height: calc(100dvh - 200px); }
}

/* Hộp xem chia sẻ bác sĩ (bấm nút + trên thẻ) — dùng chung lớp phủ .gcg-lb */
.gcg-dm-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  width: min(92vw, 880px);
  max-height: calc(100dvh - 60px);
  background: #fff;
  border-radius: 26px;
  overflow: hidden;
  transform: scale(.94); transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.gcg-lb.open .gcg-dm-card { transform: scale(1); }
.gcg-dm-photo { background: #dfe3e6; min-height: 100%; }
.gcg-dm-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.gcg-dm-body { padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; justify-content: center; gap: 6px; overflow: auto; }
.gcg-dm-tag { align-self: flex-start; padding: .35em .9em; border-radius: 999px; background: #e3f6fd; color: #1588b8; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.gcg-dm-name { font-size: clamp(20px, 2vw, 28px); line-height: 1.2; font-weight: 700; color: #151816; }
.gcg-dm-spec { font-size: 14px; color: #5f6670; }
.gcg-dm-quote { margin-top: 18px; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.65; color: #3e4441; }
@media (max-width: 720px) {
  .gcg-dm-card { grid-template-columns: 1fr; }
  .gcg-dm-photo { max-height: 42dvh; }
}

/* =========================================================================
   HIỆU ỨNG (chỉ khi JS đã chạy)
   ========================================================================= */
html.gcg-anim .gcg-rv {
  opacity: 0;
  translate: 0 44px;
  transition: opacity .9s cubic-bezier(.2,.8,.2,1) var(--d, 0s), translate .9s cubic-bezier(.2,.8,.2,1) var(--d, 0s);
}
html.gcg-anim .gcg-rv.is-in { opacity: 1; translate: 0 0; }
/* Thẻ mở đầu: chỉ trồi lên theo chiều dọc — dịch ngang sẽ làm lệch điểm bám cuộn */
html.gcg-anim .gcg-hcard.gcg-rv { translate: 0 80px; }
html.gcg-anim .gcg-hcard.gcg-rv.is-in { translate: 0 0; }

/* Thẻ bác sĩ lơ lửng nhẹ, mỗi thẻ lệch nhịp */
html.gcg-anim .gcg-doc.is-in .gcg-doc-in { animation: gcg-float 6.5s ease-in-out infinite; }
html.gcg-anim .gcg-doc:nth-child(4n+2).is-in .gcg-doc-in { animation-delay: -1.6s; }
html.gcg-anim .gcg-doc:nth-child(4n+3).is-in .gcg-doc-in { animation-delay: -3.2s; }
html.gcg-anim .gcg-doc:nth-child(4n).is-in .gcg-doc-in { animation-delay: -4.8s; }

/* Cột ảnh gia đình trôi dọc — mỗi bản (gốc + bản sao) dịch đúng 1 lần chiều cao của nó */
html.gcg-anim .gcg-fset { animation: gcg-up var(--gcg-dur, 40s) linear infinite; }
html.gcg-anim .gcg-fcol[data-dir="down"] .gcg-fset { animation-name: gcg-down; }
.gcg-fcol:hover .gcg-fset { animation-play-state: paused !important; }

/* Dải đánh giá chạy ngang */
html.gcg-anim .gcg-mset { animation: gcg-left var(--gcg-dur, 60s) linear infinite; }
.gcg-marquee:hover .gcg-mset,
.gcg-marquee.is-hold .gcg-mset { animation-play-state: paused; }

@keyframes gcg-up    { from { transform: translate3d(0, 0, 0); }     to { transform: translate3d(0, -100%, 0); } }
@keyframes gcg-down  { from { transform: translate3d(0, -100%, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes gcg-left  { from { transform: translate3d(0, 0, 0); }     to { transform: translate3d(-100%, 0, 0); } }
@keyframes gcg-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes gcg-bob   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes gcg-ping  { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.75); } 80%, 100% { box-shadow: 0 0 0 12px rgba(255,255,255,0); } }

@media (prefers-reduced-motion: reduce) {
  html.gcg-anim .gcg-rv { opacity: 1; translate: none; transition: none; }
  html.gcg-anim .gcg-fset, html.gcg-anim .gcg-mset,
  html.gcg-anim .gcg-doc .gcg-doc-in, .gcg-fmedia--play::after { animation: none !important; }
  .gcg-fset[data-fp-skip], .gcg-mset[data-fp-skip] { display: none; }
  .gcg-marquee { overflow-x: auto; }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1080px) {
  .gcg-doc-grid { grid-template-columns: repeat(2, 1fr); width: 100%; max-width: 640px; }
  /* 2 cột: thẻ cột phải thấp hơn */
  .gcg-doc:nth-child(n) { margin-top: 0; }
  .gcg-doc:nth-child(2n) { margin-top: clamp(20px, 4.6vw, 170px); }
  .gcg-fam-cols { width: 170vw; }
  .gcg-founder-grid { grid-template-columns: 1fr; }
  .gcg-founder-media { display: contents; }
  .gcg-founder-photo { order: -1; aspect-ratio: 4 / 3.4; }
  .gcg-cta-socket { position: static; order: 1; padding: 0; background: none; justify-self: start; }
  .gcg-cta-socket::before, .gcg-cta-socket::after { display: none; }
  .gcg-cta { box-shadow: 0 16px 34px -18px rgba(60, 90, 0, .45); }
  .gcg-x--founder { width: 80vw; height: 80vw; left: 40vw; top: 30vw; }
}
@media (max-width: 720px) {
  .gcg-hero-head { align-items: flex-start; flex-direction: column; }
  .gcg-arrows { display: none; }
  .gcg-hcard { width: 76vw; }
  .gcg-x--hero { width: 90vw; height: 90vw; right: -30vw; top: 40vw; }
  .gcg-doc-grid { gap: 14px; }
  .gcg-doc-quote { font-size: 12.5px; padding: 12px 12px 48px; }
  /* 5 cột ở giữa, chữ nằm dưới hẳn các cột */
  .gcg-families { height: auto; display: block; padding: 0 0 44px; }
  .gcg-fam-cols { position: relative; left: 50%; width: 180vw; height: 560px; grid-template-columns: repeat(7, 1fr); }
  .gcg-fcol--mid { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
  .gcg-fam-text { max-width: none; margin-top: 8px; }
  .gcg-rcard { width: 64vw; }
  .gcg-cta-socket { justify-self: stretch; }
  .gcg-cta { width: 100%; justify-content: space-between; }
}