/* ================================================================
   ETHAN ECOM — Shared Design System v2
   All shared tokens, layout, components reused across every page.
   Page-specific styles stay in each HTML file's <style> block.
   ================================================================ */

/* Typography ported from housef.vn — Montserrat (display/UI) · Inter (body) · Fahkwang (lead/quote) · Mulish (long-form) · BaskervilleVN (elegant serif) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&family=Inter:wght@400;500;600;700&family=Fahkwang:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');
@import url('mobile-perf.css');

/* housef self-hosted serif accent */
@font-face{
  font-family:"BaskervilleVN";
  src:url("../fonts/Baskerville.woff") format("woff"),
      url("../fonts/Baskerville.ttf") format("truetype");
  font-weight:var(--fw-regular); font-style:normal; font-display:swap;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { font-family: var(--font-text); color: #000000; line-height: var(--lh-body); overflow-x: hidden; background: #fff; font-size: var(--fs-md); }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ── DESIGN TOKENS — NAUTICAL CORPORATE ── */
:root {
  /* Navy = structural (header/footer/hero/deep bands) */
  --navy:      #16305C;
  --navy-2:    #1B2A4A;
  --navy-deep: #0F2244;
  /* Bright blue = interactive accents + CTA */
  --blue:      #1E7FE0;   /* accent blue (labels, borders, links) */
  --blue-br:   #2B8FFF;   /* bright CTA top */
  --blue-dk:   #16305C;   /* navy hover / depth */
  /* Yellow = sparse highlight (badges, stat numbers) */
  --yellow:    #F4B41A;
  --yellow-2:  #FFC107;
  /* Neutrals + light surfaces */
  --white:   #fff;
  --gray:    #F5F9FF;
  --surface: #EAF3FB;
  --light:   #EAF3FB;
  --light-2: #F5F9FF;
  --text:    #1A2433;   /* soft navy-ink body text */
  --text2:   #5A6B82;
  /* Metallic (ETHAN wordmark) */
  --silver-1: #C0C6CC;
  --silver-2: #7D858C;
  --max-w:   1500px;
  --ease:    cubic-bezier(.4, 0, .2, 1);
  --t-base:  all .3s cubic-bezier(.4, 0, .2, 1);
  --sh-sm:   0 2px 12px rgba(22,48,92,.08);
  --sh-md:   0 8px 32px rgba(22,48,92,.12);
  --sh-lg:   0 20px 60px rgba(22,48,92,.16);
  /* Hướng thiết kế phẳng: góc vuông, không bo (yêu cầu 2026-07) */
  --r-sm:    0;
  --r-md:    0;
  --r-lg:    0;
  /* Typography → chỉnh tại "BẢNG ĐIỀU KHIỂN CHỮ" bên dưới (chỉ 1 nơi) */
  --font-display: var(--font-heading);
  --font-body:    var(--font-text);
  --font-lead:    var(--font-heading);
  --font-alt:     var(--font-text);
  --font-serif:   var(--font-numeral);
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  BẢNG ĐIỀU KHIỂN CHỮ  —  TYPOGRAPHY CONTROL PANEL                      ║
   ║  MỌI KIỂU CHỮ CỦA TOÀN WEBSITE ĐƯỢC ĐIỀU KHIỂN TẠI ĐÂY (chỉ 1 nơi).   ║
   ║  Sửa 1 giá trị ở dưới  →  áp dụng cho TẤT CẢ các trang & thành phần.   ║
   ╚══════════════════════════════════════════════════════════════════════╝
   • FONT:  heading = Fahkwang · text = Mulish · numeral = BaskervilleVN · fallback = Montserrat
   • SIZE:  giá trị theo BỘ QUY TẮC HOUSEF. Breakpoint: >1024 (desktop) · ≤1024 · ≤767.
            Đổi cỡ ở :root (desktop) & 2 khối @media bên dưới. Đậm/nhạt → --fw-* · giãn chữ → --ls-*
   ────────────────────────────────────────────────────────────────────────
     Vai trò              Token         Desktop → ≤1024 → ≤767   LH
     Hero "Viết nên..."    --fs-hero      60 → 30 → 30            1.1
     Heading section lớn   --fs-display   50 → 25 → 22            1.3
     Số liệu (5,100...)    --fs-stat     100 → 70 → 56  (M.700)   1.0
     H1                    --fs-h1        40 → 24 → 18            1.2
     H2                    --fs-h2        32 → 22 → 16            1.3
     H3                    --fs-h3        24 → 20 → 16            1.3
     H4 / sub-heading      --fs-h4        20 → 18                 1.3  (label in-hoa: .sl/.u-label)
     H5 / bước quy trình   --fs-h5        18 → 16                 1.5
     Body / lead (p)       --fs-md        18 → 15 → 14            1.5
     Body fallback         --fs-base      16 → 15 → 14            1.5
     Link "Xem thêm"       --fs-small     14                     1.0
     Caption               --fs-caption   13
     Nút "Liên hệ ngay"    --fs-micro     11                     1.0  (ls .02em)
     Ô nhập form           --fs-input     16  (luôn ≥16, chống iOS zoom)
     ─ đặc biệt ─  --fs-brand (wordmark ETHAN ECOM) · --fs-numeral (số serif) · --fs-deco (nền)
   ──────────────────────────────────────────────────────────────────────── */
:root {
  /* 1) FONT FAMILIES */
  --font-heading: 'Fahkwang', Georgia, serif;                   /* tiêu đề */
  --font-text:    'Mulish', 'Inter', sans-serif;                /* body / nội dung */
  --font-numeral: 'BaskervilleVN', 'Fahkwang', Georgia, serif;  /* số / serif nhấn */
  --font-fallback:'Montserrat', 'Inter', sans-serif;            /* body dự phòng */

  /* 2) FONT WEIGHTS */
  --fw-light: 300;    --fw-regular: 400;   --fw-medium: 500;
  --fw-semibold: 600; --fw-bold: 700;      --fw-extrabold: 800;
  --fw-heading: var(--fw-medium);          /* heading mặc định = 500 (housef 400–500) */

  /* 3) LINE-HEIGHTS (theo bảng housef) */
  --lh-tight:   1.0;   /* số liệu, tên dự án, nút */
  --lh-hero:    1.1;   /* hero 60px */
  --lh-display: 1.3;   /* heading section 50px */
  --lh-h1: 1.2; --lh-h2: 1.3; --lh-h3: 1.3;
  --lh-h4: 1.3;        /* sub-heading / label 20px */
  --lh-h5: 1.5;
  --lh-body: 1.5;      /* đoạn văn 18px → 27px */
  --lh-small: 1.5;
  --lh-heading: 1.3; --lh-loose: 1.8;

  /* 4) LETTER-SPACING (theo bảng housef) */
  --ls-normal: normal;
  --ls-menu: .05em;    /* nút MENU */
  --ls-btn:  .02em;    /* nút "Liên hệ ngay" */
  --ls-wide: .16em;    /* nav in-hoa (giữ nguyên phong cách Ethan) */

  /* 5) SIZES — DESKTOP (>1024px) — mọi cỡ chữ theo bảng housef */
  --fs-hero:    60px;   /* Hero "Viết nên..."           LH 1.1 */
  --fs-display: 50px;   /* Heading section lớn           LH 1.3 */
  --fs-stat:   100px;   /* Số liệu (Mulish 700)          LH 1.0 */
  --fs-h1:      40px;
  --fs-h2:      32px;
  --fs-h3:      24px;
  --fs-h4:      20px;   /* sub-heading / label / tên dự án */
  --fs-h5:      18px;
  --fs-md:      18px;   /* body / lead                   LH 1.5 */
  --fs-base:    16px;   /* body fallback (Montserrat)    LH 1.5 */
  --fs-small:   14px;   /* link "Xem thêm" */
  --fs-caption: 13px;
  --fs-micro:   11px;   /* nút "Liên hệ ngay" */
  --fs-input:   16px;   /* ô nhập form — luôn ≥16px, tránh iOS auto-zoom */
  --fs-numeral: 94px;   /* số serif trang trí */
  --fs-brand:   clamp(56px, 12vw, 170px);  /* wordmark "ETHAN ECOM" (giữ) */
  --fs-deco:    clamp(80px, 13vw, 160px);  /* dấu ngoặc / số nền cực lớn */
  --fs-body:    var(--fs-md);              /* alias cũ */
}

/* SIZES — TABLET & MOBILE ≤1024px (áp cho cả 1024 và 768px, theo bảng) */
@media (max-width: 1024px) {
  :root {
    --fs-hero:    30px;   /* 60 → 30  (LH 110%) */
    --fs-display: 25px;   /* 50 → 25  (LH 130%) */
    --fs-stat:    70px;   /* 100 → 70 */
    --fs-h1:      24px;
    --fs-h2:      22px;
    --fs-h3:      20px;
    --fs-h4:      18px;   /* sub-heading 20 → 18 */
    --fs-h5:      16px;
    --fs-md:      15px;   /* body 18 → 15 */
    --fs-base:    15px;
    --fs-numeral: 70px;
  }
}
/* SIZES — MOBILE ≤767px (rule chung của theme) */
@media (max-width: 767px) {
  :root {
    --fs-display: 22px;
    --fs-h1:      18px;
    --fs-h2:      16px;
    --fs-h3:      16px;
    --fs-md:      14px;  /* đoạn văn p generic */
    --fs-base:    14px;
    --fs-stat:    56px;
  }
}

/* Base heading elements — Fahkwang, weight 500 */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-lead); font-weight: var(--fw-heading); }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); margin-bottom: 1rem; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); margin-bottom: 1rem; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); margin-bottom: 1rem; }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); margin-bottom: 12px; }
h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); margin-bottom: 1rem; }
h6 { font-size: var(--fs-h5); line-height: var(--lh-h5); margin-bottom: 1rem; }

/* Display / Hero role — headline lớn nhất */
.u-display { font-family: var(--font-lead); font-weight: var(--fw-heading);
  font-size: var(--fs-display); line-height: var(--lh-display); margin-bottom: 1rem; }

/* Section-label role (H4 in-hoa) — chỉ dùng cho eyebrow/label, không cho tiêu đề card */
.u-label { font-family: var(--font-lead); font-weight: var(--fw-heading);
  font-size: var(--fs-h4); line-height: var(--lh-h4); text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 12px; }

/* Body / long-form + Small/Caption */
.u-body { font-family: var(--font-alt); font-size: var(--fs-body); line-height: var(--lh-body); }
small, .u-small, .caption { font-family: var(--font-alt); font-weight:var(--fw-regular);
  font-size: var(--fs-small); line-height: var(--lh-small); }

blockquote { font-family: var(--font-serif); }
.font-lead  { font-family: var(--font-lead); }
.font-alt   { font-family: var(--font-alt); }
.font-serif { font-family: var(--font-serif); }

/* Metallic chrome wordmark — apply to "ETHAN" text */
.metallic{
  background:linear-gradient(180deg,#eef1f4 0%,var(--silver-1) 38%,var(--silver-2) 60%,#eef1f4 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.35)) drop-shadow(0 2px 3px rgba(0,0,0,.28));
}
/* Nautical wave divider (drop between sections) */
.wave-divider{display:block;width:100%;line-height:0}
.wave-divider svg{width:100%;height:56px;display:block}

/* ── UTILITY CLASSES ── */
.glass {
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.13);
}
.glass--light {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.55);
}
.grad-text {
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* ── LAYOUT ── */
.container    { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.section      { padding: clamp(48px, 8vw, 96px) 0; }
.section--blue  { background: linear-gradient(140deg, var(--navy) 0%, var(--navy-2) 100%);  color: #fff; }
.section--navy  { background: #fff; color: var(--text); }
.section--gray  { background: var(--gray); }
.section--surface { background: var(--surface); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 32px; border-radius: 0;   /* nút vuông góc, không bo */
  font-family: var(--font-lead); font-weight:var(--fw-semibold); font-size:var(--fs-base);
  cursor: pointer; border: none; transition: var(--t-base);
  position: relative; overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
  transform: translateX(-100%); transition: transform .5s var(--ease);
}
.btn:hover::after { transform: translateX(100%); }
.btn--sm  { padding: 10px 22px; font-size:var(--fs-base); }
.btn--yellow { background: linear-gradient(135deg, var(--yellow-2), var(--yellow)); color: var(--navy); font-weight:var(--fw-semibold); }
.btn--yellow:hover { filter: brightness(1.04); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(244,180,26,.4); }
.btn--outline { background: rgba(22,48,92,.08); color: var(--navy); border: none; }   /* bỏ viền → nền phẳng */
.btn--outline:hover { background: rgba(22,48,92,.15); transform: translateY(-2px); }
.btn--blue  { background: linear-gradient(135deg, var(--blue-br) 0%, #1668C9 100%); color: #fff; box-shadow: 0 6px 20px rgba(30,127,224,.35); }
.btn--blue:hover  { filter: brightness(1.05); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(30,127,224,.45); }
.btn--white { background: #fff; color: var(--navy); box-shadow: var(--sh-sm); }
.btn--white:hover { background: #f5f6f8; transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn--ghost { background: rgba(30,127,224,.1); color: var(--blue); border: none; }   /* bỏ viền → nền phẳng */
.btn--ghost:hover { background: var(--blue); color: #fff; transform: translateY(-2px); }
/* Outline buttons within dark sections need white styling */
.section--blue .btn--outline { color: #fff; background: rgba(255,255,255,.14); }
.section--blue .btn--outline:hover { background: rgba(255,255,255,.24); }

/* ── SECTION HEADER ── */
.sl  { font-size:var(--fs-base); font-weight:var(--fw-semibold); letter-spacing: 2.5px; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.st  { font-family: var(--font-lead); font-size: var(--fs-display); font-weight: var(--fw-heading); line-height: var(--lh-display); }
.ss  { font-family: var(--font-lead); font-size: var(--fs-body); color: var(--text); max-width: 560px; margin-top: 14px; line-height: var(--lh-body); }
.sh  { margin-bottom: 56px; }
.sh.c { text-align: center; }
.sh.c .ss { margin: 14px auto 0; }
.divider   { width: 56px; height: 3px; background: linear-gradient(90deg, var(--blue), var(--yellow)); border-radius:0; margin-top: 16px; }
.divider.c { margin: 16px auto 0; }

/* ── IMAGE PLACEHOLDERS ── */
.img-ph {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #dde3f0 0%, #c5cedf 100%);
}
.img-ph > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; z-index: 2;
  border-radius: inherit;
  transition: transform .65s var(--ease), filter .4s;
}
.img-ph:hover > img { transform: scale(1.05); }

/* Avatar placeholder */
.ph-avatar { position: relative; overflow: hidden; border-radius: 50%; }
.ph-avatar > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%; z-index: 2; display: block;
}

/* Gradient palette for placeholders */
.ph-blue    { background: linear-gradient(135deg, #1D3251 0%, #2a4a76 100%); }
.ph-navy    { background: linear-gradient(135deg, #1D3251 0%, #0d1e35 100%); }
.ph-yellow  { background: linear-gradient(135deg, #333 0%, #111 100%); }
.ph-teal    { background: linear-gradient(135deg, #0d9488 0%, #059669 100%); }
.ph-purple  { background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); }
.ph-rose    { background: linear-gradient(135deg, #db2777 0%, #e11d48 100%); }
.ph-indigo  { background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%); }
.ph-dark    { background: linear-gradient(135deg, #111827 0%, #1f2937 100%); }
.ph-warm    { background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%); }

/* ── SCROLL REVEAL ── */
body.will-animate .reveal      { opacity: 0; transform: translateY(40px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
body.will-animate .reveal.rl   { transform: translateX(-50px); }
body.will-animate .reveal.rr   { transform: translateX(50px); }
body.will-animate .reveal.rs   { transform: scale(.92); }
body.will-animate .reveal.active { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .17s; } .d3 { transition-delay: .26s; }
.d4 { transition-delay: .35s; } .d5 { transition-delay: .44s; } .d6 { transition-delay: .53s; }

/* ── CARD BASE ── */
.card {
  background: #fff; border-radius: 0;
  border: none; box-shadow: var(--sh-sm);   /* góc vuông, không viền — tách nền bằng bóng nhẹ */
  transition: var(--t-base);
}
.card:hover {
  transform: translateY(-7px);
  box-shadow: var(--sh-lg);
  border-color: transparent;
}

/* ── TAG / BADGE ── */
.tag      { display: inline-block; font-size:var(--fs-base); font-weight:var(--fw-semibold); letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 10px; border-radius: 0; }
.tag--blue   { background: #EEF2FF; color: var(--blue); }
.tag--yellow { background: #f0f0f0; color: #111; }
.tag--green  { background: #F0FDF4; color: #15803d; }
.tag--purple { background: #F5F3FF; color: #7c3aed; }
.tag--red    { background: #FFF5F5; color: #dc2626; }
.tag--pink   { background: #FDF2F8; color: #a21caf; }
.tag--teal   { background: #F0FDFA; color: #0d9488; }

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  padding: 180px 0 96px;
  background: #0a0a0a;
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 70% 50%, rgba(0,212,255,.07) 0%, transparent 70%);
}
.page-hero::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0;
  height: 64px; background: #fff; clip-path: ellipse(55% 100% at 50% 100%); z-index: 2;
}
.page-hero--gray::after  { background: var(--gray); }
.page-hero--surface::after { background: var(--surface); }
.page-hero-inner   { position: relative; z-index: 1; }
.page-hero-dots    { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px); background-size: 36px 36px; will-change: transform; }
.page-hero-orb     { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; }
.page-hero-orb-1   { width: 520px; height: 520px; top: -160px; right: -100px; background: radial-gradient(circle, rgba(0,212,255,.12) 0%, transparent 70%); }
.page-hero-orb-2   { width: 280px; height: 280px; bottom: -20px; left: -60px; background: radial-gradient(circle, rgba(123,97,255,.12) 0%, transparent 70%); }
.page-hero-badge   {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  color: #00D4FF; font-size:var(--fs-base); font-weight:var(--fw-semibold); letter-spacing: 2px;
  text-transform: uppercase; padding: 7px 16px; border-radius: 0; margin-bottom: 22px;
}
.page-hero-title   { font-family: var(--font-lead); font-size: var(--fs-hero); font-weight: var(--fw-heading); color: #fff; line-height: var(--lh-hero); margin-bottom: 20px; }
.page-hero-title em { color: #00D4FF; font-style: normal; }
.page-hero-sub     { font-family: var(--font-lead); font-size: var(--fs-body); color: rgba(255,255,255,.6); max-width: 560px; line-height: var(--lh-body); }

/* ── BREADCRUMB ── */
.breadcrumb     { display: flex; align-items: center; gap: 8px; font-size:var(--fs-base); color: rgba(0,0,0,.45); margin-bottom: 22px; flex-wrap: wrap; }
.breadcrumb a   { color: rgba(0,0,0,.55); transition: color .2s; }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb-sep { color: rgba(0,0,0,.25); }
.breadcrumb span { color: var(--blue); font-weight:var(--fw-semibold); }
/* Trên nền tối .page-hero: đổi sang chữ sáng (mặc định đen mờ sẽ chìm mất) */
.page-hero .breadcrumb        { color: rgba(255,255,255,.5); }
.page-hero .breadcrumb a      { color: rgba(255,255,255,.75); }
.page-hero .breadcrumb a:hover{ color: #fff; }
.page-hero .breadcrumb-sep    { color: rgba(255,255,255,.35); }
.page-hero .breadcrumb span   { color: var(--blue-br, #2B8FFF); }

/* ══════════════════════════════════════════
   HEADER — Dark Aurora Redesign
══════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes hdr-aurora-drift {
  0%   { transform: translate(0, 0) scale(1); opacity: .7; }
  50%  { transform: translate(30px, -20px) scale(1.08); opacity: 1; }
  100% { transform: translate(-20px, 15px) scale(.95); opacity: .8; }
}
@keyframes hdr-border-glow {
  0%, 100% { opacity: .4; }
  50%       { opacity: 1; }
}
@keyframes hdr-nav-slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mob-menu-in {
  from { opacity: 0; transform: translateY(-12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mob-item-in {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes hdr-shimmer {
  0%   { left: -120%; }
  100% { left: 150%; }
}
@keyframes logo-pulse-ring {
  0%   { transform: scale(1);   opacity: .5; }
  70%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}
@keyframes nav-ripple {
  to { transform: scale(3); opacity: 0; }
}

/* ── BASE ── */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 0 24px;
  background: transparent;
  transition: background .45s cubic-bezier(.4,0,.2,1),
              box-shadow .45s cubic-bezier(.4,0,.2,1),
              backdrop-filter .45s;
  isolation: isolate;
}

/* Aurora blobs inside header (desktop only) */
.header::before,
.header::after { display: none; }
.header::before {
  width: 280px; height: 120px;
  top: -40px; left: 15%;
  background: radial-gradient(circle, rgba(6,182,212,.18) 0%, transparent 70%);
  filter: blur(40px);
  animation: hdr-aurora-drift 8s ease-in-out infinite;
}
.header::after {
  width: 220px; height: 100px;
  top: -20px; right: 18%;
  background: radial-gradient(circle, rgba(139,92,246,.14) 0%, transparent 70%);
  filter: blur(36px);
  animation: hdr-aurora-drift 10s ease-in-out infinite reverse;
}

/* On hero pages (dark bg) — show blobs immediately */
.header.on-dark::before,
.header.on-dark::after { opacity: 1; }

/* Scrolled — opaque dark glass */
.header.scrolled {
  background: rgba(13,11,9,.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: none;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header.scrolled::before,
.header.scrolled::after { opacity: .7; }

/* Light-bg pages that haven't scrolled (inner pages with white hero) */
.header.on-light {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.header.on-light::before,
.header.on-light::after { opacity: 0; }
.header.on-light.scrolled {
  background: rgba(255,255,255,.98);
  box-shadow: none;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

/* Animated bottom-border glow */
.header .hdr-line { display: none; }

/* ── INNER ── */
.hi {
  max-width: 1300px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 160px;
  transition: height .35s cubic-bezier(.4,0,.2,1);
}
.header.scrolled .hi { height: 118px; }

/* Centered-logo layout: [ nav trái ][ LOGO ][ nav phải ] — logo canh giữa tuyệt đối */
.hi--center .nav-left  { flex: 1; justify-content: space-between; padding-right: clamp(20px, 4vw, 56px); }
.hi--center .nav-right { flex: 1; justify-content: space-between; padding-left:  clamp(20px, 4vw, 56px); }
.hi--center .logo      { flex: 0 0 auto; }

/* ── LOGO ── */
.logo { display: flex; align-items: center; position: relative; padding: 4px 8px; margin: 0; }
.logo img {
  height: 152px; width: auto; object-fit: contain; display: block;
  transition: height .35s cubic-bezier(.4,0,.2,1);
}
.header.scrolled .logo img { height: 108px; }

/* ── DESKTOP NAV ── */
.nav {
  display: flex; align-items: center; gap: clamp(16px, 2vw, 34px);
}

.nav a {
  font-family: var(--font-lead);
  font-size:var(--fs-base); font-weight:var(--fw-light);
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.82);
  transition: color .25s;
  position: relative;
  padding: 6px 0;
}
/* thin nav over hero photo — subtle shadow keeps light strokes legible */
.header.on-dark .nav a { text-shadow: 0 1px 14px rgba(0,0,0,.4); }

/* thin white underline slides in on hover (and marks the active page) */
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.5px; background: #fff; border-radius:0;
  transform: scaleX(0); transform-origin: center;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.nav a:hover::after { transform: scaleX(1); }
.nav a:hover { color: #fff; }

/* Light-mode nav adjustments */
.header.on-light .nav a          { color: rgba(0,0,0,.6); }
.header.on-light .nav a::after   { background: #000; }
.header.on-light .nav a:hover    { color: #000; }
.header.on-light.scrolled .nav a { color: rgba(0,0,0,.7); }

/* ── CTA BUTTON ── */
.nav-cta {
  background: transparent !important;
  color: #fff !important;
  padding: 11px 26px !important;
  border: none !important;
  background: rgba(255,255,255,.14) !important;
  border-radius: 0 !important;
  font-family: var(--font-display) !important;
  font-weight:var(--fw-semibold) !important; font-size:var(--fs-caption) !important;
  letter-spacing: .16em !important; text-transform: uppercase !important;
  box-shadow: none !important;
  transition: background .25s, color .25s, border-color .25s !important;
  margin-left: 10px !important;
}
.nav-cta::after  { display: none !important; }
.nav-cta::before { display: none !important; }
.nav-cta:hover {
  background: #fff !important;
  color: #0d0b09 !important;
  border-color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
}
.nav-cta:active { transform: none !important; }

/* Light-mode CTA */
.header.on-light .nav-cta {
  background: transparent !important;
  color: #16305C !important;
  border-color: rgba(22,48,92,.4) !important;
  box-shadow: none !important;
}
.header.on-light .nav-cta:hover {
  background: #16305C !important;
  color: #fff !important;
  border-color: #16305C !important;
  box-shadow: none !important;
}

/* ── HAMBURGER ── */
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; padding: 8px;
  border-radius:0;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  transition: background .3s, border-color .3s, transform .2s;
}
.hamburger:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(34,211,238,.35);
  transform: scale(1.06);
}
.hamburger span {
  width: 22px; height: 2px;
  background: rgba(255,255,255,.85);
  transition: transform .35s cubic-bezier(.4,0,.2,1),
              opacity .25s, background .3s, width .3s;
  border-radius:0;
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hamburger.open { background: rgba(34,211,238,.12); border-color: rgba(34,211,238,.4); }

/* Light mode hamburger */
.header.on-light .hamburger { border-color: rgba(0,0,0,.12); background: rgba(0,0,0,.04); }
.header.on-light .hamburger span { background: rgba(0,0,0,.7); }
.header.on-light .hamburger:hover { border-color: var(--blue); background: rgba(29,50,81,.07); }

/* ── MOBILE CALL BUTTON — nút gọi nhanh (tel:), chỉ hiện ≤768px, cân xứng với hamburger ── */
.hdr-call {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 40px; box-sizing: border-box; flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  -webkit-tap-highlight-color: transparent;
  transition: background .3s, border-color .3s, color .3s, transform .2s;
}
.hdr-call:hover, .hdr-call:active { background: rgba(34,211,238,.14); border-color: rgba(34,211,238,.42); color: #fff; }
.hdr-call svg { display: block; }
.header.on-light .hdr-call { border-color: rgba(0,0,0,.14); background: rgba(0,0,0,.04); color: rgba(0,0,0,.78); }
.header.on-light .hdr-call:hover { border-color: var(--blue); background: rgba(29,50,81,.07); color: var(--blue); }

/* ── MOBILE NAV — full-screen navy hàng hải: lưới chấm + vòng tròn mảnh,
   link IN HOA Fahkwang, số thứ tự vàng, CTA vàng phẳng ── */
.mob-nav {
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(168deg, #0F2244 0%, #16305C 62%, #1B2A4A 100%);
  padding: 104px 28px 36px;
  z-index: 998;
  pointer-events: none;
  opacity: 0;
  transform: scale(.97) translateY(-8px);
  transition: opacity .38s cubic-bezier(.4,0,.2,1),
              transform .38s cubic-bezier(.4,0,.2,1),
              pointer-events 0s .38s;
  overflow: hidden;
}

/* Nền: lưới chấm mờ (đồng bộ page-hero-dots) + vòng tròn mảnh neo góc (decor tròn) */
.mob-nav::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.mob-nav::after {
  content: '';
  position: absolute; width: 460px; height: 460px;
  top: -170px; right: -160px; border-radius: 50%;
  border: 1px solid rgba(43,143,255,.22);
  background: radial-gradient(circle, rgba(43,143,255,.10) 0%, transparent 68%);
  pointer-events: none;
}

.mob-nav.open {
  pointer-events: auto;
  opacity: 1;
  transform: scale(1) translateY(0);
  transition-delay: 0s;
}

/* Divider line */
.mob-nav-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1) 50%, transparent);
  margin: 8px 0;
}

.mob-nav a {
  color: rgba(255,255,255,.8);
  font-family: var(--font-heading, var(--font-lead));
  font-size: 19px; font-weight: var(--fw-regular, 400);
  letter-spacing: .14em; text-transform: uppercase;
  padding: 17px 2px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  position: relative;
  display: flex; align-items: center; gap: 16px;
  transition: color .25s, transform .25s cubic-bezier(.4,0,.2,1);
  opacity: 0;
  transform: translateX(-20px);
  counter-increment: mob-link;
}

/* Number prefix — vàng thương hiệu, nhỏ và mảnh */
.mob-nav a::before {
  content: counter(mob-link, decimal-leading-zero);
  font-family: var(--font-text);
  font-size: 11px; font-weight: var(--fw-semibold);
  color: rgba(244,180,26,.85);
  letter-spacing: .18em;
  min-width: 30px;
  transition: color .25s;
}

/* Arrow on hover */
.mob-nav a::after {
  content: '→';
  position: absolute; right: 0;
  font-size:var(--fs-md);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .25s, transform .3s cubic-bezier(.4,0,.2,1);
  color: #2B8FFF;
}
.mob-nav a:hover::after { opacity: 1; transform: translateX(0); }
/* Trang hiện tại: chữ trắng + số & mũi tên vàng (thay cho xanh cũ) */
.mob-nav a.active::after { opacity: 1; transform: translateX(0); color: var(--yellow, #F4B41A); }

.mob-nav a:hover, .mob-nav a.active { color: #fff; transform: translateX(6px); }
.mob-nav a:hover::before, .mob-nav a.active::before { color: var(--yellow, #F4B41A); }

/* Staggered animation when menu opens */
.mob-nav.open a { opacity: 1; transform: translateX(0); }
.mob-nav.open a:nth-child(1) { transition: opacity .35s .12s, transform .35s .12s cubic-bezier(.34,1.56,.64,1), color .25s; }
.mob-nav.open a:nth-child(2) { transition: opacity .35s .19s, transform .35s .19s cubic-bezier(.34,1.56,.64,1), color .25s; }
.mob-nav.open a:nth-child(3) { transition: opacity .35s .26s, transform .35s .26s cubic-bezier(.34,1.56,.64,1), color .25s; }
.mob-nav.open a:nth-child(4) { transition: opacity .35s .33s, transform .35s .33s cubic-bezier(.34,1.56,.64,1), color .25s; }
.mob-nav.open a:nth-child(5) { transition: opacity .35s .40s, transform .35s .40s cubic-bezier(.34,1.56,.64,1), color .25s; }
.mob-nav.open a:nth-child(6) { transition: opacity .35s .47s, transform .35s .47s cubic-bezier(.34,1.56,.64,1), color .25s; }

/* CTA "Liên hệ" — nút vàng phẳng chữ navy (pattern CTA vàng của site), full-width */
/* Nhóm 2 nút CTA trong menu (thay cho dock nổi trên mobile) */
.mob-nav .mob-cta-group { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.mob-nav .mob-cta {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; padding: 16px 24px; min-height: 52px;
  border: 2px solid transparent; border-bottom: none; border-radius: 0; -webkit-appearance: none; appearance: none;
  font-family: var(--font-lead); font-size: 15px; font-weight: var(--fw-semibold);
  letter-spacing: .18em; text-transform: uppercase; cursor: pointer;
  transition: transform .25s, filter .25s, background .25s, color .25s;
}
.mob-nav .mob-cta::before, .mob-nav .mob-cta::after { display: none; }
.mob-nav .mob-cta:hover, .mob-nav .mob-cta:active { transform: translateY(-2px); filter: brightness(1.04); }
/* Ứng tuyển ngay — nền trắng chữ navy */
.mob-nav .mob-cta--apply   { background: #fff; color: var(--navy, #16305C) !important; }
/* Liên hệ ngay — nền vàng (nổi bật trên nền navy của menu) */
.mob-nav .mob-cta--contact { background: linear-gradient(135deg, var(--yellow-2), var(--yellow)); color: var(--navy, #16305C) !important; }

/* Chân menu — email + hotline, đẩy xuống đáy màn */
.mob-nav-foot {
  margin-top: auto; padding-top: 20px;
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  position: relative; z-index: 1;
}
.mob-nav-foot .sep { color: rgba(255,255,255,.3); font-size: 13px; }
.mob-nav .mob-nav-foot a {
  opacity: 1; transform: none;
  font-family: var(--font-text); font-size: 13px; font-weight: var(--fw-medium);
  letter-spacing: .04em; text-transform: none;
  color: rgba(255,255,255,.55);
  padding: 10px 4px; border-bottom: none;
  min-height: 44px; display: inline-flex; align-items: center;
  counter-increment: none;
}
.mob-nav .mob-nav-foot a::before, .mob-nav .mob-nav-foot a::after { display: none; }
.mob-nav .mob-nav-foot a:hover { color: #fff; transform: none; }

/* Menu mobile đang mở → ẩn dock nút nổi (Ứng tuyển/Liên hệ, z-index 9000)
   để không đè lên chân menu */
body.mob-open .cp-dock {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s, visibility 0s .25s;
}

/* Reset counter on nav */
.mob-nav { counter-reset: mob-link; }

/* ══════════════════════════════════════════
   HEADER — Hide on scroll down / Show on scroll up
   + Mini tabbar when hidden
══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   TYPO ECO — đồng bộ hệ chữ trang chủ (section "Nền tảng vận hành")
   Bật theo trang bằng <body class="typo-eco"> (about/portfolio/blog/contact).
   Careers dùng bản riêng trong trang (có thêm phần smh-*).
   · Tiêu đề: Fahkwang 400 IN HOA — section 50px (≤1023px: clamp 24→32) · card 20px
   · Kicker 14px/.22em · Body Mulish: lead 18px, thường 16px · Chữ nhấn gradient chảy
══════════════════════════════════════════ */
body.typo-eco .sl{
  font-family:var(--font-heading);font-size:14px;font-weight:var(--fw-medium,500);
  letter-spacing:.22em;text-transform:uppercase;color:var(--navy,#16305C);
}
body.typo-eco .st,body.typo-eco .page-hero-title,body.typo-eco .faq__title{
  font-family:var(--font-heading);font-weight:var(--fw-regular,400);
  font-size:50px;line-height:1.3;letter-spacing:0;text-transform:uppercase;text-wrap:balance;
}
body.typo-eco .st,body.typo-eco .faq__title{color:var(--navy,#16305C)}  /* page-hero-title giữ trắng (nền tối) */
body.typo-eco .page-hero-title em{
  padding:.18em 0;
  background:linear-gradient(90deg,#1E7FE0,#2B8FFF,#F4B41A,#2B8FFF,#1E7FE0);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:typoGradFlow 2s linear infinite;
}
@keyframes typoGradFlow{to{background-position:-200% 0}}
body.typo-eco .ss,body.typo-eco .page-hero-sub{font-family:var(--font-text);font-size:18px;line-height:1.65}
body.typo-eco main h3,body.typo-eco main h4{
  font-family:var(--font-heading);font-size:20px;font-weight:var(--fw-regular,400);
  line-height:1.35;text-transform:uppercase;
}
body.typo-eco .feat-body h2{  /* tiêu đề bài nổi bật (blog) — card lớn */
  font-family:var(--font-heading);font-size:24px;font-weight:var(--fw-regular,400);
  line-height:1.3;text-transform:uppercase;
}
@media(max-width:1023px){
  body.typo-eco .st,body.typo-eco .page-hero-title,body.typo-eco .faq__title{font-size:clamp(24px,4.6vw,32px)}
}
@media(prefers-reduced-motion:reduce){
  body.typo-eco .page-hero-title em{animation:none}
}

/* Header slides up when scrolling down */
.header.nav-hidden {
  transform: translateY(-100%);
  pointer-events: none;
  box-shadow: none;
  border-bottom-color: transparent;
}
.header.nav-hidden::before,
.header.nav-hidden::after { opacity: 0; }
.header {
  transform: translateY(0);
  transition: transform .45s cubic-bezier(.4,0,.2,1),
              background .45s cubic-bezier(.4,0,.2,1),
              box-shadow .45s cubic-bezier(.4,0,.2,1),
              backdrop-filter .45s;
}


/* ══════════════════════════════════════════
   FOOTER — Dark Aurora Redesign
══════════════════════════════════════════ */

@keyframes foot-aurora-a { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(40px,-30px) scale(1.1)} }
@keyframes foot-aurora-b { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-30px,25px) scale(.92)} }
@keyframes foot-grid-fade { from{opacity:0} to{opacity:1} }
@keyframes foot-ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes foot-scan    { 0%{top:-100%} 100%{top:110%} }
@keyframes foot-dot-pop { 0%,100%{transform:scale(1);opacity:.5} 50%{transform:scale(1.6);opacity:1} }
@keyframes foot-link-glow { 0%,100%{text-shadow:none} 50%{text-shadow:0 0 12px rgba(43,143,255,.6)} }

.footer {
  position: relative;
  background: linear-gradient(180deg, #0C1E3D 0%, #06132A 100%);
  color: rgba(255,255,255,.6);
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}
/* Nautical wave cresting into footer */
.foot-wave { line-height: 0; margin-bottom: -1px; }
.foot-wave svg { width: 100%; height: 60px; display: block; }
.fsoc--fb { color: #fff; background: #1877F2; border-color: #1877F2; }
.fsoc--fb:hover { filter: brightness(1.08); transform: translateY(-2px); }
.fsoc { transition: transform .2s, color .2s, background .2s, border-color .2s; }
.fsoc:hover { color: #fff; border-color: rgba(43,143,255,.6); background: rgba(43,143,255,.18); transform: translateY(-2px); }

/* ── Aurora ambient blobs ── */
.foot-aurora { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.foot-orb-1 {
  position: absolute; width: 700px; height: 700px;
  top: -200px; left: -150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(6,182,212,.09) 0%, transparent 65%);
  filter: blur(80px);
  animation: foot-aurora-a 18s ease-in-out infinite;
}
.foot-orb-2 {
  position: absolute; width: 500px; height: 500px;
  bottom: -100px; right: -80px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,.08) 0%, transparent 65%);
  filter: blur(70px);
  animation: foot-aurora-b 14s ease-in-out infinite;
}
.foot-orb-3 {
  position: absolute; width: 300px; height: 300px;
  top: 40%; left: 55%; border-radius: 50%;
  background: radial-gradient(circle, rgba(251,191,36,.05) 0%, transparent 65%);
  filter: blur(60px);
  animation: foot-aurora-a 22s 4s ease-in-out infinite reverse;
}

/* Dot grid overlay */
.foot-dots {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 36px 36px;
}

/* Scan line */
.foot-scan {
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(6,182,212,.4), rgba(139,92,246,.4), transparent);
  z-index: 0; pointer-events: none;
  animation: foot-scan 8s linear infinite;
}

/* Top border glow */
.footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg,
    transparent 0%, rgba(6,182,212,.6) 25%,
    rgba(139,92,246,.6) 75%, transparent 100%);
}

/* ── TICKER MARQUEE ── */
.foot-ticker-wrap {
  position: relative; z-index: 1;
  border-bottom: 1px solid rgba(255,255,255,.06);
  overflow: hidden; padding: 0;
}
.foot-ticker-track {
  display: flex; width: max-content;
  animation: foot-ticker 28s linear infinite;
}
.foot-ticker-track:hover { animation-play-state: paused; }
.foot-ticker-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 32px;
  font-family: var(--font-lead);
  font-size:var(--fs-base); font-weight:var(--fw-semibold); letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.3);
  white-space: nowrap;
  transition: color .3s;
}
.foot-ticker-item:hover { color: rgba(255,255,255,.7); }
.foot-ticker-sep {
  width: 4px; height: 4px; border-radius: 50%;
  background: linear-gradient(135deg, #2B8FFF, #F4B41A);
  flex-shrink: 0;
  animation: foot-dot-pop 2s ease-in-out infinite;
}

/* ── MAIN GRID ── */
.foot-main { position: relative; z-index: 1; padding: 72px 0 56px; }
.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 56px;
}

/* ── BRAND COLUMN ── */
.foot-brand .logo img { filter: brightness(1.1); }
.foot-brand p {
  font-size:var(--fs-base); line-height: 1.9;
  margin-top: 18px; max-width: 260px;
  color: rgba(255,255,255,.38);
}

/* Social icons */
.foot-soc { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.fsoc {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size:var(--fs-base); font-weight:var(--fw-bold);
  color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
}

/* Status badge */
.foot-status {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px;
  padding: 7px 14px; border-radius:0;
  background: rgba(16,185,129,.08);
  border: 1px solid rgba(16,185,129,.25);
  font-size:var(--fs-base); font-weight:var(--fw-semibold); letter-spacing: .1em;
  color: rgba(16,185,129,.9); text-transform: uppercase;
}
.foot-status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #10b981;
  animation: led-blink 2.5s ease-in-out infinite;
}

/* ── NAV COLUMNS ── */
.footer h5 {
  font-family: var(--font-lead);
  font-size:var(--fs-base); font-weight:var(--fw-semibold);
  color: rgba(255,255,255,.25);
  margin-bottom: 22px; letter-spacing: .22em;
  text-transform: uppercase;
  position: relative; display: inline-block;
}
.footer h5::after {
  content: '';
  position: absolute; bottom: -6px; left: 0;
  width: 20px; height: 1.5px;
  background: linear-gradient(90deg, #2B8FFF, #F4B41A);
  border-radius:0;
}

.flinks { display: flex; flex-direction: column; gap: 4px; }
.flinks a {
  font-size:var(--fs-base); color: rgba(255,255,255,.38);
  display: inline-flex; align-items: center; gap: 0;
  padding: 7px 10px 7px 0;
  border-radius:0;
  position: relative; overflow: hidden;
  transition: color .25s, padding-left .25s, background .25s;
}
.flinks a::before {
  content: '→';
  font-size:var(--fs-base); color: #2B8FFF;
  opacity: 0; transform: translateX(-8px);
  transition: opacity .2s, transform .25s cubic-bezier(.4,0,.2,1);
  margin-right: 0; flex-shrink: 0;
}
.flinks a:hover {
  color: rgba(255,255,255,.85);
  padding-left: 20px;
  background: rgba(255,255,255,.04);
}
.flinks a:hover::before { opacity: 1; transform: translateX(0); margin-right: 6px; }

/* ── CONTACT COLUMN ── */
.fcon { display: flex; flex-direction: column; gap: 14px; }
.fcon-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius:0;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  transition: background .3s, border-color .3s, transform .3s;
}
.fcon-item:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(34,211,238,.2);
  transform: translateX(4px);
}
.fcon-ico {
  width: 32px; height: 32px; border-radius:0; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size:var(--fs-base);
  background: rgba(34,211,238,.08);
  border: 1px solid rgba(34,211,238,.15);
}
.fcon-txt h6 {
  font-family: var(--font-lead);
  font-size:var(--fs-base); font-weight:var(--fw-semibold); letter-spacing: .15em;
  text-transform: uppercase; color: rgba(255,255,255,.25);
  margin-bottom: 2px;
}
.fcon-txt p { font-size:var(--fs-base); font-weight:var(--fw-medium); color: rgba(255,255,255,.65); line-height: 1.5; }

/* ── DIVIDER ── */
.foot-divider {
  position: relative; z-index: 1;
  height: 1px; margin: 0 24px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,.08) 20%,
    rgba(255,255,255,.08) 80%, transparent 100%);
}

/* ── BOTTOM BAR ── */
.foot-bot {
  position: relative; z-index: 1;
  padding: 22px 0; text-align: center;
  font-size:var(--fs-base); color: rgba(255,255,255,.22);
  letter-spacing: .04em;
}
.foot-bot a { color: rgba(43,143,255,.6); transition: color .2s; }
.foot-bot a:hover { color: #2B8FFF; }

/* ── BACK TO TOP ── */
.btt {
  position: fixed; bottom: 28px; right: 28px;
  width: 46px; height: 46px;
  background: var(--blue);
  color: #fff; border-radius:0;
  display: flex; align-items: center; justify-content: center;
  font-size:var(--fs-md); cursor: pointer;
  opacity: 0; transform: translateY(12px) scale(.9);
  transition: all .35s var(--ease); z-index: 500; border: none;
  box-shadow: 0 6px 20px rgba(29,50,81,.35);
}
.btt.show  { opacity: 1; transform: translateY(0) scale(1); }
.btt:hover { background: var(--yellow); color: var(--navy); transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 28px rgba(244,180,26,.4); }

/* ── FORM ELEMENTS ── */
.fg { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.fg label { font-size:var(--fs-base); font-weight:var(--fw-semibold); letter-spacing: .5px; color: #374151; }
.fg input, .fg textarea, .fg select {
  background: #fafbff; border: 1.5px solid #e0e7f3; border-radius: var(--r-sm);
  padding: 13px 16px; font-family:var(--font-text); font-size:var(--fs-input);
  color: #1A1A2E; outline: none; transition: border-color .25s, box-shadow .25s, background .25s;
  width: 100%;
}
.fg input:focus, .fg textarea:focus, .fg select:focus {
  border-color: var(--blue); background: #fff;
  box-shadow: 0 0 0 4px rgba(29,50,81,.1);
}
.fg input:hover:not(:focus), .fg textarea:hover:not(:focus), .fg select:hover:not(:focus) {
  border-color: #b8c4dd;
}
.fg input::placeholder, .fg textarea::placeholder { color: #9ca3af; }
.fg textarea { resize: vertical; min-height: 110px; }
.fg select { cursor: pointer; }
/* Dark variant — repurposed to light for new design */
.fg--dark label { color: rgba(0,0,0,.65); }
.fg--dark input, .fg--dark textarea {
  background: #fff; border-color: #dde2ea; color: #000;
}
.fg--dark input::placeholder, .fg--dark textarea::placeholder { color: #9ca3af; }
.fg--dark input:focus, .fg--dark textarea:focus { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(29,50,81,.1); }

/* ── PAGINATION ── */
.pagination { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 56px; flex-wrap: wrap; }
.pg-btn { width: 40px; height: 40px; border-radius: var(--r-sm); border: 1.5px solid #dde3ee; background: #fff; font-size:var(--fs-base); font-weight:var(--fw-semibold); cursor: pointer; transition: var(--t-base); color: var(--text); display: flex; align-items: center; justify-content: center; }
.pg-btn:hover, .pg-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--sh-sm); }
.pg-btn.pg-dots { border: none; background: transparent; cursor: default; }
.pg-btn.pg-dots:hover { background: transparent; color: var(--text); transform: none; box-shadow: none; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 768px) {
  /* Cỡ chữ mobile do các token clamp() trong BẢNG ĐIỀU KHIỂN CHỮ tự xử lý */
  .nav       { display: none; }
  .hamburger { display: flex; }
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  .foot-main { padding: 52px 0 40px; }
  .page-hero { padding: 124px 0 76px; }
  /* Mobile header height — cao hơn để logo lớn */
  .hi { height: 74px; position: relative; }
  .header.scrolled .hi { height: 62px; }
  /* Bố cục 3 phần: ☰ menu trái · LOGO giữa · ☎ gọi phải
     — 2 icon TRẦN (không viền/nền), nhỏ & cân nhau (~21px), vùng chạm ≥44px nhờ padding */
  .hamburger { order: 1; border: none; background: none; backdrop-filter: none;
               padding: 12px; gap: 4px; }
  .hamburger:hover, .hamburger.open { background: none; border: none; transform: none; }
  .hamburger span { width: 21px; height: 2px; }
  .hdr-call { display: flex; order: 3; border: none; background: none;
              width: auto; height: auto; padding: 12px; color: #fff; }
  .hdr-call:hover, .hdr-call:active { background: none; color: #fff; }
  /* Logo LỚN + canh giữa tuyệt đối (không phụ thuộc bề rộng 2 icon bên) */
  .logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
          margin: 0; padding: 0; order: 2; }
  .logo img { height: 66px; }
  .header.scrolled .logo img { height: 54px; }
  /* Menu gọn hơn cho điện thoại: link nhỏ & sát nhau, số & nút nhỏ lại */
  .mob-nav { padding: 86px 22px 30px; }
  .mob-nav a { font-size: 16px; padding: 13px 2px; gap: 12px; letter-spacing: .12em; }
  .mob-nav a::before { font-size: 10px; min-width: 26px; }
  .mob-nav .mob-cta-group { margin-top: 20px; gap: 10px; }
  .mob-nav .mob-cta { font-size: 13px; min-height: 46px; padding: 13px 20px; letter-spacing: .16em; }
}
@media (max-width: 480px) {
  .btt { bottom: 16px; right: 16px; }
  /* Chỉ link điều hướng trực tiếp (không đụng CTA vàng & chân menu) */
  .mob-nav > a:not(.mob-cta) { font-size: 14px; }
}

/* ══════════════════════════════════════════════════
   HOVER-TO-FOCUS — hover 1 card, các card cùng lưới mờ đi
   Áp dụng site-wide qua shared.css. Chỉ bật trên thiết bị
   có con trỏ thật (không ảnh hưởng touch/mobile).
══════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  /* Card đang hover luôn nổi lên trên các card bị mờ */
  .values-grid .val-card:hover,
  .team-grid .team-card:hover,
  .dept-grid .dept-card:hover,
  .svb-grid .svb-card:hover,
  .blog-grid .bcard:hover,
  .testi-grid .tcard:hover,
  .benefits-grid .benefit-card:hover,
  .info-cards .info-card:hover,
  .case-grid .case-card:hover { position: relative; z-index: 3; }

  /* Bảo đảm blur/opacity chuyển động mượt cho các card dùng transition riêng */
  .blog-grid .bcard { transition: transform .3s, box-shadow .3s, filter .45s ease, opacity .45s ease; }
  .testi-grid .tcard { transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s, border-color .35s, background .35s, filter .45s ease, opacity .45s ease; }

  /* Làm mờ + tối + thu nhỏ các card KHÔNG được hover trong cùng lưới */
  .values-grid:hover .val-card:not(:hover),
  .team-grid:hover .team-card:not(:hover),
  .dept-grid:hover .dept-card:not(:hover),
  .svb-grid:hover .svb-card:not(:hover),
  .testi-grid:hover .tcard:not(:hover),
  .benefits-grid:hover .benefit-card:not(:hover),
  .info-cards:hover .info-card:not(:hover),
  .case-grid:hover .case-card:not(:hover) {
    filter: blur(3px);
    opacity: .45;
    transform: scale(.97);
  }

  /* Nhấn mạnh hơn cho GIÁ TRỊ CỐT LÕI: mờ sâu hơn + card hover nhỉnh lên */
  .values-grid:hover .val-card:not(:hover) {
    filter: blur(4px);
    opacity: .4;
    transform: scale(.94);
  }
  .values-grid .val-card:hover { transform: translateY(-6px) scale(1.03); }
}

/* Tôn trọng người dùng tắt hiệu ứng chuyển động: chỉ giữ độ mờ nhẹ, bỏ blur/scale */
@media (prefers-reduced-motion: reduce) {
  .values-grid:hover .val-card:not(:hover),
  .team-grid:hover .team-card:not(:hover),
  .dept-grid:hover .dept-card:not(:hover),
  .svb-grid:hover .svb-card:not(:hover),
  .testi-grid:hover .tcard:not(:hover),
  .benefits-grid:hover .benefit-card:not(:hover),
  .info-cards:hover .info-card:not(:hover),
  .case-grid:hover .case-card:not(:hover) {
    filter: none;
    transform: none;
    opacity: .6;
  }
}

/* ══════════════════════════════════════════════════
   STORYTELLING FX — nâng cấp hiệu ứng (Bucks Sauce → Ethan)
   Nguyên tắc: mượt, chuyên nghiệp; chỉ 2 font; tôn trọng
   reduced-motion; hiệu ứng phức tạp chỉ bật ở desktop.
══════════════════════════════════════════════════ */

/* 1) Reduced-motion: tắt mọi chuyển động, hiện nội dung ngay */
@media (prefers-reduced-motion: reduce) {
  body.will-animate .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .marquee-track { animation: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* 2) Đường dashed vàng phân tách section — chi tiết nhận diện tinh giản */
.sec-divider { display: flex; justify-content: center; padding: 4px 0; }
.sec-divider::before {
  content: ''; width: min(360px, 60%); height: 0;
  border-top: 1.5px dashed rgba(245, 166, 35, .55);
}
.section--blue + .sec-divider::before,
.sec-divider.on-dark::before { border-top-color: rgba(245, 166, 35, .4); }

/* 3) Số outline lớn mờ — điểm nhấn thị giác không cần thêm màu */
.outline-num {
  font-family: var(--font-lead); font-weight:var(--fw-bold); line-height: 1;
  font-size:var(--fs-display); letter-spacing: -.02em;
  -webkit-text-stroke: 1.5px rgba(29, 50, 81, .16); color: transparent;
  pointer-events: none; user-select: none;
}
.outline-num.on-dark { -webkit-text-stroke-color: rgba(255, 255, 255, .16); }
.outline-num.gold    { -webkit-text-stroke-color: rgba(245, 166, 35, .45); }

/* 4) Quote lớn hiện dần TỪNG DÒNG khi cuộn (chỉ đổi động tác, không đổi font) */
.q-line { display: block; }

/* 5) Sliding-pill cho filter tab (Portfolio / lọc bộ phận) — tint trượt, chữ luôn đọc được */
.pill-tabs { position: relative; }
.pill-ind {
  position: absolute; top: 0; left: 0; height: 100%; border-radius:0;
  background: rgba(29, 50, 81, .10); border: 1.5px solid rgba(29, 50, 81, .30);
  transition: transform .4s cubic-bezier(.4,0,.2,1), width .4s cubic-bezier(.4,0,.2,1), opacity .3s;
  z-index: 0; pointer-events: none; opacity: 0;
}
.pill-tabs .fbtn { position: relative; z-index: 1; transition: color .3s; }
/* Trong chế độ pill: bỏ nền đặc của nút, để pill làm nền trượt; chữ dùng navy đậm */
.pill-tabs .fbtn.active, .pill-tabs .fbtn:hover {
  background: transparent !important; color: var(--blue) !important; border-color: transparent !important;
  font-weight:var(--fw-semibold);
}
.pill-tabs.on-dark .pill-ind { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); }
.pill-tabs.on-dark .fbtn.active, .pill-tabs.on-dark .fbtn:hover { color: #fff !important; }

/* 6) Team hover/tap reveal — hiện chức danh + trích dẫn giá trị cốt lõi */
.team-card .team-quote {
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  font-size:var(--fs-small); color: var(--text); line-height: 1.6; font-style: italic;
  transition: max-height .45s cubic-bezier(.4,0,.2,1), opacity .35s, margin-top .35s;
}
@media (hover: hover) and (pointer: fine) {
  .team-card:hover .team-quote { max-height: 120px; opacity: 1; margin-top: 12px; }
}
/* Fallback không-hover (touch): mở bằng .is-open (JS toggle khi tap) */
.team-card.is-open .team-quote { max-height: 140px; opacity: 1; margin-top: 12px; }

/* 7) Marquee helper (logo đối tác / testimonial mobile) — dừng khi hover */
.marquee { overflow: hidden; position: relative; }
.marquee-track { display: flex; width: max-content; will-change: transform; animation: marquee-scroll 28s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ══════════════════════════════════════════════════
   A11Y + UX REFINEMENTS (site-wide audit)
   Palette-preserving: no color/font-family changes.
══════════════════════════════════════════════════ */

/* 1) Visible keyboard focus ring (was absent site-wide) — mouse/touch users unaffected */
:focus-visible {
  outline: 3px solid var(--blue-br);
  outline-offset: 2px;
  border-radius: inherit;
}
/* On dark surfaces the yellow token reads with higher contrast */
.header :focus-visible, .footer :focus-visible, .section--blue :focus-visible,
.mob-nav :focus-visible, .page-hero :focus-visible, .hamburger:focus-visible {
  outline-color: var(--yellow);
}
:focus:not(:focus-visible) { outline: none; }

/* 2) Skip-to-content link (revealed only on keyboard focus) */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--navy); color: #fff;
  padding: 12px 20px; border-radius:0;
  font-family: var(--font-lead); font-weight:var(--fw-semibold); font-size:var(--fs-small);
}
.skip-link:focus { left: 0; top: 0; }

/* 3) Hamburger — 44×44 touch target, bars stay centered */
.hamburger { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }

/* 4) Closed mobile nav must leave the tab order (was 6 phantom focus stops) */
.mob-nav {
  visibility: hidden;
  transition: opacity .38s var(--ease), transform .38s var(--ease), visibility 0s .38s;
}
.mob-nav.open {
  visibility: visible;
  transition: opacity .38s var(--ease), transform .38s var(--ease), visibility 0s 0s;
}

/* 5) Secondary controls → 44px minimum tap size */
.pg-btn { min-width: 44px; min-height: 44px; }
.fsoc   { width: 44px; height: 44px; }
.flinks a { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
.hamburger, .btt, .fbtn, .pg-btn, .fsoc, .mob-nav a, .nav a, .breadcrumb a { touch-action: manipulation; }

/* 6) Reduced-motion: also neutralise TRANSITIONS (hover lifts, header/height, translateX),
      not just @keyframes animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
}

/* 7) Type scale — uppercase micro-labels step BELOW body (16px) to restore hierarchy.
      Body copy + form fields intentionally stay 16px (no iOS auto-zoom). */
.sl              { font-size:var(--fs-caption); }
.tag             { font-size:var(--fs-caption); }
.page-hero-badge { font-size:var(--fs-caption); }
.breadcrumb      { font-size:var(--fs-caption); }
.footer h5       { font-size:var(--fs-caption); }
.fcon-txt h6     { font-size:var(--fs-micro); }
.foot-ticker-item{ font-size:var(--fs-caption); }
.foot-status     { font-size:var(--fs-micro); }
.foot-bot        { font-size:var(--fs-caption); }

/* Mobile: shorter fixed header → smaller anchor offset */
@media (max-width: 768px) {
  html { scroll-padding-top: 76px; }
}

/* ══════════════════════════════════════════════════════════
   FOOTER — navy 800, Ethan cream/navy design system
   (site-footer / .ft-* ; replaces old .footer/.foot-*)
   ══════════════════════════════════════════════════════════ */
.site-footer{background:#142E4A;color:#ffffff;padding:62px 0 32px}
.site-footer .ft-container{max-width:1400px;margin:0 auto;padding:0 32px}

/* Logo (light badge because the logo art sits on white) */
.site-footer .ft-logo{text-align:center;margin-bottom:32px}
.site-footer .ft-logo-badge{display:inline-block;transition:transform .3s ease}
.site-footer .ft-logo-badge:hover{transform:translateY(-3px)}
.site-footer .ft-logo-badge:focus-visible{outline:2px solid #CBBA95;outline-offset:6px;border-radius:0}
.site-footer .ft-logo img{height:140px;width:auto;display:block;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.site-footer .ft-logo-sub{font-family:var(--font-heading);font-weight:400;font-size:11px;letter-spacing:.3em;text-transform:uppercase;margin-top:14px;color:#B8CCE0}

/* Top nav */
.site-footer .ft-nav{margin-bottom:40px}
.site-footer .ft-nav ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:20px 50px;margin:0;padding:0}
.site-footer .ft-nav a{font-family:var(--font-heading);font-weight:400;font-size:18px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:#ffffff;text-decoration:none;transition:color .2s}
.site-footer .ft-nav a:hover{color:#8FADC9}
.site-footer .ft-nav a:focus-visible{outline:2px solid #CBBA95;outline-offset:4px}

.site-footer .ft-divider{border:none;border-top:1px solid #1D3D5F;margin:0 0 62px}

/* 4 columns */
.site-footer .ft-columns{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 50px;margin-bottom:62px}
.site-footer .ft-col h3{font-family:var(--font-heading);font-weight:500;font-size:20px;line-height:1.3;text-transform:uppercase;color:#ffffff;margin:0 0 20px;position:relative;padding-bottom:12px}
.site-footer .ft-col h3::after{content:'';position:absolute;left:0;bottom:0;width:36px;height:2px;background:#B49F73}
.site-footer .ft-col p{font-family:var(--font-text);font-size:15px;line-height:1.5;color:#B8CCE0;margin:0 0 24px}
.site-footer .ft-col p:last-child{margin-bottom:0}
.site-footer .ft-col ul{list-style:none;margin:0;padding:0}
.site-footer .ft-col ul li{margin-bottom:12px}
.site-footer .ft-col ul li:last-child{margin-bottom:0}
.site-footer .ft-col a{font-family:var(--font-text);font-size:15px;line-height:1.5;color:#B8CCE0;text-decoration:none;transition:color .2s}
.site-footer .ft-col a:hover{color:#ffffff}
.site-footer .ft-col a:focus-visible{outline:2px solid #CBBA95;outline-offset:3px}
.site-footer .ft-label{display:block;font-family:var(--font-text);font-weight:700;color:#ffffff;letter-spacing:.02em;margin-bottom:2px}

/* Bottom bar */
.site-footer .ft-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;padding-top:24px;border-top:1px solid #1D3D5F}
.site-footer .ft-social{font-family:var(--font-text);font-size:15px;line-height:1.5;color:#B8CCE0;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.site-footer .ft-social a{font-weight:700;color:#ffffff;text-decoration:none;padding:0 8px;transition:color .2s}
.site-footer .ft-social a:hover{color:#CBBA95}
.site-footer .ft-social a:focus-visible{outline:2px solid #CBBA95;outline-offset:3px}
.site-footer .ft-social .sep{color:#274E76}
.site-footer .ft-copy{font-family:var(--font-text);font-size:15px;line-height:1.5;color:#B8CCE0;text-align:right}

@media (max-width:1024px){
  .site-footer .ft-nav a{font-size:15px}
  .site-footer .ft-col h3{font-size:15px}
  .site-footer .ft-columns{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .site-footer{padding:50px 0 24px}
  .site-footer .ft-container{padding:0 20px}
  .site-footer .ft-logo img{height:104px}
  .site-footer .ft-columns{grid-template-columns:1fr;gap:32px}
  .site-footer .ft-bottom{flex-direction:column;align-items:flex-start}
  .site-footer .ft-copy{text-align:left}
}

/* ═══ CURSOR FX — vòng la bàn + sao kim chỉ nam hiện sau con trỏ khi hover
   phần tử bấm được. Sinh bởi initCursorFx() trong shared.js; mũi tên hệ thống
   giữ nguyên nằm đè lên trên. ═══ */
.cursor-fx{
  position:fixed;left:0;top:0;width:52px;height:52px;margin:-26px 0 0 -26px;
  pointer-events:none;z-index:99999;
  opacity:0;transform:scale(.15) rotate(-30deg);
  transition:opacity .22s ease,transform .38s cubic-bezier(.34,1.56,.64,1);
}
.cursor-fx.is-on{opacity:1;transform:scale(1) rotate(0deg)}
.cursor-fx.is-press{transform:scale(.82) rotate(8deg);transition-duration:.15s,.15s}
.cursor-fx svg{width:100%;height:100%;display:block;animation:cursorFxSpin 10s linear infinite}
@keyframes cursorFxSpin{to{rotate:360deg}}
@media (hover:none),(pointer:coarse){.cursor-fx{display:none}}

/* ═══ MOBILE CALM ≤767px — decor nền đứng yên, đỡ repaint liên tục (site-wide) ═══ */
@media (max-width: 767px) {
  /* Ambient loop của decor nền (nếu trang có) — tĩnh trên mobile */
  .bg-deco .deco-blob, .bg-deco .deco-ring, .bg-deco .p-dot { animation: none !important; }
  /* Gradient chữ chảy (typo-eco: about/blog/contact/vision) — đứng yên */
  body.typo-eco .page-hero-title em { animation: none; }
}

/* ═══ TABLET NAV — 769–1024px: ẩn nav ngang, chuyển sang hamburger + header gọn.
   Bọc min-width 769px vì block mobile ≤768px nằm TRƯỚC trong file — nếu chỉ
   dùng max-width:1024px, các giá trị header ở đây sẽ thắng cascade và đè
   lên header mobile. Desktop >1024px không bị chạm tới. ═══ */
@media (min-width: 769px) and (max-width: 1024px) {
  .nav       { display: none; }
  .hamburger { display: flex; }
  .hi { height: 96px; }
  .header.scrolled .hi { height: 80px; }
  .logo img { height: 84px; }
  .header.scrolled .logo img { height: 68px; }
  /* Menu overlay chừa đúng chiều cao header tablet */
  .mob-nav { padding-top: 116px; }
}