/* 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; }
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%;
  background: linear-gradient(90deg, var(--color-ink), var(--color-silver));
  pointer-events: none;
}

#preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2xs);
  background: var(--color-paper);
  font-family: var(--font-outlier);
  transition: opacity 0.5s var(--ease-out), visibility 0.5s;
}
#preloader .preloader__num {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}
#preloader .preloader__pct { font-size: 1.25rem; color: var(--color-muted); }
#preloader.preloader--done { opacity: 0; visibility: hidden; }

/* ---------- 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 */
.fx-spot::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), var(--color-spot), transparent 65%);
  opacity: 0;
  transition: opacity var(--dur-short) var(--ease-out);
  pointer-events: none;
}
.fx-spot:hover::after, .fx-spot:focus-within::after { opacity: 1; }

/* 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 {
  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 { 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; } }

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

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav);
  padding-block: 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__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);
}
.chip:hover { border-color: var(--color-silver); box-shadow: 0 0 18px var(--color-glow-soft); }
.chip:active { transform: translateY(1px); }

/* ---------- Hero: shimmer kim loại + letter stagger, trái, trong container ---------- */

.hero {
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  position: relative;
  padding-block: var(--space-2xl) var(--space-3xl);
}

.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; }
@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: var(--space-lg);
  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);
}
.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__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 {
  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); }
.stat__hint { color: var(--color-neutral); font-size: var(--text-sm); }

.stats--metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.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; }
}
.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);
}

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

.facts__list {
  border-block-start: 1px solid var(--color-rule);
  max-width: var(--measure);
}
.facts__row {
  display: grid;
  grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-sm);
  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);
}
.facts__row dd { margin: 0; color: var(--color-ink); }

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

.faq {
  display: grid;
  gap: var(--space-lg);
  max-width: var(--measure);
  margin-block-start: var(--space-2xl);
}
.faq__q { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.faq__a { color: var(--color-muted); }

/* 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. */
.facts__box { border-block-start: 1px solid var(--color-rule); }
.facts__summary {
  cursor: pointer;
  list-style: none;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-lg);
}
.facts__summary::-webkit-details-marker { display: none; }
.facts__summary::after {
  content: '';
  inline-size: 0.55em;
  block-size: 0.55em;
  border-inline-end: 2px solid var(--color-muted);
  border-block-end: 2px solid var(--color-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-short) var(--ease-out);
  flex: none;
}
.facts__box[open] .facts__summary::after { transform: rotate(225deg) translateY(-2px); }
.facts__meta { display: inline-flex; align-items: center; gap: var(--space-md); }
.facts__toggle {
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  color: var(--color-muted);
  letter-spacing: 0.06em;
}
.facts__box[open] .facts__toggle { visibility: hidden; }
.facts__body { 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); } }

/* ---------- 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;
  justify-content: space-between;
  gap: var(--space-md);
  position: relative;
  z-index: 1;
}
.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__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);
}
.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; }

/* ---------- Skills: grid cards bo góc + spotlight ---------- */

.skills__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
}

.skill-card {
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  min-height: 8.5rem;
  display: grid;
  gap: var(--space-xs);
  align-content: space-between;
  transition: transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out);
}
.skill-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-silver);
  box-shadow: var(--shadow-card-hover);
}
.skill-card__name { font-family: var(--font-display); font-weight: 600; }
.skill-card__note {
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ---------- Contact: email pill đen to, glow, centered ---------- */

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

.section--contact .section__head {
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
}

.contact__note {
  color: var(--color-muted);
  max-width: var(--measure);
  margin-inline: auto;
  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);
}
.contact__email:hover { box-shadow: var(--shadow-glow); }

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

/* Email / phone / 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);
}
.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); }

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

.foot {
  border-block-start: 1px solid var(--color-rule);
  padding-block: var(--space-xl);
}
.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 { 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);
}
.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(18px);
  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; }

/* ---------- 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__name { animation: none; }
  .hero__name .ch { animation: none; opacity: 1; transform: none; background: none; color: var(--color-ink); }
  .fx-beam:hover::before { animation: none; opacity: 1; }
  .fx-mag, .fx-mag:active, .fx-mag.btn:active { transform: none; }
}

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

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

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

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

  .nav__wordmark { display: none; }
  .nav__inner { padding-inline: var(--space-md) var(--space-2xs); }

  .hero { min-height: auto; padding-block: var(--space-2xl) var(--space-3xl); }
  .hero__name { font-size: clamp(2.75rem, 15vw, 5rem); }

  .stats { grid-template-columns: minmax(0, 1fr); }

  .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); }
}

/* 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. */
@media (max-width: 34rem) {
  .nav__wordmark { display: revert; }
  .nav__links { display: none; }
  .nav__inner { padding-inline: var(--space-md); }
  .foot__nav { display: flex; flex-wrap: wrap; gap: var(--space-md); inline-size: 100%; }
}