/* Hallmark · pre-emit critique: P5 H5 E4 S5 R3 V5
 * genre: modern-minimal "white premium" · macrostructure: Stacking-Card Portfolio
 * (container căn giữa 68rem — KHÔNG full-bleed, user chốt v8)
 * theme: custom achromatic + platinum glow · enrichment: none
 * nav: pill nổi sticky (biến thể N9) · footer: Ft2
 * v8 menu đã chốt: spotlight card · noise grain · border beam · shine sweep ·
 *   magnetic + ripple · shimmer hero · letter stagger · sticky stack ·
 *   preloader · scroll progress · parallax · counter · trắng mặc định + dark toggle
 * glow/beam/parallax/preloader: user yêu cầu tường minh → chủ đích override Hallmark restraint
 */

/* ---------- Registered property — border beam chạy quanh viền ---------- */

@property --beam-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { overflow-x: clip; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body { overflow-x: clip; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.7;
  background: var(--color-paper);
  color: var(--color-ink);
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}

::selection { background: var(--color-ink); color: var(--color-accent-ink); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.container {
  width: min(100% - var(--pad-edge) * 2, var(--container));
  margin-inline: auto;
}

/* ---------- Noise grain phủ toàn trang ---------- */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 800;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Parallax blobs + scroll progress + preloader ---------- */

.fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

.fx-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}
.fx-blob--1 {
  inline-size: 44vmax; block-size: 44vmax;
  inset: -14vmax -16vmax auto auto;
  background: radial-gradient(circle, var(--color-glow-soft), transparent 65%);
}
.fx-blob--2 {
  inline-size: 38vmax; block-size: 38vmax;
  inset: auto auto -12vmax -12vmax;
  background: radial-gradient(circle, var(--color-glow-soft), transparent 65%);
}

#progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 950;
  inline-size: 100%;
  block-size: 3px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;           /* JS ghi scaleX mỗi scroll frame — giữ trên layer compositor */
  background: linear-gradient(90deg, var(--color-ink), var(--color-silver));
  pointer-events: none;
}

#preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  background: var(--color-paper);
  font-family: var(--font-outlier);
  transition: opacity 0.5s var(--ease-out), visibility 0.5s;
}
#preloader.preloader--done { opacity: 0; visibility: hidden; }

/* Vòng tiến trình: track mờ + cung bạc chạy theo % */
.preloader__ring {
  position: relative;
  inline-size: clamp(7.5rem, 22vw, 10.5rem);
  aspect-ratio: 1;
  transition: transform 0.5s var(--ease-out);
}
.preloader__ring svg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}
.preloader__track {
  fill: none;
  stroke: var(--color-rule);
  stroke-width: 2;
}
.preloader__arc {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;          /* JS đẩy về 0 dần theo % */
  filter: drop-shadow(0 0 6px var(--color-silver));
}
.preloader__readout {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.preloader__pair {
  display: inline-flex;
  align-items: baseline;
  gap: 0.06em;
}
.preloader__num {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}
.preloader__pct { font-size: 0.95rem; color: var(--color-muted); }

.preloader__word {
  font-size: var(--text-sm);
  letter-spacing: 0.28em;
  color: var(--color-ink);
  text-indent: 0.28em;             /* bù letter-spacing để chữ cân giữa */
  margin-block-start: calc(var(--space-lg) * -0.35);
}
.preloader__label {
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--color-muted);
}
#preloader.preloader--done .preloader__ring { transform: scale(0.96); }

/* ---------- Hiệu ứng dùng chung: spotlight / beam / shine / magnetic / ripple ---------- */

.fx-spot, .fx-beam, .fx-shine { position: relative; }

/* Spotlight: vệt sáng bạc bám con trỏ trong card.
   Hình tròn 440px (bán kính 220px) di chuyển bằng transform — chạy trên
   compositor, rê chuột không vẽ lại card. --mx/--my = offset px từ tâm card. */
.fx-spot { overflow: hidden; }
.fx-spot::after {
  content: '';
  position: absolute;
  inset-block-start: calc(50% - 220px);
  inset-inline-start: calc(50% - 220px);
  inline-size: 440px;
  block-size: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-spot), transparent 65%);
  transform: translate(var(--mx, 0px), var(--my, 0px));
  opacity: 0;
  transition: opacity var(--dur-short) var(--ease-out);
  pointer-events: none;
}
.fx-spot:hover::after, .fx-spot:focus-within::after, .fx-spot:active::after { opacity: 1; }

/* Chỉ promote layer card đang được hover (không phải cả 14 card thường trực):
   spotlight chạy bằng custom property không tự lên compositor nếu thiếu hint. */
@media (hover: hover) and (pointer: fine) {
  .fx-spot:hover::after,
  .fx-spot:focus-within::after { will-change: transform; }
  .fx-mag:hover { will-change: transform; }
}
@media (hover: none) and (pointer: coarse) {
  .fx-spot:active::after { will-change: transform; }
}

/* Border beam: viền sáng chạy vòng quanh khi hover */
.fx-beam::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--beam-angle, 0deg),
    transparent 0deg, var(--color-silver) 55deg, var(--color-ink) 90deg, var(--color-silver) 125deg, transparent 180deg, transparent 360deg);
  -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(--dur-short) var(--ease-out);
  pointer-events: none;
}
.fx-beam:hover::before, .fx-beam:focus-within::before, .fx-beam:active::before {
  opacity: 1;
  animation: fx-beam-spin 3.2s linear infinite;
}
@keyframes fx-beam-spin { to { --beam-angle: 360deg; } }

/* Shine sweep: vệt sáng quét ngang */
.fx-shine { overflow: hidden; }
.fx-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 42%, var(--color-shine) 50%, transparent 58%);
  transform: translateX(-110%);
  transition: transform 0.7s var(--ease-out);
  pointer-events: none;
}
.fx-shine:hover::after, .fx-shine:focus-visible::after, .fx-shine:active::after { transform: translateX(110%); }

/* Magnetic: JS set --mag-x/--mag-y (chỉ pointer fine) */
.fx-mag { transform: translate(var(--mag-x, 0px), var(--mag-y, 0px)); }
.fx-mag:active { transform: translate(var(--mag-x, 0px), calc(var(--mag-y, 0px) + 1px)); }

/* Ripple: JS gắn span khi click */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
  transform: scale(0);
  animation: ripple 0.55s var(--ease-out) forwards;
  pointer-events: none;
}
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* Mac slide arrow: mũi tên trượt lệch khi hover — quá đà chút rồi về vị trí nghỉ.
   Dùng translate riêng để không đụng transform của .fx-mag. */
.fx-slide .fx-slide__ico { transition: translate var(--dur-short) var(--ease-out); }
.fx-slide:hover .fx-slide__ico,
.fx-slide:active .fx-slide__ico,
.fx-slide:focus-visible .fx-slide__ico { animation: fx-slide-ico 0.32s var(--ease-out); }
@keyframes fx-slide-ico { 60% { translate: 4px -4px; } 100% { translate: 3px -3px; } }

/* Thành phần mang icon brand (không có mũi tên): trượt nhẹ nhãn */
.fx-slide > span { transition: translate var(--dur-short) var(--ease-out); }
@media (hover: hover) {
  .fx-slide:hover > span { translate: -1px 0; }
}
@media (hover: none) {
  .fx-slide:active > span { translate: -1px 0; }
}

/* Touch: JS gắn .fx-press khi nhấn và giữ tới khi thả ngón tay — mô phỏng hover PC.
   Beam hiện tĩnh, KHÔNG xoay: animation --beam-angle repaint gradient mỗi frame
   trên main thread, phone giật. PC đủ nhanh nên giữ xoay infinite. */
@media (hover: none) and (pointer: coarse) {
  .fx-spot.fx-press::after { opacity: 1; will-change: transform; }
  .fx-beam.fx-press::before { opacity: 1; }
  .fx-shine.fx-press::after { transform: translateX(110%); }
  .fx-slide.fx-press .fx-slide__ico { animation: fx-slide-ico 0.32s var(--ease-out); }
  .fx-slide.fx-press > span { translate: -1px 0; }

  .nav-link.fx-press { color: var(--color-ink); background: var(--color-paper-3); }
  .chip.fx-press { border-color: var(--color-silver); box-shadow: 0 0 18px var(--color-glow-soft); }
  .btn--primary.fx-press { box-shadow: var(--shadow-glow); }
  .btn--ghost.fx-press { background: var(--color-paper-3); border-color: var(--color-silver); }
  .project-card.fx-press { border-color: var(--color-silver); box-shadow: var(--shadow-card-hover), var(--shadow-glow); }
  .project-card__name a.fx-press { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
  .project-card__go.fx-press { border-color: var(--color-silver); box-shadow: 0 0 18px var(--color-glow-soft); }
  .contact__email.fx-press { box-shadow: var(--shadow-glow); }
  .contact-chip.fx-press { color: var(--color-ink); border-color: var(--color-silver); box-shadow: 0 0 18px var(--color-glow-soft); }
  .foot a.fx-press { color: var(--color-ink); }
  .backtotop.fx-press { border-color: var(--color-silver); box-shadow: 0 0 18px var(--color-glow-soft); }
}

/* Squish: nén khi nhấn, nảy lại khi thả. scale riêng để không đè transform của .fx-mag;
   timing scale nằm trong transition list của từng thành phần (giữ transition sẵn có). */
.fx-squish:active { scale: 1.05 0.9; }

/* Mũi tên "về đầu trang": xoay mũi tên chéo lên-phải thành thẳng đứng */
.backtotop .fx-slide__ico { rotate: -45deg; }

/* ---------- Nav: pill nổi, glass nhẹ, trong container ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav);
  padding-block: max(var(--space-md), env(safe-area-inset-top, 0px)) var(--space-md);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  block-size: 56px;
  padding-inline: var(--space-lg) var(--space-2xs);
  background: var(--color-nav-bg);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  line-height: 1;
}

.nav__wordmark {
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-ink);
}

.nav__links { display: flex; gap: var(--space-2xs); }

.nav-link {
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-decoration: none;
  padding-block: 0.55rem;
  padding-inline: var(--space-md);
  border-radius: var(--radius-pill);
  transition: color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.nav-link:hover { color: var(--color-ink); background: var(--color-paper-3); }
.nav-link:active { color: var(--color-ink); background: var(--color-paper-3); }

/* Menu mobile: nút ≡ chỉ hiện dưới 34rem, panel thả xuống dưới nav pill.
   Chọn .chip.nav__menu-btn để thắng display:inline-flex của .chip (rule sau cùng tính bằng specificity) */
.chip.nav__menu-btn { display: none; }
.nav__menu { display: none; }

.nav__actions { display: flex; gap: var(--space-xs); }

.chip {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  min-block-size: 44px;
  min-inline-size: 44px;
  padding-inline: var(--space-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-short) var(--ease-out),
              scale var(--dur-short) var(--ease-spring);
}
.chip:hover { border-color: var(--color-silver); box-shadow: 0 0 18px var(--color-glow-soft); }
.chip:active { transform: translateY(1px); }

/* ---------- Hero: ghim màn hình + zoom cinematic khi cuộn ---------- */

/* Runway: hero cao 1.5× chiều cao pin → pha ghim nửa viewport, không kéo dài.
   Range exit 0%–100% của --hero vẫn map đúng pha ghim. */
.hero {
  position: relative;
  min-height: calc(1.5 * (100svh - var(--nav-h)));
}
.hero__pin {
  position: sticky;
  top: 0;
  block-size: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  overflow: clip;
}

/* Lưới mesh đàn hồi: canvas phủ toàn pin, chữ đè lên trên.
   Mask tan biến ở đáy để không chạm section kế tiếp. */
.hero__mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  block-size: 100%;
  inline-size: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(#000 0%, #000 78%, transparent 100%);
}
.hero__pin > .container, .hero__pin > .hero__scroll { position: relative; z-index: 1; }

/* Logo chấm: chèn vào vùng chữ, đè sau tagline/CTA. Chuột xáo trộn rồi nảy về. */
.hero__logo {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 12vw;
  translate: 0 -50%;
  z-index: 0;
  inline-size: clamp(280px, 38vw, 560px);
  aspect-ratio: 651 / 683;
  pointer-events: none;
}
@media (min-width: 68rem) {
  .hero__logo { inset-inline-end: calc(50% - var(--container) / 2 + 14rem); }
}

/* Khi hero còn trên màn hình: mờ blob nền để mesh là lớp nền duy nhất */
html.hero-mesh-on .fx-blob { opacity: 0; }
.fx-blob { transition: opacity var(--dur-long) var(--ease-out); }

.hero__label {
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  color: var(--color-muted);
  letter-spacing: 0.14em;
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.hero__label::after {
  content: '';
  block-size: 1px;
  inline-size: clamp(40px, 8vw, 120px);
  background: linear-gradient(90deg, var(--color-silver), transparent);
}

.hero__name {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-block: var(--space-lg);
  user-select: none;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}
/* Mỗi ký tự tự mang gradient + clip riêng: con có animation tạo layer riêng,
 * gradient đặt trên phần tử cha sẽ không phủ tới glyph của con → chữ vô hình. */
.hero__name .ch {
  display: inline-block;
  background-image: linear-gradient(100deg, var(--color-ink) 30%, var(--color-shimmer-band) 48%, var(--color-ink) 66%);
  background-size: var(--word-w, 100%) 100%;
  background-position: calc(0px - var(--o, 0px)) 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ch-in 0.6s var(--ease-out) both, ch-shine 7s ease-in-out infinite;
  animation-delay: var(--d, 0ms), 0ms;
  animation-play-state: paused, paused;
}
html.hero-go .hero__name .ch { animation-play-state: running, running; }
/* Hero đã cuộn khỏi màn hình: pause shimmer + bob, không repaint nữa */
html.hero-off .hero__name .ch { animation-play-state: paused, paused; }
html.hero-off .hero__scroll svg { animation-play-state: paused; }
@keyframes ch-in { from { opacity: 0; transform: translateY(0.6em); } }
@keyframes ch-shine {
  0%, 100% { background-position: calc(var(--peek, 0px) - var(--o, 0px)) 0; }
  50%      { background-position: calc(0px - var(--peek, 0px) - var(--o, 0px)) 0; }
}

.hero__tagline {
  font-size: var(--text-md);
  color: var(--color-muted);
  max-width: 48ch;
  margin-block-end: var(--space-xl);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-md); }

.hero__scroll {
  position: absolute;
  inset-block-end: max(var(--space-lg), env(safe-area-inset-bottom, 0px));
  inset-inline-start: 50%;
  translate: -50% 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  color: var(--color-muted);
  text-decoration: none;
}
.hero__scroll svg { animation: scroll-bob 1.8s ease-in-out infinite; }
@keyframes scroll-bob { 50% { transform: translateY(5px); } }

/* ---------- Buttons: pill bo góc, glow, shine/beam ---------- */

.btn {
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  min-block-size: 48px;
  padding-inline: var(--space-xl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-pill);
  overflow: hidden;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-short) var(--ease-out),
              transform 0.28s var(--ease-out), scale var(--dur-short) var(--ease-spring);
}
.btn--primary {
  background: var(--color-ink);
  color: var(--color-accent-ink);
  box-shadow: var(--shadow-card);
}
.btn--primary:hover { box-shadow: var(--shadow-glow); }
.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-rule); }
.btn--ghost:hover { background: var(--color-paper-3); border-color: var(--color-silver); }
.fx-mag.btn:active { transform: translate(var(--mag-x, 0px), calc(var(--mag-y, 0px) + 1px)); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* ---------- Sections ---------- */

.section {
  padding-block: clamp(4.5rem, 12vh, 7.5rem);
  scroll-margin-top: calc(var(--nav-h) + var(--space-md));
}

/* Section dưới gấp: trình duyệt bỏ render ngoài viewport, cuộn tới mới vẽ.
   reveal/counter vẫn chạy vì IntersectionObserver vẫn thấy element. */
#awards, #metrics, #facts, .section--contact {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-block-end: clamp(2rem, 5vh, 3.5rem);
}

.section__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  min-width: 0;
}

.section__count {
  font-family: var(--font-outlier);
  font-size: var(--text-md);
  color: var(--color-muted);
  letter-spacing: 0.08em;
}

/* ---------- About: 2 cột + stat cards bo góc ---------- */

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-2xl);
  align-items: start;
}

.about__lede {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  max-width: 44ch;
}

.about__side { display: grid; gap: var(--space-lg); }
.about__side p { color: var(--color-muted); max-width: var(--measure); }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-lg);
  margin-block-start: var(--space-2xl);
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-xl) var(--space-lg);
}
.stat__number {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3.5vw, 3.25rem);
  font-weight: 600;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  display: block;
}
.stat__label { color: var(--color-muted); font-size: var(--text-sm); margin-block-start: auto; }
.stat__hint { color: var(--color-neutral); font-size: var(--text-sm); }

/* Skeleton: chờ số liệu live — JS gắn .stat-card--skel, chữ ẩn sau thanh placeholder,
   vệt sáng quét ngang (pattern như .fx-shine). Clear = màu chữ trở lại. */
.stat-card--skel .stat__number { color: transparent; position: relative; transition: color var(--dur-short) var(--ease-out); }
.stat-card--skel .stat__number::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 4ch;
  border-radius: var(--radius-sm);
  background: var(--color-paper-3);
}
.stat-card--skel .stat__number::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--color-skel-sweep), transparent);
  translate: -110% 0;
  animation: skel-sweep 1.4s var(--ease-out) infinite;
  pointer-events: none;
}
@keyframes skel-sweep { to { translate: 110% 0; } }

.stats--metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-card--lead { grid-column: span 2; }
.stat-card--lead .stat__number { font-size: clamp(2.75rem, 4.5vw, 4.25rem); }
.metrics__live {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-block-start: var(--space-lg);
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.metrics__live::before {
  content: '';
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--color-rule);
  flex: none;
}
.metrics__live.is-live::before {
  background: var(--color-silver);
  box-shadow: 0 0 0 0 var(--color-glow);
  animation: live-pulse 2.4s var(--ease-out) infinite;
}
@keyframes live-pulse {
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
/* Section số liệu rời màn hình: pause chấm live, không repaint nữa (JS bật .sec-vis) */
#metrics:not(.sec-vis) .metrics__live.is-live::before { animation-play-state: paused; }
.metrics__note {
  margin-block-start: var(--space-2xs);
  color: var(--color-neutral);
  font-size: var(--text-sm);
}

/* ---------- Facts + FAQ ---------- */

.hero__real {
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  color: var(--color-muted);
  margin-block-start: calc(var(--space-lg) * -0.5);
  margin-block-end: var(--space-lg);
}

/* Mục hỏi nhanh: gấp sẵn, bấm mới mở. Chữ vẫn nằm trong HTML nên bot vẫn đọc.
   Đầu mục nằm luôn trong <summary> nên tiêu đề + dòng tóm tắt vẫn hiện khi gấp. */
.facts__box { --facts-measure: 46rem; }

.facts__summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-align: center;
  cursor: pointer;
  list-style: none;
  padding-block-end: clamp(2rem, 5vh, 3.5rem);
  border-radius: var(--radius-md);
}
.facts__summary::-webkit-details-marker { display: none; }

.facts__count {
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  color: var(--color-muted);
  letter-spacing: 0.18em;
}

.facts__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  max-inline-size: 24ch;
  text-wrap: balance;
}

.facts__lede {
  display: block;
  color: var(--color-muted);
  max-inline-size: 46ch;
  text-wrap: balance;
}

.facts__cue {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-block-start: var(--space-sm);
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  color: var(--color-muted);
  transition: color var(--dur-short) var(--ease-out);
}
.facts__summary:hover .facts__cue { color: var(--color-ink); }
.facts__box[open] .facts__toggle { visibility: hidden; }

.facts__chevron {
  inline-size: 0.6em;
  block-size: 0.6em;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform var(--dur-short) var(--ease-out);
  flex: none;
}
.facts__box[open] .facts__chevron { transform: rotate(225deg) translateY(-1px); }

.facts__body {
  max-inline-size: min(var(--facts-measure), 100%);
  margin-inline: auto;
  padding-block-end: var(--space-xl);
}
.facts__box[open] .facts__body { animation: facts-in var(--dur-long) var(--ease-out); }
@keyframes facts-in { from { opacity: 0; transform: translateY(-6px); } }

.facts__list { border-block-start: 1px solid var(--color-rule); }
.facts__row {
  display: grid;
  grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: baseline;
  padding-block: var(--space-md);
  border-block-end: 1px solid var(--color-rule);
}
.facts__row dt {
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  color: var(--color-muted);
  letter-spacing: 0.04em;
}
.facts__row dd { margin: 0; color: var(--color-ink); }

.facts__privacy {
  margin-block-start: var(--space-md);
  color: var(--color-neutral);
  font-size: var(--text-sm);
}

/* FAQ: mỗi câu một <details>, dấu + thành − khi mở */
.faq {
  display: grid;
  margin-block-start: var(--space-2xl);
  border-block-start: 1px solid var(--color-rule);
}
.faq__item { border-block-end: 1px solid var(--color-rule); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  cursor: pointer;
  list-style: none;
  padding-block: var(--space-lg);
  border-radius: var(--radius-sm);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:active .faq__q-text { color: var(--color-neutral); }

.faq__q-text {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.faq__icon {
  position: relative;
  flex: none;
  inline-size: 0.875rem;
  block-size: 0.875rem;
  color: var(--color-muted);
  transition: color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.faq__q:hover .faq__icon { color: var(--color-ink); }
.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
  border-radius: var(--radius-pill);
}
.faq__icon::before { inline-size: 0.875rem; block-size: 1.5px; }
.faq__icon::after {
  inline-size: 1.5px;
  block-size: 0.875rem;
  transition: transform var(--dur-short) var(--ease-out);
}
.faq__item[open] .faq__icon { transform: rotate(225deg); color: var(--color-ink); }
.faq__item[open] .faq__icon::after { transform: scaleY(0); }

html.js .faq__a-wrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-long) var(--ease-out);
}
html.js .faq__a-clip { min-block-size: 0; overflow: hidden; }

.faq__a {
  max-inline-size: var(--measure);
  color: var(--color-muted);
  padding-block-end: var(--space-lg);
  animation: faq-in var(--dur-short) var(--ease-out);
}
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- Giải thưởng ---------- */

.awards__lede {
  color: var(--color-muted);
  max-inline-size: var(--measure);
  margin-block-end: var(--space-xl);
}

.awards {
  display: grid;
  list-style: none;
  max-inline-size: min(46rem, 100%);
  border-block-start: 1px solid var(--color-rule);
}
.award {
  display: grid;
  grid-template-columns: minmax(4.5rem, 6rem) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: baseline;
  padding-block: var(--space-lg);
  border-block-end: 1px solid var(--color-rule);
}
.award__year {
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  color: var(--color-muted);
  letter-spacing: 0.08em;
}
.award__body { min-width: 0; }
.award__name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.award__org {
  color: var(--color-muted);
  max-inline-size: var(--measure);
  margin-block-start: var(--space-2xs);
}

.awards__foot {
  margin-block-start: var(--space-lg);
  max-inline-size: var(--measure);
  color: var(--color-neutral);
  font-size: var(--text-sm);
}

/* ---------- Projects: sticky stacking cards ---------- */

.stack {
  display: grid;
  gap: var(--space-xl);
  padding-block-end: var(--space-2xl);
}

.project-card {
  position: sticky;
  top: calc(var(--nav-h) + var(--space-lg) + var(--i) * 1.75rem);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-md);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(1.5rem, 4vw, 3rem);
  min-height: clamp(15rem, 38vh, 20rem);
  transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.project-card:hover { border-color: var(--color-silver); box-shadow: var(--shadow-card-hover), var(--shadow-glow); }

.project-card__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  position: relative;
  z-index: 1;
}
/* Nhãn stack đẩy về phía phải, nhãn cách làm nằm ngay sau nó */
.project-card__stack { margin-inline-start: auto; }

.project-card__tag {
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  color: var(--color-muted);
  letter-spacing: 0.06em;
  white-space: nowrap;
  padding: var(--space-3xs) var(--space-sm);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
}
.project-card__index {
  font-family: var(--font-outlier);
  font-size: var(--text-md);
  color: var(--color-muted);
}
.project-card__stack {
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  color: var(--color-muted);
  background: var(--color-paper-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  padding: var(--space-3xs) var(--space-md);
  white-space: nowrap;
}

.project-card__mid { position: relative; z-index: 1; align-self: center; }

.project-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.5vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  min-width: 0;
}
.project-card__name a { text-decoration: none; }
.project-card__name a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

.project-card__desc { color: var(--color-muted); max-width: 52ch; margin-block-start: var(--space-sm); }

.project-card__award {
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  color: var(--color-muted);
  letter-spacing: 0.04em;
  margin-block-start: var(--space-md);
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--color-rule);
}

.project-card__foot { display: flex; align-items: center; position: relative; z-index: 1; }

.project-card__go {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-block-size: 44px;
  padding-inline: var(--space-lg);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  text-decoration: none;
  color: var(--color-ink);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  overflow: hidden;
  transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-short) var(--ease-out),
              scale var(--dur-short) var(--ease-spring);
}
.project-card__go:hover { border-color: var(--color-silver); box-shadow: 0 0 18px var(--color-glow-soft); }
.project-card__go svg { inline-size: 15px; block-size: 15px; }

/* ---------- Contact: email pill đen to làm tâm điểm bằng kích thước ---------- */

.section--contact { padding-block-end: clamp(5rem, 12vh, 8rem); }

.contact__note {
  color: var(--color-muted);
  max-width: var(--measure);
  margin-block-end: var(--space-2xl);
}

.contact__email {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-big);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-decoration: none;
  color: var(--color-accent-ink);
  background: var(--color-ink);
  border-radius: var(--radius-pill);
  padding: var(--space-lg) clamp(1.75rem, 6vw, 3.5rem);
  box-shadow: var(--shadow-card);
  overflow-wrap: anywhere;
  transition: box-shadow var(--dur-short) var(--ease-out), transform 0.28s var(--ease-out),
              scale var(--dur-short) var(--ease-spring);
}
.contact__email:hover { box-shadow: var(--shadow-glow); }

.contact__socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-sm);
  margin-block-start: var(--space-xl);
}

.contact__discord-note {
  margin-block-start: var(--space-md);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* Email / Zalo / Telegram / Discord / GitHub — cùng một dạng pill */
.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-block-size: 44px;
  padding-inline: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-decoration: none;
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out), scale var(--dur-short) var(--ease-spring);
}
.contact-chip svg { inline-size: 16px; block-size: 16px; flex: none; }
.contact-chip:hover { color: var(--color-ink); border-color: var(--color-silver); box-shadow: 0 0 18px var(--color-glow-soft); }
.contact-chip:active { transform: translateY(1px); }

/* ---------- Ft2 · footer ---------- */

.foot {
  border-block-start: 1px solid var(--color-rule);
  padding-block: var(--space-xl) max(var(--space-xl), env(safe-area-inset-bottom, 0px));
}
.foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1;
}
.foot a { color: var(--color-muted); text-decoration: none; white-space: nowrap; }
.foot a:hover, .foot a:active { color: var(--color-ink); }
.foot__sep { color: var(--color-rule); }

/* Link điều hướng dự phòng khi nav pill bỏ link (màn hẹp) */
.foot__nav { display: none; }
.foot__nav a { min-block-size: 44px; display: inline-flex; align-items: center; }

.backtotop {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-block-size: 44px;
  padding-inline: var(--space-md);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  overflow: hidden;
  position: relative;
  transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-short) var(--ease-out),
              scale var(--dur-short) var(--ease-spring);
}
.backtotop:hover { border-color: var(--color-silver); box-shadow: 0 0 18px var(--color-glow-soft); }

/* ---------- Reveal-once + stagger ---------- */

html.js .reveal {
  opacity: 0;
  transform: translateY(64px) scale(0.96);
  transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out);
  transition-delay: var(--d, 0ms);
}
html.js .reveal--visible { opacity: 1; transform: none; }

/* ---------- Scroll-driven depth — CSS scroll-driven animations (Chrome 115+/Safari 26)
   Gate html.sdt do main.js thêm khi CSS.supports('animation-timeline: view()') và
   không prefers-reduced-motion. Quy tắc bắt buộc: animation-timeline / animation-range
   phải nằm SAU shorthand `animation` — shorthand reset timeline về auto, hiệu ứng
   thành animation theo thời gian và nhảy thẳng end-state. ---------- */

@supports (animation-timeline: view()) {

  /* Hero cinematic: pha ghim = range exit của --hero (hero cao 2× pin).
     Container zoom + blur; h1 là lớp gần nhất (con .ch sở hữu transform, cha rảnh).
     Label/real/tagline/CTA KHÔNG có timeline — entrance fx-hero-rise
     (scroll-fx.css) đã sở hữu translate/opacity trên chính chúng. */
  @media (prefers-reduced-motion: no-preference) {
    .hero { view-timeline-name: --hero; }

    .hero__pin > .container {
      animation: hero-fg-zoom auto linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 100%;
      will-change: transform, filter, opacity;
    }
    .hero__name {
      animation: hero-name-zoom auto linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 100%;
    }
    .hero__mesh {
      animation: hero-mesh-exit auto linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 100%;
    }
    .hero__logo {
      animation: hero-logo-exit auto linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 90%;
    }
    .hero__scroll {
      animation: hero-cue-exit auto linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 25%;
    }
  }

  /* Progress bar = chỉ báo vị trí, không phải chuyển động — vẫn chạy dưới reduced-motion,
     thay cho JS write mỗi frame (main.js:736 cũng viết không điều kiện) */
  html.sdt #progress {
    animation: progress-grow auto linear both;
    animation-timeline: scroll(root block);
  }

  @media (prefers-reduced-motion: no-preference) {
    .fx-blob--1 { --blob-drift: -22vh; }
    .fx-blob--2 { --blob-drift: -11vh; }
    .fx-blob {
      animation: blob-drift auto linear both;
      animation-timeline: scroll(root block);
    }
  }

  /* Số thứ tự section + năm giải trễ nửa bước sau tiêu đề — con của .reveal, không cần fallback */
  @media (prefers-reduced-motion: no-preference) {
    .section__count,
    .award__year {
      animation: depth-settle auto linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 85%;
    }
  }

  /* Email pill đạt trọn kích thước khi tới gần giữa viewport — `scale` riêng
     compose với transform: translate(--mag-x,--mag-y) của .fx-mag */
  @media (prefers-reduced-motion: no-preference) {
    .contact__email {
      animation: email-grow auto linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
  }
}

@keyframes hero-fg-zoom {
  /* 12% đầu giữ nguyên — cho entrance stagger kịp chạy xong sau preloader */
  0%, 12% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; filter: blur(0); }
  88%     { opacity: 0; }
  100%    { transform: translate3d(0, 4vh, 0) scale(var(--hero-zoom, 1.4)); opacity: 0; filter: blur(var(--hero-blur, 12px)); }
}
@keyframes hero-name-zoom {
  0%, 12% { transform: scale(1); translate: 0 0; }
  100%    { transform: scale(var(--hero-name-zoom, 1.55)); translate: 0 6vh; }
}
@keyframes hero-mesh-exit {
  to { transform: translate3d(0, var(--mesh-lag, 34vh), 0) scale(1.18); opacity: 0.2; }
}
@keyframes hero-logo-exit {
  to { transform: translate3d(0, var(--logo-lag, 48vh), 0) rotate(8deg); opacity: 0; }
}
@keyframes hero-cue-exit {
  to { opacity: 0; }
}
@keyframes progress-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes blob-drift {
  to { transform: translate3d(0, var(--blob-drift, -10vh), 0); }
}
@keyframes depth-settle {
  from { transform: translateY(1em); opacity: 0.35; }
}
@keyframes email-grow {
  from { scale: 0.92; }
}

/* Failsafe: timeline/transition kẹt cho element trong viewport → hiện thẳng */
html.js .reveal--force { opacity: 1; transform: none; }
html.sdt .reveal--force { animation: none; }

/* Dark theme: nền tối cần dim mạnh hơn để covered card đọc là "lùi vào sau" */
html[data-theme="dark"] .stack .project-card { --recede-dim-amount: 0.16; }

/* ---------- Stack recede: card bị che lùi vào chiều sâu — `scale` + `filter`
   (property riêng) để không đụng transform/opacity mà hệ reveal đang sở hữu.
   Không dùng view(): Chrome đóng băng timeline của phần tử khi sticky,
   nên --recede do JS ghi (initScrollFx) cho MỌI trình duyệt. ---------- */

@media (prefers-reduced-motion: no-preference) and (min-width: 48.0625rem) {
  html.js .stack .project-card:not(:last-child) {
    scale: calc(1 - var(--recede, 0) * 0.09);
    filter: brightness(calc(1 - var(--recede, 0) * var(--recede-dim-amount, 0.11)));
  }
}

/* ---------- Fallback (Firefox v.v.): main.js ghi --hero-p
   trong listener scroll rAF-throttle hiện có, không thêm listener.
   --hero-p = tiến trình pha GHIM (hero height − pin height), không phải cả hero. ---------- */

@media (prefers-reduced-motion: no-preference) {
  html.js:not(.sdt) .hero__pin > .container {
    transform: translate3d(0, calc(var(--hero-p, 0) * 4vh), 0) scale(calc(1 + var(--hero-p, 0) * (var(--hero-zoom, 1.4) - 1)));
    opacity: calc(1 - min(var(--hero-p, 0) * 1.35, 1));
    filter: blur(calc(var(--hero-p, 0) * var(--hero-blur, 12px)));
  }
  html.js:not(.sdt) .hero__name {
    transform: scale(calc(1 + var(--hero-p, 0) * (var(--hero-name-zoom, 1.55) - 1)));
    translate: 0 calc(var(--hero-p, 0) * 6vh);
  }
  html.js:not(.sdt) .hero__mesh {
    transform: translate3d(0, calc(var(--hero-p, 0) * 34vh), 0) scale(calc(1 + var(--hero-p, 0) * 0.18));
    opacity: calc(1 - var(--hero-p, 0) * 0.8);
  }
  html.js:not(.sdt) .hero__logo {
    transform: translate3d(0, calc(var(--hero-p, 0) * 48vh), 0) rotate(calc(var(--hero-p, 0) * 8deg));
    opacity: calc(1 - var(--hero-p, 0));
  }
  html.js:not(.sdt) .hero__scroll { opacity: calc(1 - var(--hero-p, 0) * 2.5); }
}

/* Reduced motion: bỏ hẳn runway pin — hero về layout tĩnh như bản gốc */
@media (prefers-reduced-motion: reduce) {
  .hero { min-height: calc(100svh - var(--nav-h)); }
  .hero__pin { position: static; block-size: auto; }
  .hero__pin > .container { filter: none; }
}

/* ---------- Toast: pill nổi top-center, kiểu dynamic island ---------- */

/* Nằm dưới nav pill (không đè nút điều hướng), một element duy nhất —
   JS thay nội dung + bật/tắt class, toast mới đè toast cũ. */
.toast {
  position: fixed;
  inset-block-start: calc(var(--nav-h) + var(--space-2xs));
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: var(--z-toast);
  display: inline-flex;
  align-items: center;
  max-inline-size: min(92vw, 30rem);
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  box-shadow: var(--shadow-card-hover);
  font-size: var(--text-sm);
  color: var(--color-ink);
  pointer-events: none;
  opacity: 0;
  scale: 0.7 0.5;
  transition: opacity var(--dur-short) var(--ease-out), scale var(--dur-short) var(--ease-spring);
}
.toast--show { opacity: 1; scale: 1 1; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; }
  .hero__mesh { display: none; }
  .hero__name { animation: none; }
  .hero__name .ch { animation: none; opacity: 1; transform: none; background: none; color: var(--color-ink); }
  .fx-beam:hover::before, .fx-beam:active::before { animation: none; opacity: 1; }
  .fx-mag, .fx-mag:active, .fx-mag.btn:active { transform: none; }
  .fx-slide .fx-slide__ico { animation: none; transition: none; }
  .fx-slide > span { transition: none; }
  .stat-card--skel .stat__number::before { animation: none; }
  .toast { scale: 1 1; transition: opacity var(--dur-micro) linear; }
  .facts__box[open] .facts__body,
  .faq__a { animation: none; }
}

/* ---------- Tablet ---------- */

@media (max-width: 64rem) {
  .about__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .stats--metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card--lead { grid-column: span 2; }
}

/* ---------- Mobile ---------- */

@media (max-width: 48rem) {
  :root { --pad-edge: 1.25rem; }

  .nav__wordmark { display: none; }
  .nav__inner { padding-inline: var(--space-md) var(--space-2xs); }
  .nav__inner {
    backdrop-filter: blur(8px) saturate(1.1);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
  }

  /* Mobile: pin ngắn theo nội dung, runway 0.3 viewport, không blur (GPU).
     Bọc no-preference: block reduce ở style.css đứng TRƯỚC block này —
     không bọc thì 130svh thắng và hero reduced-motion bị kéo dài vô ích. */
  @media (prefers-reduced-motion: no-preference) {
    .hero { min-height: 130svh; --hero-zoom: 1.22; --hero-blur: 0px; --mesh-lag: 18vh; --logo-lag: 26vh; }
  }
  .hero__pin { block-size: auto; min-block-size: 0; padding-block: var(--space-2xl) var(--space-3xl); }
  .hero__name { font-size: clamp(2.75rem, 15vw, 5rem); }
  .hero__logo { inline-size: 70vw; opacity: 0.28; inset-inline-end: 50%; translate: 50% -50%; }

  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat-card--lead { grid-column: auto; }
  .stat-card--lead .stat__number { font-size: clamp(2.25rem, 9vw, 3.25rem); }

  .facts__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }

  /* stack cards về dòng thường trên mobile */
  .project-card { position: static; min-height: 0; }

  .contact__email { font-size: clamp(1.375rem, 7vw, 2.25rem); padding: var(--space-md) var(--space-xl); }
}

/* Màn hẹp và thấp (vd iPhone SE 667px): bỏ cue cuộn xuống kẻ đè CTA */
@media (max-height: 700px) and (max-width: 48rem) {
  .hero__scroll { display: none; }
  .hero { padding-block: var(--space-xl) var(--space-xl); }
}

/* Nav hẹp: 4 link + 2 chip chỉ đủ chỗ từ ~34rem trở lên → dưới mức đó bỏ link,
   giữ wordmark + chip, và bù link điều hướng ở footer. */
/* Nav có 5 link: ở bề rộng trung bình phải siết khoảng đệm ngang cho vừa. */
@media (min-width: 34rem) and (max-width: 52rem) {
  .nav__links { gap: 0; }
  .nav-link { padding-inline: var(--space-sm); }
}

@media (max-width: 34rem) {
  .nav__wordmark { display: revert; }
  .nav__links { display: none; }
  .nav__inner { padding-inline: var(--space-md); }
  .chip.nav__menu-btn { display: inline-flex; }
  .nav__menu {
    position: absolute;
    inset-inline: var(--pad-edge);
    inset-block-start: calc(100% + var(--space-2xs));
    display: none;
    flex-direction: column;
    gap: var(--space-2xs);
    background: var(--color-paper-2);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card-hover);
    padding: var(--space-sm);
    z-index: var(--z-sticky-nav);
  }
  .nav__menu.open { display: flex; animation: faq-in var(--dur-short) var(--ease-out); }
  .nav__menu .nav-link { padding-block: var(--space-sm); font-size: var(--text-base); }
  .foot__nav { display: flex; flex-wrap: wrap; gap: var(--space-md); inline-size: 100%; }
  .award { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
}