/* Lê Nhất · portfolio · token lấy từ Figma "Trang chủ v5" */
:root {
  --bg: #FAFAF7;
  --mist: #F1EBE2;
  --navy: #17110D;
  --navy-2: #1E1712;
  --card: #2A2019;
  --ink: #F2F3F8;
  --muted: #C9B9A6;
  --muted-2: #9C8E80;
  --text: #17110D;
  --text-2: #54493F;
  --gold: #FFC24B;
  --gold-ink: #7A5A1A;
  --blue: #69AEC2;
  --purple: #C9A0DA;
  --pink: #DB2777;
  --red: #E5484D;
  --green: #3DBE7A;
  --line-dark: rgba(255,255,255,.1);
  --line-light: rgba(23,17,13,.1);
  --radius: 28px;
  --wrap: 1344px;
  --pad: 48px;
  --f-head: "Bricolage Grotesque", system-ui, sans-serif;
  --f-body: "Be Vietnam Pro", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3 { font-family: var(--f-head); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
h2 { font-size: clamp(30px, 4vw, 48px); }

.container { width: min(var(--wrap), 100% - 2 * var(--pad)); margin-inline: auto; }

/* ---------- Nút ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 26px; border-radius: 26px;
  font: 600 15px/1 var(--f-body); white-space: nowrap;
  transition: transform .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--gold { background: var(--gold); color: var(--navy); }
.btn--dark { background: var(--navy); color: var(--ink); }
.btn--ghost { border: 1px solid rgba(218,182,98,.6); color: var(--gold); }
.btn--sm { height: 44px; padding: 0 22px; }
.btn--xl { height: 88px; padding: 0 56px; border-radius: 44px; font: 600 clamp(20px, 2.2vw, 30px)/1 var(--f-head); width: 100%; }
.link-under { font-weight: 500; font-size: 15px; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.link-under--gold { color: var(--gold-ink); }

/* ---------- Nav cố định ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,250,247,.85);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-light);
}
.nav__inner { width: min(var(--wrap), 100% - 2 * var(--pad)); margin-inline: auto; height: 76px; display: flex; align-items: center; gap: 32px; }
.nav__logo { font: 700 24px/1 var(--f-head); }
.nav__menu { display: flex; gap: 32px; margin-inline: auto; font-weight: 500; }
.nav__menu a:hover { color: var(--gold-ink); }
.nav__status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(61,190,122,.18); }

/* ---------- S1 Hero ---------- */
.hero-wrap { padding: 12px 24px 0; }
.hero {
  position: relative; max-width: 1392px; margin-inline: auto; min-height: 640px;
  background: var(--navy-2); color: var(--ink); border-radius: 32px; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr);
}
.hero__photo { position: absolute; inset: 0 0 0 auto; width: 59%; }
.hero__bg, .hero__person { position: absolute; right: 0; top: -200px; width: 100%; height: auto; }
.hero__bg { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 35%); mask-image: linear-gradient(90deg, transparent 0, #000 35%); }
.hero__name {
  position: absolute; left: 9%; top: 31%;
  font: 700 clamp(120px, 15vw, 216px)/1 var(--f-head); letter-spacing: -0.03em;
  color: var(--ink); white-space: nowrap; opacity: .95;
}
.hero__copy { position: relative; z-index: 2; padding: 72px; max-width: 640px; min-width: 0; }
.hero h1 { font-size: clamp(34px, 3.4vw, 48px); }
.hero__sub { color: var(--muted); margin-top: 18px; max-width: 470px; }
.hero__cta { display: flex; align-items: center; gap: 28px; margin-top: 32px; }
.hero__note { color: var(--muted); font-size: 14px; margin-top: 14px; }
.stats { display: grid; grid-template-columns: repeat(3, auto); gap: 40px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line-dark); max-width: 520px; }
.stats dt { font: 600 30px/1.2 var(--f-head); }
.stats dd { color: var(--muted); font-size: 14px; line-height: 1.35; margin-top: 6px; max-width: 140px; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 28px; }
.chips__label { color: var(--muted); font-size: 14px; margin-right: 6px; }
.chip { height: 32px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 16px; background: rgba(255,255,255,.08); font-size: 14px; }

/* ---------- Section chung ---------- */
.sec { padding: 112px 0; position: relative; overflow: hidden; }
.sec--dark { background: var(--navy); color: var(--ink); }
.sec--dark2 { background: var(--navy-2); color: var(--ink); }
.sec--light { background: var(--bg); }
.sec--mist { background: var(--mist); }
.sec--dark::before {
  content: ""; position: absolute; width: 900px; height: 600px; right: -200px; top: 120px;
  background: radial-gradient(closest-side, rgba(218,182,98,.16), transparent); pointer-events: none;
}
.sec__head { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: end; margin-bottom: 64px; position: relative; }
.sec__head p { color: var(--text-2); max-width: 420px; }
.sec--dark .sec__head p, .sec--dark2 .sec__head p { color: var(--muted); }
.h3-lg { font-size: 30px; margin: 80px 0 24px; }
.h3-lg--light { color: var(--ink); }
.footnote { color: var(--muted-2); font-size: 13px; margin-top: 16px; }

/* ---------- Ảnh trong khung ---------- */
.shot { border-radius: 14px; box-shadow: 0 40px 80px rgba(0,0,0,.45); }
.shot--phone { border-radius: 28px; border: 4px solid #3A2E24; }
.shot--phone-light { border-color: var(--navy); }
.browser { border-radius: 14px; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.14); }
.browser__bar { height: 32px; background: #3A2E24; display: flex; align-items: center; gap: 6px; padding-left: 16px; }
.browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: #FF5F57; }
.browser__bar i:nth-child(2) { background: #FEBC2E; }
.browser__bar i:nth-child(3) { background: #28C840; }
.browser--light { border-color: rgba(23,17,13,.08); box-shadow: 0 30px 60px rgba(120,72,20,.22); }
.browser--light .browser__bar { background: #F3EADD; }

/* ---------- S3 Trước / Sau ---------- */
.ts__stage { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; position: relative; }
.ts__before, .ts__after { border-radius: var(--radius); padding: 36px 40px 44px; position: relative; min-height: 520px; }
.ts__before { background: var(--navy-2); border: 1px solid var(--line-dark); }
.ts__after { background: var(--card); border: 1px solid rgba(218,182,98,.4); }
.ts__label { display: block; font-weight: 600; font-size: 14px; color: var(--muted); margin-bottom: 20px; }
.ts__label--gold { color: var(--gold); }
.sheet { background: #fff; color: var(--navy); border-radius: 10px; overflow: hidden; font-size: 14px; }
.sheet__bar { background: #1F7244; color: #fff; display: flex; justify-content: space-between; padding: 9px 14px; font-weight: 500; font-size: 13px; }
.sheet__bar b { color: #FFE08A; font-weight: 600; font-size: 12px; }
.sheet table { width: 100%; border-collapse: collapse; }
.sheet th { background: #EEF0F3; color: #6B5E52; font-weight: 600; text-align: left; padding: 7px 14px; }
.sheet td { padding: 8px 14px; border-top: 1px solid #E2E4EA; }
.sheet td + td, .sheet th + th { border-left: 1px solid #E2E4EA; }
.sheet tr.bad td { background: #FDE2DE; }
.bubbles { display: grid; gap: 10px; margin-top: -24px; margin-left: 30%; position: relative; }
.bubble { justify-self: start; background: #fff; color: var(--navy); font-size: 14px; padding: 10px 16px; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.bubble--me { background: #D5E6FF; justify-self: end; }
.ts__shots { position: relative; }
.ts__shots .shot--web { width: 86%; }
.ts__shots .shot--phone { position: absolute; right: 0; top: 64px; width: 26%; }
.toast {
  position: absolute; left: 4%; bottom: -26px; background: #fff; color: var(--navy);
  border: 1.5px solid var(--red); border-radius: 12px; padding: 12px 18px;
  box-shadow: 0 12px 32px rgba(0,0,0,.4); display: grid; gap: 2px; max-width: 360px;
}
.toast b { font-size: 14px; } .toast span { font-size: 12px; color: #6B5E52; }
.ts__pairs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 56px; padding-top: 32px; border-top: 1px solid #3D3128; }
.ts__pairs s { display: block; text-decoration: none; color: var(--muted-2); font-size: 15px; margin-bottom: 10px; }
.ts__pairs strong { font-weight: 600; font-size: 20px; line-height: 1.3; }

/* chuyển động Trước → Sau: chạy 1 lần khi vào khung nhìn */
.js .ts__after, .js .ts__pairs strong { opacity: 0; transform: translateX(120px); transition: opacity .7s ease-out, transform .7s ease-out; }
.js .ts__pairs strong { transform: translateY(16px); }
.js .ts__before { transition: opacity .7s ease-out, transform .7s ease-out; transform: translateX(50%); }
.js .toast { opacity: 0; transform: scale(.9); transition: opacity .4s ease-out 1s, transform .4s ease-out 1s; }
.js [data-ts].is-after .ts__before { transform: none; opacity: .45; }
.js [data-ts].is-after .ts__after { opacity: 1; transform: none; }
.js [data-ts].is-after .toast { opacity: 1; transform: none; }
.js .ts__slide.is-after .ts__pairs strong { opacity: 1; transform: none; transition-delay: .5s; }
@media (prefers-reduced-motion: reduce) {
  .js .ts__after, .js .ts__before, .js .toast, .js .ts__pairs strong { transition: none; }
}

/* ---------- S4 Vì sao ---------- */
.why { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.card { background: #fff; border-radius: var(--radius); padding: 40px; display: flex; flex-direction: column; gap: 14px; }
.card h3 { font-size: 26px; }
.card p { color: var(--text-2); }
.card .proof { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-light); color: var(--gold-ink); font-size: 14px; font-weight: 500; }
.compare { background: #fff; border-radius: var(--radius); overflow: hidden; }
.compare__row { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr 1fr; border-top: 1px solid #E2E4EA; }
.compare__row:first-child { border-top: 0; }
.compare__row > span { padding: 20px 24px; font-size: 15px; color: var(--text-2); }
.compare__row > span[role="rowheader"] { font-weight: 600; color: var(--text); }
.compare__row > .me { background: var(--navy); color: var(--ink); font-weight: 500; }
.compare__row--head > span { font-weight: 600; color: var(--text); padding-block: 24px; }
.compare__row--head > span:first-child { color: var(--muted-2); font-weight: 500; font-size: 14px; }
.compare__row--head > .me { color: var(--gold); font: 600 20px/1.2 var(--f-head); }

/* ---------- S5 Dự án ---------- */
.proj {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; align-items: center;
  margin-bottom: 96px; position: relative;
}
.proj__media { position: relative; border-radius: 32px; padding: 56px 48px; background: #2A2019; border: 1px solid var(--line-dark); isolation: isolate; }
.proj__media::before { content: ""; position: absolute; inset: 10% 5%; z-index: -1; filter: blur(60px); border-radius: 50%; }
.proj--gold .proj__media::before { background: rgba(218,182,98,.28); }
.proj--blue .proj__media { background: #1E2130; }
.proj--blue .proj__media::before { background: rgba(111,163,200,.32); }
.proj--purple .proj__media { background: #2E2117; border-color: rgba(177,114,202,.3); }
.proj--purple .proj__media::before { background: rgba(177,114,202,.3); }
.proj--flip { grid-template-columns: 1fr 1.6fr; }
.proj--flip .proj__media { order: 2; }
.proj--gold .shot--web { width: 88%; margin-left: auto; }
.proj--gold .shot--phone { position: absolute; left: 32px; bottom: 32px; width: 24%; }
.proj__body h3 { font-size: 48px; }
.proj__type { color: var(--muted); font-size: 14px; margin-top: 12px; }
.proj__type--dark { color: #6B6F80; }
.proj__result { font-weight: 500; font-size: 18px; margin-top: 18px; line-height: 1.45; }
.story { margin-top: 24px; display: grid; gap: 4px; }
.story dt { font-weight: 600; font-size: 13px; margin-top: 12px; }
.story dd { color: var(--muted); font-size: 15px; }
.proj--gold .story dt { color: var(--gold); }
.proj--blue .story dt { color: var(--blue); }
.proj--purple .story dt { color: var(--purple); }
.caption { color: var(--muted-2); font-size: 12px; text-align: center; margin-top: 16px; }

/* báo giá minh hoạ (dữ liệu giả) */
.quote { background: #fff; color: var(--navy); border-radius: 12px; padding: 24px; box-shadow: 0 40px 80px rgba(0,0,0,.45); font-size: 14px; max-width: 520px; margin-inline: auto; }
.quote__head { display: flex; justify-content: space-between; align-items: start; gap: 16px; border-top: 4px solid var(--gold); padding-top: 14px; }
.quote__head > div > b { font: 600 22px/1.2 var(--f-head); display: block; }
.quote__head span { color: #6B5E52; font-size: 12px; }
.quote__lang { background: #E2E4EA; border-radius: 13px; padding: 4px 10px; font-size: 11px !important; color: var(--navy) !important; white-space: nowrap; }
.quote table { width: 100%; border-collapse: collapse; margin-top: 18px; }
.quote th { text-align: left; font-size: 12px; color: #6B5E52; font-weight: 600; padding: 8px 0; border-bottom: 1px solid #E2E4EA; }
.quote td { padding: 10px 0; border-bottom: 1px solid #F0F1F4; }
.quote td:last-child, .quote th:last-child { text-align: right; }
.quote__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; color: #6B5E52; font-size: 12px; gap: 12px; }
.quote__btns { display: flex; gap: 8px; }
.quote__btns i { white-space: nowrap; font-style: normal; font-weight: 600; font-size: 12px; padding: 6px 12px; border-radius: 14px; color: #fff; }
.quote__btns .xl { background: #1F7244; } .quote__btns .pdf { background: #C0392B; }

/* Musee */
.musee {
  display: grid; grid-template-columns: 1fr 1.25fr; gap: 48px; align-items: center;
  background: #F6F1FF; color: var(--navy); border-radius: 32px; padding: 56px; position: relative; overflow: hidden; isolation: isolate;
}
.musee::before, .musee::after { content: ""; position: absolute; border-radius: 50%; filter: blur(90px); z-index: -1; }
.musee::before { width: 620px; height: 520px; right: -60px; top: -140px; background: rgba(244,114,182,.35); }
.musee::after { width: 620px; height: 460px; left: -160px; bottom: -140px; background: rgba(167,139,250,.3); }
.pill-pink { display: inline-block; background: #EC4899; color: #fff; font-weight: 600; font-size: 13px; padding: 6px 14px; border-radius: 16px; }
.musee h3 { font-size: 56px; margin-top: 18px; }
.musee__result { font-weight: 500; font-size: 20px; margin-top: 18px; line-height: 1.4; }
.story--light dt { color: var(--pink); }
.story--light dd { color: #4B4F60; }
.musee__media { position: relative; padding-bottom: 40px; }
.musee__media .browser { width: 88%; }
.musee__media .shot--phone { position: absolute; right: 0; bottom: 0; width: 26%; }

.others { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.others li { border-top: 1px solid rgba(255,255,255,.15); padding-top: 24px; display: grid; gap: 8px; }
.others b { font: 600 22px/1.3 var(--f-head); }
.others span { color: var(--muted); font-size: 15px; }

/* ---------- S6 Quy trình ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: s; }
.steps li { border-top: 1px solid rgba(23,17,13,.2); padding-top: 20px; }
.steps__n { font: 600 60px/1 var(--f-head); color: #956F23; }
.steps h3 { font: 600 18px/1.3 var(--f-body); margin-top: 24px; }
.steps p { color: var(--text-2); font-size: 15px; margin-top: 10px; }

.steps__who { display: inline-block; margin-top: 18px; font-size: 13px; font-weight: 600; color: #6B4E14; background: rgba(218,182,98,.22); padding: 4px 10px; border-radius: 12px; }
.steps__who + h3 { margin-top: 12px; }
.team { margin-top: 72px; }
.team__title { font-size: 30px; }
.team__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
.team__list li { background: #fff; border-radius: 20px; padding: 24px; display: grid; gap: 6px; align-content: start; }
.team__ava { width: 48px; height: 48px; border-radius: 14px; background: var(--navy); color: var(--gold); display: grid; place-items: center; font: 700 14px/1 var(--f-head); margin-bottom: 10px; }
.team__list b { font-size: 17px; }
.team__list em { font-style: normal; color: var(--text-2); font-size: 14px; line-height: 1.5; }

/* ---------- S7 Gói + Cam kết ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; }
.plan { background: var(--card); border: 1px solid var(--line-dark); border-radius: var(--radius); padding: 36px; display: flex; flex-direction: column; gap: 10px; }
.plan--hl { background: #33261B; border-color: rgba(218,182,98,.5); }
.plan h3 { font-size: 28px; margin-bottom: 4px; }
.plan > p { color: var(--muted); }
.plan h4 { font-weight: 600; font-size: 13px; color: #A3A7B6; margin-top: 10px; }
.plan .plan__strong { color: var(--ink); font-size: 15px; }
.plan .btn { margin-top: auto; align-self: flex-start; }
.plan h4 + p + h4 { margin-top: 12px; }
.plan .plan__strong:last-of-type { margin-bottom: 20px; }
.promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 48px; }
.promises li { padding-top: 20px; position: relative; }
.promises li::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 3px; background: var(--gold); }
.promises h4 { font-weight: 600; font-size: 19px; }
.promises p { color: var(--muted); font-size: 15px; margin-top: 8px; }

/* ---------- S8 FAQ ---------- */
.faq { display: grid; grid-template-columns: 4fr 8fr; gap: 64px; align-items: start; }
.faq__head { position: sticky; top: 120px; display: grid; gap: 28px; justify-items: start; }
.faq details { border-top: 1px solid rgba(23,17,13,.12); }
.faq details:last-child { border-bottom: 1px solid rgba(23,17,13,.12); }
.faq summary {
  list-style: none; cursor: pointer; min-height: 72px; padding: 22px 48px 22px 0; position: relative;
  font-weight: 600; font-size: 18px; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font: 400 28px/1 var(--f-body); color: #956F23; transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { color: var(--text-2); padding: 0 48px 24px 0; }

/* ---------- S9 Kinh nghiệm ---------- */
.exp { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; }
.exp__head { display: grid; gap: 24px; align-content: start; }
.exp__avatar { width: 120px; height: 120px; border-radius: 24px; object-fit: cover; }
.exp__head p { color: var(--muted); margin-top: 16px; }
.exp__list li { display: grid; grid-template-columns: 180px 1fr; gap: 4px 24px; padding: 24px 0; border-top: 1px solid #3D3128; }
.exp__list span { color: var(--muted); font-size: 14px; grid-row: span 2; }
.exp__list b { font-weight: 600; font-size: 18px; }
.exp__list p { color: var(--muted); font-size: 15px; }

/* ---------- S10 Liên hệ ---------- */
.contact { background: #E9DEC4; padding: 112px 0; position: relative; overflow: hidden; }
.contact::before { content: ""; position: absolute; width: 760px; height: 480px; right: -40px; top: -40px; border-radius: 50%; background: rgba(218,182,98,.45); filter: blur(80px); }
.contact__inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; position: relative; }
.contact h2 { font-size: clamp(40px, 5vw, 72px); }
.contact p { color: #6B5E52; font-size: 18px; margin-top: 20px; max-width: 520px; }
.contact__info { display: grid; gap: 4px; font-weight: 500; color: var(--navy) !important; }
.footer { background: var(--navy); color: var(--muted); font-size: 14px; }
.footer__inner { display: flex; justify-content: space-between; gap: 16px; padding: 40px 0 48px; border-top: 1px solid #3D3128; flex-wrap: wrap; }

/* thanh Zalo cố định (mobile) */
.zalo-bar {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  height: 56px; border-radius: 28px; background: var(--gold); color: var(--navy);
  display: none; align-items: center; justify-content: center; font-weight: 600; font-size: 15px;
  box-shadow: 0 12px 32px rgba(23,17,13,.35); z-index: 60; transition: transform .25s, opacity .25s;
}
.zalo-bar.is-hidden { transform: translateY(120%); opacity: 0; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  :root { --pad: 32px; }
  .nav__menu { display: none; }
  .nav__status { margin-left: auto; }
  .hero__copy { padding: 56px 48px; max-width: 560px; }
  .proj, .proj--flip { grid-template-columns: 1fr; gap: 32px; }
  .proj--flip .proj__media { order: 0; }
  .musee { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .plan .btn { margin-top: 12px; }
  .exp { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  :root { --pad: 16px; --radius: 20px; }
  body { font-size: 16px; padding-bottom: 84px; }
  .nav__inner { height: 60px; gap: 12px; }
  .nav__logo { font-size: 20px; }
  .nav__status { font-size: 12px; }
  .nav .btn { display: none; }
  .zalo-bar { display: flex; }

  .hero-wrap { padding: 8px 8px 0; }
  .hero { border-radius: 24px; min-height: 0; }
  .hero__photo { position: relative; width: 100%; height: 400px; inset: auto; overflow: hidden; }
  .hero__bg, .hero__person { top: -60px; width: 120%; right: -10%; }
  .hero__bg { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .hero__name { font-size: 104px; left: 6%; top: 34%; }
  .hero__copy { padding: 8px 20px 32px; }
  .hero h1 { font-size: 32px; }
  .hero__sub { font-size: 16px; }
  .hero__cta { flex-wrap: wrap; gap: 16px 24px; }
  .hero__cta .btn { width: 100%; }
  .stats { gap: 12px; margin-top: 32px; }
  .stats dd { font-size: 12px; }
  .chips__label { width: 100%; }

  .sec, .contact { padding: 72px 0; }
  .sec__head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; }
  h2 { font-size: 30px; }
  .h3-lg { font-size: 24px; margin-top: 56px; }

  .ts__stage { grid-template-columns: 1fr; gap: 20px; }
  .ts__before, .ts__after { padding: 24px 16px 32px; min-height: 0; }
  .sheet { font-size: 12px; }
  .sheet th, .sheet td { padding: 7px 8px; }
  .sheet__bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
  .bubbles { margin-left: 8%; }
  .bubble { font-size: 13px; }
  .ts__shots { display: flex; justify-content: center; }
  .ts__shots .shot--web { display: none; }
  .ts__shots .shot--phone { position: static; width: 62%; }
  .toast { left: 0; right: 0; margin-inline: auto; bottom: 24px; max-width: 300px; }
  .ts__pairs { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
  .ts__pairs strong { font-size: 18px; }
  .js .ts__before { transform: none; }
  .js .ts__after { transform: translateY(40px); }

  .why { grid-template-columns: 1fr; gap: 16px; }
  .card { padding: 28px 24px; }
  .card h3 { font-size: 22px; }

  /* bảng so sánh → thẻ theo tiêu chí */
  .compare { background: none; border-radius: 0; display: grid; gap: 12px; }
  .compare__row--head { display: none; }
  .compare__row { grid-template-columns: 1fr; border: 0; background: #fff; border-radius: 20px; overflow: hidden; }
  .compare__row > span { padding: 10px 20px; font-size: 14px; }
  .compare__row > span[role="rowheader"] { padding-top: 18px; font-size: 16px; }
  .compare__row > .me { margin: 4px 12px 8px; border-radius: 12px; padding: 12px 16px; }
  .compare__row > .me::before { content: "Lê Nhất: "; color: var(--gold); font-weight: 600; }
  .compare__row > [data-l]::before { content: attr(data-l) ": "; color: var(--text); font-weight: 600; }
  .compare__row > [data-l]:last-child { padding-bottom: 18px; }

  .proj { margin-bottom: 64px; }
  .proj__media { padding: 28px 16px; border-radius: 24px; }
  .proj--gold .shot--web { width: 100%; }
  .proj--gold .shot--phone { position: static; width: 46%; margin: -60px auto 0; }
  .proj__body h3 { font-size: 34px; }
  .quote { padding: 16px; font-size: 12px; }
  .quote__head > div > b { font-size: 18px; }
  .stats dt { font-size: 20px; }
  .musee { padding: 32px 20px; border-radius: 24px; }
  .musee h3 { font-size: 40px; }
  .musee__result { font-size: 18px; }
  .musee__media .browser { width: 100%; }
  .musee__media .shot--phone { position: static; width: 46%; margin: -48px 8px 0 auto; }
  .others { grid-template-columns: 1fr; }

  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps li { display: grid; grid-template-columns: 48px 1fr; gap: 4px 12px; padding: 20px 0; }
  .steps__n { font-size: 36px; }
  .steps h3 { margin-top: 2px; }
  .steps__who { grid-column: 2; margin-top: 0; justify-self: start; }
  .steps__n { grid-row: span 3; }
  .team__list { grid-template-columns: 1fr 1fr; }
  .team__list li { padding: 18px; }
  .steps p { margin-top: 0; }

  .plan { padding: 28px 24px; }
  .plan h3 { font-size: 24px; }
  .plan .btn { width: 100%; }
  .promises { grid-template-columns: 1fr; gap: 28px; }

  .faq { grid-template-columns: 1fr; gap: 32px; }
  .faq__head { position: static; }
  .faq summary { font-size: 17px; min-height: 64px; padding: 18px 40px 18px 0; }

  .exp__list li { grid-template-columns: 1fr; }
  .exp__list span { grid-row: auto; }
  .contact__inner { grid-template-columns: 1fr; gap: 32px; }
  .btn--xl { height: 64px; font-size: 20px; }
  .contact h2 { font-size: 36px; }
}

/* ---------- Hero · bảng màu "Đèn natri ấm" (anh Nhất chọn 2026-10-08) ---------- */
.hero { background: radial-gradient(120% 90% at 85% 15%, #4A2C12 0, #1E1712 55%, #120D09 100%); }
.hero__name { top: 12%; left: 6%; font-size: clamp(140px, 16vw, 232px); }
.hero__photo::before {
  content: ""; position: absolute; z-index: 0; width: 760px; height: 760px; right: 4%; top: 2%;
  border-radius: 50%; filter: blur(40px); pointer-events: none;
  background: radial-gradient(circle, rgba(255,194,75,.42), rgba(255,120,60,.16) 45%, transparent 70%);
}
.hero__bg, .hero__name, .hero__person { z-index: 1; }
.hero__bg {
  -webkit-mask-image: radial-gradient(ellipse 62% 52% at 58% 62%, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 52% at 58% 62%, #000 45%, transparent 100%);
}
.hero__person {
  -webkit-mask-image: linear-gradient(to top, transparent 20%, #000 48%);
  mask-image: linear-gradient(to top, transparent 20%, #000 48%);
}
@media (max-width: 720px) {
  .hero__name { font-size: 104px; left: 6%; top: 12%; }
  .hero__bg { -webkit-mask-image: radial-gradient(ellipse 75% 60% at 55% 45%, #000 50%, transparent 100%); mask-image: radial-gradient(ellipse 75% 60% at 55% 45%, #000 50%, transparent 100%); }
  .hero__photo::before { width: 420px; height: 420px; right: -10%; }
}

/* ---------- Header tối ấm, liền với hero (anh Nhất không ưng nền trắng ở header, 2026-10-08) ---------- */
.nav { background: rgba(23,17,13,.88); border-bottom: 1px solid rgba(255,194,75,.12); color: var(--ink); }
.nav__menu a:hover { color: var(--gold); }
.nav .btn--dark { background: var(--gold); color: var(--navy); }
body { background: var(--bg); }
.hero-wrap { background: var(--navy); padding-bottom: 24px; }

/* ---------- Dự án AI dữ liệu (thay chứng khoán, 2026-10-08) ---------- */
.proj--ai .proj__media { background: #1F1A2E; border-color: rgba(255,194,75,.25); padding-bottom: 120px; }
.proj--ai .proj__media::before { background: radial-gradient(circle, rgba(255,194,75,.35), rgba(201,160,218,.25) 55%, transparent 75%); }
.proj--ai .story dt { color: var(--gold); }
.shot--chat { position: absolute; right: 24px; bottom: -32px; width: 34%; border-radius: 16px; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 30px 70px rgba(0,0,0,.55); }
@media (max-width: 720px) {
  .proj--ai .proj__media { padding-bottom: 28px; }
  .shot--chat { position: relative; right: auto; bottom: auto; width: 72%; margin: -40px 0 0 auto; display: block; }
}
.ai-prompt { position: relative; max-width: 78%; background: #FFF8EA; color: var(--navy); border-radius: 20px 20px 20px 6px; padding: 16px 20px; font: 600 18px/1.45 var(--f-head); box-shadow: 0 20px 40px rgba(0,0,0,.35); }
.ai-prompt span { display: block; font: 500 12px/1.4 var(--f-body); color: #7A5A1A; margin-bottom: 4px; }
.ai-arrow { margin: 14px 0 16px 20px; color: var(--gold); font-size: 14px; font-weight: 500; }
.ai-arrow::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--gold); vertical-align: middle; margin-right: 10px; }
.proj--ai .shot--chat { width: 36%; }
@media (max-width: 720px) {
  .ai-prompt { max-width: 100%; font-size: 16px; }
  .shot--chat { width: 82% !important; margin: 16px auto 0 !important; }
}

/* ---------- Carousel Trước / Sau: 2 trang vận hành + AI (Figma v6, 2026-10-09) ---------- */
.ts__tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 40px; position: relative; z-index: 1; }
.ts__tab {
  position: relative; overflow: hidden; height: 40px; padding: 0 18px; border-radius: 20px; cursor: pointer;
  font: 600 14px/1 var(--f-body); color: var(--muted); background: var(--card); border: 1px solid #4A3B2E;
  transition: background .25s, color .25s, border-color .25s;
}
.ts__tab:hover { color: var(--ink); }
.ts__tab[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.ts__tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* thanh tiến trình: cho khách biết trang sẽ tự chuyển */
.ts__tab::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(23,17,13,.35); transform: scaleX(0); transform-origin: left; }
.ts__tab.is-running::after { animation: ts-progress var(--dwell, 6500ms) linear forwards; }
.is-paused .ts__tab.is-running::after { animation-play-state: paused; }
@keyframes ts-progress { to { transform: scaleX(1); } }
.ts__count { margin-left: 8px; color: var(--muted-2); font-size: 13px; }
.ts__count b { font-weight: 400; }

.js .ts__slides { display: grid; }
.js .ts__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s ease-out, visibility 0s .5s; }
.js .ts__slide.is-active { opacity: 1; visibility: visible; transition: opacity .5s ease-out .1s, visibility 0s; }

/* trang AI */
.ts__after .ai-prompt { max-width: 92%; font-size: 17px; margin-bottom: 20px; }
.ts__shots--ai { padding-bottom: 24px; }
.ts__shots--ai .browser { width: 100%; box-shadow: 0 30px 70px rgba(0,0,0,.5); border-color: rgba(255,255,255,.14); }
.ts__shots--ai .browser__bar { background: #EDE8E1; height: 28px; }
.ts__shots--ai .shot--chat { position: absolute; right: -8px; top: 40px; bottom: auto; width: 31%; }
.toast--ok { border-color: var(--green); }
.ts__shots--ai .toast { bottom: -8px; }
.js .ts__slide .toast { opacity: 0; transform: scale(.9); }
.js .ts__slide [data-ts].is-after .toast { opacity: 1; transform: none; }

/* ---------- Nền be ấm, thẻ trắng có viền + bóng nhẹ (Figma v6) ---------- */
.card, .compare, .team__list li {
  border: 1px solid #E2D6C4;
  box-shadow: 0 1px 2px rgba(23,17,13,.04), 0 8px 24px -4px rgba(23,17,13,.06);
}
.steps p { font-size: 16px; color: #3F362E; }
.steps li { border-top-color: rgba(23,17,13,.16); }
.steps__who { background: #fff; border: 1px solid #E2D6C4; color: #6B4E14; }
.team__ava { border-radius: 50%; }
.team__list em { font-size: 16px; color: #3F362E; }

.faq__list {
  background: #fff; border-radius: 20px; padding: 8px 32px;
  border: 1px solid #E2D6C4; box-shadow: 0 1px 2px rgba(23,17,13,.04), 0 8px 24px -4px rgba(23,17,13,.06);
}
.faq details:first-child { border-top: 0; }
.faq details:last-child { border-bottom: 0; }
.faq details p { font-size: 16px; color: #3F362E; }

/* chip ngành nằm trong hero, trên số liệu */
.chips { margin-top: 24px; }
.chips__label { font-size: 13px; }
.chip { height: 30px; padding: 0 12px; font-size: 13px; font-weight: 500; color: #F2EAE0; background: var(--card); border: 1px solid #4A3B2E; border-radius: 15px; }
.stats { margin-top: 32px; }

@media (max-width: 720px) {
  .ts__tabs { margin-bottom: 28px; }
  .ts__tab { height: 38px; padding: 0 14px; font-size: 13px; }
  .ts__count { display: none; }
  .ts__after .ai-prompt { max-width: 100%; font-size: 15px; }
  .ts__shots--ai { display: block; }
  .ts__shots--ai .shot--chat { display: none; }
  .ts__shots--ai .toast { position: relative; left: auto; right: auto; bottom: auto; margin: -20px 12px 0; }
  .faq__list { padding: 4px 20px; }
  .chips__label { width: auto; }
}
/* điện thoại: hàng tab dính dưới header khi cuộn trong khối, khách luôn thấy đang ở trang nào */
.ts { overflow: clip; }
@media (max-width: 720px) {
  .ts__tabs { position: sticky; top: 60px; z-index: 5; margin-inline: -16px; padding: 10px 16px; background: rgba(23,17,13,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}
.ts__short { display: none; }
@media (max-width: 720px) {
  .ts__tabs { flex-wrap: nowrap; gap: 6px; }
  .ts__tab { flex: 1 1 0; padding: 0 10px; }
  .ts__long { display: none; } .ts__short { display: inline; }
}
/* hero: chip ngành nằm một dòng như Figma; khối carousel sát hero hơn */
@media (min-width: 1101px) {
  .chips { flex-wrap: nowrap; width: max-content; gap: 6px; }
  .chip { padding: 0 11px; }
}
.ts { padding-top: 56px; }
@media (max-width: 720px) { .ts { padding-top: 40px; } }

/* ---------- Rút gọn chữ (2026-10-09) ---------- */
.story dd b { color: var(--ink); font-weight: 600; }
.hero__note b { color: var(--ink); font-weight: 600; }
.others { grid-template-columns: repeat(3, 1fr); }
.others .link-under { font-size: 15px; color: var(--gold); }
.promises--4 { grid-template-columns: repeat(4, 1fr); gap: 32px; }
.musee__body { align-self: center; }
@media (max-width: 1100px) { .promises--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .others, .promises--4 { grid-template-columns: 1fr; } }
/* thanh Zalo cố định: chữ dài xuống 2 dòng gọn trong khung, không tràn */
.zalo-bar { height: auto; min-height: 56px; padding: 8px 24px; text-align: center; line-height: 1.3; }
@media (max-width: 400px) { .zalo-bar { font-size: 14px; } }
/* 4 gói: lưới 2×2 trên máy tính (Figma v8) */
.plans { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .plans { grid-template-columns: 1fr; } }
@media (min-width: 1101px) { .hero__note { width: max-content; max-width: 620px; } }
/* điện thoại: hero tràn mép để chữ thẳng hàng với logo và các phần khác; số liệu 3 cột đều */
@media (max-width: 720px) {
  .hero-wrap { padding: 0 0 16px; }
  .hero { border-radius: 0; }
  .hero__copy { padding: 8px 16px 32px; }
  .stats { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .stats dt { font-size: 19px; white-space: nowrap; }
  .chips__label { width: 100%; }
}
/* thẻ đội: tên, vai trò, mô tả (đội 4 người, 2026-10-09) */
.team__list li { grid-template-columns: 48px 1fr; column-gap: 14px; row-gap: 2px; }
.team__ava { grid-row: span 2; margin-bottom: 0; }
.team__list b { align-self: end; }
.team__list i { font-style: normal; font-size: 13px; font-weight: 600; color: #7A5A1A; align-self: start; }
.team__list em { grid-column: 1 / -1; margin-top: 14px; }
/* hero gọn (2026-10-09): chip từ khoá ngay dưới tiêu đề, nhãn số liệu 1 dòng */
.hero h1 + .chips { margin-top: 24px; }
.chips + .hero__cta { margin-top: 28px; }
.stats dd { max-width: none; white-space: nowrap; }
@media (min-width: 1101px) { .hero h1 + .chips { flex-wrap: wrap; width: auto; max-width: 420px; gap: 8px; } }
/* hero 4 nhịp: tiêu đề → từ khoá → nút → con số (bỏ dòng cam kết, 2026-10-09) */
.hero h1 + .chips { margin-top: 28px; }
.chips + .hero__cta { margin-top: 36px; }
.hero__cta + .stats { margin-top: 56px; }
@media (max-width: 720px) { .hero h1 + .chips { margin-top: 20px; } .chips + .hero__cta { margin-top: 28px; } .hero__cta + .stats { margin-top: 36px; } }
/* menu: mục đang xem sáng vàng, có gạch dưới */
.nav__menu a { position: relative; transition: color .2s; }
.nav__menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; border-radius: 1px; background: var(--gold); transform: scaleX(0); transition: transform .25s ease-out; }
.nav__menu a.is-active { color: var(--gold); }
.nav__menu a.is-active::after { transform: scaleX(1); }

/* =====================================================================
   CHUYỂN ĐỘNG v1 · demo 2026-10-09 (khối mới, chép nguyên khối sang site/)
   Luật: chỉ transform/opacity · mỗi hiệu ứng ≤ 0,8 s · chạy 1 lần · reduced-motion = trạng thái cuối
   ===================================================================== */
:root { --e-out: cubic-bezier(.22, 1, .36, 1); --e-rise: cubic-bezier(.16, 1, .3, 1); }

/* 1. Hero "Thành phố lên đèn" (v2, sau khi đo): ảnh nào tải xong mới sáng dần lên, không bao giờ "bụp" hiện ra.
   Chữ, chip, nút, con số đứng im từ 0 ms. Nhịp mềm như người: chậm hơn, quãng ngắn, easing tự nhiên. */
.hero__name > span { display: inline-block; }
.dot { position: relative; }
.dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--green); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .len-den:not(.len-den-xong) .hero__bg,
  .len-den:not(.len-den-xong) .hero__person,
  .len-den:not(.len-den-xong) .hero__name > span,
  .len-den:not(.len-den-xong) .hero__photo::before { opacity: 0; }
  .len-den .hero__bg.is-on { animation: hd-den 1.2s cubic-bezier(.25, .1, .25, 1) both; }
  .len-den .hero__person.is-on { animation: hd-hien .9s ease-out both; }
  .len-den .hero.is-ready .hero__photo::before { animation: hd-quang 1.4s ease-out both; }
  .len-den .hero.is-ready .hero__name > span { animation: hd-ten 1s cubic-bezier(.2, .7, .2, 1) .1s both; }
  .len-den .hero.is-ready .hero__name > span + span { animation-delay: .25s; }
}
@keyframes hd-den { from { opacity: 0; transform: scale(1.025); } to { opacity: 1; transform: none; } }
@keyframes hd-hien { from { opacity: 0; } to { opacity: 1; } }
@keyframes hd-ten { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hd-quang { from { opacity: 0; } to { opacity: 1; } }
@keyframes hd-cham { from { opacity: .45; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }

/* 2. Trước → Sau: trượt ngắn lại (120px → 20px; Trước không còn đứng giữa rồi lùi sang trái) */
.js .ts__before { transform: none; }
.js .ts__after { transform: translateX(20px); transition: opacity .6s var(--e-out), transform .6s var(--e-out); }
@media (max-width: 720px) { .js .ts__after { transform: translateY(16px); } }

/* 3. Trang AI "chạy thật": câu hỏi hiện từng chữ → dashboard vào → 2 biểu đồ mọc từ dưới lên → khung chat → toast
   Mốc (tính từ lúc khung Sau hiện): chữ 0,25–1,1 s · dashboard 0,9–1,5 s · biểu đồ 1,3–2,1 s · chat 1,7–2,3 s · toast 2,2–2,6 s */
.dash { position: relative; }
.dash img { display: block; width: 100%; height: auto; }
.che { display: none; }
.js .che { display: block; position: absolute; background: #fff; transform-origin: top; top: 39%; bottom: 0; }
.che--1 { left: 5.8%; width: 44.4%; }
.che--2 { left: 52.2%; width: 44.6%; }
.ai-prompt span.tu { display: inline; font: inherit; color: inherit; margin: 0; } /* thắng luật .ai-prompt span (nhãn "Người quản lý gõ") */
.js #slide-ai .ai-prompt .tu { opacity: 0; }
.js #slide-ai .browser { opacity: 0; transform: translateY(16px); }
.js #slide-ai .shot--chat { opacity: 0; transform: translateX(16px); }
/* chuyển động chỉ đặt ở trạng thái "đã chạy" → khi đổi tab, mọi thứ về đầu ngay, không chạy lùi */
.js #slide-ai [data-ts].is-after .ai-prompt .tu { opacity: 1; transition: opacity .18s linear calc(.25s + var(--i) * 40ms); }
.js #slide-ai [data-ts].is-after .browser { opacity: 1; transform: none; transition: opacity .6s var(--e-out) .9s, transform .6s var(--e-out) .9s; }
.js #slide-ai [data-ts].is-after .che { transform: scaleY(0); transition: transform .8s var(--e-out) 1.3s; }
.js #slide-ai [data-ts].is-after .che--2 { transition-delay: 1.42s; }
.js #slide-ai [data-ts].is-after .shot--chat { opacity: 1; transform: none; transition: opacity .6s var(--e-out) 1.7s, transform .6s var(--e-out) 1.7s; }
.js #slide-ai .toast { transition-delay: 2.2s; }

@media (prefers-reduced-motion: reduce) {
  .js .che { display: none; }
  .js #slide-ai .ai-prompt .tu, .js #slide-ai .browser, .js #slide-ai .shot--chat { opacity: 1; transform: none; transition: none !important; }
}
/* 4. Sửa 2 lỗi chuyển động có sẵn trên site:
   - Thanh Zalo cố định hiện ra rồi trượt đi ngay lúc tải (CSS mặc định là hiện, JS ẩn sau) → giấu sẵn tới khi main.js chạy.
   - "Giảm chuyển động" vẫn mờ chéo 0,5 s khi đổi trang carousel → tắt. */
.len-den:not(.js) .zalo-bar { transform: translateY(120%); opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .js .ts__slide, .js .ts__slide.is-active, .ts__tab, .zalo-bar, .js .ts__after, .js .ts__before { transition: none; }
}
/* ===== hết khối CHUYỂN ĐỘNG v1 ===== */

/* chữ tên trên nền vườn/thác sáng: thêm bóng mờ để không chìm (ảnh vest, 2026-10-09) */
.hero__name { text-shadow: 0 2px 6px rgba(0,0,0,.25), 0 10px 40px rgba(0,0,0,.35); }

/* Chấm "Đang nhận dự án": sóng lan nhẹ mỗi 3 giây, như đèn báo đang trực. */
.nav__status .dot { position: relative; }
.nav__status .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--green); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .nav__status .dot { animation: nhan-tho 3s ease-in-out infinite; }
  .nav__status .dot::after { animation: nhan-song 3s cubic-bezier(0, 0, .2, 1) infinite; }
}
@keyframes nhan-song { 0% { opacity: .55; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(3.2); } }
@keyframes nhan-tho {
  0%, 100% { box-shadow: 0 0 0 4px rgba(61,190,122,.18); }
  50% { box-shadow: 0 0 0 4px rgba(61,190,122,.30), 0 0 12px rgba(61,190,122,.55); }
}

/* Trước/Sau: tiêu đề và mô tả xếp chồng (giống site chính) */
.sec__head--stack { grid-template-columns: 1fr; gap: 14px; align-items: start; }
.sec__head--stack h2 { text-wrap: balance; }
.sec__head--stack p { max-width: 560px; }

/* Quy trình: số và tag cùng hàng, canh giữa dọc; tiêu đề đội (giống site chính) */
@media (min-width: 721px) {
  .steps li { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; column-gap: 14px; }
  .steps__who { margin-top: 0; }
  .steps li > h3, .steps li > p { flex-basis: 100%; }
  .steps__who + h3 { margin-top: 20px; }
}
.team__title { text-wrap: balance; }
@media (max-width: 720px) { .team__title { font-size: 22px; line-height: 1.3; } }

/* Sửa lỗi có sẵn trên site (2026-10-10): ở 360–390 trang carousel rộng theo bảng Excel (368px > khung 328px),
   bị .ts { overflow: clip } cắt mất mép phải của tiêu đề và thẻ. Cho cột lưới co được. */
.js .ts__slides { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 720px) { .ts__stage { grid-template-columns: minmax(0, 1fr); } }

/* Link LinkedIn ở phần giới thiệu */
.exp__in { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 15px; font-weight: 600; color: var(--gold, #F4B942); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.exp__in:hover { opacity: .85; }
.exp__in:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }

/* =====================================================================
   HOVER + CARD 2026-10-10 · NÚT + THẺ v1 (spec team/design/2026-10-10-hover-card.md)
   Khối mới, chép nguyên khối sang site/ sau khối CHUYỂN ĐỘNG. HTML đi kèm: mục "Đã làm" cuối spec.
   ===================================================================== */
:root {
  --e-out: cubic-bezier(.22, 1, .36, 1);
  --e-press: cubic-bezier(.4, 0, .6, 1);
  --t-in: 320ms; --t-out: 220ms; --t-press: 90ms;
  --gold-hi: #FFD47A; --gold-press: #F5B436;
  --rule: rgba(23,17,13,.16); --rule-dark: rgba(255,255,255,.14);
  --glow-natri: radial-gradient(circle, rgba(255,194,75,.35), rgba(255,120,60,.12) 45%, transparent 70%);
}
.card, .compare, .team__list li, .faq__list { box-shadow: none; }
.compare { border-radius: 20px; }
.compare__row { border-top-color: #EADFCF; }

/* 3.1 Vì sao chọn: một thẻ chính + 3 dòng trên đường kẻ */
.why--ed { gap: 0; grid-template-columns: minmax(0, 1fr); }
.why--ed .card--lead {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(110% 80% at 100% 0%, #4A2C12 0, #1E1712 58%, #17110D 100%);
  border: 1px solid rgba(255,194,75,.18); border-radius: var(--radius);
  box-shadow: 0 32px 64px -24px rgba(74,44,18,.45);
  color: var(--ink); padding: 48px; gap: 16px; margin-bottom: 24px;
}
.why--ed .card--lead::before {
  content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; right: -140px; top: -160px;
  border-radius: 50%; background: var(--glow-natri); filter: blur(24px); pointer-events: none;
  transition: transform 800ms var(--e-out);
}
.why--ed .card--lead h3 { font-size: 36px; line-height: 1.15; letter-spacing: -.02em; max-width: 13ch; }
.why--ed .card--lead p { color: var(--muted); font-size: 18px; line-height: 1.55; max-width: 34ch; }
.why--ed .card--lead .link-under { color: var(--gold); align-self: flex-start; }
.why--ed .card--lead .proof { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule-dark); color: var(--muted); }
.why--ed .card--lead .proof b { color: var(--gold); font-weight: 600; }
.why--ed > .card:not(.card--lead) {
  background: none; border: 0; border-radius: 0; padding: 24px 0;
  border-top: 1px solid var(--rule); gap: 8px;
}
.why--ed > .card:not(.card--lead):last-child { border-bottom: 1px solid var(--rule); }
.why--ed > .card:not(.card--lead) h3 { font-size: 24px; line-height: 1.25; letter-spacing: -.01em; }
.why--ed > .card:not(.card--lead) .proof { margin-top: 4px; padding-top: 0; border-top: 0; color: var(--text-2); }
.why--ed .proof { font-size: 14px; line-height: 1.5; font-weight: 400; }
.why--ed .proof b { color: var(--gold-ink); font-weight: 600; }
@media (min-width: 1101px) {
  .why--ed { grid-template-columns: 5fr 7fr; column-gap: 48px; }
  .why--ed .card--lead { grid-column: 1; grid-row: 1 / span 3; margin-bottom: 0; }
  .why--ed > .card:not(.card--lead) {
    grid-column: 2; padding: 32px 0;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 8px 32px; align-content: start;
  }
  .why--ed > .card:not(.card--lead) h3 { grid-row: span 2; }
}
@media (max-width: 720px) {
  .why--ed .card--lead { padding: 32px 24px; }
  .why--ed .card--lead h3 { font-size: 30px; }
  .why--ed .card--lead p { font-size: 16px; }
  .why--ed > .card:not(.card--lead) h3 { font-size: 21px; }
}

/* 3.3 Gói: gói nổi + 3 dòng */
.plan h4 { color: var(--muted-2); }
.plan--hl {
  order: -1; position: relative; overflow: hidden; isolation: isolate; padding: 48px;
  background: radial-gradient(120% 70% at 100% 0%, #4A2C12 0, #33261B 55%, #2A2019 100%);
  border-color: rgba(255,194,75,.45);
  box-shadow: 0 32px 64px -24px rgba(0,0,0,.6);
}
.plan--hl::before {
  content: ""; position: absolute; z-index: -1; width: 460px; height: 460px; right: -160px; top: -180px;
  border-radius: 50%; background: var(--glow-natri); filter: blur(24px); opacity: .75; pointer-events: none;
  transition: opacity 600ms var(--e-out), transform 800ms var(--e-out);
}
.plan--hl h3 { font-size: 36px; line-height: 1.15; letter-spacing: -.02em; }
.plan--hl h4 { color: var(--muted); }
.plan:not(.plan--hl) {
  background: none; border: 0; border-radius: 0; padding: 32px 0;
  border-top: 1px solid var(--rule-dark);
}
.plan:not(.plan--hl):last-child { border-bottom: 1px solid var(--rule-dark); }
.plan:not(.plan--hl) h3 { font-size: 24px; line-height: 1.25; transition: color var(--t-out) var(--e-out); }
@media (min-width: 1101px) {
  .plans { grid-template-columns: 5fr 7fr; column-gap: 48px; row-gap: 0; }
  .plan--hl { grid-column: 1; grid-row: 1 / span 3; }
  .plan:not(.plan--hl) {
    grid-column: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "ten khop" "mo khop" "mo nut"; column-gap: 32px; row-gap: 8px; align-items: start;
  }
  .plan:not(.plan--hl) > h3 { grid-area: ten; margin: 0; }
  .plan:not(.plan--hl) > p { grid-area: mo; }
  .plan:not(.plan--hl) > .plan__fit { grid-area: khop; }
  .plan:not(.plan--hl) > .btn { grid-area: nut; margin-top: 16px; justify-self: start; } /* lệch spec: grid mặc định kéo giãn nút hết cột */
}
@media (max-width: 1100px) { .plan--hl { margin-bottom: 8px; } }
@media (max-width: 720px) { .plan--hl { padding: 32px 24px; } .plan--hl h3 { font-size: 28px; } }

/* 3.4 Đội: một tấm thẻ chung, chia cột bằng đường kẻ (bỏ vòng chữ viết tắt) */
.team__list { gap: 0; background: #fff; border: 1px solid #E2D6C4; border-radius: 20px; overflow: hidden; }
.team__list li { display: block; background: none; border: 0; border-radius: 0; padding: 32px 24px; border-left: 1px solid #EADFCF; }
.team__list li:first-child { border-left: 0; background: #FBF6EE; }
.team__list b { display: block; font: 600 21px/1.25 var(--f-head); }
.team__list i { display: block; margin-top: 4px; }
.team__list em { display: block; margin-top: 16px; }
@media (max-width: 720px) {
  .team__list { grid-template-columns: 1fr; }
  .team__list li { border-left: 0; border-top: 1px solid #EADFCF; padding: 24px 20px; }
  .team__list li:first-child { border-top: 0; }
}

/* 3.5 Cam kết: bỏ vạch vàng */
.promises li { padding-top: 24px; border-top: 1px solid var(--rule-dark); }
.promises li::before { content: none; }
.promises h4 { font: 600 21px/1.3 var(--f-head); }

/* 3.6 Hỏi đáp: bỏ hộp, câu đang mở thành "tờ giấy" */
.faq__list { background: none; border: 0; padding: 0; border-radius: 0; }
.faq details, .faq details:first-child { border-top: 1px solid var(--rule); border-radius: 0; }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq details { padding-inline: 24px; margin-inline: -24px; transition: background-color var(--t-in) var(--e-out); }
.faq details[open] { background: #fff; border-radius: 16px; border-top-color: transparent; }
.faq details[open] + details { border-top-color: transparent; }
.faq details[open]:last-child { border-bottom-color: transparent; }
@media (max-width: 720px) { .faq__list { padding: 0; } .faq details { padding-inline: 12px; margin-inline: -12px; } }

/* 4.1 Nút: nền chung */
.btn {
  position: relative; gap: 10px;
  background-repeat: no-repeat; background-position: 50% 100%; background-size: 100% 0%;
  transition: transform var(--t-out) var(--e-out), background-size var(--t-out) var(--e-out),
              border-color var(--t-out) var(--e-out), color var(--t-out) var(--e-out),
              box-shadow var(--t-out) var(--e-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: none; }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.contact .btn:focus-visible { outline-color: var(--navy); }
/* link, câu hỏi đáp, tab: viền focus cùng kiểu (vàng trên nền tối, nâu đậm trên nền sáng) */
a:not(.btn):focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.sec--mist a:not(.btn):focus-visible, .sec--mist summary:focus-visible, .contact a:focus-visible { outline-color: var(--gold-ink); }
.btn__ic { width: 20px; height: 20px; flex: none; margin-left: -4px; }
.btn--xl .btn__ic { width: 28px; height: 28px; }
.btn__ic .d { fill: currentColor; transform-box: fill-box; transform-origin: center; }

/* 4.2 Biến thể: lớp phủ từ dưới lên */
.btn--gold {
  background-image: linear-gradient(var(--gold-hi), var(--gold-hi));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 2px rgba(23,17,13,.25), 0 14px 32px -10px rgba(255,170,50,0);
}
.btn--ghost { background-image: linear-gradient(rgba(255,194,75,.12), rgba(255,194,75,.12)); }
.btn--dark  { background-image: linear-gradient(#2A2019, #2A2019); }
.btn--xl { overflow: hidden; }
.btn--xl::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,212,122,.22) 50%, transparent);
  transform: translateX(-120%) skewX(-12deg);
}
@keyframes quet-den { to { transform: translateX(320%) skewX(-12deg); } }
@keyframes go-tin { 0%, 60%, 100% { transform: none; opacity: 1; } 30% { transform: translateY(-2.5px); opacity: .55; } }

/* 4.3 Hover: chỉ máy có chuột */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transition-duration: var(--t-in); }
  .btn--gold:hover {
    transform: translateY(-2px); background-size: 100% 100%;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(23,17,13,.2), 0 14px 32px -10px rgba(255,170,50,.65);
  }
  .btn--sm.btn--gold:hover { transform: translateY(-1px); }
  .btn--ghost:hover { transform: translateY(-1px); background-size: 100% 100%; border-color: var(--gold); }
  .btn--dark:hover { transform: translateY(-2px); background-size: 100% 100%; box-shadow: 0 18px 36px -14px rgba(23,17,13,.55); }
  .btn--xl:hover::before { animation: quet-den 1s var(--e-out) both; }
  .btn:hover .btn__ic .d { animation: go-tin 900ms var(--e-out) infinite; }
  .btn:hover .btn__ic .d:nth-of-type(2) { animation-delay: 120ms; }
  .btn:hover .btn__ic .d:nth-of-type(3) { animation-delay: 240ms; }

  /* 4.4 link gạch chân: gạch rút về bên phải rồi chạy lại từ bên trái */
  .hero .link-under:hover { color: var(--gold); }
  .link-under:hover { animation: gach-lai 560ms var(--e-out); }
  /* 4.5 menu: gạch dưới mờ hiện ra khi rê */
  .nav__menu a:not(.is-active):hover::after { transform: scaleX(1); opacity: .45; }
  /* 4.6 tab Trước/Sau */
  .ts__tab:not([aria-selected="true"]):hover { border-color: #6B5544; background: #33261B; }

  /* 5. Thẻ: chỉ chỗ bấm được hoặc chứa nút */
  .plan--hl:hover::before { opacity: 1; transform: scale(1.06); }
  .plan:not(.plan--hl):hover h3 { color: var(--gold); }
  .plan:not(.plan--hl):hover .btn--ghost { border-color: var(--gold); }
  .proj__media::before { transition: transform 800ms var(--e-out); }
  .proj:hover .proj__media::before { transform: scale(1.08); }
  .faq summary { transition: color var(--t-out) var(--e-out); }
  .faq summary:hover { color: var(--gold-ink); }
}
.link-under {
  border-bottom: 0; padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: color var(--t-out) var(--e-out);
}
@keyframes gach-lai {
  0%   { background-position: 100% 100%; background-size: 100% 1px; }
  45%  { background-position: 100% 100%; background-size: 0% 1px; }
  46%  { background-position: 0 100%;    background-size: 0% 1px; }
  100% { background-position: 0 100%;    background-size: 100% 1px; }
}
.nav__menu a::after { transform-origin: left; transition: transform .25s var(--e-out), opacity .25s var(--e-out); }
/* Link LinkedIn (#gioi-thieu): cùng kiểu gạch chân + hover "gạch chạy lại" như .link-under */
.exp__in { border-bottom: 0; padding-bottom: 3px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
@media (hover: hover) and (pointer: fine) { .exp__in:hover { opacity: 1; animation: gach-lai 560ms var(--e-out); } }

/* 4.7 Nhấn lún: đặt SAU khối hover để thắng :hover. `.btn.btn--sm:active` (0,3,0) để thắng `.btn--sm.btn--gold:hover` */
.btn:active, .btn.btn--sm:active { transform: translateY(0) scale(.97); transition: transform var(--t-press) var(--e-press), background-size var(--t-press) linear, box-shadow var(--t-press) linear; }
.btn--gold:active { background-color: var(--gold-press); background-size: 100% 0%; box-shadow: inset 0 2px 4px rgba(122,90,26,.35); }
.btn--ghost:active { background-size: 100% 100%; }
.zalo-bar { -webkit-tap-highlight-color: transparent; }
.zalo-bar:active { transform: scale(.98); background: var(--gold-press); transition-duration: var(--t-press); }
.zalo-bar .btn__ic { width: 20px; height: 20px; margin-right: 8px; flex: none; }
.zalo-bar .btn__ic .d { fill: currentColor; }

/* 4.8 Giảm chuyển động: màu vẫn đổi ngay, không nhích, không lướt, không nhún */
@media (prefers-reduced-motion: reduce) {
  .btn, .link-under, .nav__menu a::after, .plan--hl::before, .proj__media::before,
  .why--ed .card--lead::before, .faq details, .faq summary, .plan h3 { transition: none !important; }
  .btn:hover, .btn:active, .zalo-bar:active { transform: none !important; }
  .btn__ic .d, .btn--xl::before, .link-under, .exp__in { animation: none !important; }
}
/* ===== hết khối HOVER + CARD 2026-10-10 ===== */

/* Tiêu đề xuống dòng cân, không để một chữ lẻ ở dòng cuối */
h2, h3 { text-wrap: balance; }

/* =====================================================================
   THANH VỊ TRÍ MOBILE 2026-10-10 · phương án A "Chuỗi đèn"
   Spec: team/design/2026-10-10-thanh-vi-tri-mobile-designer.md. HTML/JS đi kèm: mục "Đã làm" cuối spec.
   8 chấm 6px sát mép phải (tâm cách mép 8px), cục đang xem là viên thuốc 6×18px.
   Chỉ hiện ≤720px và cao ≥480px; JS bật .is-on từ Trước/Sau tới Liên hệ, .is-under khi footer chạm thanh,
   .is-light trên từng chấm nằm trên nền be.
   ===================================================================== */
.spy { display: none; }
@media (max-width: 720px) and (min-height: 480px) {
  .spy:not([hidden]) {
    display: block; position: fixed; z-index: 55;
    right: env(safe-area-inset-right);
    /* giữa khoảng trống từ đáy nav (60px) tới đỉnh thanh Zalo (≈68px + safe-area) */
    top: calc(60px + (100dvh - 60px - 68px - env(safe-area-inset-bottom)) / 2);
    transform: translateY(-50%);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--t-in) var(--e-out), visibility 0s linear var(--t-in);
  }
  .spy.is-on:not(.is-under) { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--t-in) var(--e-out), visibility 0s; }
  /* màu theo nền ngay dưới từng chấm (JS gắn .is-light theo data-tone của mục nằm sau chấm) */
  .spy a { --spy-dot: rgba(242,243,248,.5); --spy-on: var(--gold); --spy-glow: 0 0 8px 1px rgba(255,194,75,.55); --spy-ring: var(--gold); }
  .spy a.is-light { --spy-dot: rgba(23,17,13,.55); --spy-on: var(--gold-ink); --spy-glow: 0 0 0 0 transparent; --spy-ring: var(--gold-ink); }
  .spy ol { list-style: none; margin: 0; padding: 0; }
  .spy li { display: block; }
  /* vùng chạm 24×24; chấm nằm lệch phải để tâm cách mép màn 8px */
  .spy a { position: relative; display: block; width: 24px; height: 24px; -webkit-tap-highlight-color: transparent; border-radius: 6px; }
  .spy a::before {
    content: ""; position: absolute; right: 5px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 3px;
    background: var(--spy-dot);
    transition: height var(--t-out) var(--e-out), margin-top var(--t-out) var(--e-out), background-color var(--t-in) var(--e-out), box-shadow var(--t-in) var(--e-out), transform var(--t-press) var(--e-press);
  }
  .spy a[aria-current]::before {
    height: 18px; margin-top: -9px; background: var(--spy-on); box-shadow: var(--spy-glow);
    transition-duration: var(--t-in), var(--t-in), var(--t-in), var(--t-in), var(--t-press);
  }
  .spy a:active::before { transform: scale(1.3); }
  .spy a:focus { outline: none; }
  .spy a:focus-visible { outline: 2px solid var(--spy-ring); outline-offset: 2px; }
  /* nhãn: viên tối, mép phải cách mép màn 24px, căn giữa theo cục; chữ luôn trong DOM (aria-label trên link) */
  .spy__lbl {
    position: absolute; right: 24px; top: 0; height: 24px; padding: 0 8px; border-radius: 12px;
    display: flex; align-items: center; white-space: nowrap;
    background: rgba(23,17,13,.92); border: 1px solid rgba(255,194,75,.28); color: var(--ink);
    font: 500 12px/16px var(--f-body); letter-spacing: 0;
    opacity: 0; transform: translateX(4px); pointer-events: none;
    transition: opacity var(--t-out) var(--e-out), transform var(--t-out) var(--e-out);
  }
  .spy.is-talking a[aria-current] .spy__lbl, .spy a:focus-visible .spy__lbl {
    opacity: 1; transform: none; transition-duration: var(--t-in);
  }  /* đang dùng phím: chỉ hiện nhãn của chấm đang focus, không chồng hai nhãn */
  .spy:has(a:focus-visible) a[aria-current]:not(:focus-visible) .spy__lbl { opacity: 0; }
}
main section[tabindex="-1"]:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .spy, .spy.is-on, .spy a::before, .spy a[aria-current]::before, .spy__lbl { transition: none !important; }
  .spy a:active::before, .spy__lbl { transform: none !important; }
}
/* ===== hết khối THANH VỊ TRÍ MOBILE 2026-10-10 ===== */

/* ============ SỬA CHỖ TRỐNG 2026-10-10 ============ */
/* Gói nổi bật: không kéo giãn hết 3 hàng, dính theo khi cuộn qua 3 gói bên phải */
@media (min-width: 1101px) {
  .plan--hl { align-self: start; position: sticky; top: 104px; }
  .plan--hl .btn { margin-top: 28px; }
}
/* Hỏi đáp mobile: thẻ mở chỉ tràn mép trái, chừa chỗ cho thanh vị trí bên phải */
@media (max-width: 720px) { .faq details { margin-inline: -12px 0; } }

/* Liên hệ: LinkedIn dạng icon + tên gạch chân như link */
.contact__info .contact__in { display: inline-flex; align-items: center; gap: 10px; justify-self: start; color: inherit; text-decoration: none; }
.contact__in .ico-in { flex: none; color: #0A66C2; border-radius: 3px; }
.contact__in span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.contact__in:hover span { color: var(--gold-ink); }
.contact__in:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }