/* ============================================================================
   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:        #08111c;
  --bg-2:      #0c1626;
  --bg-glow-1: rgba(45, 212, 191, .18);
  --bg-glow-2: rgba(251, 191, 36, .10);

  --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:    #2dd4bf;
  --accent-2:  #fbbf24;
  --accent-ink:#04211c;
  --glow:      rgba(45, 212, 191, .34);

  --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:        #f5f8f9;
  --bg-2:      #e9f0f1;
  --bg-glow-1: rgba(13, 148, 136, .12);
  --bg-glow-2: rgba(217, 119, 6, .09);

  --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:    #0d9488;
  --accent-2:  #b45309;
  --accent-ink:#ffffff;
  --glow:      rgba(13, 148, 136, .24);

  --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; }

.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;
}

/* ───────────────────────── KHỔ MÀN HÌNH ───────────────────────── */
@media (max-width: 980px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .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; }

  /* 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; } }