:root {
    --accent: #c0fe04;
    --ease: cubic-bezier(.65,0,.35,1);
    --ease-cinematic: cubic-bezier(.22,1,.36,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);
  }
  @media (prefers-color-scheme: light) {
    :root {
      --bg: #cfe3f5; --bg-elevated: #e4eefa; --text: #10151c;
      --text-2: rgba(16,21,28,.62); --text-3: rgba(16,21,28,.36); --line: rgba(16,21,28,.14);
      --bg-warm-1: #fbfaf5; --bg-warm-2: #f8f7f2; --bg-warm-3: #f7f6f1; --bg-warm-4: #faf9f4;
      --bg-warm-elevated: #f1efe6;
      --shadow-soft: 0 10px 26px rgba(16,21,28,.10);
      --shadow-elevated: 0 26px 54px rgba(16,21,28,.18), 0 6px 18px rgba(16,21,28,.10);
    }
  }
  @media (prefers-color-scheme: dark), (prefers-color-scheme: no-preference) {
    :root {
      --bg: #0f1111; --bg-elevated: #191b1b; --text: #f4f4ef;
      --text-2: rgba(244,244,239,.62); --text-3: rgba(244,244,239,.36); --line: rgba(244,244,239,.1);
      --bg-warm-1: var(--bg); --bg-warm-2: var(--bg); --bg-warm-3: var(--bg); --bg-warm-4: var(--bg);
      --bg-warm-elevated: var(--bg-elevated);
      --shadow-soft: 0 10px 26px rgba(0,0,0,.35);
      --shadow-elevated: 0 26px 54px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.32);
    }
  }
  :root[data-theme="dark"] {
    --bg: #0f1111; --bg-elevated: #191b1b; --text: #f4f4ef;
    --text-2: rgba(244,244,239,.62); --text-3: rgba(244,244,239,.36); --line: rgba(244,244,239,.1);
    --bg-warm-1: var(--bg); --bg-warm-2: var(--bg); --bg-warm-3: var(--bg); --bg-warm-4: var(--bg);
    --bg-warm-elevated: var(--bg-elevated);
    --shadow-soft: 0 10px 26px rgba(0,0,0,.35);
    --shadow-elevated: 0 26px 54px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.32);
  }
  :root[data-theme="light"] {
    --bg: #cfe3f5; --bg-elevated: #e4eefa; --text: #10151c;
    --text-2: rgba(16,21,28,.62); --text-3: rgba(16,21,28,.36); --line: rgba(16,21,28,.14);
    --bg-warm-1: #fbfaf5; --bg-warm-2: #f8f7f2; --bg-warm-3: #f7f6f1; --bg-warm-4: #faf9f4;
    --bg-warm-elevated: #f1efe6;
    --shadow-soft: 0 10px 26px rgba(16,21,28,.10);
    --shadow-elevated: 0 26px 54px rgba(16,21,28,.18), 0 6px 18px rgba(16,21,28,.10);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", monospace;
    -webkit-font-smoothing: antialiased;
    transition: background-color .3s var(--ease), color .3s var(--ease);
    overflow-x: clip;
  }
  ::selection { background: var(--accent); color: #0f1111; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
  ul { list-style: none; }
  img, svg { display: block; max-width: 100%; }

  .mono { font-family: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", monospace; }
  .uc { text-transform: uppercase; letter-spacing: .04em; }

  h1, h2, h3, .hero-top .label, .hero-headline, .contact-line, #statement .word {
    font-family: "TikTok Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  }

  .brand, nav.links, #theme-toggle, .mobile-nav, #clock {
    font-family: "VT323", "JetBrains Mono", ui-monospace, monospace;
  }

  /* ---------- thanh cố định ---------- */
  header.chrome {
    position: fixed; inset: 0 0 auto 0; z-index: 50;
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.1rem 1.25rem;
    font-size: .8rem;
    pointer-events: none;
  }
  header.chrome .side { display: flex; align-items: center; gap: .5rem; pointer-events: auto; }
  .brand {
    font-weight: 400; letter-spacing: -.01em; text-transform: uppercase;
    padding: .5rem; font-size: 1.4rem;
    opacity: 0; transform: translateY(28px);
    transition: opacity 1.1s var(--ease-cinematic), transform 1.1s var(--ease-cinematic);
  }
  .brand.in { opacity: 1; transform: translateY(0); }
  .chip {
    position: relative; padding: .5rem .65rem; cursor: pointer;
    text-transform: uppercase; letter-spacing: .03em; font-size: 1.25rem;
  }
  .chip::before {
    content: ""; position: absolute; inset: 0;
    border: 1px dotted transparent; transition: border-color .2s var(--ease);
    pointer-events: none;
  }
  .chip:hover::before { border-color: var(--text-3); }
  nav.links { display: none; align-items: center; gap: .25rem; }
  @media (min-width: 900px) { nav.links { display: flex; } }

  .menu-btn { display: flex; pointer-events: auto; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; }
  @media (min-width: 900px) { .menu-btn { display: none; } }
  .menu-btn .bar { position: relative; width: 1.25rem; height: .75rem; }
  .menu-btn .bar span {
    position: absolute; left: 0; width: 100%; height: 1px; background: var(--text);
    transition: transform .3s var(--ease), opacity .3s var(--ease);
  }
  .menu-btn .bar span:nth-child(1) { top: 0; }
  .menu-btn .bar span:nth-child(2) { bottom: 0; }
  .menu-btn.open .bar span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .menu-btn.open .bar span:nth-child(2) { transform: translateY(-5.5px) rotate(-45deg); }

  .mobile-nav {
    position: fixed; inset: 0; z-index: 45; background: var(--bg);
    display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: 2rem;
    transform: translateY(-100%); transition: transform .5s var(--ease);
  }
  .mobile-nav.open { transform: translateY(0); }
  .mobile-nav a { font-size: 2rem; font-weight: 800; text-transform: uppercase; }

  footer.chrome {
    position: fixed; inset: auto 0 0 0; z-index: 50;
    display: flex; justify-content: space-between; align-items: flex-end;
    padding: 1.1rem 1.25rem;
    font-size: .78rem; color: var(--text-2);
    pointer-events: none;
  }
  footer.chrome > * { pointer-events: auto; }
  #clock { white-space: nowrap; font-size: 1rem; }
  .coords { display: none; }
  @media (min-width: 900px) { .coords { display: block; } }

  .to-top {
    position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 51;
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
    background: var(--bg); opacity: 0; pointer-events: none;
    transition: opacity .3s var(--ease), transform .2s var(--ease);
  }
  .to-top.show { opacity: 1; pointer-events: auto; }
  .to-top:hover { transform: translateY(-2px); }
  .to-top svg { width: 1rem; height: 1rem; }

  /* ---------- vệt sáng theo con trỏ (ruy băng gradient mềm) ---------- */
  #cursor-trail {
    position: fixed; inset: 0; z-index: 60;
    pointer-events: none;
    filter: blur(15px);
    mix-blend-mode: screen;
  }
  @media (prefers-color-scheme: light) { #cursor-trail { mix-blend-mode: multiply; } }
  :root[data-theme="light"] #cursor-trail { mix-blend-mode: multiply; }
  :root[data-theme="dark"] #cursor-trail { mix-blend-mode: screen; }
  @media (prefers-reduced-motion: reduce), (pointer: coarse) {
    #cursor-trail { display: none; }
  }

  /* ---------- lưới overlay ---------- */
  .grid-overlay {
    position: fixed; inset: 0; z-index: 40; pointer-events: none;
    mix-blend-mode: difference;
    opacity: .65;
  }

  /* ---------- helper bố cục ---------- */
  .wrap { padding: 0 1.25rem; }
  @media (min-width: 1024px) { .wrap { padding: 0 3.5rem; } }
  section { width: 100%; }

  /* ---------- hero ---------- */
  #hero {
    position: relative; z-index: 0; overflow: hidden;
    min-height: 100dvh;
    display: grid; grid-template-rows: auto 1fr;
    padding: 6.5rem 1.25rem 3rem;
    gap: 3rem;
    background: linear-gradient(to bottom, var(--bg) 75%, var(--bg-warm-1) 100%);
  }
  @media (min-width: 1024px) { #hero { padding: 7rem 3.5rem 4rem; } }
  .hero-3d {
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none; opacity: .9;
    animation: hero-float 8s ease-in-out infinite;
  }
  @keyframes hero-float {
    0%, 100% { transform: translateY(-6px); }
    50% { transform: translateY(6px); }
  }
  .hero-clouds {
    display: none; position: absolute; inset: -25% -15%; z-index: 0; pointer-events: none;
    overflow: hidden;
  }
  :root[data-theme="light"] .hero-clouds { display: block; }
  .hero-clouds .ray {
    position: absolute; top: -20%; height: 150%; width: 12%;
    background: linear-gradient(90deg,
      transparent 0%, rgba(255,253,236,.85) 42%, rgba(255,253,236,.85) 58%, transparent 100%);
    filter: blur(9px);
    transform-origin: center;
    transform: rotate(-24deg);
    will-change: transform;
  }
  .ray.r1 { right: 4%;  width: 13%; opacity: .95; }
  .ray.r2 { right: 17%; width: 9%;  opacity: .7;  }
  .ray.r3 { right: 28%; width: 15%; opacity: .85; }
  .ray.r4 { right: 44%; width: 7%;  opacity: .5;  }
  .ray.r5 { right: 54%; width: 10%; opacity: .35; }
  .hero-top {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem;
    font-size: 1rem;
  }
  .hero-top .label { display: none; position: relative; font-weight: 600; font-size: 1.6rem; line-height: 1.15; grid-column: span 3; }

  .doodle {
    display: none; position: absolute; top: -1.6rem; left: 6.2rem;
    width: 5.5rem; height: 3.5rem; pointer-events: none; overflow: visible;
  }
  @media (min-width: 1024px) { .doodle { display: block; } }
  .doodle path {
    fill: none; stroke: var(--accent); stroke-width: 3;
    stroke-linecap: round; stroke-linejoin: round;
    transition: stroke-dashoffset 1s var(--ease);
  }
  .hero-top .tagline { display: none; grid-column: 4 / span 3; color: var(--text-2); align-self: start; }
  .hero-top .intro { grid-column: span 12; align-self: flex-end; color: var(--text-2); }
  .intro-strong { font-weight: 700; color: var(--text); }
  @media (min-width: 1024px) {
    .hero-top .label, .hero-top .tagline { display: block; }
    .hero-top .intro { grid-column: 7 / span 6; align-self: start; }
  }
  .hero-headline {
    position: relative; z-index: 1; align-self: end;
    font-weight: 800; text-transform: uppercase; letter-spacing: -.015em;
    font-size: clamp(2.2rem, 7.2vw, 5rem); line-height: 1.02;
  }
  .hero-headline span { display: block; opacity: 0; transform: translateY(32px); transition: opacity 1s var(--ease-cinematic), transform 1s var(--ease-cinematic); }
  .hero-headline span:nth-child(1) { transition-delay: .1s; }
  .hero-headline span:nth-child(2) { transition-delay: .2s; }
  .hero-headline span:nth-child(3) { transition-delay: .3s; }
  .hero-headline.in span { opacity: 1; transform: translateY(0); }
  .hero-headline, .hero-top { transition: opacity .3s linear, transform .3s var(--ease-cinematic); }

  .hero-stickers { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
  .hero-stickers .sticker {
    position: absolute; top: -20%; left: var(--x);
    width: clamp(56px, 8vw, var(--size));
    height: auto;
    opacity: .92;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,.18));
    animation: sticker-fall var(--duration) linear infinite;
    animation-delay: var(--delay);
    will-change: transform;
  }
  @keyframes sticker-fall {
    0%   { transform: translate(0, 0) rotate(0deg); }
    50%  { transform: translate(var(--drift), 60vh) rotate(var(--rot)); }
    100% { transform: translate(0, 130vh) rotate(calc(var(--rot) * -1)); }
  }

  /* ---------- giới thiệu ---------- */
  #about { position: relative; padding: 5rem 1.25rem; background: var(--bg-warm-1); overflow: hidden; }
  @media (min-width: 1024px) { #about { padding: 6.5rem 3.5rem; } }
  #about::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bg-warm-1);
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-warm-1) 10%, transparent) 0%, var(--bg-warm-1) 100%);
    filter: blur(4px);
    pointer-events: none;
    z-index: 0;
  }
  .about-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
  @media (min-width: 1024px) {
    .about-layout { grid-template-columns: 28% 1fr; gap: 4.5rem; align-items: start; }
  }
  /* wrap không cắt tràn (overflow visible) để chữ ký có thể tràn nhẹ ra ngoài mép ảnh;
     .about-visual-slide lấp đầy wrap bằng inset:0 và là lớp chịu trách nhiệm trượt
     cả khung ảnh vào; .about-visual mới là khung cắt ảnh thật sự (border + crop) */
  .about-visual-wrap { position: relative; width: 100%; aspect-ratio: 3 / 4; }
  .about-visual-slide { position: absolute; inset: 0; }
  .about-visual {
    width: 100%; height: 100%;
    overflow: hidden; border: 1px solid var(--line); background: var(--bg-warm-elevated);
  }
  /* cả khung ảnh là MỘT layer duy nhất bay vào: mờ dần + trượt từ góc trái website,
     một nhịp, một easing ease-out — gọn, dứt khoát, không chia trục/lệch nhịp nữa */
  .about-visual-slide {
    opacity: 0;
    translate: -55vw 0;
    will-change: opacity, translate;
    transition: opacity .9s cubic-bezier(.16,.84,.24,1), translate .9s cubic-bezier(.16,.84,.24,1);
  }
  .about-visual-slide.in { opacity: 1; translate: 0 0; }
  /* ảnh chân dung — lớp lồng nhau: parallax cuộn+chuột (JS) > trôi nhẹ liên tục (CSS) > ảnh thật */
  .apv-parallax, .apv-float { display: block; width: 100%; height: 100%; }
  .apv-parallax { will-change: transform; }
  .apv-float { animation: img-float 8s ease-in-out infinite; }
  .about-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
  @keyframes img-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }

  /* chữ ký nổi ở góc dưới-phải ảnh, tràn nhẹ ra ngoài mép — 4 lớp lồng nhau, mỗi lớp
     phụ trách một chuyển động riêng để không xung đột: nghiêng cố định > parallax
     cuộn > hiện/ẩn > trôi nhẹ. Màu đỏ mực ký tên, đặt qua currentColor để dễ chỉnh. */
  .about-signature {
    position: absolute; z-index: 2;
    left: -4%; top: -10%;
    width: 96%; min-width: 260px; max-width: 460px;
    color: #C7F44F;
    transform: rotate(-4deg);
    transform-origin: left top;
    pointer-events: none;
    filter: drop-shadow(0 3px 14px rgba(0,0,0,.18));
  }
  :root[data-theme="light"] .about-signature { color: #E63946; }
  .sig-parallax { display: block; will-change: transform; }
  /* hiệu ứng "vừa ký lên": clip-path quét trái→phải mô phỏng nét bút chạy theo
     chữ ký (chữ ký được vẽ từ trái sang phải), kéo dài để thấy rõ nét ký,
     kết hợp opacity cho mượt */
  .sig-reveal {
    display: block;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateY(10px);
    transform-origin: left top;
    transition: opacity 1s linear, clip-path 2.6s var(--ease-cinematic), transform 2.6s var(--ease-cinematic);
  }
  .sig-reveal.in { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
  .sig-reveal.exiting { opacity: 0; clip-path: inset(0 0 0 0); transform: translateY(-20px); }
  .sig-float { display: block; animation: sig-float 5.5s ease-in-out infinite; }
  .about-signature svg { display: block; width: 100%; height: auto; }
  .about-signature svg path { stroke: currentColor; stroke-width: 3; stroke-linejoin: round; }
  @keyframes sig-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1.6px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .sig-float { animation: none; }
    .sig-reveal { transition: opacity .3s linear; }
  }
  .about-content p {
    font-size: 1.2rem; line-height: 1.5;
  }
  @media (min-width: 1024px) { .about-content p { font-size: 1.6rem; } }
  .about-content p + p { margin-top: 1.5rem; }
  .about-content p.reveal:nth-child(2) { transition-delay: .15s; }
  .pulse { display: inline-block; animation: pulse-fade 3.2s ease-in-out infinite; }
  @keyframes pulse-fade { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

  /* ---------- tiêu đề section ---------- */
  .section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 0 1.25rem; margin-bottom: 2.5rem;
  }
  @media (min-width: 1024px) { .section-head { padding: 0 3.5rem; } }
  .section-head h2 { font-size: 1.4rem; text-transform: uppercase; font-weight: 800; letter-spacing: -.01em; }
  .section-head .count { color: var(--text-3); font-size: .8rem; }

  /* ---------- dự án ---------- */
  #work { padding: 5rem 0; background: var(--bg-warm-1); }
  .work-grid {
    display: grid; grid-template-columns: repeat(12, 1fr); gap: 2.5rem 1.5rem;
    padding: 0 1.25rem;
  }
  @media (min-width: 1024px) { .work-grid { padding: 0 3.5rem; } }
  .work-item { grid-column: span 12; }
  @media (min-width: 1024px) {
    .work-item:nth-child(1) { grid-column: 3 / span 8; }
    .work-item:nth-child(2) { grid-column: 1 / span 6; }
    .work-item:nth-child(3) { grid-column: 7 / span 6; }
    .work-item:nth-child(4) { grid-column: 1 / span 4; }
    .work-item:nth-child(5) { grid-column: 5 / span 4; }
    .work-item:nth-child(6) { grid-column: 9 / span 4; }
    /* các item cùng hàng, cùng lọt vào khung nhìn một lúc — lệch nhịp 100ms/item
       để chúng xuất hiện lần lượt thay vì bật lên đồng thời */
    .work-item:nth-child(3).reveal, .work-item:nth-child(5).reveal { transition-delay: .1s; }
    .work-item:nth-child(3) .wv-reveal, .work-item:nth-child(5) .wv-reveal { transition-delay: .1s; }
    .work-item:nth-child(6).reveal { transition-delay: .2s; }
    .work-item:nth-child(6) .wv-reveal { transition-delay: .2s; }
  }
  /* thẻ dự án — khung tĩnh chịu trách nhiệm hover, bên trong là các lớp lồng nhau:
     parallax độ sâu + zoom cuộn (JS) > hiện dần khi cuộn tới (CSS, ăn theo .in của
     .work-item) > trôi nhẹ liên tục, lệch nhịp giữa các thẻ (CSS) */
  .work-visual {
    position: relative; width: 100%; aspect-ratio: 16/10;
    border: 1px solid var(--line); overflow: hidden;
    background: var(--bg-warm-elevated);
    transition: transform .6s var(--ease-spring), box-shadow .6s var(--ease-spring), filter .5s var(--ease-cinematic);
  }
  .work-item:hover .work-visual {
    transform: scale(1.03) rotate(.4deg);
    box-shadow: var(--shadow-elevated);
    filter: brightness(1.06);
  }
  .wv-motion, .wv-reveal, .wv-float {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
  }
  .wv-motion { will-change: transform; }
  .wv-reveal {
    opacity: 0;
    clip-path: inset(14% 0 0 0);
    transform: scale(1.06);
    transition: opacity 1.1s var(--ease-cinematic), clip-path 1.2s var(--ease-cinematic), transform 1.2s var(--ease-cinematic);
  }
  .work-item.in .wv-reveal { opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1); }
  .wv-float { animation: img-float 7s ease-in-out infinite; }
  .work-item:nth-child(2) .wv-float { animation-delay: -2.3s; }
  .work-item:nth-child(3) .wv-float { animation-delay: -4.6s; }
  .work-item:nth-child(4) .wv-float { animation-delay: -1.2s; }
  .work-item:nth-child(5) .wv-float { animation-delay: -3.5s; }
  .work-item:nth-child(6) .wv-float { animation-delay: -5.8s; }
  .work-visual .mark {
    font-size: clamp(3rem, 8vw, 6rem); font-weight: 800; opacity: .12;
    text-transform: uppercase;
  }
  .work-visual .work-photo {
    width: 100%; height: 100%; object-fit: cover;
  }
  /* đặt trực tiếp trong .work-visual (không lồng trong .wv-motion/.wv-reveal/.wv-float)
     để không bị cuốn theo parallax độ sâu + zoom cuộn (JS) hay clip-path reveal — tag
     luôn đứng yên ở góc khung, không bao giờ bị cắt/mất khi cuộn */
  .work-visual .tag-float {
    position: absolute; top: .75rem; right: .75rem; z-index: 1;
    background: var(--accent); color: #0f1111;
    font-size: .68rem; padding: .2rem .5rem; text-transform: uppercase; font-weight: 700;
    opacity: 0;
    transition: opacity 1s var(--ease-cinematic);
  }
  .work-item.in .tag-float { opacity: 1; }
  .work-meta { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0 .5rem; }
  .work-meta h3 { font-size: 1.05rem; font-weight: 700; }
  .work-meta .yr { color: var(--text-3); font-size: .85rem; }

  /* ---------- tuyên ngôn (hiệu ứng dính khi cuộn) ---------- */
  #statement { height: 260vh; position: relative; background: var(--bg-warm-1); }
  #statement .pin {
    position: sticky; top: 0; height: 100dvh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .5rem;
  }
  #statement .word {
    font-weight: 800; text-transform: uppercase; letter-spacing: -.01em;
    font-size: clamp(2.4rem, 8vw, 5.5rem);
  }
  #statement .ch {
    display: inline-block; opacity: .08; transition: opacity .25s linear;
  }
  #statement .ch.active { opacity: 1; }

  /* ---------- kỹ năng & công cụ ---------- */
  #skills { padding: 5rem 1.25rem 6rem; background: var(--bg-warm-4); }
  @media (min-width: 1024px) { #skills { padding: 6.5rem 3.5rem 8rem; } }
  .skills-group + .skills-group { margin-top: 3rem; }
  .skills-group-title {
    font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-3); margin-bottom: 1.1rem;
  }
  .skills-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
  @media (min-width: 640px)  { .skills-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 1024px) { .skills-grid { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; } }
  .skill-card {
    border: 1px solid var(--line); background: var(--bg-warm-elevated);
    padding: .85rem;
    transition: transform .5s var(--ease-spring), box-shadow .5s var(--ease-spring);
  }
  .skill-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
  .skill-visual {
    aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    font-weight: 800; font-size: clamp(1.4rem, 3.2vw, 2.1rem); color: #0f1111;
  }
  .skill-visual svg { width: 40%; height: 40%; }
  .skill-visual img { width: 100%; height: 100%; object-fit: cover; }
  .skill-meta { padding: .9rem 0 0; }
  .skill-name { font-weight: 700; font-size: .95rem; }
  .skill-desc { color: var(--text-3); font-size: .76rem; margin-top: .3rem; line-height: 1.4; }
  /* các thẻ cùng hàng lọt vào khung nhìn một lúc — lệch nhịp để hiện lần lượt theo hàng 5 thẻ */
  .skill-card.reveal:nth-child(5n+2) { transition-delay: .06s; }
  .skill-card.reveal:nth-child(5n+3) { transition-delay: .12s; }
  .skill-card.reveal:nth-child(5n+4) { transition-delay: .18s; }
  .skill-card.reveal:nth-child(5n+5) { transition-delay: .24s; }

  /* ---------- liên hệ / footer ---------- */
  #contact {
    min-height: 100dvh; display: flex; flex-direction: column; justify-content: center;
    padding: 2rem 1.25rem 6rem; gap: 1.5rem;
    background: var(--bg-warm-1);
  }
  @media (min-width: 1024px) { #contact { padding: 2rem 3.5rem 6rem; } }
  .contact-line {
    font-weight: 800; text-transform: uppercase; letter-spacing: -.015em;
    font-size: clamp(2.5rem, 8.5vw, 5.5rem); line-height: 1.05;
  }
  .contact-highlight { display: inline-block; background: var(--accent); color: #0f1111; padding: 0 .15em; }
  /* 2 dòng tiêu đề xếp sát nhau, lọt vào khung nhìn gần như cùng lúc — lệch nhịp nhẹ */
  .contact-line.reveal:nth-of-type(2) { transition-delay: .09s; }
  .contact-details {
    margin-top: 2.5rem; display: flex; flex-direction: column; gap: .75rem;
  }
  @media (min-width: 900px) { .contact-details { flex-direction: row; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } }
  .contact-details a, .contact-details span {
    position: relative; padding: .5rem; text-transform: uppercase; font-size: .85rem;
  }
  .contact-details :nth-child(2).reveal { transition-delay: .08s; }
  .contact-details :nth-child(3).reveal { transition-delay: .16s; }
  .contact-details :nth-child(4).reveal { transition-delay: .24s; }
  .contact-details a::before {
    content: ""; position: absolute; inset: 0; border: 1px dotted transparent;
    transition: border-color .2s var(--ease);
  }
  .contact-details a:hover::before { border-color: var(--text-3); }

  .reveal {
    opacity: 0; transform: translateY(30px);
    transition: opacity 1s var(--ease-cinematic), transform 1s var(--ease-cinematic);
  }
  .reveal.in { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .reveal { transition: opacity .3s linear; transform: none; }
    .apv-float, .wv-float, .hero-3d { animation: none !important; }
    .hero-stickers { display: none; }
    .wv-reveal, .about-visual-slide {
      transition: opacity .3s linear !important; clip-path: none !important; transform: none !important;
      translate: none !important; rotate: none !important; scale: none !important;
    }
    .work-visual, .work-item:hover .work-visual { transition: none; transform: none; }
    .apv-parallax, .wv-motion, .sig-parallax { transform: none !important; }
  }

  /* ---------- dự án — có thể bấm để mở chi tiết ---------- */
  .work-item { cursor: pointer; }
  .work-item:focus-visible .work-visual { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* ---------- chi tiết dự án (case study overlay) ----------
     Bố cục nhân bản từ https://desdoigts.com/case-studies/roc-skincare/ :
     hero tràn viền với tiêu đề khổng lồ đè lên ảnh > khối Brief/Idea 2 cột >
     gallery ảnh xen kẽ full-width/2-ảnh > khối trích dẫn màu tràn viền >
     lưới "dự án khác" ở cuối. */
  .case-overlay {
    position: fixed; inset: 0; z-index: 55;
    background: var(--bg-warm-1);
    opacity: 0; visibility: hidden;
    transition: opacity .5s var(--ease-cinematic), visibility 0s linear .5s;
  }
  .case-overlay.open {
    opacity: 1; visibility: visible;
    transition: opacity .5s var(--ease-cinematic);
  }
  .case-scroll {
    height: 100%; overflow-y: auto;
    transform: translateY(28px);
    transition: transform .6s var(--ease-cinematic);
  }
  .case-overlay.open .case-scroll { transform: translateY(0); }

  .case-topbar {
    position: fixed; inset: 0 0 auto 0; z-index: 2;
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.1rem 1.25rem; font-size: .8rem; pointer-events: none;
  }
  @media (min-width: 1024px) { .case-topbar { padding: 1.1rem 3.5rem; } }
  .case-topbar > * { pointer-events: auto; }
  .case-index {
    color: var(--text-2); font-size: 1rem;
    background: var(--bg-warm-1); padding: .5rem .65rem; border: 1px dotted transparent;
  }
  /* Air Reviews: đồng hồ % cuộn trang — lấy cảm hứng từ ".c-scroll-progress" của
     v6.usestate.org. Ẩn theo mặc định, chỉ hiện khi overlay mang lớp .is-air. */
  .case-scroll-progress { display: none; }
  .case-overlay.is-air .case-scroll-progress {
    display: block; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-2); font-size: .85rem; letter-spacing: .03em;
    background: var(--bg-warm-1); padding: .5rem .65rem;
  }
  .case-close {
    padding: .5rem .65rem; text-transform: uppercase; letter-spacing: .03em; font-size: .8rem;
    border: 1px dotted var(--text-3); background: var(--bg-warm-1);
    transition: border-color .2s var(--ease), transform .2s var(--ease);
  }
  .case-close:hover { border-color: var(--text); transform: translateY(-1px); }

  .case-hero {
    position: relative; overflow: hidden;
    min-height: 100dvh;
    display: flex; align-items: flex-end;
    padding: 6rem 1.25rem 4rem;
    background: var(--bg-warm-elevated);
  }
  @media (min-width: 1024px) { .case-hero { padding: 7rem 3.5rem 5rem; } }
  .case-hero-media {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
  }
  .case-hero-media::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.9) 100%);
    opacity: 0; transition: opacity .3s var(--ease);
  }
  .case-hero.has-media .case-hero-media::before { opacity: 1; }
  .case-hero.has-media .case-hero-title { color: #fff; }
  .case-hero-logo {
    display: none; position: absolute; z-index: 1; right: 1.25rem; bottom: 4.5rem;
    width: 6rem; height: auto;
  }
  @media (min-width: 1024px) { .case-hero-logo { width: 9rem; right: 3.5rem; bottom: 5.5rem; } }
  .case-hero.has-media .case-hero-logo { filter: brightness(0) invert(1); opacity: .95; }
  .case-hero-media .mark-bg {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; color: var(--text);
    opacity: .07; font-size: clamp(6rem, 26vw, 20rem); white-space: nowrap;
  }
  .case-hero-title-wrap { position: relative; z-index: 1; }
  .case-hero-kicker { display: none; }
  .case-hero-title {
    font-weight: 800; text-transform: uppercase; letter-spacing: -.02em;
    font-size: clamp(2.6rem, 10vw, 8rem); line-height: .98;
  }
  .case-hero-title span {
    display: block; overflow: hidden;
  }
  .case-hero-title span > span {
    display: inline-block; opacity: 0; transform: translateY(100%);
    transition: opacity .8s var(--ease-cinematic), transform .8s var(--ease-cinematic);
  }
  .case-hero-title span:nth-child(1) > span { transition-delay: .05s; }
  .case-hero-title span:nth-child(2) > span { transition-delay: .15s; }
  .case-hero-title span:nth-child(3) > span { transition-delay: .25s; }
  .case-hero-title.in span > span { opacity: 1; transform: translateY(0); }
  .case-scroll-hint {
    position: absolute; right: 1.25rem; bottom: 1.5rem; z-index: 1;
    font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2);
  }
  .case-hero.has-media .case-scroll-hint { color: rgba(255,255,255,.75); }
  @media (min-width: 1024px) { .case-scroll-hint { right: 3.5rem; } }

  /* ---------- Adecos: hero mở màn kiểu điện ảnh + preview tính năng theo con
     trỏ — lấy cảm hứng từ hiệu ứng clip-path reveal / xoay 3D / hover preview
     của clementgrellier.fr/work, giữ nguyên bảng màu tối + accent xanh sẵn có
     thay vì bê nguyên tông trắng/đen của bản gốc. Chỉ áp riêng cho Adecos qua
     lớp .is-adecos, các dự án khác không đổi. ---------- */
  .case-overlay.is-adecos .case-hero { perspective: 1400px; }
  .case-overlay.is-adecos .case-hero-media {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    transition: clip-path 1.7s var(--ease-cinematic) .1s, transform 1.7s var(--ease-cinematic) .1s;
  }
  .case-overlay.is-adecos .case-hero-media::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(120% 90% at 50% 100%, rgba(192,254,4,.18), transparent 70%);
    opacity: 0; transition: opacity 1.3s var(--ease-cinematic) .5s;
  }
  .case-overlay.is-adecos .case-hero.animate .case-hero-media {
    clip-path: polygon(13% 0%, 87% 0%, 87% 100%, 13% 100%);
    transform: scale(.92);
  }
  .case-overlay.is-adecos .case-hero.animate .case-hero-media::after { opacity: 1; }

  .case-overlay.is-adecos .case-hero-kicker {
    display: block; position: relative; margin-bottom: .8rem;
    font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
    opacity: 0; filter: blur(6px); transform: translateY(12px);
    transition: opacity .9s var(--ease-cinematic), filter .9s var(--ease-cinematic), transform .9s var(--ease-cinematic);
    transition-delay: .5s;
  }
  .case-overlay.is-adecos .case-hero.animate .case-hero-kicker { opacity: 1; filter: blur(0); transform: translateY(0); }

  .case-overlay.is-adecos .case-hero-title span { overflow: visible; }
  .case-overlay.is-adecos .case-hero-title span > span {
    transform: translate3d(-16vw, 0, 0) rotateY(35deg) scale(1.3);
    filter: blur(16px);
    transition: opacity 1.1s var(--ease-cinematic), transform 1.1s var(--ease-cinematic), filter 1.1s var(--ease-cinematic);
  }
  .case-overlay.is-adecos .case-hero-title span:nth-child(1) > span { transition-delay: .8s; }
  .case-overlay.is-adecos .case-hero-title span:nth-child(2) > span { transition-delay: .92s; }
  .case-overlay.is-adecos .case-hero-title span:nth-child(3) > span { transition-delay: 1.04s; }
  .case-overlay.is-adecos .case-hero-title.in span > span {
    transform: translate3d(0, 0, 0) rotateY(0) scale(1);
    filter: blur(0);
  }
  .case-overlay.is-adecos .case-scroll-hint {
    opacity: 0; transition: opacity 1s var(--ease-cinematic) 1.7s;
  }
  .case-overlay.is-adecos .case-hero.animate .case-scroll-hint { opacity: 1; }

  /* Adecos: banner quảng cáo sản phẩm chèn ngay sau hero mở màn — mô phỏng
     ảnh tham khảo "Adecos hero banner.webp": nền tối + glow ánh sáng, 2 thẻ
     minh hoạ "Đồng bộ" (nhịp pulse lan toả quanh biểu tượng sync) và "Trình
     khám phá dự án" (lưới ảnh 3 cột tự cuộn dọc, mô phỏng nhiều dự án affiliate
     đang chạy song song). Animation chỉ bật khi overlay đang mở đúng case
     Adecos (.open.is-adecos) để không tốn hiệu năng lúc overlay đóng. */
  /* Adecos: banner thay thế hoàn toàn hero mở màn mặc định (ADECOS chữ lớn) —
     ẩn .case-hero, để .case-banner đứng ngay sau topbar và đóng vai trò hero
     chính, cao tối thiểu 100dvh với nội dung canh giữa theo chiều dọc. */
  .case-overlay.is-adecos .case-hero { display: none; }

  .case-banner { display: none; }
  .case-overlay.is-adecos .case-banner {
    display: flex; flex-direction: column; justify-content: center;
    position: relative; overflow: hidden; min-height: 100dvh;
    padding: 4.5rem 1.25rem 3.5rem;
    background: #0a0d16 url("image/Bckground Adecos hero banner.webp") center top / cover no-repeat;
    color: #f4f4ef;
  }
  @media (min-width: 1024px) { .case-overlay.is-adecos .case-banner { padding: 6rem 3.5rem 4.5rem; } }

  .case-banner-logo { position: relative; width: 2.75rem; height: 2.2rem; margin: 0 auto 1.25rem; color: #fff; }
  .case-banner-logo svg { width: 100%; height: 100%; }

  .case-banner-title {
    position: relative; text-align: center; white-space: nowrap;
    font-family: "TikTok Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-weight: 600; letter-spacing: -.01em; line-height: 1.25;
    font-size: clamp(1.3rem, 2.9vw, 2.5rem);
    color: #eef0f6; margin: 0 auto 2.75rem;
  }
  @media (max-width: 700px) { .case-banner-title { white-space: normal; } }

  .case-banner-cards { position: relative; display: flex; align-items: stretch; gap: 1.1rem; max-width: 64rem; margin: 0 auto; }
  @media (max-width: 900px) { .case-banner-cards { flex-direction: column; } }

  .case-banner-card {
    border-radius: 1.25rem; padding: 1.5rem;
    display: flex; flex-direction: column; gap: 1.25rem;
    font-family: "TikTok Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  }
  .case-banner-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: .5rem; }
  .case-banner-card p { font-size: .85rem; line-height: 1.5; max-width: 22rem; }

  .case-banner-sync { flex: 0 0 34%; background: linear-gradient(160deg, #4a9cf0 0%, #2f6fe0 100%); color: #fff; }
  .case-banner-sync p { color: rgba(255,255,255,.85); }
  @media (max-width: 900px) { .case-banner-sync { flex: none; } }

  .case-banner-sync-visual { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; }
  .sync-orbit { position: relative; width: min(13rem, 70%); aspect-ratio: 1; }
  .sync-ring { position: absolute; inset: 0; margin: auto; border-radius: 50%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.4); }
  .sync-ring.r1 { width: 55%; height: 55%; }
  .sync-ring.r2 { width: 75%; height: 75%; }
  .sync-ring.r3 { width: 100%; height: 100%; }
  .sync-badge {
    position: absolute; inset: 0; margin: auto; width: 34%; height: 34%; border-radius: 50%;
    background: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 24px rgba(10,30,70,.35);
  }
  .sync-badge svg, .sync-badge img { width: 60%; height: 60%; object-fit: contain; }

  @keyframes sync-pulse { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
  .case-overlay.open.is-adecos .sync-ring { animation: sync-pulse 2.6s var(--ease-cinematic) infinite; }
  .case-overlay.open.is-adecos .sync-ring.r2 { animation-delay: .5s; }
  .case-overlay.open.is-adecos .sync-ring.r3 { animation-delay: 1s; }

  .case-banner-explorer { flex: 1; background: linear-gradient(160deg, #f9f8fb 0%, #eef0f7 100%); color: #171922; }
  .case-banner-explorer p { color: rgba(23,25,34,.62); }

  .case-banner-marquee {
    position: relative; flex: none; display: flex; gap: .6rem;
    height: 14.5rem; border-radius: .7rem; overflow: hidden;
    mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  }
  .case-banner-marquee-col { flex: 1; overflow: hidden; }
  .case-banner-marquee-track { display: flex; flex-direction: column; gap: .6rem; }
  .case-banner-marquee-track img { width: 100%; border-radius: .6rem; display: block; box-shadow: 0 6px 18px rgba(20,20,30,.18); }

  @keyframes marquee-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
  @keyframes marquee-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
  .case-overlay.open.is-adecos .case-banner-marquee-track { animation: marquee-up 26s linear infinite; }
  .case-overlay.open.is-adecos .case-banner-marquee-col.is-reverse .case-banner-marquee-track { animation-name: marquee-down; animation-duration: 22s; }

  /* Air Reviews: huy hiệu đánh giá khổng lồ "mở màn" cho hero — lấy cảm hứng
     từ con số "(VER.6)" phóng to mở đầu trang chủ của v6.usestate.org. Neo cố
     định ở góc dưới trái (đúng chỗ tiêu đề vốn bị ẩn với dự án này), phóng to +
     mờ nét lúc đầu rồi "hạ cánh" thành huy hiệu nhỏ gọn đứng yên. */
  .case-hero-rating { display: none; }
  .case-overlay.is-air .case-hero-rating {
    display: flex; flex-direction: column; align-items: flex-start; gap: .2rem;
    position: absolute; z-index: 2; left: 1.25rem; bottom: 4rem;
    transform-origin: left bottom;
    transform: scale(2.4); filter: blur(18px); opacity: 0;
    transition: transform 1.3s var(--ease-cinematic) .15s, filter 1.1s var(--ease-cinematic) .15s, opacity .9s var(--ease-cinematic) .15s;
  }
  @media (min-width: 1024px) { .case-overlay.is-air .case-hero-rating { left: 3.5rem; } }
  .case-overlay.is-air .case-hero.animate .case-hero-rating {
    transform: scale(1); filter: blur(0); opacity: 1;
  }
  .case-hero-rating-number {
    font-weight: 800; letter-spacing: -.02em; color: #fff; line-height: 1; font-size: 2.6rem;
  }
  .case-hero-rating-stars { color: var(--accent); font-size: 1.1rem; letter-spacing: .12em; }
  .case-hero-rating-count { color: rgba(255,255,255,.75); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; }

  /* danh sách "Các tính năng" của Adecos: rê chuột để lật màu + ảnh xem trước
     bám theo con trỏ (xem thêm khối #case-preview cuối file) */
  .case-overlay.is-adecos .case-details-text li[data-preview] {
    position: relative; z-index: 0; cursor: pointer;
    margin: 0 -.75rem; padding: .5rem .75rem .5rem 1.5rem; border-radius: .4rem;
    transition: color .4s var(--ease-cinematic);
  }
  .case-overlay.is-adecos .case-details-text li[data-preview]::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--accent); border-radius: .4rem;
    transform: scaleY(0); transform-origin: bottom;
    transition: transform .45s var(--ease-cinematic);
  }
  .case-overlay.is-adecos .case-details-text li[data-preview]:hover,
  .case-overlay.is-adecos .case-details-text li[data-preview]:hover strong,
  .case-overlay.is-adecos .case-details-text li[data-preview]:hover::before {
    color: #0f1111;
  }
  .case-overlay.is-adecos .case-details-text li[data-preview]:hover::after { transform: scaleY(1); }

  .case-preview {
    position: fixed; top: 0; left: 0; z-index: 60;
    width: 22rem; max-width: 42vw; aspect-ratio: 4/3;
    border-radius: .6rem; overflow: hidden;
    border: 1px solid var(--line); background: var(--bg-elevated);
    box-shadow: var(--shadow-elevated);
    opacity: 0; filter: blur(14px);
    transition: opacity .5s var(--ease-cinematic), filter .6s var(--ease-cinematic);
    pointer-events: none; will-change: transform;
  }
  .case-preview.show { opacity: 1; filter: blur(0); }
  .case-preview img { width: 100%; height: 100%; object-fit: cover; display: block; background: #fff; }
  @media (max-width: 767px) { .case-preview { display: none; } }

  .case-details {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem;
    padding: 5rem 1.25rem;
  }
  @media (min-width: 1024px) { .case-details { padding: 8rem 3.5rem; } }
  .case-details-text { flex: 1 1 420px; max-width: 640px; }
  .case-details-text h3 {
    font-weight: 800; letter-spacing: -.01em; color: var(--text);
    font-size: 1.7rem; margin-top: 3rem; margin-bottom: .9rem;
  }
  @media (min-width: 1024px) { .case-details-text h3 { font-size: 2.1rem; } }
  .case-details-text h3:first-of-type { margin-top: 0; }
  .case-details-text p { font-size: 1.15rem; line-height: 1.55; }
  .case-details-text p + p { margin-top: 1rem; }
  @media (min-width: 1024px) { .case-details-text p { font-size: 1.3rem; } }
  .case-details-text ul {
    display: flex; flex-direction: column; gap: .7rem; margin-top: 1rem;
  }
  .case-details-text li {
    position: relative; padding-left: 1.3rem;
    font-size: 1.15rem; line-height: 1.5;
  }
  @media (min-width: 1024px) { .case-details-text li { font-size: 1.3rem; } }
  .case-details-text li::before { content: "—"; position: absolute; left: 0; color: var(--text); }
  .case-details-text li strong { color: var(--text); font-weight: 700; }

  .case-side { flex: 0 1 220px; display: flex; flex-direction: column; }
  /* Cột phụ: ghim (sticky) khối tags + ảnh chuyển động lại với nhau thành một
     đơn vị duy nhất khi cuộn qua phần văn bản, và tự nhả ra (thôi ghim) ngay
     khi tới cuối cột — đúng lúc layout chuyển sang phần ảnh gallery bên dưới.
     Áp dụng cho mọi dự án (không riêng dự án nào), tags luôn hiện; ảnh chỉ
     hiện thêm khi dự án có sideVisual. */
  .case-side-sticky { position: sticky; top: 6rem; display: flex; flex-direction: column; }
  @media (max-width: 767px) { .case-side-sticky { position: static; } }

  .case-tags {
    display: flex; flex-direction: column; gap: .6rem; align-items: flex-start;
  }
  .case-details-logo { display: none; margin-top: auto; width: 100%; max-width: 170px; height: auto; }
  .case-details-logo.has-logo { display: block; }

  /* ảnh chuyển động ở cột phụ (dưới tags) — dùng chung hiệu ứng tự cuộn
     "case-tile-autoscroll" với các ảnh chụp toàn trang trong gallery; việc
     ghim lại (sticky) nay do .case-side-sticky (cha) đảm nhiệm, để tags và
     ảnh luôn di chuyển cùng nhau như một khối, không đè lên nhau. */
  .case-side-visual { display: none; }
  .case-side-visual.has-visual {
    display: block;
    margin: 2.5rem 0; aspect-ratio: 1 / 1; overflow: hidden;
    border-radius: .6rem; border: 1px solid var(--line);
    box-shadow: var(--shadow-elevated);
  }
  .case-side-visual img {
    width: 100%; height: auto; display: block;
    animation: case-tile-autoscroll 20s ease-in-out infinite;
  }
  .case-side-visual:hover img { animation-play-state: paused; }
  @media (prefers-reduced-motion: reduce) { .case-side-visual img { animation: none; } }

  .case-tags li {
    border: 1px dotted var(--line); padding: .6rem .9rem;
    font-size: 1rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2);
  }

  .case-gallery { max-width: 1280px; margin: 0 auto; padding-bottom: 2rem; }
  .case-row { display: flex; gap: 1.25rem; margin-bottom: 1.25rem; }
  @media (min-width: 1024px) { .case-row { gap: 2rem; margin-bottom: 2rem; } }
  .case-row.pair .case-tile { width: calc(50% - .625rem); }
  @media (min-width: 1024px) { .case-row.pair .case-tile { width: calc(50% - 1rem); } }
  .case-row.full .case-tile { width: 100%; }
  .case-tile {
    position: relative; overflow: hidden; aspect-ratio: 16/10;
    border: 1px solid var(--line); background: var(--bg-warm-elevated);
  }
  .case-row.full .case-tile { aspect-ratio: 21/9; }
  .case-tile.is-empty { border: none; background: none; aspect-ratio: auto; }
  .case-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* ảnh tư liệu/tài liệu thiết kế — giữ nguyên tỉ lệ gốc, không cắt để không mất chữ/nội dung.
     Selector phải khớp độ đặc thù với .case-row.full/.pair .case-tile ở trên để thắng được aspect-ratio cố định. */
  .case-row.full .case-tile.is-natural, .case-row.pair .case-tile.is-natural { aspect-ratio: auto; border: none; background: none; }
  .case-tile.is-natural img { height: auto; object-fit: contain; }
  .case-tile.is-mark {
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; text-transform: uppercase; letter-spacing: -.01em;
    color: var(--text-3); font-size: clamp(1.1rem, 2.6vw, 1.9rem); text-align: center; padding: 1rem;
  }
  /* ảnh chụp toàn trang thật (dài) — tự cuộn lên xuống trong khung để tạo cảm
     giác đang lướt website thật, thay vì chỉ cắt cứng phần đầu trang. Khi hover,
     ảnh đứng yên (tạm dừng cuộn) và lộ ra huy hiệu logo + kết quả thực tế */
  .case-tile.is-scroll img {
    height: auto; object-fit: unset;
    animation: case-tile-autoscroll 18s ease-in-out infinite;
  }
  .case-tile.is-scroll:hover img { animation-play-state: paused; }
  @keyframes case-tile-autoscroll {
    0%, 8%    { transform: translateY(0); }
    46%, 54%  { transform: translateY(var(--scroll-end)); }
    92%, 100% { transform: translateY(0); }
  }
  /* banner ngang rất dài (vd. dòng thời gian) — phóng to khung, người xem tự
     lướt chuột/trackpad theo chiều ngang để xem hết thay vì cuộn dọc; chữ/ảnh
     nhỏ bên trong nhờ khung lớn hơn cũng rõ hơn hẳn so với co vừa chiều rộng gốc */
  .case-row.full .case-tile.is-big { aspect-ratio: 2/1; }
  /* phá khung .wrap/.case-gallery để tràn full viewport — bù trừ bằng nửa
     hiệu số giữa chiều rộng khối chứa (đã bị padding/max-width co lại) và
     100vw, độ lệch này luôn đưa mép trái/phải về đúng mép màn hình vì khối
     chứa vẫn đang được canh giữa (margin:0 auto) */
  .case-row.full-bleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  .case-tile.is-scroll-x {
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    border: none; background: none;
  }
  .case-tile.is-scroll-x::-webkit-scrollbar { display: none; }
  .case-tile.is-scroll-x img {
    width: auto; max-width: none; height: 100%; object-fit: unset;
  }
  .case-tile-overlay {
    position: absolute; inset: 0; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .85rem;
    padding: 1.5rem; text-align: center;
    background: rgba(251, 250, 245, .97);
    opacity: 0; transition: opacity .35s var(--ease);
    pointer-events: none;
  }
  .case-tile.is-scroll:hover .case-tile-overlay { opacity: 1; }
  .case-tile-logo { max-width: 50%; max-height: 2.4rem; width: auto; height: auto; }
  .case-tile-logo-text {
    font-family: "TikTok Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-weight: 800; text-transform: uppercase; letter-spacing: .01em; color: #10151c;
    font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  }
  .case-tile-tagline {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: rgba(16,21,28,.55);
    margin-top: -.5rem;
  }
  .case-tile-desc {
    max-width: 26rem; font-size: .88rem; line-height: 1.45; color: rgba(16,21,28,.75);
  }
  .case-tile-divider { width: 2.5rem; height: 1px; background: rgba(16,21,28,.18); }
  .case-tile-stats { display: flex; gap: 1.75rem; }
  .case-tile-stat { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
  .case-tile-stat .stat-value {
    font-family: "TikTok Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-weight: 800; font-size: clamp(1.2rem, 2.4vw, 1.6rem); color: #10151c; letter-spacing: -.01em;
  }
  .case-tile-stat .stat-label {
    font-size: .68rem; color: rgba(16,21,28,.6); max-width: 7rem; line-height: 1.3;
  }
  @media (prefers-reduced-motion: reduce) {
    .case-tile.is-scroll img { animation: none; }
  }

  .case-quote {
    margin: 3rem 0; padding: 6rem 1.25rem; min-height: 50vh;
    display: flex; align-items: center; justify-content: center; text-align: center;
    transition: background-color .3s var(--ease), color .3s var(--ease);
  }
  @media (min-width: 1024px) { .case-quote { padding: 8rem 3.5rem; } }
  .case-quote p {
    font-family: "TikTok Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-weight: 800; text-transform: uppercase; letter-spacing: -.015em;
    font-size: clamp(2rem, 6vw, 4.4rem); line-height: 1.3; max-width: 960px;
    white-space: pre-line;
  }
  /* quote dài hơn hẳn các dự án khác (vd. EYEFIRE School) cần cỡ chữ nhỏ hơn
     để giữ đúng số dòng ngắt chủ động, tránh bị wrap thêm dòng ngoài ý muốn */
  .case-quote.is-long p { font-size: clamp(1.8rem, 5vw, 3.6rem); }

  .case-related { padding: 5rem 1.25rem 7rem; }
  @media (min-width: 1024px) { .case-related { padding: 6rem 3.5rem 8rem; } }
  .case-related-label {
    display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-3); margin-bottom: 2rem;
  }
  .case-related-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
  @media (min-width: 640px) { .case-related-grid { grid-template-columns: repeat(2, 1fr); } }
  .case-related-item { cursor: pointer; }
  .case-related-item .work-visual {
    margin-bottom: 1rem; display: flex; align-items: center; justify-content: center;
  }
  .case-related-item h4 { font-size: 1.05rem; font-weight: 700; }
  .case-related-item .yr { color: var(--text-3); font-size: .85rem; }

  .case-end { padding: 0 1.25rem 6rem; display: flex; justify-content: center; }
  @media (min-width: 1024px) { .case-end { padding: 0 3.5rem 7rem; } }
  .case-close-end { padding: .9rem 1.8rem; font-size: .95rem; }

  body.case-open { overflow: hidden; }

  @media (prefers-reduced-motion: reduce) {
    .case-overlay, .case-scroll { transition: opacity .3s linear !important; transform: none !important; }
    .case-hero-title span > span { transition: opacity .3s linear !important; transform: none !important; }
  }