/* =========================================================
   DESIGN TOKENS — đổi màu / font toàn trang tại đây
   ========================================================= */
:root {
  --ink: #111111;        /* chữ & nét đen */
  --ink-2: #3B3B3B;      /* đoạn văn */
  --muted: #7A7A7A;      /* chữ phụ */
  --paper: #F3F2EE;      /* màu giấy */
  --rim: #FBFAF6;        /* mép giấy rách (viền trắng) */
  --grid: rgba(0, 0, 0, .065); /* đường kẻ ô */
  --grid-size: 26px;
  --night: #0D0D0D;      /* dải đen */
  --red: #FF2E2E;        /* màu nhấn (viền chân dung, chữ viết tay) */
  --select: #F0485A;     /* khung chọn kiểu Figma */

  --font-display: 'Archivo', 'Arial Black', sans-serif;  /* chữ đậm siêu rộng */
  --font-body: 'Be Vietnam Pro', system-ui, sans-serif;   /* đoạn văn */
  --font-hand: 'Patrick Hand', 'Comic Sans MS', cursive;  /* chữ viết tay */

  /* Vân giấy nhàu (SVG noise + ánh sáng) */
  --crumple: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900'><filter id='f' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.005' numOctaves='6' seed='11' stitchTiles='stitch'/><feDiffuseLighting lighting-color='white' surfaceScale='6' diffuseConstant='1.25'><feDistantLight azimuth='230' elevation='55'/></feDiffuseLighting></filter><rect width='900' height='900' filter='url(%23f)'/></svg>");
}

/* =========================================================
   BASE
   ========================================================= */
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--red); color: #fff; }

.display {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1;
}
.hand { font-family: var(--font-hand); }
.outline-num { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.marker { background: linear-gradient(transparent 58%, rgba(255, 46, 46, .28) 58%); padding: 0 2px; }

/* =========================================================
   GIẤY: kẻ ô + vân nhàu + mép rách
   ========================================================= */
.sheet { position: relative; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); }
.sheet-rim {
  position: absolute; left: 0; right: 0;
  background: var(--rim);
}
.paper {
  position: relative;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-position: -1px -1px;
}
.paper::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--crumple);
  background-size: 900px 900px;
  mix-blend-mode: multiply;
  opacity: .9;
  pointer-events: none;
}
.paper > * { position: relative; z-index: 1; }

/* =========================================================
   NAV
   ========================================================= */
.nav {
  background: rgba(243, 242, 238, .82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1.5px solid transparent;
  transition: border-color .3s;
}
.nav.scrolled { border-bottom-color: var(--ink); }
.nav-link { position: relative; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(1); }
.logo-box {
  width: 34px; height: 34px; border-radius: 9px; background: var(--ink); color: #fff;
  display: grid; place-items: center; font-size: 12px;
}
.btn-ink {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ink); color: #fff; border-radius: 999px;
  padding: 9px 16px; font-size: 13px; font-weight: 700;
  transition: transform .2s, background .2s;
}
.btn-ink:hover { transform: translateY(-2px); background: var(--red); }

/* =========================================================
   HERO — PORTF(O)LIO
   ========================================================= */
.hero-title { font-size: clamp(2.4rem, 12vw, 10.6rem); letter-spacing: -.035em; line-height: .9; white-space: nowrap; }
.hero-o {
  position: relative; display: inline-block;
  width: .86em; height: .86em; margin: 0 .01em;
  vertical-align: -.1em;
}
.hero-face {
  position: absolute; inset: 0; border-radius: 50%;
  border: .055em solid var(--ink); background: #fff;
  overflow: hidden; transform: rotate(-6deg);
  box-shadow: .04em .05em 0 var(--ink);
}
.hero-face img {
  position: absolute; left: 50%; top: -6%;
  width: 230%; max-width: none; transform: translateX(-50%);
  filter: grayscale(1) contrast(1.45) brightness(1.05);
}
.hero-note {
  position: absolute; top: 102%; left: 34%;
  display: flex; align-items: flex-start; gap: 6px;
  font-size: clamp(.95rem, 2.1vw, 1.55rem); letter-spacing: 0; text-transform: none;
  color: var(--ink); white-space: nowrap; pointer-events: none;
}
.hero-note svg { width: clamp(22px, 3.4vw, 40px); height: auto; flex-shrink: 0; }
.hero-note span { transform: rotate(-5deg); margin-top: .9em; }

/* Chữ PORTFOLIO bật lên lần lượt, chữ O (ảnh) nảy vào sau cùng */
.hero-letter { display: inline-block; animation: letterUp .9s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i) * 70ms + .1s); }
.hero-o { animation: popIn 1s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i) * 70ms + .25s); }
.hero-face { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.hero-o:hover .hero-face { transform: rotate(8deg) scale(1.07); }
@keyframes letterUp { from { opacity: 0; transform: translateY(.4em) rotate(5deg); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: scale(.2) rotate(-40deg); } to { opacity: 1; transform: none; } }

/* Nét gạch chân đỏ tự vẽ dưới dòng chữ nhỏ */
.label-squiggle { position: absolute; left: 0; bottom: -.55em; width: 100%; height: .5em; overflow: visible; }
.label-squiggle path { stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.2s ease-out 1s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Hàng chi tiết dưới tiêu đề */
.hero-row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  margin-top: clamp(64px, 9vw, 110px);
}
.hero-row > :first-child { justify-self: start; }
.hero-row > :last-child { justify-self: end; }

.sticky-note {
  --r: -5deg;
  position: relative; width: 230px; padding: 26px 20px 20px;
  background: #FFE98A; color: #2A2A2A;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 14px 26px rgba(0, 0, 0, .14);
  transform: rotate(var(--r));
  animation: float 6s ease-in-out infinite;
}
.sticky-note::after { /* góc giấy hơi cong */
  content: ''; position: absolute; right: 0; bottom: 0; width: 28px; height: 28px;
  background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, .08) 50%, #F2DA6E 60%);
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(var(--r)); }
  50% { transform: translateY(-9px) rotate(calc(var(--r) + 1.5deg)); }
}

.spin-badge { position: relative; width: 140px; height: 140px; display: grid; place-items: center; color: var(--ink); }
.spin-text { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.spin-text { overflow: visible; }
.spin-text text { font-family: var(--font-display); font-stretch: 100%; font-weight: 800; font-size: 8.4px; text-transform: uppercase; fill: currentColor; }
.spin-core {
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: #fff; box-shadow: 4px 4px 0 var(--red);
  transition: background .25s, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.spin-badge:hover .spin-core { background: var(--red); transform: rotate(-45deg) scale(1.08); }
.spin-badge:hover .spin-text { animation-duration: 5s; }
@keyframes spin { to { transform: rotate(360deg); } }

.orn-spin { animation: spin 12s linear infinite; }
.orn-twinkle, .twinkle svg { animation: twinkle 2.4s ease-in-out infinite; }
.orn-bob { animation: bob 3s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.55) rotate(45deg); opacity: .55; } }
@keyframes bob { 50% { transform: translateY(-6px); } }
.twinkle { position: absolute; color: var(--red); pointer-events: none; }
.twinkle-2 svg { animation-delay: 1.2s; color: var(--ink); }

.scroll-hint { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 18px; color: var(--muted); transition: color .2s; }
.scroll-hint:hover { color: var(--red); }
.scroll-hint svg { width: 16px; height: 26px; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(6px); } }

/* Con trỏ cộng tác kiểu Figma */
.mp-cursor { position: absolute; z-index: 5; display: flex; align-items: flex-start; pointer-events: none; animation: 16s ease-in-out infinite; }
.mp-cursor svg { width: 18px; height: 20px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.mp-cursor svg path { fill: var(--c); }
.mp-name {
  margin: 14px 0 0 -2px; padding: 3px 8px; border-radius: 4px 10px 10px 10px;
  background: var(--c); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
}
.mp-cursor-1 { animation-name: cursorA; }
.mp-cursor-2 { animation-name: cursorB; animation-duration: 19s; }
@keyframes cursorA {
  0%, 100% { left: 9%; top: 34%; }
  18% { left: 30%; top: 22%; }
  36%, 46% { left: 57%; top: 40%; }
  64% { left: 80%; top: 26%; }
  82% { left: 44%; top: 58%; }
}
@keyframes cursorB {
  0%, 100% { left: 86%; top: 66%; }
  25% { left: 64%; top: 84%; }
  50%, 58% { left: 33%; top: 72%; }
  78% { left: 18%; top: 88%; }
}

@media (max-width: 767px) {
  .hero-row { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .hero-row > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .hero-row > :first-child { justify-self: center; }
  .sticky-note { width: 100%; max-width: 200px; padding: 22px 14px 14px; }
  .sticky-note .text-\[19px\] { font-size: 16px; }
  .sticky-note ul { font-size: 14px; }
  .spin-badge { width: 118px; height: 118px; justify-self: center; }
  .spin-core { width: 50px; height: 50px; }
  .mp-cursor-2 { display: none; }
  .mp-name { font-size: 10px; padding: 2px 6px; }
}

/* =========================================================
   XIN CHÀO — khung chọn kiểu Figma
   ========================================================= */
.sel { position: relative; }
.sel-frame { position: relative; border: 1.5px solid var(--select); aspect-ratio: 2 / 3; }
.sel-frame img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; display: block; }
.sel-name { position: absolute; top: -22px; left: -1px; font-size: 11px; font-weight: 600; color: var(--select); }
.sel-size {
  position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%);
  background: var(--select); color: #fff; font-size: 10.5px; font-weight: 700;
  padding: 2px 6px; border-radius: 4px; white-space: nowrap;
}
.sel-h {
  position: absolute; width: 9px; height: 9px; background: #fff; border: 1.5px solid var(--select);
  transform: translate(-50%, -50%);
}

/* Ảnh xoay 360° — 2 lớp cùng dải ảnh, lớp trên hoà dần sang góc kế tiếp */
.turntable { cursor: grab; touch-action: pan-y; outline: none; user-select: none; -webkit-user-select: none; perspective: 700px; }
.turntable:focus-visible { box-shadow: 0 0 0 3px rgba(240, 72, 90, .25); }
.tt-layer {
  position: absolute; inset: 0; pointer-events: none;
  background-repeat: no-repeat;
  background-size: calc(var(--frames) * 100%) auto;
  background-position: 0% 100%;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.tt-next { opacity: 0; }
.sel-hint {
  position: absolute; top: -22px; right: -1px;
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--select); white-space: nowrap;
}
.sel-hint .hint-touch { display: none; }
@media (hover: none) {
  .sel-hint .hint-mouse { display: none; }
  .sel-hint .hint-touch { display: inline; }
}

.tile {
  width: 52px; height: 52px; border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-stretch: 100%; font-weight: 700; font-size: 20px; letter-spacing: -.02em;
  transition: transform .2s;
}
.tile:hover { transform: translateY(-3px) rotate(-3deg); }
.chip {
  display: inline-block; border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 5px 12px; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, .55);
}
.chip-sm { padding: 3px 9px; font-size: 11px; border-width: 1px; }

/* =========================================================
   DẢI ĐEN — chữ chạy + chân dung viền đỏ
   ========================================================= */
.band { position: relative; background: var(--night); height: clamp(300px, 34vw, 430px); margin: -56px 0; }
.band-marquee { position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden; }
.marquee-rot { transform: rotate(-4deg); width: 100%; }
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee-item {
  display: flex; align-items: center; gap: .35em; padding-right: .35em;
  font-size: clamp(3rem, 10vw, 8.6rem); color: #F3F2EE; white-space: nowrap;
}
.marquee-item.outline { color: transparent; -webkit-text-stroke: 2px #F3F2EE; }
.marquee-star { width: .42em; height: .42em; color: var(--red); }
@keyframes marquee { to { transform: translateX(-50%); } }

.band-portrait {
  position: absolute; left: 50%; bottom: -50px; z-index: 2;
  height: calc(100% + 96px); transform: translateX(-50%);
  pointer-events: none;
}
.band-portrait img {
  height: 100%; width: auto; max-width: none; display: block;
  filter:
    drop-shadow(7px 0 0 var(--red)) drop-shadow(-7px 0 0 var(--red))
    drop-shadow(0 7px 0 var(--red)) drop-shadow(0 -7px 0 var(--red))
    drop-shadow(0 18px 28px rgba(0, 0, 0, .55));
}

/* =========================================================
   DỰ ÁN — ảnh polaroid
   ========================================================= */
.polaroid {
  position: relative; display: block;
  background: #fff; padding: 12px 12px 58px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 14px 30px rgba(0, 0, 0, .2);
  transform: rotate(var(--rot, -2deg));
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s;
}
.polaroid:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 2px 4px rgba(0, 0, 0, .18), 0 24px 44px rgba(0, 0, 0, .24); }
.polaroid-caption {
  position: absolute; left: 0; right: 0; bottom: 14px; text-align: center;
  font-family: var(--font-hand); font-size: 22px; color: var(--ink-2);
}
.tape {
  position: absolute; top: -15px; left: 50%; width: 118px; height: 32px; z-index: 3;
  transform: translateX(-50%) rotate(var(--tape-rot, 3deg));
  background: rgba(232, 222, 192, .82);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 88% 0, 92% 10%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 92% 90%, 88% 100%, 12% 100%, 8% 90%, 4% 100%, 0 92%);
}
.mock { min-height: 270px; }
.sticker {
  position: absolute; bottom: 14px; right: -22px; z-index: 4;
  width: 70px; height: 70px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--red); color: #fff; font-size: 15px;
  outline: 2px dashed rgba(255, 255, 255, .7); outline-offset: -7px;
  transform: rotate(14deg);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
}
@media (max-width: 640px) {
  .sticker { right: -8px; width: 60px; height: 60px; font-size: 13px; }
}

/* ---------- Mockup phong cách iOS (2 iPhone) ---------- */
.ios-wrap { position: relative; width: 100%; aspect-ratio: 480 / 362; overflow: hidden; }
.ios-stage {
  position: absolute; left: 0; top: 0; width: 480px; height: 362px;
  transform-origin: 0 0; transform: scale(var(--s, 1));
  font-family: -apple-system, 'SF Pro Text', var(--font-body);
  color: #000; letter-spacing: -.01em;
  background:
    radial-gradient(circle at 16% 18%, rgba(0, 122, 255, .3), transparent 42%),
    radial-gradient(circle at 88% 84%, rgba(175, 82, 222, .28), transparent 45%),
    radial-gradient(circle at 74% 8%, rgba(255, 149, 0, .2), transparent 38%),
    #EEF1F8;
}
.iphone {
  position: absolute; width: 168px; height: 340px; padding: 5px;
  border-radius: 30px; background: #1C1C1E;
  box-shadow: inset 0 0 0 1.5px #3A3A3C, 0 18px 40px rgba(20, 30, 60, .3);
}
.iphone-screen {
  position: relative; width: 100%; height: 100%;
  display: flex; flex-direction: column;
  border-radius: 25px; overflow: hidden; background: #F2F2F7;
}
.island { position: absolute; top: 6px; left: 50%; width: 44px; height: 13px; transform: translateX(-50%); background: #000; border-radius: 10px; }
.home-ind { position: absolute; bottom: 4px; left: 50%; width: 48px; height: 3px; transform: translateX(-50%); background: #000; border-radius: 3px; }
.ios-status { height: 24px; padding: 7px 13px 0 17px; display: flex; justify-content: space-between; align-items: center; font-size: 8.5px; font-weight: 600; }
.ios-body { flex: 1; padding: 6px 9px 0; overflow: hidden; }
.ios-large { font-size: 17px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.ios-caption { font-size: 6.5px; font-weight: 600; color: #8E8E93; }
.ios-card { background: #fff; border-radius: 11px; }
.ios-tabbar {
  height: 38px; padding: 5px 4px 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(249, 249, 249, .94); border-top: .5px solid rgba(60, 60, 67, .2);
}
.ios-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 5.5px; font-weight: 500; color: #8E8E93; }
.ios-tab.on { color: var(--tint, #007AFF); }

/* ---------- Cửa sổ desktop kiểu macOS ---------- */
.mac {
  position: absolute; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 10px; background: #fff; color: #1D1D1F;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .2), 0 22px 46px rgba(20, 30, 60, .28);
}
.mac.dark { background: #0D0820; color: #fff; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .15), 0 22px 46px rgba(30, 10, 70, .4); }
.mac-bar {
  position: relative; flex: none; height: 22px; padding: 0 9px;
  display: flex; align-items: center;
  background: linear-gradient(#F7F7F9, #ECECEF); border-bottom: .5px solid rgba(0, 0, 0, .12);
}
.mac.dark .mac-bar { background: #1C1C1E; border-bottom-color: rgba(255, 255, 255, .08); }
.mac-dots { display: flex; gap: 4px; }
.mac-dots i { display: block; width: 7px; height: 7px; border-radius: 50%; }
.mac-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 7px; font-weight: 600; color: #6E6E73; white-space: nowrap; }
.mac-url {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; gap: 3px;
  width: 58%; height: 13px; border-radius: 4px;
  background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .6); font-size: 6.5px;
}
.mac-body { flex: 1; min-height: 0; display: flex; }
.mac-side {
  flex: none; width: 82px; padding: 8px 5px;
  display: flex; flex-direction: column; gap: 1px;
  background: #F5F5F7; border-right: .5px solid rgba(0, 0, 0, .08);
}
.mac-nav { display: flex; align-items: center; gap: 4px; padding: 3.5px 5px; border-radius: 5px; font-size: 6.5px; font-weight: 500; color: #3C3C43; }
.mac-main { flex: 1; min-width: 0; padding: 9px 10px; overflow: hidden; }
.mac-card { background: #fff; border-radius: 7px; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1); }
.mac-h { font-size: 12px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.mac-cap { font-size: 6px; font-weight: 600; color: #8E8E93; }

/* Kiểu tím glassmorphism dùng chung cho landing page */
.grad-violet { background: linear-gradient(90deg, #A78BFA, #C4B5FD, #7C3AED); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.btn-violet { background: linear-gradient(90deg, #7C3AED, #A78BFA); box-shadow: 0 4px 12px rgba(124, 58, 237, .5); color: #fff; }
.glass-violet { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); }

/* Màn hình tối (landing page trên Safari) */
.iphone-screen.dark { background: linear-gradient(160deg, #0D0820 0%, #150D30 55%, #0A1628 100%); color: #fff; }
.safari-bar {
  height: 52px; padding-top: 6px;
  background: rgba(28, 28, 30, .86); border-top: .5px solid rgba(255, 255, 255, .1);
}

/* =========================================================
   QUY TRÌNH
   ========================================================= */
.step-dot {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 17px;
  box-shadow: 3px 3px 0 var(--red);
}
.step-line { border-top: 2px dashed var(--ink); opacity: .35; }

/* =========================================================
   LIÊN HỆ
   ========================================================= */
.band-contact { position: relative; background: var(--night); color: #fff; margin-top: -56px; padding-top: 150px; }
.contact-row + .contact-row { border-top: 1px solid rgba(255, 255, 255, .1); }
.pill-light {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid rgba(255, 255, 255, .7); color: #fff; border-radius: 999px;
  padding: 9px 18px; font-size: 13px; font-weight: 700;
  transition: background .2s, color .2s, border-color .2s;
}
.pill-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.pill-light.primary { background: #fff; color: var(--ink); border-color: #fff; }
.pill-light.primary:hover { background: var(--red); color: #fff; border-color: var(--red); }
.scribble { position: absolute; left: -2%; bottom: -10px; width: 104%; height: 14px; color: var(--red); }

/* =========================================================
   HIỆU ỨNG — hiện dần khi cuộn tới
   Thêm class "reveal" + data-d="0.2" (giây trễ) vào phần tử bất kỳ.
   ========================================================= */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--d, 0) * 1s); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track, .hero-letter, .hero-o, .sticky-note, .spin-text, .orn-spin, .orn-twinkle, .orn-bob,
  .twinkle svg, .scroll-hint svg, .mp-cursor { animation: none; }
  .label-squiggle path { animation: none; stroke-dashoffset: 0; }
  .mp-cursor { display: none; }
}

/* VPPOS landing mockup (project 5) — Devin palette */
.grad-vppos { background: linear-gradient(90deg, #4991E5, #39BDD6, #3BD4CB); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.btn-vppos { background: #2622F7; box-shadow: 0 4px 12px rgba(38, 34, 247, .5); color: #F6F6F6; }