/* =============================================================================
   DN Studio — Trang Giới thiệu
   Dựng theo gioi-thieu.png. Ảnh thiết kế rộng 864px, quy chiếu khung nhìn
   1600px ⇒ mọi số đo px dưới đây = số đo trên ảnh × 1.852 (ghi kèm trong
   chú thích dạng "d=<px trên ảnh>").

   Banner đầu trang là ảnh nền sáng (gt-hero.png), toàn bộ chữ dựng bằng CSS.
   Hai mục "Khác biệt ở tư duy" và "Hành trình hình thành" dùng lại đúng hai
   file nền cong của bản thiết kế (plate). Vòng tròn icon, khung thẻ và đường
   nối chấm đã in sẵn trong ảnh, nên chữ được đặt tuyệt đối theo % đo trực
   tiếp trên plate và co giãn bằng cqw — luôn khớp ở mọi bề rộng màn hình.
   ========================================================================== */

.gt {
  font-family: var(--dn-font);
  /* Cột nội dung dùng chung với trang home (h2-wrap = 1440px / gut 34px). */
  --gt-wrap: var(--h2-wrap, 1440px);
  --gt-gut:  var(--h2-gut, 34px);
  --gt-navy:      #000b1e;   /* nền hero / CTA / footer */
  --gt-blue:      #0257ee;   /* xanh thương hiệu (lấy từ icon trong plate) */
  --gt-blue-mid:  #1a76f0;
  --gt-blue-lite: #4e9cff;
  --gt-royal:     #0d51cf;   /* H1 banner — lấy từ chữ trên gt-hero.png */
  --gt-sky:       #e9f3ff;   /* nền banner, đúng tông trời của gt-hero.png */
  --gt-ink:       #0e1b33;   /* tiêu đề trên nền sáng */
  --gt-body:      #5d6b84;   /* chữ thường trên nền sáng */
  --gt-body-dark: #b4c4dc;   /* chữ thường trên nền tối */
  --gt-paper:     #f4f6f9;

  overflow-x: clip;
  background: var(--gt-paper);
}

/* Reset gói trong :where() ⇒ độ ưu tiên 0, mọi quy tắc một class bên dưới
   vẫn đặt lại được margin mà không phải nâng specificity. */
:where(.gt) :where(h1, h2, h3, p) { margin: 0; }
:where(.gt) :where(ul, ol, dl) { margin: 0; padding: 0; list-style: none; }

/* ------------------------------------------------------- nút bo tròn ---- */
/* d: cao 21.6, ngang 186, vòng tròn mũi tên d19.4 */
.gt-cta-pill {
  display: inline-flex; align-items: center; gap: 18px;
  min-height: 46px; padding: 0 6px 0 30px; border-radius: 999px;
  background: linear-gradient(96deg, #0f5fe6 0%, #1f7bf5 52%, #2f8bff 100%);
  box-shadow: 0 18px 34px -18px rgba(23, 110, 240, .95), inset 0 1px 0 rgba(255, 255, 255, .22);
  color: #fff; text-decoration: none; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease;
}
.gt-cta-pill span {
  font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.gt-cta-pill__arrow {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%;
  background: #fff; color: var(--gt-blue);
  display: flex; align-items: center; justify-content: center;
}
.gt-cta-pill__arrow svg { width: 17px; height: 17px; }
.gt-cta-pill:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -18px rgba(23, 110, 240, 1); }

.gt-cta-pill--sm { min-height: 42px; padding: 0 5px 0 26px; gap: 14px; }
.gt-cta-pill--sm span { font-size: 12.5px; }
.gt-cta-pill--sm .gt-cta-pill__arrow { width: 32px; height: 32px; }
.gt-cta-pill--sm .gt-cta-pill__arrow svg { width: 15px; height: 15px; }

/* Nav trắng dính đầu trang (giống front-page) — style chung ở kit/home2.css. */

/* ================================================================ HERO === */
/* Banner nền sáng gt-hero.png (1740 × 904): tranh vẽ cầu sông Hàn trải hết bề
   ngang. Nửa trái của ảnh là trời/nước rất nhạt nên cột chữ đặt đè lên vẫn đọc
   rõ, ::after chỉ là màn sương trắng bảo hiểm (ngang cho cột chữ, dọc cho dải
   số liệu nằm trên mặt nước). */
.gt-hero {
  position: relative; isolation: isolate;
  min-height: 760px; display: flex; justify-content: center; background: var(--gt-sky);
}
.gt-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background-repeat: no-repeat; background-position: 50% 36%; background-size: cover;
}
.gt-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(95deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .9) 26%,
                    rgba(255, 255, 255, .64) 44%, rgba(255, 255, 255, .18) 60%,
                    rgba(255, 255, 255, 0) 76%),
    linear-gradient(0deg, var(--gt-paper) 1%, rgba(244, 246, 249, .93) 9%,
                    rgba(244, 246, 249, .5) 21%, rgba(244, 246, 249, 0) 35%);
}
.gt-hero__in {
  position: relative; z-index: 2; width: 100%;
  padding-top: 76px; padding-bottom: 62px;
}
.gt-hero__copy { max-width: 660px; }

/* nhãn nhỏ + nét vẽ tay ngắn phía trước, đúng bản thiết kế */
.gt-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px; color: var(--gt-blue-mid);
  font-size: 13px; font-weight: 700; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase;
}
.gt-hero__eyebrow svg { width: 46px; height: 10px; flex: 0 0 auto; }

/* H1 bốn dòng, chữ thường (không in hoa), một tông xanh hoàng gia */
.gt-hero__title {
  margin: 20px 0 0; font-size: 50px; line-height: 1.19; font-weight: 800;
  letter-spacing: -.018em; color: var(--gt-royal);
}

.gt-hero__lead {
  margin-top: 22px; max-width: 580px;
  color: #4d5f7d; font-size: 17px; font-weight: 500; line-height: 1.75;
}
.gt-hero__lead b { color: var(--gt-ink); font-weight: 700; }

/* dòng nhấn nghiêng bên phải — Be Vietnam Pro nghiêng (đủ dấu tiếng Việt) */
/* Đặt trong khoảng trời trống giữa cụm cao ốc và trụ cầu (≈60% bề ngang ảnh)
   để chữ không đè lên dây văng hay ngọn tháp vàng. */
.gt-hero__note {
  position: absolute; left: 60%; top: 63px; z-index: 3;
  color: #2f6fd6; font-size: 20px; font-style: italic; font-weight: 600;
  line-height: 1.75; transform: rotate(-4deg); transform-origin: left center;
}
.gt-hero__note span { display: inline-block; margin-left: 14px; }

/* hai nút: nút đặc xanh + nút viền trắng, cùng chiều cao */
.gt-hero__acts { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }
.gt-hero__acts .h2-btn { min-height: 54px; padding: 0 32px; }
.gt-btn--line {
  background: rgba(255, 255, 255, .86); color: var(--gt-blue); border-color: #b3d1f7;
  box-shadow: 0 14px 30px -22px rgba(11, 58, 140, .6);
}
.gt-btn--line:hover { background: #fff; border-color: var(--gt-blue-lite); color: var(--gt-blue); }

/* dải số liệu: icon nét mảnh + số + nhãn, không khung, không vạch ngăn */
.gt-hero__stats { display: flex; flex-wrap: wrap; margin-top: 62px; gap: 26px 54px; }
.gt-stat { display: flex; align-items: center; gap: 14px; }
.gt-stat__ic { color: var(--gt-blue); flex: 0 0 auto; }
.gt-stat__ic .h2-svg { width: 34px; height: 34px; stroke-width: 1.35; }
.gt-hero__stats dt {
  font-size: 30px; font-weight: 800; line-height: 1.05;
  letter-spacing: -.02em; color: var(--gt-ink);
}
.gt-hero__stats dd {
  margin: 5px 0 0; color: var(--gt-body);
  font-size: 12.5px; font-weight: 500; line-height: 1.3;
}

/* ================================== KHÁC BIỆT Ở TƯ DUY (plate trắng) ===== */
/* File đang dùng: gt-khac-biet.png — 1942 × 809.
   Tâm 5 vòng icon đo trên file thật: 172.5 / 423 / 674.5 / 904.5 / 1135
   (8.88% · 21.78% · 34.73% · 46.58% · 58.45%), y = 494.5.           */
.gt-diff { position: relative; background: var(--gt-paper); }
/* Plate nằm trong .h2-wrap — không tràn full viewport (giống .h2-why__plate trên home). */
.gt-diff__in,
.gt-road__in { width: 100%; }
.gt-diff__plate {
  position: relative; width: 100%; aspect-ratio: 1942 / 809;
  container-type: inline-size;
}
.gt-diff__art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.gt-diff__copy { position: absolute; left: 9.02%; top: 17.8%; }
.gt-diff__brand {
  display: block; color: var(--gt-blue);
  font-size: 2.15cqw; font-weight: 800; line-height: 1;
  letter-spacing: .005em; text-transform: uppercase;
}
.gt-diff__copy h2 {
  margin-top: 1.35cqw;
  font-size: 2.13cqw; line-height: 1.35; font-weight: 800;
  letter-spacing: -.005em; text-transform: uppercase; color: var(--gt-ink);
}
.gt-diff__copy p {
  margin-top: 1.5cqw; color: var(--gt-body);
  font-size: .855cqw; line-height: 1.95;
}

/* nét vẽ tay nhỏ cạnh tiêu đề — d: plate x 757..873, y 149..207 */
.gt-diff__squiggle {
  position: absolute; left: 39%; top: 18.4%; width: 6%; height: 7.2%;
  color: #a9c4f0;
}

/* huy hiệu tròn — d: tâm plate (1717, 178), đường kính 134 */
.gt-diff__badge {
  position: absolute; left: 88.46%; top: 21.98%; transform: translate(-50%, -50%);
  box-sizing: border-box; width: 6.9%; aspect-ratio: 1; border-radius: 50%; padding: 0 .35cqw;
  background: radial-gradient(120% 120% at 32% 18%, #2f81f4 0%, #1259dd 48%, #0a3fb0 100%);
  box-shadow: 0 1.2cqw 2.4cqw -1cqw rgba(10, 50, 150, .55);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: #fff; font-family: var(--dn-font);
  font-size: .72cqw; font-weight: 600; line-height: 1.45; letter-spacing: -.01em;
}
.gt-diff__badge > span { display: block; white-space: nowrap; }
.gt-diff__badge b { font-size: 1.35em; font-weight: 700; }

/* 5 cột chữ căn giữa đúng tâm icon trên gt-khac-biet.png.
   Vòng icon đã in sẵn — desktop ẩn .gt-diff__ic. nowrap + <br> để cả 5 cột
   luôn đúng 2 dòng tiêu đề / 2 dòng mô tả, không cột nào cao hơn. */
.gt-diff__ic { display: none; }
.gt-diff__item {
  position: absolute; top: 70.4%; width: 11.4%; margin-left: -5.7%;
  text-align: center;
}
.gt-diff__item--1 { left: 8.88%; }
.gt-diff__item--2 { left: 21.78%; }
.gt-diff__item--3 { left: 34.73%; }
.gt-diff__item--4 { left: 46.58%; }
.gt-diff__item--5 { left: 58.45%; }
.gt-diff__item h3 {
  font-size: .86cqw; font-weight: 800; line-height: 1.22;
  letter-spacing: .04em; text-transform: uppercase; color: var(--gt-blue);
  white-space: nowrap;
}
.gt-diff__item p {
  margin: .65cqw 0 0;
  color: var(--gt-body);
  font-size: .68cqw; line-height: 1.5; font-weight: 500;
  white-space: nowrap;
}

/* ============================ HÀNH TRÌNH HÌNH THÀNH (plate navy) ========= */
/* Plate gốc: hanh--trinh-hinh-thanh-va-phat-trien.png — 2076 × 758 (2.739).
   Đo trên plate: 6 vòng icon tâm y = 290, d = 68;
   6 khung thẻ  x = 98/419/736/1060/1378/1700, rộng ≈ 286, y = 310 → 633.  */
.gt-road { position: relative; background: var(--gt-paper); margin-top: -1px; }
.gt-road__plate {
  position: relative; width: 100%; aspect-ratio: 2076 / 758;
  container-type: inline-size;
}
.gt-road__art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* d: baseline plate y = 198, font 36 */
.gt-road__title {
  position: absolute; left: 0; right: 0; top: 18.7%;
  text-align: center; color: #fff;
  font-size: 1.735cqw; font-weight: 800; line-height: 1.2;
  letter-spacing: .01em; text-transform: uppercase;
  text-shadow: 0 .15cqw 1cqw rgba(0, 10, 34, .6);
}

.gt-road__item { position: absolute; top: 46.31%; text-align: center; padding: 0 .8cqw; }
.gt-road__item--1 { left: 4.72%; width: 13.97%; }
.gt-road__item--2 { left: 20.18%; width: 13.68%; }
.gt-road__item--3 { left: 35.45%; width: 13.73%; }
.gt-road__item--4 { left: 51.06%; width: 13.68%; }
.gt-road__item--5 { left: 66.38%; width: 14.07%; }
.gt-road__item--6 { left: 81.89%; width: 13.68%; }

.gt-road__year {
  display: block; color: #3d8ff8;
  font-size: 1.123cqw; font-weight: 700; line-height: 1;
  text-transform: uppercase;
}
.gt-road__item h3 {
  margin-top: 1.06cqw; color: #fff;
  font-size: .985cqw; font-weight: 800; line-height: 1;
  letter-spacing: .03em; text-transform: uppercase;
}
.gt-road__item p {
  margin-top: 1.06cqw; color: #c5d5ee;
  font-size: .84cqw; line-height: 2;
}

/* ==================================================== CON NGƯỜI DNWEB === */
/* d: mục chạy từ y=1011 đến 1306; chữ đầu mục ở 1021, dải ảnh 1056 → 1281.5 */
.gt-people {
  position: relative; background: #fff; overflow: hidden;
  padding: 18px 0 45px; margin-top: -2px;
}
/* hai mảng chấm tròn nhạt hai bên — d: bước lưới 5.4 → 10px */
.gt-people__dots {
  position: absolute; z-index: 0; width: 132px; height: 190px;
  background-image: radial-gradient(#2f6fe0 1.5px, transparent 1.6px);
  background-size: 10px 10px;
  -webkit-mask-image: linear-gradient(120deg, #000 10%, rgba(0, 0, 0, .15) 90%);
          mask-image: linear-gradient(120deg, #000 10%, rgba(0, 0, 0, .15) 90%);
  opacity: .55;
}
.gt-people__dots--l { left: 3.2%; top: 96px; }
.gt-people__dots--r { right: 3.2%; top: 130px; }

.gt-people__head { position: relative; z-index: 2; text-align: center; }
.gt-people__kicker {
  display: block; color: var(--gt-ink);
  font-size: 26px; font-weight: 800; line-height: 1.2;
  letter-spacing: .005em; text-transform: uppercase;
}
.gt-people__kicker b { color: var(--gt-blue); font-weight: 800; }
.gt-people__head h2 {
  margin-top: 12px; color: var(--gt-ink);
  font-size: 28px; font-weight: 800; line-height: 1.2;
  letter-spacing: -.005em; text-transform: uppercase;
}
.gt-people__head p {
  margin-top: 14px; color: var(--gt-body); font-size: 12.5px; line-height: 1.7;
}

/* Dải ảnh — cao ≈ 26.1% bề ngang cột nội dung (không dùng vw viewport). */
.gt-people__band-wrap {
  position: relative; z-index: 1; container-type: inline-size;
}
.gt-people__band {
  position: relative; z-index: 1; width: 100%;
  height: clamp(300px, 26.1cqw, 470px); margin-top: -47px;
}

.gt-shot { position: absolute; margin: 0; overflow: hidden; }
/* viền trắng mảnh tách các tấm ảnh chồng nhau, đúng như bản thiết kế */
.gt-shot--l1, .gt-shot--l2, .gt-shot--r1, .gt-shot--r2 { box-shadow: 0 0 0 3px #fff; }
.gt-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Độ nghiêng đo trên thiết kế: mép ảnh dịch 0.325px mỗi 1px chiều cao
   ⇒ atan(0.325) ≈ 18°. Ảnh bên trong nghiêng ngược lại để không méo. */
.gt-shot--l1, .gt-shot--l2, .gt-shot--r1, .gt-shot--r2 { transform: skewX(-18deg); }
.gt-shot--l1 img, .gt-shot--l2 img, .gt-shot--r1 img, .gt-shot--r2 img {
  transform: skewX(18deg) scale(1.34);
}

.gt-shot--l1 { left: 5.36%;  top: 0;     width: 20%;    height: 58.8%; border-radius: 14px 14px 14px 26px; }
.gt-shot--l2 { left: 13.08%; top: 44.8%; width: 16.8%;  height: 55.2%; border-radius: 60px 14px 14px 14px; }
.gt-shot--r1 { left: 70.7%;  top: 10.9%; width: 21.2%;  height: 48.9%; border-radius: 14px 14px 26px 14px; }
.gt-shot--r2 { left: 67.5%;  top: 45.2%; width: 20.2%;  height: 54.5%; border-radius: 14px 60px 90px 14px; }

/* Ảnh giữa: mép trái là mũi tên "<" (đỉnh ở 43.5% chiều cao), mép phải
   nghiêng cùng nhịp với bốn ảnh bên. Toạ độ đo trực tiếp trên thiết kế. */
.gt-shot--mid {
  left: 24.54%; top: 13.7%; width: 46.94%; height: 84.7%;
  clip-path: polygon(6.4% 0, 100% 0, 87% 100%, 9.4% 100%, 0 43.5%);
}

/* thẻ số liệu trắng đè lên mép dưới ảnh giữa */
.gt-people__stats {
  position: absolute; z-index: 3; left: 28.2%; top: 72.7%; width: 37.96%; height: 27.1%;
  background: rgba(255, 255, 255, .96); border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 34px -20px rgba(10, 30, 70, .35);
  display: flex; align-items: center; justify-content: center; gap: 5%;
  padding: 0 4%;
}
.gt-people__stats > div { text-align: center; }
.gt-people__stats dt {
  color: #2b7cf0; font-size: 34px; font-weight: 700; line-height: 1.1;
}
.gt-people__stats dd {
  margin: 6px 0 0; color: var(--gt-ink);
  font-size: 13px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap;
}

/* ================================================ KHÁCH HÀNG TIN TƯỞNG == */
/* Nền trắng nối liền mục "Con người DNWeb" ở trên. Trái là khối chữ, phải là
   thẻ trắng chứa băng chuyền logo: 4 cột × 3 hàng mỗi trang, cuộn ngang bằng
   scroll-snap nên không cần thư viện — hai nút tròn và dải chấm do
   assets/js/gioi-thieu.js gắn vào.                                          */
.gt-clients {
  position: relative; background: #fff;
  padding: 30px 0 54px;
}
.gt-clients__in {
  display: grid; grid-template-columns: minmax(0, 404px) minmax(0, 1fr);
  gap: 0 56px; align-items: center;
}

.gt-clients__eyebrow {
  color: var(--gt-blue-mid);
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.gt-clients__copy h2 {
  margin-top: 14px; color: var(--gt-ink);
  font-size: 28px; font-weight: 800; line-height: 1.32;
  letter-spacing: -.012em; text-transform: uppercase; text-wrap: balance;
}
.gt-clients__lead {
  margin-top: 16px; color: var(--gt-body);
  font-size: 14px; line-height: 1.95;
}

/* Nút chính — nền xanh đặc, mũi tên nằm thẳng trong nút (không vòng tròn). */
.gt-clients__go {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 28px;
  min-height: 46px; padding: 0 26px; border-radius: 999px;
  background: linear-gradient(96deg, #0f5fe6 0%, #1f7bf5 58%, #2f8bff 100%);
  box-shadow: 0 18px 32px -18px rgba(23, 110, 240, .95);
  color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease;
}
.gt-clients__go svg { width: 17px; height: 17px; transition: transform .18s ease; }
.gt-clients__go:hover { transform: translateY(-2px); box-shadow: 0 22px 38px -18px rgba(23, 110, 240, 1); }
.gt-clients__go:hover svg { transform: translateX(3px); }

/* ------------------------------------------------- băng chuyền logo ----- */
.gt-slider__frame { position: relative; }
.gt-slider__card {
  border-radius: 26px; background: #fff; border: 1px solid #e5edf9;
  box-shadow: 0 26px 54px -32px rgba(12, 40, 92, .38);
  padding: 44px 62px 48px; overflow: hidden;
}
.gt-slider__track {
  display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-auto-columns: calc((100% - 3 * 30px) / 4);
  gap: 28px 30px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.gt-slider__track::-webkit-scrollbar { display: none; }
.gt-slider__track > li { scroll-snap-align: start; }

/* hai nút tròn đè lên mép thẻ, canh giữa theo chiều cao thẻ */
.gt-slider__nav {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  width: 36px; height: 36px; padding: 0; border-radius: 50%;
  border: 1px solid #e2eaf7; background: #fff; color: #52678a; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 22px -12px rgba(12, 40, 92, .55);
  transition: color .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.gt-slider__nav svg { width: 17px; height: 17px; }
.gt-slider__nav--prev { left: 16px; }
.gt-slider__nav--next { right: 16px; }
.gt-slider__nav:hover { color: var(--gt-blue); border-color: #bcd6fb; box-shadow: 0 14px 26px -12px rgba(12, 40, 92, .6); }
.gt-slider__nav:focus-visible { outline: 2px solid var(--gt-blue-lite); outline-offset: 2px; }
.gt-slider__nav.is-off { opacity: .35; pointer-events: none; }

/* dải chấm — chấm đang xem kéo dài thành viên thuốc xanh */
.gt-slider__dots { display: flex; justify-content: center; gap: 7px; margin-top: 22px; }
.gt-slider__dots:empty { display: none; }
.gt-slider__dot {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px;
  background: #cad8ec; cursor: pointer;
  transition: width .22s ease, background .22s ease;
}
.gt-slider__dot.is-on { width: 20px; background: var(--gt-blue-mid); }
.gt-slider__dot:focus-visible { outline: 2px solid var(--gt-blue-lite); outline-offset: 2px; }
.gt-logo {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: #1b3f8f; min-width: 0;
}
.gt-logo.is-stack { flex-direction: column; gap: 3px; }
.gt-logo__mark { flex: 0 0 auto; line-height: 0; }
.gt-logo__mark svg { height: 26px; width: auto; }
.gt-logo.is-stack .gt-logo__mark svg { height: 20px; }
.gt-logo__text { display: flex; flex-direction: column; line-height: 1.05; }
.gt-logo.is-stack .gt-logo__text { align-items: center; }
.gt-logo__text b {
  font-size: 14px; font-weight: 800; letter-spacing: .01em; white-space: nowrap;
}
.gt-logo__text i {
  font-style: normal; font-size: 7px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; opacity: .8;
}
.gt-logo__text.is-nocaps b { font-size: 13px; font-weight: 700; }

.gt-logo--minh    { color: #d9232e; }
.gt-logo--coffee  { color: #b5651d; }
.gt-logo--furni   { color: #12203c; }
.gt-logo--khoaanh { color: #d3922f; }
.gt-logo--green   { color: #2e9c4a; }
.gt-logo--seaview { color: #2f7fd0; }
.gt-logo--baominh { color: #c8511f; }
.gt-logo--hhoaanh { color: #d3922f; }
.gt-logo--moc     { color: #12503a; }
.gt-logo--mart    { color: #1f6fd0; }
.gt-logo--phucan  { color: #e63946; }
.gt-logo--thanhdo { color: #455a64; }
.gt-logo--songha  { color: #e65100; }
.gt-logo--anphu   { color: #1565c0; }
.gt-logo--dental  { color: #00838f; }
.gt-logo--viethome { color: #6d4c41; }
.gt-logo--sunrise { color: #f9a825; }
.gt-logo--megafit { color: #c62828; }
.gt-logo--linchi  { color: #ad1457; }
.gt-logo--golden  { color: #ef6c00; }
.gt-logo--techpro { color: #283593; }
.gt-logo--haiau   { color: #0277bd; }
.gt-logo--saigon  { color: #7b1fa2; }
.gt-logo--dongduong { color: #00897b; }

/* ================================================== SẴN SÀNG HỢP TÁC === */
/* Dải xanh đặc, mép trên là hai lớp sóng (trắng đè lên xanh nhạt) nối liền
   nền trắng của mục logo phía trên. Trái là chữ, phải là dòng viết tay nghiêng
   + hàng nút liên hệ. Dùng lại .h2-chip của home2 nhưng icon được bọc trong
   vòng tròn trắng cho khớp bản thiết kế.                                    */
.gt-ready {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(102deg, #1a74ef 0%, #0f5ada 48%, #0a45bd 100%);
}
.gt-ready__wave {
  position: absolute; left: 0; top: -1px; z-index: 1;
  width: 100%; height: 118px; display: block;
}
.gt-ready__in {
  position: relative; z-index: 2;
  padding-top: 132px; padding-bottom: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 48px;
}

.gt-ready__copy h2 {
  color: #fff; font-size: 27px; font-weight: 800; line-height: 1.34; letter-spacing: -.01em;
}
.gt-ready__copy p {
  margin-top: 14px; color: #cfe0fb; font-size: 13.5px; line-height: 1.95;
}

.gt-ready__side { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
/* Dòng viết tay: site chỉ dùng Be Vietnam Pro (font script thiếu dấu tiếng
   Việt), nên nghiêng thật + xoay nhẹ để ra chất chữ tay. */
.gt-ready__script {
  color: #a9caff; font-size: 16px; font-weight: 600; font-style: italic;
  line-height: 1.5; transform: rotate(-3deg); transform-origin: right bottom;
  padding-right: 10px; white-space: nowrap;
}
.gt-ready__row { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; justify-content: flex-end; }

/* icon trong vòng tròn trắng */
.gt-ready__row .h2-chip { min-height: 46px; padding: 0 20px 0 7px; gap: 11px; font-size: 13.5px; }
.gt-ready__row .h2-chip .h2-svg {
  box-sizing: border-box; width: 32px; height: 32px; padding: 8px; flex: 0 0 auto;
  border-radius: 50%; background: #fff; color: #0f5ada;
}
.gt-ready__row .h2-chip--go { padding: 0 24px; gap: 9px; }
.gt-ready__row .h2-chip--go .h2-svg {
  width: 17px; height: 17px; padding: 0; border-radius: 0; background: none; color: inherit;
}

/* footer dùng lại của trang chủ 2 (file này chỉ nạp ở trang Giới thiệu) */
.h2-foot { background: #010d20; }
.h2-foot__glow { opacity: .16; }

/* =============================================================== < 1440 = */
@media (max-width: 1439px) {
  .gt-hero { min-height: 704px; }
  .gt-hero__in { padding-top: 66px; }
  .gt-hero__title { font-size: 43px; }
  .gt-hero__note { top: 58px; font-size: 18px; }
  .gt-hero__lead { font-size: 16px; }
  .gt-hero__acts { margin-top: 30px; }
  .gt-hero__stats { margin-top: 50px; gap: 22px 42px; }
  .gt-hero__stats dt { font-size: 27px; }
  .gt-stat__ic .h2-svg { width: 31px; height: 31px; }
  .gt-clients__in { grid-template-columns: minmax(0, 352px) minmax(0, 1fr); gap: 0 44px; }
  .gt-clients__copy h2 { font-size: 25px; }
  .gt-slider__card { padding: 34px 54px; }
  .gt-slider__track { grid-auto-columns: calc((100% - 3 * 24px) / 4); gap: 32px 24px; }
  .gt-ready__copy h2 { font-size: 24px; }
  .gt-ready__in { padding-top: 118px; padding-bottom: 54px; gap: 32px; }
  .gt-people__kicker { font-size: 23px; }
  .gt-people__head h2 { font-size: 25px; }
  .gt-people__stats dt { font-size: 29px; }
  .gt-people__stats dd { font-size: 11.5px; }
  .gt-logo__text b { font-size: 12.5px; }
  .gt-logo__mark svg { height: 22px; }
}

/* =============================================================== < 1100 = */
@media (max-width: 1099px) {
  /* Hẹp hơn 1100px thì chữ đè lên tranh sẽ rối: tách hẳn hai tầng — tranh nằm
     trên, cột chữ nằm dưới trên nền sky (nav trắng nằm riêng phía trên). */
  .gt-hero { display: block; min-height: 0; }
  .gt-hero__bg {
    position: relative; height: 58vw; min-height: 250px; max-height: 360px;
    background-position: 64% 62%;
  }
  .gt-hero__bg::after {
    content: ""; position: absolute; inset: auto 0 -1px 0; height: 80px;
    background: linear-gradient(0deg, var(--gt-sky) 8%, rgba(233, 243, 255, 0) 100%);
  }
  .gt-hero::after { display: none; }
  .gt-hero__in { padding-top: 32px; padding-bottom: 52px; }
  .gt-hero__copy { max-width: none; }
  .gt-hero__note { display: none; }
  .gt-hero__title { font-size: 34px; }
  .gt-hero__lead { font-size: 15.5px; max-width: 620px; }
  .gt-hero__lead br { display: none; }
  .gt-hero__stats { margin-top: 36px; gap: 20px 36px; }
  .gt-hero__stats dt { font-size: 24px; }
  .gt-stat__ic .h2-svg { width: 29px; height: 29px; }

  /* Plate: dưới 1100px chữ trên nền in sẵn sẽ quá nhỏ để đọc → chuyển sang
     bố cục xếp dọc, ẩn plate và vẽ lại vòng tròn icon bằng CSS. */
  .gt-diff__plate { aspect-ratio: auto; padding: 54px 0 60px; }
  .gt-diff__art, .gt-diff__squiggle { display: none; }
  .gt-diff__copy,
  .gt-diff__item { position: static; width: auto; left: auto; top: auto; }
  .gt-diff__in,
  .gt-road__in { padding-left: 24px; padding-right: 24px; }
  .gt-diff__plate { max-width: 720px; margin: 0 auto; padding-left: 0; padding-right: 0; }
  .gt-diff__brand { font-size: 17px; }
  .gt-diff__copy h2 { font-size: 25px; margin-top: 10px; }
  .gt-diff__copy h2 br { display: none; }
  .gt-diff__copy p { font-size: 14px; margin-top: 14px; }
  .gt-diff__copy p br { display: none; }
  .gt-diff__badge {
    position: static; transform: none; width: 128px; margin: 26px 0 0;
    font-size: 13px;
  }
  .gt-diff__list { display: grid; gap: 26px; margin-top: 34px; }
  .gt-diff__item { display: grid; grid-template-columns: 46px 1fr; column-gap: 16px; margin-left: 0; text-align: left; white-space: normal; }
  .gt-diff__ic {
    display: flex; align-items: center; justify-content: center; grid-row: 1 / 3;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--gt-blue); color: #fff;
    box-shadow: 0 0 0 7px rgba(207, 221, 252, .85);
  }
  .gt-diff__ic .h2-svg { width: 22px; height: 22px; }
  .gt-diff__item h3 { font-size: 14px; letter-spacing: .04em; align-self: center; white-space: normal; }
  .gt-diff__item h3 br,
  .gt-diff__item p br { display: none; }
  .gt-diff__item p { font-size: 14px; margin-top: 6px; max-width: none; line-height: 1.7; white-space: normal; }

  .gt-road__plate { aspect-ratio: auto; padding: 46px 0 54px; background: #041232; }
  .gt-road__art { display: none; }
  .gt-road__title { position: static; font-size: 24px; margin-bottom: 30px; }
  .gt-road__item { position: static; width: auto; left: auto; padding: 20px 22px; text-align: left;
                   border: 1px solid rgba(255, 255, 255, .22); border-radius: 16px; }
  .gt-road__list { display: grid; gap: 16px; max-width: 720px; margin: 0 auto; }
  .gt-road__year { font-size: 17px; }
  .gt-road__item h3 { font-size: 15px; margin-top: 8px; }
  .gt-road__item p { font-size: 14px; margin-top: 8px; line-height: 1.75; }

  .gt-people__band-wrap { padding-left: 24px; padding-right: 24px; }
  .gt-people__band { height: auto; min-height: 0; display: grid; gap: 12px;
                     grid-template-columns: 1fr 1fr; padding: 0; max-width: 720px; margin: 22px auto 0; }
  .gt-shot {
    position: static; transform: none; width: auto; height: 190px;
    border-radius: 16px !important; box-shadow: none;
  }
  .gt-shot img { transform: none; }
  .gt-shot--mid { grid-column: 1 / -1; clip-path: none; height: 240px; }
  .gt-people__stats { position: static; grid-column: 1 / -1; width: auto; height: auto;
                      border-radius: 16px; padding: 20px 14px; box-shadow: none;
                      background: var(--gt-paper); }
  .gt-people__dots { display: none; }

  /* xếp dọc: khối chữ canh giữa ở trên, băng chuyền logo 3 cột ở dưới */
  .gt-clients { padding: 20px 0 62px; }
  .gt-clients__in { grid-template-columns: 1fr; gap: 34px; justify-items: center; }
  .gt-clients__copy { max-width: 560px; text-align: center; }
  .gt-clients__copy br { display: none; }
  .gt-clients__copy h2 { font-size: 24px; }
  .gt-slider { width: 100%; }
  .gt-slider__card { padding: 30px 52px; }
  .gt-slider__track { grid-auto-columns: calc((100% - 2 * 24px) / 3); gap: 28px 24px; }

  .gt-ready__in {
    padding-top: 104px; padding-bottom: 50px;
    flex-direction: column; align-items: center; text-align: center; gap: 26px;
  }
  .gt-ready__wave { height: 88px; }
  .gt-ready__side { align-items: center; }
  .gt-ready__row { justify-content: center; }
}

/* ================================================================ < 640 = */
@media (max-width: 639px) {
  .gt-hero__bg { height: 62vw; min-height: 210px; }
  .gt-hero__in { padding-top: 26px; }
  .gt-hero__title { font-size: 27px; }
  .gt-hero__lead { font-size: 14.5px; }
  .gt-hero__acts { gap: 10px; }
  .gt-hero__acts .h2-btn { flex: 1 1 210px; min-height: 48px; padding: 0 20px; font-size: 14px; }
  .gt-hero__stats { margin-top: 30px; gap: 18px 26px; }
  .gt-hero__stats > div { flex: 1 1 150px; }
  .gt-hero__stats dt { font-size: 22px; }
  .gt-hero__stats dd { font-size: 12px; }
  .gt-stat { gap: 11px; }
  .gt-stat__ic .h2-svg { width: 26px; height: 26px; }
  .gt-cta-pill span { font-size: 11.5px; white-space: normal; }
  .gt-cta-pill { padding-left: 20px; }

  .gt-people__kicker { font-size: 19px; }
  .gt-people__head h2 { font-size: 20px; }
  .gt-people__band { grid-template-columns: 1fr; }
  .gt-people__stats { flex-direction: column; gap: 16px; }
  .gt-clients__copy h2 { font-size: 20px; }
  .gt-clients__lead { font-size: 13.5px; }
  .gt-slider__card { padding: 24px 20px; border-radius: 20px; }
  .gt-slider__track { grid-auto-columns: calc((100% - 18px) / 2); gap: 24px 18px; }
  .gt-slider__nav { display: none; }

  .gt-ready__wave { height: 62px; }
  .gt-ready__in { padding-top: 76px; padding-bottom: 42px; }
  .gt-ready__copy h2 { font-size: 20px; }
  .gt-ready__copy p br { display: none; }
  .gt-ready__script { font-size: 14px; white-space: normal; transform: none; padding-right: 0; }
  .gt-ready__row { flex-direction: column; align-items: stretch; align-self: stretch; gap: 10px; }
  .gt-ready__row .h2-chip { justify-content: center; }
}