/* GH Media — stylesheet nền.
   File này từng là 54 dòng minified chồng nhiều lớp vá. Đã format lại và bỏ
   code chết; THỨ TỰ RULE GIỮ NGUYÊN 100% để cascade không đổi.
   Ghi chú: site chủ ý luôn bật animation, nên không có block
   prefers-reduced-motion nào ở đây. Xem motion-system.css cho lớp chuyển động. */
:root {
  --navy:#092652;
  --navy-2:#12386b;
  --gold:#b18a38;
  --gold-soft:#d9c48b;
  --magenta:#b72c6a;
  --ink:#182b45;
  --muted:#647286;
  --line:#e7e3da;
  --paper:#fff;
  --soft:#f7f9fc;
  --radius:14px;
  --shadow:0 18px 50px rgba(9,38,82,.09);
  --motion-fast:.25s;
  --motion-normal:.6s;
  --motion-section:.9s;
  --motion-hero:1.2s;
  --ease-primary:cubic-bezier(.16,1,.3,1);
  --ease-smooth:cubic-bezier(.22,1,.36,1);
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
}
body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:"Be Vietnam Pro",Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
}
a {
  color:inherit;
  text-decoration:none;
}
.container {
  width:86%;
  max-width:1280px;
  margin:auto;
}
.skip-link {
  position:fixed;
  left:16px;
  top:-100px;
  z-index:50;
  padding:8px 14px;
  background:var(--navy);
  color:#fff;
  border-radius:5px;
}
.skip-link:focus {
  top:16px;
}
.site-header {
  height:76px;
  position:fixed;
  left:0;
  right:0;
  top:0;
  z-index:20;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:transform .45s var(--ease-smooth),background .35s,border-color .35s,box-shadow .35s;
}
.site-header.is-scrolled {
  background:rgba(255,255,255,.94);
  border-color:#eee;
  backdrop-filter:blur(12px);
  box-shadow:0 8px 24px rgba(9,38,82,.08);
}
.site-header.is-hidden {
  transform:translateY(-100%);
}
.nav-wrap {
  height:100%;
  display:flex;
  align-items:center;
  gap:28px;
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--navy);
  font-weight:800;
  letter-spacing:.16em;
  font-size:13px;
  white-space:nowrap;
}
.brand-mark {
  width:37px;
  height:37px;
  border:2px solid var(--gold);
  border-radius:50%;
  display:grid;
  place-items:center;
  position:relative;
  transform:rotate(-12deg);
  background:rgba(255,255,255,.8);
}
.brand-mark:after {
  content:"";
  position:absolute;
  width:9px;
  height:9px;
  border:1px solid var(--magenta);
  border-radius:50%;
  right:-4px;
  top:2px;
  background:#fff;
}
.brand-mark span {
  transform:rotate(12deg);
  font-size:11px;
  letter-spacing:-.08em;
}
.site-nav {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  margin-left:auto;
}
.site-nav a {
  font-size:13px;
  color:#5d6878;
  font-weight:500;
  position:relative;
  padding:28px 0;
}
.site-header:not(.is-scrolled) .site-nav a {
  color:var(--navy);
}
.site-nav a:after {
  content:"";
  position:absolute;
  height:2px;
  left:0;
  right:100%;
  bottom:18px;
  background:var(--magenta);
  transition:right .25s;
}
.site-nav a:hover,
.site-nav a.active {
  color:var(--navy);
}
.site-nav a:hover:after,
.site-nav a.active:after {
  right:0;
}
.button {
  height:46px;
  padding:0 21px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  border-radius:7px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  transition:transform .2s,background .2s,border-color .2s,box-shadow .2s;
  white-space:nowrap;
}
.button:focus-visible,
.site-nav a:focus-visible,
.text-link:focus-visible,
.service-card:focus-visible,
.talent-card a:focus-visible,
.project-card:focus-visible,
.story-card:focus-visible {
  outline:3px solid rgba(183,44,106,.35);
  outline-offset:4px;
}
.button:active {
  transform:translateY(1px) scale(.98);
}
.button-primary {
  background:var(--navy);
  color:#fff;
  border:1px solid var(--navy);
}
.button-primary:hover {
  background:var(--navy-2);
  box-shadow:0 8px 20px rgba(9,38,82,.18);
}
.button-outline {
  color:var(--navy);
  border:1px solid var(--gold);
  background:transparent;
}
.button-outline:hover {
  background:#fbf8ef;
  border-color:var(--gold);
}
.button-ghost {
  border:1px solid var(--line);
  color:var(--navy);
  background:#fff;
}
.button-ghost:hover {
  border-color:var(--navy);
}
.button-gold-outline {
  color:var(--navy);
  border:1px solid var(--gold);
  background:rgba(255,255,255,.55);
}
.button-gold-outline:hover {
  background:#fff;
  border-color:var(--gold);
}
.button-gold {
  border:1px solid var(--gold);
  color:#fff;
  background:var(--gold);
}
.button-gold:hover {
  background:#967327;
}
.menu-toggle {
  display:none;
}
.intro-loader {
  position:fixed;
  inset:0;
  z-index:100;
  background:transparent;
  display:grid;
  place-items:center;
  pointer-events:auto;
  transition:visibility 0s linear .75s;
}
.intro-loader:before,
.intro-loader:after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:50%;
  background:var(--navy);
  transition:transform .75s var(--ease-primary);
}
.intro-loader:before {
  left:0;
}
.intro-loader:after {
  right:0;
}
.intro-loader.done {
  visibility:hidden;
  pointer-events:none;
}
.intro-loader.done:before {
  transform:translateX(-100%);
}
.intro-loader.done:after {
  transform:translateX(100%);
}
.loader-mark {
  width:86px;
  height:86px;
  border:1px solid var(--gold-soft);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:800;
  letter-spacing:-.06em;
  font-size:22px;
  position:relative;
  z-index:1;
  animation:loaderMark 1.2s var(--ease-smooth) both;
}
.loader-mark:after {
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid var(--magenta);
  border-radius:50%;
  clip-path:inset(0 100% 0 0);
  animation:loaderRing 1s var(--ease-primary) .25s forwards;
}
.loader-line {
  position:absolute;
  width:180px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);
  animation:loaderSweep 1s ease .2s both;
}

@keyframes loaderMark {
  from {
    opacity:0;
    transform:translateY(18px) scale(.9);
  }
  to {
    opacity:1;
    transform:none;
  }
}

@keyframes loaderRing {
  to {
    clip-path:inset(0 0 0 0);
  }
}

@keyframes loaderSweep {
  from {
    transform:scaleX(0);
    opacity:0;
  }
  to {
    transform:scaleX(1);
    opacity:1;
  }
}
.hero {
  min-height:100dvh;
  padding-top:76px;
  position:relative;
  overflow:hidden;
}
.hero-grid {
  display:grid;
  grid-template-columns:38% 62%;
  min-height:calc(100dvh - 76px);
  align-items:center;
}
.hero-copy {
  padding:48px 44px 55px 0;
  position:relative;
  z-index:1;
}
.eyebrow {
  margin:0 0 18px;
  color:var(--magenta);
  font-size:11px;
  font-weight:800;
  letter-spacing:.2em;
  line-height:1.3;
}
.hero h1 {
  margin:0;
  color:var(--navy);
  font-size:clamp(43px,4.35vw,64px);
  line-height:1.08;
  letter-spacing:-.045em;
  font-weight:800;
}
.hero h1 span {
  display:block;
  overflow:hidden;
  transform:translateY(110%);
  opacity:0;
}
.page-ready .hero h1 span {
  animation:lineIn var(--motion-hero) var(--ease-primary) forwards;
}
.page-ready .hero h1 span:nth-child(2) {
  animation-delay:.09s;
}
.page-ready .hero h1 span:nth-child(3) {
  animation-delay:.18s;
}
.hero h1 em,
.section h2 em {
  font-style:normal;
  color:var(--gold);
}
.hero-lede {
  max-width:390px;
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
  margin:25px 0 29px;
}
.hero-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.hero-note {
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:30px;
  color:#8290a2;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.note-dot {
  width:7px;
  height:7px;
  background:var(--magenta);
  border-radius:50%;
  box-shadow:0 0 0 5px rgba(183,44,106,.12);
}
.hero-media {
  height:min(530px,60dvh);
  position:relative;
  overflow:hidden;
  border-radius:0 0 0 var(--radius);
  margin-right:calc((100vw - min(86vw,1280px))/-2);
  transform:translateY(var(--hero-shift,0));
  transition:transform .15s linear;
}
.hero-media img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:82% center;
  filter:saturate(.94);
}
.hero-media:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(9,38,82,.06),transparent 42%);
}
.media-stamp {
  position:absolute;
  right:27px;
  top:28px;
  color:#fff;
  display:flex;
  align-items:center;
  gap:10px;
  z-index:1;
}
.media-stamp strong {
  font-size:36px;
  line-height:1;
  font-weight:500;
  color:var(--gold-soft);
}
.media-stamp span {
  font-size:9px;
  line-height:1.3;
  letter-spacing:.16em;
}
.media-caption {
  position:absolute;
  left:28px;
  bottom:26px;
  z-index:1;
  color:#fff;
  max-width:185px;
  font-size:11px;
  line-height:1.45;
}
.hero-swoop {
  position:absolute;
  left:-30px;
  bottom:-45px;
  width:220px;
  height:120px;
  border-top:1px solid var(--gold);
  border-radius:50%;
  transform:rotate(-15deg);
  opacity:.7;
}

@keyframes lineIn {
  to {
    transform:none;
    opacity:1;
  }
}
.section {
  padding:108px 0;
}
.section-soft {
  background:var(--soft);
}
.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:85px;
  align-items:center;
}
.about-media {
  height:430px;
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.about-media img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:11% center;
}
.image-label {
  position:absolute;
  bottom:18px;
  left:20px;
  color:#fff;
  font-size:10px;
  letter-spacing:.15em;
  background:rgba(9,38,82,.78);
  padding:7px 11px;
  border-radius:4px;
}
.section h2 {
  margin:0;
  color:var(--navy);
  font-size:clamp(31px,3.2vw,43px);
  line-height:1.15;
  letter-spacing:-.04em;
  font-weight:800;
}
.about-copy>p:not(.eyebrow) {
  max-width:490px;
  color:var(--muted);
  font-size:14px;
  line-height:1.75;
  margin:23px 0 0;
}
.metrics {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  margin-top:41px;
  border-top:1px solid var(--line);
  padding-top:22px;
}
.metric {
  min-width:0;
  padding:0 15px;
  border-right:1px solid var(--line);
}
.metric:first-child {
  padding-left:0;
}
.metric:last-child {
  border:0;
}
.metric-icon {
  display:block;
  color:var(--gold);
  font-size:22px;
  line-height:1;
  margin-bottom:10px;
}
.metric strong {
  display:block;
  color:var(--navy);
  font-size:27px;
  line-height:1.1;
}
.metric small {
  display:block;
  color:#7b8796;
  font-size:10px;
  line-height:1.4;
  margin-top:7px;
}
.section-head {
  max-width:680px;
  margin:0 auto 48px;
}
.section-head.centered {
  text-align:center;
}
.section-head p:last-child {
  color:var(--muted);
  font-size:14px;
  max-width:540px;
  margin:17px auto 0;
}
.service-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.service-card {
  min-height:210px;
  position:relative;
  padding:29px 30px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.service-card:hover {
  transform:translateY(-5px);
  box-shadow:0 13px 28px rgba(9,38,82,.09);
  border-color:#d3c7a4;
}
.service-icon {
  display:block;
  color:var(--gold);
  font-size:28px;
  line-height:1;
  margin-bottom:22px;
}
.service-card h3 {
  margin:0;
  text-transform:uppercase;
  color:var(--navy);
  font-size:16px;
  letter-spacing:.01em;
}
.service-card p {
  margin:10px 26px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}
.card-arrow {
  position:absolute;
  right:25px;
  bottom:24px;
  color:var(--magenta);
  font-size:20px;
  transition:transform .2s;
}
.service-card:hover .card-arrow {
  transform:translate(3px,-3px);
}
.talent-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.talent-card {
  border-radius:var(--radius);
  overflow:hidden;
  background:#f2f5f9;
  transition:transform .25s,box-shadow .25s;
}
.talent-card:hover {
  transform:translateY(-5px);
  box-shadow:var(--shadow);
}
.talent-portrait {
  height:310px;
  overflow:hidden;
  background:#e8edf5;
}
.talent-portrait img {
  width:400%;
  height:100%;
  object-fit:cover;
  object-position:0 center;
  transition:transform .35s;
}
.talent-card:hover .talent-portrait img {
  transform:scale(1.03);
}
.portrait-b img {
  transform:translateX(-25%);
}
.portrait-c img {
  transform:translateX(-50%);
}
.portrait-d img {
  transform:translateX(-75%);
}
.talent-info {
  padding:16px 17px 18px;
  background:var(--navy);
  color:#fff;
}
.talent-info h3 {
  margin:0;
  font-size:16px;
  letter-spacing:.02em;
}
.talent-info p {
  margin:3px 0 14px;
  color:#d8e1ee;
  font-size:11px;
}
.talent-info p span {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--magenta);
  margin-right:6px;
}
.talent-info a {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.2);
  color:var(--gold-soft);
  font-size:11px;
  font-weight:700;
}
.center-link {
  text-align:center;
  margin-top:33px;
}
.text-link {
  color:var(--navy);
  font-size:13px;
  font-weight:700;
  border-bottom:1px solid var(--gold);
  padding-bottom:6px;
}
.text-link span {
  color:var(--magenta);
  margin-left:8px;
}
.timeline {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:22px;
  position:relative;
}
.timeline-line {
  height:1px;
  background:repeating-linear-gradient(90deg,var(--gold) 0 6px,transparent 6px 13px);
  position:absolute;
  top:31px;
  left:9%;
  right:9%;
}
.timeline-step {
  text-align:center;
  position:relative;
}
.step-badge {
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  margin:0 auto 20px;
  border-radius:50%;
  background:var(--navy);
  border:5px solid var(--soft);
  box-shadow:0 0 0 1px var(--gold);
  color:#fff;
  font-weight:700;
  font-size:13px;
  position:relative;
  z-index:1;
}
.timeline-step h3 {
  margin:0;
  color:var(--navy);
  font-size:15px;
}
.timeline-step p {
  max-width:170px;
  margin:8px auto 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
}
.casting {
  padding:28px 0 45px;
}
.casting-panel {
  min-height:156px;
  border:1px solid var(--gold-soft);
  border-radius:var(--radius);
  display:grid;
  grid-template-columns:88px 1fr auto;
  align-items:center;
  gap:28px;
  padding:28px 42px;
  position:relative;
  overflow:hidden;
  background:#fff;
}
.casting-panel:after,
.final-panel:after {
  content:"";
  position:absolute;
  width:380px;
  height:180px;
  right:-90px;
  bottom:-120px;
  border:20px solid rgba(183,44,106,.12);
  border-radius:50%;
  transform:rotate(-16deg);
}
.casting-panel h2,
.final-panel h2 {
  font-size:clamp(22px,2.3vw,31px);
  max-width:700px;
}
.casting-panel .eyebrow {
  margin-bottom:10px;
}
.casting-panel p:last-child {
  margin:7px 0 0;
  color:var(--muted);
  font-size:13px;
}
.seal {
  width:72px;
  height:72px;
  border:1px solid var(--gold);
  border-radius:50%;
  display:grid;
  place-items:center;
  text-align:center;
  line-height:1;
  color:var(--navy);
  font-size:20px;
  font-weight:800;
  letter-spacing:-.06em;
  position:relative;
  z-index:1;
}
.seal small {
  font-size:8px;
  letter-spacing:.12em;
  color:var(--magenta);
}
.why-grid {
  display:grid;
  grid-template-columns:24% 40% 36%;
  gap:37px;
  align-items:center;
}
.why-copy>p:last-child {
  font-size:14px;
  color:var(--muted);
  line-height:1.7;
  margin-top:22px;
}
.why-media {
  height:445px;
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
}
.why-media img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:67% center;
}
.why-media span {
  position:absolute;
  left:18px;
  bottom:18px;
  color:#fff;
  font-size:10px;
  letter-spacing:.17em;
  background:rgba(9,38,82,.78);
  padding:7px 11px;
  border-radius:4px;
}
.benefits {
  border-top:1px solid var(--line);
}
.benefit {
  display:grid;
  grid-template-columns:34px 1fr;
  gap:11px;
  padding:15px 0;
  border-bottom:1px solid var(--line);
}
.benefit i {
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--gold);
  color:var(--gold);
  font-size:9px;
  font-style:normal;
}
.benefit h3 {
  margin:0;
  color:var(--navy);
  font-size:14px;
}
.benefit p {
  margin:3px 0 0;
  color:var(--muted);
  font-size:11px;
}
.project-grid,
.story-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.project-card,
.story-card {
  display:block;
}
.project-image,
.story-card img {
  height:235px;
  width:100%;
  border-radius:var(--radius);
  overflow:hidden;
}
.project-image {
  position:relative;
}
.project-image img,
.story-card img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.project-image img {
  object-position:center;
}
.project-image span {
  position:absolute;
  right:15px;
  top:13px;
  color:#fff;
  font-size:11px;
  background:rgba(9,38,82,.78);
  padding:4px 8px;
  border-radius:4px;
}
.project-meta {
  position:relative;
  padding:18px 31px 0 0;
}
.project-meta small,
.story-meta small {
  display:block;
  color:var(--magenta);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
}
.project-meta b {
  display:block;
  color:var(--navy);
  font-size:16px;
  line-height:1.35;
  margin-top:8px;
}
.project-meta p {
  color:var(--muted);
  font-size:13px;
  margin:8px 0 0;
}
.project-meta strong {
  position:absolute;
  right:2px;
  top:22px;
  color:var(--magenta);
  font-size:21px;
}
.project-card:hover .project-meta b,
.story-card:hover h3 {
  text-decoration:underline;
  text-decoration-color:var(--gold);
  text-underline-offset:5px;
}
.partner-grid {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
}
.partner-grid>div {
  height:125px;
  border:1px solid #efeee8;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:13px;
  transition:border-color .2s;
}
.partner-grid>div:hover {
  border-color:var(--gold);
}
.partner-grid strong {
  font-size:29px;
  font-weight:600;
  color:var(--navy);
}
.partner-grid small {
  font-size:9px;
  color:#7e8791;
  text-align:center;
  letter-spacing:.04em;
}
.story-card img {
  height:190px;
  object-position:center;
}
.story-meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:15px;
}
.story-meta time {
  font-size:10px;
  color:#87919f;
}
.story-card h3 {
  margin:9px 0 11px;
  color:var(--navy);
  font-size:16px;
  line-height:1.45;
}
.story-card>span {
  font-size:11px;
  color:var(--magenta);
  font-weight:700;
}
.final-cta {
  padding-top:46px;
  padding-bottom:38px;
}
.final-panel {
  min-height:210px;
  border-radius:16px;
  background:var(--navy);
  color:#fff;
  display:grid;
  grid-template-columns:88px 1fr auto;
  align-items:center;
  gap:30px;
  padding:38px 48px;
  position:relative;
  overflow:hidden;
}
.final-panel h2 {
  color:#fff;
  max-width:620px;
}
.final-panel h2 em {
  color:var(--gold-soft);
}
.final-panel p:last-child {
  color:#d2dbea;
  font-size:13px;
  margin:11px 0 0;
}
.seal-light {
  border-color:var(--gold-soft);
  color:#fff;
}
.final-actions {
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
  z-index:1;
}
.final-actions .button {
  min-width:230px;
}
.site-footer {
  background:var(--navy);
  padding:62px 0 20px;
  color:#fff;
}
.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1.2fr 1.3fr;
  gap:50px;
}
.brand-footer {
  color:#fff;
  margin-bottom:20px;
}
.footer-company p {
  max-width:245px;
  color:#d2dbea;
  font-size:12px;
  line-height:1.7;
  margin:0 0 10px;
}
.footer-muted {
  color:#8e9db5!important;
}
.socials {
  display:flex;
  gap:8px;
  margin-top:18px;
}
.socials a {
  width:28px;
  height:28px;
  border:1px solid #536985;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:12px;
  color:#fff;
}
.footer-grid h3 {
  margin:0 0 17px;
  color:#fff;
  font-size:11px;
  letter-spacing:.12em;
}
.footer-grid>div:not(.footer-company) a,
.footer-grid>div:not(.footer-company) span {
  display:block;
  color:#c0cadd;
  font-size:12px;
  margin:0 0 10px;
}
.footer-grid a:hover {
  color:var(--gold-soft)!important;
}
.footer-hotline {
  color:var(--gold-soft)!important;
  font-size:16px!important;
  font-weight:700;
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid rgba(255,255,255,.16);
  padding-top:19px;
  margin-top:44px;
  color:#8492a9;
  font-size:10px;
}
.footer-bottom span:last-child {
  display:flex;
  gap:21px;
}
.footer-bottom a:hover {
  color:var(--gold-soft);
}
.reveal {
  opacity:0;
  transform:translateY(20px);
  transition:opacity .65s ease,transform .65s ease;
}
.delay-1 {
  transition-delay:.08s;
}
.delay-2 {
  transition-delay:.16s;
}
.delay-3 {
  transition-delay:.24s;
}
.delay-4 {
  transition-delay:.32s;
}

@media (max-width:1050px) {
  .container {
    width:min(100% - 48px,900px);
  }
  .site-nav {
    gap:17px;
  }
  .nav-wrap {
    gap:16px;
  }
  .nav-cta {
    padding:0 14px;
  }
  .hero-grid {
    grid-template-columns:43% 57%;
  }
  .hero-media {
    margin-right:calc((100vw - min(100% - 48px,900px))/-2);
  }
  .about-grid {
    gap:45px;
  }
  .why-grid {
    grid-template-columns:1fr 1.4fr;
  }
  .why-copy {
    grid-column:1/-1;
  }
  .benefits {
    grid-column:2;
  }
  .partner-grid {
    grid-template-columns:repeat(3,1fr);
  }
}

@media (max-width:760px) {
  .container {
    width:calc(100% - 40px);
  }
  .site-header {
    height:68px;
  }
  .nav-wrap {
    justify-content:space-between;
  }
  .site-nav {
    display:none;
    position:absolute;
    top:68px;
    left:0;
    right:0;
    padding:12px 20px 18px;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:0 18px 30px rgba(9,38,82,.1);
  }
  .site-nav.open {
    display:flex;
  }
  .site-nav a {
    padding:12px 0;
    border-bottom:1px solid #f0eee8;
  }
  .site-nav a:after {
    display:none;
  }
  .nav-cta {
    display:none;
  }
  .menu-toggle {
    display:flex;
    align-items:center;
    gap:4px;
    border:0;
    background:none;
    color:var(--navy);
    font-size:10px;
    font-weight:700;
  }
  .menu-toggle span {
    width:18px;
    height:1px;
    background:var(--navy);
    display:block;
  }
  .menu-toggle b {
    font-size:10px;
    margin-left:5px;
  }
  .hero {
    min-height:0;
  }
  .hero-grid {
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  .hero-copy {
    padding:66px 0 34px;
  }
  .hero h1 {
    font-size:42px;
  }
  .hero-lede {
    font-size:14px;
    margin:20px 0 24px;
  }
  .hero-media {
    width:calc(100% + 40px);
    height:300px;
    margin:0 -20px;
    border-radius:0;
  }
  .hero-media img {
    object-position:78% center;
  }
  .media-stamp {
    right:20px;
    top:19px;
  }
  .media-caption {
    left:20px;
    bottom:18px;
  }
  .hero-swoop {
    display:none;
  }
  .section {
    padding:76px 0;
  }
  .about-grid,
  .why-grid {
    display:flex;
    flex-direction:column;
    gap:32px;
    align-items:stretch;
  }
  .about-media {
    height:280px;
  }
  .about-copy>p:not(.eyebrow) {
    font-size:13px;
  }
  .metrics {
    grid-template-columns:repeat(2,1fr);
    gap:19px 0;
  }
  .metric {
    padding:0 12px;
    border-right:0;
  }
  .metric:nth-child(odd) {
    padding-left:0;
  }
  .service-grid,
  .talent-grid,
  .project-grid,
  .story-grid {
    grid-template-columns:1fr;
    display:grid;
  }
  .section-head {
    margin-bottom:34px;
  }
  .section-head p:last-child {
    font-size:13px;
  }
  .service-card {
    min-height:180px;
  }
  .talent-portrait {
    height:285px;
  }
  .timeline {
    display:flex;
    flex-direction:column;
    gap:0;
    padding-left:34px;
  }
  .timeline-line {
    height:calc(100% - 62px);
    width:1px;
    left:30px;
    top:31px;
    right:auto;
    background:repeating-linear-gradient(180deg,var(--gold) 0 6px,transparent 6px 13px);
  }
  .timeline-step {
    text-align:left;
    min-height:115px;
  }
  .step-badge {
    margin:0 0 12px;
    width:54px;
    height:54px;
  }
  .timeline-step h3 {
    position:absolute;
    left:75px;
    top:10px;
  }
  .timeline-step p {
    max-width:250px;
    margin:0 0 0 75px;
  }
  .casting {
    padding:20px 0 34px;
  }
  .casting-panel,
  .final-panel {
    grid-template-columns:1fr;
    gap:20px;
    padding:28px 24px;
  }
  .casting-panel .button {
    justify-self:start;
  }
  .casting-panel:after,
  .final-panel:after {
    opacity:.5;
  }
  .why-media {
    height:290px;
    order:2;
  }
  .why-copy {
    order:1;
  }
  .benefits {
    order:3;
  }
  .partner-grid {
    grid-template-columns:repeat(2,1fr);
  }
  .partner-grid>div {
    height:110px;
  }
  .story-card img {
    height:200px;
  }
  .final-cta {
    padding-top:28px;
  }
  .final-actions {
    align-items:stretch;
  }
  .final-actions .button {
    min-width:0;
    width:100%;
  }
  .footer-grid {
    grid-template-columns:1fr 1fr;
    gap:35px 20px;
  }
  .footer-company {
    grid-column:1/-1;
  }
  .footer-bottom {
    display:block;
    margin-top:35px;
    line-height:1.8;
  }
  .footer-bottom span:last-child {
    display:flex;
    gap:15px;
    flex-wrap:wrap;
  }
  .brand-word {
    font-size:12px;
  }
}

/* Prompt system refinements: bidirectional progress, four-up cards, and marquee motion. */
.timeline-line {
  height:2px;
  background:#e9e2d0;
}
.timeline-line span {
  display:block;
  width:var(--timeline-progress,0%);
  height:100%;
  background:var(--gold);
  transition:width .18s linear;
}
.step-badge {
  background:#fff;
  color:var(--navy);
  transition:background .35s,color .35s,transform .35s;
}
.timeline-step.is-active .step-badge {
  background:var(--navy);
  color:#fff;
  transform:scale(1.05);
}
.project-grid,
.story-grid {
  grid-template-columns:repeat(4,1fr);
}
.project-image,
.story-card img {
  height:210px;
}
.project-meta b,
.story-card h3 {
  font-size:15px;
}
.project-meta p {
  font-size:12px;
}
.story-card img {
  height:175px;
}
.partner-marquee {
  overflow:hidden;
  position:relative;
  margin:0 -7vw;
}
.partner-track {
  display:flex;
  gap:12px;
  width:max-content;
  animation:marquee 34s linear infinite;
  padding:4px 0;
}

.partner-tile {
  width:170px;
  height:112px;
  border:1px solid #efeee8;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:13px;
  transition:border-color .2s;
  flex:0 0 auto;
  background:#fff;
}
.partner-tile:hover {
  border-color:var(--gold);
}
.partner-tile strong {
  font-size:29px;
  font-weight:600;
  color:var(--navy);
}
.partner-tile small {
  font-size:9px;
  color:#7e8791;
  text-align:center;
  letter-spacing:.04em;
}

@keyframes marquee {
  to {
    transform:translateX(-50%);
  }
}
.reveal {
  transition:opacity .65s var(--ease-primary),transform .65s var(--ease-primary);
}

@media (max-width:1050px) {
  .container {
    width:min(86%,900px);
  }
  .project-grid,
  .story-grid {
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:760px) {
  .container {
    width:calc(100% - 40px);
  }
  .hero {
    min-height:100dvh;
    padding-top:68px;
  }
  .hero-grid {
    min-height:calc(100dvh - 68px);
  }
  .hero-copy {
    padding:34px 0 24px;
  }
  .hero h1 {
    font-size:40px;
  }
  .hero-media {
    height:min(300px,36dvh);
  }
  .talent-grid,
  .project-grid,
  .story-grid {
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }
  .talent-portrait {
    height:190px;
  }
  .talent-info {
    padding:12px;
  }
  .talent-info h3 {
    font-size:12px;
  }
  .talent-info p,
  .talent-info a {
    font-size:9px;
  }
  .project-image,
  .story-card img {
    height:150px;
  }
  .story-meta {
    display:block;
    margin-top:10px;
  }
  .story-meta time {
    display:block;
    margin-top:3px;
  }
  .story-card h3 {
    font-size:12px;
  }
  .partner-marquee {
    margin:0 -20px;
  }
  .partner-tile {
    width:140px;
    height:100px;
  }
  .timeline-line {
    height:calc(100% - 62px);
    width:2px;
    left:30px;
    top:31px;
    right:auto;
  }
  .timeline-line span {
    width:100%;
    height:var(--timeline-progress,0%);
  }
}
body:not(.page-ready) {
  overflow:hidden;
}

/* Keep content readable when JavaScript is unavailable; JS controls the reveal state. */
html:not(.js) .reveal {
  opacity:1;
  transform:none;
}
html,
body {
  overflow-x:clip;
}
.partner-marquee {
  margin-left:0;
  margin-right:0;
}

@media (max-width:760px) {
  .partner-marquee {
    margin-left:0;
    margin-right:0;
  }
}
.text-motion {
  opacity:.9;
  transform:translateY(8px);
  transition:opacity .72s var(--ease-primary) var(--text-delay,0s),transform .72s var(--ease-primary) var(--text-delay,0s);
}
.text-motion.text-visible {
  opacity:1;
  transform:none;
}

/* Each talent card now uses its own portrait instead of slicing one shared sprite. */
.talent-portrait img {
  width:100%;
  transform:none!important;
  object-position:center;
}

/* Shared typography and safety layer from the approved website build system. */
:root {
  --display:"Montserrat",sans-serif;
  --body:"Inter",sans-serif;
}
body {
  font-family:var(--body);
  font-size:15px;
  font-weight:300;
  letter-spacing:-.03em;
  line-height:1.5;
}
h1,
h2,
h3,
h4,
.brand-word,
.brand strong,
.metric strong,
.step-badge,
.seal {
  font-family:var(--display);
  font-weight:500;
  letter-spacing:-.025em;
}
.eyebrow,
.site-nav a,
.button,
.footer-grid h3,
.footer-hotline {
  letter-spacing:.04em;
}
img {
  max-width:100%;
}
*:focus-visible {
  outline:3px solid rgba(183,44,106,.45);
  outline-offset:4px;
}

@media (max-width:760px) {
  body {
    font-size:14px;
  }
  .hero h1 {
    font-size:36px;
  }
  .section h2 {
    font-size:32px;
  }
  .service-card h3,
  .talent-info h3,
  .story-card h3 {
    font-size:16px;
  }
  .footer-grid {
    font-size:12px;
  }
}

/* Rovant motion layer: directional, reversible and GPU-friendly. */
html {
  scroll-behavior:auto!important;
}

/* ── Khối "CALLING ALL TALENTS" ──────────────────────────────────────────────
   1) Vòng trang trí đổi từ hồng sen sang xanh dương cho khớp tông chủ đạo.
   2) Trước đây khối này hoàn toàn trơ khi rê chuột; nay có phản hồi rõ ràng
      nhưng KHÔNG giả làm nút bấm — chỉ nút "Đăng ký casting" mới bấm được. */
.casting-panel:after,
.final-panel:after {
  /* LỖI CŨ: vòng trang trí này nằm đè lên nút và nuốt hết cú click, nên nút
     "Đăng ký casting" bấm không ăn. Nó chỉ để trang trí -> phải cho xuyên qua. */
  pointer-events: none;
  z-index: 0;
}
.casting-panel:after {
  border-color: rgba(18, 56, 107, .16);
  transition: transform .9s cubic-bezier(.16, 1, .3, 1), border-color .5s ease, opacity .5s ease;
}
/* Nội dung phải nằm trên vòng trang trí. */
.casting-panel > *,
.final-panel > * {
  position: relative;
  z-index: 1;
}
.casting-panel {
  transition: border-color .4s ease, box-shadow .5s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1);
}
.casting-panel:hover {
  border-color: var(--gold);
  box-shadow: 0 18px 46px rgba(9, 38, 82, .13);
}
/* .reveal đặt transform qua motion-system nên phải đặc hiệu hơn mới nhấc được. */
.gh-motion-ready .casting-panel.reveal.gh-motion-in:hover {
  transform: translate3d(0, -3px, 0);
}
.casting-panel:hover:after {
  transform: rotate(-4deg) scale(1.06);
  border-color: rgba(18, 56, 107, .26);
}
.casting-panel .seal {
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.casting-panel:hover .seal {
  transform: scale(1.06) rotate(-3deg);
}
.casting-panel h2 em {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size .55s cubic-bezier(.16, 1, .3, 1);
}
.casting-panel:hover h2 em {
  background-size: 100% 2px;
}
/* Nút "Đăng ký casting": nền xanh dương đặc, có nhịp sóng 2 giây một lần để
   kéo mắt về CTA. Sóng vẽ bằng ::after nên không ảnh hưởng layout. */
.casting-panel .button-outline {
  position: relative;
  isolation: isolate;
  border-color: var(--navy-2, #12386b);
  background: var(--navy-2, #12386b);
  color: #fff;
  transition: background .35s ease, border-color .35s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
}
.casting-panel .button-outline span { color: #fff; }
.casting-panel .button-outline:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--navy-2, #12386b);
  opacity: .5;
  animation: castingPulse 2s cubic-bezier(.24, .6, .35, 1) infinite;
}
@keyframes castingPulse {
  0%   { transform: scale(1); opacity: .45; }
  70%  { transform: scale(1.16); opacity: 0; }
  100% { transform: scale(1.16); opacity: 0; }
}
.casting-panel .button-outline:hover {
  background: #0b4da2;
  border-color: #0b4da2;
  transform: translateY(-2px);
}

/* ── Section "Vì sao GH": bố cục tương tác (C) + thẻ kính trên nền tối (B) ───
   Giữ nguyên class .benefits/.benefit để repeater trong CMS vẫn thêm/xoá được. */
.why.section { padding-top: 0; }
.why-stage {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 22px; padding: clamp(30px, 4vw, 56px);
  background: var(--navy);
}
.why-bg { position: absolute; inset: 0; display: block; z-index: -2; }
.why-bg img { width: 100%; height: 100%; object-fit: cover; }
.why-stage:after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(118deg, rgba(5, 20, 46, .96) 20%, rgba(5, 20, 46, .88) 55%, rgba(5, 20, 46, .74));
}
.why-inner { display: grid; grid-template-columns: 1fr 1.02fr; gap: clamp(26px, 3.4vw, 52px); align-items: stretch; }
.why-lead { color: #fff; }
.why-lead .eyebrow { color: var(--gold-soft); }
.why-lead h2 { margin: 10px 0 12px; color: #fff; font-size: clamp(27px, 3.5vw, 45px); line-height: 1.08; letter-spacing: -.03em; }
.why-lead h2 em { color: var(--gold-soft); }
.why-lead > p { margin: 0 0 22px; max-width: 430px; color: rgba(255, 255, 255, .76); font-size: 14px; line-height: 1.75; }

/* Khung ảnh đổi theo mục đang trỏ. */
.why-shot { position: relative; aspect-ratio: 16 / 10; border-radius: 15px; overflow: hidden; background: #0b1f42; }
.why-shot-img { position: absolute; inset: 0; display: block; opacity: 0; transform: scale(1.05);
  transition: opacity .6s ease, transform 1.15s cubic-bezier(.16, 1, .3, 1); }
.why-shot-img.is-on { opacity: 1; transform: scale(1); }
.why-shot-img img { width: 100%; height: 100%; object-fit: cover; }
.why-shot > span { position: absolute; left: 15px; bottom: 15px; z-index: 2; padding: 6px 11px; border-radius: 99px;
  background: rgba(5, 20, 46, .74); color: #fff; font-size: 10px; letter-spacing: .16em; }

/* Thẻ kính. Ghi đè hoàn toàn kiểu danh sách gạch ngang cũ. */
.why-stage .benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; border-top: 0; align-content: center; }
.why-stage .benefit {
  display: grid; grid-template-columns: 1fr; gap: 0;
  padding: 20px 18px; border: 1px solid rgba(255, 255, 255, .17); border-bottom: 1px solid rgba(255, 255, 255, .17);
  border-radius: 13px;
  /* KHÔNG dùng backdrop-filter: 6 thẻ blur cùng lúc đẩy khung hình từ 16.7ms lên
     50ms (20fps) khi cuộn. Nền phía sau vốn đã tối và mờ nên chỉ cần lớp phủ
     trắng mỏng + viền sáng là ra đúng chất kính, mà giữ nguyên 60fps. */
  background: linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .055));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
  cursor: default;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), background .35s ease, border-color .35s ease;
}
.why-stage .benefit i {
  width: auto; height: auto; display: block; border: 0; border-radius: 0; margin-bottom: 8px;
  color: var(--gold-soft); font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .16em;
}
.why-stage .benefit h3 { margin: 0 0 5px; color: #fff; font-size: 15px; }
.why-stage .benefit p { margin: 0; color: rgba(255, 255, 255, .7); font-size: 12.5px; line-height: 1.65; }
.why-stage .benefit:hover,
.why-stage .benefit.is-on {
  transform: translateY(-4px);
  background: linear-gradient(160deg, rgba(255, 255, 255, .19), rgba(255, 255, 255, .1));
  border-color: var(--gold-soft);
}
.why-stage .benefit.is-on i { color: #fff; }

@media (max-width: 900px) {
  .why-inner { grid-template-columns: 1fr; gap: 24px; }
  .why-stage .benefits { grid-template-columns: 1fr; }
  .why-lead > p { max-width: none; }
}

/* ── Dãy logo đối tác ────────────────────────────────────────────────────────
   Logo dùng đúng path chính thức của từng thương hiệu, tô bằng màu thương hiệu.
   Dãy chạy liên tục: không dừng khi rê chuột, không dừng khi cuộn khỏi màn hình. */
.partner-logo {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 10px;
}
.partner-logo svg { width: 100%; height: 100%; display: block; }
.partner-tile small { color: #6b7480; font-weight: 600; letter-spacing: .1em; }
/* Rê chuột chỉ đổi viền, KHÔNG phóng to và KHÔNG dừng dãy. */
.partner-tile:hover { transform: none !important; box-shadow: none !important; }
.partner-track { will-change: transform; }