/* Chat AI VN — trang giới thiệu. Đọc RULES.md trước khi sửa. */

/* ═══ Token ══════════════════════════════════════════════════════ */
:root {
  --bg:            oklch(0.992 0.002 300);
  --bg-2:          oklch(0.972 0.005 300);
  --surface:       oklch(1 0 0);
  --surface-2:     oklch(0.968 0.006 300);

  --ink:           oklch(0.215 0.022 296);
  --ink-2:         oklch(0.455 0.020 296);
  --ink-3:         oklch(0.530 0.018 296);

  --line:          oklch(0.918 0.005 300);
  --line-2:        oklch(0.868 0.007 300);

  --primary:       oklch(0.470 0.140 290);
  --primary-hover: oklch(0.420 0.140 290);
  --primary-soft:  oklch(0.958 0.020 292);
  --primary-line:  oklch(0.880 0.048 292);
  --primary-wash:  oklch(0.976 0.012 292);

  --jade:          oklch(0.520 0.095 168);
  --jade-soft:     oklch(0.955 0.024 168);

  --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-full: 999px;

  --sh-1: 0 1px 2px oklch(0.215 0.022 296 / .05), 0 0 0 1px oklch(0.215 0.022 296 / .05);
  --sh-2: 0 1px 3px -1px oklch(0.215 0.022 296 / .12), 0 8px 22px -6px oklch(0.215 0.022 296 / .10), 0 0 0 1px oklch(0.215 0.022 296 / .05);
  --sh-3: 0 2px 6px -2px oklch(0.215 0.022 296 / .10), 0 24px 60px -18px oklch(0.215 0.022 296 / .26), 0 0 0 1px oklch(0.215 0.022 296 / .06);
  --sh-btn: inset 0 1px 0 oklch(1 0 0 / .2), 0 1px 2px oklch(0.215 0.022 296 / .3);

  --z-rail: 30; --z-sticky: 40; --z-fab: 60;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.6, .04, .2, 1);
  --t1: 170ms; --t2: 320ms; --t3: 520ms; --t4: 860ms;

  --wrap: min(1200px, 100% - 2.5rem);
  --font-sans: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ═══ Nền tảng ═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.62;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.014em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

.wrap { width: var(--wrap); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ═══ Chữ ════════════════════════════════════════════════════════ */
.d1 { font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3.375rem); line-height: 1.1; letter-spacing: -0.018em; }
.d2 { font-size: clamp(1.65rem, 1.1rem + 2.3vw, 2.85rem); line-height: 1.14; letter-spacing: -0.016em; }
.d3 { font-size: clamp(1.2rem, 1.06rem + 0.6vw, 1.5rem); line-height: 1.3; letter-spacing: -0.012em; }
.lead { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); line-height: 1.55; color: var(--ink-2); max-width: 52ch; }
.muted { color: var(--ink-2); }
.tiny  { font-size: 0.8125rem; line-height: 1.45; }

/* ═══ Nút ════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 46px; padding: 0 1.25rem;
  border: 1px solid transparent; border-radius: var(--r-md);
  font-size: 0.9375rem; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background var(--t1) var(--ease), border-color var(--t1) var(--ease),
              transform var(--t1) var(--ease), box-shadow var(--t1) var(--ease);
}
.btn svg { width: 17px; height: 17px; flex: none; transition: transform var(--t2) var(--ease); }
.btn:hover svg.arr { transform: translateX(3px); }
.btn-1 { background: var(--primary); color: #fff; box-shadow: var(--sh-btn); }
.btn-1:hover { background: var(--primary-hover); transform: translateY(-1px); }
.btn-2 { background: var(--surface); color: var(--ink); border-color: var(--line-2); box-shadow: var(--sh-1); }
.btn-2:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.btn-lg { min-height: 52px; padding: 0 1.65rem; font-size: 1rem; }

.tlink {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: 0.9375rem; font-weight: 500; color: var(--primary);
  padding-bottom: 2px; border-bottom: 1px solid transparent;
  transition: border-color var(--t1) var(--ease);
}
.tlink svg { width: 15px; height: 15px; transition: transform var(--t2) var(--ease); }
.tlink:hover { border-color: currentColor; }
.tlink:hover svg { transform: translateX(3px); }

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--jade); flex: none; }
.js-motion .dot { animation: pulse 2.6s var(--ease) infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 oklch(0.520 0.095 168 / .45); }
  60%      { box-shadow: 0 0 0 7px oklch(0.520 0.095 168 / 0); }
}

/* ═══ Dải mục ════════════════════════════════════════════════════ */
.band { padding-block: clamp(4rem, 7vw, 7rem); }
.band-air { padding-block: clamp(5rem, 9vw, 8.5rem); }
.band-line { border-top: 1px solid var(--line); }
.band-tint { background: var(--bg-2); }
/* Cột hẹp canh giữa, tiêu đề nằm trong cột. Không để nội dung dạt hẳn một bên. */
.col-narrow { max-width: 42rem; }
.col-narrow .head { max-width: none; margin-bottom: clamp(2rem, 3.5vw, 2.75rem); }
.head { max-width: 44rem; margin-bottom: clamp(2.5rem, 4.5vw, 4rem); }
.head h2 { margin-bottom: .8rem; }

.progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: var(--z-rail);
  background: var(--primary); transform: scaleX(0); transform-origin: 0 50%; will-change: transform;
}

/* ═══ Đầu trang ══════════════════════════════════════════════════ */
.hdr {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: oklch(0.992 0.002 300 / .8); backdrop-filter: saturate(1.7) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t2) var(--ease), background var(--t2) var(--ease);
}
.hdr.is-stuck { border-bottom-color: var(--line); background: oklch(0.992 0.002 300 / .94); }
.hdr .wrap { display: flex; align-items: center; gap: 1.5rem; height: 68px; transition: height var(--t2) var(--ease); }
.hdr.is-stuck .wrap { height: 60px; }

.brand { display: flex; align-items: center; gap: .6rem; margin-right: auto; }
.brand img { width: 32px; height: 32px; border-radius: var(--r-sm); }
.brand b { display: block; font-weight: 600; font-size: 1rem; letter-spacing: -0.008em; line-height: 1.15; }
.brand i { display: block; font-style: normal; font-size: 0.75rem; line-height: 1.25; white-space: nowrap; color: var(--ink-3); }

.nav { display: flex; gap: .1rem; }
.nav a {
  position: relative; padding: .5rem .7rem; border-radius: var(--r-sm);
  font-size: 0.9375rem; font-weight: 500; white-space: nowrap; color: var(--ink-2);
  transition: color var(--t1) var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .3rem; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--t2) var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.hdr-act { display: flex; align-items: center; gap: .5rem; padding-left: 1rem; margin-left: .25rem; border-left: 1px solid var(--line); }
.btn-login { font-size: 0.9375rem; font-weight: 500; color: var(--ink-2); padding: .5rem; transition: color var(--t1) var(--ease); }
.btn-login:hover { color: var(--ink); }
.btn-cta {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 1.05rem;
  border-radius: var(--r-md); background: var(--primary); color: #fff;
  font-size: 0.9375rem; font-weight: 500; box-shadow: var(--sh-btn);
  transition: background var(--t1) var(--ease), transform var(--t1) var(--ease);
}
.btn-cta:hover { background: var(--primary-hover); transform: translateY(-1px); }

/* Chuyen ngon ngu: qua dia cau kem ma nuoc, gon bang mot bieu tuong. */
.lang {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .38rem .5rem; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--ink-3); font: inherit; font-size: 0.8125rem; font-weight: 500;
  letter-spacing: .02em; cursor: pointer;
  transition: color var(--t1) var(--ease), background var(--t1) var(--ease);
}
.lang svg { width: 17px; height: 17px; }
.lang b { font-weight: 500; }
.lang:hover { color: var(--ink); background: var(--surface-2); }

.burger {
  display: none; width: 42px; height: 42px; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); cursor: pointer;
}
.burger svg { width: 20px; height: 20px; }
.menu { border: 0; padding: 0; max-width: none; width: 100%; background: transparent; }
.menu::backdrop { background: oklch(0.215 0.022 296 / .4); }
.menu-inner { background: var(--surface); padding: 1rem 1.25rem 1.5rem; border-bottom: 1px solid var(--line); }
.menu-link { display: block; padding: .9rem .25rem; font-size: 1.0625rem; font-weight: 500; border-bottom: 1px solid var(--line); }
.menu-act { display: grid; gap: .6rem; margin-top: 1.25rem; }
.menu-act .btn { width: 100%; }

/* ═══ Khung sản phẩm ═════════════════════════════════════════════ */
.mac { border-radius: var(--r-xl); overflow: hidden; background: var(--surface); box-shadow: var(--sh-3); }
.mac-bar { display: flex; align-items: center; gap: .45rem; height: 36px; padding-inline: .9rem; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.mac-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.mac-bar span { margin-left: .55rem; font-size: 0.75rem; color: var(--ink-3); }

/* ═══ Màn đầu ════════════════════════════════════════════════════ */
.hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 6.5vw, 6rem) 0; text-align: center; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(oklch(0.470 0.140 290 / .035) 1px, transparent 1px),
                    linear-gradient(90deg, oklch(0.470 0.140 290 / .035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(72% 62% at 50% 22%, #000 20%, transparent 78%);
}
.hero-bg::after {
  content: ""; position: absolute; inset: -18rem 0 auto 0; height: 38rem;
  background: radial-gradient(46% 58% at 50% 0%, oklch(0.470 0.140 290 / .10), transparent 74%);
}
.hero-copy { position: relative; max-width: 60rem; margin-inline: auto; }
.hero h1 { margin: 0 auto 1.25rem; text-wrap: pretty; }
.hero .lead { margin-inline: auto; max-width: 40rem; font-size: 1.0625rem; }
.hero-act { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2rem; }
.hero-note { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.6rem; margin-top: 1.35rem; font-size: 0.8438rem; color: var(--ink-2); }
.hero-note span { display: inline-flex; align-items: center; gap: .45rem; }
.hero-note svg { width: 14px; height: 14px; color: var(--jade); flex: none; }

/* Màn đầu và demo là một khối liền: cùng trục giữa, cùng chuỗi hiện lên. */
.hero { padding-bottom: clamp(3.5rem, 6vw, 5.5rem); }

/* Dải kênh */
.chan {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1rem 2.5rem; padding-block: 1.75rem; font-size: 0.875rem; color: var(--ink-3);
}
.chan .k { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; color: var(--ink-2); }
.chan .k svg { width: 20px; height: 20px; flex: none; }

/* ═══ Sản phẩm ghim cuộn ═════════════════════════════════════════ */
#san-pham { padding-bottom: clamp(2.5rem, 4vw, 4rem); }
.show-wrap { position: relative; min-height: 340vh; }
/* Chiều cao ngăn ghim đúng bằng phần màn hình còn lại, để nó rời màn
   cùng lúc mục kết thúc, không dính nửa vời sang mục kế tiếp. */
.show-sticky {
  position: sticky; top: 104px; height: calc(100vh - 104px);
  display: grid; align-items: center;
}
.show-grid {
  display: grid; grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4.5rem); align-items: center;
}
.step {
  display: grid; grid-template-columns: 2px 1fr; gap: 1.2rem;
  width: 100%; padding: 1rem 0; border: 0; background: none; text-align: left; color: inherit; cursor: pointer;
}
.step-rail { border-radius: 2px; background: var(--line); overflow: hidden; }
.step-rail i { display: block; width: 100%; height: 0; background: var(--primary); transition: height var(--t4) linear; }
.step.is-on .step-rail i { height: 100%; }
.step-t { display: block; font-size: 1.0625rem; font-weight: 500; line-height: 1.4; color: var(--ink-3); transition: color var(--t2) var(--ease); }
.step.is-on .step-t { color: var(--ink); }
.step-d {
  display: grid; grid-template-rows: 0fr; opacity: 0; color: var(--ink-2);
  font-size: 0.9375rem; line-height: 1.6;
  transition: grid-template-rows var(--t2) var(--ease), opacity var(--t2) var(--ease), margin-top var(--t2) var(--ease);
}
.step-d > span { overflow: hidden; }
.step.is-on .step-d { grid-template-rows: 1fr; opacity: 1; margin-top: .5rem; }

/* Ảnh đầu tiên nằm trong luồng và quyết định chiều cao; các ảnh còn lại
   phủ tuyệt đối lên trên. Không cho ảnh đang bật cũng nằm trong luồng,
   nếu không hai ảnh cùng chiếm chỗ và cả khối bị đẩy xuống. */
.stack { position: relative; }
.stack-item {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transform: translateY(14px) scale(.988); filter: blur(3px);
  transition: opacity var(--t3) var(--ease), transform var(--t3) var(--ease), filter var(--t3) var(--ease);
}
.stack-item:first-child { position: relative; }
.stack-item.is-on { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.stack-item > div { height: 100%; }
.stack .mac { display: flex; flex-direction: column; height: 100%; }
.stack .mac img {
  flex: 1; min-height: 0; width: 100%; height: auto;
  max-height: calc(100vh - 290px); object-fit: cover; object-position: top left;
}

.show-list { display: none; }
.show-list li + li { margin-top: clamp(2.5rem, 5vw, 4rem); }
.show-list .mac { margin-top: 1.25rem; }
.show-list picture, .show-list img { display: block; width: 100%; height: auto; }

/* ═══ Khác biệt ══════════════════════════════════════════════════
   Bang doi chieu 4 cot. Cot cuoi la mot dai lien chay suot cac hang,
   khong phai the roi, nen dung nen + vien thay vi vien tung o.        */
.cmp { --cmp-cols: 1.25fr 1fr 1fr 1.15fr; --cmp-gap: clamp(1rem, 2vw, 2rem); }

.cmp-head,
.cmp-row { display: grid; grid-template-columns: var(--cmp-cols); gap: var(--cmp-gap); align-items: start; }

.cmp-head > span { font-size: 0.8125rem; font-weight: 500; color: var(--ink-3); padding: 0 0 .85rem; }
.cmp-head > .is-us { color: var(--primary-hover); background: var(--primary-wash); border: 1px solid var(--primary-line); border-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; padding: .7rem 1.1rem .8rem; }

/* Duong ke nam tren tung o, khong nam tren ca hang, de dai tim khong bi cat ngang. */
.cmp-row > * { margin: 0; border-top: 1px solid var(--line); padding: 1.35rem 0; align-self: stretch; }
.cmp-row h3 { font-size: 1.0625rem; font-weight: 500; line-height: 1.42; }
.cmp-row p { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-2); }
/* Nhan cot van doc duoc bang trinh doc man hinh, chi an khoi mat thuong. */
.cmp-row p i { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Cot cua minh: nen chay lien tu hang dau den hang cuoi. */
.cmp-row .is-us { color: var(--ink); background: var(--primary-wash); border-top-color: var(--primary-line); border-inline: 1px solid var(--primary-line); padding: 1.35rem 1.1rem; }
.cmp-row:last-child > * { border-bottom: 1px solid var(--line); }
.cmp-row:last-child .is-us { border-bottom-color: var(--primary-line); border-radius: 0 0 var(--r-md) var(--r-md); }

/* Chuyen dong: mot vet sang chay doc cot Chat AI, tung hang lech nhau,
   doc nhu dai tim duoc ke tu tren xuong. Vet nam o lop phu, KHONG dong vao chu,
   nen trinh duyet khong chay khung hinh thi cot van hien du va dung mau. */
.cmp-row .is-us { position: relative; overflow: hidden; }
.cmp-row .is-us::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 60%;
  background: linear-gradient(to bottom, oklch(0.470 0.140 290 / 0), oklch(0.470 0.140 290 / .13));
  opacity: 0; pointer-events: none;
}
.js-motion .cmp-row.in .is-us::before {
  animation: cmpSweep 820ms var(--ease) calc(var(--d, 0ms) + 120ms) both;
}
@keyframes cmpSweep {
  0%   { opacity: 0; transform: translateY(-100%); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(240%); }
}

@media (max-width: 860px) {
  /* Man nho: moi tinh huong thanh mot khoi, nhan doc len truoc cau tra loi. */
  .cmp-head { display: none; }
  .cmp-row { display: block; border-top: 1px solid var(--line); padding: 1.6rem 0 .9rem; }
  .cmp-row:last-child { border-bottom: 1px solid var(--line); }
  .cmp-row > * { border: 0; padding: 0; }
  .cmp-row h3 { margin-bottom: 1rem; }
  .cmp-row p { display: grid; gap: .15rem; margin-bottom: .85rem; }
  .cmp-row p i { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; display: block; font-style: normal; font-size: 0.75rem; font-weight: 500; color: var(--ink-3); }
  .cmp-row .is-us { margin-top: 1.05rem; padding: .95rem 1.05rem 1.05rem; border: 1px solid var(--primary-line); border-radius: var(--r-md); }
  .cmp-row .is-us i { color: var(--primary-hover); }
  .cmp-row:last-child > * { border-bottom: 0; }
  .cmp-row:last-child .is-us { border: 1px solid var(--primary-line); border-radius: var(--r-md); }
}

/* ═══ Demo ═══════════════════════════════════════════════════════ */
.demos { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 1rem; }
.demo { display: flex; flex-direction: column; padding: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color var(--t1) var(--ease), transform var(--t1) var(--ease), box-shadow var(--t1) var(--ease); }
.demo:hover { border-color: var(--primary-line); transform: translateY(-3px); box-shadow: var(--sh-2); }
.demo h3 { font-size: 1.0625rem; margin-bottom: .45rem; }
.demo p { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.55; margin-bottom: 1.2rem; }
.demo .tlink { margin-top: auto; }

/* ═══ Cài đặt ════════════════════════════════════════════════════ */
/* Con mot cot sau khi bo the video, gioi han be ngang cho dong chu khong keo dai. */
.setup { max-width: 46rem; }
.steps4 { counter-reset: s; margin-top: 1.9rem; }
.steps4 li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; gap: .95rem; padding: .8rem 0; border-top: 1px solid var(--line); font-size: 0.9375rem; color: var(--ink-2); }
.steps4 li::before { content: counter(s); display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-full); background: var(--primary-soft); color: var(--primary-hover); font-size: 0.8125rem; font-weight: 600; }
.steps4 b { color: var(--ink); font-weight: 500; }

.video { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); box-shadow: var(--sh-2); aspect-ratio: 16/9; }
.video img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t3) var(--ease); }
.video:hover img { transform: scale(1.03); }
.video-play { position: absolute; inset: 0; display: grid; place-items: center; }
.video-play i { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r-full); background: oklch(1 0 0 / .96); box-shadow: var(--sh-2); transition: transform var(--t1) var(--ease); }
.video:hover .video-play i { transform: scale(1.08); }
.video-play svg { width: 22px; height: 22px; color: var(--primary); margin-left: 3px; }

/* ═══ Bảng giá ═══════════════════════════════════════════════════ */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.plan { display: flex; flex-direction: column; padding: 1.7rem 1.45rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease); }
.plan:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.plan.pick { border-color: var(--primary); box-shadow: var(--sh-2); }
.plan.pick .plan h3 { font-size: 1.25rem; margin: .2rem 0 .9rem; letter-spacing: -0.015em; }
.plan-p { display: flex; align-items: baseline; gap: .3rem; }
.plan-p b { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; }
.plan-p span { font-size: 0.875rem; color: var(--ink-3); }
.plan-n { margin-top: .5rem; font-size: 0.875rem; color: var(--ink-2); min-height: 2.6rem; }
.plan ul { margin: 1.2rem 0 1.55rem; display: grid; gap: .55rem; }
.plan li { display: grid; grid-template-columns: 16px 1fr; gap: .55rem; font-size: 0.875rem; line-height: 1.5; color: var(--ink-2); }
.plan li svg { width: 16px; height: 16px; margin-top: 3px; color: var(--primary); }
.plan .btn { margin-top: auto; width: 100%; }

/* ═══ Ưu đãi ═════════════════════════════════════════════════════ */

/* ═══ Hỏi đáp ════════════════════════════════════════════════════ */
.faq { max-width: none; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: flex-start; gap: 1rem; padding: 1.3rem 0; cursor: pointer; list-style: none; font-size: 1.0625rem; font-weight: 500; line-height: 1.45; transition: color var(--t1) var(--ease); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--primary); }
.faq summary svg { width: 18px; height: 18px; flex: none; margin: 4px 0 0 auto; color: var(--ink-3); transition: transform var(--t2) var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq-a { padding-bottom: 1.5rem; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.7; max-width: 62ch; }
.faq-a p + p { margin-top: .7rem; }
.faq-a b { color: var(--ink); font-weight: 500; }
.faq-a a { color: var(--primary); font-weight: 500; }

/* ═══ Liên hệ ════════════════════════════════════════════════════ */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.info { display: grid; gap: 1.15rem; margin-top: 2rem; }
.info-row { display: grid; grid-template-columns: 20px 1fr; gap: .85rem; }
.info-row svg { width: 20px; height: 20px; color: var(--ink-3); margin-top: 2px; }
.info-k { font-size: 0.8125rem; color: var(--ink-3); }
.info-v { font-size: 0.9375rem; font-weight: 500; }
.info-v a:hover { color: var(--primary); }
.quick { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.quick a { display: inline-flex; align-items: center; gap: .5rem; height: 42px; padding: 0 .95rem; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); font-size: 0.875rem; font-weight: 500; transition: border-color var(--t1) var(--ease), transform var(--t1) var(--ease); }
.quick a:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.quick svg { width: 18px; height: 18px; }

.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.4rem, 2.4vw, 2rem); box-shadow: var(--sh-1); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.field { display: grid; gap: .4rem; }
.field.wide { grid-column: 1 / -1; }
.field label { font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); }
.field label i { color: var(--primary); font-style: normal; }
.field input, .field textarea {
  width: 100%; padding: .75rem .9rem; background: var(--bg);
  border: 1px solid var(--line-2); border-radius: var(--r-md); font-size: 0.9375rem;
  transition: border-color var(--t1) var(--ease), box-shadow var(--t1) var(--ease), background var(--t1) var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:focus, .field textarea:focus { outline: none; background: var(--surface); border-color: var(--primary); box-shadow: 0 0 0 3px oklch(0.470 0.140 290 / .13); }
.form-msg { min-height: 1.4rem; font-size: 0.875rem; margin-top: .8rem; }
.form-msg.ok { color: var(--jade); }
.form-msg.err { color: oklch(0.52 0.18 25); }

/* ═══ Chân trang ═════════════════════════════════════════════════ */
.ft { background: var(--surface); border-top: 1px solid var(--line); padding-block: clamp(3rem, 5vw, 4.5rem) 2rem; color: var(--ink-2); }
.ft-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
.ft-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; color: var(--ink); }
.ft-brand img { width: 34px; height: 34px; border-radius: var(--r-sm); }
.ft p { font-size: 0.9375rem; line-height: 1.7; max-width: 36ch; }
.ft h4 { font-size: 0.875rem; color: var(--ink); margin-bottom: .95rem; }
.ft li { padding: .3rem 0; font-size: 0.9375rem; }
.ft a:hover { color: var(--ink); }
.ft-btm { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; justify-content: space-between; margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--ink-3); }
.ft-btm nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }

/* ═══ Nút nổi ════════════════════════════════════════════════════ */
.fab { position: fixed; right: 18px; bottom: 18px; z-index: var(--z-fab); }
.fab-panel { width: 292px; max-width: 84vw; margin: 0 0 .75rem auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-3); overflow: hidden; transform-origin: bottom right; }
.fab-panel[hidden] { display: none; }
.js-motion .fab-panel:not([hidden]) { animation: fabIn 260ms var(--ease); }
@keyframes fabIn { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.fab-head { background: var(--primary); color: #fff; padding: 1rem 1.1rem; }
.fab-head b { display: block; font-weight: 600; font-size: 0.9375rem; }
.fab-head span { font-size: 0.8125rem; opacity: .85; }
.fab-list { padding: .6rem; display: grid; gap: .3rem; }
.fab-list a { display: flex; align-items: center; gap: .75rem; padding: .65rem .7rem; border-radius: var(--r-md); font-size: 0.9375rem; font-weight: 500; transition: background var(--t1) var(--ease); }
.fab-list a:hover { background: var(--surface-2); }
.fab-list svg { width: 26px; height: 26px; flex: none; }
.fab-btn { display: grid; place-items: center; width: 54px; height: 54px; margin-left: auto; border: 0; border-radius: var(--r-full); background: var(--primary); color: #fff; cursor: pointer; box-shadow: 0 10px 26px oklch(0.470 0.140 290 / .35), var(--sh-btn); transition: transform var(--t1) var(--ease), background var(--t1) var(--ease); }
.fab-btn:hover { background: var(--primary-hover); transform: scale(1.05); }
.fab-btn svg { width: 24px; height: 24px; }

/* ═══ Chuyển động ════════════════════════════════════════════════ */
.js-motion [data-rise] { opacity: 0; transform: translateY(18px); }
.js-motion [data-rise].in {
  opacity: 1; transform: none;
  transition: opacity var(--t3) var(--ease) var(--d, 0ms), transform var(--t3) var(--ease) var(--d, 0ms);
}
.js-motion .wipe { display: block; overflow: hidden; padding-bottom: .14em; }
.js-motion .wipe > .wipe-i { display: block; transform: translateY(104%); }
.js-motion .wipe.in > .wipe-i { transform: none; transition: transform var(--t4) var(--ease-io) var(--d, 0ms); }
.js-motion .lift { opacity: 0; transform: translateY(34px) scale(.985); }
.js-motion .lift.in {
  opacity: 1; transform: none;
  transition: opacity 950ms var(--ease), transform 950ms var(--ease);
}

/* ═══ Màn nhỏ ════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .show-wrap { display: none; }
  .show-list { display: block; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup, .contact { grid-template-columns: minmax(0, 1fr); }
  .ft-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 980px) {
}
@media (max-width: 880px) {
  .nav, .btn-login { display: none; }
  .burger { display: flex; }
  .hdr .wrap { gap: .75rem; }
  .hdr-act { padding-left: 0; margin-left: 0; border-left: 0; }
  .btn-cta { padding: 0 .85rem; }
}
@media (max-width: 640px) {
  :root { --wrap: min(1200px, 100% - 2rem); }
  .brand i { display: none; }
  .hdr .btn-cta { display: none; }
  .hero-note { justify-content: flex-start; text-align: left; }
  .show-list .mac { max-width: 21rem; margin-inline: auto; border-radius: 24px; }
  .show-list .mac-bar { display: none; }
  .plans, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .ft-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .hero-act .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .js-motion [data-rise], .js-motion .wipe, .js-motion .lift, .js-motion .wipe > .wipe-i { opacity: 1; transform: none; }
  .js-motion .cmp-row.in .is-us::before { animation: none; }
  .progress { display: none; }
}

/* Chân trang dùng lại kiểu nhận diện */
.ft-brand b { display: block; font-weight: 600; font-size: 1rem; letter-spacing: -0.02em; line-height: 1.15; }
.ft-brand i { display: block; font-style: normal; font-size: 0.75rem; line-height: 1.25; color: var(--ink-3); }

/* ═══ Demo theo ngành ════════════════════════════════════════════ */
.picker { max-width: 36rem; margin: clamp(1.75rem, 3vw, 2.5rem) auto 0; text-align: center; }
.picker-search {
  display: flex; align-items: center; gap: .7rem;
  height: 48px; padding: 0 1rem;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md);
  transition: border-color var(--t1) var(--ease), box-shadow var(--t1) var(--ease);
}
.picker-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px oklch(0.470 0.140 290 / .13); }
.picker-search svg { width: 18px; height: 18px; color: var(--ink-3); flex: none; }
.picker-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 0.9375rem; }
.picker-search input::-webkit-search-cancel-button { display: none; }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: .85rem; }
.chip-i {
  position: relative; height: 34px; padding: 0 .8rem; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  font-size: 0.8438rem; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: border-color var(--t1) var(--ease), color var(--t1) var(--ease),
              background var(--t1) var(--ease), box-shadow var(--t1) var(--ease);
}
.chip-i:hover { border-color: var(--line-2); color: var(--ink); background: var(--surface-2); }
.chip-i.on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.chip-i.on:hover { background: var(--ink); color: var(--surface); }
.chips.is-all { max-height: 12.5rem; overflow-y: auto; padding: .25rem; margin-inline: -.25rem; }

/* Một khung liền, hai ngăn, vạch ngăn 1px */
.demo2 {
  margin-top: clamp(2rem, 3.5vw, 3rem);
  text-align: left;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--sh-2); overflow: hidden;
}
.dchat { display: flex; flex-direction: column; min-width: 0; }
.dchat-top { display: flex; align-items: center; gap: .75rem; padding: .95rem 1.15rem; border-bottom: 1px solid var(--line); }
.dchat-avatar {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: var(--r-md); background: var(--primary-soft); color: var(--primary-hover);
  font-size: 0.9375rem; font-weight: 600;
  transition: background var(--t2) var(--ease);
}
.dchat-who { min-width: 0; }
.dchat-who b { display: block; font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.008em; }
.dchat-who i { display: flex; align-items: center; gap: .4rem; font-style: normal; font-size: 0.8125rem; color: var(--ink-3); }
.dchat-replay {
  margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; flex: none;
  height: 32px; padding: 0 .7rem; border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--surface); font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); cursor: pointer;
  transition: border-color var(--t1) var(--ease), color var(--t1) var(--ease);
}
.dchat-replay:hover { border-color: var(--primary); color: var(--primary); }
.dchat-replay svg { width: 14px; height: 14px; transition: transform var(--t3) var(--ease); }
.dchat-replay:hover svg { transform: rotate(-150deg); }

.dchat-body {
  height: 26.5rem; overflow-y: auto; padding: 1.15rem;
  display: flex; flex-direction: column; gap: .65rem; scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
}
.dmsg { max-width: 85%; padding: .7rem .9rem; border-radius: var(--r-lg); font-size: 0.9375rem; line-height: 1.55; }
.dmsg-u { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 6px; }
.dmsg-b { align-self: flex-start; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.js-motion .dmsg-u { animation: dmsgU 520ms var(--ease) both; }
.js-motion .dmsg-b { animation: dmsgB 520ms var(--ease) both; }
@keyframes dmsgU { from { opacity: 0; transform: translate(14px, 10px) scale(.97); } }
@keyframes dmsgB { from { opacity: 0; transform: translate(-14px, 10px) scale(.97); } }
.dtyping {
  align-self: flex-start; display: flex; gap: 4px; padding: .8rem .9rem;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); border-bottom-left-radius: 6px;
}
.dtyping i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.js-motion .dtyping { animation: dmsgB 320ms var(--ease) both; }
.js-motion .dtyping i { animation: blink 1.1s ease-in-out infinite; }
.js-motion .dtyping i:nth-child(2) { animation-delay: .16s; }
.js-motion .dtyping i:nth-child(3) { animation-delay: .32s; }
@keyframes blink { 0%, 60%, 100% { opacity: .28; } 30% { opacity: 1; } }

.dstage {
  display: flex; flex-direction: column; min-width: 0;
  border-left: 1px solid var(--line); background: var(--surface-2);
}
.dstage-head { padding: 1.15rem 1.4rem 1rem; border-bottom: 1px solid var(--line); }
.dstage-head h3 { font-size: 1rem; }
.dstage-note { margin-top: .3rem; font-size: 0.8438rem; line-height: 1.55; color: var(--ink-3); }
.dstage-list {
  position: relative; flex: 0 1 auto; overflow-y: auto;
  padding: 1.15rem 1.4rem 1.4rem; margin: 0;
}
.dstage-list li { position: relative; display: grid; grid-template-columns: 21px 1fr; gap: .85rem; padding: .55rem 0 .9rem; }
.dstage-list li::before,
.dstage-list li::after {
  content: ""; position: absolute; left: 10px; top: calc(.55rem + 21px); bottom: 0; width: 1px;
}
.dstage-list li::before { background: var(--line-2); }
.dstage-list li::after {
  background: var(--primary); transform-origin: top; transform: scaleY(0);
  transition: transform 520ms var(--ease);
}
.dstage-list li.on::after { transform: scaleY(1); }
.dstage-list li:last-child::before,
.dstage-list li:last-child::after { display: none; }
.dstage-mark {
  position: relative; z-index: 1;
  width: 21px; height: 21px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--surface);
  display: grid; place-items: center;
  transition: border-color var(--t2) var(--ease), background var(--t2) var(--ease);
}
.dstage-mark span { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); transition: background var(--t2) var(--ease), transform var(--t2) var(--ease); }
.dstage-list li.on .dstage-mark { border-color: var(--primary); background: var(--surface); }
.dstage-list li.on .dstage-mark span { background: var(--primary); transform: scale(1.2); }
.dstage-t { display: block; font-size: 0.9375rem; font-weight: 500; color: var(--ink-3); transition: color var(--t2) var(--ease); }
.dstage-d { display: block; margin-top: .2rem; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-3); transition: color var(--t2) var(--ease); }
.dstage-list li.on .dstage-t { color: var(--ink); }
.dstage-list li.on .dstage-d { color: var(--ink-2); }
.js-motion .dstage-list li { animation: stageIn 520ms var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes stageIn { from { opacity: 0; transform: translateY(10px); } }

/* Đổi ngành: nội dung hai ngăn mờ đi rồi hiện lại, khung đứng yên */
.demo2 .dchat-body,
.demo2 .dstage-head,
.demo2 .dstage-list {
  transition: opacity 260ms var(--ease), transform 260ms var(--ease), filter 260ms var(--ease);
}
.demo2.swap .dchat-body,
.demo2.swap .dstage-head,
.demo2.swap .dstage-list { opacity: 0; transform: translateY(8px); filter: blur(4px); }

.demo-msg {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem;
  margin-top: 1.5rem; font-size: 0.875rem; color: var(--ink-2);
}
.demo-msg-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.demo-msg-links a {
  display: inline-flex; align-items: center; height: 32px; padding: 0 .75rem;
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  font-weight: 500; transition: border-color var(--t1) var(--ease), color var(--t1) var(--ease);
}
.demo-msg-links a:hover { border-color: var(--primary); color: var(--primary); }

@media (max-width: 560px) {
  /* Đầu khung chat xuống dòng gọn, nút chạy lại tự về hàng riêng. */
  .dchat-top { flex-wrap: wrap; row-gap: .6rem; }
  .dchat-who { flex: 1 1 auto; }
  .dchat-who i { white-space: nowrap; }
  .dchat-replay { margin-left: 0; }
}
@media (max-width: 940px) {
  .demo2 { grid-template-columns: minmax(0, 1fr); }
  .dchat-body { height: 22rem; }
  .dstage { border-left: 0; border-top: 1px solid var(--line); }
  .dstage-list { overflow: visible; }
}

/* ═══ Vùng chạm ══════════════════════════════════════════════════ */
/* Chuột trỏ chính xác nên giữ nguyên kích thước. Ngón tay thì cần 44px. */
@media (pointer: coarse) {
  .nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .menu-link { padding-block: 1.05rem; }
  .chip-i { height: 44px; }
  .picker-search { height: 52px; }
  /* O nhap phai cao bang khung, khong thi vung cham that chi 26px. */
  .picker-search input { align-self: stretch; }
  .dchat-replay { min-height: 44px; }
  .demo-msg-links a { height: 44px; }
  .faq summary { padding-block: 1.45rem; }
  .quick a { min-height: 44px; }
  .ft ul a, .ft-btm nav a { display: inline-block; padding-block: .78rem; }
  .brand { min-height: 44px; }
  .burger { width: 44px; height: 44px; }
  .lang { min-height: 44px; }
  .tlink { min-height: 44px; display: inline-flex; align-items: center; }
}