/* Be Vietnam Pro — self-hosted to remove the render-blocking Google Fonts hop. */
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 300; font-display: swap; src: url("../assets/fonts/be-vietnam-pro/QdVMSTAyLFyeg_IDWvOJmVES_HScJ286Rb0bcw.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 300; font-display: swap; src: url("../assets/fonts/be-vietnam-pro/QdVMSTAyLFyeg_IDWvOJmVES_HScJ281Rb0.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/be-vietnam-pro/QdVPSTAyLFyeg_IDWvOJmVES_Hw4BXoKZA.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/be-vietnam-pro/QdVPSTAyLFyeg_IDWvOJmVES_Hw3BXo.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/be-vietnam-pro/QdVMSTAyLFyeg_IDWvOJmVES_HTEJm86Rb0bcw.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/be-vietnam-pro/QdVMSTAyLFyeg_IDWvOJmVES_HTEJm81Rb0.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/be-vietnam-pro/QdVMSTAyLFyeg_IDWvOJmVES_HToIW86Rb0bcw.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/be-vietnam-pro/QdVMSTAyLFyeg_IDWvOJmVES_HToIW81Rb0.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/be-vietnam-pro/QdVMSTAyLFyeg_IDWvOJmVES_HSMIG86Rb0bcw.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/be-vietnam-pro/QdVMSTAyLFyeg_IDWvOJmVES_HSMIG81Rb0.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 800; font-display: swap; src: url("../assets/fonts/be-vietnam-pro/QdVMSTAyLFyeg_IDWvOJmVES_HSQI286Rb0bcw.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 800; font-display: swap; src: url("../assets/fonts/be-vietnam-pro/QdVMSTAyLFyeg_IDWvOJmVES_HSQI281Rb0.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: italic; font-weight: 400; font-display: swap; src: url("../assets/fonts/be-vietnam-pro/QdVNSTAyLFyeg_IDWvOJmVES_HwyNXcSYIAi.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: italic; font-weight: 400; font-display: swap; src: url("../assets/fonts/be-vietnam-pro/QdVNSTAyLFyeg_IDWvOJmVES_HwyNXgSYA.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ========================================================================== 
   LÊ TUẤN VIỆT — PORTFOLIO
   Font: Be Vietnam Pro · Bảng màu: Sky Luxury — navy sâu #0A0D1C · navy #233A69 · xanh trời #A2C4FE
   (khớp logo LTV cyan → xanh hoàng gia và bầu trời trong hero)
   Quy tắc chữ: tiêu đề luôn 1 dòng (data-fit tự co) · mô tả chữ nhỏ, căn đều, tối đa 4 dòng (.desc)
   ========================================================================== */

:root {
  /* Tên biến giữ nguyên để không phải sửa component — giá trị đã đổi sang bảng màu mới */
  --ivory: #F5F8FF;        /* nền sáng: trắng pha trời */
  --ivory-2: #EAF1FD;
  --greige: #D3E2FB;       /* xanh trời rất nhạt */
  --taupe: #A2C4FE;        /* xanh periwinkle */
  --stone: #6F8BC0;
  --ink: #0C1633;          /* navy — chữ chính */
  --ink-2: #26375F;
  --ink-3: #54678F;
  --espresso: #0A0D1C;     /* navy đen — nền tối */
  --navy: #233A69;
  --blue: #1B5CF2;         /* xanh hoàng gia của logo */
  --sky: #2F8CFF;          /* xanh bầu trời hero */
  --cyan: #14D8E6;         /* cyan đầu logo */

  /* bộ ba RGB để pha độ trong suốt: rgb(var(--ink-rgb) / .12) */
  --ink-rgb: 12 22 51;
  --ivory-rgb: 245 248 255;
  --shadow-rgb: 16 30 72;
  --taupe-rgb: 162 196 254;
  --greige-rgb: 211 226 251;
  --blue-rgb: 27 92 242;
  --cyan-rgb: 20 216 230;

  --line: rgb(var(--ink-rgb) / .12);
  --line-2: rgb(var(--ink-rgb) / .07);
  --line-light: rgb(var(--ivory-rgb) / .14);

  --grad-brand: linear-gradient(120deg, #14E0E0 0%, #1AA6FF 30%, #1B5CF2 62%, #1C2E94 100%);
  --grad-lux: linear-gradient(135deg, #F5F8FF 0%, #E3EDFE 34%, #C7DBFE 66%, #A2C4FE 100%);
  --grad-lux-soft: linear-gradient(160deg, #F7FAFF 0%, #EDF3FE 55%, #DEE9FD 100%);
  --grad-text: linear-gradient(100deg, #0C1633 0%, #1D3C94 52%, #2F7BF5 100%);
  --grad-text-light: linear-gradient(100deg, #F5F8FF 0%, #BCD5FF 50%, #7CB4FF 100%);
  --grad-sheen: linear-gradient(115deg, #A2C4FE 0%, #F5F8FF 30%, #6FD9FF 55%, #A2C4FE 80%, #F5F8FF 100%);
  --grad-dark: radial-gradient(70% 60% at 100% 100%, rgb(var(--taupe-rgb) / .2), transparent 70%), linear-gradient(150deg, #0A0D1C 0%, #111B3A 45%, #1A2B58 78%, #243E78 100%);
  --grad-deep: linear-gradient(135deg, #0E1428 0%, #26396A 48%, #5B7CC2 78%, #A2C4FE 100%);
  --grad-btn: linear-gradient(120deg, #0C1633 0%, #182C63 55%, #22408A 100%);
  --grad-btn-hover: linear-gradient(120deg, #2F8CFF 0%, #1B5CF2 45%, #1A2F8A 100%);

  --font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --hand: 'Playwrite VN', 'Segoe Script', 'Brush Script MT', cursive;

  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 38px;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, .85) inset, 0 30px 60px -38px rgb(var(--shadow-rgb) / .38), 0 8px 18px -12px rgb(var(--shadow-rgb) / .14);
  --shadow-float: 0 40px 80px -40px rgb(var(--shadow-rgb) / .55);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --gutter: clamp(18px, 4vw, 44px);
  --maxw: 1260px;
  --nav-h: 76px;
}

/* ------------------------------ Reset ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.smooth { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.65; color: var(--ink);
  background: var(--ivory); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-x: clip;
}
body.is-loading { overflow: hidden; }
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--blue); color: #fff; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 1000; background: var(--ink); color: var(--ivory); padding: 10px 18px; border-radius: 999px; transition: top .3s; }
.skip-link:focus { top: 16px; }

/* ------------------------------ Layout ------------------------------ */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: clamp(92px, 11vw, 156px); }
.sec-ivory { background: radial-gradient(55% 45% at 100% 0%, rgb(var(--taupe-rgb) / .2), transparent 70%), radial-gradient(40% 40% at 0% 100%, rgb(var(--cyan-rgb) / .05), transparent 70%), var(--ivory); }
.sec-lux { background: radial-gradient(50% 45% at 0% 0%, rgb(var(--cyan-rgb) / .07), transparent 70%), radial-gradient(60% 55% at 100% 100%, rgb(var(--taupe-rgb) / .34), transparent 70%), var(--grad-lux-soft); }
.sec-dark { background: var(--grad-dark); color: var(--ivory); }
main > section:not(.hero), .footer { z-index: 3; }

/* ==========================================================================
   HỆ THỐNG CHỮ
   ========================================================================== */
/* Tiêu đề luôn 1 dòng — JS (fx.js) tự co cỡ chữ để vừa khung */
[data-fit] { white-space: nowrap; max-width: 100%; }
.h2 { display: block; font-size: clamp(2rem, 5vw, 4.3rem); font-weight: 800; line-height: 1.1; letter-spacing: -.045em; }
.grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.sec-dark .grad, .is-dark .grad, .grad-light { background: var(--grad-text-light); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* Mô tả: chữ nhỏ, căn đều 2 bên, tối đa 4 dòng */
.desc {
  font-size: 14.5px; line-height: 1.72; font-weight: 400; color: var(--ink-3);
  text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
}
.desc--lg { font-size: 15.5px; }
.desc.is-open { display: block; -webkit-line-clamp: unset; line-clamp: unset; }
.sec-dark .desc, .is-dark .desc { color: rgb(var(--ivory-rgb) / .66); }
.more-btn { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink); border-bottom: 1px solid currentColor; padding-bottom: 1px; }

/* Đầu section: tiêu đề 1 dòng · đường kẻ + mô tả (__top: bộ đếm / nút điều hướng, căn phải) */
.sec-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: clamp(44px, 6vw, 76px); min-width: 0; }
.sec-head__top { display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-width: 0; }
/* --aside: bộ đếm / nút nằm cùng hàng với tiêu đề (mobile: xếp lại phía trên) */
.sec-head--aside { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(16px, 3vw, 40px); }
.sec-head--aside > .h2 { grid-area: 1 / 1; }
.sec-head--aside > .sec-head__top { grid-area: 1 / 2; }
.sec-head--aside > .sec-head__foot { grid-column: 1 / -1; }
.sec-head__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: clamp(20px, 4vw, 60px); align-items: center; }
.sec-head__rule { height: 1px; background: var(--line); transform-origin: left; transform: scaleX(0); transition: transform 1.5s var(--ease) .25s; }
.sec-dark .sec-head__rule { background: var(--line-light); }
.sec-head.is-in .sec-head__rule { transform: scaleX(1); }
.sec-head__foot .desc { opacity: 0; transform: translateY(14px); transition: opacity 1s var(--ease) .35s, transform 1.1s var(--ease) .35s; }
.sec-head.is-in .sec-head__foot .desc { opacity: 1; transform: none; }

/* Chữ trồi lên theo từng từ */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .18em .03em .12em; margin: -.18em -.03em -.12em; }
.split .w__in { display: inline-block; transform: translate3d(0, 110%, 0) rotate(3deg); transform-origin: 0 100%; transition: transform 1.15s var(--ease); transition-delay: calc(var(--wi, 0) * 60ms + 60ms); }
.split.is-in .w__in { transform: none; }

/* ------------------------------ Buttons ------------------------------ */
.btn {
  --bh: 54px; position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: var(--bh); padding: 0 26px 0 28px; border-radius: 999px;
  font-size: 15px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; overflow: hidden;
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.btn .ico { width: 18px; height: 18px; flex: none; transition: transform .5s var(--ease); }
.btn:hover .ico--arrow { transform: translateX(4px); }
.btn:hover .ico--down { transform: translateY(3px); }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .9s var(--ease); }
.btn:hover::after { transform: translateX(120%); }
.btn--dark { background: var(--grad-btn); color: #fff; box-shadow: 0 16px 34px -18px rgb(var(--shadow-rgb) / .8); }
.btn--dark::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--grad-btn-hover); opacity: 0; transition: opacity .5s var(--ease); }
.btn--dark:hover { box-shadow: 0 22px 44px -18px rgb(var(--blue-rgb) / .7); }
.btn--dark:hover::before { opacity: 1; }
.btn--light { background: var(--ivory); color: var(--ink); box-shadow: 0 14px 30px -18px rgb(var(--shadow-rgb) / .45), 0 0 0 1px rgb(var(--ink-rgb) / .06) inset; }
.btn--light:hover { background: #fff; }
.btn--ghost { color: var(--ink); border: 1px solid rgb(var(--ink-rgb) / .22); background: rgb(var(--ivory-rgb) / .35); backdrop-filter: blur(10px); }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue); background: rgb(var(--ivory-rgb) / .75); }
.btn--sm { --bh: 42px; padding: 0 18px; font-size: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.magnetic { transition: transform .6s var(--ease), background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); }
.round { position: relative; isolation: isolate; overflow: hidden; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: rgba(255, 255, 255, .6); transition: background .3s, color .3s, transform .4s var(--ease), border-color .3s; }
.round:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.round svg { width: 20px; height: 20px; }

/* Gợn sóng khi bấm */
.ripple { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .2; transform: scale(0); animation: ripple .75s var(--ease) forwards; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* Ánh sáng theo chuột trên thẻ */
.spot { isolation: isolate; }
.glow { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease);
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 62%); }
.glow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--blue-rgb) / .75), rgb(var(--cyan-rgb) / .25) 40%, transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.spot:hover > .glow { opacity: 1; }
.spot.is-dark > .glow { background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--ivory-rgb) / .12), transparent 62%); }
.spot.is-dark > .glow::after { background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--ivory-rgb) / .6), transparent 65%); }

/* ------------------------------ Grain ------------------------------ */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

/* ==========================================================================
   PRELOADER — "xin chào" · CHUYỂN TRANG
   ========================================================================== */
.preloader { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--grad-dark); color: var(--ivory); clip-path: inset(0 0 0 0); transition: clip-path 1.15s var(--ease-io); }
.preloader::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 55%, rgb(var(--taupe-rgb) / .2), transparent 70%), radial-gradient(40% 40% at 12% 8%, rgb(var(--cyan-rgb) / .12), transparent 70%); }
.preloader.is-done { clip-path: inset(0 0 100% 0); }
.preloader.is-quick .hello { display: none; }
.hello { width: min(640px, 82vw); height: auto; overflow: visible; position: relative; transition: transform 1.1s var(--ease-io), opacity .8s; }
.preloader.is-done .hello { transform: translateY(-60px) scale(.96); opacity: 0; }
.hello__ink { fill: currentColor; }
/* The exact font outlines never change: a mask of pen strokes writes them. Each pen carries its
   length (--l) and its own keyframes/timing (--anim), generated into the SVG by tools/hello-pen. */
.hello__pen { stroke-dasharray: var(--l) var(--l); stroke-dashoffset: var(--l); opacity: 0; }
.hello__dot { transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0); opacity: 0; }
.preloader.is-writing .hello__pen, .preloader.is-writing .hello__dot { animation: var(--anim); }
.preloader.is-written .hello__pen { animation: none; stroke-dashoffset: 0; opacity: 1; }
.preloader.is-written .hello__dot { animation: none; transform: none; opacity: 1; }
.preloader.is-written .hello__ink [mask] { mask: none; }
@media (prefers-reduced-motion: no-override) {
  .hello__pen, .preloader.is-writing .hello__pen { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .hello__dot, .preloader.is-writing .hello__dot { animation: none; transform: none; opacity: 1; }
}
.preloader__meta { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 34px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgb(var(--ivory-rgb) / .55); }
.preloader__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgb(var(--ivory-rgb) / .08); }
.preloader__bar i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0)); background: var(--grad-sheen); transition: transform .4s var(--ease); }
.preloader__pct { font-variant-numeric: tabular-nums; color: var(--ivory); }
.preloader__id { display: inline-flex; align-items: center; gap: 12px; }
.preloader__id img { width: 30px; height: 30px; padding: 5px; border-radius: 50%; background: #fff; flex: none; }

.pt { position: fixed; inset: 0; z-index: 400; pointer-events: none; display: grid; place-items: center; background: var(--grad-dark); color: var(--ivory); clip-path: inset(100% 0 0 0); }
.pt__mark { display: inline-flex; align-items: center; gap: 16px; font-size: clamp(1.8rem, 4.4vw, 3.2rem); font-weight: 800; letter-spacing: -.045em; opacity: 0; transform: translateY(22px); }
.pt__mark img { width: 1.35em; height: 1.35em; padding: .2em; border-radius: 50%; background: #fff; }
.pt.is-leave { pointer-events: auto; clip-path: inset(0 0 0 0); transition: clip-path .65s var(--ease-io); }
.pt.is-leave .pt__mark { opacity: 1; transform: none; transition: opacity .5s .2s, transform .7s .2s var(--ease); }
.pt.is-cover { pointer-events: auto; clip-path: inset(0 0 0 0); animation: pt-safety 0s 3s forwards; }
.pt.is-cover .pt__mark { opacity: 1; transform: none; }
.pt.is-cover.is-out { pointer-events: none; clip-path: inset(0 0 100% 0); transition: clip-path .95s var(--ease-io) .12s; }
.pt.is-cover.is-out .pt__mark { opacity: 0; transform: translateY(-22px); transition: opacity .4s, transform .6s var(--ease); }
@keyframes pt-safety { to { clip-path: inset(0 0 100% 0); pointer-events: none; } }

html.is-lang-switch { scroll-behavior: auto !important; }
html.is-lang-switch body.is-loading { overflow: auto !important; }
html.is-lang-switch #preloader { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
html.is-lang-switch .hero-name .hn > span,
html.is-lang-switch .intro-fade { opacity: 1 !important; transform: none !important; transition: none !important; transition-delay: 0s !important; }

/* ==========================================================================
   NAV
   ========================================================================== */
/* Thanh điều hướng là một viên nang; logo, nút CV và nút menu là những viên nang nhỏ nằm đồng tâm bên
   trong. --nav-ctl là cỡ chung của chúng, lề trong tự tính từ đó nên bốn phía luôn hở bằng nhau. */
.nav { --nav-bar: 62px; --nav-ctl: 40px; position: fixed; top: 14px; left: 0; right: 0; z-index: 100; padding-inline: var(--gutter); transition: transform .6s var(--ease), opacity .6s var(--ease); pointer-events: none; }
.nav.is-scrolled { --nav-bar: 56px; --nav-ctl: 38px; }
.nav.is-hidden { transform: translateY(-120%); }
.nav__inner {
  pointer-events: auto; max-width: calc(var(--maxw) - 2 * var(--gutter) + 40px); margin-inline: auto;
  height: var(--nav-bar); padding-inline: calc((var(--nav-bar) - var(--nav-ctl)) / 2 - 1px); display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-radius: 999px; background: rgb(var(--ivory-rgb) / .62); border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 18px 40px -26px rgb(var(--shadow-rgb) / .55), 0 1px 0 rgba(255, 255, 255, .7) inset;
  backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25);
  transition: height .5s var(--ease), background .5s;
}
.nav.is-scrolled .nav__inner { background: rgb(var(--ivory-rgb) / .82); }
.nav__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.nav__logo { width: var(--nav-ctl); height: var(--nav-ctl); border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1px rgb(var(--ink-rgb) / .06), 0 8px 18px -10px rgb(var(--blue-rgb) / .55); transition: transform .6s var(--ease), width .5s var(--ease), height .5s var(--ease); }
.nav__logo img { width: 66%; height: 66%; }
.nav__brand:hover .nav__logo { transform: rotate(-12deg) scale(1.06); }
.nav__badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-3); }
.nav__links { position: relative; display: flex; align-items: center; gap: 2px; }
.nav__links a { position: relative; z-index: 1; padding: 9px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink-2); transition: color .3s; white-space: nowrap; }
.nav__links a:hover, .nav__links a.is-active { color: var(--ink); }
.nav__links a::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--blue); transform: scale(0); transition: transform .4s var(--ease); }
.nav__links a:hover:not(.is-active)::after { transform: scale(1); }
.nav__pill { position: absolute; z-index: 0; top: 0; left: 0; height: 100%; border-radius: 999px; background: #fff; box-shadow: 0 6px 16px -10px rgb(var(--shadow-rgb) / .5), 0 0 0 1px rgb(var(--ink-rgb) / .06); transition: transform .55s var(--ease), width .55s var(--ease), opacity .3s; opacity: 0; }
.nav__actions { display: flex; align-items: center; gap: 8px; }
.nav__actions .btn { --bh: var(--nav-ctl); padding-inline: 16px; gap: 10px; transition: height .5s var(--ease), background-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease); }
.nav__burger { display: none; width: var(--nav-ctl); height: var(--nav-ctl); border-radius: 50%; background: var(--grad-btn); position: relative; }
.nav__burger span { position: absolute; left: 30%; right: 30%; height: 1.6px; background: var(--ivory); border-radius: 2px; transition: transform .45s var(--ease), top .45s var(--ease); }
.nav__burger span:first-child { top: calc(var(--nav-ctl) / 2 - 4px); }
.nav__burger span:last-child { top: calc(var(--nav-ctl) / 2 + 3px); }
.nav.is-open .nav__burger span:first-child { top: calc(var(--nav-ctl) / 2 - .5px); transform: rotate(45deg); }
.nav.is-open .nav__burger span:last-child { top: calc(var(--nav-ctl) / 2 - .5px); transform: rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 99; background: var(--grad-lux); padding: calc(var(--nav-h) + 40px) var(--gutter) 40px; display: flex; flex-direction: column; justify-content: space-between; clip-path: circle(0% at calc(100% - 44px) 44px); transition: clip-path .8s var(--ease-io); visibility: hidden; }
.menu.is-open { clip-path: circle(150% at calc(100% - 44px) 44px); visibility: visible; }
.menu__links { display: grid; gap: 4px; }
.menu__links a { font-size: clamp(1.8rem, 8.5vw, 3.2rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.18; display: flex; align-items: baseline; gap: 14px; white-space: nowrap; opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .7s var(--ease); }
.menu.is-open .menu__links a { opacity: 1; transform: none; }
.menu.is-open .menu__links a:nth-child(2) { transition-delay: .04s; } .menu.is-open .menu__links a:nth-child(3) { transition-delay: .08s; }
.menu.is-open .menu__links a:nth-child(4) { transition-delay: .12s; } .menu.is-open .menu__links a:nth-child(5) { transition-delay: .16s; }
.menu.is-open .menu__links a:nth-child(6) { transition-delay: .2s; } .menu.is-open .menu__links a:nth-child(7) { transition-delay: .24s; }
.menu.is-open .menu__links a:nth-child(8) { transition-delay: .28s; }
.menu__links a small { font-size: 13px; font-weight: 600; color: var(--ink-3); letter-spacing: .1em; }
.menu__foot { display: grid; gap: 6px; color: var(--ink-2); font-size: 15px; }

/* ==========================================================================
   HERO — 3D scroll
   ========================================================================== */
.hero { position: relative; height: 820vh; background: var(--greige); }
.hero__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero__stage { position: absolute; inset: 0; background: #8DB9F2 url("../assets/hero/seq/poster.webp") right top / cover no-repeat; transform-origin: 50% 40%; will-change: transform, filter; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Tấm phủ tối chuyển sắc: chỉ đậm ở phía đang có chữ, tan hết trước khi tới khuôn mặt.
   Độ đậm --sl/--sr/--sb do js/hero.js đặt theo chương đang hiện (0 khi không có chữ). */
.hero__scrim { position: absolute; inset: 0; pointer-events: none; }
.hero__scrim i { position: absolute; inset: 0; display: block; will-change: opacity; }
.hero__scrim .sl { opacity: var(--sl, 0); background: linear-gradient(90deg, rgb(5 11 28 / .86) 0%, rgb(5 11 28 / .7) 18%, rgb(5 11 28 / .4) 38%, rgb(5 11 28 / .12) 56%, transparent 72%); }
.hero__scrim .sr { opacity: var(--sr, 0); background: linear-gradient(270deg, rgb(5 11 28 / .86) 0%, rgb(5 11 28 / .7) 18%, rgb(5 11 28 / .4) 38%, rgb(5 11 28 / .12) 56%, transparent 72%); }
.hero__scrim .sb { opacity: var(--sb, 0); background: linear-gradient(0deg, rgb(5 11 28 / .9) 0%, rgb(5 11 28 / .68) 22%, rgb(5 11 28 / .3) 45%, transparent 70%); }
.hero__shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgb(var(--shadow-rgb) / .28) 100%), linear-gradient(180deg, rgb(var(--shadow-rgb) / .18) 0%, transparent 18%, transparent 70%, rgb(var(--shadow-rgb) / .28) 100%); }
.hero__frame { position: absolute; inset: clamp(14px, 2.2vw, 28px); pointer-events: none; }
.hero__frame i { position: absolute; width: 26px; height: 26px; border-color: rgb(var(--ivory-rgb) / .75); border-style: solid; border-width: 0; }
.hero__frame i:nth-child(1) { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; }
.hero__frame i:nth-child(2) { right: 0; top: 0; border-right-width: 1.5px; border-top-width: 1.5px; }
.hero__frame i:nth-child(3) { left: 0; bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.hero__frame i:nth-child(4) { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.hero__layers { position: absolute; inset: 0; pointer-events: none; perspective: 1400px; }
.hero__layers-inner { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }

.ch { --v: 0; --vi: clamp(0, calc(var(--v) * 1.7 - var(--i, 0) * .16), 1); position: absolute; opacity: var(--v); pointer-events: none; visibility: hidden; }
.ch.is-on { pointer-events: auto; }
.ch.is-vis { visibility: visible; }
.ch .st { opacity: var(--vi); transform: translate3d(0, calc((1 - var(--vi)) * 36px), 0); filter: blur(calc((1 - var(--vi)) * 8px)); }
.glass { background: rgb(var(--ivory-rgb) / .6); border: 1px solid rgba(255, 255, 255, .72); box-shadow: 0 30px 70px -40px rgb(var(--shadow-rgb) / .6), 0 1px 0 rgba(255, 255, 255, .8) inset; backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); border-radius: var(--r-lg); }
.hero .glass { backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25); }

.ch--intro { left: var(--gutter); bottom: clamp(88px, 13vh, 140px); width: min(760px, 58vw); }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 18px; white-space: nowrap; }
.dot-live { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px rgb(var(--cyan-rgb) / .9); flex: none; }
.dot-live::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--cyan); animation: ping 2s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.hero-name { display: block; font-size: clamp(3rem, 8.2vw, 8rem); font-weight: 800; line-height: 1; letter-spacing: -.055em; color: var(--ink); }
.hero-name .hn { display: inline-block; overflow: hidden; vertical-align: top; padding: .18em .16em .16em; margin: -.18em -.16em -.16em; }
.hero-name .hn > span { display: inline-block; transform: translate3d(0, 112%, 0) rotate(5deg); transform-origin: 0 100%; transition: transform 1.3s var(--ease); }
body.is-ready .hero-name .hn > span { transform: none; }
body.is-ready .hero-name .hn:nth-child(2) > span { transition-delay: .08s; }
body.is-ready .hero-name .hn:nth-child(3) > span { transition-delay: .16s; }
.hero-role { margin-top: 20px; display: flex; align-items: center; gap: 14px; white-space: nowrap; font-size: clamp(1rem, 1.4vw, 1.2rem); font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.hero-role .sep { width: 1px; height: 1.05em; border-radius: 1px; background: var(--ink-3); }
.hero-pos { margin-top: 12px; max-width: 33.5em; font-size: var(--hero-body); line-height: 1.62; color: var(--ink-2); -webkit-line-clamp: 8; line-clamp: 8; }   /* cùng cỡ với chữ các chương (--hero-body); bề rộng theo em để số chữ mỗi dòng không đổi khi cỡ chữ đổi */
.hero-pos--m { display: none; }   /* bản điện thoại của đoạn giới thiệu, chỉ hiện ≤ 760px */
.hero-cta { margin-top: 26px; }
.intro-fade { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
body.is-ready .intro-fade { opacity: 1; transform: none; }
body.is-ready .intro-fade.d1 { transition-delay: .25s; } body.is-ready .intro-fade.d2 { transition-delay: .38s; }
body.is-ready .intro-fade.d3 { transition-delay: .5s; } body.is-ready .intro-fade.d4 { transition-delay: .62s; }

.ch--left { left: var(--gutter); top: 50%; transform: translateY(-46%); width: min(560px, 40vw); }
.ch--right { right: calc(var(--gutter) + 40px + var(--ch-shift, 0px)); top: 50%; transform: translateY(-46%); width: min(560px, 40vw); }
/* js/hero.js gán is-left / is-right (+ is-low khi mặt quá to, chữ hạ xuống dưới cằm) theo vị trí mặt trong khung hình */
@media (min-width: 761px) {
  .ch.is-left, .ch.is-right { width: var(--chw, min(560px, 40vw)); top: 50%; transform: translateY(-46%); }
  .ch.is-left { left: var(--gutter); right: auto; }
  .ch.is-right { right: calc(var(--gutter) + 40px + var(--ch-shift, 0px)); left: auto; }   /* --ch-shift: js/hero.js alignTitles() */
  .ch.is-low { top: auto; bottom: clamp(36px, 6vh, 80px); transform: none; }
}
/* Chữ trên hero: trắng, đặt thẳng lên video (tấm phủ tối lo phần tương phản) */
.hero__layers { --hero-fg: #fff; --hero-fg-2: rgb(255 255 255 / .84); --hero-accent: #7FE3F2; --hero-sh: 0 1px 2px rgb(4 10 26 / .4), 0 6px 30px rgb(4 10 26 / .45); --hero-body: clamp(17px, 1.18vw, 18.4px); }
.ch__kicker { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--hero-fg-2); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.ch__kicker::before { content: ""; width: 26px; height: 1px; background: currentColor; }
/* 4 tiêu đề chương cùng một cỡ (cỡ "Kết quả nổi bật" của bản cũ), luôn 1 dòng: được dài hơn cột chữ, không thu nhỏ */
.ch__title { display: block; font-size: clamp(2.3rem, 4.2vw, 4.2rem); font-weight: 800; letter-spacing: -.038em; line-height: 1.06; color: var(--hero-fg); text-shadow: var(--hero-sh); white-space: nowrap; }
.ch__rule { display: block; height: 2px; width: calc(var(--v) * 72px); margin: 20px 0 4px; border-radius: 2px; background: linear-gradient(90deg, var(--hero-accent), rgb(127 227 242 / 0)); opacity: var(--v); }
/* nội dung hero căn đều hai bên; riêng dòng cuối để tự nhiên cho khỏi giãn chữ */
.ch__text, .hero-pos { text-align: justify; text-align-last: left; -webkit-hyphens: none; hyphens: none; }
.ch__text { -webkit-line-clamp: 8; line-clamp: 8; margin-top: 14px; max-width: 46ch; font-size: var(--hero-body); line-height: 1.62; color: var(--hero-fg-2); text-shadow: var(--hero-sh); }
.ch .ch__chips { display: grid; gap: 14px; margin-top: 20px; }
/* Mỗi mốc là một hàng 3 cột: năm · vai trò · công ty. Cột công ty canh về mép phải nên các
   công ty thẳng một hàng dọc dù vai trò dài ngắn khác nhau (mỗi cột là MỘT phần tử, không để
   chữ trần trong lưới: js/hero.js tách chữ thành span nên lưới sẽ nuốt mất dấu cách). */
.ch .chip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; column-gap: clamp(14px, 1.6vw, 26px); padding: 0; border: 0; background: none; border-radius: 0; line-height: 1.5; color: var(--hero-fg); text-shadow: var(--hero-sh); }
.ch .chip b { font-size: 1.22em; font-weight: 800; letter-spacing: -.01em; color: var(--hero-accent); font-variant-numeric: tabular-nums; }
.ch .chip { text-transform: uppercase; letter-spacing: .055em; font-size: clamp(.92rem, 1vw, 1.05rem); font-weight: 600; }
.ch .chip i { font-style: normal; }
.ch .chip__role { font-weight: 600; }
.ch .chip__org { justify-self: end; font-weight: 600; color: rgb(255 255 255 / .74); }
.ch__stats { display: grid; gap: 22px; margin-top: 22px; container-type: inline-size; }
.ch-stat { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 18px; align-items: center; padding: 0; border: 0; background: none; }
.ch-stat b { font-size: clamp(2.05rem, 2.7vw, 2.8rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; min-width: 2.35em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--hero-fg); text-shadow: var(--hero-sh); }
.ch-stat b small { font-size: .46em; font-weight: 700; margin-left: 3px; color: var(--hero-accent); }
.ch-stat > span { font-size: clamp(1rem, 1.08vw, 1.15rem); color: var(--hero-fg-2); line-height: 1.55; text-shadow: var(--hero-sh);
  text-align: justify; text-align-last: left; -webkit-hyphens: none; hyphens: none; max-width: 24rem; }
/* Nhãn dùng đúng cỡ chữ của .ch__text (phần nội dung còn lại trong hero), căn đều hai bên;
   dòng cuối để tự nhiên cho khỏi giãn chữ. max-width chặn dòng quá dài trên màn rộng. */
/* Khối hẹp (màn nhỏ, hoặc bên trống của khung hình hẹp): số nằm trên, nhãn nằm dưới và chiếm
   trọn bề ngang — để hai cột thì nhãn phải xuống 3 dòng. */
@container (max-width: 430px) {
  .ch-stat { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ch-stat b { min-width: 0; }
}
/* Chữ nhảy theo cuộn: mỗi ký tự (u--c) / từ (u--w) có mốc --d riêng, hiện dần theo tiến trình --v của chương (cuộn ngược thì thu lại) */
.ch .u { display: inline-block; white-space: pre; --ci: clamp(0, calc((var(--v) - var(--d)) / min(var(--dur), calc(1 - var(--d)))), 1); opacity: var(--ci); will-change: transform, opacity, filter; }
.ch .uw { display: inline-block; white-space: nowrap; }   /* một từ (các ký tự .u--c) không bị ngắt giữa chừng */
.ch .u--c { --dur: .38; transform-origin: 30% 100%; transform: translate3d(0, calc((1 - var(--ci)) * .42em), 0) rotate(calc((1 - var(--ci)) * -4deg)) scale(calc(.92 + .08 * var(--ci))); filter: blur(calc((1 - var(--ci)) * 4px)); }
.ch .u--w { --dur: .34; transform: translate3d(0, calc((1 - var(--ci)) * 16px), 0); filter: blur(calc((1 - var(--ci)) * 3px)); }
/* chữ nhấn trong hero: một màu cyan sáng (gradient cắt theo từng ký tự sẽ vỡ màu) */
.hero .grad, .hero .grad .u, .ch .chip b .u, .ch-stat b .u, .ch__title .u { background: none; }
/* dự phòng khi JS chưa tô gradient theo ký tự (paintTitleGradient trong js/hero.js) */
.hero .grad, .hero .grad .u { color: var(--hero-accent); -webkit-text-fill-color: var(--hero-accent); }
.hero-name .gc, .ch__title .u { transition: none; }
/* tên trong hero không bị tách ký tự nên vẫn dùng được gradient: cyan → xanh điện, rực và nét hơn */
/* KHÔNG gắn gradient + filter riêng cho một chữ trong .hero-name: .hn bị overflow:hidden (hiệu ứng chữ trồi lên)
   nên vùng sáng của filter bị cắt thành ô chữ nhật, và một chữ đổi màu đột ngột trông như miếng dán.
   Gradient của tiêu đề hero được tô theo TỪNG KÝ TỰ trong js/hero.js (paintTitleGradient). */
.ch .chip b .u, .ch-stat b .u, .ch__title .u, .ch__text .u, .ch-stat > span .u { -webkit-text-fill-color: currentColor; color: inherit; }

/* Chương mở đầu (tên + giới thiệu) cũng dùng chữ trắng trên tấm phủ */
.hero-eyebrow { color: var(--hero-fg-2); text-shadow: var(--hero-sh); }
.hero-name { color: var(--hero-fg); text-shadow: 0 2px 8px rgb(4 10 26 / .55); }   /* bóng phải gọn hơn vùng cắt của .hn, nếu không sẽ lộ ô chữ nhật */
.hero-role { color: var(--hero-fg); text-shadow: var(--hero-sh); }
.hero-role .sep { background: rgb(255 255 255 / .5); }
.hero-pos { color: var(--hero-fg-2); text-shadow: var(--hero-sh); }
.hero .btn--ghost { color: #fff; border-color: rgb(255 255 255 / .45); background: rgb(255 255 255 / .1); }
.hero .btn--ghost:hover { color: var(--ink); border-color: #fff; background: rgb(255 255 255 / .92); }

.hud { position: absolute; inset: 0; pointer-events: none; color: var(--ivory); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.hud__pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px; background: rgb(var(--shadow-rgb) / .3); border: 1px solid rgb(var(--ivory-rgb) / .16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hud__cam { position: absolute; right: calc(var(--gutter) + 8px); bottom: clamp(30px, 4.6vh, 44px); display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.hud__cam em { font-style: normal; color: var(--greige); opacity: .8; }
.hud__scroll { position: absolute; left: 50%; bottom: clamp(26px, 4vh, 40px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; transition: opacity .6s; }
.hud__mouse { width: 22px; height: 34px; border-radius: 12px; border: 1.5px solid rgb(var(--ivory-rgb) / .8); position: relative; }
.hud__mouse::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--ivory); animation: wheel 1.8s var(--ease) infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }
.hud__rail { position: absolute; z-index: 2; right: calc(var(--gutter) + 8px); top: 50%; transform: translateY(-50%); display: grid; gap: 12px; justify-items: end; pointer-events: auto; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; transition: opacity .5s; }
.hud__tick { display: flex; align-items: center; gap: 10px; color: rgb(var(--ivory-rgb) / .7); font-size: 10.5px; letter-spacing: .14em; }
.hud__tick span { opacity: 0; transform: translateX(6px); transition: opacity .4s, transform .4s var(--ease); }
.hud__tick i { width: 18px; height: 1.5px; border-radius: 2px; background: rgb(var(--ivory-rgb) / .55); transition: width .5s var(--ease), background .3s; }
.hud__tick:hover span, .hud__tick.is-active span { opacity: 1; transform: none; }
.hud__tick:hover i { width: 28px; }
.hud__tick.is-active i { width: 36px; background: var(--ivory); }
.hud__progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--grad-sheen); }
/* Section đầu tiên sau hero (Giới thiệu) trượt đè lên 100vh cuối của hero */
.handoff { position: relative; z-index: 3; margin-top: -100vh; border-radius: 34px 34px 0 0; box-shadow: 0 -30px 60px -30px rgb(var(--shadow-rgb) / .45); }

/* ------------------------------ Marquee ------------------------------ */
.marquee { position: relative; z-index: 3; overflow: hidden; padding-block: 24px; border-block: 1px solid var(--line); background: var(--ivory); }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__group { display: flex; align-items: center; gap: 44px; padding-right: 44px; }
.marquee__item { font-size: clamp(1.5rem, 3.2vw, 2.6rem); font-weight: 800; letter-spacing: -.04em; white-space: nowrap; color: var(--ink); transition: color .4s; }
.marquee__item.o { color: transparent; -webkit-text-stroke: 1.2px var(--taupe); }
.marquee__item:hover { color: var(--blue); }
.marquee__star { width: 22px; height: 22px; color: var(--sky); flex: none; }

/* ==========================================================================
   3. GIỚI THIỆU
   ========================================================================== */
.about__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
/* Khung dính cách đỉnh 104px khi thanh điều hướng đang hiện (76px + 28px). Khi cuộn xuống thanh điều hướng ẩn đi
   (.nav.is-hidden) thì kéo khung lên sát đỉnh, nếu không sẽ lộ một khoảng trống lớn phía trên video. */
.portrait { position: sticky; top: 104px; transition: top .6s var(--ease); }
.nav.is-hidden ~ main .portrait { top: 24px; }
.tilt { transform-style: preserve-3d; transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .8s var(--ease); }
.tilt.is-tilting { transition: transform .15s linear; }
.portrait__card { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-float); background: var(--greige); }
/* video phủ kín khung, KHÔNG parallax (data-speed): khung nằm trong .portrait dính (sticky) nên phép đo vị trí của
   parallax bị lệch theo cuộn và đẩy video tụt xuống, lộ nền phía trên */
.portrait__card img, .portrait__card video { display: block; width: 100%; max-width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.portrait__card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, .28), transparent 60%); mix-blend-mode: soft-light; pointer-events: none; }
.portrait__badge { position: absolute; transform: translateZ(60px); padding: 12px 16px; border-radius: 18px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.portrait__badge--a { left: -18px; bottom: 56px; }
.portrait__badge b { font-size: 1.3rem; font-weight: 800; letter-spacing: -.03em; }
.portrait__cap { margin-top: 18px; display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-3); }

/* ảnh lộ dần */
.reveal-img { clip-path: inset(100% 0 0 0 round var(--r-xl)); transition: clip-path 1.4s var(--ease-io); }
.reveal-img img, .reveal-img video { transform: scale(1.18); transition: transform 1.8s var(--ease); }
.reveal-img.is-in { clip-path: inset(0 0 0 0 round var(--r-xl)); }
.reveal-img.is-in img, .reveal-img.is-in video { transform: scale(1); }

.about__content { display: grid; min-width: 0; }
.about__block { display: grid; gap: 10px; padding-block: 26px; border-top: 1px solid var(--line); min-width: 0; }
.about__block:first-child { border-top: 0; padding-top: 4px; }
/* min-width: 0 là bắt buộc cho phần tử [data-fit] / white-space: nowrap nằm trong grid:
   min-width mặc định (auto) = bề ngang cả chuỗi chữ, đủ sức đẩy layout viewport của điện thoại
   rộng ra (390 -> 495px, cả trang vuốt ngang được). Có chặn bề ngang thì js/fx.js mới co được cỡ chữ. */
.about__k, .about__title { min-width: 0; }
.about__k { font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); display: flex; gap: 12px; align-items: center; white-space: nowrap; }
.about__k span { color: var(--ink); }
.about__title { display: block; font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.25; }
.roles { display: flex; flex-wrap: wrap; gap: 8px; }
/* thẻ tròn dùng ở "Vai trò đã đảm nhận" (hero có style riêng ở .ch .chip) */
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap;
  background: rgba(255, 255, 255, .6); border: 1px solid var(--line); color: var(--ink-2); transition: background .35s, color .35s, border-color .35s, transform .5s var(--ease); }
.chip b { font-weight: 800; color: var(--ink); }
.roles .chip:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); transform: translateY(-2px); }
.strengths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.strength { position: relative; min-width: 0; padding: 20px 18px; border-radius: var(--r-md); background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .85); box-shadow: var(--shadow-card); display: grid; gap: 8px; align-content: start; transition: transform .6s var(--ease); }
.strength:hover { transform: translateY(-5px); }
.strength > svg { width: 26px; height: 26px; color: var(--ink); transition: transform .6s var(--ease); }
.strength:hover > svg { transform: rotate(-12deg) scale(1.1); }
.strength h4 { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; }
.about__block .desc { text-align: justify; text-align-last: left; text-justify: inter-word; }
.strength .desc { font-size: 13px; display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }

/* Timeline dọc */
.tl-list { position: relative; display: grid; gap: 12px; padding-left: 34px; margin-top: 6px; }
.tl-list__line { position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.tl-list__line i { position: absolute; inset: 0; transform-origin: top; transform: scaleY(var(--tl, 0)); background: linear-gradient(180deg, var(--cyan), var(--blue) 45%, var(--ink)); }
.tl { position: relative; min-width: 0; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; padding: 16px 20px; border-radius: var(--r-md); background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .85); box-shadow: var(--shadow-card); transition: transform .6s var(--ease), background .4s; }
.tl:hover { transform: translateX(6px); background: #fff; }
.tl::before { content: ""; position: absolute; left: -29px; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: var(--ivory); border: 2px solid var(--taupe); transition: background .4s, border-color .4s, box-shadow .4s, transform .4s var(--ease); }
.tl.is-lit::before { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 6px rgb(var(--blue-rgb) / .14); }
.tl:hover::before { transform: scale(1.25); }
.tl__time { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding-top: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tl__main { min-width: 0; display: grid; gap: 2px; }
.tl__role { display: block; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.35; }
.tl__org { font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.tl .desc { font-size: 13px; margin-top: 4px; }
.tl--goal { background: var(--grad-dark); color: var(--ivory); border-color: transparent; }
.tl--goal:hover { background: var(--grad-dark); }
.tl--goal .tl__time { color: var(--taupe); }
.tl--goal .tl__org { color: var(--greige); }
.tl--goal::before { background: var(--espresso); border-color: var(--taupe); }

/* ==========================================================================
   4. GIÁ TRỊ — danh sách mở/đóng
   ========================================================================== */
/* Bố cục: danh sách 5 giá trị dạng dòng kẻ mảnh (không hộp, không nút "+") + bảng chi tiết dính bên phải (máy tính).
   Rê chuột vào một dòng là bảng bên phải đổi nội dung (js/sections.js initValues). Dưới 1025px hoặc màn cảm ứng:
   bảng ẩn, bấm dòng để mở nội dung ngay bên dưới (accordion). */
.values { display: grid; gap: 40px; }
.vlist { display: grid; border-top: 1px solid var(--line); }
.vrow { position: relative; border-bottom: 1px solid var(--line); }
.vrow__head { position: relative; width: 100%; display: grid; grid-template-columns: 34px 40px minmax(0, 1fr) 34px; align-items: center; gap: 14px; padding: 18px 4px; text-align: left; cursor: pointer; }
.vrow__num { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--ink-3); font-variant-numeric: tabular-nums; transition: color .35s; }
.vrow__icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--ink-2); background: rgba(255, 255, 255, .7); border: 1px solid var(--line-2); transition: background .4s, color .4s, border-color .4s; }
.vrow__icon svg { width: 18px; height: 18px; }
.vrow__title { display: block; min-width: 0; font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.3; color: var(--ink-2); transition: color .35s, transform .55s var(--ease); }
.vrow__toggle { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--ink-2); background: rgba(255, 255, 255, .8); transition: transform .5s var(--ease), background .4s, color .4s, border-color .4s; }
.vrow__toggle svg { width: 15px; height: 15px; }
.vrow__go { display: none; }
.vrow:hover .vrow__title, .vrow.is-open .vrow__title { color: var(--ink); }
.vrow.is-open .vrow__num { color: var(--blue); }
.vrow.is-open .vrow__icon { background: var(--grad-btn-hover); color: #fff; border-color: transparent; }
.vrow.is-open .vrow__toggle { transform: rotate(45deg); background: var(--ink); color: var(--ivory); border-color: transparent; }
.vrow__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.vrow.is-open .vrow__body { grid-template-rows: 1fr; }
.vrow__inner { overflow: hidden; min-height: 0; }
.vrow__content { display: grid; gap: 12px; max-width: 720px; padding: 0 4px 22px calc(34px + 40px + 28px); opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.vrow.is-open .vrow__content { opacity: 1; transform: none; transition-delay: .1s; }
.vrow__content .desc, .vpanel .desc { display: block; font-size: 15px; line-height: 1.7; color: var(--ink-2); text-align: justify; text-justify: inter-word; hyphens: manual; -webkit-hyphens: manual; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.vrow__proof { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13.5px; line-height: 1.6; color: var(--ink); text-align: justify; text-justify: inter-word; padding: 12px 14px; border-radius: var(--r-sm); background: rgb(var(--blue-rgb) / .05); border: 1px solid rgb(var(--blue-rgb) / .12); }
.vrow__proof span { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); padding: 3px 9px; border-radius: 999px; background: rgb(var(--blue-rgb) / .1); white-space: nowrap; margin-top: 1px; }
/* bảng chi tiết (chỉ máy tính) */
.vpanel { display: none; }
@media (min-width: 1025px) and (hover: hover) {
  .values { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
  .vlist { border-top-color: var(--line-2); }
  .vrow { border-bottom-color: var(--line-2); }
  .vrow__head { grid-template-columns: 34px minmax(0, 1fr) 28px; padding: 23px 6px 23px 0; }
  .vrow__icon, .vrow__toggle, .vrow__body { display: none; }
  .vrow__go { display: grid; place-items: center; width: 28px; height: 28px; color: var(--blue); opacity: 0; transform: translateX(-10px); transition: opacity .35s, transform .55s var(--ease); }
  .vrow__go svg { width: 18px; height: 18px; }
  .vrow:hover .vrow__go, .vrow.is-open .vrow__go { opacity: 1; transform: none; }
  .vrow.is-open .vrow__title { transform: translateX(6px); }
  .vrow__title { font-size: clamp(1.1rem, 1.5vw, 1.35rem); }
  /* vạch nhấn mảnh bên trái dòng đang chọn */
  .vrow::before { content: ""; position: absolute; left: -20px; top: 50%; width: 3px; height: 0; border-radius: 2px; background: var(--grad-btn-hover); transform: translateY(-50%); transition: height .45s var(--ease); }
  .vrow.is-open::before { height: 30px; }

  .vpanel { display: block; position: sticky; top: 120px; min-height: 380px; padding: clamp(30px, 3.2vw, 46px); border-radius: var(--r-lg); overflow: hidden; isolation: isolate;
    background: linear-gradient(160deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .72)); border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 0 0 1px rgb(var(--ink-rgb) / .05), var(--shadow-float); }
  .vpanel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 100% 0%, rgb(var(--taupe-rgb) / .38), transparent 70%), radial-gradient(50% 40% at 0% 100%, rgb(var(--cyan-rgb) / .09), transparent 70%); }
  .vpanel__num { position: absolute; right: 22px; top: 10px; width: 1.4em; height: 1em; overflow: visible; font-size: clamp(6rem, 8.5vw, 8.5rem); user-select: none; pointer-events: none; }
  .vpanel__num text { font: 800 1em/1 var(--font); letter-spacing: -.06em; font-variant-numeric: tabular-nums; fill: none; stroke: url(#vnum-g); stroke-width: 1.6px; stroke-linejoin: round; opacity: .55; }
  .vpanel__in { position: relative; display: grid; gap: 18px; transition: opacity .26s var(--ease), transform .4s var(--ease); }
  .vpanel.is-swap .vpanel__in { opacity: 0; transform: translateY(10px); }
  .vpanel__icon { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; color: #fff; background: var(--grad-btn-hover); box-shadow: 0 14px 28px -14px rgb(var(--blue-rgb) / .8); }
  .vpanel__icon svg { width: 26px; height: 26px; }
  .vpanel__title { display: block; min-width: 0; font-size: clamp(1.5rem, 2.2vw, 1.95rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.15; color: var(--ink); white-space: nowrap; }
  .vpanel .desc { font-size: clamp(14.5px, 1.25vw, 16px); line-height: 1.75; max-width: 560px; }
  .vpanel .vrow__proof { margin-top: 2px; font-size: 14px; padding: 13px 16px; }
}

/* ==========================================================================
   5. NĂNG LỰC
   ========================================================================== */
.skills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.skill { position: relative; min-width: 0; padding: 26px 24px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .66); border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 10px; min-height: 300px; transition: transform .7s var(--ease), background .5s; }
.skill:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .9); }
.skill__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.skill__ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--grad-lux); color: var(--ink); border: 1px solid rgba(255, 255, 255, .9); transition: transform .7s var(--ease); }
.skill:hover .skill__ico { transform: rotate(-10deg) scale(1.06); }
.skill__ico svg { width: 22px; height: 22px; }
.skill__idx { font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: .1em; white-space: nowrap; }
.skill__title { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.25; }
.skill__sub { font-size: 12.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Lớp bọc của accordion Năng lực: máy tính coi như không có, bố cục thẻ giữ nguyên (xem initSkills).
   display: contents xoá hộp của <button> nhưng thuộc tính kế thừa thì VẪN truyền xuống,
   nên phải trả text-align về trái, nếu không chữ trong thẻ bị canh giữa theo mặc định của nút. */
.skill__head, .skill__body, .skill__inner { display: contents; }
.skill__head { text-align: left; }
.skill__toggle { display: none; }
.checks { display: grid; gap: 9px; margin-top: auto; padding-top: 14px; }
.checks li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; transition: transform .45s var(--ease); }
.checks li:hover { transform: translateX(4px); }
.checks li::before { content: ""; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / 11px no-repeat, var(--grad-btn-hover); }
/* Ô trọng tâm "Marketing Strategy": ảnh chân dung ngoài đồng cỏ làm nền (assets/img/skills/strategy.jpg, nhân vật ở bên trái),
   phủ một lớp màu navy trong suốt đậm dần từ trên xuống, toàn bộ chữ màu trắng. Chữ căn lề bình thường như các ô khác, được phép đè lên ảnh. */
.skill--feat, .skill--feat:hover { grid-column: span 2; color: #fff; isolation: isolate; overflow: hidden; border-color: rgba(255, 255, 255, .32);
  background: #0F1A3A url("../assets/img/skills/strategy.webp") 22% 30% / cover no-repeat; }
.skill--feat::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgb(10 20 58 / .3) 0%, rgb(10 20 58 / .44) 45%, rgb(10 20 58 / .78) 100%); }
.skill--feat .skill__title { font-size: 1.9rem; color: #fff; }
.skill--feat .skill__sub { color: rgba(255, 255, 255, .78); }
.skill--feat .skill__idx { color: rgba(255, 255, 255, .72); }
.skill--feat .desc { max-width: 520px; color: rgba(255, 255, 255, .9); }
.skill--feat .checks li { color: #fff; }
.skill--feat .skill__ico { color: #fff; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@media (min-width: 1025px) { .skill--feat { min-height: 340px; } }
/* màn hẹp: ô đứng nên ảnh bị cắt hai bên → dịch khung nhìn sang phải để nhân vật nép mép trái, chữ nằm trên nền trời */
@media (max-width: 1024px) { .skill--feat, .skill--feat:hover { background-position: 40% 30%; }
  .skill--feat::before { background: linear-gradient(180deg, rgb(10 20 58 / .34) 0%, rgb(10 20 58 / .5) 45%, rgb(10 20 58 / .8) 100%); } }
.checks--2 { grid-template-columns: 1fr 1fr; column-gap: 18px; }
.skill--tools { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px; min-height: 320px; background: radial-gradient(75% 85% at 100% 100%, rgb(var(--taupe-rgb) / .24) 0%, transparent 68%), radial-gradient(55% 70% at 18% 0%, rgb(29 63 138 / .32) 0%, transparent 65%), linear-gradient(132deg, #060A17 0%, #0B1530 28%, #132550 58%, #1C3670 82%, #26488E 100%); color: var(--ivory); border-color: rgba(255, 255, 255, .1); }
.skill--tools .skill__ico svg { fill: none; color: #0B1633; }
.skill--tools:hover { background: radial-gradient(75% 85% at 100% 100%, rgb(var(--taupe-rgb) / .28) 0%, transparent 68%), radial-gradient(55% 70% at 18% 0%, rgb(29 63 138 / .36) 0%, transparent 65%), linear-gradient(132deg, #060A17 0%, #0B1530 28%, #132550 58%, #1C3670 82%, #26488E 100%); transform: none; }
.skill--tools__info { display: flex; flex-direction: column; gap: 10px; justify-content: center; min-width: 0; }
.skill--tools .skill__sub { color: var(--taupe); }
.skill--tools .skill__idx { color: var(--taupe); }
.sphere { position: relative; min-height: 280px; cursor: grab; touch-action: pan-y; user-select: none; }
.sphere:active { cursor: grabbing; }
.sphere span { position: absolute; left: 50%; top: 50%; white-space: nowrap; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: linear-gradient(135deg, rgb(7 12 28 / .95) 0%, rgb(15 28 62 / .93) 55%, rgb(25 47 98 / .91) 100%); border: 1px solid rgb(var(--ivory-rgb) / .18); color: var(--ivory); will-change: transform, opacity; }

/* ==========================================================================
   6. QUY TRÌNH — sân khấu theo cuộn
   ========================================================================== */
.process { position: relative; }
.process__pin { height: 380vh; position: relative; }
.process__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 64px; overflow: hidden; }
.process .sec-head { margin-bottom: clamp(26px, 4vh, 44px); }
.process__count { font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.process__count small { font-size: .5em; color: var(--taupe); letter-spacing: 0; }
.pflow__rail { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: clamp(26px, 5vh, 52px); }
.pflow__line { position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 7px; height: 2px; background: rgb(var(--ivory-rgb) / .12); border-radius: 2px; }
.pflow__line i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--pp, 0)); background: linear-gradient(90deg, var(--cyan), var(--sky) 50%, var(--taupe)); border-radius: 2px; }
.pflow__line b { position: absolute; top: 50%; left: calc(var(--pp, 0) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--ivory); box-shadow: 0 0 0 6px rgb(var(--ivory-rgb) / .12), 0 0 26px rgb(var(--ivory-rgb) / .7); }
.pnode { position: relative; display: grid; justify-items: center; gap: 8px; color: rgb(var(--ivory-rgb) / .45); transition: color .45s; min-width: 0; }
.pnode__dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgb(var(--ivory-rgb) / .3); background: var(--espresso); transition: background .4s, border-color .4s, transform .5s var(--ease), box-shadow .5s; }
.pnode__n { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; }
.pnode__t { font-size: 13px; font-weight: 600; white-space: nowrap; }
.pnode:hover { color: var(--ivory); }
.pnode:hover .pnode__dot { transform: scale(1.2); }
.pnode.is-on { color: rgb(var(--ivory-rgb) / .85); }
.pnode.is-on .pnode__dot { background: var(--ivory); border-color: var(--ivory); }
.pnode.is-current { color: var(--ivory); }
.pnode.is-current .pnode__dot { transform: scale(1.3); box-shadow: 0 0 0 7px rgb(var(--ivory-rgb) / .14); }
.pflow__stage { position: relative; min-height: clamp(220px, 32vh, 300px); }
.pstep { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(24px, 5vw, 80px); align-items: center; opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(8px); transition: opacity .6s var(--ease), transform .9s var(--ease), filter .6s var(--ease); pointer-events: none; }
.pstep.is-current { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.pstep__n { font-size: clamp(6rem, 15vw, 12.5rem); font-weight: 800; line-height: .8; letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 1.5px rgb(var(--ivory-rgb) / .32); }
.pstep:nth-of-type(odd) .pstep__n { color: var(--ivory); -webkit-text-stroke: 0; }
.pstep__body { min-width: 0; display: grid; gap: 14px; }
.pstep__title { display: block; font-size: clamp(1.6rem, 3.2vw, 2.9rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.12; }
.pstep .desc { max-width: 560px; font-size: 15px; }
.pstep__out { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--greige); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-light); white-space: nowrap; }

/* ==========================================================================
   7. DỰ ÁN
   ========================================================================== */
/* Section "Dự án đã triển khai" (bức tường dự án, bấm ô mở Google Drive) nằm trong css/showcase.css */

/* ==========================================================================
   8. ĐỐI TÁC — 2 hàng logo chạy ngược chiều (JS: sections.js › renderPartners)
   ========================================================================== */
/* Logo TRẮNG trên nền tối (kiểu ledinhtuan.com): mỗi logo nằm giữa một ô cùng cỡ.
   Cỡ logo: JS đặt --w/--h (px ở máy tính) theo tỉ lệ khung + hệ số scale; --u thu nhỏ theo màn hình. */
#doi-tac { background: radial-gradient(70% 55% at 50% 58%, rgb(var(--blue-rgb) / .1), transparent 70%), linear-gradient(180deg, #070A15 0%, #0A0E1F 100%); }
.logos { --cell: 252px; --row: 96px; --u: 1px; display: grid; gap: 18px; }
.logos__row {
  overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.logos__row.is-drag { cursor: grabbing; }
.logos__track { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; will-change: transform; }
.logos__item { flex: none; }
.logos__box { display: grid; place-items: center; width: var(--cell); height: var(--row); }
.logos__box img { display: block; width: calc(var(--w, 120) * var(--u)); height: calc(var(--h, 36) * var(--u)); object-fit: contain; pointer-events: none;
  opacity: .92; transition: opacity .4s, transform .55s var(--ease); }
.logos__item:hover .logos__box img { opacity: 1; transform: scale(1.06); }
.logos__word { display: grid; justify-items: center; gap: 5px; font-size: 1.45rem; font-weight: 800; letter-spacing: -.045em; line-height: 1; color: #fff; white-space: nowrap; }
.logos__word small { font-size: 10px; font-weight: 600; letter-spacing: .34em; margin-right: -.34em; text-transform: uppercase; }
.logos-cta { display: flex; width: max-content; max-width: 100%; margin: clamp(30px, 4vw, 48px) auto 0; align-items: center; gap: 10px; font-size: 14px; color: rgb(var(--ivory-rgb) / .6); }
.logos-cta b { color: var(--ivory); font-weight: 700; }
.logos-cta svg { width: 16px; height: 16px; color: var(--ivory); transition: transform .4s var(--ease); }
.logos-cta:hover svg { transform: translateX(4px); }

/* ==========================================================================
   9. FEEDBACK
   ========================================================================== */
.fb__viewport {
  --bleed: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  overflow: hidden; cursor: grab;
  margin-inline: calc(var(--bleed) * -1); padding: 10px var(--bleed) 30px;
  -webkit-mask-image: none;
  mask-image: none;
}
.fb__viewport.is-drag { cursor: grabbing; }
.fb__track { display: flex; gap: 18px; width: max-content; will-change: transform; }
.quote { position: relative; width: min(420px, 82vw); padding: 30px 28px 26px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 18px; min-height: 300px; user-select: none; transition: transform .6s var(--ease); }
.quote:hover { transform: translateY(-6px); }
.quote__mark { width: 36px; height: 36px; color: var(--taupe); }
.quote__text { font-size: 15.5px; color: var(--ink-2); display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; } /* không cắt dòng: nhận xét đã viết gọn khoảng 4 dòng, luôn hiện trọn câu */
.quote__who { margin-top: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding-top: 18px; border-top: 1px solid var(--line); min-width: 0; }
.quote__av { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--grad-lux); color: var(--ink); border: 1px solid #fff; flex: none; overflow: hidden; }
.quote__av img { width: 100%; height: 100%; object-fit: cover; }
.quote__av--logo { width: 64px; height: 64px; padding: 6px; background: #fff; }
.quote__av--logo img { width: 100%; height: 100%; object-fit: contain; }
.quote__name { display: block; font-size: 15px; letter-spacing: -.01em; }
.quote__role { display: block; font-size: 12.5px; color: var(--ink-3); }
.quote--proof { background: var(--grad-dark); color: var(--ivory); border-color: transparent; }
.quote--proof .quote__text { color: rgb(var(--ivory-rgb) / .85); }
.quote--proof .quote__who { border-top-color: rgb(var(--ivory-rgb) / .14); }
.quote--proof .quote__role { color: var(--taupe); }
.quote--proof .quote__av { background: var(--ivory); }
.quote__badge { align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; border: 1px solid currentColor; opacity: .7; white-space: nowrap; }
.quote.is-draft { background: rgba(255, 255, 255, .4); border-style: dashed; border-color: rgb(var(--ink-rgb) / .2); box-shadow: none; }
.quote.is-draft .quote__text { color: var(--ink-3); font-style: italic; }
.fb__nav { display: flex; gap: 10px; }

/* ==========================================================================
   10. LIÊN HỆ
   ========================================================================== */
.cta__panel { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--grad-lux); box-shadow: var(--shadow-float); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); isolation: isolate; }
.cta__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 70% at 10% 0%, rgba(255, 255, 255, .7), transparent 60%), radial-gradient(40% 60% at 90% 100%, rgb(var(--taupe-rgb) / .45), transparent 70%); }
.cta__main { padding: clamp(34px, 6vw, 76px); display: flex; flex-direction: column; justify-content: center; gap: 22px; min-width: 0; }
.cta__title { display: block; font-size: clamp(2.2rem, 5vw, 4.4rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.1; }
.cta__main .desc { max-width: 560px; color: var(--ink-2); }
.cta__meta { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13px; color: var(--ink-3); }
.cta__meta > span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.cta__meta svg { width: 16px; height: 16px; }
.cta__meta b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cta__side { position: relative; padding: clamp(20px, 3vw, 32px); display: grid; place-items: center; }
.bio { width: 100%; max-width: 360px; border-radius: 32px; background: rgb(var(--ivory-rgb) / .7); border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--shadow-float); backdrop-filter: blur(16px); overflow: hidden; transform-style: preserve-3d; }
.bio__photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.bio__photo.reveal-img { clip-path: inset(100% 0 0 0); }
.bio__photo.reveal-img.is-in { clip-path: inset(0 0 0 0); }
.bio__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.bio__photo::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(180deg, transparent 0%, rgb(var(--ivory-rgb) / .76) 54%, rgb(var(--ivory-rgb) / .98) 100%); }
.bio__body { position: relative; margin-top: -104px; padding: 0 22px 22px; display: grid; gap: 12px; transform: translateZ(30px); }
.bio__name { font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.bio__name svg { width: 18px; height: 18px; color: var(--blue); }
.bio__role { font-size: 13px; color: var(--ink-3); margin-top: -8px; }
.bio__sig { width: 100%; display: flex; justify-content: center; align-items: center; margin-bottom: 2px; pointer-events: none; user-select: none; }
.bio__sig img { width: 100%; height: auto; display: block; object-fit: contain; }
.bio__links { display: grid; gap: 8px; }
.bio__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line-2); font-size: 14px; font-weight: 600; transition: transform .4s var(--ease), background .3s, color .3s; text-align: left; width: 100%; }
a.bio__link:hover, button.bio__link:hover { transform: translateX(4px); background: var(--ink); color: var(--ivory); }
a.bio__link:hover small, button.bio__link:hover small { color: var(--taupe); }
.bio__link span { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bio__link span em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bio__link svg { width: 18px; height: 18px; flex: none; }
.bio__link small { font-size: 12px; color: var(--ink-3); font-weight: 600; flex: none; transition: color .3s; }

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
.footer { background: var(--grad-dark); color: var(--ivory); padding-top: clamp(72px, 9vw, 116px); overflow: hidden; position: relative; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .95fr); gap: 40px; padding-bottom: 52px; border-bottom: 1px solid var(--line-light); }
.footer__brand { display: grid; gap: 8px; align-content: start; }
.footer__brand b { font-size: 1.6rem; font-weight: 800; letter-spacing: -.04em; white-space: nowrap; }
.footer__id { display: flex; align-items: center; gap: 12px; }
.footer__logo { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; flex: none; box-shadow: 0 0 0 4px rgb(var(--ivory-rgb) / .06), 0 10px 30px -8px rgb(var(--blue-rgb) / .7); }
.footer__logo img { width: 68%; height: 68%; }
.footer__role { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--taupe); }
.footer__brand .desc { max-width: 340px; font-size: 13.5px; margin-top: 8px; }
.footer h3 { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--taupe); margin-bottom: 16px; }
.footer__list { display: grid; gap: 10px; font-size: 14.5px; }
.footer__list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.footer__list a, .footer__clock { color: rgb(var(--ivory-rgb) / .82); transition: color .3s, transform .4s var(--ease); display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
.footer__list a:hover { color: #fff; transform: translateX(4px); }
.footer__clock b { font-variant-numeric: tabular-nums; color: var(--ivory); }
.footer__cv { display: grid; gap: 12px; align-content: start; }
/* Mạng xã hội dưới câu giới thiệu: nút tròn viền mảnh, rê chuột thì nổi lên thành nền trắng, biểu tượng xanh */
.footer__social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.footer__social a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: rgb(var(--ivory-rgb) / .82); background: rgb(var(--ivory-rgb) / .05); border: 1px solid var(--line-light); transition: color .3s, background .3s, border-color .3s, transform .4s var(--ease), box-shadow .4s var(--ease); }
.footer__social a:hover, .footer__social a:focus-visible { color: var(--blue); background: #fff; border-color: #fff; transform: translateY(-3px); box-shadow: 0 0 0 4px rgb(var(--ivory-rgb) / .06), 0 12px 28px -10px rgb(var(--blue-rgb) / .8); }
.footer__social a:not([href]) { cursor: default; }
.footer__social svg { width: 17px; height: 17px; }
.footer__social .footer__social-fb { width: 20px; height: 20px; }
.footer__social .footer__social-zalo { width: 25px; height: 25px; }
.footer__bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-block: 24px; font-size: 13px; color: rgb(var(--ivory-rgb) / .5); }
.footer__top { display: inline-flex; align-items: center; gap: 8px; color: rgb(var(--ivory-rgb) / .8); }
.footer__top svg { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.footer__top:hover svg { transform: translateY(-3px); }
/* Chữ lớn cuối trang: hiện trọn chữ, từng từ trồi lên khi cuộn tới (data-split + fx.js › initFooterMark) */
.footer__mark { font-size: clamp(3.25rem, 15vw, 16rem); font-weight: 800; letter-spacing: -.07em; line-height: .8; white-space: nowrap; text-align: center; padding-block: 10px clamp(18px, 2.6vw, 38px); user-select: none; }
.footer__mark > span:not(.split), .footer__mark .w__in { display: inline-block; padding-inline: .1em; margin-inline: -.1em; background: linear-gradient(180deg, rgb(var(--ivory-rgb) / .5), rgb(var(--ivory-rgb) / .1)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* letter-spacing âm làm chữ cái cuối lấn ra ngoài hộp của từ: nới cả khung che (.w) lẫn vùng tô nền gradient (.w__in) */
.footer__mark .w { padding-inline: .12em; margin-inline: -.12em; }
.footer__mark .w__in { transition-duration: 1.3s; transition-delay: calc(var(--wi, 0) * 130ms + 80ms); }

/* ==========================================================================
   CURSOR · TOAST · PROGRESS · VỀ ĐẦU TRANG
   ========================================================================== */
.cursor-ring { display: none !important; }
@media (hover: hover) and (pointer: fine) {
  body.has-cursor,
  body.has-cursor *,
  body.has-cursor *::before,
  body.has-cursor *::after {
    cursor: none !important;
  }
}
.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  width: 48px;
  height: 48px;
  margin: -12px 0 0 -20px;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity .2s ease;
}
.has-cursor .cursor:not(.is-out) { opacity: 1; }
.cursor__svg {
  width: 48px;
  height: 48px;
  display: block;
  overflow: visible;
  transform-origin: 20px 14.5px;
  transition: transform .16s cubic-bezier(.22, 1.35, .36, 1);
}
.cursor.is-down .cursor__svg {
  transform: rotate(-16deg);
}
.cursor__fx {
  opacity: 0;
  transition: opacity .15s ease;
}
.cursor[data-fx="rays"] .cursor__fx--rays,
.cursor[data-fx="ripples"] .cursor__fx--ripples,
.cursor[data-fx="dots"] .cursor__fx--dots,
.cursor[data-fx="waves"] .cursor__fx--waves,
.cursor[data-fx="burst"] .cursor__fx--burst,
.cursor.is-down:not([data-fx]) .cursor__fx--rays {
  opacity: 1;
}
.cursor[data-fx="rays"]:not(.is-down) .cursor__fx--rays,
.cursor[data-fx="ripples"]:not(.is-down) .cursor__fx--ripples,
.cursor[data-fx="dots"]:not(.is-down) .cursor__fx--dots,
.cursor[data-fx="waves"]:not(.is-down) .cursor__fx--waves,
.cursor[data-fx="burst"]:not(.is-down) .cursor__fx--burst {
  animation: cur-fx-pulse 1.2s ease-in-out infinite alternate;
}
.cursor__spark,
.cursor__wrist {
  opacity: 0;
  transition: opacity .15s ease;
}
.cursor.is-down .cursor__spark,
.cursor.is-down .cursor__wrist {
  opacity: 1;
}
@keyframes cur-fx-pulse {
  from { opacity: .72; }
  to { opacity: 1; }
}
@media (hover: none), (pointer: coarse) { .cursor, .cursor-ring { display: none !important; } }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 250; transform: translate(-50%, calc(100% + 60px)); padding: 12px 20px; border-radius: 999px; background: var(--ink); color: var(--ivory); font-size: 14px; font-weight: 600; box-shadow: var(--shadow-float); transition: transform .6s var(--ease); display: flex; gap: 10px; align-items: center; white-space: nowrap; }
.toast.is-on { transform: translate(-50%, 0); }
.progress { position: fixed; left: 0; top: 0; right: 0; height: 2px; z-index: 120; transform-origin: left; transform: scaleX(var(--sp, 0)); background: var(--grad-brand); }
.totop { position: fixed; right: clamp(16px, 2.2vw, 26px); bottom: clamp(16px, 2.2vw, 26px); z-index: 110; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgb(var(--ivory-rgb) / .78); border: 1px solid rgba(255, 255, 255, .85); box-shadow: var(--shadow-float); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--ink); opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none; transition: opacity .5s var(--ease), transform .6s var(--ease), background .3s, color .3s; }
.totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { background: var(--ink); color: var(--ivory); }
.totop .ring { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); transform: rotate(-90deg); }
.totop .ring circle { fill: none; stroke-width: 2; }
.totop__track { stroke: var(--line); }
.totop__bar { stroke: var(--blue); stroke-linecap: round; }
.totop > .ico { width: 18px; height: 18px; transition: transform .5s var(--ease); }
.totop:hover > .ico { transform: translateY(-3px); }

/* Hiện dần khi cuộn */
.rv { opacity: 0; transform: translate3d(0, 34px, 0); filter: blur(6px); transition: opacity 1s var(--ease), transform 1.2s var(--ease), filter 1s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.rv.is-in { opacity: 1; transform: none; filter: none; }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  /* 1025–1059px là dải chật nhất (còn đủ chỗ cho menu ngang nhưng thiếu ~7px): thu khoảng cách giữa ba nhóm */
  .nav__inner { gap: 8px; }
  .nav__links a { padding: 9px 10px; font-size: 13.5px; }
  .nav__badge { display: none; }
  .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: span 2; }
}
@media (max-width: 1024px) {
  /* Máy tính bảng: hiện nút menu, giữ cỡ nút 44px và không co theo cuộn */
  .nav, .nav.is-scrolled { --nav-bar: 60px; --nav-ctl: 44px; }
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .sec-head__foot { grid-template-columns: 1fr; }
  .sec-head__rule { display: none; }
  .about__grid { grid-template-columns: 1fr; }
  .portrait { position: relative; top: 0; max-width: 440px; }
  .vrow__content { max-width: none; }
  .cta__panel { grid-template-columns: 1fr; }
  .process:not(.pfx) .process__pin { height: auto; }
  .process:not(.pfx) .process__sticky { position: relative; height: auto; padding-block: clamp(72px, 9.5vw, 112px); overflow: visible; }
  .process:not(.pfx) .sec-head--aside { display: block; margin-bottom: clamp(24px, 3.8vw, 36px); }
  .process:not(.pfx) .sec-head__top { display: none; }
  .process:not(.pfx) .pflow__rail { display: none; }
  .process:not(.pfx) .pflow__stage { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .process:not(.pfx) .pstep {
    position: relative; inset: auto; opacity: 1; transform: none; filter: none; pointer-events: auto;
    display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 12px; row-gap: 10px; align-items: center; align-content: start;
    padding: 20px 18px; border-radius: 20px; border: 1px solid rgb(162 196 254 / .18);
    background: linear-gradient(155deg, rgb(20 36 78 / .65) 0%, rgb(10 20 46 / .85) 100%);
    box-shadow: 0 16px 36px -22px rgb(3 8 24 / .65), inset 0 1px 0 rgb(255 255 255 / .08);
  }
  .process:not(.pfx) .pstep__body { display: contents; }
  .process:not(.pfx) .pstep__n,
  .process:not(.pfx) .pstep:nth-of-type(odd) .pstep__n {
    grid-column: 1; grid-row: 1;
    width: 42px; height: 42px; border-radius: 12px;
    display: grid; place-items: center;
    font-size: 16px; font-weight: 800; line-height: 1; letter-spacing: -.03em;
    color: #8CC2FF; -webkit-text-stroke: 0;
    background: linear-gradient(145deg, rgb(47 140 255 / .22) 0%, rgb(15 32 76 / .72) 100%);
    border: 1px solid rgb(134 186 255 / .28);
    box-shadow: inset 0 1px 0 rgb(225 238 255 / .14);
  }
  .process:not(.pfx) .pstep__title {
    grid-column: 2; grid-row: 1; align-self: center;
    margin: 0; font-size: clamp(1.1rem, 4.4vw, 1.3rem); font-weight: 800; line-height: 1.22;
    color: #F5F8FF; white-space: nowrap !important; overflow: hidden; text-overflow: clip;
  }
  .process:not(.pfx) .pstep .desc {
    grid-column: 1 / -1; grid-row: 2;
    margin: 0; min-width: 0; max-width: 100%;
    font-size: clamp(13.4px, 3.5vw, 14.5px); line-height: 1.58; color: rgb(228 238 255 / .84);
    text-align: justify; text-align-last: left;
  }
  .process:not(.pfx) .pstep__out {
    grid-column: 1 / -1; grid-row: 3; justify-self: start;
    width: auto; max-width: 100%; padding: 6px 12px; border-radius: 999px;
    background: rgb(27 92 242 / .15); border: 1px solid rgb(134 186 255 / .22);
    color: #C4DCFF; font-size: 12px; font-weight: 600; line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* hàng thẻ trôi liên tục trên điện thoại (js initCasual, khối có data-casual="mobile") */
  .is-casual { display: block; }
  .cmar { --bleed: var(--gutter); overflow: hidden; cursor: grab; touch-action: pan-y; margin-inline: calc(var(--bleed) * -1); padding: 6px var(--bleed) 14px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--bleed), #000 calc(100% - var(--bleed)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--bleed), #000 calc(100% - var(--bleed)), transparent); }
  .cmar.is-drag { cursor: grabbing; }
  .cmar__track { display: flex; align-items: stretch; gap: 14px; width: max-content; will-change: transform; }
  .cmar .pstep { width: min(320px, 78vw); flex: none; grid-template-columns: 1fr; gap: 10px; align-content: start; }
  .cmar .pstep__n { font-size: 2.4rem; }
  .cmar .pstep .desc { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
}
@media (max-width: 760px) {
  body { font-size: 15.5px; }
  .sec-head--aside { display: flex; align-items: stretch; }
  /* Điện thoại: thanh không co lại khi cuộn, giữ nút menu 44px cho vừa đầu ngón tay */
  .nav, .nav.is-scrolled { top: 10px; --nav-bar: 58px; --nav-ctl: 44px; }
  .nav__name { font-size: 15px; }
  .nav__actions .btn { display: none; }
  .hero { height: 760vh; }
  .hud__rail { display: none; }
  /* Khối giới thiệu neo theo đáy khung (cách đáy 14% chiều cao): thấp hơn bản cũ (giữa khung, top 50%) khoảng 15% màn hình, không che mặt ảnh nền */
  .ch--intro { left: 20px; right: 20px; top: auto; bottom: 14%; transform: none; width: auto; padding: 0; }
  /* Đoạn giới thiệu: điện thoại dùng bản gọn .hero-pos--m (tối đa 4 dòng, js/m-justify.js ngắt dòng, không tách chữ) */
  .hero-pos:not(.hero-pos--m) { display: none; }
  .hero-pos.hero-pos--m { display: block; }
  .hero-eyebrow { font-size: 11px; letter-spacing: .12em; }
  .hero__layers { --hero-body: 15.5px; }
  .hero-role { font-size: 1rem; gap: 10px; }
  .ch__title { white-space: nowrap !important; overflow: hidden; }   /* điện thoại: tiêu đề chương 1 dòng (cỡ do css/m-type.css + js/m-justify.js) */
  .ch--left, .ch--right { left: 20px; right: 20px; width: auto; top: auto; bottom: 88px; transform: none; padding: 0; }
  .ch-stat b { font-size: 1.7rem; }
  .ch-stat > span { max-width: none; }
  .ch__stats { gap: 18px; margin-top: 18px; }
  .ch .chip { font-size: 1rem; }
  .ch .chip { column-gap: 12px; }
  .ch .ch__chips { gap: 11px; }
  .ch__text { max-width: none; }
  .hud__cam { left: 16px; right: 16px; justify-content: center; bottom: 26px; }
  .hud__cam .hud__pill:nth-child(n+3) { display: none; }
  .hud__scroll { display: none; }
  .strengths { grid-template-columns: 1fr; }
  .tl { grid-template-columns: 1fr; gap: 4px; }
  .vrow__head { grid-template-columns: 38px minmax(0, 1fr) 34px; gap: 12px; padding: 13px 14px; }
  .vrow__num { display: none; }
  .vrow__icon { width: 38px; height: 38px; border-radius: 11px; }
  .vrow__toggle { width: 34px; height: 34px; }
  .vrow__content { padding: 0 14px 16px; }
  .vrow__content .desc { font-size: 14.5px; }
  .vrow__title { white-space: nowrap; overflow: hidden; text-overflow: clip; font-size: 1rem; }
  .skills { grid-template-columns: 1fr; }
  .skill { min-height: 0; }
  .skill--feat { grid-column: span 1; }
  /* 6 thẻ giữa thu lại thành hàng bấm mở, cùng ngôn ngữ với section Giá trị (.vrow) */
  .skill--acc { gap: 0; padding: 14px 16px; }
  .skill--acc:hover { transform: none; }
  .skill--acc .skill__head { display: grid; grid-template-columns: 24px 42px minmax(0, 1fr) 30px; align-items: center; column-gap: 10px; width: 100%; text-align: left; cursor: pointer; }
  .skill--acc .skill__top { display: contents; }
  .skill--acc .skill__idx { grid-column: 1; grid-row: 1 / span 2; font-size: 11px; letter-spacing: .06em; }
  .skill--acc .skill__ico { grid-column: 2; grid-row: 1 / span 2; width: 42px; height: 42px; border-radius: 13px; }
  .skill--acc .skill__ico svg { width: 20px; height: 20px; }
  .skill--acc .skill__title { grid-column: 3; grid-row: 1; min-width: 0; font-size: 1.08rem; white-space: nowrap; overflow: hidden; text-overflow: clip; }
  .skill--acc .skill__sub { grid-column: 3; grid-row: 2; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4; }
  .skill--acc .skill__toggle { grid-column: 4; grid-row: 1 / span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .8); color: var(--ink-2); transition: transform .5s var(--ease), background .4s, color .4s, border-color .4s; }
  .skill--acc .skill__toggle svg { width: 14px; height: 14px; }
  .skill--acc.is-open .skill__toggle { transform: rotate(45deg); background: var(--ink); color: var(--ivory); border-color: transparent; }
  .skill--acc.is-open .skill__ico { background: var(--grad-btn-hover); color: #fff; border-color: transparent; }
  .skill--acc .skill__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
  .skill--acc.is-open .skill__body { grid-template-rows: 1fr; }
  .skill--acc .skill__inner { display: block; overflow: hidden; min-height: 0; }
  .skill--acc .checks { margin-top: 0; padding-top: 14px; padding-left: 72px; opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
  .skill--acc.is-open .checks { opacity: 1; transform: none; transition-delay: .1s; }
  .skill--feat .skill__title { font-size: 1.6rem; }
  .checks--2 { grid-template-columns: 1fr; }
  .skill--tools { grid-template-columns: 1fr; }
  .sphere { min-height: 260px; }
  .logos { --cell: 168px; --row: 72px; --u: .7px; gap: 8px; }
  .logos__word { font-size: 1.05rem; gap: 4px; }
  .logos__word small { font-size: 8px; }
  .process:not(.pfx) .pflow__stage { grid-template-columns: 1fr; gap: 12px; }
  .process:not(.pfx) .pstep { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 10px; padding: 18px 16px; }
  .process:not(.pfx) .pstep__n,
  .process:not(.pfx) .pstep:nth-of-type(odd) .pstep__n { width: 40px; height: 40px; font-size: 15px; }
  .fb__nav .round { width: 46px; height: 46px; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__brand { grid-column: span 1; }
  .portrait__badge--a { left: 10px; }
  .btn { --bh: 50px; padding: 0 22px; }
  .totop { width: 48px; height: 48px; }
  .desc--lg { font-size: 14.5px; }
  .cta__main { padding: 30px 22px; }
}
@media (max-width: 380px) {
  .vrow__head { padding: 12px; gap: 10px; grid-template-columns: 34px minmax(0, 1fr) 32px; }
  .vrow__icon { width: 34px; height: 34px; }
  .vrow__toggle { width: 32px; height: 32px; }
  .vrow__content { padding: 0 12px 14px; }
  .vrow__proof { grid-template-columns: 1fr; gap: 6px; }
  .desc { font-size: 13.5px; }
  .hero-pos, .ch__text { font-size: var(--hero-body); }   /* chữ hero giữ cỡ chung, không theo .desc */
}

/* Màn hình thấp: thu gọn khối định vị để không chạm thanh menu */
@media (max-height: 720px) and (min-width: 761px) {
  .ch--intro { bottom: 52px; }
  .hero-eyebrow { margin-bottom: 10px; }
  .hero__layers { --hero-body: 16px; }
  .hero-role { margin-top: 10px; font-size: 1rem; }
  .hero-pos { margin-top: 6px; }
  .hero-cta { margin-top: 16px; }
  .hud__cam { bottom: 22px; }
}

@media (prefers-reduced-motion: no-override) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .rv, .sec-head__foot .desc { opacity: 1; transform: none; filter: none; }
  .split .w__in, .hero-name .hn > span { transform: none; }
  .reveal-img { clip-path: none; }
  .grain { display: none; }
}

/* Điện thoại: chương chữ trong hero hiện đủ sáng sau nửa quãng cuộn (trước đây phải cuộn hết quãng, đoạn giữa chữ còn mờ như đang tan).
   Chương chỉ hiện dần ở nửa đầu của tiến trình --v; phần còn lại giữ sáng hẳn. Máy tính giữ nguyên. */
@media (max-width: 760px) {
  .ch { --v2: clamp(0, calc(var(--v) * 2), 1); --vi: clamp(0, calc(var(--v2) * 1.7 - var(--i, 0) * .16), 1); opacity: var(--v2); }
  .ch__rule { width: calc(var(--v2) * 72px); opacity: var(--v2); }
  .ch .u { --ci: clamp(0, calc((var(--v2) - var(--d)) / min(var(--dur), calc(1 - var(--d)))), 1); }
}

/* Tối ưu hiệu năng 60/120fps & Typography chuẩn Mobile (<= 1024px):
   - Tắt SVG grain filter toàn màn hình và bỏ filter: blur() theo mỗi frame cuộn trên điện thoại để GPU chỉ composite transform + opacity siêu mượt.
   - Mọi hàng tiêu đề tối đa 1 dòng (white-space: nowrap + auto-fit), mọi đoạn nội dung căn đều 2 bên (justify) cân đối không dãn chữ. */
@media (max-width: 1024px), (hover: none), (pointer: coarse) {
  .grain { display: none !important; animation: none !important; }
  .ch .st,
  .ch .u--c,
  .ch .u--w,
  .rv,
  .sec-head__foot .desc {
    filter: none !important;
  }
  .h2,
  .about__title,
  .strength h4,
  .tl__role,
  .cta__title,
  .skill__title,
  .vrow__title,
  .pstep__title,
  .hero-name,
  .hero-role {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: clip;
    max-width: 100%;
  }
  .desc,
  .ch__text,
  .hero-pos,
  .quote__text,
  .tl__desc,
  .checks span,
  .strength .desc {
    text-align: justify;
    text-align-last: left;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    word-spacing: normal;
    letter-spacing: normal;
    overflow-wrap: break-word;
  }
}

/* Điện thoại: khung hero cao bằng chiều cao lớn nhất của khung nhìn ở bề ngang hiện tại (--hh, js/hero.js) và có lớp nền tối kéo
   dài 40vh dưới đáy (box-shadow, bị phần kế tiếp che khi nó trượt lên), nên khi thanh công cụ ẩn/hiện chữ không nhảy và không lộ nền xanh nhạt. */
@media (max-width: 760px) {
  .hero__sticky { height: 100vh; height: var(--hh, 100svh); box-shadow: 0 40vh 0 0 rgb(9 13 24); }
}