/* =========================================================
   PORTFOLIO · Lê Tuấn Anh
   Sáng gắt: nền kem lạnh, mực đen đậm, accent đỏ signal.
   Chuyển động: Lenis + GSAP ScrollTrigger (script.js).
   ========================================================= */

:root {
  --paper: #f1efe9;          /* nền kem sáng */
  --paper-soft: #e9e6dd;
  --ink: #0e0e0c;            /* mực đen gắt */
  --ink-soft: #6b6a63;
  --accent: #e8380c;         /* đỏ signal */
  --line: rgba(14, 14, 12, 0.16);
  --line-strong: rgba(14, 14, 12, 0.4);

  --font-display: "Archivo", "Inter", system-ui, sans-serif;
  --font-serif: "Playfair Display", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --mark-size: 16.82vw;      /* khớp bề ngang khối chữ với ~90vw */
  --mark-dens: 0;            /* 0 hoặc 100 = vỡ sọc, 50 = đọc được */

  --pad: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(0.65, 0.05, 0, 1);
}

/* Khai báo kiểu cho biến DENS: có @property thì trình duyệt nội suy được
   giá trị số, không thì GSAP vẫn tween tay như thường. */
@property --mark-dens {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* AS Module 2 (variable, trục DENS 0-100) - dùng cho wordmark cuối trang */
@font-face {
  font-family: "Module2";
  src: url("../assets/fonts/module2.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

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

html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  /* Tắt cú nảy quá đáy của trình duyệt: phần lộ wordmark ở cuối trang đã làm
     đúng việc đó rồi, để cả hai cùng chạy thì đáy trang giật hai lớp. */
  overscroll-behavior-y: none;
}
body.is-locked { overflow: hidden; padding-right: var(--lock-gap, 0px); }
/* Khoá cuộn thì thanh cuộn biến mất; --lock-gap (script.js) giữ lại đúng bề
   ngang của nó cho trang và mấy thứ ghim cạnh phải, để không cái gì nhảy. */
body.is-locked :is(.nav, .progress, .markpull, .skim, .totop) { margin-right: var(--lock-gap, 0px); }

/* height:auto là bắt buộc kể từ khi mọi <img> có thuộc tính width/height thật:
   hai thuộc tính đó vừa cho trình duyệt biết tỉ lệ để chừa sẵn chỗ (trang
   không giật khi ảnh về), vừa bị hiểu là chiều cao cố định tính bằng pixel.
   Thiếu dòng này thì ảnh dọc bị kéo dãn ra đúng bằng số ghi trong thẻ. */
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
sup { font-size: 0.45em; }

::selection { background: var(--ink); color: var(--paper); }

/* Ẩn phần tử chờ animation: chỉ khi JS chạy được */
html.js [data-reveal] { opacity: 0; transform: translateY(44px); }
html.js .hline__inner { transform: translateY(112%); }
html.js [data-split] .w-in { transform: translateY(112%); display: inline-block; }
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
[data-split] .w-in { display: inline-block; }

/* ---------- Underline link ---------- */
.u-line { position: relative; }
.u-line::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.u-line:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.95em 1.9em;
  border: 1px solid var(--ink); border-radius: 999px;
  font-family: var(--font-display); font-weight: 500; font-size: 1rem;
  line-height: 1; letter-spacing: 0.01em;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color 0.45s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ink); border-radius: inherit;
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
}
.btn:hover { color: var(--paper); }
.btn:hover::before { transform: translateY(0); }
.btn--fill { background: var(--ink); color: var(--paper); }
.btn--fill::before { background: var(--accent); }
.btn__arrow { transition: transform 0.35s var(--ease); }
.btn:hover .btn__arrow { transform: translate(3px, -2px); }

/* ---------- Grain (chất phim phủ nền kem) ---------- */
.grain {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  opacity: 0.32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
@media (hover: none) { .grain { opacity: 0.22; } }

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 300;
  background: var(--ink); color: var(--paper);
  display: flex; align-items: flex-end;
}
.loader__row {
  width: 100%; padding: var(--pad);
  display: flex; align-items: flex-end; justify-content: space-between;
}
.loader__name {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(0.9rem, 1.6vw, 1.2rem); opacity: 0.7;
}
.loader__count {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(4rem, 14vw, 11rem); line-height: 0.85;
  letter-spacing: -0.03em;
}
html:not(.js) .loader { display: none; }

/* ---------- Cursor ---------- */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 250;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -50%);
  transition: width 0.35s var(--ease), height 0.35s var(--ease), background-color 0.3s;
}
.cursor__label {
  font-family: var(--font-display); font-weight: 500; font-size: 0.85rem;
  color: var(--paper); opacity: 0; transition: opacity 0.25s;
  white-space: nowrap;
}
.cursor.is-view { width: 84px; height: 84px; background: var(--ink); }
.cursor.is-view .cursor__label { opacity: 1; }
.cursor.is-off { width: 0; height: 0; }
@media (hover: none) { .cursor { display: none; } }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(16px, 2.4vw, 28px) var(--pad);
  mix-blend-mode: difference; color: #f1efe9;
}
.nav__logo {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.1rem; letter-spacing: 0.01em;
}
.nav__burger {
  display: flex; flex-direction: column; gap: 7px;
  background: none; border: 0; cursor: pointer; padding: 6px 2px;
}
.nav__burger span {
  width: 34px; height: 2px; background: currentColor;
  transition: transform 0.4s var(--ease);
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

/* ---------- Fullscreen menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 110;
  right: auto; width: 100vw; /* phủ luôn chỗ thanh cuộn: lúc khoá hay mở khoá cũng không đổi bề ngang */
  background: var(--ink); color: var(--paper);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--pad);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.7s var(--ease), visibility 0s linear 0.7s;
}
.menu.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.7s var(--ease);
}
.menu__link {
  display: flex; align-items: baseline; gap: 0.35em;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.6rem, 8.5vw, 7.5rem);
  line-height: 1.06; letter-spacing: -0.02em;
  width: fit-content;
  transition: color 0.3s;
}
.menu__link sup { color: var(--accent); font-size: 0.28em; font-family: var(--font-body); font-weight: 500; }
.menu__link:hover { color: var(--accent); }
.menu__link span { transform: translateY(60px); opacity: 0; transition: transform 0.7s var(--ease), opacity 0.5s; }
.menu.is-open .menu__link span { transform: translateY(0); opacity: 1; }
.menu.is-open .menu__link:nth-child(2) span { transition-delay: 0.06s; }
.menu.is-open .menu__link:nth-child(3) span { transition-delay: 0.12s; }
.menu.is-open .menu__link:nth-child(4) span { transition-delay: 0.18s; }
.menu__meta {
  position: absolute; bottom: var(--pad); left: var(--pad);
  display: flex; flex-wrap: wrap; gap: 1.6em;
  font-size: 0.9rem; opacity: 0.75;
}

/* ---------- Hero ---------- */
/* Nền mực như mặt canvas của một file thiết kế lúc đêm. Mỗi dòng chữ nói
   bằng đúng ngôn ngữ của nghề nó gọi tên: "Design it." nằm trong khung chọn
   như khi bấm vào một lớp chữ trong Figma, kèm số đo thật; "Code it." tự gõ
   ra cùng con trỏ nhấp nháy; "Sell it." là nét ký serif đỏ chốt câu.
   Không ảnh nền, không lớp phủ: chi tiết nào cũng có việc của nó. */
.hero {
  position: relative; overflow: hidden;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--pad) + 62px) var(--pad) clamp(28px, 4.5vh, 52px);
  background: var(--ink); color: var(--paper);
}

/* Lưới chấm của mặt canvas: rõ ở nửa trên còn trống, nhạt dần về phía chữ.
   Lớp ::after là đúng lưới đó nhưng sáng hơn, chỉ lộ ra trong một vòng mờ
   quanh con trỏ (script.js ghi toạ độ vào --mx, --my). */
.hero__canvas {
  position: absolute; inset: 0; pointer-events: none;
  --dot: radial-gradient(circle, currentColor 0.9px, transparent 1.3px);
  color: rgba(241, 239, 233, 0.11);
  background: var(--dot) 13px 13px / 26px 26px;
  -webkit-mask-image: linear-gradient(to bottom, #000 10%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.12) 90%);
          mask-image: linear-gradient(to bottom, #000 10%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.12) 90%);
}
html.js .hero__canvas { opacity: 0; }
.hero__canvas::after {
  content: ""; position: absolute; inset: 0;
  color: rgba(241, 239, 233, 0.6);
  background: var(--dot) 13px 13px / 26px 26px;
  -webkit-mask-image: radial-gradient(200px circle at var(--mx, -999px) var(--my, -999px), #000, transparent);
          mask-image: radial-gradient(200px circle at var(--mx, -999px) var(--my, -999px), #000, transparent);
  opacity: var(--spot, 0);
  transition: opacity 0.5s ease;
}

.hero__body { position: relative; z-index: 1; }
.hero__title {
  font-family: var(--font-display); font-weight: 700; font-stretch: 125%;
  font-size: clamp(2.8rem, 12vw, 14rem); line-height: 0.92; letter-spacing: -0.035em;
  text-transform: uppercase; white-space: nowrap;
}
/* "THIẾT KẾ ĐƯỢC." dài gần gấp rưỡi "DESIGN IT.": thu cỡ để vẫn gọn một dòng.
   Dấu nặng dưới chân và dấu mũ trên đầu cần thêm khoảng giữa hai dòng. */
html[lang="vi"] .hero__title { font-size: clamp(2rem, 8.2vw, 9.6rem); line-height: 1.14; }
.hline { display: block; overflow: hidden; }
.hline__inner { display: block; }
.hero__word { cursor: default; }
.hero__serif {
  font-family: var(--font-serif); font-style: italic; font-weight: 500; font-stretch: 100%;
  font-size: 1.05em; text-transform: none; letter-spacing: -0.01em;
  color: var(--accent);
}

/* Dòng code không trồi lên như hai dòng kia mà được gõ ra từng chữ. Chữ ẩn
   sẵn để khỏi nháy lên một nhịp trước khi bị xoá đi gõ lại; bản không có
   animation bỏ class js nên chữ hiện đủ ngay. */
html.js .hero__code { visibility: hidden; }
.hero__caret {
  display: inline-block; vertical-align: baseline;
  width: 0.05em; height: 0.74em; margin-left: 0.07em;
  background: var(--paper);
  animation: heroCaret 1.06s steps(1) infinite;
}
.hero__caret.is-typing { animation: none; }
@keyframes heroCaret { 50% { opacity: 0; } }

/* Đoạn giới thiệu đứng ngoài thẻ h1 (tiêu đề chỉ gồm ba dòng chữ), nhưng neo
   vào chân dòng "Sell it." để lấp khoảng trống bên phải dòng ngắn nhất. */
.hero__aside {
  position: absolute; right: 0; bottom: 0;
  max-width: 33ch; padding-bottom: 1em;
  font-size: clamp(0.95rem, 1.1vw, 1.08rem); line-height: 1.55;
  color: rgba(241, 239, 233, 0.7);
}
.hero__aside strong { color: var(--paper); font-weight: 600; }

/* Khung chọn: một nét mảnh, bốn nút góc, nhãn font ở góc trên trái, kích
   thước ở góc trên phải. Vị trí và con số do script.js đo trên chữ thật. */
.hero__sel {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none;
  border: 1px solid var(--accent);
  opacity: 0;
  transition: transform 0.6s var(--ease), width 0.6s var(--ease), height 0.6s var(--ease), opacity 0.5s ease;
}
.hero__sel.is-on { opacity: 1; }
.hero__handle {
  position: absolute; width: 8px; height: 8px;
  background: var(--ink); border: 1px solid var(--accent);
  transform: scale(0);
  transition: transform 0.45s var(--ease) 0.15s;
}
.hero__sel.is-on .hero__handle { transform: scale(1); }
.hero__handle--tl { left: -4.5px; top: -4.5px; }
.hero__handle--tr { right: -4.5px; top: -4.5px; }
.hero__handle--bl { left: -4.5px; bottom: -4.5px; }
.hero__handle--br { right: -4.5px; bottom: -4.5px; }
.hero__spec, .hero__size {
  position: absolute; white-space: nowrap;
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.02em;
}
.hero__spec { left: -1px; bottom: calc(100% + 9px); color: var(--accent); }
.hero__size {
  right: -1px; bottom: calc(100% + 6px);
  padding: 4px 6px; border-radius: 3px;
  background: var(--accent); color: #fff;
}

.hero__foot {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  margin-top: clamp(2.4rem, 7vh, 4.5rem); padding-top: clamp(18px, 2.6vh, 26px);
  border-top: 1px solid rgba(241, 239, 233, 0.16);
}
.hero__who {
  font: 400 0.74rem/1.7 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(241, 239, 233, 0.62);
}
.hero__who b { font-weight: 400; color: rgba(241, 239, 233, 0.3); margin: 0 0.35em; }
.hero__dot {
  display: inline-block; width: 8px; height: 8px; margin-right: 0.9em; vertical-align: 1px;
  border-radius: 50%; background: var(--accent);
  animation: heroPulse 2.2s ease-out infinite;
}
@keyframes heroPulse {
  0% { box-shadow: 0 0 0 0 rgba(232, 56, 12, 0.55); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(232, 56, 12, 0); }
}
.hero__cta { display: flex; gap: 0.7rem; flex-wrap: wrap; flex-shrink: 0; }

/* Hai kiểu nút cho nền mực */
.btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent::before { background: var(--paper); }
.btn--accent:hover { color: var(--ink); }
.btn--light { border-color: rgba(241, 239, 233, 0.4); color: var(--paper); }
.btn--light::before { background: var(--paper); }
.btn--light:hover { color: var(--ink); }

/* Màn vừa: dòng "Sell it." không còn đủ chỗ cho đoạn giới thiệu đứng cạnh. */
@media (max-width: 1199px) {
  .hero__aside { position: static; max-width: 40ch; padding-bottom: 0; margin-top: 1.8rem; }
}
@media (max-width: 860px) {
  .hero__title { font-size: 13vw; }
  html[lang="vi"] .hero__title { font-size: 8.6vw; }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .hero__spec { display: none; }
}

/* ---------- Marquee ---------- */
/* Hero đã là một khối mực, nên dải băng ngay dưới nó đổi sang nền kem với
   hai nét kẻ mảnh: hero dứt khoát ở mép dưới thay vì loang xuống dải băng. */
.marquee {
  background: var(--paper); color: var(--ink);
  overflow: hidden; padding: 1.1rem 0;
  border-block: 1px solid var(--line);
}
.marquee__track { display: flex; width: max-content; animation: marquee 22s linear infinite; }
.marquee__track span {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.2rem, 2.6vw, 2rem); white-space: pre;
  text-transform: uppercase; letter-spacing: 0.02em;
}
.marquee__track i { font-style: normal; color: var(--accent); margin: 0 0.6em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Manifesto ---------- */
.manifesto {
  padding: clamp(6rem, 18vh, 12rem) var(--pad);
  max-width: 1300px;
}
.manifesto__text {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.7rem, 4.4vw, 4.2rem);
  line-height: 1.15; letter-spacing: -0.02em;
}
.manifesto__text .hw { opacity: 0.14; }
.manifesto__press { margin-top: 3rem; font-size: 0.95rem; color: var(--ink-soft); }
.manifesto__press strong { color: var(--ink); font-weight: 600; }

/* ---------- Section head ---------- */
.section-head { padding: clamp(6rem, 16vh, 11rem) var(--pad) clamp(3rem, 8vh, 6rem); }
.eyebrow {
  font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 1.6rem;
}
.eyebrow i { font-style: normal; color: var(--accent); margin-right: 0.5em; }
.section-head__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.2rem, 5.8vw, 5.6rem);
  line-height: 1.02; letter-spacing: -0.025em;
  max-width: 18em;
}
.section-head__sub {
  margin-top: 1.8rem; max-width: 600px;
  font-size: 1rem; color: var(--ink-soft);
}

/* ---------- Index: mục lục dự án ---------- */
.index {
  list-style: none;
  margin: 0 var(--pad) clamp(5rem, 12vh, 9rem);
  border-top: 1px solid var(--line-strong);
}
.index a {
  display: grid;
  grid-template-columns: 3em minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 1fr) 7.5rem;
  align-items: baseline; gap: clamp(0.8rem, 2vw, 2rem);
  padding: clamp(1rem, 2.2vh, 1.5rem) 0.4em;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), padding-left 0.35s var(--ease);
}
.index a:hover { background: var(--ink); color: var(--paper); padding-left: 1em; }
.index__no {
  font-family: var(--font-display); font-weight: 500; font-stretch: 110%;
  font-size: 0.85rem; color: var(--accent);
}
.index__name {
  font-family: var(--font-display); font-weight: 600; font-stretch: 116%;
  font-size: clamp(1.15rem, 2.4vw, 1.9rem); line-height: 1.1; letter-spacing: -0.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.index__role, .index__fact { font-size: 0.9rem; color: var(--ink-soft); transition: color 0.35s; }
.index a:hover .index__role, .index a:hover .index__fact { color: rgba(241, 239, 233, 0.65); }
.index__time { font-size: 0.9rem; font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- Case ---------- */
.case { margin-bottom: clamp(6rem, 16vh, 13rem); }

/* Đoạn dẫn trước mỗi case: kicker định vị + hook một câu */
.case__lead {
  padding: 0 var(--pad) clamp(2.2rem, 6vh, 4rem);
  max-width: 1500px;
}
.case__kicker {
  font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 1.2rem;
}
.case__kicker i { font-style: normal; color: var(--accent); margin-right: 0.5em; }
.case__hook {
  font-family: var(--font-display); font-weight: 600; font-stretch: 116%;
  font-size: clamp(1.5rem, 3.4vw, 3.1rem);
  line-height: 1.12; letter-spacing: -0.02em;
  max-width: 26em;
}
/* Lead đặt dưới banner: thở trên, sát xuống phần body */
.case .case__hero + .case__lead { padding-top: clamp(3rem, 8vh, 5.5rem); padding-bottom: 0; }
.case .case__lead + .case__body { padding-top: clamp(2.5rem, 6vh, 4.5rem); }
/* Trang case mở trực tiếp: banner thấp như overlay để hook lộ ngay màn đầu */
.casepage .case__hero:not(.case__hero--phones) { height: min(78vh, 620px); }

.case__hero { position: relative; height: 100svh; overflow: hidden; }
.case__hero-media { position: absolute; inset: 0; }
.case__hero-media img {
  width: 100%; height: 120%; object-fit: cover;
  will-change: transform;
}
.case__hero-text {
  position: absolute; left: var(--pad); right: var(--pad); bottom: var(--pad);
  z-index: 2; color: #fff;
}
/* Nền sáng (mindzone, thinkmay): chữ mực, không cần gradient đè */
.case__hero--ink .case__hero-text { color: var(--ink); }
.case__hero--ink .case__tags span { border-color: rgba(14, 14, 12, 0.4); }
.case__index {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1rem, 1.8vw, 1.4rem); opacity: 0.8; margin-bottom: 0.4rem;
}
.case__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(3rem, 9vw, 9rem);
  line-height: 0.95; letter-spacing: -0.03em;
  margin-bottom: 1rem;
}
/* Title dài (Atomiton): hạ cỡ chữ để nằm một dòng, không đè lên icon giữa ảnh nền */
#atomiton .case__title { font-size: clamp(2.4rem, 6.2vw, 6.2rem); }
.case__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.case__tags span {
  font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.45em 1em; border: 1px solid rgba(255,255,255,0.45); border-radius: 999px;
}

@media (max-width: 699px) {
  .casepage .case__hero:not(.case__hero--phones) { height: 56svh; }
  .casepage .case__hero-media img { height: 100%; transform: none !important; }
  .casepage .case__hero-text:not(.case__hero-text--dark) { transform: none !important; }
}

/* Case hero biến thể: dàn điện thoại trên nền mực */
.case__hero--phones {
  height: auto; background: var(--ink); color: var(--paper);
  padding: calc(var(--pad) + 60px) var(--pad) var(--pad);
}
.case__hero-text--dark { position: static; color: var(--paper); margin-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.case__hero--phones .case__tags span { border-color: rgba(241, 239, 233, 0.35); }
.phones {
  display: flex; justify-content: center; align-items: flex-start;
  gap: clamp(0.8rem, 2.6vw, 2.4rem);
}
.phone { width: clamp(130px, 20vw, 250px); flex-shrink: 0; cursor: zoom-in; }
.phone img { border-radius: clamp(14px, 1.6vw, 26px); will-change: transform; }
.phone:nth-child(even) { margin-top: clamp(1.5rem, 4vw, 3.5rem); }
.phones__caption {
  text-align: center; font-size: 0.85rem; color: rgba(241, 239, 233, 0.65);
  margin-top: 2.2rem;
}

/* Case body */
.case__body {
  display: grid; grid-template-columns: minmax(260px, 340px) 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  padding: clamp(3.5rem, 9vh, 7rem) var(--pad);
  max-width: 1500px;
}
.case__side { position: relative; }
.case__metrics { position: sticky; top: 110px; }
.case__metrics div { padding: 1.3rem 0; border-top: 1px solid var(--line); }
.case__metrics div:last-child { border-bottom: 1px solid var(--line); }
.case__metrics b {
  display: block;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1; letter-spacing: -0.02em;
}
.case__metrics span { font-size: 0.85rem; color: var(--ink-soft); }

.case__story { max-width: 720px; }
.case__story p, .case__story li { font-size: 1.05rem; line-height: 1.8; }
.case__story p + p, .case__story p + ul, .case__story ul + p { margin-top: 1.6rem; }
.case__story li { padding: 1.1rem 0 1.1rem 1.8rem; position: relative; border-top: 1px solid var(--line); }
.case__story li::before {
  content: "✺"; position: absolute; left: 0; top: 1.15rem;
  color: var(--accent); font-size: 0.85rem;
}
.case__story strong { font-weight: 600; }
.lb {
  display: block;
  font-family: var(--font-display); font-weight: 500;
  font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.5rem;
}
.hl { background: var(--accent); color: var(--paper); padding: 0.05em 0.22em; font-weight: 600; }
.case__note { font-size: 0.85rem !important; color: var(--ink-soft); font-style: italic; }

/* Gallery cuộn ngang (pin): khối tối, screenshot trượt theo scroll */
.hscroll { overflow: hidden; background: var(--ink); }
.hscroll__track {
  display: flex; align-items: center;
  gap: clamp(1.2rem, 3vw, 3rem);
  padding: 0 var(--pad);
  width: max-content;
  will-change: transform;
}
.hshot { flex-shrink: 0; cursor: zoom-in; }
.hshot img {
  height: min(60svh, 620px); width: auto; max-width: 86vw;
  border: 1px solid rgba(241, 239, 233, 0.16);
  border-radius: clamp(8px, 1vw, 14px);
}
.hshot figcaption { margin-top: 0.9rem; font-size: 0.85rem; color: rgba(241, 239, 233, 0.6); }
@media (min-width: 861px) {
  .hscroll { min-height: 100svh; display: flex; align-items: center; }
}

/* Gallery dạng panel: ảnh UI hiện nguyên vẹn, không crop, không zoom */
.case__gallery {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 3.2vw, 3.2rem);
  margin: 0 var(--pad);
  padding: clamp(1.4rem, 3.5vw, 3.6rem);
  background: var(--panel, var(--paper-soft));
  border-radius: clamp(12px, 1.4vw, 22px);
}
.shot { cursor: zoom-in; min-width: 0; }
.shot--wide { grid-column: 1 / -1; }
.shot img {
  width: 100%; height: auto;
  border: 1px solid rgba(14, 14, 12, 0.12);
  border-radius: clamp(8px, 1vw, 14px);
  box-shadow: 0 30px 60px -34px rgba(14, 14, 12, 0.4);
}
.shot figcaption { margin-top: 0.9rem; font-size: 0.85rem; color: var(--panel-cap, var(--ink-soft)); }
.case__gallery--dark .shot img {
  border-color: rgba(241, 239, 233, 0.14);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.85);
}
/* Thinkmay: xếp dọc, khổ hẹp lại cho ảnh đỡ thô */
.case__gallery--stack { grid-template-columns: 1fr; justify-items: center; }
.case__gallery--stack .shot { width: min(100%, 1040px); }

/* Khối iPad: nền mực, khung máy mỏng, ảnh UI giữ nguyên tỉ lệ gốc */
.tablets {
  background: var(--ink); color: var(--paper);
  padding: clamp(3.5rem, 9vh, 7rem) var(--pad);
}
.tablets__head { max-width: 1500px; margin: 0 auto clamp(2.4rem, 6vh, 4.4rem); }
.tablets__label {
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(241, 239, 233, 0.55);
}
.tablets__label i { font-style: normal; color: var(--accent); margin-right: 0.5em; }
.tablets__title {
  font-family: var(--font-display); font-weight: 600; font-stretch: 116%;
  font-size: clamp(1.7rem, 4vw, 3.4rem);
  line-height: 1.1; letter-spacing: -0.02em;
  max-width: 15em; margin: 0.9rem 0 1.3rem;
}
.tablets__lede {
  max-width: 44em; font-size: 1.02rem; line-height: 1.75;
  color: rgba(241, 239, 233, 0.7);
}
/* Biến thể nền giấy: dùng khi khối đứng giữa trang sáng, trước một panel màu */
.tablets--paper { background: transparent; color: var(--ink); padding-bottom: clamp(2rem, 4.5vh, 3.2rem); }
.tablets--paper .tablets__label,
.tablets--paper .tablets__lede { color: var(--ink-soft); }
.tablets__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 3.4vw, 3.2rem);
  max-width: 1500px; margin: 0 auto;
}
.tablet { min-width: 0; cursor: zoom-in; }
.tablet--wide { grid-column: 1 / -1; width: min(100%, 1120px); margin: 0 auto; }
.tablet__frame {
  position: relative;
  padding: clamp(7px, 0.85vw, 13px);
  border-radius: clamp(17px, 1.9vw, 30px);
  background: linear-gradient(158deg, #43464c, #1a1b1e 44%, #0a0a0b);
  border: 1px solid rgba(241, 239, 233, 0.14);
  box-shadow: 0 42px 80px -40px rgba(0, 0, 0, 0.92);
}
/* Chấm camera cạnh dài, đủ để nhận ra là máy tính bảng nằm ngang */
.tablet__frame::after {
  content: ""; position: absolute; left: clamp(2px, 0.3vw, 5px); top: 50%;
  width: 4px; height: 4px; margin-top: -2px; border-radius: 50%;
  background: rgba(241, 239, 233, 0.28);
}
.tablet__frame img {
  display: block; width: 100%; height: auto;
  border-radius: clamp(10px, 1.15vw, 18px);
}
.tablet figcaption {
  margin-top: 1rem; font-size: 0.85rem; line-height: 1.6;
  color: rgba(241, 239, 233, 0.6);
}

/* Gallery sản phẩm: panel tối, hai cột lệch chiều cao nên neo mép trên */
.case__gallery--app { align-items: start; }
/* Ảnh full page: khung cửa sổ cắt bớt, mờ dần ở đáy, bấm để xem trọn trang */
.shot--window .shot__view {
  position: relative;
  max-height: min(72svh, 700px); overflow: hidden;
  border: 1px solid rgba(241, 239, 233, 0.14);
  border-radius: clamp(8px, 1vw, 14px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.85);
}
.shot--window .shot__view img {
  display: block; width: 100%; height: auto;
  border: 0; border-radius: 0; box-shadow: none;
}
.shot--window .shot__view::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: linear-gradient(to bottom, transparent, var(--panel, var(--ink)));
  pointer-events: none;
}
.shot__more {
  position: absolute; left: 0; right: 0; bottom: 1.2rem; z-index: 1;
  text-align: center; font-size: 0.75rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(241, 239, 233, 0.85);
}

/* ---------- About ---------- */
.about__grid {
  display: grid; grid-template-columns: minmax(280px, 400px) 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  padding: 0 var(--pad);
  max-width: 1500px;
  align-items: start;
}
.about__media { position: sticky; top: 110px; }
.about__photo { overflow: hidden; }
.about__photo img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  will-change: transform;
}
.about__badge {
  position: absolute; top: -30px; right: -26px;
  width: clamp(64px, 7vw, 92px); height: clamp(64px, 7vw, 92px);
  border-radius: 50%;
  background: var(--accent); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  animation: spin 16s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }
.about__caption {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 0.9rem; padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem; color: var(--ink-soft);
}
.about__lede {
  font-family: var(--font-display); font-weight: 600; font-stretch: 116%;
  font-size: clamp(1.45rem, 3vw, 2.7rem);
  line-height: 1.16; letter-spacing: -0.02em;
  max-width: 22em;
  margin-bottom: clamp(2.2rem, 5vh, 3.8rem);
}
.about__beats { border-top: 1px solid var(--line); }
.beat {
  display: grid; grid-template-columns: 3em 1fr; gap: 1.4rem;
  padding: clamp(1.4rem, 3vh, 2rem) 0;
  border-bottom: 1px solid var(--line);
}
.beat__no {
  font-family: var(--font-display); font-weight: 600; font-stretch: 110%;
  font-size: 0.9rem; color: var(--accent); padding-top: 0.4em;
}
.beat h4 {
  font-family: var(--font-display); font-weight: 600; font-stretch: 116%;
  font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: -0.01em;
  margin-bottom: 0.55rem;
}
.beat p { max-width: 640px; font-size: 1rem; line-height: 1.8; color: var(--ink); }

.about__details {
  display: grid; grid-template-columns: 3em minmax(0, 1fr);
  column-gap: 1.4rem; row-gap: clamp(1.6rem, 3.5vh, 2.2rem);
  margin-top: clamp(2rem, 4.5vh, 2.8rem);
}
.about__group { grid-column: 2; min-width: 0; }
.about__label {
  font-family: var(--font-display); font-weight: 500; font-stretch: 110%;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 0.9rem;
}
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.chips li {
  padding: 0.42em 0.9em; border: 1px solid var(--line-strong); border-radius: 999px;
  font-family: var(--font-body); font-weight: 500; font-size: 0.85rem; line-height: 1.2;
  color: var(--ink); white-space: nowrap;
}
.chips li:first-child { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.edu {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end;
  column-gap: clamp(1.25rem, 2.5vw, 2.25rem);
}
.edu__school {
  display: block; font-family: var(--font-display); font-weight: 600; font-stretch: 112%;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.2; color: var(--ink);
}
.edu__major { display: block; margin-top: 0.3rem; font-size: 0.88rem; color: var(--ink-soft); }
.edu__fig {
  display: block; padding-left: clamp(1.25rem, 2.5vw, 2.25rem);
  border-left: 1px solid var(--line);
}
.edu__fig b {
  display: block; font-family: var(--font-display); font-weight: 600; font-stretch: 116%;
  font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1; color: var(--ink); white-space: nowrap;
}
.edu__fig i {
  display: block; font-style: normal; margin-top: 0.35rem; font-size: 0.75rem;
  line-height: 1.3; color: var(--ink-soft); max-width: 13ch;
}
@media (min-width: 1025px) {
  .edu { grid-template-columns: auto auto; justify-content: start; }
  .edu__fig i { max-width: 22ch; }
}
@media (max-width: 1024px) {
  .edu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .edu__main { grid-column: 1 / -1; }
  .edu__fig { margin-top: 1rem; }
  .edu__fig:nth-child(2) { border-left: 0; padding-left: 0; }
}

/* ---------- V11 · Ghi nhận: báo chí & chứng chỉ ---------- */
.recog {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: clamp(2rem, 5vw, 6rem); align-items: start;
  margin: clamp(4rem, 9vh, 6.5rem) var(--pad) clamp(4.5rem, 11vh, 8rem);
}
.recog__title {
  font-family: var(--font-display); font-weight: 700; font-stretch: 125%;
  font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1.02; letter-spacing: -0.03em;
  color: var(--ink); margin-top: 1rem; max-width: 9em;
}
.recog__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.recog__row {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) 44px;
  column-gap: 1.5rem; align-items: center;
  padding: clamp(1.3rem, 2.8vh, 1.9rem) 0;
  border-bottom: 1px solid var(--line); color: var(--ink);
}
.recog__top {
  grid-column: 1; grid-row: 1;
  display: flex; flex-wrap: wrap; gap: 0.2rem 0.9em; align-items: baseline;
}
.recog__src {
  font-family: var(--font-display); font-weight: 600; font-stretch: 110%;
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
}
.recog__meta {
  font-family: var(--font-display); font-weight: 400; font-stretch: 110%;
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.recog__name {
  display: block; grid-column: 1; grid-row: 2; margin-top: 0.55rem; max-width: 34em;
  font-family: var(--font-display); font-weight: 600; font-stretch: 112%;
  font-size: clamp(1.15rem, 1.6vw, 1.6rem); line-height: 1.2; letter-spacing: -0.01em;
  transition: transform 0.5s var(--ease);
}
.recog__name--quote {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.2rem, 1.7vw, 1.7rem); line-height: 1.3;
  text-wrap: pretty; letter-spacing: 0;
}
.recog__icon {
  grid-column: 2; grid-row: 1 / 3; justify-self: end;
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--line-strong); border-radius: 50%;
  font-family: var(--font-display); font-size: 1.05rem; color: var(--ink);
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.recog__icon > span { transition: transform 0.35s var(--ease); }
.recog__row::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.recog__row:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.recog__row:focus-visible::before { transform: scaleX(1); }
.recog__row:focus-visible .recog__name { transform: translateX(8px); }
.recog__row:focus-visible .recog__icon {
  background: var(--accent); border-color: var(--accent); color: var(--paper);
}
.recog__row:focus-visible .recog__icon > span { transform: translate(2px, -2px); }
@media (hover: hover) and (pointer: fine) {
  .recog__row:hover::before { transform: scaleX(1); }
  .recog__row:hover .recog__name { transform: translateX(8px); }
  .recog__row:hover .recog__icon {
    background: var(--accent); border-color: var(--accent); color: var(--paper);
  }
  .recog__row:hover .recog__icon > span { transform: translate(2px, -2px); }
}
@media (max-width: 1024px) {
  .recog { grid-template-columns: minmax(0, 1fr); row-gap: 1.6rem; }
}
@media (max-width: 700px) {
  .recog__icon { width: 38px; height: 38px; }
}

/* ---------- Experience ---------- */
.xp { border-top: 1px solid var(--line); }
.xp__row {
  display: grid; grid-template-columns: minmax(180px, 300px) 1fr;
  gap: 2rem;
  padding: clamp(1.8rem, 4vh, 2.8rem) var(--pad);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.xp__row:hover { background: var(--ink); color: var(--paper); }
.xp__time {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.1rem, 2vw, 1.6rem); letter-spacing: -0.01em;
}
.xp__body h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 2.1rem); line-height: 1.15;
  letter-spacing: -0.015em; margin-bottom: 0.5rem;
}
.xp__body p { max-width: 640px; font-size: 0.95rem; color: var(--ink-soft); transition: color 0.4s; }
.xp__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem;
  margin: 0.75rem 0; font-size: 0.875rem; line-height: 1.4;
}
.xp__badge {
  display: inline-flex; align-items: center;
  padding: 0.2rem 0.65rem; border: 1px solid currentColor; border-radius: 999px;
  font-size: 0.75rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.04em;
}
.xp__row:hover .xp__body p { color: rgba(241, 239, 233, 0.7); }

/* ---------- Contact ---------- */
/* Cả trang là nền kem, riêng khối cuối đảo sang nền mực: đó là dấu chấm hết
   của trang, và là cách đẩy phần liên hệ lên thành điểm nhấn thay vì
   để nó trôi lẫn với các section phía trên. */
.contact {
  background: var(--ink); color: var(--paper);
  --hair: rgba(241, 239, 233, 0.18);
}

/* Nhãn mở đầu phần liên hệ. */
.contact__rail {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem 2rem; flex-wrap: wrap;
  padding-bottom: clamp(1.8rem, 5vh, 3rem);
  border-bottom: 1px solid var(--hair);
}
.contact .eyebrow { margin-bottom: 0; color: rgba(241, 239, 233, 0.5); }

.contact__big {
  margin: clamp(2.6rem, 8vh, 5.5rem) 0 clamp(2.2rem, 6vh, 3.8rem);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.7rem, 8.6vw, 8.4rem);
  line-height: 0.98; letter-spacing: -0.03em;
}
.contact__line { display: block; }
/* Dấu tiếng Việt chồng cao, để 0.98 thì hai dòng chạm nhau: nới ra một chút
   khi đang đọc bản tiếng Việt, bản tiếng Anh giữ nguyên thế đặc. */
html[lang="vi"] .contact__big { line-height: 1.06; }
/* Dòng serif nghiêng đỏ: lặp đúng thủ pháp của dòng "Sell it." trên hero,
   để mở và đóng trang bằng cùng một giọng. */
.contact__line--serif {
  font-family: var(--font-serif); font-style: italic;
  font-weight: 400; font-stretch: 100%;
  letter-spacing: -0.01em; color: var(--accent);
}
/* Chữ nghiêng thò ra khỏi hộp chữ: nới mask theo chiều ngang,
   không thì chân chữ cuối mỗi từ bị xén khi chữ trồi lên. */
.contact__line--serif .w {
  padding-right: 0.1em; margin-right: -0.1em;
  padding-bottom: 0.18em; margin-bottom: -0.18em;
}

.contact__cta {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 0.8rem clamp(1.5rem, 4vw, 3.5rem);
}
/* Để inline-block chứ không flex: mũi tên khi đó là chữ nằm trên cùng đường
   chân với địa chỉ mail, không phải một ô riêng phải căn lại bằng tay. */
.contact__mail {
  display: inline-block; max-width: 100%;
  font-family: var(--font-display); font-weight: 500; font-stretch: 116%;
  font-size: clamp(1.25rem, 3.9vw, 3.4rem);
  letter-spacing: -0.02em; line-height: 1.25;
  padding-bottom: 0.1em;
  border-bottom: 2px solid rgba(241, 239, 233, 0.32);
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.contact__mail:hover { color: var(--accent); border-color: var(--accent); }
.contact__mail .btn__arrow { display: inline-block; margin-left: 0.24em; }
/* Hover: dòng chữ trượt lên, bản sao nằm dưới trượt vào thay chỗ. */
.swap { display: inline-block; overflow: hidden; vertical-align: bottom; }
.swap__in {
  display: inline-block; position: relative;
  transition: transform 0.55s var(--ease);
}
.swap__in::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 100%;
}
.contact__mail:hover .swap__in { transform: translateY(-100%); }
.contact__note {
  font-size: 0.9rem; line-height: 1.6;
  color: rgba(241, 239, 233, 0.55); max-width: 22em;
}

/* Bảng thông tin cuối: mỗi ô một nhãn viết hoa và một dòng nội dung,
   ngăn nhau bằng chỉ kẻ mảnh. */
.contact__meta {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(3rem, 9vh, 6rem);
  border-top: 1px solid var(--hair);
}
.contact__cell {
  display: flex; flex-direction: column; gap: 0.6rem;
  /* Đệm đều hai bên và đủ rộng: đệm hẹp thì chữ của ô sau dính sát vào chỉ kẻ
     dọc của ô trước. Ô đầu và ô cuối bỏ đệm ngoài để thẳng lề với cả trang. */
  padding: clamp(1.5rem, 3.4vh, 2.2rem) clamp(1.8rem, 3vw, 3.4rem);
  border-right: 1px solid var(--hair);
}
.contact__cell:first-child { padding-left: 0; }
.contact__cell:last-child { border-right: 0; padding-right: 0; }
.contact__k {
  font-family: var(--font-display); font-weight: 500; font-stretch: 110%;
  font-size: 0.72rem; letter-spacing: 0.17em; text-transform: uppercase;
  color: rgba(241, 239, 233, 0.45);
}
.contact__v { font-size: 0.95rem; line-height: 1.5; }
.contact__v em {
  font-style: normal; color: rgba(241, 239, 233, 0.45);
  font-variant-numeric: tabular-nums;
}
.contact__v .btn__arrow { display: inline-block; }
.contact__cell a.contact__v { transition: color 0.35s var(--ease); }
.contact__cell a.contact__v:hover { color: var(--accent); }

/* ---------- Footer ---------- */
.footer {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding: 1.8rem var(--pad) calc(var(--mark-size) * 1.35);
  border-top: 1px solid var(--line);
  font-size: 0.85rem; color: var(--ink-soft);
}
/* Có ngăn kéo thì wordmark rời khỏi footer, trả đáy trang về đúng
   một dòng chân trang. */
.has-markpull .footer { padding-bottom: clamp(2.4rem, 7vh, 4.5rem); }
.footer__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}

/* Wordmark khổng lồ cuối trang.
   AS Module 2 có trục biến thiên DENS: 50 = chữ đọc được, 0/100 = chữ vỡ
   thành các sọc ngang. Để mặc định 0 nên nó là một mảng texture, không phải chữ.
   Cố ý để tĩnh: đổi DENS theo scroll bắt trình duyệt raster lại toàn bộ chữ
   mỗi khung hình và làm khựng cả trang ở đoạn cuối. */
.footer__mark {
  position: absolute;
  left: 50%; bottom: calc(var(--mark-size) * 0.06);
  transform: translateX(-50.5%);
  font-family: "Module2", var(--font-display);
  font-variation-settings: "DENS" var(--mark-dens);
  font-weight: 400; font-stretch: 100%;
  font-size: var(--mark-size);
  line-height: 1; letter-spacing: 0;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none; user-select: none;
  /* Glyph của font này cực nhiều đường viền, vẽ lại ở cỡ ~240px rất nặng.
     Đẩy sang lớp compositor riêng để chỉ raster một lần rồi trượt theo trang. */
  will-change: transform;
  backface-visibility: hidden;
}

/* ---------- Wordmark nằm dưới đáy trang ---------- */
/* Đúng kiểu nảy quá đáy của macOS: wordmark nằm SẴN dưới cùng, cố định, và
   khi cuộn quá đáy thì cả trang bị đẩy lên để hở nó ra. Nó không bao giờ
   trồi lên đè lên giao diện, vì nó nằm ở lớp dưới trang chứ không phải lớp
   trên. Buông tay, trang tụt về chỗ cũ và đậy nó lại. (script.js, markPull) */
.markpull {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 0;
  height: calc(var(--mark-size) * 1.31);
  background: var(--paper);
  overflow: clip;
  pointer-events: none;
  /* Lớp compositor riêng: vỏ trang trượt qua bên trên không bắt vùng này vẽ lại. */
  transform: translateZ(0);
}
/* Vỏ trang: main và footer gộp vào một khối đục, đây chính là tấm đậy.
   Có nền riêng chứ không ăn nền của body, không thì wordmark ở dưới lộ ra hết. */
.pageshell {
  position: relative; z-index: 1;
  background: var(--paper);
}
.has-markpull .footer__mark { bottom: calc(var(--mark-size) * 0.05); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 260;
  right: auto; width: 100vw;
  background: rgba(14, 14, 12, 0.94);
  display: flex; align-items: center; justify-content: center;
  padding: 4vmin;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox.is-tall { align-items: flex-start; overflow-y: auto; }
.lightbox.is-tall img { max-height: none; width: min(100%, 1080px); height: auto; }
.lightbox__close {
  position: absolute; top: 20px; right: 28px;
  background: none; border: 0; color: #fff;
  font-size: 2.6rem; line-height: 1; cursor: pointer;
}

@media (max-width: 700px) {
  .lightbox.is-wide {
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior: contain;
  }
  .lightbox.is-wide img {
    flex: 0 0 auto; height: 70svh; width: auto;
    max-width: none; max-height: none;
  }
  .lightbox.is-wide .lightbox__close { position: fixed; }
}

/* ---------- Archivo: độ giãn cho chữ display ---------- */
.loader__count, .hero__title, .menu__link,
.section-head__title, .case__title, .contact__big, .marquee__track span {
  font-stretch: 125%;
  font-weight: 700;
}
.manifesto__text { font-stretch: 122%; font-weight: 600; }
.case__metrics b, .xp__time, .xp__body h3, .contact__mail { font-stretch: 116%; }
.btn, .loader__name, .lb, .case__index, .cursor__label { font-stretch: 110%; }

/* Chữ tiếng Việt có dấu chồng cao hơn cap height (ể, ố, Ổ...):
   nới mask để không cắt dấu khi reveal. Thiếu phần nới này,
   dấu hỏi bị xén phần cong, nhìn thành dấu sắc. */
.hline,
[data-split] .w { padding-top: 0.18em; margin-top: -0.18em; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .case__body { grid-template-columns: 1fr; }
  .case__metrics { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(1rem, 4vw, 1.6rem); }
  .case__metrics div:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .about__grid { grid-template-columns: 1fr; }
  .about__media { position: static; max-width: 420px; }
  .about__badge { right: -8px; }
  .xp__row { grid-template-columns: 1fr; gap: 0.6rem; }
  .case__gallery { grid-template-columns: 1fr; }
  .tablets__grid { grid-template-columns: 1fr; }
  .tablet--wide { width: 100%; }

  /* Index: giấu cột phụ, giữ số + tên + năm */
  .index a { grid-template-columns: 2.4em minmax(0, 1fr) auto; }
  .index__role, .index__fact { display: none; }

  /* Gallery ngang: mobile trượt tay, không pin */
  .hscroll { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-block: 2.4rem; }
  .hscroll__track { padding-bottom: 1rem; }
  .hshot { width: 84vw; scroll-snap-align: center; }
  .hshot img { height: auto; width: 100%; max-width: none; }
  .phones { flex-wrap: wrap; }
  .phone { width: clamp(130px, 42vw, 220px); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hline, .hline__mask { overflow: visible; }
  html.js [data-reveal],
  html.js .hline__inner,
  html.js [data-split] .w-in { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
  .loader { display: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* =========================================================
   V2 · Trang chủ ngắn lại, case study tách ra trang riêng.
   Trang chủ giữ vai trò mục lục có hình; mỗi dự án một URL.
   ========================================================= */

/* ---------- V9 · Catalog dự án: xem nhanh, mở case khi cần ---------- */
.pcat {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1rem, 1.6vw, 1.5rem); row-gap: clamp(2rem, 4.5vh, 3rem);
  margin: 0 var(--pad) clamp(2rem, 6vh, 4rem);
  border-top: 1px solid var(--line-strong);
  padding-top: clamp(1.6rem, 3.5vh, 2.4rem);
}
.ptile { display: block; min-width: 0; }
.ptile__frame {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--tile-bg);
}
.ptile__frame > img {
  position: absolute; left: 8%; top: 10%; width: 84%; height: 90%;
  object-fit: cover; object-position: top center;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.35);
  transform-origin: top center; transition: transform 0.8s var(--ease);
}
.ptile--dark .ptile__frame > img {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 18px 40px -12px rgba(0, 0, 0, 0.35);
}
/* Neo ảnh máy theo chiều cao để giữ trọn mép trên và hai cạnh. */
.ptile--phone .ptile__frame > img {
  left: 50%; top: 9%; width: auto; height: 125%; max-width: none;
  translate: -50% 0; object-fit: contain; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 16px 30px rgba(14, 14, 12, 0.22));
}
.ptile__info {
  position: absolute; inset: 0;
  background: rgba(14, 14, 12, 0.92); color: var(--paper);
  clip-path: inset(100% 0 0 0); transition: clip-path 0.55s var(--ease);
}
.ptile__content {
  display: flex; flex-direction: column; justify-content: space-between;
  height: 100%; padding: clamp(1rem, 1.6vw, 1.5rem);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.55s var(--ease) 0.08s, transform 0.55s var(--ease) 0.08s;
}
.ptile__hook {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
  flex-shrink: 0; font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.05vw, 1rem); line-height: 1.5;
}
.ptile__bottom { display: block; }
.ptile__metrics {
  display: flex; flex-wrap: wrap; gap: 0.3rem clamp(1rem, 1.6vw, 1.6rem);
  border-top: 1px solid rgba(241, 239, 233, 0.22); padding-top: 0.8rem;
}
/* Chia đều chỗ cho số liệu để bản dịch dài không đẩy hàng ra khỏi khung. */
.ptile__metric { display: block; flex: 1 1 0; min-width: 0; }
.ptile__metric b {
  display: block; font-family: var(--font-display); font-weight: 600; font-stretch: 116%;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.05;
}
.ptile__metric i {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  margin-top: 0.25rem; max-width: 14ch;
  font-style: normal; font-size: 0.72rem; line-height: 1.3; color: rgba(241, 239, 233, 0.6);
}
.ptile__cta {
  display: inline-flex; align-items: center; gap: 0.5em;
  margin-top: 0.9rem; padding-bottom: 3px; border-bottom: 1.5px solid currentColor;
  font-family: var(--font-display); font-weight: 500; font-stretch: 110%;
  font-size: 0.85rem; color: var(--accent);
}
.ptile__frame::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left center;
  transition: transform 0.6s var(--ease);
}
.ptile__caption {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 0.75rem; align-items: baseline; margin-top: 0.9rem; color: var(--ink);
}
.ptile__no {
  font-family: var(--font-display); font-weight: 600; font-stretch: 112%;
  font-size: 0.9rem; font-variant-numeric: tabular-nums; color: var(--accent);
}
.ptile__name {
  font-family: var(--font-display); font-weight: 700; font-stretch: 116%;
  font-size: clamp(1.2rem, 1.75vw, 1.65rem); line-height: 1.08; letter-spacing: -0.02em;
}
.ptile__time {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ptile__role {
  grid-column: 2 / 4; min-width: 0; margin-top: 0.35rem;
  font-size: 0.85rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ptile:focus-visible .ptile__info { clip-path: inset(0); }
.ptile:focus-visible .ptile__content { opacity: 1; transform: translateY(0); }
.ptile:focus-visible .ptile__frame > img { transform: scale(1.035); }
.ptile:focus-visible .ptile__frame::after { transform: scaleX(1); }
.ptile:focus-visible .ptile__cta .btn__arrow { transform: translate(3px, -3px); }
@media (hover: hover) and (pointer: fine) {
  .ptile:hover .ptile__info { clip-path: inset(0); }
  .ptile:hover .ptile__content { opacity: 1; transform: translateY(0); }
  .ptile:hover .ptile__frame > img { transform: scale(1.035); }
  .ptile:hover .ptile__frame::after { transform: scaleX(1); }
  .ptile:hover .ptile__cta .btn__arrow { transform: translate(3px, -3px); }
}
@media (min-width: 1025px) and (max-width: 1279px) {
  .ptile__hook { -webkit-line-clamp: 3; }
}
@media (max-width: 1024px) {
  .pcat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .pcat { column-gap: 12px; row-gap: 1.6rem; }
  .ptile__caption { grid-template-columns: auto minmax(0, 1fr); row-gap: 0.45rem; }
  .ptile__no, .ptile__time { font-size: 0.68rem; text-transform: uppercase; }
  .ptile__time { grid-column: 2; grid-row: 1; justify-self: end; }
  .ptile__name { grid-column: 1 / 3; grid-row: 2; font-size: 1rem; }
  .ptile__role { display: none; }
}


/* ---------- Trang case: breadcrumb ---------- */
.crumb {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: calc(var(--pad) + 56px) var(--pad) clamp(1.4rem, 3.5vh, 2.4rem);
  font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
}
/* Nút quay lại dạng viên thuốc, chữ đậm màu mực: chữ xám trơn trước đây
   nhìn như dòng chú thích, người ta không nhận ra là bấm được. */
.crumb__back {
  display: inline-flex; align-items: center; gap: 0.65em;
  padding: 0.72em 1.2em 0.72em 1em;
  border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--ink); font-weight: 500; letter-spacing: 0.12em;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.crumb__back:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.crumb__back:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.crumb__arrow { display: inline-block; transition: transform 0.35s var(--ease); }
.crumb__back:hover .crumb__arrow { transform: translateX(-5px); }
.crumb__no { font-variant-numeric: tabular-nums; }

/* Trang case không cần khoảng thở cuối bài lớn như khi 5 case nối nhau */
.casepage .case { margin-bottom: clamp(3rem, 8vh, 5.5rem); }

/* ---------- Trang case: nhảy sang dự án khác ---------- */
.casenav {
  display: grid; grid-template-columns: 1fr 1fr;
  margin: 0 var(--pad);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.casenav__item {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: clamp(1.8rem, 4.5vh, 3rem) clamp(0.6rem, 1.5vw, 1.4rem);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.casenav__item + .casenav__item { border-left: 1px solid var(--line); }
.casenav__item--next { align-items: flex-end; text-align: right; }
.casenav__item:hover { background: var(--ink); color: var(--paper); }
.casenav__label {
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); transition: color 0.4s;
}
.casenav__item:hover .casenav__label { color: rgba(241, 239, 233, 0.6); }
.casenav__name {
  font-family: var(--font-display); font-weight: 600; font-stretch: 116%;
  font-size: clamp(1.35rem, 2.8vw, 2.4rem);
  line-height: 1.1; letter-spacing: -0.02em;
}

/* ---------- Trang case: chốt bằng lời mời liên hệ ---------- */
.cta-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(3.5rem, 9vh, 6rem) var(--pad) clamp(4.5rem, 11vh, 7.5rem);
}
.cta-strip__text {
  font-family: var(--font-display); font-weight: 600; font-stretch: 116%;
  font-size: clamp(1.5rem, 3.4vw, 3rem);
  line-height: 1.1; letter-spacing: -0.02em;
  max-width: 16em;
}
.cta-strip__actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }

/* ---------- Nhịp dọc: siết lại cho trang chủ ngắn hơn ---------- */
.section-head { padding: clamp(4.5rem, 11vh, 8rem) var(--pad) clamp(2.4rem, 6vh, 4rem); }
.manifesto { padding: clamp(4.5rem, 12vh, 8.5rem) var(--pad); }
.manifesto__press { margin-top: 2.2rem; }
.contact { padding: clamp(4.5rem, 12vh, 8rem) var(--pad) clamp(4rem, 10vh, 6.5rem); }
.about__lede { margin-bottom: clamp(1.8rem, 4vh, 3rem); }
.beat { padding: clamp(1.2rem, 2.6vh, 1.7rem) 0; }

/* ---------- Responsive V2 ---------- */
@media (max-width: 860px) {

  .crumb { padding-top: calc(var(--pad) + 46px); }
  .crumb__no { display: none; }
}

@media (max-width: 980px) {
  .contact__meta { grid-template-columns: repeat(2, 1fr); }
  .contact__cell:nth-child(2n + 1) { padding-left: 0; }
  .contact__cell:nth-child(2n) { border-right: 0; padding-right: 0; }
  .contact__cell:nth-child(n + 3) { border-top: 1px solid var(--hair); }
}

@media (max-width: 560px) {
  .contact__meta { grid-template-columns: 1fr; }
  .contact__cell { border-right: 0; padding-left: 0; padding-right: 0; }
  .contact__cell + .contact__cell { border-top: 1px solid var(--hair); }
  .contact__cell:nth-child(n + 3) { border-top: 1px solid var(--hair); }
  .contact__rail { gap: 1rem; }
}

@media (max-width: 620px) {
  .casenav { grid-template-columns: 1fr; }
  .casenav__item + .casenav__item { border-left: 0; border-top: 1px solid var(--line); }
  .casenav__item--next { align-items: flex-start; text-align: left; }
  .cta-strip { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   V3 · Khối báo chí kiểu trích dẫn + overlay xem dự án.
   ========================================================= */

/* ---------- Overlay xem dự án ---------- */
/* Mở đè lên trang chủ, đóng lại là về đúng chỗ đang đứng,
   không nhảy ngược lên hero như khi điều hướng sang trang khác. */
.cs {
  position: fixed; inset: 0; z-index: 240;
  /* Rộng đúng cả cửa sổ kể cả chỗ thanh cuộn: lúc đóng, thanh cuộn của trang
     hiện lại mà overlay không bị hẹp đi, chữ bên trong không giật sang trái. */
  right: auto; width: 100vw;
  display: flex; flex-direction: column;
  background: var(--paper);
  opacity: 0; pointer-events: none;
  transform: translateY(18px);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
  /* Lớp riêng, vẽ sẵn cả lúc còn trong suốt: nội dung dựng xong trước khi
     hiện, nên lúc hiện chỉ còn việc đổi độ mờ, không phải vẽ lại cả bài. */
  will-change: opacity, transform;
}
.cs.is-open { opacity: 1; pointer-events: auto; transform: none; }

.cs__bar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(12px, 1.8vw, 18px) var(--pad);
  border-bottom: 1px solid var(--line);
}
.cs__label {
  flex: 1;
  display: flex; align-items: baseline; gap: 0.8em; min-width: 0;
  font-family: var(--font-display); font-weight: 600; font-stretch: 116%;
  font-size: clamp(1rem, 1.7vw, 1.4rem); letter-spacing: -0.015em;
}
.cs__bar .lang { flex-shrink: 0; }
@media (max-width: 700px) {
  .cs__bar { flex-wrap: wrap; gap: 0.6rem; }
  .cs__label { flex-basis: 100%; }
}
.cs__label span {
  font-family: var(--font-body); font-weight: 400; font-stretch: 100%;
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.cs__close {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.7em 1.3em;
  background: none; border: 1px solid var(--ink); border-radius: 999px;
  color: inherit; cursor: pointer;
  font-family: var(--font-display); font-weight: 500; font-stretch: 110%;
  font-size: 0.85rem; line-height: 1;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.cs__close:hover { background: var(--ink); color: var(--paper); }
/* Back: cùng dáng nút Close, nằm đầu thanh bên trái */
.cs__back {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.7em 1.2em;
  background: none; border: 1px solid var(--ink); border-radius: 999px;
  color: inherit; cursor: pointer;
  font-family: var(--font-display); font-weight: 500; font-stretch: 110%;
  font-size: 0.85rem; line-height: 1;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.cs__back:hover { background: var(--ink); color: var(--paper); }
.cs__arrow { display: inline-block; transition: transform 0.35s var(--ease); }
.cs__back:hover .cs__arrow { transform: translateX(-4px); }
.cs__back:focus-visible, .cs__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 700px) {
  /* Hàng trên: Back | EN/VI Close. Tên dự án xuống hàng dưới. */
  .cs__label { order: 5; }
  .cs__bar .lang { margin-left: auto; }
}

.cs__scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  overflow-anchor: none;
  transition-property: none;
}

/* Chuyển dự án ngay trong overlay: bài cũ mờ đi, bài mới hiện dần lên */
.cs__page { transition: opacity 0.35s var(--ease); }
.cs__scroll.is-swapping .cs__page { opacity: 0; transition-duration: 0.2s; }

.cs__loading {
  display: flex; align-items: center; justify-content: center;
  min-height: 50vh;
  font-family: var(--font-display); font-weight: 500;
  font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* Nội dung nạp vào overlay hiện luôn: animation theo scroll của trang
   không áp được cho vùng cuộn riêng, mà chờ hiệu ứng ở đây cũng không để làm gì. */
.cs [data-reveal] { opacity: 1 !important; transform: none !important; }
.cs [data-split] .w,
.cs [data-split] .w-in { transform: none !important; overflow: visible; }
.cs .case { margin-bottom: 0; }
.cs .case__lead { padding-top: clamp(2rem, 5vh, 3.2rem); }
.cs .case__hero { height: min(78vh, 620px); }
.cs .case__metrics { position: static; }
.cs .about__media { position: static; }

/* Gallery ngang trong overlay: trượt tay, không ghim màn hình */
.cs .hscroll {
  overflow-x: auto; min-height: 0; display: block;
  scroll-snap-type: x mandatory;
  padding-block: clamp(2rem, 5vh, 3.4rem);
}
.cs .hscroll__track { transform: none !important; }
.cs .hshot { scroll-snap-align: center; }

/* Static/reduced motion: every screenshot remains reachable without a pin. */
.no-motion .hscroll { display: block; min-height: 0; overflow: hidden; padding-block: 2.4rem; }
.no-motion .hscroll__track {
  width: 100%; flex-direction: column; transform: none !important;
  will-change: auto;
}
.no-motion .hshot { max-width: 100%; }
.no-motion .hshot img { width: auto; height: auto; max-width: 100%; max-height: 60svh; }

.tablets__lede + .btn { margin-top: 1.5rem; }

/* Điều hướng sang dự án khác ngay trong overlay */
.cs .casenav { margin-bottom: 0; border-bottom: 0; }

@media (max-width: 860px) {
  .cs .case__hero { height: min(62vh, 460px); }
  .cs__label span { display: none; }
}

/* Hero case trong overlay không có parallax chạy nền: trả ảnh về đúng khung */
.cs .case__hero-media img { height: 100%; transform: none !important; }
.cs .case__hero-text { transform: none !important; }
.cs .phone img { transform: none !important; }

/* Chân overlay: chừa khoảng thở dưới nút chuyển dự án */
.cs__scroll { padding-bottom: calc(clamp(2rem, 5vh, 3.5rem) + var(--cs-language-space, 0px)); }

/* ---------- Nút đổi ngôn ngữ ---------- */
.nav__right { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); }
.lang {
  display: inline-flex; align-items: center; gap: 0.28em;
  padding: 0.5em 0.2em;
  background: none; border: 0; color: inherit; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-stretch: 110%;
  font-size: 0.82rem; letter-spacing: 0.12em; line-height: 1;
}
.lang__opt { opacity: 0.4; transition: opacity 0.3s var(--ease); }
.lang__opt.is-on { opacity: 1; }
.lang:hover .lang__opt { opacity: 0.75; }
.lang:hover .lang__opt.is-on { opacity: 1; }
.lang__sep { opacity: 0.35; }

/* Nút sang bản mới (bản gọn ở trang chủ letuananh.me) */
.nav__alt {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.62em 1em; border: 1px solid currentColor; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-stretch: 110%;
  font-size: 0.72rem; letter-spacing: 0.12em; line-height: 1; text-transform: uppercase;
  white-space: nowrap; transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.nav__alt::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.nav__alt:hover { color: #0e0e0c; background: #f1efe9; }
@media (max-width: 560px) { .nav__alt { font-size: 0.64rem; padding: 0.55em 0.8em; } .nav__alt::before { display: none; } }

/* =========================================================
   Prototype chạy thật + toàn cảnh file thiết kế (case Công thức Toán)
   Khối proto nằm trên nền giấy, khối wires nền mực: nhịp sáng tối
   xen kẽ để tấm ảnh canvas màu xám sáng nổi lên như một slide.
   ========================================================= */

.proto { padding-bottom: clamp(3.5rem, 9vh, 7rem); }
.proto__stage {
  display: grid;
  grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  max-width: 1500px; margin: 0 auto;
}

/* Prototype là app điện thoại, nên khung phải là máy chứ không phải cửa sổ:
   iframe đặt đúng tỉ lệ màn hình để bản dựng lấp trọn, không thừa viền hai bên. */
.proto__device { justify-self: center; width: 100%; max-width: 360px; }
.proto__phone {
  padding: clamp(8px, 1vw, 12px);
  border-radius: clamp(30px, 3.6vw, 46px);
  background: linear-gradient(158deg, #43464c, #1a1b1e 44%, #0a0a0b);
  border: 1px solid rgba(14, 14, 12, 0.12);
  box-shadow: 0 50px 92px -46px rgba(14, 14, 12, 0.7);
}
.proto__view {
  /* Khai bao dung kich thuoc frame trong Figma: khung may lay ti le tu day nen
     app luon khop ca hai chieu. Sai ti le thi bu doc se ho ngang va nguoc lai. */
  --frame-w: 375;
  --frame-h: 812;
  position: relative;
  aspect-ratio: var(--frame-w) / var(--frame-h);
  overflow: hidden;
  border-radius: clamp(22px, 2.7vw, 35px);
  background: var(--paper);
  --bleed: 1.31;
}
/* Figma chua mot vien trong co dinh quanh frame. Cho iframe tran ra dung bang
   vien do roi cat bang overflow, de app lap khung may ma khong an mat status bar.
   Chinh --bleed neu can: cao hon thi app to them, thap hon thi ho vien ra. */
.proto__view iframe {
  position: absolute; top: 50%; left: 50%;
  width: calc(100% * var(--bleed));
  height: calc(100% * var(--bleed));
  transform: translate(-50%, -50%);
  border: 0; display: block;
}
.proto__bar {
  display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  margin-top: 1.1rem;
  font-family: var(--font-display); font-weight: 500;
  font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-soft);
}
.proto__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}

.proto__guide-label {
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 1.1rem;
}
.proto__guide-label i { font-style: normal; color: var(--accent); margin-right: 0.5em; }
.proto__try { list-style: none; border-top: 1px solid var(--line); }
.proto__try li {
  display: grid; grid-template-columns: 2.2em 1fr; gap: 0.6rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem; line-height: 1.65;
}
.proto__try b {
  font-family: var(--font-display); font-weight: 600; font-stretch: 110%;
  font-size: 0.8rem; letter-spacing: 0.08em; color: var(--accent);
  padding-top: 0.25em;
}
.proto__guide { max-width: 44em; }
.proto__actions { margin-top: 1.7rem; }
.proto__actions .btn { font-size: 0.92rem; padding: 0.85em 1.6em; }
.proto__note { margin-top: 1rem; font-size: 0.8rem; line-height: 1.6; color: var(--ink-soft); }

/* Case entry: keep the clickable product and its context together, before the gallery. */
.proto--intro { padding-top: 0; }
.proto--intro .proto__stage {
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  grid-template-areas: "device intro" "device guide";
  grid-template-rows: auto 1fr;
  align-items: start;
  row-gap: 1.5rem;
}
.proto__intro { grid-area: intro; min-width: 0; }
.proto--intro .proto__device {
  grid-area: device;
  max-width: clamp(240px, calc((100svh - 250px) * 0.462), 320px);
}
.proto--intro .proto__guide { grid-area: guide; min-width: 0; }
.proto--intro .proto__title {
  font-size: clamp(2.5rem, 4.6vw, 4.5rem);
  line-height: 1.04;
  margin-bottom: 1rem;
}
.proto--intro .case__kicker { font-size: 0.875rem; letter-spacing: 0.08em; }
.proto--intro .proto__guide-label { font-size: 0.875rem; }
.proto--intro .proto__try li { font-size: 1rem; padding-block: 0.75rem; }
.proto--intro .proto__bar { font-size: 0.75rem; letter-spacing: 0.08em; }
.proto--intro .proto__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.proto--intro .proto__note { font-size: 0.875rem; }
#design-decisions { scroll-margin-top: 100px; }
.cs .proto--intro { padding-top: 2rem; }

@media (max-width: 860px) {
  .proto--intro .proto__stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "device" "guide";
    row-gap: 1.75rem;
  }
  .proto--intro .proto__device { max-width: 300px; }
  .proto--intro .case__kicker { margin-bottom: 0.75rem; }
}

/* Toàn cảnh canvas: ảnh nền sáng nên viền và bóng phải đủ đậm để không trôi */
.wires__map { max-width: 1500px; margin: 0 auto; cursor: zoom-in; }
.wires__view {
  overflow: hidden;
  border: 1px solid rgba(241, 239, 233, 0.16);
  border-radius: clamp(8px, 1vw, 14px);
  box-shadow: 0 42px 80px -40px rgba(0, 0, 0, 0.92);
}
.wires__view img { width: 100%; height: auto; }
.wires__map figcaption {
  margin-top: 1rem; font-size: 0.85rem; line-height: 1.6;
  color: rgba(241, 239, 233, 0.6);
}
.wires__legend {
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: 1500px; margin: clamp(2.4rem, 5.5vh, 3.8rem) auto 0;
  border-top: 1px solid rgba(241, 239, 233, 0.2);
}
.wires__legend li {
  padding: 1.5rem clamp(1rem, 2vw, 2rem) 0.4rem 0;
  border-right: 1px solid rgba(241, 239, 233, 0.14);
}
.wires__legend li:last-child { border-right: 0; }
.wires__legend b {
  display: block; margin-bottom: 0.55rem;
  font-family: var(--font-display); font-weight: 600; font-stretch: 110%;
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper);
}
.wires__legend span { font-size: 0.9rem; line-height: 1.65; color: rgba(241, 239, 233, 0.62); }

@media (max-width: 1024px) {
  .wires__legend { grid-template-columns: repeat(2, 1fr); }
  .wires__legend li:nth-child(2n) { border-right: 0; }
  .wires__legend li:nth-child(-n+2) { padding-bottom: 1.5rem; border-bottom: 1px solid rgba(241, 239, 233, 0.14); }
}

@media (max-width: 860px) {
  .proto__stage { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 3rem); }
  .proto__device { max-width: 320px; }
}

@media (max-width: 560px) {
  .wires__legend { grid-template-columns: 1fr; }
  .wires__legend li { border-right: 0; padding-right: 0; padding-bottom: 1.4rem; border-bottom: 1px solid rgba(241, 239, 233, 0.14); }
  .wires__legend li:last-child { border-bottom: 0; }
}

/* Dau nang cua tieng Viet tut xuong duoi duong chan chu, mask reveal cat mat
   (được → đươc). Mask chi can ton tai trong luc chu truot len, nen tra lai
   tam nhin day du ngay khi dong chu vao cho, va khi khong co animation. */
html:not(.js) .hline,
html:not(.js) .hline__mask,
.hero__title.is-done .hline,
.hero__title.is-done .hline__mask { overflow: visible; }

/* =========================================================
   V5 · Siết hiệu năng + thêm vài nhịp thị giác.
   Nguyên tắc: mọi thứ thêm vào đây phải chạy trên compositor
   (transform, opacity, color) hoặc do CSS tự lo, không đẻ
   thêm một vòng lặp JS nào nữa.
   ========================================================= */

/* ---------- Vạch tiến độ đọc ---------- */
/* Chạy bằng scroll-driven animation: trình duyệt tự nội suy theo vị trí cuộn,
   không có listener, không có khung hình nào tốn thêm. Trình duyệt chưa hỗ trợ
   thì vạch nằm im ở scaleX(0), tức là không nhìn thấy gì. */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 130; pointer-events: none;
  background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%;
}
@supports (animation-timeline: scroll()) {
  .progress {
    animation: progressGrow linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes progressGrow { to { transform: scaleX(1); } }

/* ---------- Marquee hai dòng ngược chiều ---------- */
/* Dòng dưới rỗng ruột và chạy ngược, nên dải băng đọc ra một khối chuyển động
   chứ không phải một dòng chữ trôi ngang cho có. Rê chuột vào thì đứng lại,
   ai muốn đọc thì đọc được. */
.marquee { display: grid; gap: 0.1em; padding: 0.9rem 0; }
.marquee__track--back {
  animation-direction: reverse;
  animation-duration: 30s;
  color: transparent;
  -webkit-text-stroke: 1px rgba(14, 14, 12, 0.42);
}
/* Dấu hoa vẫn đặc ruột, không thì nó biến thành một vệt nhòe. */
.marquee__track--back i { -webkit-text-stroke: 0; color: var(--accent); }
.marquee:hover .marquee__track { animation-play-state: paused; }

@media (max-width: 620px) {
  /* Màn hẹp chỉ đủ chỗ cho một dòng đọc ra chữ. */
  .marquee__track--back { display: none; }
}

/* ---------- Bàn phím: thấy được mình đang đứng ở đâu ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.xp__row:focus-visible { outline-offset: -4px; }

/* ---------- Dọn will-change sau khi đã dùng xong ---------- */
/* font-variation-settings không chạy trên compositor: giữ will-change sau khi
   hiệu ứng vào trang đã xong chỉ tổ bắt trình duyệt canh chừng một thứ không
   còn đổi nữa, và raster lại dòng chữ khổ lớn mỗi lần trang vẽ lại. */
.hero__title.is-done .hline__inner { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  /* Vạch tiến độ là chuyển động; tắt animation kiểu thường sẽ đẩy nó về đầy
     100% chứ không phải về 0, nên ẩn hẳn. */
  .progress { display: none; }
}

/* =========================================================
   V7 · Huy hiệu tròn ở khối "Về mình" lạc lên đầu trang.
   Dưới 860px, .about__media được đặt position: static để bỏ
   sticky, nhưng mất luôn chỗ neo. Huy hiệu là position:
   absolute nên nó neo thẳng vào khung nhìn: đậu ở góc trên
   bên phải trang, đè lên thanh nav, cách chỗ nó phải nằm hơn
   6000px, và kéo trang tràn ngang 8–21px vì hộp bao của nó
   phình ra theo vòng quay.

   Bình thường không ai thấy: GSAP gắn transform lên
   .about__media, mà transform cũng tạo chỗ neo. Lỗi chỉ lộ
   khi animation không chạy — ?static, prefers-reduced-motion,
   hoặc CDN không tải được.

   position: relative bỏ được sticky y như static, nhưng giữ
   lại chỗ neo. Kèm overflow-x: clip cho lưới để nuốt nốt
   phần góc hộp bao thò ra lúc huy hiệu quay: bốn góc đó
   trong suốt, cắt đi không mất gì để nhìn.
   ========================================================= */

@media (max-width: 860px) {
  /* top: 110px là của sticky; đổi sang relative mà quên nó thì cả khối ảnh
     bị đẩy xuống 110px và đè lên đoạn chữ bên dưới. */
  .about__media { position: relative; top: auto; }
  .about__grid { overflow-x: clip; }
}

/* =========================================================
   V8 · Nút menu tàng hình.
   .nav trộn theo kiểu difference, nên mọi thứ trong đó phải
   mang màu kem #f1efe9 thì trộn ra mới thành mực đen trên
   nền kem. Logo là thẻ <a> nên thừa hưởng màu của .nav;
   .lang đã được ghi color: inherit; riêng .nav__burger là
   thẻ <button>, mà trình duyệt mặc định cho button màu
   buttontext (đen). Đen trộn difference với nền kem ra đúng
   màu kem: hai vạch của nút menu biến mất sạch trên nền
   trang, và trên dải marquee đen thì đen trộn đen cũng mất
   nốt. Đo bằng cách lấy mẫu điểm ảnh: vùng nút đọc ra
   (230,228,223), y hệt nền quanh nó.

   Trên điện thoại đây là lối điều hướng DUY NHẤT.
   ========================================================= */

.nav__burger { color: inherit; }

/* Shared phone rows, including image and video captures. */
.case__gallery .phones { width: 100%; flex-wrap: nowrap; }
.case__gallery .phone { flex: 1 1 0; width: auto; min-width: 0; max-width: 250px; }
.case-video { display: block; width: 100%; height: auto; border-radius: clamp(8px, 1vw, 14px); }
.phone .case-video { border-radius: clamp(14px, 1.6vw, 26px); }
.shot--video, .phone--video { cursor: auto; }
.case__gallery--closeups { margin-bottom: clamp(2rem, 4.5vh, 3.2rem); }
.case__gallery--closeups { margin-top: clamp(1.4rem, 3.2vw, 3.2rem); align-items: start; }

/* One decision, start to finish: shared by all cases and the home overlay. */
.decision-story {
  max-width: 1500px; padding: 0 var(--pad) clamp(3.5rem, 9vh, 7rem);
}
.decision-story > .tablets__label { color: var(--ink-soft); }
.decision-story__rows { margin-top: clamp(2rem, 4.5vh, 3.2rem); }
.decision-story__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: clamp(1.5rem, 4vw, 4rem); padding: 1.4rem 0; border-top: 1px solid var(--line);
}
.decision-story__row:last-child { border-bottom: 1px solid var(--line); }
.decision-story__row dt { font-size: 1.05rem; font-weight: 600; line-height: 1.8; }
.decision-story__row dd { margin: 0; max-width: 720px; }
.decision-story__row p { font-size: 1.05rem; line-height: 1.8; }
@media (max-width: 600px) {
  .decision-story__row { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
}

/* mess.vn: hành trình trong app, mỗi chặng một cột chữ + dàn điện thoại */
.appflow {
  background: var(--ink); color: var(--paper);
  margin-top: clamp(3.5rem, 9vh, 7rem);
  padding: clamp(3.5rem, 9vh, 7rem) var(--pad);
}
.appflow + .decision-story { padding-top: clamp(3.5rem, 9vh, 7rem); }
.appflow__step {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
  max-width: 1500px; margin: 0 auto;
  padding: clamp(2.5rem, 6vh, 4.5rem) 0;
  border-top: 1px solid rgba(241, 239, 233, 0.14);
}
.appflow__step--flip { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.appflow__step--flip .appflow__text { order: 2; }
.appflow__text { max-width: 30em; }
.appflow__no {
  display: block; margin-bottom: 0.8rem;
  font-family: var(--font-display); font-weight: 500;
  font-size: 0.85rem; letter-spacing: 0.14em; color: var(--accent);
}
.appflow__text h5 {
  font-family: var(--font-display); font-weight: 600; font-stretch: 116%;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem); line-height: 1.1; letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.appflow__text p { font-size: 1.02rem; line-height: 1.75; color: rgba(241, 239, 233, 0.7); }
.appflow .phones { justify-content: center; }
.appflow .phone { width: clamp(150px, 19vw, 290px); }
/* Screenshot nền đen trên nền mực: viền mảnh để thấy mép máy */
.appflow .phone img { border: 1px solid rgba(241, 239, 233, 0.16); }
@media (max-width: 860px) {
  .appflow__step, .appflow__step--flip { grid-template-columns: minmax(0, 1fr); }
  .appflow__step--flip .appflow__text { order: 0; }
  /* Điện thoại hẹp: máy to đủ đọc chữ, hàng hai máy thì vuốt ngang, máy sau ló ra làm gợi ý */
  .appflow .phones {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(var(--pad) * -1); padding: 0.5rem var(--pad) 1rem;
    scrollbar-width: none;
  }
  .appflow .phones::-webkit-scrollbar { display: none; }
  .appflow .phones:has(> .phone:only-child) { justify-content: center; }
  .appflow .phone { width: min(72vw, 320px); scroll-snap-align: center; }
  .appflow .phone:nth-child(even) { margin-top: 0; }
}

/* =========================================================
   Blog · /blog
   Bài viết tiếng Việt, chặn máy tìm kiếm (meta robots + header trong
   vercel.json). Trang chủ hiện tối đa 3 bài mới nhất ở mục #writing.
   ========================================================= */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Menu có 5 mục: khóa cỡ chữ theo cả chiều cao màn hình, không thì màn
   laptop thấp bị dòng cuối đè lên dải email bên dưới. */
.menu__link { font-size: clamp(2.4rem, min(8.5vw, 10.5vh), 7.5rem); }
.menu.is-open .menu__link:nth-child(5) span { transition-delay: 0.24s; }

/* ---------- Bài viết trong danh sách: phần chữ dùng chung ---------- */
.pcard { display: block; color: var(--ink); }
.pcard__body { display: block; min-width: 0; }
.pcard__meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.9em;
  font-family: var(--font-display); font-weight: 400; font-stretch: 110%;
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.pcard__meta b { font-weight: 600; color: var(--accent); }
.pcard__title {
  display: block; margin-top: 0.6rem;
  font-family: var(--font-display); font-weight: 700; font-stretch: 118%;
  font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1.08; letter-spacing: -0.025em;
  text-wrap: balance;
  text-decoration: underline 2px transparent; text-underline-offset: 0.16em;
  transition: text-decoration-color 0.4s var(--ease);
}
.pcard__dek {
  display: block; margin-top: 0.55rem; max-width: 34em;
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.45; color: var(--ink-soft);
}
.pcard__flag {
  display: inline-flex; align-items: center; gap: 0.55em; margin-bottom: 0.9rem;
  padding: 0.45em 0.9em; border-radius: 999px; background: var(--ink); color: var(--paper);
  font-family: var(--font-display); font-weight: 500; font-stretch: 110%;
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.pcard__flag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.pcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 4px; }

/* ---------- Tem thư: ảnh bìa nhỏ của mỗi bài ----------
   Ảnh bìa (<slug>-thumb.webp, 400×500) cắt dọc quanh chủ thể của một tranh trong bài rồi
   in thành con tem: viền răng cưa khoét bằng mask, nghiêng nhẹ, rê chuột
   thì thẳng lại. Cố ý nhỏ: chữ dẫn mắt, con tem chỉ là điểm nhấn. */
.stamp {
  --r: 3.5px;
  display: block; flex: none; width: var(--stamp, 112px);
  filter: drop-shadow(0 6px 10px rgba(14, 14, 12, 0.14));
  transform: rotate(var(--tilt, 2.5deg));
  transition: transform 0.5s var(--ease);
}
.stamp__paper {
  display: block; padding: calc(2.2 * var(--r)); background: #fbf9f3;
  -webkit-mask:
    radial-gradient(var(--r), #0000 97%, #000) round calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#000 0 0) content-box;
          mask:
    radial-gradient(var(--r), #0000 97%, #000) round calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#000 0 0) content-box;
}
.stamp img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5;
  object-fit: cover; background: var(--paper-soft);
}
/* Tem của lối "Tất cả bài viết" ở đầu/cuối chuỗi: nền mực, chấm đỏ của logo */
.stamp--all .stamp__paper > i {
  display: grid; place-items: center; aspect-ratio: 4 / 5; background: var(--ink);
}
.stamp--all .stamp__paper > i::after { content: ""; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .pcard:hover .pcard__title { text-decoration-color: var(--accent); }
  .pcard:hover .stamp, .casenav__item:hover .stamp { transform: rotate(0deg); }
}

/* ---------- Trang chủ: ba tấm bưu thiếp, tem dán góc phải ---------- */
.writing { padding-bottom: clamp(4.5rem, 11vh, 8rem); }
.pcards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.6rem); margin: 0 var(--pad);
}
.ppost {
  --stamp: clamp(84px, 7vw, 112px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 2.4rem;
  min-height: clamp(300px, 36vh, 380px); padding: clamp(1.4rem, 2vw, 2.1rem);
  border: 1px solid var(--line-strong); border-radius: 6px;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.ppost__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.2rem; }
.ppost .stamp { margin: -0.4rem -0.3rem 0 0; }
.ppost:nth-child(even) .stamp { --tilt: -2deg; }
.ppost .pcard__meta { letter-spacing: 0.11em; }
.ppost .pcard__title { font-size: clamp(1.4rem, 2vw, 2rem); }
@media (hover: hover) and (pointer: fine) {
  .ppost:hover { background: rgba(14, 14, 12, 0.035); border-color: var(--ink); }
}
.writing__more { margin: clamp(1.8rem, 4vh, 2.6rem) var(--pad) 0; }
@media (max-width: 860px) {
  .pcards { grid-template-columns: minmax(0, 1fr); }
  .ppost { min-height: 0; gap: 1.6rem; --stamp: 84px; }
  .ppost .pcard__meta { font-size: 0.7rem; letter-spacing: 0.08em; }
}

/* ---------- Trang /blog: tựa bài đứng yên bên trái, danh sách bên phải ---------- */
.bcol {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 6vw, 7rem);
  padding: clamp(1rem, 4vh, 3rem) var(--pad) clamp(4.5rem, 11vh, 7.5rem);
}
.bcol__lead { position: sticky; top: 110px; align-self: start; }
.bcol__title {
  font-family: var(--font-display); font-weight: 700; font-stretch: 125%;
  font-size: clamp(2.2rem, 3.7vw, 4.4rem); line-height: 1.02; letter-spacing: -0.035em;
  text-wrap: balance;
}
.bcol__sub { margin-top: 1.6rem; max-width: 30em; font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); }
.bcol__count { margin-top: 2.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.bcol__list { border-top: 1px solid var(--line-strong); }
.bentry {
  --stamp: clamp(92px, 7.5vw, 120px);
  display: grid; grid-template-columns: var(--stamp) minmax(0, 1fr);
  gap: clamp(1.4rem, 2.8vw, 2.8rem); align-items: start;
  padding: clamp(1.7rem, 3.8vh, 2.5rem) 0; border-bottom: 1px solid var(--line);
}
.bentry:nth-child(even) .stamp { --tilt: -2deg; }
.bentry:first-child .pcard__title { font-size: clamp(1.8rem, 3vw, 3rem); font-stretch: 122%; }
@media (max-width: 900px) {
  .bcol { grid-template-columns: minmax(0, 1fr); }
  .bcol__lead { position: static; }
  .bentry { --stamp: 84px; }
}

/* ---------- Cuối bài: bài trước / bài sau dán tem nhỏ ---------- */
.postnav .casenav__item { flex-direction: row; align-items: center; gap: clamp(1.1rem, 2.2vw, 2rem); }
.postnav .casenav__item--next { flex-direction: row-reverse; }
.postnav .stamp { --stamp: clamp(64px, 6vw, 88px); }
.postnav .casenav__item--next .stamp { --tilt: -2deg; }
.postnav__text { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.postnav .casenav__item--next .postnav__text { align-items: flex-end; }
.postnav .casenav__name { font-size: clamp(1.2rem, 2.1vw, 1.9rem); text-wrap: balance; }
@media (max-width: 760px) {
  .postnav .casenav__item--next { flex-direction: row; }
  .postnav .casenav__item--next .postnav__text { align-items: flex-start; }
}

/* ---------- Bài viết ---------- */
.post__head { padding: 0 var(--pad) clamp(2.6rem, 7vh, 5rem); max-width: 1500px; }
.post__kicker {
  font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 1.4rem;
}
.post__kicker i { font-style: normal; color: var(--accent); margin-right: 0.5em; }
.post__title {
  font-family: var(--font-display); font-weight: 700; font-stretch: 125%;
  font-size: clamp(2.7rem, 8.2vw, 8.4rem); line-height: 1; letter-spacing: -0.035em;
  max-width: 11em;
}
.post__dek {
  margin-top: clamp(1.4rem, 3.5vh, 2.4rem); max-width: 26em;
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 2rem); line-height: 1.3; color: var(--ink-soft);
}

.post__wrap {
  display: grid; grid-template-columns: minmax(0, 1fr);
  padding: clamp(2.4rem, 6vh, 4rem) var(--pad) clamp(3rem, 8vh, 5rem);
  border-top: 1px solid var(--line-strong);
}
.post__rail { display: none; }
@media (min-width: 1100px) {
  .post__wrap {
    grid-template-columns: minmax(200px, 3fr) minmax(0, 8fr);
    column-gap: clamp(3rem, 6vw, 7rem);
  }
  .post__rail { display: block; position: sticky; top: 112px; align-self: start; }
}
.post__raillabel {
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 1rem;
}
.post__toc { list-style: none; border-top: 1px solid var(--line); }
.post__toc a {
  display: flex; gap: 0.9em; align-items: baseline;
  padding: 0.62rem 0; border-bottom: 1px solid var(--line);
  font-size: 0.92rem; line-height: 1.35; color: var(--ink-soft);
  transition: color 0.3s, padding-left 0.4s var(--ease);
}
.post__toc a span {
  font-family: var(--font-display); font-weight: 600; font-size: 0.78rem;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.post__toc a:hover, .post__toc a.is-on { color: var(--ink); }
.post__toc a.is-on { padding-left: 0.5rem; }
.post__railnote { margin-top: 1.2rem; font-size: 0.85rem; color: var(--ink-soft); }

.post__body { max-width: 42rem; font-size: clamp(1.06rem, 1.25vw, 1.16rem); line-height: 1.78; }
.post__body > p { margin-bottom: 1.15em; }
.post__body strong { font-weight: 600; }
.post__body em { font-style: italic; }
.post__open {
  font-family: var(--font-display); font-weight: 600; font-stretch: 112%;
  font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.25; letter-spacing: -0.015em;
}
.post__open strong { font-weight: 700; }
/* (1)…(6): câu chốt sau mỗi đoạn. Cách Kiên Trần làm trên Substack: một câu
   canh giữa, đậm, kẹp giữa hai đường kẻ mảnh. Nổi hơn chữ thường, nhưng không
   có vạch lề nên không bị đọc thành trích dẫn. */
.post__h {
  margin: 2.6rem 0 2.4rem; padding: 1.4rem 0.5rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  text-align: center; text-wrap: balance;
  font-family: var(--font-display); font-weight: 700; font-stretch: 112%;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.3; letter-spacing: -0.01em;
}
.post__no { margin-right: 0.2em; color: var(--accent); }
/* Câu hỏi mở đầu mỗi đoạn */
.post__q {
  margin: clamp(3.6rem, 9vh, 5.4rem) 0 1.1rem;
  font-family: var(--font-display); font-weight: 600; font-stretch: 110%;
  font-size: clamp(1.15rem, 1.5vw, 1.3rem); line-height: 1.3; color: var(--ink);
  scroll-margin-top: 110px;
}
.post__q::before { content: "— "; color: var(--accent); }

/* Tranh minh họa trong bài: một style cho cả loạt (khắc nét mực trên giấy
   kem, đúng một điểm đỏ cam). Chú thích canh giữa giữa hai đường kẻ mảnh. */
.post__art { margin: 2.6rem 0 2.8rem; }
.post__art img { display: block; width: 100%; height: auto; border-radius: 4px; background: var(--paper-soft); }

/* Tấm biển công trường: chữ hoa dày đặc, đúng thứ không ai đọc kịp */
.roadsign {
  margin: 1.6rem 0 2rem; padding: clamp(1.3rem, 3.4vw, 2rem);
  background: #f5c518; color: #111; border: 4px solid #111; border-radius: 10px;
  box-shadow: inset 0 0 0 4px #f5c518, inset 0 0 0 6px #111;
}
.roadsign p {
  margin: 0; text-transform: uppercase; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-stretch: 85%;
  font-size: clamp(0.92rem, 1.6vw, 1.15rem); line-height: 1.35; letter-spacing: 0.01em;
}

/* Tin nhắn khẩn kiểu cảnh báo trên điện thoại */
.alertcard { margin: 1.4rem 0 2rem; max-width: 30rem; }
.alertcard__head, .alertcard__text {
  background: #2a2926; color: #f4f2ec; font-family: var(--font-body);
}
.alertcard__head {
  margin: 0; padding: 0.9rem 1.2rem 0.3rem; border-radius: 18px 18px 0 0;
  font-weight: 600; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: #ff8a5c;
}
.alertcard__head::before { content: "⚠ "; }
.post__body .alertcard__text {
  margin: 0; padding: 0.2rem 1.2rem 1.1rem; border-radius: 0 0 18px 18px;
  font-weight: 600; font-size: 1rem; line-height: 1.45; text-transform: uppercase;
}
.alertcard figcaption { margin-top: 0.7rem; font-size: 0.85rem; line-height: 1.5; color: var(--ink-soft); }
.post__body sup { font-size: 0.68em; line-height: 0; vertical-align: super; }
.fn {
  margin-left: 0.1em; padding: 0 0.15em;
  font-family: var(--font-display); font-weight: 600;
  color: var(--accent); scroll-margin-top: 110px;
}
.fn:hover { text-decoration: underline; }


/* Hộp thoại mẫu: dựng bằng HTML thay vì ảnh chụp, nên chữ luôn nét và
   không phải lo kích thước ảnh. */
.uimock {
  margin: 1.8rem 0 2.2rem; padding: clamp(1.6rem, 4vw, 2.6rem);
  border-radius: 22px; background: var(--paper-soft);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.uimock--good { background: #f6dccd; }
.uimock__tag {
  align-self: flex-start;
  font-family: var(--font-display); font-weight: 600; font-stretch: 110%;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
}
.uimock--good .uimock__tag { color: var(--accent); }
.uimock__card {
  width: min(100%, 340px); padding: 1.3rem 1.3rem 1.1rem;
  background: #fff; border-radius: 18px; text-align: left;
  box-shadow: 0 1px 0 rgba(14, 14, 12, 0.05), 0 22px 44px -22px rgba(14, 14, 12, 0.4);
  font-family: var(--font-body); color: #1d1d1b;
}
.uimock__title { font-weight: 600; font-size: 1rem; margin-bottom: 0.4rem; }
.uimock__text { font-size: 0.93rem; line-height: 1.5; color: #55544f; }
.uimock__text--lead { color: #1d1d1b; }
.uimock__text b { font-weight: 600; }
.uimock__btn {
  display: block; margin-top: 1.1rem; padding: 0.78em 1em; border-radius: 12px;
  background: var(--ink); color: var(--paper); text-align: center;
  font-weight: 600; font-size: 0.92rem;
}
.uimock__btn--ghost { background: #efeee9; color: #55544f; }

/* Bản demo hoàn tác: xóa thật, không hỏi, rồi cho lấy lại */
.undo {
  position: relative; overflow: hidden;
  margin: 1.8rem 0 2.4rem; padding: clamp(1.4rem, 3.6vw, 2.2rem);
  border-radius: 22px; background: var(--ink); color: var(--paper);
}
.undo__label {
  font-family: var(--font-display); font-weight: 600; font-stretch: 110%;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(241, 239, 233, 0.6); margin-bottom: 1rem;
}
.undo__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.undo__grid span {
  aspect-ratio: 1; border-radius: 6px;
  background: linear-gradient(140deg, #f1b48f, #e8380c);
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
}
.undo__grid span:nth-child(3n+2) { background: linear-gradient(140deg, #f3e3c3, #d9a65a); }
.undo__grid span:nth-child(4n+3) { background: linear-gradient(140deg, #c9d6c4, #6f8f6a); }
.undo__grid span:nth-child(5n+1) { background: linear-gradient(140deg, #d7d2f0, #7d6fd0); }
.undo.is-gone .undo__grid span { transform: scale(0.6); opacity: 0; }
.undo.is-gone .undo__grid span:nth-child(odd) { transition-delay: 0.04s; }
.undo__bar { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; margin-top: 1.2rem; min-height: 2.9rem; }
.undo__del, .undo__reset {
  padding: 0.8em 1.4em; border-radius: 999px; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-stretch: 110%; font-size: 0.92rem;
}
.undo__del { border: 0; background: var(--paper); color: var(--ink); }
.undo__del:disabled { opacity: 0.35; cursor: default; }
.undo__reset { border: 1px solid rgba(241, 239, 233, 0.4); background: none; color: var(--paper); }
.undo__reset[hidden] { display: none; }
.undo__bar { transition: opacity 0.3s var(--ease); }
.undo.is-toast .undo__bar { opacity: 0; pointer-events: none; }
/* Toast trồi lên đúng chỗ nút vừa bấm, che luôn hàng nút: trên màn hẹp
   không còn cảnh hai thứ đè lên nhau. */
.undo__toast {
  position: absolute; left: clamp(1.4rem, 3.6vw, 2.2rem); bottom: clamp(1.4rem, 3.6vw, 2.2rem);
  display: flex; align-items: center; gap: 1.2rem;
  padding: 0.75rem 0.9rem 0.75rem 1.2rem; border-radius: 12px;
  background: #2b2a27; color: var(--paper); font-size: 0.92rem; white-space: nowrap;
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.7);
  transform: translateY(calc(100% + 2.4rem)); transition: transform 0.5s var(--ease);
}
.undo.is-toast .undo__toast { transform: translateY(0); }
.undo__toast button {
  border: 0; background: none; cursor: pointer; padding: 0.3em 0.4em;
  font-family: var(--font-display); font-weight: 700; font-stretch: 110%; font-size: 0.92rem;
  color: #ff8a5c;
}

.post__steps { list-style: none; counter-reset: step; margin: 1.6rem 0 2rem; border-top: 1px solid var(--line-strong); }
.post__steps li {
  counter-increment: step; position: relative;
  padding: 1.1rem 0 1.1rem 3.2rem; border-bottom: 1px solid var(--line);
}
.post__steps li::before {
  content: "0" counter(step); position: absolute; left: 0; top: 1.1rem;
  font-family: var(--font-display); font-weight: 700; font-stretch: 116%;
  font-size: 1.05rem; color: var(--accent);
}
.post__pull {
  margin: 2.4rem 0 0.6rem;
  font-family: var(--font-display); font-stretch: 116%;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.15; letter-spacing: -0.02em;
}
.post__pull strong { font-weight: 700; }

.post__end {
  margin-top: clamp(3.4rem, 8vh, 5rem); padding-top: clamp(2.2rem, 5vh, 3rem);
  border-top: 1px solid var(--line-strong);
}
.post__end p { margin-bottom: 1.1em; }
.post__end p:first-child {
  font-family: var(--font-display); font-stretch: 112%;
  font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.2; letter-spacing: -0.015em;
}
.post__end p:first-child strong { font-weight: 700; }
/* Ký tên: một vạch mảnh và tên in hoa nhỏ, cùng kiểu chữ với nhãn trên site */
.post__end .post__sign {
  display: flex; align-items: center; gap: 0.9rem;
  margin: 2.6rem 0 0;
  font-family: var(--font-display); font-weight: 600; font-stretch: 110%;
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
}
.post__sign::before { content: ""; width: 32px; height: 1px; background: currentColor; }

.post__refs { margin-top: clamp(3.4rem, 8vh, 5rem); padding-top: 1.6rem; border-top: 1px solid var(--line-strong); scroll-margin-top: 110px; }
.post__refs h2 {
  margin-bottom: 1.2rem;
  font-family: var(--font-display); font-weight: 600; font-stretch: 110%;
  font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
}
.post__refs ol { list-style: none; counter-reset: ref; }
.post__refs li {
  counter-increment: ref; position: relative;
  padding: 0.55rem 0 0.55rem 2.2rem; border-bottom: 1px solid var(--line);
  font-size: 0.86rem; line-height: 1.55; color: var(--ink-soft);
  scroll-margin-top: 110px; transition: background-color 0.6s;
}
.post__refs li::before {
  content: counter(ref); position: absolute; left: 0; top: 0.55rem;
  font-family: var(--font-display); font-weight: 600; color: var(--accent);
}
.post__refs li:target { background: rgba(232, 56, 12, 0.08); }
.post__refs a { color: var(--ink); }

/* ---------- Đọc lướt: cả bài chỉ còn chữ in đậm ---------- */
.skim {
  position: fixed; z-index: 100;
  right: var(--pad); bottom: clamp(16px, 3vh, 28px);
  display: inline-flex; align-items: center; gap: 0.75em;
  padding: 0.62em 0.7em 0.62em 1.15em; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-display); font-weight: 600; font-stretch: 110%; font-size: 0.9rem;
  box-shadow: 0 14px 30px -14px rgba(14, 14, 12, 0.55);
  transition: transform 0.4s var(--ease);
}
.skim:hover { transform: translateY(-2px); }
.skim:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skim__track {
  position: relative; width: 36px; height: 21px; border-radius: 999px;
  background: rgba(241, 239, 233, 0.24); transition: background-color 0.35s var(--ease);
}
.skim__dot {
  position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--paper); transition: transform 0.35s var(--ease);
}
.skim[aria-pressed="true"] .skim__track { background: var(--accent); }
.skim[aria-pressed="true"] .skim__dot { transform: translateX(15px); }

.post__body p, .post__body li, .post__body figcaption, .post__body .fn,
.uimock, .undo, .roadsign, .alertcard, .post__art { transition: color 0.5s var(--ease), opacity 0.5s var(--ease); }
/* Vạch bút dạ dưới chữ đậm: bình thường dài 0, bật đọc lướt thì kéo ra hết */
.post__body strong {
  background: linear-gradient(rgba(232, 56, 12, 0.22), rgba(232, 56, 12, 0.22)) 0 88% / 0 0.42em no-repeat;
  transition: background-size 0.6s var(--ease), color 0.5s var(--ease);
}
.is-skim .post__body p, .is-skim .post__body li, .is-skim .post__refs,
.is-skim .post__body .fn { color: rgba(14, 14, 12, 0.13); }
.is-skim .post__body strong { color: var(--ink); background-size: 100% 0.42em; }
.is-skim .uimock, .is-skim .undo, .is-skim .roadsign, .is-skim .alertcard, .is-skim .post__art { opacity: 0.22; }
.is-skim .post__body .post__q { color: var(--ink); }
.is-skim .post__refs a { color: inherit; }


@media (max-width: 700px) {
  .skim { right: 14px; bottom: 14px; font-size: 0.82rem; padding: 0.55em 0.6em 0.55em 1em; }
  .undo__toast { gap: 0.6rem; font-size: 0.85rem; }
}

/* ---------- Bài viết: điều hướng bài trước / bài sau ---------- */
.postnav { margin-top: clamp(1rem, 3vh, 2rem); }

/* ---------- Nút chọn hai trạng thái dùng chung cho các demo ---------- */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(241, 239, 233, 0.12); }
.seg button {
  padding: 0.5em 1em; border: 0; border-radius: 999px; cursor: pointer;
  background: none; color: rgba(241, 239, 233, 0.7);
  font-family: var(--font-display); font-weight: 600; font-stretch: 110%; font-size: 0.82rem;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg--light { background: var(--paper-soft); }
.seg--light button { color: var(--ink-soft); }
.seg--light button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ---------- Bảng điện chứng khoán (nền đen như bảng thật) ---------- */
.board {
  --up: #22b14c; --down: #ef3b36; --ref: #f0c419; --ceil: #c26cf0; --floor: #2bb8e8;
  margin: 1.8rem 0 2.4rem; padding: clamp(1.1rem, 3vw, 1.6rem);
  border-radius: 18px; background: #0b0b0a; color: #f1efe9;
}
.board.is-cn { --up: #ef3b36; --down: #22b14c; --ceil: #ef3b36; --floor: #22b14c; --ref: #e9e7e1; }
.board__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 1rem; }
.board__label {
  font-family: var(--font-display); font-weight: 600; font-stretch: 110%;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(241, 239, 233, 0.6);
}
.board__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.board__table th, .board__table td {
  padding: 0.62rem 0.4rem; border-top: 1px solid rgba(241, 239, 233, 0.1);
  text-align: right; font-size: 0.98rem;
}
.board__table thead th {
  border-top: 0; padding-top: 0;
  font-family: var(--font-body); font-weight: 500; font-size: 0.74rem; color: rgba(241, 239, 233, 0.5);
}
.board__table th:first-child { text-align: left; }
.board__table tbody th { font-family: var(--font-display); font-weight: 700; font-stretch: 110%; letter-spacing: 0.02em; }
.board__table tbody td { font-weight: 600; }
.board__table tbody td:nth-child(2) { color: var(--ref); font-weight: 500; }
.board tr.is-up > :is(th, td:nth-child(n+3)) { color: var(--up); }
.board tr.is-down > :is(th, td:nth-child(n+3)) { color: var(--down); }
.board tr.is-ref > :is(th, td) { color: var(--ref); }
.board tr.is-ceil > :is(th, td:nth-child(n+3)) { color: var(--ceil); }
.board tr.is-floor > :is(th, td:nth-child(n+3)) { color: var(--floor); }
/* Bảng rút gọn: cả hàng (mã + giá) mang màu tăng/giảm */
.board.board--mini tbody tr.is-up > * { color: var(--up); font-weight: 600; }
.board.board--mini tbody tr.is-down > * { color: var(--down); font-weight: 600; }
.board .board__table, .board .board__table * { transition: color 0.4s var(--ease); }
.board .board__table { transition: filter 0.4s var(--ease); }
.board.is-cvd .board__table { filter: url(#cvd-deutan); }
.board .arr { display: none; }
.board.is-arrows .arr { display: inline; }
.board figcaption { margin-top: 0.9rem; font-size: 0.82rem; line-height: 1.5; color: rgba(241, 239, 233, 0.55); }

/* ---------- Màn hình app mùa Tết: lỗi đỏ chìm giữa nền đỏ ---------- */
.tetmock { margin: 1.8rem 0 2.2rem; padding: clamp(1.6rem, 4vw, 2.6rem); border-radius: 22px; background: var(--paper-soft); }
.tetmock__screen {
  width: min(100%, 320px); margin: 0 auto; padding: 1.6rem 1.3rem 1.3rem; border-radius: 26px;
  background: radial-gradient(circle at 100% 0%, #f6c54a 0 9%, transparent 9.5%),
              radial-gradient(circle at 0% 100%, #e8483c 0 12%, transparent 12.5%),
              linear-gradient(170deg, #d4241c, #a8130f);
  color: #ffe7b0; text-align: center; font-family: var(--font-body);
  box-shadow: 0 22px 44px -22px rgba(14, 14, 12, 0.5);
}
.tetmock__banner { font-family: var(--font-serif); font-style: italic; font-weight: 700; font-size: 1.5rem; line-height: 1.15; color: #ffd36a; }
.tetmock__sub { margin-top: 0.3rem; font-size: 0.85rem; color: #ffd9a8; }
.tetmock__field {
  display: block; margin: 1.3rem 0 0.5rem; padding: 0.7rem; border-radius: 12px;
  background: rgba(255, 231, 176, 0.14); letter-spacing: 0.35em; font-weight: 600;
}
.post__body .tetmock__err { margin: 0; font-size: 0.8rem; line-height: 1.4; color: #ff3b2f; }
.tetmock__btn { display: block; margin-top: 1rem; padding: 0.75em; border-radius: 12px; background: #ffcf5a; color: #8a1410; font-weight: 700; font-size: 0.92rem; }
.tetmock figcaption { margin-top: 1.1rem; text-align: center; font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- Biểu đồ hai cột: một cột nhấn, một cột làm nền ---------- */
.bars { margin: 1.8rem 0 2.4rem; padding: clamp(1.2rem, 3vw, 1.8rem) 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.bars__title {
  margin-bottom: 1.2rem;
  font-family: var(--font-display); font-weight: 600; font-stretch: 110%;
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
}
.bars__row { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 5.2rem; gap: 1rem; align-items: center; padding: 0.7rem 0; }
.bars__name { font-family: var(--font-display); font-weight: 700; font-stretch: 112%; font-size: 1.15rem; line-height: 1.2; }
.bars__name small { display: block; margin-top: 0.2rem; font-family: var(--font-body); font-weight: 400; font-stretch: 100%; font-size: 0.78rem; line-height: 1.35; color: var(--ink-soft); }
.bars__track { position: relative; height: 26px; border-radius: 4px; background: var(--paper-soft); overflow: hidden; }
.bars__fill { position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: 0 4px 4px 0; background: #8a887f; }
.bars__row.is-hi .bars__fill { background: var(--accent); }
.bars__val { font-family: var(--font-display); font-weight: 700; font-stretch: 116%; font-size: 1.25rem; text-align: right; font-variant-numeric: tabular-nums; }
.bars__row.is-hi .bars__val { color: var(--accent); }
.post__body .bars__note { margin: 0.8rem 0 0; font-size: 0.8rem; color: var(--ink-soft); }
@media (max-width: 600px) {
  .bars__row { grid-template-columns: minmax(0, 1fr) 4.6rem; row-gap: 0.5rem; }
  .bars__name { grid-column: 1 / -1; }
}

/* ---------- 100 người đi qua một cái form ---------- */
.crowd { margin: 1.8rem 0 2.4rem; padding: clamp(1.2rem, 3.4vw, 2rem); border-radius: 22px; background: var(--ink); color: var(--paper); }
.crowd__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; }
.crowd__form { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.7rem 1rem; border-radius: 12px; background: #f1efe9; color: #1d1d1b; font-size: 0.92rem; font-weight: 500; }
.crowd__box { position: relative; width: 20px; height: 20px; border: 2px solid #1d1d1b; border-radius: 5px; flex: none; }
.crowd__box.is-on { background: var(--accent); border-color: var(--accent); }
.crowd__box.is-on::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.crowd__grid { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 5px; }
.crowd__grid span { aspect-ratio: 1; border-radius: 50%; background: rgba(241, 239, 233, 0.16); transition: background-color 0.25s var(--ease), transform 0.25s var(--ease); }
.crowd__grid span.is-yes { background: var(--accent); }
.crowd__grid span.is-no { background: rgba(241, 239, 233, 0.42); }
.crowd__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; margin-top: 1.3rem; }
.crowd__run {
  padding: 0.8em 1.4em; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-stretch: 110%; font-size: 0.92rem;
}
.crowd__run:disabled { opacity: 0.4; cursor: default; }
.crowd__run:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.post__body .crowd__result { margin: 0; font-family: var(--font-display); font-weight: 600; font-stretch: 110%; font-size: 1rem; }
.crowd__result b { color: #ff8a5c; }
.crowd figcaption { margin-top: 1rem; font-size: 0.82rem; line-height: 1.5; color: rgba(241, 239, 233, 0.55); }

.board, .tetmock, .bars, .crowd { transition: opacity 0.5s var(--ease); }
.is-skim .board, .is-skim .tetmock, .is-skim .bars, .is-skim .crowd { opacity: 0.22; }
@media (max-width: 600px) { .crowd__grid { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; } }

/* ---------- Hai thẻ tích điểm: cùng cần 8 ly, khác cách vẽ ---------- */
.stamps { margin: 1.8rem 0 2.4rem; padding: clamp(1.2rem, 3.4vw, 2rem); border-radius: 22px; background: var(--paper-soft); }
.stamps__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.stamps__card { padding: 1rem 1rem 0.9rem; border: 1.5px dashed var(--line-strong); border-radius: 14px; background: #fbfaf6; }
.post__body .stamps__name { margin: 0 0 0.8rem; font-family: var(--font-display); font-weight: 600; font-stretch: 110%; font-size: 0.86rem; }
.stamps__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.stamps__grid span { aspect-ratio: 1; border: 1.5px solid var(--line-strong); border-radius: 50%; transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease); }
.stamps__grid span.is-gift { background: var(--accent); border-color: var(--accent); }
.stamps__grid span.is-on { background: var(--ink); border-color: var(--ink); transform: scale(0.92); }
.post__body .stamps__left { margin: 0.8rem 0 0; font-size: 0.86rem; color: var(--ink-soft); }
.stamps__bar { display: flex; gap: 0.7rem; margin-top: 1.1rem; }
.stamps__buy, .stamps__reset {
  padding: 0.8em 1.4em; border-radius: 999px; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-stretch: 110%; font-size: 0.92rem;
}
.stamps__buy { border: 0; background: var(--ink); color: var(--paper); }
.stamps__buy:disabled { opacity: 0.35; cursor: default; }
.stamps__reset { border: 1px solid var(--line-strong); background: none; color: var(--ink); }
.stamps__reset[hidden] { display: none; }
.stamps { transition: opacity 0.5s var(--ease); }
.is-skim .stamps { opacity: 0.22; }
@media (max-width: 560px) { .stamps__cards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Lưới đối xứng: thêm 9 ô hay xóa 3 ô (bài "xóa") ---------- */
.sym { margin: 1.8rem 0 2.4rem; padding: clamp(1.2rem, 3.4vw, 2rem); border-radius: 22px; background: var(--paper-soft); transition: opacity 0.5s var(--ease); }
.sym__label {
  font-family: var(--font-display); font-weight: 600; font-stretch: 110%;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 1rem;
}
.sym__grid, .sym__bar, .post__body .sym__msg { max-width: 360px; margin-inline: auto; }
.sym__grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.sym__grid button {
  aspect-ratio: 1; padding: 0; cursor: pointer;
  border: 1.5px solid var(--line-strong); border-radius: 5px; background: #fbfaf6;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.sym__grid button.is-on { background: var(--accent); border-color: var(--accent); }
.sym.is-done .sym__grid button.is-on { background: var(--ink); border-color: var(--ink); }
.sym__grid button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sym__bar { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 1.1rem; min-height: 2.9rem; }
.post__body .sym__count { margin: 0; font-family: var(--font-display); font-weight: 600; font-stretch: 110%; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.sym__reset {
  padding: 0.8em 1.4em; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: none; color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-stretch: 110%; font-size: 0.92rem;
}
.sym__reset[hidden] { display: none; }
.post__body .sym__msg { margin-top: 0.6rem; margin-bottom: 0; font-size: 0.92rem; line-height: 1.55; color: var(--ink-soft); }
.post__body .sym__msg:empty { display: none; }
.is-skim .sym { opacity: 0.22; }
@media (prefers-reduced-motion: reduce) { .sym__grid button { transition: none; } }

/* ---------- Nút về đầu trang ---------- */
/* Đĩa mực với vòng tiến độ đọc bao quanh, cùng ngôn ngữ với con số 0→100 của
   màn chào: cuộn tới đâu vòng đỏ đầy tới đó. Nền luôn là mực nên đọc rõ trên
   cả mặt kem lẫn mặt tối. Vòng chạy bằng scroll-driven animation như .progress;
   trình duyệt chưa hỗ trợ thì chỉ còn đường viền mảnh, nút vẫn dùng bình thường.
   Rê vào: đĩa ngả sang đỏ, mũi tên cũ trôi lên, mũi tên mới từ dưới trồi vào. */
.totop {
  --lift: 0px;
  position: fixed; z-index: 100;
  right: var(--pad); bottom: calc(clamp(16px, 3vh, 28px) + var(--lift));
  width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--ink); color: var(--paper);
  box-shadow: 0 14px 30px -14px rgba(14, 14, 12, 0.55);
  opacity: 0; visibility: hidden;
  transform: translateY(14px) scale(0.86);
  transition: opacity 0.3s, transform 0.5s var(--ease), background-color 0.35s var(--ease), visibility 0s linear 0.5s;
}
.totop.is-on {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.35s, transform 0.6s var(--ease), background-color 0.35s var(--ease), visibility 0s;
}
.totop.is-on:active { transform: scale(0.94); }
/* Menu, lightbox, overlay đang mở thì nút lui đi, không đè lên chúng. */
body.is-locked .totop { opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s linear 0.3s; }

/* Trang bài viết đã có nút "Đọc lướt" nằm góc này: xếp nút ngay phía trên. */
body:has(.skim) .totop { --lift: 52px; }

.totop__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.totop__track { fill: none; stroke: rgba(241, 239, 233, 0.2); stroke-width: 1; }
.totop__arc {
  fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke 0.35s var(--ease);
}
@supports (animation-timeline: scroll()) {
  .totop__arc {
    animation: totopFill linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes totopFill { to { stroke-dashoffset: 0; } }

.totop__icon { position: relative; display: block; width: 16px; height: 16px; overflow: hidden; }
.totop__icon svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: miter; stroke-linecap: butt;
  transition: transform 0.5s var(--ease);
}
.totop__icon svg + svg { transform: translateY(150%); }

.totop:focus-visible { background: var(--accent); }
.totop:focus-visible .totop__arc { stroke: var(--paper); }
.totop:focus-visible .totop__icon svg:first-child { transform: translateY(-150%); }
.totop:focus-visible .totop__icon svg + svg { transform: none; }
@media (hover: hover) {
  .totop.is-on:hover { background: var(--accent); transform: translateY(-3px); }
  .totop:hover .totop__arc { stroke: var(--paper); }
  .totop:hover .totop__icon svg:first-child { transform: translateY(-150%); }
  .totop:hover .totop__icon svg + svg { transform: none; }
}

@media (max-width: 700px) {
  .totop { width: 44px; height: 44px; right: 14px; bottom: calc(14px + var(--lift)); }
  body:has(.skim) .totop { --lift: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Không trượt, không trôi: chỉ hiện/ẩn. Vòng tiến độ cũng là chuyển động theo
     cuộn nên bỏ, như vạch .progress ở đầu trang. */
  .totop, .totop.is-on, .totop.is-on:hover { transform: none; transition: opacity 0.2s, visibility 0s linear 0.2s; }
  .totop.is-on { transition: opacity 0.2s, visibility 0s; }
  .totop__ring { display: none; }
  .totop__icon svg { transition: none; }
}