/* =========================================================
   Portfolio — Trang
   Thiết kế gốc: 1440px desktop. Số liệu lấy từ bản Framer.
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face { font-family: "Anton";   src: url("../assets/fonts/anton.woff2") format("woff2");       font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../assets/fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../assets/fonts/poppins-100.woff2") format("woff2"); font-weight: 100; font-display: swap; }
@font-face { font-family: "Inter";   src: url("../assets/fonts/inter.woff2") format("woff2");        font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Kaushan Script"; src: url("../assets/fonts/kaushan.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Ubuntu";  src: url("../assets/fonts/ubuntu-300.woff2") format("woff2");   font-weight: 300; font-display: swap; }
@font-face { font-family: "Magiel";  src: url("../assets/fonts/magiel.woff") format("woff");         font-weight: 900; font-display: swap; }

/* ---------- Tokens (sửa màu / font ở đây) ---------- */
:root {
  --bg: #070707;
  --nav-bg: #000;
  --text: #fff;
  --text-muted: #a8a8a8;
  --text-soft: #d6d6d6;

  --font-display: "Anton", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-hello: "Poppins", sans-serif;
  --font-hand: "Magiel", sans-serif;
  --font-thin: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --nav-h: 80px;
  --content-w: 1040px;   /* vùng nội dung chính */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; font-weight: 400; }

.abs { position: absolute; height: auto; }

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  padding: 20px 80px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--nav-bg);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
/* Menu dùng chung mọi trang: trong suốt ở đầu trang, chuyển sang kính mờ đen khi cuộn (JS thêm .is-glass).
   Trang chủ: đổi lúc cuộn qua hết video hero; các trang khác: ngay khi bắt đầu cuộn. */
.nav {
  background: transparent; border-bottom-color: transparent;
  transition: background-color .35s ease, backdrop-filter .35s ease, -webkit-backdrop-filter .35s ease, border-color .35s ease;
}
.nav.is-glass {
  background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, .08);
}
.nav__logo img { width: 36px; height: 36px; }
.nav__links { display: flex; align-items: center; gap: 40px; }
.nav__link {
  display: inline-flex; align-items: center; gap: 5px;
  font: 500 15px/30px var(--font-body);
  letter-spacing: -0.01em;
  color: #fff;
  transition: opacity .2s;
}
.nav__link:hover { opacity: .7; }

/* =========================================================
   1. HERO — video cuộn (scroll-scrub)
   Khung hero cao (100vh + quãng cuộn); phần .hero__pin dính lại trong lúc cuộn,
   JS vẽ khung hình tương ứng lên canvas. Quãng cuộn chỉnh bằng --hero-scroll.
   ========================================================= */
.hero { position: relative; height: calc(100vh + var(--hero-scroll, 160vh)); }
.hero__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #000; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__text { position: absolute; top: max(112px, 14vh); z-index: 2; color: #fff; will-change: transform, opacity; }
.hero__text { top: max(128px, 17vh); }
.hero__text--left  { left: 5.2vw; }
.hero__text--right { right: 4.2vw; text-align: right; }
/* eyebrow nằm ngay trên tiêu đề; tiêu đề được JS chỉnh cỡ chữ để cao & đáy bằng cụm chữ bên phải */
.hero__eyebrow { position: absolute; left: 0; bottom: 100%; margin-bottom: .9vw; white-space: nowrap; font: 400 clamp(13px, 1.1vw, 18px)/1.4 var(--font-body); }
.hero__title { font: 400 var(--title-fs, 8.9vw)/.92 var(--font-display); letter-spacing: 0; white-space: nowrap; }
.hero__line { font: 400 clamp(36px, 5vw, 96px)/1 var(--font-display); }
.hero__script { font: 400 clamp(38px, 5.4vw, 104px)/1.05 "Kaushan Script", cursive; color: #8a8a8a; margin: .1em 0 .05em; }

/* =========================================================
   2. VÒNG XOAY TABLET
   ========================================================= */
.wheel-group {
  position: relative;
  height: calc(482px * var(--wheel-k, 1));
  overflow: hidden;
}
.wheel-scale { position: absolute; left: 50%; top: 0; width: 0; height: 0; transform: scale(var(--wheel-k, 1)); transform-origin: 0 0; }
.wheel {
  position: absolute; left: -756px; top: -78px;
  width: 1513px; height: 1513px;
  overflow: hidden;
  will-change: transform;
  /* JS gán: transform: rotate(scrollY * 0.019354deg) */
}
.bar {
  position: absolute; left: 50%; top: 50%;
  width: 1362px; height: 1280px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
}
.bar--narrow { width: 320px; }
.slot {
  position: relative;
  width: 320px;
  display: flex; align-items: center; justify-content: center;
}
.slot--flip { transform: rotate(180deg); }
/* viền 6px cùng màu nền phủ lên mép tablet (như bản gốc) */
.slot--tablet::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: var(--w, 320px); transform: translateX(-50%);
  border: 6px solid var(--bg); border-radius: var(--r, 24px);
  pointer-events: none;
}
.slot img { width: 320px; height: 100%; object-fit: cover; border-radius: 24px; }
.slot .dancer {
  position: absolute; z-index: 1;
  height: auto; border-radius: 0; object-fit: fill;
  transform: rotate(var(--r, 0deg));
}

.hello {
  position: absolute; left: 50%; top: calc(381px * var(--wheel-k, 1)); z-index: 2;
  transform: translateX(-50%);
  font: 400 32px/32px var(--font-hello);
  color: var(--text-muted);
  white-space: nowrap;
}

/* =========================================================
   3. 5EX + BRANDS
   ========================================================= */
.intro { position: relative; height: 350px; }
.brands {
  position: absolute; left: 80px; top: 120px; width: 470px; height: 130px;
}
.brands p {
  position: absolute;
  font: 300 32px/38.4px var(--font-thin);
  color: #808080;
  white-space: nowrap;
}
.years {
  position: absolute; left: 560px; top: 65px;
  font: 400 280px/240px var(--font-display);
  color: #fff;
}
.figure { position: absolute; left: 959px; top: 111px; width: 111px; }
.noise {
  position: absolute; left: 1080px; top: 81px; width: 280px; height: 209px;
  background: url("../assets/img/noise.png") left top / 128px auto repeat;
}

/* =========================================================
   4. CUỘN NGANG
   Chiều cao 5650px = quãng cuộn dọc dành cho phần ngang (bản Framer gốc: 13500px).
   JS đổi --tx (dịch ngang) và --lift (nâng khối lên) theo scroll.
   ========================================================= */
.hscroll {
  position: relative;
  height: 5650px;
  overflow-x: clip;
}
.stage {
  position: sticky; top: 70px;
  height: 760px;
  padding-top: 80px;
}
.block {
  width: var(--content-w);
  margin-left: calc(50% - var(--content-w) / 2);
  height: 680px;
  transform: translateY(calc(var(--lift, 0) * -80px));
}
.track {
  display: flex; gap: 10px;
  padding: 60px 0 20px;
  transform: translateX(calc(var(--tx, 1800) * 1px));
  will-change: transform;
}
.group { position: relative; flex: none; height: 600px; }
.group--welcome { width: 1169px; }
.group--story   { width: 1223px; }
.group--card    { width: 1000px; }
.group--card-wide { width: 1286px; }

/* Welcome */
.welcome {
  position: absolute; left: 538px; top: 300px; width: 940px;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; gap: 40px;
}
.welcome h2 {
  font: 400 180px/140px var(--font-display);
  text-align: center; color: #fff;
}

/* Story */
.story-text {
  position: absolute; left: 266px; top: 154px; z-index: 1;
  display: flex; flex-direction: column; gap: 12px;
  transform: rotate(-19deg);
}
.story-text__title { font: 900 80px/96px var(--font-hand); color: #fff; white-space: nowrap; }
.story-text__sub { display: flex; flex-direction: column; gap: 10px; }
.story-text__sub p { font: 400 20px/20px var(--font-body); color: var(--text-muted); white-space: nowrap; }
.year { position: absolute; left: 457px; top: 533px; width: 506px; height: 110px; z-index: 1; }
.year img { width: 100%; }
.year p {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font: 100 40px/40px var(--font-hello); color: #fff;
}

/* Project cards */
.card {
  position: absolute; top: 0; left: 50%;
  width: 469px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 30px;
}
.card__frame {
  position: relative;
  height: 352px;
  border-radius: 20px;
  overflow: hidden;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='126' height='126'%3E%3Cpath d='M126 0v21.584L21.584 126H0v-17.585L108.415 0H126Zm0 108.414V126h-17.586L126 108.414Zm0-84v39.171L63.585 126H24.414L126 24.414Zm0 42v39.17L105.584 126h-39.17L126 66.414ZM105.586 0 0 105.586V66.415L66.415 0h39.171Zm-42 0L0 63.586V24.415L24.415 0h39.171Zm-42 0L0 21.586V0h21.586Z' fill='rgba(136,136,136,0.2)' fill-rule='evenodd'/%3E%3C/svg%3E") left top / 64px auto repeat;
}
.card__photo {
  width: 100%; height: 100%;
  border: 8px solid #fff;
  border-radius: 12px;
  overflow: hidden;
  transition: transform .4s ease;
}
.card__photo img { width: 100%; height: 100%; object-fit: cover; }
.card:hover .card__photo { transform: scale(1.02); }
.card__content { display: flex; flex-direction: column; gap: 16px; }
.card__content h3 {
  font: 400 32px/32px var(--font-display);
  color: #fff; text-decoration: underline;
}
.card__meta { font: 400 20px/20px var(--font-body); color: var(--text-muted); }
.card__desc { font: 400 16px/24px var(--font-body); color: var(--text-muted); }
.group--card, .group--card-wide { }
.group--card .card, .group--card-wide .card { top: 0; }

/* =========================================================
   5. SHOT DESIGN
   ========================================================= */
.shots {
  position: relative; z-index: 2;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center;
  gap: 40px;
  padding: 80px 0;
}
.shots__head {
  width: var(--content-w);
  margin-bottom: 40px;              /* 40 + gap 40 = 80 như bản gốc */
  display: flex; flex-direction: column; gap: 16px;
}
.shots__head h2 { font: 400 144px/144px var(--font-display); color: #fff; }
.shots__head p  { font: 400 24px/36px var(--font-body); letter-spacing: -0.03em; color: var(--text-soft); }
.shots__row {
  width: var(--content-w); height: 375px;
  display: flex; gap: 40px; align-items: center; justify-content: center;
}
.shot {
  position: relative; flex: none;
  width: 500px; height: 375px;
  border-radius: 20px; overflow: hidden;
  background: #000;
}
.shot > img, .shot > video { width: 100%; height: 100%; object-fit: cover; }
.shot--b5::after, .shot--b1::after {   /* viền phủ lên ảnh/video */
  content: ""; position: absolute; inset: 0;
  border-radius: 20px; pointer-events: none;
}
.shot--b5::after { border: 5px solid #242424; }
.shot--b1::after { border: 1px solid #222; }

/* =========================================================
   6. CONTACT
   ========================================================= */
.contact { position: relative; z-index: 2; background: var(--bg); height: 774px; }
.contact__inner { position: relative; width: 1200px; height: 100%; margin: 0 auto; }
.contact__info {
  position: absolute; left: 80px; top: 227px;
  display: flex; flex-direction: column; gap: 24px;
}
.contact__info p { font: 400 20px/32px var(--font-body); letter-spacing: -0.02em; color: var(--text-muted); }
.contact__cta {
  position: absolute; left: 80px; top: 375px; width: 1040px;
  font: 400 76px/140px var(--font-display);
  color: #fff;
}
.contact__cta span { font-size: 168px; }
.contact__handshake { left: 648px; top: 385px; width: 178px; }
.contact__phone     { left: 898px; top: -13px; width: 309px; }

/* =========================================================
   ANIMATION LẶP (yoyo) — chỉ chạy khi phần tử đã vào khung nhìn
   (JS thêm class .is-live). Sửa thời gian / góc ở đây.
   ========================================================= */
.loop {
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: paused;
}
.loop.is-live { animation-play-state: running; }

/* badge "TR" xanh + bóng đèn: lắc 0° ↔ 10° */
.loop--wobble    { animation-name: wobble;  animation-duration: 1s; }
@keyframes wobble { from { transform: rotate(0deg); } to { transform: rotate(10deg); } }

/* chip MY STORY: -18° ↔ -8° */
.loop--chip      { animation-name: chip;    animation-duration: 3.1s; transform: translateX(-50%) rotate(-18deg); }
@keyframes chip  { from { transform: translateX(-50%) rotate(-18deg); } to { transform: translateX(-50%) rotate(-8deg); } }

/* số "5 EXPERIENCE": phóng/thu 0.7 ↔ 1 */
.loop--pulse     { animation-name: pulse;   animation-duration: 2.5s; transform: scale(.7) rotate(11deg); }
@keyframes pulse { from { transform: scale(.7) rotate(11deg); } to { transform: scale(1) rotate(11deg); } }

/* mèo phi hành gia: bay lên + xoay */
.loop--cat       { animation-name: cat;     animation-duration: 6.8s; transform: rotate(57deg); }
@keyframes cat   { from { transform: translateY(0) rotate(57deg); } to { transform: translateY(-280px) rotate(327deg); } }

/* contact: handshake thu nhỏ bay lên, điện thoại phóng to rơi xuống */
.loop--handshake { animation-name: handshake; animation-duration: 5.6s; transform: translateX(-50%) rotate(19deg); }
@keyframes handshake {
  from { transform: translateX(-50%) translateY(0) scale(1) rotate(19deg); }
  to   { transform: translateX(-50%) translateY(-355px) scale(.5) rotate(199deg); }
}
.loop--phone     { animation-name: phone;   animation-duration: 5.9s; transform: rotate(-12deg); }
@keyframes phone {
  from { transform: translate(0, 0) scale(1) rotate(-12deg); }
  to   { transform: translate(30px, 400px) scale(1.7) rotate(168deg); }
}

@media (prefers-reduced-motion: reduce) { .loop { animation: none !important; } }

/* =========================================================
   TRANG ABOUT ME
   Số liệu lấy từ bản Framer gốc (desktop 1440px).
   ========================================================= */
.page-about { overflow-x: clip; }

/* ---------- 1. Hero ---------- */
main { overflow: clip; }                 /* cắt phần animation tràn ra ngoài trang (như Framer) */
.about-hero { position: relative; height: 815px; }
.about-hero__title { position: absolute; inset: 0; margin: 0; }
.about-hero__title span {
  position: absolute; top: 116px;
  font: 400 280px/240px var(--font-display);
  color: #fff; white-space: nowrap;
}
.profile { position: absolute; left: 720px; top: 477px; width: 358px; height: 464px; z-index: 2; transform: translate(-50%, -50%); }
.profile__card {
  width: 358px; height: 464px;
  display: flex; flex-direction: column; gap: 24px;
  padding: 12px 12px 24px;
  background: #fff; border-radius: 24px;
}
.profile__photo { width: 334px; height: 334px; border-radius: 24px; object-fit: cover; flex: none; }
.profile__body {
  width: 334px; height: 70px; padding: 0 12px;
  display: flex; justify-content: space-between; align-items: flex-end;
}
.profile__col { display: flex; flex-direction: column; gap: 10px; }
.profile__col--right { align-items: flex-end; }
.profile__body h4 { font: 400 32px/36px var(--font-display); color: var(--bg); }
.profile__body p  { font: 300 20px/24px "Ubuntu", sans-serif; letter-spacing: -0.02em; color: #949494; white-space: nowrap; }
.about-hero__cat { left: 1117px; top: 568px; width: 114px; z-index: 3; }

.greet {
  position: absolute; left: 200px; top: 676px; width: 1040px; height: 83px;
  display: flex; justify-content: space-between; align-items: flex-end;
}
.greet__block { width: 200px; display: flex; flex-direction: column; border-top: 1px solid #535353; }
.greet__block p {
  padding: 4px 0; border-bottom: 1px solid #535353;
  font: 400 20px/32px var(--font-body); letter-spacing: -0.02em; color: var(--text-muted);
}
.greet__block--right { text-align: right; }

/* ---------- 2. Marquee chứng chỉ ---------- */
.marquee { position: relative; height: calc(938px * var(--m, 1)); overflow-x: clip; }
.marquee__stage { position: absolute; left: 50%; top: 0; width: 0; height: 0; transform: scale(var(--m, 1)); transform-origin: 0 0; }
.marquee__rot { position: absolute; left: -1000px; top: 140px; width: 2000px; height: 698px; transform: rotate(3deg); }
.marquee__clip { width: 100%; height: 100%; padding: 60px 10px; overflow: hidden; }
.marquee__track {
  display: flex; align-items: center; gap: 24px;
  width: max-content; height: 578px; margin: 0; padding: 0; list-style: none;
  animation: ticker 21.28s linear infinite;      /* 100px/giây; 21.28s = đúng 1 vòng (7 x 304px) */
}
@keyframes ticker { to { transform: translateX(-2128px); } }
.marquee .slot { position: relative; flex: none; width: 280px; height: 198px; }
.marquee .cert { width: 280px; height: 198px; object-fit: cover; }
.marquee .sticker { position: absolute; height: auto; transform: translateX(-50%) rotate(var(--r, 0deg)); }
.marquee .brush { position: absolute; z-index: 1; transform: rotate(1deg); }
.marquee__text {
  position: absolute; left: -564.25px; top: -137px; z-index: 1;
  width: 1598px; white-space: nowrap;
  font: 400 112px/118px var(--font-display); color: #fff;
}
.marquee__brush { position: absolute; left: -823px; top: 342px; width: 1640px; height: 34px; z-index: 1; transform: rotate(4deg); }

/* ---------- 3. Câu giới thiệu hiện từng chữ ---------- */
.blend {
  width: 1200px; margin: 0 auto; height: 534px;
  padding: 80px 80px 100px;
  display: flex; flex-direction: column; justify-content: center;
}
.blend__line { height: 118px; }
.blend__line { display: flex; align-items: center; gap: 10px; }
.blend h5 { margin: 0; font: 400 112px/118px var(--font-display); color: #fff; white-space: nowrap; }
.reveal .word { display: inline-block; white-space: nowrap; }
.reveal .ch {
  display: inline-block;
  opacity: .001; filter: blur(10px); transform: translateY(10px);
  transition: opacity .4s ease-out, filter .4s ease-out, transform .4s ease-out;
  transition-delay: calc(var(--i, 0) * 0.05s);
}
.reveal.is-in .ch { opacity: 1; filter: blur(0); transform: none; }
.pop { flex: none; opacity: 0; transform: scale(.5); transition: opacity .4s ease-out .15s, transform .4s ease-out .15s; }
.pop--laptop { width: 137px; height: 101px; }
.pop--phone  { width: 128px; height: 110px; }
.pop--chart  { width: 128px; height: 109px; }
.pop--book   { width: 111px; height: 111px; margin-left: 57px; }
.reveal-line.is-in .pop { opacity: 1; transform: none; }
.reveal-line.is-in .pop--laptop { animation: wobble-laptop 1s linear infinite alternate; }
.reveal-line.is-in .pop--chart, .reveal-line.is-in .pop--book { animation: wobble-chart 1s linear infinite alternate; }
@keyframes wobble-chart  { from { transform: rotate(0deg); } to { transform: rotate(24deg); } }
@keyframes wobble-laptop { from { transform: rotate(0deg); } to { transform: rotate(-15deg); } }

/* ---------- 4. Kinh nghiệm (accordion) ---------- */
.jobs { padding: 140px 0 120px; }                 /* 140 + 304 (3 mục đóng) + 120 = 564 */
.jobs__list { width: 699px; margin-left: calc(50% - 520px); padding: 0 20px; }
.job:not(:last-child)::after {          /* đường kẻ giữa các mục: cách 17px trên, 8px dưới */
  content: ""; display: block; height: 1px; margin: 17px 0 8px; background: #535353;
}
.job__q {
  position: relative; width: 100%; height: 84px;
  display: flex; align-items: center; gap: 24px;
  padding: 20px 40px 20px 0;
  background: none; border: 0; cursor: pointer; text-align: left; color: inherit; font: inherit;
}
.job__q h4 { width: 298px; margin: 0; font: 400 40px/44px var(--font-display); color: #fff; }
.job__years { width: 298px; text-align: right; font: 400 20px/32px var(--font-body); letter-spacing: -0.02em; color: var(--text-muted); }
.job__plus { position: absolute; left: 641px; top: 25px; width: 17px; height: 28px; opacity: .5; transition: transform .3s ease; }
.job__plus::before, .job__plus::after { content: ""; position: absolute; background: #fff; border-radius: 10px; }
.job__plus::before { left: 0; top: 15px; width: 17px; height: 2px; }
.job__plus::after  { left: 8px; top: 8px; width: 2px; height: 16px; }
.job__q[aria-expanded="true"] .job__plus { transform: rotate(45deg); }
.job__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
.job__a-inner { overflow: hidden; }
.job.is-open .job__a { grid-template-rows: 1fr; }
.job__a p {
  width: 619px; margin: 0; padding-bottom: 20px; box-sizing: content-box;
  font: 400 16px/24px var(--font-body); letter-spacing: 0.1px; color: var(--text-muted);   /* bù chênh lệch metric font để ngắt dòng giống bản gốc */
  white-space: pre-line;
}

/* ---------- animation lặp riêng của trang About ---------- */
.loop--profile   { animation-name: profile;   animation-duration: 1.56s; }
@keyframes profile { from { transform: translateY(0) scale(1) rotate(0deg); } to { transform: translateY(-40px) scale(1.4) rotate(5deg); } }
.loop--cat-about { animation-name: cat-about; animation-duration: 6.8s; transform: rotate(57deg); }
@keyframes cat-about { from { transform: translateY(0) rotate(57deg); } to { transform: translateY(-225px) rotate(327deg); } }

/* =========================================================
   TRANG PROJECT
   ========================================================= */
/* (main { overflow: clip } ở trên áp dụng cho mọi trang) */
.project-head { padding: 160px 0 0; width: var(--content-w); margin: 0 auto; height: 430px; }
.project-head h1 { font: 400 144px/144px var(--font-display); color: #fff; }
.project-head p  { margin-top: 10px; font: 400 24px/36px var(--font-body); letter-spacing: -0.03em; color: #888; }
/* tiêu đề section phụ (vd "Projects with AI") giữa trang Project — cùng kiểu chữ Anton với "PROJECT"
   nhưng nhỏ hơn hẳn (chữ dài hơn "PROJECT" nên không cần to bằng), và bỏ khoảng đệm che nav */
.project-head.project-head--sub { padding: clamp(40px, 6vw, 96px) 0 clamp(32px, 5vw, 72px); height: auto; }
.project-head.project-head--sub h1 { font-size: clamp(32px, 4.4vw, 64px); line-height: 1.15; }
.project-grid { width: 1000px; margin: 0 auto 140px; display: flex; flex-direction: column; gap: 60px; }
.project-row { display: flex; justify-content: space-between; align-items: flex-start; }
.project-row--single { justify-content: center; }
.pcard { display: flex; flex-direction: column; gap: 30px; }
.pcard--l { width: 646px; }
.pcard--s { width: 293px; }
.pcard--m { width: 480px; }   /* 2 thẻ bằng nhau trên 1 hàng (480+480+gap 40 = 1000, khớp lề 2 thẻ còn lại) */
.pcard__img { position: relative; overflow: hidden; border-radius: 20px; }
.pcard--l .pcard__img { height: 300px; }
.pcard--s .pcard__img { height: 293px; }
.pcard--m .pcard__img { height: 360px; }   /* 480x360 = tỉ lệ 4:3 */
.pcard__img img { width: 100%; height: 100%; object-fit: cover; }
.pcard__img .layer { position: absolute; left: 0; top: 0; height: auto; }
.pcard__img .layer--contain { width: 100%; height: 484px; object-fit: contain; }
.pcard__img .layer--top { width: 668px; height: 554px; object-fit: cover; }
.pcard__img .layer--swoopa { left: -1px; width: 649px; height: 365px; }
.pcard__body { display: flex; flex-direction: column; gap: 16px; }
.pcard__body h6 { font: 400 32px/32px var(--font-display); color: #fff; text-decoration: underline; }
.pcard__meta { font: 400 20px/20px var(--font-body); color: var(--text-muted); }
.pcard__desc { font: 400 16px/24px var(--font-body); letter-spacing: 0.1px; color: var(--text-muted); }   /* bù metric font để xuống dòng giống bản gốc */
.pcard--s .pcard__body { width: 295px; margin-left: -1px; }

/* =========================================================
   TRANG CHI TIẾT PROJECT (case study)
   ========================================================= */
.page-case .case-hero { height: 863px; padding: 160px 0 0; width: var(--content-w); margin: 0 auto; }
.case-hero h1 { width: var(--content-w); font: 400 144px/144px var(--font-display); color: #fff; }
.overview { margin-top: 80px; display: flex; justify-content: space-between; align-items: flex-start; }
.overview__info { width: 515px; display: flex; flex-direction: column; gap: 24px; }
.overview__info h4 { font: 400 56px/60px var(--font-display); color: #fff; }
.overview__grid { display: grid; grid-template-columns: 246px 246px; grid-auto-flow: column; grid-template-rows: auto auto; gap: 40px 24px; }
.meta { display: flex; flex-direction: column; gap: 8px; }
.meta h2 { font: 400 26px/32px var(--font-display); color: #fff; }
.meta p  { font: 500 16px/25.6px var(--font-body); color: #7e8187; }
.overview__img { width: 465px; height: 255px; object-fit: cover; border-radius: 20px; }

/* --- 5 bước quy trình --- */
.steps { width: 1200px; height: 388px; margin: 0 auto; padding: 80px; display: flex; justify-content: center; align-items: center; }
.steps__row { width: 1040px; display: flex; gap: 16px; }
.step {
  position: relative; flex: 1 1 0; height: 228px; padding: 20px;
  border-radius: 16px;
  background: radial-gradient(75% 50% at 32.7% 35%, #000 38.97%, #141521 100%);
}
.step::after { content: ""; position: absolute; inset: 0; border-radius: 16px; border: 1px solid #8a8a8a; pointer-events: none; }
.step h2 { font: 400 26px/32px var(--font-display); color: #fff; text-align: center; }
.step__art {
  position: absolute; left: 4px; right: 4px; top: 100px; height: 124px; z-index: 1;
  border-radius: 14px; overflow: hidden;
  background-size: 200px auto; background-repeat: repeat;
}
.step__art img { position: absolute; height: auto; }

/* --- các thẻ nội dung --- */
.case-cards { padding: 80px 80px 120px; display: flex; flex-direction: column; gap: 80px; }
.case-card {
  padding: 68px; border-radius: 48px;
  display: flex; flex-direction: column; gap: 32px; align-items: center;
  background: linear-gradient(#262626 0%, var(--end, #000) var(--stop, 17%));
  box-shadow: var(--shadow, -1px -1px 0 0 #404040);
}
.case-card > * { width: 1144px; }
.case-card h6 { font: 400 32px/32px var(--font-display); color: #fff; text-decoration: underline; }
.case-p { font: 400 20px/32px var(--font-body); letter-spacing: calc(-0.02em + 0.1px); color: var(--text-muted); }   /* +0.1px bù metric font để xuống dòng giống bản gốc */
.case-p b, .case-card li b { font-weight: 700; color: #fff; }
.case-p .gray { color: var(--text-muted); }
.hl { color: #fff; }

.quote { display: flex; gap: 24px; padding: 13px 0; }
.quote__bar { flex: none; width: 8px; background: #242424; }
.quote__text { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.problem { display: flex; align-items: center; gap: 60px; padding: 60px; background: #242424; border-radius: 20px; }
.problem__img { flex: none; width: 482px; height: 660px; }
.pain { flex: none; width: 482px; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 24px; }
.pain__t { font: 400 16px/24px var(--font-body); color: var(--text-muted); }
.pain__t b { color: #fff; }
.pain__d { margin-top: 4px; font: 400 12px/16px var(--font-body); letter-spacing: 0.05px; color: var(--text-muted); }

.jtbd { display: flex; justify-content: space-between; align-items: stretch; }
.jtbd__card { width: 365px; padding: 24px 40px; background: #242424; border-radius: 20px; display: flex; flex-direction: column; gap: 8px; }
.jtbd__card b { font: 700 20px/32px var(--font-body); letter-spacing: -0.02em; color: #fff; }
.jtbd__card p { font: 400 12px/16px var(--font-body); color: var(--text-muted); }
.fullimg { height: 639px; object-fit: cover; border-radius: 20px; }
.fullimg--flat { height: 649px; border-radius: 0; }
.tableimg { height: 272px; object-fit: contain; border-radius: 20px; }
.whitebox { display: flex; justify-content: center; align-items: center; padding: 12px 0; background: #fff; border-radius: 20px; }
.whitebox img { flex: none; }
.whitebox:not(.whitebox--meta) img { object-fit: fill; }
.whitebox--meta img { object-fit: cover; }

.final { display: flex; gap: 24px; align-items: flex-start; }
.final__big { flex: none; width: 560px; height: 751px; object-fit: cover; border-radius: 20px; }
.final__col { display: flex; flex-direction: column; gap: 24px; }
.final__col img { width: 560px; height: 364px; object-fit: cover; border-radius: 20px; }
.final__col img.contain { object-fit: contain; }
.next { display: flex; flex-direction: column; gap: 20px; }
.next ul { margin: 0; padding: 0 0 0 25px; }
.next li { font: 400 20px/32px var(--font-body); letter-spacing: calc(-0.02em + 0.1px); color: #7e8187; }

/* ---------- Trang chi tiết: Management Portal ---------- */
.page-portal .case-hero { height: 1042px; }
.page-portal .case-hero h1 { height: 432px; }
.overview__grid--portal { display: grid; grid-template-columns: 238px 238px; grid-template-rows: auto auto; grid-auto-flow: row; gap: 24px 40px; }
.meta--wide { grid-column: 1 / -1; }
.pimg { width: 1144px; object-fit: cover; }
.page-portal .case-card h6 b { font-weight: 700; }
.case-card h6.numbered { display: flex; gap: 0; text-decoration: none; }
.case-card h6.numbered .num { width: 32px; font-weight: 700; }
.case-card h6.numbered .ttl { font-weight: 700; text-decoration: underline; }
.broken { display: flex; flex-direction: column; gap: 32px; padding: 60px; background: #242424; border-radius: 20px; }
.broken b { font: 700 20px/32px var(--font-body); letter-spacing: -0.02em; color: #fff; }
.broken ul { margin: 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 24px; }
.broken li { font: 700 16px/24px var(--font-body); color: #fff; }
.dgrid { display: grid; grid-template-columns: 560px 560px; justify-content: space-between; gap: 24px; }
.dcard { padding: 40px; background: #242424; border-radius: 20px; display: flex; flex-direction: column; gap: 24px; }
.dcard b { font: 700 20px/32px var(--font-body); letter-spacing: -0.02em; color: #fff; }
.dcard p, .dcard li { font: 400 16px/24px var(--font-body); color: #fff; }
.dcard ul { margin: 0; padding: 0 0 0 20px; }
.dcard b.up { text-transform: uppercase; }
.dgrid:not(.dgrid--stats) .dcard { height: 256px; }
.dgrid:not(.dgrid--stats) .dcard p { width: 480px; }
.dgrid--stats .dcard { gap: 12px; }
.dgrid--stats .dcard--list ul { margin-top: 12px; }
.subh { font: 400 26px/32px var(--font-display); color: #fff; }
.period { font: 700 12px/16px var(--font-body); color: #fff; }
.stats { display: flex; gap: 24px; padding: 12px; border: 1px solid #fff; border-radius: 16px; margin-top: 4px; }
.stats > div { width: 136px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.stats strong { font: 700 40px/44px var(--font-display); color: #fff; }
.stats span { font: 700 12px/16px var(--font-body); color: #fff; white-space: nowrap; }
.final--stack { flex-direction: column; }
.final--stack img { width: 1144px; object-fit: cover; }

/* =========================================================
   RESPONSIVE
   Cùng mốc với Framer: tablet 810–1199px, mobile ≤809px.
   --k = hệ số thu nhỏ khối cuộn ngang, --wheel-k = vòng tablet, --m = dải chứng chỉ.
   ========================================================= */
:root { --k: 1; --wheel-k: 1; --m: 1; }

/* ---------- menu điện thoại (ẩn ở desktop) ---------- */
.nav__toggle { display: none; }

/* =========================================================
   TABLET  ≤ 1199px
   ========================================================= */
@media (max-width: 1199px) {
  :root { --k: .8; --wheel-k: .72; --m: .8; --content-w: 100%; }
  html { scroll-padding-top: 80px; }

  /* nav */
  .nav { padding: 20px 50px; }


  /* 5EX + brands: xếp dọc, căn giữa */
  .intro { height: auto; padding: 50px 50px 70px; display: flex; flex-direction: column; align-items: center; gap: 28px; }
  .intro > * { position: static; }
  .years { order: 1; font-size: 180px; line-height: 150px; }
  .brands { order: 2; width: auto; height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; }
  .brands p { position: static; }
  .figure { order: 3; width: 96px; }
  .noise { order: 4; width: min(100%, 320px); height: 160px; }

  /* cuộn ngang: khối full màn hình, thu nhỏ bằng --k */
  .stage { top: 0; height: 100vh; padding-top: calc((100vh - 680px * var(--k)) / 2); }
  .block {
    width: calc(100vw / var(--k)); margin-left: 0; flex: none;
    transform: scale(var(--k)) translateY(calc(var(--lift, 0) * -80px));
    transform-origin: 0 0;
  }

  /* shot design */
  .shots { padding: 60px 50px; gap: 24px; }
  .shots__head { width: 100%; margin-bottom: 16px; }
  .shots__head h2 { font-size: 100px; line-height: 100px; }
  .shots__head p { font-size: 18px; line-height: 27px; }
  .shots__row { width: 100%; height: auto; gap: 24px; }
  .shot { flex: 1 1 0; width: auto; height: auto !important; aspect-ratio: 4 / 3; border-radius: 16px; }
  .shot--b5::after { border-width: 4px; border-radius: 16px; }
  .shot--b1::after { border-radius: 16px; }

  /* contact */
  .contact { height: 560px; }
  .contact__inner { width: 100%; }
  .contact__info { left: 50px; top: 120px; gap: 16px; }
  .contact__info p { font-size: 16px; line-height: 25.6px; }
  .contact__cta { left: 50px; top: 260px; width: calc(100% - 100px); font-size: 60px; line-height: 100px; }
  .contact__cta span { font-size: 128px; }
  .contact__handshake { left: 58%; top: 260px; width: 150px; }
  .contact__phone { left: auto; right: -30px; top: 10px; width: 300px; }

  /* trang Project */
  .project-head { width: auto; height: auto; padding: 120px 50px 60px; }
  .project-head h1 { font-size: 100px; line-height: 100px; }
  .project-head p { font-size: 18px; line-height: 27px; }
  .project-grid { width: auto; margin: 0 50px 20px; gap: 64px; }
  .project-row { flex-direction: column; gap: 64px; }
  .pcard--l, .pcard--s, .pcard--m { width: 100%; }
  .pcard--l .pcard__img, .pcard--s .pcard__img { height: auto; aspect-ratio: 16 / 9; }
  .pcard--m .pcard__img { height: auto; aspect-ratio: 4 / 3; }
  .pcard--s .pcard__body { width: 100%; margin-left: 0; }
  .pcard__img .layer--contain { width: 100%; height: auto; }
  .pcard__img .layer--top { width: 103.4%; height: auto; }
  .pcard__img .layer--swoopa { left: 0; width: 100%; height: auto; }

  /* trang About */
  .about-hero { height: auto; padding: 150px 0 50px; display: flex; flex-direction: column; align-items: center; }
  .about-hero__title { position: static; display: flex; justify-content: center; gap: .04em; font-size: 21vw; line-height: .86; }
  .about-hero__title span { position: static; font-size: inherit; line-height: inherit; }
  .profile { position: relative; left: auto; top: auto; transform: none; margin-top: -3.2vw; }
  .about-hero__cat { left: auto; right: 6%; top: 46vw; width: 96px; }
  .greet { position: static; width: calc(100% - 100px); margin-top: 40px; }
  .marquee__stage { top: 0; }
  .blend { width: 100%; height: auto; padding: 60px 5.5vw 80px; font-size: 7.78vw; }
  .blend h5 { font: 400 1em/1.054 var(--font-display); }
  .blend__line { height: 1.054em; gap: .09em; }
  .pop--laptop { width: 1.22em; height: .9em; }
  .pop--phone  { width: 1.14em; height: .98em; }
  .pop--chart  { width: 1.14em; height: .97em; }
  .pop--book   { width: .99em; height: .99em; margin-left: .5em; }
  .jobs { padding: 60px 0 100px; }
  .jobs__list { width: auto; max-width: 700px; margin: 0 50px; padding: 0; }
  .job__q { padding-right: 44px; }
  .job__q h4 { width: auto; flex: 1; }
  .job__years { width: auto; }
  .job__plus { left: auto; right: 0; }
  .job__a p { width: auto; max-width: 619px; }

  /* trang chi tiết (case study) */
  .page-case .case-hero, .page-portal .case-hero { height: auto; width: auto; padding: 120px 50px 60px; }
  .case-hero h1, .page-portal .case-hero h1 { width: auto; height: auto; font-size: 100px; line-height: 100px; }
  .overview { margin-top: 56px; flex-direction: column; gap: 40px; }
  .overview__info { width: 100%; }
  .overview__grid, .overview__grid--portal { grid-template-columns: 1fr 1fr; }
  .overview__img { width: 100%; height: auto !important; aspect-ratio: 465 / 255; }
  .steps { width: auto; height: auto; padding: 20px 50px 60px; }
  .steps__row { width: 100%; flex-wrap: wrap; }
  .step { flex: 1 1 calc(33% - 16px); min-width: 180px; }
  .case-cards { padding: 40px 50px 100px; gap: 56px; }
  .case-card { padding: 44px 36px; border-radius: 40px; }
  .case-card > * { width: 100%; }
  .case-card h6 { font-size: 28px; line-height: 32px; }
  .quote { padding: 8px 0; }
  .problem { flex-direction: column; padding: 32px; gap: 32px; }
  .problem__img { width: 100%; max-width: 482px; height: auto; }
  .pain { width: 100%; }
  .jtbd { flex-direction: column; gap: 16px; }
  .jtbd__card { width: 100%; }
  .fullimg, .tableimg, .pimg { width: 100% !important; height: auto !important; }
  .whitebox img { width: 100%; height: auto; max-width: 881px; }
  .final { flex-direction: column; }
  .final__big, .final__col, .final__col img, .final--stack img { width: 100% !important; height: auto !important; }
  .dgrid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .dgrid:not(.dgrid--stats) .dcard { height: auto; }
  .dgrid:not(.dgrid--stats) .dcard p { width: auto; }
  .dcard { padding: 28px; }
  .broken { padding: 32px; }
  .stats { flex-wrap: wrap; justify-content: space-between; gap: 12px; }
  .stats > div { width: auto; flex: 1 1 90px; }
  .case-card h6.numbered .num { width: 30px; }
}

/* =========================================================
   MOBILE  ≤ 809px
   ========================================================= */
@media (max-width: 809px) {
  :root { --k: .56; --wheel-k: .46; --m: .62; }

  /* nav + menu */
  .nav { padding: 20px; }
  .nav__toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 0 8px; background: none; border: 0; cursor: pointer;
  }
  .nav__toggle span { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s, opacity .25s; }
  .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav__links {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 8px 20px 20px; background: var(--nav-bg);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .25s, transform .25s, visibility .25s;
  }
  .nav.is-open .nav__links { visibility: visible; opacity: 1; transform: none; }
  .nav__link { width: 100%; font-size: 20px; line-height: 56px; }


  .hello { font-size: 20px; line-height: 20px; }
  .intro { padding: 40px 20px 60px; gap: 20px; }
  .years { font-size: 120px; line-height: 100px; }
  .brands { gap: 4px 20px; }
  .brands p { font-size: 22px; line-height: 30px; }
  .figure { width: 72px; }
  .noise { height: 110px; width: min(100%, 240px); }

  .shots { padding: 44px 20px; gap: 12px; }
  .shots__head h2 { font-size: 56px; line-height: 60px; }
  .shots__head p { font-size: 16px; line-height: 24px; letter-spacing: -0.02em; }
  .shots__row { gap: 12px; }
  .shot, .shot--b5::after, .shot--b1::after { border-radius: 12px; }
  .shot--b5::after { border-width: 3px; }

  .contact { height: 470px; }
  .contact__info { left: 20px; top: 70px; gap: 10px; }
  .contact__info p { font-size: 13px; line-height: 20.8px; }
  .contact__cta { left: 20px; top: 190px; width: calc(100% - 40px); font-size: 29px; line-height: 52px; }
  .contact__cta span { font-size: 64px; }
  .contact__handshake { left: 62%; top: 24px; width: 64px; }
  .contact__phone { right: -22px; top: 70px; width: 150px; }

  .project-head { padding: 100px 20px 40px; }
  .project-head h1 { font-size: 56px; line-height: 60px; }
  .project-grid { margin: 0 20px 0; gap: 48px; }
  .project-row { gap: 48px; }
  .pcard { gap: 20px; }
  .pcard__body h6 { font-size: 28px; line-height: 32px; }
  .pcard__meta { font-size: 16px; line-height: 16px; }

  .about-hero { padding: 125px 0 40px; }
  .about-hero__title { font-size: 25vw; }
  .profile { margin-top: -5vw; transform-origin: 50% 0; }
  .about-hero__cat { width: 64px; top: 68vw; right: 4%; }
  .greet { width: calc(100% - 40px); margin-top: 32px; }
  .greet__block { width: 46%; }
  .greet__block p { font-size: 16px; line-height: 26px; }
  .blend { padding: 40px 20px 60px; font-size: 8vw; }
  .jobs { padding: 40px 0 80px; }
  .jobs__list { margin: 0 20px; }
  .job__q h4 { font-size: 28px; line-height: 32px; }
  .job__years { font-size: 15px; }
  .job__a p { font-size: 15px; line-height: 23px; }

  .page-case .case-hero, .page-portal .case-hero { padding: 100px 20px 40px; }
  .case-hero h1, .page-portal .case-hero h1 { font-size: 56px; line-height: 60px; }
  .overview { margin-top: 36px; gap: 28px; }
  .overview__info h4 { font-size: 44px; line-height: 48px; }
  .overview__grid, .overview__grid--portal { gap: 28px 16px; }
  .steps { padding: 0 20px 40px; }
  .steps__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .step { min-width: 0; }
  .step:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
  .case-cards { padding: 24px 12px 70px; gap: 32px; }
  .case-card { padding: 32px 18px; border-radius: 28px; gap: 24px; }
  .case-card h6 { font-size: 24px; line-height: 28px; }
  .case-p { font-size: 16px; line-height: 26px; }
  .quote { gap: 14px; }
  .problem, .broken { padding: 20px; }
  .broken li { font-size: 15px; }
  .pain__t { font-size: 15px; }
  .dgrid { grid-template-columns: 1fr; }
  .dcard { padding: 22px; }
  .final { gap: 16px; }
  .next li { font-size: 16px; line-height: 26px; }
  .stats strong { font-size: 32px; line-height: 36px; }
  .case-card h6.numbered .num { width: 26px; }
}

/* about: thẻ profile trên màn hình nhỏ */
@media (max-width: 809px) {
  .loop--profile { animation-name: profile-sm; }
  @keyframes profile-sm { from { transform: translateY(0) scale(1) rotate(0deg); } to { transform: translateY(-14px) scale(1.1) rotate(4deg); } }
}
@media (max-width: 379px) {
  .profile { transform: scale(.85); margin-bottom: -60px; }
}

/* hero video: bố cục màn hình nhỏ */
@media (max-width: 1199px) {
  .hero__text--left  { left: 40px; }
  .hero__text--right { right: 40px; }
}
@media (max-width: 809px) {
  .hero__text--left  { left: 20px; top: 112px; }
  .hero__eyebrow { font-size: 12px; margin-bottom: 8px; }
  .hero__title { font-size: 17vw; }
  .hero__text--right { right: 20px; top: auto; bottom: 11vh; }
  .hero__line { font-size: 9.5vw; }
  .hero__script { font-size: 10.5vw; }
}
@media (prefers-reduced-motion: reduce) { .hero { height: 100vh; } }

/* =========================================================
   TRANG — CASE STUDY: symplyU Product Detail Page
   Duy nhất trang này có phần thân sáng màu (mô phỏng đúng UI
   thật của trang sản phẩm) — nav + footer vẫn dùng chung với
   toàn bộ site. Token riêng để không đụng vào theme tối chính.
   ========================================================= */
.page-product { --pdp-font: "Plus Jakarta Sans", var(--font-body); }
.page-product .case-hero { padding-bottom: 40px; }
.pdp {
  background: #fff; color: #1a1c1c;
  font-family: var(--pdp-font);
  border-radius: 32px;
  width: var(--content-w); margin: 0 auto 64px;
  overflow: hidden;
}
.pdp svg { width: 100%; height: 100%; display: block; color: inherit; }
.pdp .eyebrow { font: 700 10px/14px var(--pdp-font); letter-spacing: .05em; text-transform: uppercase; color: #444748; margin: 0 0 8px; }
.pdp h2 { font: 500 30px/1.25 var(--pdp-font); letter-spacing: -0.02em; color: #000; margin: 0 0 12px; }
.pdp h3 { font: 500 22px/1.3 var(--pdp-font); letter-spacing: -0.01em; color: #1a1c1c; margin: 0 0 8px; }
.pdp .muted { color: #444748; }
.pdp .bar { height: 6px; border-radius: 99px; background: #e2e2e2; overflow: hidden; }
.pdp .bar i { display: block; height: 100%; background: #000; border-radius: inherit; }
.pdp .tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px; font: 700 10px/14px var(--pdp-font); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.pdp .tag--glass { background: rgba(255,255,255,.9); backdrop-filter: blur(6px); color: #000; }
.pdp .tag--dark  { background: #000; color: #fff; }
.pdp .tag--pill  { background: #e8e8e8; color: #1a1c1c; text-transform: none; font-weight: 600; gap: 4px; }
.pdp .tag--pill svg { width: 12px; height: 12px; }
.pdp .tag--overlay { position: absolute; left: 8px; top: 8px; background: rgba(255,255,255,.9); color: #1a1c1c; text-transform: none; font-weight: 500; padding: 2px 8px; }
.pdp .tag--overlay-dark { background: #000; color: #fff; }
.pdp .chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 99px; background: #eee; font: 600 14px/1.4 var(--pdp-font); color: #1a1c1c; }
.pdp .chip i { width: 8px; height: 8px; border-radius: 50%; background: #000; }
.pdp .chip--flat { padding: 2px 8px; border-radius: 4px; font-size: 11px; letter-spacing: .02em; }
.pdp .chip--muted { color: #444748; }
.pdp .chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.pdp .chip-row--sm { gap: 6px; margin-bottom: 8px; }
.pdp .card-white { background: #fff; border-radius: 12px; box-shadow: 0 1px 1px rgba(0,0,0,.05); }
.pdp .card-grey  { background: #f3f3f3; border-radius: 12px; }
.pdp .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border: 0; border-radius: 8px; font: 500 13px/1 var(--pdp-font); cursor: pointer; }
.pdp .btn svg { width: 13px; height: 15px; }
.pdp .btn--dark { background: #000; color: #fff; flex: 1; }
.pdp .btn--grey { background: #e8e8e8; color: #1a1c1c; }
.pdp .btn--icon { width: 48px; height: 48px; padding: 0; background: #f3f3f3; color: #1a1c1c; border-radius: 8px; }
.pdp .btn--icon svg { width: 17px; height: 15px; }
.pdp .btn--pill { height: auto; padding: 8px 16px; border-radius: 8px; background: #eee; color: #1a1c1c; font-weight: 500; }
.pdp .btn--pill svg { width: 8px; height: 5px; }
.pdp .link-arrow { font: 500 13px/1 var(--pdp-font); color: #444748; }
.pdp .stars { color: #000; letter-spacing: 2px; }
.pdp .stars i { color: #c4c7c7; font-style: normal; }
.pdp .stars--sm { font-size: 13px; }

/* breadcrumb */
.pdp-crumb { display: flex; align-items: center; justify-content: space-between; padding: 24px 48px 16px; flex-wrap: wrap; gap: 12px; }
.pdp-crumb__path { display: flex; gap: 8px; font: 600 11px/14px var(--pdp-font); letter-spacing: .03em; color: #444748; flex-wrap: wrap; }
.pdp-crumb__path .is-current { color: #1a1c1c; }
.pdp-crumb__batch { display: flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 99px; background: #eee; font: 700 10px/14px var(--pdp-font); letter-spacing: .06em; color: #444748; white-space: nowrap; }
.pdp-crumb__batch i { width: 6px; height: 6px; border-radius: 50%; background: #000; }

/* hero: gallery + buy box */
.pdp-hero { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; padding: 0 48px 40px; }
.pdp-gallery { display: flex; flex-direction: column; gap: 16px; }
.pdp-gallery__main { position: relative; aspect-ratio: 5/4; background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.05); overflow: hidden; }
.pdp-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.pdp-gallery__tags { position: absolute; left: 16px; top: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.pdp-zoom { position: absolute; right: 16px; bottom: 16px; width: 40px; height: 40px; border-radius: 99px; border: 0; background: rgba(255,255,255,.8); backdrop-filter: blur(6px); box-shadow: 0 1px 2px rgba(0,0,0,.05); display: flex; align-items: center; justify-content: center; cursor: pointer; color: #1a1c1c; }
.pdp-zoom svg { width: 14px; height: 14px; }
.pdp-gallery__thumbs { display: flex; gap: 14px; }
.pdp-thumb { position: relative; flex: 1; aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; border: 0; padding: 0; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); cursor: pointer; }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb span { position: absolute; left: 4px; right: 4px; bottom: 4px; padding: 2px 0; background: rgba(255,255,255,.9); font: 400 9px/13.5px var(--pdp-font); text-align: center; color: #1a1c1c; }
.pdp-thumb.is-active { box-shadow: 0 0 0 2px #000, 0 1px 2px rgba(0,0,0,.05); }
.pdp-labstrip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-radius: 12px; background: #f3f3f3; flex-wrap: wrap; }
.pdp-labstrip span { display: flex; align-items: center; gap: 8px; font: 700 10px/14px var(--pdp-font); letter-spacing: .04em; color: #444748; white-space: nowrap; }
.pdp-labstrip svg { width: 12px; height: 12px; }

.pdp-buy { display: flex; flex-direction: column; gap: 20px; }
.pdp-buy__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pdp-buy__brand { display: flex; align-items: center; gap: 6px; font: 700 10px/14px var(--pdp-font); letter-spacing: .04em; color: #444748; }
.pdp-buy__brand svg { width: 7px; height: 7px; }
.pdp-title { font: 500 30px/38px var(--pdp-font); letter-spacing: -0.02em; color: #000; margin: 0; }
.pdp-rating { display: flex; align-items: center; gap: 8px; font: 600 15px/22px var(--pdp-font); }
.pdp-rating .dot { color: #444748; }
.pdp-rating a { font: 500 13px/18px var(--pdp-font); color: #444748; text-decoration: underline; text-decoration-color: #c4c7c7; }
.pdp-lede { font: 400 14px/1.6 var(--pdp-font); color: #444748; }
.pdp-score { background: #f3f3f3; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.pdp-score__row { display: flex; align-items: center; justify-content: space-between; font: 600 11px/14px var(--pdp-font); letter-spacing: .03em; }
.pdp-score__row span { display: flex; align-items: center; gap: 6px; }
.pdp-score__row svg { width: 12px; height: 12px; }
.pdp-score__row--sub { font: 400 12px/18px var(--pdp-font); color: #444748; }
.pdp-variants__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font: 600 13px/18px var(--pdp-font); }
.pdp-variants__row { display: flex; gap: 12px; }
.variant { flex: 1; text-align: left; border: 0; border-radius: 12px; padding: 14px; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.05); cursor: pointer; font-family: var(--pdp-font); }
.variant__top { display: flex; align-items: center; justify-content: space-between; font: 600 15px/22px var(--pdp-font); color: #1a1c1c; margin-bottom: 4px; }
.variant__top svg { width: 12px; height: 12px; }
.variant__top em { font: 700 10px/15px var(--pdp-font); font-style: normal; background: #eee; padding: 0 6px; border-radius: 4px; }
.variant__price { display: flex; gap: 8px; align-items: baseline; font: 500 13px/18px var(--pdp-font); color: #1a1c1c; }
.variant__price s { color: #444748; font-weight: 400; font-size: 12px; }
.variant.is-active { background: #000; }
.variant.is-active .variant__top, .variant.is-active .variant__price { color: #fff; }
.variant.is-active .variant__price s { color: rgba(255,255,255,.75); }
.pdp-price__row { display: flex; align-items: baseline; gap: 12px; }
.pdp-price__row strong { font: 600 40px/48px var(--pdp-font); letter-spacing: -0.02em; color: #000; }
.pdp-price__row s { font: 600 18px/26px var(--pdp-font); color: #444748; }
.pdp-price .save { background: #e8e8e8; color: #000; font: 700 10px/14px var(--pdp-font); padding: 2px 8px; border-radius: 6px; }
.pdp-stock { display: flex; align-items: center; gap: 8px; font: 600 13px/18px var(--pdp-font); color: #1a1c1c; margin: 4px 0 0; }
.pdp-stock i { width: 8px; height: 8px; border-radius: 50%; background: #000; }
.pdp-cta { display: flex; gap: 12px; }
.pdp-trust { background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.05); border-radius: 12px; padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pdp-trust > div { display: flex; gap: 10px; align-items: flex-start; }
.pdp-trust i { flex: none; width: 17px; height: 17px; color: #1a1c1c; }
.pdp-trust p { font: 400 12px/18px var(--pdp-font); color: #444748; margin: 0; }
.pdp-trust b { color: #444748; }

/* stat bar */
.pdp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 40px 48px; background: #f3f3f3; }
.pdp-stats strong { display: block; font: 700 48px/1.4 var(--pdp-font); letter-spacing: -0.03em; color: #000; }
.pdp-stats b { display: block; font: 600 18px/22px var(--pdp-font); letter-spacing: -0.005em; color: #1a1c1c; margin: 8px 0 4px; }
.pdp-stats span { display: block; font: 400 12px/18px var(--pdp-font); color: #444748; }

/* generic section */
.pdp-section { padding: 64px 48px; }
.pdp-section--grey { background: #f3f3f3; }
.pdp-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.pdp-section__head--tight { margin: 16px 0 24px; display: block; }
.pdp-body { font: 400 16px/26px var(--pdp-font); color: #444748; max-width: 640px; }
.pdp-body--wide { max-width: 672px; margin-bottom: 32px; }

/* what it does / best for */
.pdp-grid-7-5 { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: start; }
.pdp-col { display: flex; flex-direction: column; gap: 24px; }
.pdp-col--grey { padding: 32px; border-radius: 12px; justify-content: space-between; min-height: 100%; }
.pdp-mech { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.pdp-mech__head { display: flex; align-items: center; justify-content: space-between; }
.pdp-mech__head h4 { margin: 0; font: 600 15px/22px var(--pdp-font); }
.pdp-mech__head span { font: 600 11px/14px var(--pdp-font); letter-spacing: .03em; }
.metric { display: flex; flex-direction: column; gap: 4px; }
.metric__row { display: flex; justify-content: space-between; font: 600 11px/14px var(--pdp-font); letter-spacing: .03em; }
.pdp-col--grey h3 { font: 500 30px/1.3 var(--pdp-font); letter-spacing: -0.01em; }
.tick-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.tick-list li { display: flex; gap: 12px; }
.tick-list i { flex: none; width: 17px; height: 19px; color: #1a1c1c; }
.tick-list b { display: block; font: 600 15px/22px var(--pdp-font); color: #1a1c1c; }
.tick-list span { display: block; font: 400 12px/18px var(--pdp-font); color: #444748; }
.pdp-caution { margin-top: 16px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.pdp-caution__head { display: flex; align-items: center; gap: 8px; font: 600 15px/22px var(--pdp-font); }
.pdp-caution__head svg { width: 15px; height: 13px; }
.pdp-caution p { margin: 0; font: 400 12px/18px var(--pdp-font); color: #444748; }
.pdp-protocol { margin: 24px 0 0; font: 700 10px/14px var(--pdp-font); letter-spacing: .05em; color: #444748; }

/* ingredients */
.ing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ing-card { background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.05); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.ing-card__top { display: flex; align-items: center; justify-content: space-between; font: 400 12px/18px var(--pdp-font); color: #444748; }
.ing-card h3 { font: 600 18px/26px var(--pdp-font); letter-spacing: -0.01em; margin: 0; }
.ing-card p { font: 400 14px/1.6 var(--pdp-font); color: #444748; margin: 0; }
.ing-card__facts { margin-top: 8px; padding-top: 16px; border-top: 1px solid #eee; display: flex; flex-direction: column; gap: 8px; }
.ing-card__facts div { display: flex; justify-content: space-between; font: 400 12px/18px var(--pdp-font); color: #444748; }
.ing-card__facts b { color: #1a1c1c; font-weight: 600; }

/* how to use + routine */
.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 16px; }
.step-card { background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.05); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.step-card__no { font: 700 22px/30px var(--pdp-font); letter-spacing: -0.01em; color: #c4c7c7; }
.step-card h3 { font: 600 18px/26px var(--pdp-font); margin: 0; }
.step-card p { font: 400 14px/22px var(--pdp-font); color: #444748; margin: 0; }
.routine-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 16px; }
.routine-step { background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.05); border-radius: 12px; padding: 20px; opacity: .8; }
.routine-step__top { font: 700 10px/14px var(--pdp-font); letter-spacing: .05em; color: #444748; margin-bottom: 8px; }
.routine-step h4 { font: 600 15px/22px var(--pdp-font); margin: 0 0 4px; }
.routine-step p { font: 400 12px/18px var(--pdp-font); color: #444748; margin: 0; }
.routine-step.is-active { background: #000; opacity: 1; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }
.routine-step.is-active .routine-step__top { color: #858383; }
.routine-step.is-active h4 { color: #fff; }
.routine-step.is-active p { color: #858383; }

/* INCI */
.pdp-inci { padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.pdp-inci__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pdp-inci__list { font: 400 14px/1.6 var(--pdp-font); color: #444748; margin: 0; }
.pdp-inci__list b { color: #444748; font-weight: 700; }

/* reviews */
.pdp-reviews__head { display: grid; grid-template-columns: 5fr 6fr; gap: 48px; align-items: center; margin-bottom: 32px; }
.pdp-reviews__score { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.pdp-reviews__score strong { font: 700 52px/78px var(--pdp-font); color: #000; }
.pdp-reviews__score > div { display: flex; flex-direction: column; gap: 4px; }
.rating-dist { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.rating-dist > div { display: grid; grid-template-columns: 48px 1fr 40px; align-items: center; gap: 16px; }
.rating-dist span { font: 600 11px/14px var(--pdp-font); }
.rating-dist b { font: 600 11px/14px var(--pdp-font); color: #444748; text-align: right; }
.filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.filter-chip { border: 0; border-radius: 99px; padding: 6px 14px; font: 600 11px/14px var(--pdp-font); letter-spacing: .03em; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.05); color: #1a1c1c; cursor: pointer; }
.filter-chip.is-active { background: #000; color: #fff; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review-card { background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.05); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.review-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.review-card__head > div:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.avatar { width: 40px; height: 40px; border-radius: 99px; background: #eee; display: flex; align-items: center; justify-content: center; font: 600 15px/22px var(--pdp-font); flex: none; }
.avatar--dark { background: #000; color: #fff; }
.review-card h5 { font: 600 15px/22px var(--pdp-font); margin: 0; display: flex; align-items: center; gap: 6px; }
.review-card h5 svg { width: 11px; height: 11px; color: #1a1c1c; }
.review-card h6 { font: 600 15px/22px var(--pdp-font); margin: 0; }
.review-card p { font: 400 14px/22px var(--pdp-font); color: #444748; margin: 0; }
.review-card__foot { display: flex; align-items: center; justify-content: space-between; padding-top: 17px; border-top: 1px solid #eee; font: 400 12px/18px var(--pdp-font); color: #444748; }
.review-card__foot span { display: flex; align-items: center; gap: 6px; }
.review-card__foot svg { width: 12px; height: 12px; }
.review-card__foot b { font: 600 11px/14px var(--pdp-font); color: #000; }
.pdp-reviews__more { display: flex; justify-content: center; margin-top: 32px; }

/* bundle */
.bundle { padding: 32px; display: flex; flex-direction: column; gap: 32px; }
.bundle__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.bundle-item { display: flex; flex-direction: column; gap: 3px; }
.bundle-item__img { position: relative; border-radius: 8px; overflow: hidden; background: #f3f3f3; aspect-ratio: 378/262; margin-bottom: 4px; }
.bundle-item__img img { width: 100%; height: 100%; object-fit: cover; }
.bundle-item h4 { font: 600 15px/22px var(--pdp-font); margin: 0; }
.bundle-item b { font: 700 13px/18px var(--pdp-font); }
.bundle__total { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 25px; border-top: 1px solid #eee; flex-wrap: wrap; }
.bundle__price { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.bundle__price strong { font: 700 22px/30px var(--pdp-font); letter-spacing: -0.01em; }
.bundle__price s { font: 600 15px/22px var(--pdp-font); color: #444748; }
.bundle__price .save { background: #000; color: #fff; font: 700 10px/14px var(--pdp-font); padding: 2px 8px; border-radius: 4px; }
.bundle__total .btn { width: auto; }

/* cross-sell */
.cross-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cross-item { display: flex; align-items: center; gap: 16px; padding: 16px; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.05); border-radius: 12px; position: relative; }
.cross-item__img { flex: none; width: 80px; height: 80px; border-radius: 8px; overflow: hidden; background: #f3f3f3; }
.cross-item__img img { width: 100%; height: 100%; object-fit: cover; }
.cross-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cross-item__body h4 { font: 600 15px/22px var(--pdp-font); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cross-item__body span { display: flex; gap: 8px; align-items: baseline; font: 700 13px/18px var(--pdp-font); }
.cross-item__body span s { font: 400 12px/18px var(--pdp-font); color: #444748; }
.add-btn { flex: none; width: 36px; height: 36px; border-radius: 8px; background: #eee; display: flex; align-items: center; justify-content: center; color: #1a1c1c; }
.add-btn svg { width: 9px; height: 9px; }

/* ---------- responsive: symplyU PDP ---------- */
@media (max-width: 1199px) {
  .pdp { width: auto; margin: 0 50px 48px; border-radius: 24px; }
  .pdp-crumb, .pdp-hero, .pdp-stats, .pdp-section { padding-left: 32px; padding-right: 32px; }
  .pdp-hero { grid-template-columns: 1fr; gap: 32px; }
  .pdp-stats { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .pdp-grid-7-5 { grid-template-columns: 1fr; }
  .ing-grid, .step-grid { grid-template-columns: 1fr; }
  .routine-flow { grid-template-columns: 1fr 1fr; gap: 16px; }
  .pdp-reviews__head { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 1fr; }
  .bundle__row { grid-template-columns: 1fr 1fr; }
  .cross-grid { grid-template-columns: 1fr; }
  .pdp-trust { grid-template-columns: 1fr; }
}
@media (max-width: 809px) {
  .pdp { margin: 0 20px 36px; border-radius: 18px; }
  .pdp-crumb, .pdp-hero, .pdp-stats, .pdp-section { padding-left: 20px; padding-right: 20px; }
  .pdp-crumb { flex-direction: column; align-items: flex-start; }
  .pdp-stats { grid-template-columns: 1fr; gap: 24px; padding-top: 32px; padding-bottom: 32px; }
  .pdp-section { padding-top: 40px; padding-bottom: 40px; }
  .pdp h2 { font-size: 24px; }
  .pdp-title { font-size: 24px; line-height: 30px; }
  .pdp-variants__row { flex-direction: column; }
  .bundle__row { grid-template-columns: 1fr; }
  .routine-flow { grid-template-columns: 1fr; }
  .pdp-cta { flex-wrap: wrap; }
}