/* ============================================================================
   BỘ KHUNG LANDING PAGE — kiểu dáng
   skill /landing-page-vercel.app-maker

   Chuẩn thị giác: xem assets/he-thiet-ke-dribbble.md trong skill.
   Tóm tắt 5 điều, sửa gì cũng phải giữ:
     1. Nền SÂU, khối nổi lên bằng lớp phủ mờ chứ không bằng màu đặc.
     2. Bo góc LỚN (--r-lg 28px), viền 1px phản quang, bóng toả mềm.
     3. Chữ tiêu đề đậm, tracking âm; chữ phụ mờ ~65%.
     4. Lưới BENTO lệch nhau, không phải ba cột đều tăm tắp.
     5. Hover nâng khối 4px + viền sáng lên. Xuất hiện theo kiểu nhún (spring).

   ⚙️ ĐỔI MÀU THƯƠNG HIỆU: sửa --accent + --accent-2 ở cả hai khối :root,
   và sửa THEME trong app.js (cho thanh trình duyệt trên điện thoại).
   ========================================================================= */

/* ───────────────────────── TOKEN — NỀN TỐI ───────────────────────── */
:root,
:root[data-theme="dark"] {
  --bg:        #080b12;   /* toi hon mot nac so voi nen app, de anh chup app noi len */
  --bg-2:      #0e1117;   /* DUNG nen cua ung dung */
  --bg-glow-1: rgba(56, 189, 248, .18);
  --bg-glow-2: rgba(129, 140, 248, .12);

  --surface:   rgba(255, 255, 255, .045);
  --surface-2: rgba(255, 255, 255, .075);
  --line:      rgba(255, 255, 255, .09);
  --line-hi:   rgba(255, 255, 255, .20);

  --text:   #eef2f9;
  --text-2: rgba(238, 242, 249, .66);
  --text-3: rgba(238, 242, 249, .42);

  --accent:    #38bdf8;   /* DUNG --lam cua ung dung */
  --accent-2:  #818cf8;
  --accent-ink:#04121c;   /* chu tren nen lam sang: phai la muc dam, khong phai trang */
  --glow:      rgba(56, 189, 248, .34);

  /* Hai mau nay CHI dung dung cho: --warn cho CON SO TIEN, --ok cho trang thai may.
     Rai ra cho khac la mat han suc nang cua chung. Ca hai lay dung tu ung dung. */
  --warn:      #f59e0b;
  --ok:        #22c55e;

  --shadow:    0 1px 2px rgba(0,0,0,.45), 0 20px 55px -24px rgba(0,0,0,.85);
  --shadow-hi: 0 1px 2px rgba(0,0,0,.45), 0 28px 70px -26px rgba(0,0,0,.95);
}

/* ───────────────────────── TOKEN — NỀN SÁNG ─────────────────────────
   KHÔNG phải bản tối đảo ngược. Nền sáng cần viền ĐẬM hơn và bóng NHẠT
   hơn, nếu bê nguyên số của bản tối sang thì mọi khối tan vào nền trắng. */
:root[data-theme="light"] {
  --bg:        #f6f8fc;
  --bg-2:      #e9eef7;
  --bg-glow-1: rgba(56, 189, 248, .16);
  --bg-glow-2: rgba(129, 140, 248, .10);

  --surface:   rgba(255, 255, 255, .78);
  --surface-2: rgba(255, 255, 255, .95);
  --line:      rgba(15, 23, 42, .10);
  --line-hi:   rgba(15, 23, 42, .22);

  --text:   #0d1526;
  --text-2: rgba(13, 21, 38, .68);
  --text-3: rgba(13, 21, 38, .46);

  --accent:    #0369a1;   /* nen sang phai ha do sang xuong, #38bdf8 tren trang la khong doc noi */
  --accent-2:  #4f46e5;
  --accent-ink:#ffffff;
  --glow:      rgba(3, 105, 161, .22);

  --warn:      #b45309;   /* ho phach dam hon cho nen sang */
  --ok:        #15803d;

  --shadow:    0 1px 2px rgba(15,23,42,.06), 0 16px 40px -22px rgba(15,23,42,.30);
  --shadow-hi: 0 1px 2px rgba(15,23,42,.08), 0 26px 60px -24px rgba(15,23,42,.38);
}

:root {
  --r-sm:   14px;
  --r:      20px;
  --r-lg:   28px;
  --r-pill: 999px;

  --wrap: 1160px;
  --pad:  24px;

  /* Nhún nhẹ ở cuối — đây là thứ thay cho Framer Motion spring. */
  --spring: cubic-bezier(.22, 1.18, .36, 1);
  --ease:   cubic-bezier(.4, 0, .2, 1);
}

/* ───────────────────────── NỀN CHUNG ───────────────────────── */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Be Vietnam Pro', 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Hai quầng sáng nằm sau mọi thứ — thứ tạo ra chiều sâu của nền tối.
   `fixed` để chúng không trôi theo trang, nhìn như đèn hắt từ xa. */
body::before {
  content: '';
  position: fixed;
  inset: -20% -10% auto -10%;
  height: 70vh;
  background:
    radial-gradient(52% 60% at 22% 12%, var(--bg-glow-1), transparent 70%),
    radial-gradient(46% 55% at 82% 4%, var(--bg-glow-2), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
  position: relative;
  z-index: 1;
}
.wrap-narrow { max-width: 820px; }

h1, h2, h3 {
  margin: 0;
  letter-spacing: -.025em;
  line-height: 1.15;
  font-weight: 800;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: 0 0 var(--r-sm) 0; z-index: 200;
}
.skip:focus { left: 0; }

:where(a, button, input, select, textarea, details summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ───────────────────────── NÚT ───────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px;
  border: 0; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 62%, var(--accent-2)));
  color: var(--accent-ink);
  font: inherit; font-weight: 700; letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: 0 10px 30px -12px var(--glow);
  transition: transform .28s var(--spring), box-shadow .28s var(--ease), filter .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -14px var(--glow); filter: saturate(1.08); }
.btn:active { transform: translateY(0); }

.btn-ghost {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: none;
  backdrop-filter: blur(12px);
}
.btn-ghost:hover { border-color: var(--line-hi); background: var(--surface-2); box-shadow: none; }

.btn-sm    { padding: 9px 18px; font-size: 14.5px; }
.btn-block { width: 100%; padding: 15px 24px; }
.btn[disabled] { opacity: .55; pointer-events: none; }

.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.icon-btn:hover { color: var(--text); border-color: var(--line-hi); background: var(--surface-2); }
.icon-btn svg { width: 18px; height: 18px; }

/* Mặt trăng ở nền tối, mặt trời ở nền sáng — chỉ một cái hiện */
.i-sun  { display: none; }
:root[data-theme="light"] .i-moon { display: none; }
:root[data-theme="light"] .i-sun  { display: block; }

/* ───────────────────────── THANH TRÊN ───────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 60;
  padding: 14px 0;
  transition: background .3s var(--ease), border-color .3s var(--ease), padding .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  padding: 9px 0;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: var(--line);
}
.nav-in { display: flex; align-items: center; gap: 20px; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em; }
.brand-mark {
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font-size: 13px; font-weight: 800;
  box-shadow: 0 6px 18px -8px var(--glow);
}

.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a {
  padding: 8px 13px; border-radius: var(--r-pill);
  color: var(--text-2); font-size: 15px; font-weight: 500;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav-links a:hover { color: var(--text); background: var(--surface); }

.nav-tools { display: flex; align-items: center; gap: 10px; }

/* ── Nút cờ + bảng chọn ngôn ngữ ── */
.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .02em;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.lang-btn:hover { border-color: var(--line-hi); background: var(--surface-2); }
.lang-btn .caret { width: 9px; height: 6px; color: var(--text-3); transition: transform .25s var(--spring); }
.lang-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }

/* ⚠ PHẢI có dòng này. `.lang-menu { display: grid }` MẠNH HƠN luật
   `[hidden] { display: none }` của trình duyệt, nên bảng chọn ngôn ngữ hiện
   thường trực ngay khi tải trang dù JS đã đặt hidden. Cùng bẫy với .fab-panel
   bên dưới. Lỗi chỉ lộ khi NHÌN ẢNH CHỤP — code đọc qua thấy rất hợp lý. */
.lang-menu[hidden], .fab-panel[hidden] { display: none; }

.lang-menu {
  position: absolute; right: 0; top: calc(100% + 10px);
  min-width: 186px; padding: 7px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-2) 88%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--shadow);
  display: grid; gap: 2px;
  animation: pop .24s var(--spring) both;
}
@keyframes pop { from { opacity: 0; transform: translateY(-8px) scale(.96); } }

.lang-menu button {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-2);
  font: inherit; font-size: 14.5px; text-align: left; cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.lang-menu button:hover { background: var(--surface-2); color: var(--text); }
.lang-menu button[aria-selected="true"] { color: var(--text); font-weight: 600; }

/* ── Lá cờ ──
   Vẽ bằng SVG nhúng trong CSS, KHÔNG dùng emoji 🇻🇳🇬🇧🇯🇵:
   Windows không có glyph cờ, emoji cờ hiện ra thành hai chữ cái "VN".
   Bẫy này chỉ lộ trên máy Windows, máy Mac nhìn vẫn đẹp. */
.flag {
  width: 21px; height: 14px; flex: 0 0 auto;
  border-radius: 3px;
  background-size: cover; background-position: center;
  box-shadow: 0 0 0 1px var(--line-hi) inset;
}
.flag-vi {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23da251d'/%3E%3Cpath d='M15 4l1.35 4.15h4.36l-3.53 2.56 1.35 4.14L15 12.29l-3.53 2.56 1.35-4.14L9.29 8.15h4.36z' fill='%23ffff00'/%3E%3C/svg%3E");
}
.flag-en {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23012169'/%3E%3Cpath d='M0 0l30 20M30 0L0 20' stroke='%23fff' stroke-width='4'/%3E%3Cpath d='M0 0l30 20M30 0L0 20' stroke='%23c8102e' stroke-width='2'/%3E%3Cpath d='M15 0v20M0 10h30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M15 0v20M0 10h30' stroke='%23c8102e' stroke-width='3.5'/%3E%3C/svg%3E");
}
.flag-ja {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23fff'/%3E%3Ccircle cx='15' cy='10' r='6' fill='%23bc002d'/%3E%3C/svg%3E");
}

.burger { display: none; width: 38px; height: 38px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-pill); cursor: pointer; padding: 0; }
.burger span { display: block; width: 16px; height: 1.8px; margin: 3px auto; background: var(--text); border-radius: 2px; transition: transform .3s var(--spring), opacity .2s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-4.8px) rotate(-45deg); }

/* ───────────────────────── HERO ───────────────────────── */
.hero { padding: 86px 0 74px; }

/* ⚠ ĐỪNG bó .hero-in bằng max-width nhỏ hơn --wrap. `.wrap` căn giữa, nên bó
   nhỏ lại là cả khối hero thụt vào trong so với các mục bên dưới — mép trái
   của trang gãy thành hai bậc. Muốn giới hạn bề rộng thì bó TỪNG dòng chữ. */
.hero h1 { max-width: 880px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(12px);
  color: var(--text-2);
  font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
  margin-bottom: 22px;
}
.eyebrow::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-2) 22%, transparent);
}

.hero h1 { font-size: clamp(38px, 6.4vw, 68px); }
.hero h1 .grad {
  background: linear-gradient(120deg, var(--accent-2), var(--accent) 62%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead { margin-top: 20px; font-size: clamp(16.5px, 2vw, 19.5px); color: var(--text-2); max-width: 640px; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.hero-points { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.hero-points li { position: relative; padding-left: 24px; color: var(--text-2); font-size: 15px; }
.hero-points li::before {
  content: ''; position: absolute; left: 0; top: .58em;
  width: 13px; height: 7px; border-left: 2px solid var(--accent-2); border-bottom: 2px solid var(--accent-2);
  transform: rotate(-45deg);
}

/* ───────────────────────── KHỐI CHUNG ───────────────────────── */
.sec { padding: 76px 0; }
.sec-alt { position: relative; }
.sec-alt::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, var(--bg-2) 18%, var(--bg-2) 82%, transparent);
  z-index: 0;
}
.sec-title { font-size: clamp(27px, 3.6vw, 40px); }
.sec-sub { margin-top: 12px; color: var(--text-2); max-width: 620px; font-size: 16.5px; }

/* ───────────────────────── BA BƯỚC ───────────────────────── */
.steps { list-style: none; margin: 42px 0 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); counter-reset: s; }
.steps li {
  position: relative; padding: 28px 26px 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  transition: transform .34s var(--spring), border-color .3s var(--ease), box-shadow .34s var(--ease);
}
.steps li:hover { transform: translateY(-4px); border-color: var(--line-hi); box-shadow: var(--shadow-hi); }
.step-no {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 11px; margin-bottom: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font-weight: 800; font-size: 15px;
  box-shadow: 0 8px 20px -10px var(--glow);
}
.steps h3 { font-size: 18.5px; }
.steps p { margin-top: 9px; color: var(--text-2); font-size: 15.2px; }

/* ───────────────────────── LƯỚI BENTO ─────────────────────────
   Cố ý LỆCH nhau: 4-2 / 2-4 / 3-3. Ba cột đều tăm tắp là thứ làm
   landing trông như bản mẫu tải về. */
.cards { margin-top: 42px; display: grid; gap: 18px; grid-template-columns: repeat(6, 1fr); }
.card:nth-child(1) { grid-column: span 4; }
.card:nth-child(2) { grid-column: span 2; }
.card:nth-child(3) { grid-column: span 2; }
.card:nth-child(4) { grid-column: span 4; }
.card:nth-child(5) { grid-column: span 3; }
.card:nth-child(6) { grid-column: span 3; }

.card {
  position: relative; overflow: hidden;
  padding: 28px 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  transition: transform .34s var(--spring), border-color .3s var(--ease), box-shadow .34s var(--ease);
}
/* Vệt sáng chạy dọc mép trên — chi tiết nhỏ nhưng là thứ tách khối
   "có người thiết kế" khỏi khối "border 1px xám". */
.card::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-hi) 22%, transparent 78%);
  opacity: .9;
}
.card:hover { transform: translateY(-4px); border-color: var(--line-hi); box-shadow: var(--shadow-hi); }
.card h3 { font-size: 18.5px; }
.card p { margin-top: 9px; color: var(--text-2); font-size: 15.2px; }

.c-ic {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 13px; margin-bottom: 16px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--accent-2);
}
.c-ic svg { width: 20px; height: 20px; }

/* ───────────────────────── CÂU HỎI ───────────────────────── */
.faq { margin-top: 34px; display: grid; gap: 12px; }
.faq details {
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(14px);
  overflow: hidden;
  transition: border-color .25s var(--ease);
}
.faq details[open] { border-color: var(--line-hi); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 18px 52px 18px 22px; position: relative;
  font-weight: 600; font-size: 16.5px; letter-spacing: -.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 22px; top: 50%;
  width: 10px; height: 10px; margin-top: -6px;
  border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
  transform: rotate(45deg); transition: transform .3s var(--spring);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq p { padding: 0 22px 20px; color: var(--text-2); font-size: 15.4px; }

/* ───────────────────────── LIÊN HỆ ───────────────────────── */
.contact-in { display: grid; gap: 34px; grid-template-columns: 1fr 1fr; align-items: start; }

/* Khoi lien he KHONG co form (chu du an chot: chi de nut lien he).
   Mot cot thi nua trang ben phai trong hoac, neu de nguyen grid, bon o kenh
   lien he bi bop lai mot ben. Cho no chiem tron be ngang va xep kenh thanh
   luoi 2 o. */
.contact-1cot { grid-template-columns: 1fr; }
.contact-1cot .channels { grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .contact-1cot .channels { grid-template-columns: 1fr; } }

.channels { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 10px; }
.channels a {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(14px);
  transition: transform .3s var(--spring), border-color .25s var(--ease), background .25s var(--ease);
}
.channels a:hover { transform: translateY(-3px); border-color: var(--line-hi); background: var(--surface-2); }
.channels b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.channels i { display: block; font-style: normal; font-size: 13.5px; color: var(--text-3); }
.channels a.is-off { opacity: .5; pointer-events: none; }

.ch-ic {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 13px;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  background-repeat: no-repeat; background-position: center; background-size: 19px 19px;
}
.ch-mail  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.ch-zalo  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230068ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5c0 4-4 7.2-9 7.2-.9 0-1.8-.1-2.6-.3L4 20l1.4-3.4C3.9 15.3 3 13.5 3 11.5 3 7.5 7 4.3 12 4.3s9 3.2 9 7.2z'/%3E%3C/svg%3E"); }
.ch-phone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h3l1.5 4-2 1.5a12 12 0 006.5 6.5l1.5-2 4 1.5v3a2 2 0 01-2.2 2A17 17 0 014.5 5.2 2 2 0 016.5 3z'/%3E%3C/svg%3E"); }
.ch-in    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66c2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M7.5 10.5V17M7.5 7.4v.1M12 17v-3.6a2.4 2.4 0 014.8 0V17'/%3E%3C/svg%3E"); }
.ch-form  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4l10-10a2.5 2.5 0 10-3.5-3.5L4.5 16.5z'/%3E%3C/svg%3E"); }

/* ── Form ── */
.cform {
  padding: 28px 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  display: grid; gap: 15px;
}
.f-row { display: grid; gap: 7px; }
.f-row label { font-size: 14px; font-weight: 600; color: var(--text-2); letter-spacing: -.005em; }

/* ⚠ Kiểu dáng ô nhập treo ở CLASS, không treo ở thẻ. Quên class là ra
   một ô trần không viền không nền — nhìn như lỗi màu chứ không ai đoán
   ra là thiếu class. Đây là bẫy đã dính thật ở dự án khác. */
.input, .select, .textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font: inherit; font-size: 15.4px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.textarea { resize: vertical; min-height: 118px; }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.input.err, .textarea.err, .select.err { border-color: #f0576c; box-shadow: 0 0 0 3px rgba(240,87,108,.18); }

/* ⚠ <select> PHẢI dùng class .select, không dùng .input.
   .input không đặt appearance:none nên trình duyệt vẽ mũi tên + nền hệ
   điều hành đè lên, ra một ô TRẮNG giữa nền tối. */
.select {
  appearance: none; -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 10px 6px;
}
.select option { background: var(--bg-2); color: var(--text); }

#f-gotcha { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.f-note { min-height: 20px; font-size: 14.4px; font-weight: 600; }
.f-note.ok  { color: #34d399; }
.f-note.bad { color: #f0576c; }
.f-fine { font-size: 12.8px; color: var(--text-3); }

/* ───────────────────────── FOOTER ─────────────────────────
   LUẬT: KHÔNG có địa chỉ trong khối này. */
.foot { border-top: 1px solid var(--line); padding: 52px 0 26px; position: relative; z-index: 1; }
.foot-in { display: grid; gap: 30px; grid-template-columns: 1.6fr 1fr; }
.foot-me h3 { font-size: 17.5px; }
.foot-me p { margin-top: 10px; color: var(--text-2); font-size: 15px; max-width: 520px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.foot-links a {
  padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  font-size: 14px; color: var(--text-2);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.foot-links a:hover { color: var(--text); border-color: var(--line-hi); }

.foot-nav { display: grid; gap: 9px; align-content: start; }
.foot-nav a { color: var(--text-2); font-size: 14.6px; }
.foot-nav a:hover { color: var(--text); }

.foot-end {
  margin-top: 34px; padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between;
  color: var(--text-3); font-size: 13.4px;
}

/* ───────────────────────── NÚT NỔI LIÊN HỆ ───────────────────────── */
.fab-wrap {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}

.fab {
  width: 56px; height: 56px;
  border: 0; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--accent-2)));
  color: #fff; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 14px 34px -10px var(--glow), 0 2px 6px rgba(0,0,0,.3);
  transition: transform .32s var(--spring), box-shadow .3s var(--ease);
}
.fab:hover { transform: translateY(-3px) scale(1.04); }
.fab svg { width: 25px; height: 25px; grid-area: 1 / 1; transition: opacity .2s var(--ease), transform .3s var(--spring); }
.fab .i-close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.fab[aria-expanded="true"] .i-chat  { opacity: 0; transform: rotate(90deg) scale(.6); }
.fab[aria-expanded="true"] .i-close { opacity: 1; transform: none; }

/* Vòng sóng nhắc khách là có chỗ bấm. Tắt khi khách đã mở một lần. */
.fab::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 var(--glow);
  animation: ping 2.6s var(--ease) infinite;
}
.fab-wrap.is-seen .fab::before { animation: none; }
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 var(--glow); }
  70%  { box-shadow: 0 0 0 16px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.fab-panel {
  width: 300px; max-width: calc(100vw - 44px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-2) 90%, transparent);
  backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: var(--shadow-hi);
  overflow: hidden;
  animation: fabIn .3s var(--spring) both;
}
@keyframes fabIn { from { opacity: 0; transform: translateY(14px) scale(.95); } }

.fab-head { padding: 16px 18px 13px; border-bottom: 1px solid var(--line); }
.fab-head b { display: block; font-size: 15.4px; letter-spacing: -.012em; }
.fab-head span { display: block; margin-top: 2px; font-size: 13px; color: var(--text-3); }

.fab-items { padding: 8px; display: grid; gap: 3px; }
.fab-items a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: var(--r-sm);
  transition: background .18s var(--ease);
}
.fab-items a:hover { background: var(--surface-2); }
.fab-items b { display: block; font-size: 14.6px; font-weight: 650; }
.fab-items i { display: block; font-style: normal; font-size: 12.6px; color: var(--text-3); }
.fab-items a.is-off { display: none; }
.fab-items .ch-ic { width: 36px; height: 36px; border-radius: 11px; background-size: 17px 17px; }

/* ───────────────────────── HIỆN DẦN KHI CUỘN ─────────────────────────
   Đây là thứ thay cho Framer Motion: dịch lên + phóng nhẹ, easing có
   nhún. Không dùng opacity đơn thuần — nhìn ra ngay là hiệu ứng rẻ tiền. */
.reveal { opacity: 0; transform: translateY(22px) scale(.985); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease), transform .62s var(--spring);
}

/* Máy không chạy JS, người tắt hiệu ứng, và lúc IN trang: nội dung phải HIỆN.
   Ẩn nội dung bằng opacity rồi trông chờ JS bật lại là kiểu hỏng câm tệ nhất —
   trang trắng phân nửa mà không một dòng lỗi nào. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Ô nào thiếu bản dịch thì phải NHÌN LÀ THẤY, đừng để im lặng */
.i18n-missing {
  color: #ff5470 !important;
  background: rgba(255, 84, 112, .12);
  border-radius: 4px; padding: 0 4px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .9em;
}


/* ───────────────────────── DẢI CHỈ SỐ (dưới hero) ─────────────────────────
   Cố ý LỆCH: thẻ đầu rộng gấp rưỡi hai thẻ sau, vì nó mang con số bán được
   hàng. Ba ô đều nhau là mất hẳn thứ tự đọc. */
.stats {
  margin: 54px 0 0; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: 1.5fr 1fr 1fr;
}
.stat {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  backdrop-filter: blur(14px);
}
.stat dt {
  font-size: 38px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.stat dd {
  margin: 10px 0 0; color: var(--text-2); font-size: 14.5px; line-height: 1.6;
}
/* Con số DUY NHẤT trên trang được mặc màu hổ phách — đồng hồ đang chạy tiền. */
.stat-hot { border-color: color-mix(in srgb, var(--warn) 34%, var(--line)); }
.stat-hot dt { color: var(--warn); }

/* ───────────────────────── HỘP GIÁ ───────────────────────── */
.pricebox {
  margin-top: 36px;
  padding: 40px 38px 34px;
  border: 1px solid var(--line-hi);
  border-radius: var(--r-lg);
  background: var(--surface);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
/* Quầng sáng lơ ở góc trên — cùng ngôn ngữ với hero, không phải hình trang trí rời */
.pricebox::before {
  content: ""; position: absolute; inset: -60% 30% auto -20%; height: 260px;
  background: radial-gradient(50% 50% at 50% 50%, var(--glow), transparent 70%);
  pointer-events: none;
}
.pricebox > * { position: relative; }

.price-amt {
  margin: 0; font-size: 46px; font-weight: 800; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.price-unit { margin: 8px 0 0; color: var(--text-2); font-size: 15px; }
.price-hint { margin: 14px 0 0; color: var(--text-3); font-size: 14.5px; }

.price-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.price-list li { position: relative; padding-left: 30px; font-size: 15.4px; line-height: 1.6; }
/* Dấu tích vẽ bằng viền — không phải emoji, để nó ăn theo màu chủ đề */
.price-list li::before {
  content: ""; position: absolute; left: 6px; top: 6px;
  width: 6px; height: 11px;
  border: solid var(--ok); border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

.price-cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.price-fine {
  margin: 24px 0 0; padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--text-3); font-size: 13.4px; line-height: 1.65;
}

/* ───────────────────────── KHỔ MÀN HÌNH ───────────────────────── */
@media (max-width: 980px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat-hot { grid-column: 1 / -1; }
  .card:nth-child(n) { grid-column: span 1; }
  .steps { grid-template-columns: 1fr; }
  .contact-in { grid-template-columns: 1fr; }
  .foot-in { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --pad: 18px; }
  .hero { padding: 62px 0 54px; }
  .sec { padding: 58px 0; }

  .nav-links {
    position: absolute; left: var(--pad); right: var(--pad); top: calc(100% + 8px);
    flex-direction: column; gap: 2px; padding: 9px;
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-2) 94%, transparent);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow);
    display: none;
  }
  .nav-links.open { display: flex; animation: pop .24s var(--spring) both; }
  .nav-links a { padding: 11px 13px; }
  .burger { display: block; }
  .nav .btn-sm { display: none; }

  .cards { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .stat dt { font-size: 32px; }
  .pricebox { padding: 30px 22px 26px; }
  .price-amt { font-size: 36px; }
  .price-cta .btn { width: 100%; justify-content: center; }

  /* Nút nổi hạ xuống góc và thu nhỏ, nếu không nó đè đúng nút Gửi của form */
  .fab-wrap { right: 14px; bottom: 14px; }
  .fab { width: 50px; height: 50px; }
  .fab-panel { width: calc(100vw - 28px); }
}

/* Chừa chỗ cho nút nổi để nó không nằm đè lên dòng cuối của footer */
.foot-end { padding-bottom: 46px; }
@media (min-width: 761px) { .foot-end { padding-bottom: 20px; } }