/* =============================================================
   Protrans v2 · BASE - reset, typography, layout primitives
   -------------------------------------------------------------
   BREAKPOINTS (dùng thống nhất toàn site, ưu tiên trải nghiệm mobile):
     560px  = phone
     768px  = tablet dọc        (mốc QA tham chiếu)
     900px  = tablet ngang / điểm gom lưới nhiều cột
   Ngoại lệ có chủ đích (không gom):
     980/981px = cặp sticky-cta (hiện) <-> back-to-top (dịch lên)
     1100px    = nav links -> burger menu
   Quy tắc: viết max-width theo 3 mốc trên; chỉ thêm mốc khác khi 1
   component thực sự vỡ ở width đó và ghi rõ lý do ngay tại chỗ.
   ============================================================= */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
ul{ list-style:none; }

h1,h2,h3,h4{
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.03em;
  color:var(--ink);
  text-wrap:balance;
}
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); font-weight:700; letter-spacing:-.02em; }
p{ text-wrap:pretty; }
strong{ font-weight:700; }

/* Layout primitives */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container-narrow{ max-width:780px; margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); }
.section--tight{ padding-block:clamp(48px,6vw,80px); }

/* Mobile: form control >=16px -> iOS Safari không auto-zoom khi focus field */
@media (max-width:768px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select, textarea{ font-size:16px; }
}

/* Dark (navy) surface */
.surface-ink{ background:var(--ink); color:var(--on-dark); position:relative; overflow:hidden; }
.surface-ink h1,.surface-ink h2,.surface-ink h3{ color:var(--on-dark); }
.surface-ink p{ color:var(--on-dark-soft); }

/* Eyebrow (dùng tiết chế, ≤1/3 section) */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent-d);
}
.surface-ink .eyebrow{ color:var(--accent-l); }

/* Section header */
.s-head{ max-width:680px; margin-bottom:clamp(40px,5vw,64px); }
.s-head.center{ margin-inline:auto; text-align:center; }
.s-head h2{ margin-block:14px 16px; }
.s-head p{ font-size:var(--fs-lead); color:var(--text-soft); max-width:62ch; }
.surface-ink .s-head p{ color:var(--on-dark-soft); }

/* Accessibility */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:6px;
}
.skip-link{
  position:absolute; left:16px; top:-60px; z-index:var(--z-overlay);
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:var(--r-sm);
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:16px; }

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* Trang không có hero (trang con): nav ở chế độ đặc, chừa chỗ cho nav fixed */
body.nav-solid{ padding-top:72px; }

/* Guard: ảnh hỏng/chậm không phá layout */
img{ max-width:100%; height:auto; }