/* ── Splash intro GH ─────────────────────────────────────────────────────────
   Tổng 2,5s: 0–0,15s giữ yên · 0,15–0,85s logo hiện · 0,4–0,8s kẻ vàng mở ra
   · 0,75–1,55s thanh tiến trình chạy · 1,55–2,45s tan ra vào web (0,9s, cố ý
   không nhanh) · 2,5s gỡ khỏi DOM.
   Nền sáng cùng tông với banner nên lúc tan ra không bị "nháy" đổi màu. */
.intro-loader {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: transparent !important;
  visibility: visible;
  transition: visibility 0s linear .95s !important;
}
/* Lớp màn: kéo lên để lộ trang, tách khỏi logo nên hai thứ chuyển động riêng. */
.splash-veil {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 90% at 50% 42%, #ffffff 0%, #f6f8fc 52%, #eef2f8 100%);
  transform: translate3d(0, 0, 0);
  transition: transform .95s cubic-bezier(.76, 0, .18, 1);
  will-change: transform;
}
.splash-core { z-index: 1; }
/* Hai tấm màn của bản cũ không dùng nữa. */
.intro-loader:before, .intro-loader:after { display: none !important; }

.splash-core { position: relative; display: grid; justify-items: center; padding: 0 24px; }

/* Quầng sáng vàng rất nhạt phía sau logo, nở ra rồi dịu lại. */
.splash-glow {
  position: absolute; top: 50%; left: 50%; width: 340px; height: 340px;
  transform: translate(-50%, -60%) scale(1); opacity: .55;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(217, 196, 139, .38), rgba(217, 196, 139, 0) 68%);
  animation: splashGlow 1.5s cubic-bezier(.16, 1, .3, 1) .1s backwards;
}
@keyframes splashGlow {
  0%   { opacity: 0; transform: translate(-50%, -60%) scale(.6); }
  55%  { opacity: 1; transform: translate(-50%, -60%) scale(1.06); }
  100% { opacity: .55; transform: translate(-50%, -60%) scale(1); }
}

.splash-logo {
  width: clamp(128px, 20vw, 178px); height: auto; display: block;
  object-fit: contain;
  opacity: 1; transform: none;
  animation: splashLogo .7s cubic-bezier(.16, 1, .3, 1) .15s backwards;
}
@keyframes splashLogo { to { opacity: 1; transform: none; } }

/* Kẻ vàng mảnh mở ra từ giữa. */
.splash-rule {
  width: 172px; height: 1px; margin-top: 20px;
  background: linear-gradient(90deg, transparent, var(--gold, #b18a38), transparent);
  transform: scaleX(1); transform-origin: center;
  animation: splashRule .4s cubic-bezier(.16, 1, .3, 1) .4s backwards;
}
@keyframes splashRule { to { transform: scaleX(1); } }

.splash-word {
  margin: 13px 0 0; color: #7c8798;
  font: 600 9.5px/1 Inter, sans-serif; letter-spacing: .34em; text-indent: .34em;
  opacity: 1; transform: none;
  animation: splashWord .55s cubic-bezier(.16, 1, .3, 1) .55s backwards;
}
@keyframes splashWord { to { opacity: 1; transform: none; } }

/* Thanh tiến trình chạy hết trước khi màn tan. */
.splash-bar {
  display: block; width: 116px; height: 2px; margin-top: 22px;
  border-radius: 2px; background: rgba(9, 38, 82, .1); overflow: hidden;
  opacity: 1; animation: splashWord .4s ease .6s backwards;
}
.splash-bar i {
  display: block; height: 100%; width: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold, #b18a38), var(--gold-soft, #d9c48b));
  transform: scaleX(1); transform-origin: left;
  animation: splashBar .8s cubic-bezier(.33, .1, .2, 1) .75s backwards;
}
@keyframes splashBar { to { transform: scaleX(1); } }

/* ── Khoảnh khắc bàn giao: logo bay về chỗ logo header, màn kéo lên ────────── */
.intro-loader.done { pointer-events: none; visibility: hidden; }
/* Màn trượt lên, lộ trang từ trên xuống. */
.intro-loader.done .splash-veil { transform: translate3d(0, -101%, 0); }
/* Các chi tiết phụ rút đi trước một nhịp để mắt dồn vào logo. */
.intro-loader.done .splash-glow,
.intro-loader.done .splash-rule,
.intro-loader.done .splash-word,
.intro-loader.done .splash-bar {
  opacity: 0; transform: translateY(-10px);
  transition: opacity .26s ease, transform .4s cubic-bezier(.5, 0, .3, 1);
}
/* Logo bay tới đúng ô logo trên header rồi mờ đi để logo thật thế chỗ.
   --fly-* do JS đo tại thời điểm chuyển, nên luôn khớp mọi cỡ màn hình. */
.intro-loader.done .splash-logo {
  transform: translate3d(var(--fly-x, 0), var(--fly-y, 0), 0) scale(var(--fly-s, 1));
  opacity: 0;
  transition: transform .86s cubic-bezier(.62, 0, .16, 1),
              opacity .3s ease .62s;
}
/* Trang bên dưới lắng về đúng vị trí, tạo chiều sâu cho cú bàn giao. */
body.intro-out main { transform: scale(1.028); transform-origin: 50% 32%; }
body.intro-out.intro-settle main { transform: none; }
body main { transition: transform 1s cubic-bezier(.16, 1, .3, 1); }

@media (max-width: 760px) {
  .splash-glow { width: 250px; height: 250px; }
  .splash-rule { width: 138px; }
  .splash-bar { width: 96px; }
}