/* ==========================================================================
   variables.css — Design tokens (màu sắc, typography, spacing, shadow, motion)
   Đây là NGUỒN DUY NHẤT để đổi nhận diện thương hiệu.
   Đổi màu ở đây -> toàn bộ website đổi theo.

   Bảng màu lấy TRỰC TIẾP từ logo thật của công ty (đã tách màu từ file gốc):
     - Navy chủ đạo : #002060
     - Đỏ nhấn      : #d00010
   ========================================================================== */

:root {
  /* ---------- Màu thương hiệu (theo logo thật) ---------- */
  --nt-navy-900: #001433; /* Navy đậm nhất — footer, vùng tối */
  --nt-navy-800: #002060; /* NAVY THƯƠNG HIỆU — màu chủ đạo */
  --nt-navy-700: #01307f;
  --nt-navy-600: #0a4aa8;
  --nt-blue-600: #12519e; /* Xanh dương phụ */
  --nt-blue-500: #1a6fd4;
  --nt-blue-400: #3e93f0;
  --nt-blue-300: #7cb8f7;
  --nt-sky-100: #e8f2fd;
  --nt-sky-50: #f2f8fe;

  /* Màu nhấn — ĐỎ THƯƠNG HIỆU (lấy từ logo) */
  --nt-red-700: #a3000c;
  --nt-red-600: #d00010; /* ĐỎ THƯƠNG HIỆU — dùng cho CTA, gạch chân, nhấn */
  --nt-red-500: #e8192a;
  --nt-red-400: #f2455a;
  --nt-red-50: #fef2f3;

  /* Giữ tên cũ trỏ về đỏ để CSS cũ không vỡ */
  --nt-orange-600: var(--nt-red-700);
  --nt-orange-500: var(--nt-red-600);
  --nt-orange-400: var(--nt-red-500);
  --nt-amber-400: #f0b429;

  /* Màu trung tính */
  --nt-ink-900: #0d1a2b; /* Tiêu đề */
  --nt-ink-700: #33445c; /* Nội dung chính */
  --nt-ink-500: #5b6b80; /* Nội dung phụ */
  --nt-ink-400: #94a3b8; /* Placeholder */
  --nt-line: #dde5ef; /* Viền */
  --nt-line-soft: #eef2f7;
  --nt-bg: #ffffff;
  --nt-bg-soft: #f4f7fb; /* Nền xám rất nhạt */
  --nt-bg-dark: var(--nt-navy-900);

  /* Màu trạng thái */
  --nt-success: #16a34a;
  --nt-danger: var(--nt-red-600);
  --nt-info: var(--nt-blue-500);

  /* ---------- Gradient & chiều sâu ---------- */
  --nt-gradient-brand: linear-gradient(135deg, var(--nt-navy-900) 0%, var(--nt-navy-800) 45%, var(--nt-navy-600) 100%);
  --nt-gradient-accent: linear-gradient(135deg, var(--nt-red-600) 0%, var(--nt-red-400) 100%);
  --nt-gradient-overlay: linear-gradient(180deg, rgba(0, 20, 51, 0.10) 0%, rgba(0, 20, 51, 0.78) 100%);
  --nt-gradient-hero: linear-gradient(155deg, #001433 0%, #002060 48%, #01307f 100%);

  /* Ánh sáng mềm tạo chiều sâu cho nền tối */
  --nt-glow-red: radial-gradient(60% 60% at 70% 20%, rgba(208, 0, 16, 0.30), transparent 70%);
  --nt-glow-blue: radial-gradient(55% 55% at 15% 85%, rgba(26, 111, 212, 0.35), transparent 70%);

  /* Lưới toạ độ mờ — tạo cảm giác kỹ thuật/logistics */
  --nt-grid-lines: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);

  /* ---------- Typography ---------- */
  --nt-font-body: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --nt-font-heading: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --nt-fs-xs: 0.75rem;    /* 12px */
  --nt-fs-sm: 0.8125rem;  /* 13px */
  --nt-fs-base: 0.9375rem;/* 15px */
  --nt-fs-md: 1rem;       /* 16px */
  --nt-fs-lg: 1.125rem;   /* 18px */
  --nt-fs-xl: 1.375rem;   /* 22px */
  --nt-fs-2xl: 1.75rem;   /* 28px */
  --nt-fs-3xl: 2.25rem;   /* 36px */
  --nt-fs-4xl: 3rem;      /* 48px */
  --nt-fs-5xl: 3.75rem;   /* 60px */

  --nt-lh-tight: 1.15;
  --nt-lh-snug: 1.4;
  --nt-lh-normal: 1.65;

  /* ---------- Khoảng cách ---------- */
  --nt-space-1: 0.25rem;
  --nt-space-2: 0.5rem;
  --nt-space-3: 0.75rem;
  --nt-space-4: 1rem;
  --nt-space-5: 1.5rem;
  --nt-space-6: 2rem;
  --nt-space-7: 2.5rem;
  --nt-space-8: 3rem;
  --nt-space-9: 4rem;
  --nt-space-10: 5rem;

  --nt-section-py: clamp(3.25rem, 6.5vw, 6rem);

  /* ---------- Layout ---------- */
  --nt-container: 1200px;
  --nt-container-wide: 1360px;
  --nt-gutter: 1rem;
  --nt-radius-sm: 8px;
  --nt-radius: 12px;
  --nt-radius-lg: 18px;
  --nt-radius-xl: 26px;
  --nt-radius-pill: 999px;

  /* ---------- Shadow — có tầng, tạo chiều sâu ---------- */
  --nt-shadow-xs: 0 1px 2px rgba(0, 32, 96, 0.06);
  --nt-shadow-sm: 0 2px 8px rgba(0, 32, 96, 0.07);
  --nt-shadow: 0 8px 24px rgba(0, 32, 96, 0.10);
  --nt-shadow-lg: 0 18px 48px rgba(0, 32, 96, 0.16);
  --nt-shadow-xl: 0 32px 70px rgba(0, 20, 51, 0.22);
  --nt-shadow-accent: 0 10px 26px rgba(208, 0, 16, 0.34);
  --nt-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.14);

  /* ---------- Chuyển động ---------- */
  --nt-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --nt-ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* thoát êm, hợp cho reveal */
  --nt-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* hơi nảy, hợp cho hover */
  --nt-transition: 0.25s var(--nt-ease);
  --nt-transition-slow: 0.45s var(--nt-ease);
  --nt-dur-fast: 0.16s;
  --nt-dur-base: 0.3s;
  --nt-dur-slow: 0.62s;

  /* ---------- Z-index ---------- */
  --nt-z-header: 900;
  --nt-z-chat: 960;      /* panel chat phải nằm TRÊN cụm nút liên hệ */
  --nt-z-floating: 950;
  --nt-z-drawer: 1000;
  --nt-z-toast: 1100;

  --nt-header-offset: 96px;
}