/* ==========================================================================
   motion.css — Lớp "CHUYỂN ĐỘNG & CHIỀU SÂU"
   --------------------------------------------------------------------------
   Nạp SAU style.css / responsive.css. File này KHÔNG định nghĩa lại bố cục,
   chỉ làm giàu thêm: chiều sâu, ánh sáng, chuyển động.

   Nguyên tắc bắt buộc:
     - Không được phát sinh cuộn ngang ở bất kỳ bề rộng nào (320px - 1920px).
       Mọi hiệu ứng "tràn ra ngoài" đều phải nằm trong khối có overflow:hidden.
     - Tương phản chữ phải đạt WCAG AA (>= 4.5:1 với chữ thường).
     - Tôn trọng prefers-reduced-motion: tắt hết chuyển động, giữ nguyên bố cục.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THANH TIẾN TRÌNH CUỘN TRANG
   -------------------------------------------------------------------------- */
.nt-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: calc(var(--nt-z-header) + 5);
  pointer-events: none;
  background: transparent;
}

.nt-progress__bar {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--nt-red-600) 0%, var(--nt-red-400) 45%, var(--nt-blue-400) 100%);
  box-shadow: 0 0 12px rgba(208, 0, 16, 0.55);
  will-change: transform;
}

/* --------------------------------------------------------------------------
   2. HEADER KHI ĐÃ CUỘN
   Class `is-stuck` do js/menu.js gắn (scrollY > 8). Ở đây chỉ làm đẹp thêm:
   kính mờ đậm hơn, bóng sâu hơn, và một vạch gradient đỏ dưới chân header.
   -------------------------------------------------------------------------- */
.nt-header.is-stuck {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(170%) blur(16px);
  -webkit-backdrop-filter: saturate(170%) blur(16px);
  box-shadow: 0 10px 34px rgba(0, 32, 96, 0.13);
}

.nt-header.is-stuck::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, var(--nt-red-600) 18%, var(--nt-red-400) 50%,
    var(--nt-navy-800) 82%, transparent 100%);
  opacity: 0.9;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   3. HERO — ÁNH SÁNG, LƯỚI, PARALLAX
   -------------------------------------------------------------------------- */
.nt-hero {
  isolation: isolate;
}

/* Quầng sáng "cực quang" trôi chậm — tạo chiều sâu cho nền navy */
.nt-hero__glow {
  filter: blur(100px);
  animation: ntAurora 18s var(--nt-ease) infinite alternate;
}

.nt-hero__glow--1 {
  background: radial-gradient(circle, rgba(26, 111, 212, 0.62), transparent 68%);
}

.nt-hero__glow--2 {
  background: radial-gradient(circle, rgba(208, 0, 16, 0.42), transparent 68%);
  animation-duration: 22s;
  animation-direction: alternate-reverse;
}

@keyframes ntAurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-32px, 26px, 0) scale(1.14); }
  100% { transform: translate3d(24px, -18px, 0) scale(0.94); }
}

/* Lưới toạ độ trôi nhẹ — cảm giác "bản đồ vận chuyển" */
.nt-hero::before {
  animation: ntGridDrift 34s linear infinite;
}

@keyframes ntGridDrift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 58px 58px, 58px 58px; }
}

/* Tiêu đề: chữ nhấn dùng gradient đỏ -> hồng, có chiều sâu */
.nt-hero h1 em {
  background: linear-gradient(100deg, #ff4d5e 0%, #ff8f7a 55%, #ffd166 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Ảnh hero: parallax nhẹ + phóng to khi tải xong */
.nt-hero__figure {
  box-shadow: var(--nt-shadow-xl);
  transform: translateY(var(--nt-parallax, 0px));
  transition: transform 0.12s linear;
  will-change: transform;
}

/* Viền sáng mảnh quanh ảnh — tách ảnh khỏi nền navy */
.nt-hero__figure::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.22);
  pointer-events: none;
}

.nt-hero__figure img {
  animation: ntHeroZoom 1.4s var(--nt-ease-out) both;
}

@keyframes ntHeroZoom {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}

/* Thẻ số liệu nổi: trôi lơ lửng, đổ bóng nhiều tầng */
.nt-hero__chip {
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  animation: ntFloat 6.5s ease-in-out infinite;
}

.nt-hero__chip--tl {
  animation-delay: -1.2s;
}

.nt-hero__chip--br {
  animation-delay: -3.4s;
}

@keyframes ntFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* --------------------------------------------------------------------------
   4. NÚT — VỆT SÁNG CHẠY QUA KHI HOVER
   -------------------------------------------------------------------------- */
.nt-btn {
  position: relative;
  overflow: hidden;
  border-radius: var(--nt-radius-sm);
}

.nt-btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg,
    transparent 0%, rgba(255, 255, 255, 0.34) 50%, transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
}

.nt-btn:hover::after {
  animation: ntShine 0.72s var(--nt-ease-out);
}

@keyframes ntShine {
  from { left: -60%; }
  to   { left: 120%; }
}

.nt-btn--accent {
  box-shadow: var(--nt-shadow-accent);
}

.nt-btn--accent:hover {
  box-shadow: 0 16px 38px rgba(208, 0, 16, 0.42);
}

/* --------------------------------------------------------------------------
   5. TIÊU ĐỀ KHỐI — GẠCH NHẤN CHẠY RA
   -------------------------------------------------------------------------- */
.nt-eyebrow {
  position: relative;
  display: inline-block;
}

.nt-eyebrow::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 0.45rem;
  border-radius: 2px;
  background: var(--nt-gradient-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--nt-ease-out) 0.1s;
}

.nt-section-head.is-visible .nt-eyebrow::after,
.nt-section-head--center.is-visible .nt-eyebrow::after,
[data-reveal].is-visible .nt-eyebrow::after {
  transform: scaleX(1);
}

.nt-section-head--center .nt-eyebrow::after,
.nt-section-head--center.is-visible .nt-eyebrow::after {
  transform-origin: center;
}

/* --------------------------------------------------------------------------
   6. CARD — CHIỀU SÂU NHIỀU TẦNG
   -------------------------------------------------------------------------- */
/* Cần `position: relative` để viền gradient (::after, inset:0) neo đúng thẻ.
   .nt-service-card và .nt-stat đã có sẵn trong file gốc. */
.nt-card,
.nt-info-card,
.nt-partner {
  position: relative;
}

.nt-card,
.nt-post,
.nt-stat,
.nt-info-card,
.nt-partner,
.nt-step__dot {
  transition: transform var(--nt-dur-base) var(--nt-ease-out),
              box-shadow var(--nt-dur-base) var(--nt-ease-out),
              border-color var(--nt-dur-base) var(--nt-ease-out);
}

.nt-card:hover,
.nt-post:hover {
  border-color: transparent;
  box-shadow:
    0 2px 4px rgba(0, 32, 96, 0.06),
    0 14px 28px rgba(0, 32, 96, 0.10),
    0 30px 60px rgba(0, 32, 96, 0.10);
}

/* Viền gradient sáng lên khi hover (dùng mask để chỉ vẽ 1px viền) */
.nt-card::after,
.nt-post::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, var(--nt-red-500), var(--nt-blue-400) 55%, transparent 85%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--nt-dur-base) var(--nt-ease-out);
  pointer-events: none;
  z-index: 3;
}

.nt-card:hover::after,
.nt-post:hover::after {
  opacity: 1;
}

/* .nt-post có overflow:hidden nên ::after vẫn nằm gọn trong thẻ */
.nt-post {
  position: relative;
}

/* Ảnh trong card tin tức: zoom chậm khi hover */
.nt-post:hover .nt-post__thumb img {
  transform: scale(1.06);
}

/* Card dịch vụ: icon nâng lên và toả sáng */
.nt-service-card:hover .nt-service-card__icon {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0, 32, 96, 0.28);
}

.nt-service-card__icon {
  transition: background-color var(--nt-transition), color var(--nt-transition),
              transform var(--nt-dur-base) var(--nt-ease-spring),
              box-shadow var(--nt-dur-base) var(--nt-ease-out);
}

/* --------------------------------------------------------------------------
   7. NGHIÊNG 3D THEO CON TRỎ (JS gắn class .nt-tilt)
   --------------------------------------------------------------------------
   Selector ghi rõ dạng ghép (0-2-0) để THẮNG được các rule `:hover` có sẵn
   trong components.css / style.css (cùng độ ưu tiên, nhưng file này nạp sau).
   -------------------------------------------------------------------------- */
.nt-card.nt-tilt,
.nt-post.nt-tilt,
.nt-stat.nt-tilt,
.nt-info-card.nt-tilt,
.nt-partner.nt-tilt {
  transform:
    perspective(1100px)
    rotateX(var(--nt-rx, 0deg))
    rotateY(var(--nt-ry, 0deg))
    translateY(var(--nt-ty, 0px));
  transform-style: preserve-3d;
  transition: transform 0.5s var(--nt-ease-out),
              box-shadow 0.35s var(--nt-ease-out),
              border-color 0.35s var(--nt-ease-out);
  will-change: transform;
}

/* Khi đang bám theo con trỏ thì phản hồi nhanh, không ì */
.nt-card.nt-tilt.is-live,
.nt-post.nt-tilt.is-live,
.nt-stat.nt-tilt.is-live,
.nt-info-card.nt-tilt.is-live,
.nt-partner.nt-tilt.is-live {
  transition: transform 0.1s linear, box-shadow 0.35s var(--nt-ease-out);
}

/* --------------------------------------------------------------------------
   8. SỐ LIỆU — CHỮ GRADIENT + VẠCH SÁNG
   -------------------------------------------------------------------------- */
.nt-stat {
  overflow: hidden;
}

.nt-stat::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, rgba(26, 111, 212, 0.10), transparent 62%);
  opacity: 0;
  transition: opacity var(--nt-dur-slow) var(--nt-ease-out);
  pointer-events: none;
}

.nt-stat:hover::before {
  opacity: 1;
}

.nt-stat:hover {
  transform: translateY(-5px);
  box-shadow: var(--nt-shadow-lg);
  border-color: var(--nt-sky-100);
}

.nt-stat__value {
  background: linear-gradient(135deg, var(--nt-navy-800) 0%, var(--nt-blue-500) 60%, var(--nt-red-600) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
   9. QUY TRÌNH — ĐƯỜNG NỐI CHẠY RA
   -------------------------------------------------------------------------- */
.nt-process::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--nt-ease-out) 0.15s;
}

.nt-process.is-visible::before {
  transform: scaleX(1);
}

.nt-step__dot {
  transition: transform var(--nt-dur-base) var(--nt-ease-spring),
              box-shadow var(--nt-dur-base) var(--nt-ease-out),
              border-color var(--nt-dur-base) var(--nt-ease-out);
}

.nt-step:hover .nt-step__dot {
  transform: translateY(-4px) scale(1.06);
  border-color: var(--nt-red-500);
  box-shadow: 0 14px 30px rgba(208, 0, 16, 0.22);
}

/* --------------------------------------------------------------------------
   10. ĐỐI TÁC
   -------------------------------------------------------------------------- */
.nt-partner:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: var(--nt-shadow);
}

/* --------------------------------------------------------------------------
   11. BIẾN THỂ HIỆN DẦN
   -------------------------------------------------------------------------- */
/* Trượt lên + mờ dần (mặc định đã có ở style.css) — bổ sung nhịp nảy nhẹ */
[data-reveal] {
  transition: opacity 0.72s var(--nt-ease-out), transform 0.72s var(--nt-ease-out);
}

[data-reveal].is-visible {
  transform: translateY(0);
}

/* Khối ảnh lớn: hiện lên kèm thu nhỏ rất nhẹ -> cảm giác "lấy nét" */
.nt-about__media[data-reveal],
.nt-hero__media[data-reveal] {
  transition: opacity 0.85s var(--nt-ease-out), transform 0.85s var(--nt-ease-out);
}

/* --------------------------------------------------------------------------
   12. GIẢM CHUYỂN ĐỘNG
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nt-hero__glow,
  .nt-hero::before,
  .nt-hero__figure img,
  .nt-hero__chip {
    animation: none !important;
  }

  .nt-hero__figure {
    transform: none !important;
  }

  .nt-btn::after,
  .nt-progress__bar {
    display: none;
  }

  .nt-tilt,
  .nt-card,
  .nt-post,
  .nt-stat,
  .nt-info-card,
  .nt-partner,
  .nt-step__dot {
    transform: none !important;
    transition: none !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   13. KHI IN
   -------------------------------------------------------------------------- */
@media print {
  .nt-progress {
    display: none !important;
  }
}