/* Landing studio.boivela.com — /ai-studio và /thiep-nhac (2026-10-12, mockup
   user duyệt claude.ai/artifact/LF81pzkCtDogiDRoj8ScjB). Spec: docs/specs/landing.md.
   Màu: token tông neon jade của landing cũ (site.css), KHÔNG theo theme navy của
   app. Không animation vô hạn, không backdrop-filter, không WebGL (CLAUDE.md
   mục Hiệu năng). Khối điện thoại ở CUỐI file. */
:root {
  --bg: #071417; --bg-2: #040e11; --surface: #0e2126; --surface-2: #0a1a1e; --border: #1d3a3f;
  --neon: #3fe08f; --neon-lt: #8ef5bf; --on-neon: #04221d; --amber: #ffb45c;
  --pink: #f472b6; --pink-lt: #f9c4dc;
  --text: #e8fffb; --muted: #8fb3b0; --dim: #5d807e;
  --g: 28px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.6 ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
html[lang="ko"] body { word-break: keep-all; overflow-wrap: anywhere; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; border-radius: 6px; }
.w { max-width: 1120px; margin: 0 auto; padding-inline: var(--g); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- header */
.top { position: sticky; top: 0; z-index: 20; background: rgba(7, 20, 23, 0.92); border-bottom: 1px solid rgba(29, 58, 63, 0.6); }
.top .w { display: flex; align-items: center; gap: 18px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; text-decoration: none; }
.brand svg { width: 28px; height: 28px; color: var(--neon); }
.brand small { font-size: 12px; font-weight: 700; color: var(--neon-lt); border: 1px solid rgba(63, 224, 143, 0.35); border-radius: 6px; padding: 1px 6px; letter-spacing: 0; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 20px; font-size: 14.5px; }
.nav > a:not(.btn) { color: var(--muted); text-decoration: none; }
.nav > a:not(.btn):hover { color: var(--text); }

/* Menu ngôn ngữ — lp.js dựng vào [data-lang-switch] */
.lang { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; background: none; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; padding: 6px; border-radius: 12px; background: #0b1d21; border: 1px solid var(--border); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55); z-index: 30; }
.lang-menu[hidden] { display: none; }
.lang-menu button { width: 100%; display: flex; align-items: center; gap: 10px; background: none; color: var(--text); border: 0; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.lang-menu button:hover { background: rgba(63, 224, 143, 0.08); }
.lang-menu .cc { flex: none; display: grid; place-items: center; width: 30px; height: 22px; border-radius: 6px; font-size: 10.5px; font-weight: 800; color: var(--muted); border: 1px solid var(--border); }
.lang-menu .nm { display: grid; line-height: 1.25; }
.lang-menu .nm small { font-size: 11px; color: var(--dim); }
.lang-menu .tick { margin-left: auto; color: var(--neon); font-weight: 800; visibility: hidden; }
.lang-menu button.on .cc { background: var(--neon); border-color: var(--neon); color: var(--on-neon); }
.lang-menu button.on .tick { visibility: visible; }

/* ---------------------------------------------------------------- nút, chữ chung */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 12px; background: var(--neon); color: var(--on-neon); font-weight: 800; font-size: 15px; text-decoration: none; border: 1px solid var(--neon); white-space: nowrap; transition: transform 0.15s; }
.btn:active { transform: scale(0.98); }
.btn--ghost { background: transparent; color: var(--neon-lt); border-color: rgba(63, 224, 143, 0.4); }
.btn--sm { height: 38px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.eyebrow { display: inline-block; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(142, 245, 191, 0.25); background: rgba(4, 14, 17, 0.5); color: var(--neon-lt); font-size: 13px; font-weight: 700; }
.grad { background: linear-gradient(100deg, var(--neon), #5eead4 50%, #7dd3fc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kick { display: block; color: var(--neon); font-size: 12.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 8px; }
.sec { padding-top: 72px; }
.sec h2 { margin: 0; font-size: 34px; line-height: 1.18; letter-spacing: -0.02em; text-wrap: balance; }
.sec .sub { margin: 8px 0 0; color: var(--muted); max-width: 62ch; }
.head { margin-bottom: 26px; }
.anchor-note { margin-top: 14px; font-size: 14px; color: var(--dim); }
.anchor-note a { color: var(--neon-lt); }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; overflow: hidden;
  background: radial-gradient(ellipse 55% 60% at 18% 30%, rgba(63, 224, 143, 0.16), transparent 70%),
              radial-gradient(ellipse 45% 50% at 85% 20%, rgba(56, 189, 248, 0.12), transparent 70%),
              linear-gradient(180deg, #081a20, var(--bg)); }
.hero .w { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-block: 64px 56px; }
.hero h1 { margin: 16px 0 0; font-size: 52px; line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
.hero p.lead { margin: 18px 0 0; color: #cfe9e5; font-size: 18px; max-width: 46ch; }
/* Đoạn dẫn: mỗi câu (.ln) một dòng trên máy tính, câu dài tự chia 2 dòng cân nhau —
   không để trình duyệt ngắt giữa câu ("hát / thành bài riêng"). Điện thoại chảy liền. */
@media (min-width: 961px) {
  /* Cột phải chỉ chứa khung 320px → cố định 360px, nhường chỗ cho cột chữ (~650px) để
     mỗi câu của đoạn dẫn nằm gọn một dòng (cột 1:1 làm câu đầu gãy đôi — user 2026-10-12). */
  .hero .w { grid-template-columns: minmax(0, 1fr) 360px; }
  .hero p.lead { max-width: none; }
  .hero p.lead .ln { display: block; text-wrap: balance; }
}
.cta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.trust { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--muted); }
.trust li::before { content: "✓ "; color: var(--neon); font-weight: 800; }
.crumb { font-size: 13.5px; color: var(--dim); margin: 0 0 12px; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--text); }

/* Khung video: poster hiện ngay; video chỉ tải + phát khi lp.js cho phép */
.media { position: relative; overflow: hidden; border-radius: 20px; background: #0a1a1e center / cover no-repeat; border: 1px solid var(--border); }
.media video, .media img { width: 100%; height: 100%; object-fit: cover; }
.media .chip { position: absolute; left: 12px; bottom: 12px; background: rgba(4, 14, 17, 0.75); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; color: #d6f3ee; }
.media .play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; background: rgba(4, 14, 17, 0.6); border: 1px solid rgba(255, 255, 255, 0.2); cursor: pointer; display: grid; place-items: center; padding: 0; }
.media .play::after { content: ""; margin-left: 4px; border: 9px solid transparent; border-left: 15px solid #fff; border-right: 0; }
.media.is-playing .play { display: none; }


/* ---------------------------------------------------------------- 6 việc */
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mode { padding: 20px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); display: grid; gap: 8px; align-content: start; }
.mode .io { display: flex; align-items: center; gap: 6px; color: var(--c, var(--neon)); }
.mode .io svg { width: 34px; height: 34px; }
.mode .io .ar { width: 18px; height: 2px; background: currentColor; opacity: 0.6; border-radius: 2px; }
.mode h3 { margin: 4px 0 0; font-size: 17.5px; }
.mode p { margin: 0; color: var(--muted); font-size: 14.5px; text-wrap: pretty; }

/* ---------------------------------------------------------------- ứng dụng */
.app-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); border-radius: 20px; overflow: hidden; text-decoration: none; border: 1px solid rgba(244, 114, 182, 0.28);
  background: radial-gradient(ellipse 60% 90% at 0% 50%, rgba(244, 114, 182, 0.14), transparent 70%), var(--surface-2); transition: border-color 0.2s; }
.app-card:hover { border-color: rgba(244, 114, 182, 0.55); }
/* Rộng bằng các khối khác (giới hạn 820px làm câu mô tả gãy dòng dù màn dư chỗ — user 2026-10-12);
   thẻ vẫn thấp nhờ cột phong bì 300px. */
.app-card { grid-template-columns: 300px minmax(0, 1fr); }
.app-card .env-scene { padding: 18px 14px; }
.app-card .env-scene .to { font-size: 22px; }
.app-card .env { width: 190px; }
.app-card .b { padding: 26px 28px; display: grid; gap: 8px; align-content: center; }
.app-card h3 { margin: 0; font-size: 23px; }
.app-card p { margin: 0; color: var(--muted); font-size: 15px; text-wrap: pretty; }
.app-card .more { color: var(--pink-lt); font-weight: 800; font-size: 14.5px; margin-top: 4px; }
.pill-new { justify-self: start; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: var(--pink-lt); border: 1px solid rgba(244, 114, 182, 0.4); border-radius: 999px; padding: 2px 9px; }

/* ---------------------------------------------------------------- model */
.tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); margin-bottom: 16px; }
.tabs button { background: none; border: 0; padding: 7px 15px; border-radius: 9px; font: inherit; font-size: 14px; color: var(--muted); font-weight: 600; cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.js .chips-stack { display: grid; }
.js .chips-stack > .chips { grid-area: 1 / 1; align-content: start; transition: opacity 0.25s ease; }
.chips[data-off] { visibility: hidden; opacity: 0; }
.mchip { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.mchip img { flex: none; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: #000; }
.mchip div { min-width: 0; }
.mchip b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mchip small { display: block; color: var(--dim); font-size: 12.5px; line-height: 1.35; }
/* Chưa có JS: hiện cả 3 nhóm, có nhãn nhóm thay cho tab */
.chips-lbl { margin: 18px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.js .chips-lbl { display: none; }
.no-js-only { display: none; }


/* ---------------------------------------------------------------- cập nhật mới */
.log { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.log li + li { border-top: 1px solid var(--border); }
.log a { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 15px 18px; text-decoration: none; background: var(--surface-2); }
.log a:hover { background: var(--surface); }
.log time { font: 600 13px ui-monospace, Consolas, monospace; color: var(--dim); font-variant-numeric: tabular-nums; }
.log b { font-weight: 700; }
.log .d { display: block; color: var(--muted); font-size: 14.5px; }
.log .new { font-size: 10.5px; font-weight: 900; color: var(--on-neon); background: var(--neon); border-radius: 5px; padding: 2px 6px; margin-left: 8px; vertical-align: 2px; }
.log .go { color: var(--neon-lt); font-weight: 800; }

/* ---------------------------------------------------------------- thẻ thường (giá, bước) */
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.card { padding: 22px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); }
.card h3 { margin: 0; font-size: 18px; }
.card p { margin: 6px 0 0; color: var(--muted); font-size: 15px; text-wrap: pretty; }
.card .n { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(244, 114, 182, 0.14); color: var(--pink-lt); font-weight: 800; font-size: 14px; margin-bottom: 10px; }

/* ---------------------------------------------------------------- hỏi đáp */
/* Rộng bằng các khối khác (giới hạn 840px làm khối hụt so với trang — user 2026-10-12);
   câu trả lời vẫn giới hạn ~80 ký tự / dòng cho dễ đọc. */
.faq { display: grid; gap: 8px; }
.faq details p { max-width: 80ch; }
.faq details { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); padding: 0 18px; }
.faq summary { cursor: pointer; padding: 15px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--neon); font-weight: 800; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 15px; color: var(--muted); font-size: 15px; }
.faq a { color: var(--neon-lt); }

/* ---------------------------------------------------------------- CTA cuối + footer */
.endcta { margin-top: 80px; padding: 46px 28px; border-radius: 22px; text-align: center; border: 1px solid rgba(63, 224, 143, 0.25);
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(63, 224, 143, 0.16), transparent 70%), var(--surface-2); }
.endcta h2 { margin: 0; font-size: 32px; letter-spacing: -0.02em; text-wrap: balance; }
.endcta p { margin: 8px auto 22px; color: var(--muted); }
/* CTA cuối có video thương hiệu làm nền (landing cũ, user giữ 2026-10-12): logo nằm giữa
   khung → khung CAO, chữ dồn xuống đáy; nền tối dần từ giữa xuống. Nền = màu nền thật của video. */
.endcta.lp-cta { position: relative; overflow: hidden; isolation: isolate; min-height: 460px; padding: 40px 24px 44px; background: #090d0e;
  border-color: var(--border); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.lp-cta video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; z-index: -2; opacity: 0.9; }
.lp-cta::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(9, 13, 14, 0) 35%, rgba(9, 13, 14, 0.75) 62%, rgba(9, 13, 14, 0.96) 100%); }
.lp-cta p { color: #cfe9e5; }
.foot { margin-top: 60px; border-top: 1px solid var(--border); padding-block: 24px 30px; font-size: 13.5px; color: var(--dim); }
.foot .w { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.foot a { color: var(--dim); text-decoration: none; }
.foot a:hover { color: var(--neon-lt); }

/* ---------------------------------------------------------------- trang Thiệp nhạc */
.p-card .hero { background: radial-gradient(ellipse 55% 60% at 18% 30%, rgba(244, 114, 182, 0.16), transparent 70%),
  radial-gradient(ellipse 45% 50% at 85% 20%, rgba(167, 139, 250, 0.14), transparent 70%), linear-gradient(180deg, #130f22, var(--bg)); }
.p-card .grad { background-image: linear-gradient(100deg, #f9a8d4, #f0abfc 50%, #c4b5fd); }
.p-card .eyebrow { color: var(--pink-lt); border-color: rgba(244, 114, 182, 0.3); }
.p-card .kick { color: var(--pink); }
.p-card .btn { background: #fff; border-color: #fff; color: #2a1033; }
.p-card .btn--ghost { background: transparent; color: var(--pink-lt); border-color: rgba(244, 114, 182, 0.45); }
.p-card .endcta { border-color: rgba(244, 114, 182, 0.28); background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(244, 114, 182, 0.16), transparent 70%), var(--surface-2); }
.p-card .endcta.lp-cta { background: #090d0e; } /* nền = màu nền thật của video thương hiệu */
.p-card .faq summary::after { color: var(--pink); }
.samples { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sample { display: grid; gap: 10px; padding: 12px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); text-decoration: none; transition: border-color 0.2s; }
.sample:hover { border-color: rgba(244, 114, 182, 0.5); }
.sample .env-scene::after { content: "▶"; position: absolute; right: 8px; bottom: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #2a1033; display: grid; place-items: center; font-size: 11px; }
.sample b { font-size: 15px; display: block; }
.sample small { display: block; color: var(--dim); font-size: 13px; }
.occ { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.occ li { padding: 7px 15px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); font-size: 14.5px; color: #cfe9e5; }

/* ---------------------------------------------------------------- hero dọc 9:16 (2026-10-12) */
.hero-phone { justify-self: center; position: relative; width: min(320px, 100%); aspect-ratio: 9 / 16; border-radius: 30px;
  border: 1px solid rgba(142, 245, 191, 0.25);
  box-shadow: 0 40px 90px -36px rgba(0, 0, 0, 0.9), 0 0 0 8px rgba(255, 255, 255, 0.03), 0 0 80px -20px rgba(63, 224, 143, 0.35); }
/* Cho nhãn .hero-side tràn ra ngoài khung — bo góc đặt thẳng lên ảnh / video. */
.hero-phone { overflow: visible; background: none; }
.hero-phone > img, .hero-phone > video { border-radius: 29px; }
.hero-phone .chip { left: 50%; transform: translateX(-50%); bottom: 14px; white-space: nowrap; }
.hero-side { position: absolute; top: 18%; left: -54px; display: grid; gap: 10px; }
.hero-side span { background: rgba(4, 14, 17, 0.82); border: 1px solid var(--border); border-radius: 12px; padding: 7px 12px; font-size: 12.5px; color: #cfe9e5; white-space: nowrap; box-shadow: 0 10px 24px -10px #000; }
.hero-side b { color: var(--neon-lt); }

/* Thanh tua video hero (lp.js addSeekBar) — thay chỗ nhãn "Video mẫu…" sau lần phát đầu */
.media.has-bar .chip { display: none; }
.vbar { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px;
  border-radius: 999px; background: rgba(4, 14, 17, 0.78); border: 1px solid rgba(255, 255, 255, 0.1); }
.vbar-pp { flex: none; position: relative; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--neon); cursor: pointer; padding: 0; }
.vbar-pp::before { content: ""; position: absolute; left: 11px; top: 8px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--on-neon); }
.vbar-pp.is-on::before { left: 10px; top: 9px; width: 3px; height: 12px; border: 0; background: var(--on-neon); box-shadow: 7px 0 0 var(--on-neon); }
.vbar-seek { flex: 1; min-width: 0; height: 18px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; --p: 0%; }
.vbar-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--neon) var(--p), rgba(255, 255, 255, 0.25) var(--p)); }
.vbar-seek::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.25); }
.vbar-seek::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--neon); }
.vbar-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.vbar-seek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; }
.vbar-t { flex: none; font-size: 11.5px; color: #d6f3ee; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- logo model động */
.mchip .lg { flex: none; width: 46px; height: 46px; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
.mchip .lg img, .mchip .lg video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }

/* ---------------------------------------------------------------- phong bì thiệp (tĩnh, chỉ minh hoạ)
   Vẽ lại phong bì của trang thiệp người nhận (frontend/src/theme.css .cd-envelope + .cd-st-A/B/D,
   bảng màu .cd-theme-*). Kiểu theo DỊP như components/CardDeco.tsx:
     B · giấy kraft + tem + dấu bưu điện — 14/2 · 20/11 · Vu Lan
     D · pastel + băng keo, không con dấu — 20/10 · 8/3 · sinh nhật
     A · màu rực + chấm bi, con dấu lớn   — Tết · Noel
   Bên app đổi kiểu thiệp thì đổi theo ở đây cho khớp. */
.env-scene { --a: #ff7aa8; --al: #ffc2d6; --bg: #1a0f1c; --bg2: #2a1430; --ink: #2a0f1d;
  --b1: #d6b38b; --b2: #c39a6e; --side: #b98b5c; --bot: #b4865a; --flap: #ab7c4e;
  position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; padding: 22px 16px;
  background: radial-gradient(120% 60% at 50% 0%, var(--bg2), var(--bg) 65%); color: #fbeef3; text-align: center; overflow: hidden; text-decoration: none; }
.th-rose   { --a: #ff7aa8; --al: #ffc2d6; --bg: #1a0f1c; --bg2: #2a1430; --ink: #2a0f1d; }
.th-gold   { --a: #f5c451; --al: #fde7a6; --bg: #17130a; --bg2: #2a2110; --ink: #241a05; }
.th-red    { --a: #ff6b5b; --al: #ffd08a; --bg: #1c0d0b; --bg2: #331611; --ink: #2a0b06; }
.th-green  { --a: #5ad18a; --al: #ff9a8b; --bg: #0c1712; --bg2: #13261c; --ink: #062012; }
.th-purple { --a: #b98cff; --al: #e2d1ff; --bg: #140f22; --bg2: #221838; --ink: #1a0b33; }
.env-scene .occ { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--a); }
.env-scene .to { font: italic 600 26px/1.15 "Playfair Display", Georgia, "Times New Roman", serif; color: #fff; }
.env-scene .from { font-size: 13px; color: color-mix(in srgb, var(--al) 70%, #fff); margin-bottom: 12px; }
.env { position: relative; display: block; width: min(230px, 80%); aspect-ratio: 3 / 2; }
.env i { position: absolute; display: block; font-style: normal; }
.env .bk { inset: 0; border-radius: 9px; background: linear-gradient(160deg, var(--b1), var(--b2)); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45); }
.env .lt { left: 5%; right: 5%; top: 7%; height: 50%; border-radius: 6px; background: #fff; }
.env .fr { inset: 0; border-radius: 9px;
  background: linear-gradient(to top right, transparent 49.5%, var(--side) 50%) left bottom / 50% 100% no-repeat,
              linear-gradient(to top left, transparent 49.5%, var(--side) 50%) right bottom / 50% 100% no-repeat,
              linear-gradient(to bottom, transparent 55%, var(--bot) 55%); }
.env .fl { left: 0; right: 0; top: 0; height: 55%;
  background: linear-gradient(to top right, transparent 49.5%, var(--flap) 50%) left top / 50% 100% no-repeat,
              linear-gradient(to top left, transparent 49.5%, var(--flap) 50%) right top / 50% 100% no-repeat; }
.env .sl { left: 50%; top: 46%; width: 21%; aspect-ratio: 1; margin-left: -10.5%; border-radius: 50%; display: grid; place-items: center; font-size: 19px; color: var(--ink);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--a) 70%, #fff), var(--a) 60%, color-mix(in srgb, var(--a) 55%, #000));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 0 0 3px rgba(255, 255, 255, 0.2); }
.env .st, .env .pm, .env .tp, .env .tp2 { display: none; }
/* B · kraft */
.st-B .env .st { display: grid; place-items: center; right: 5%; top: 7%; width: 15%; aspect-ratio: 5 / 6; font-size: 11px; color: var(--ink);
  background: var(--a); border: 3px dotted #f6ead9; box-shadow: inset 0 0 0 2px #f6ead9; transform: rotate(4deg); }
.st-B .env .pm { display: grid; place-items: center; right: 15%; top: 11%; width: 23%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(70, 36, 12, 0.6);
  transform: rotate(-14deg); font: 800 7px/1.15 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.08em; color: rgba(70, 36, 12, 0.75); text-transform: uppercase; }
/* D · pastel + băng keo */
.st-D { --b1: color-mix(in srgb, var(--a) 12%, #fff); --b2: color-mix(in srgb, var(--a) 22%, #fff); --side: color-mix(in srgb, var(--a) 30%, #fff);
  --bot: color-mix(in srgb, var(--a) 26%, #fff); --flap: color-mix(in srgb, var(--a) 42%, #fff); }
.st-D .env .sl { display: none; }
.st-D .env .tp, .st-D .env .tp2 { display: block; border-radius: 2px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--al) 85%, transparent) 0 6px, color-mix(in srgb, #fff 60%, transparent) 6px 12px); }
.st-D .env .tp { left: 27%; top: 42%; width: 46%; height: 17%; transform: rotate(-9deg); }
.st-D .env .tp2 { right: -6%; bottom: 12%; width: 28%; height: 11%; transform: rotate(38deg); }
.st-D .to { font: 700 30px/1.1 "Dancing Script", "Segoe Script", cursive; }
/* Sinh nhật — "hộp quà": chấm confetti, ruy băng chữ thập, nơ (khớp .cd-occ-birthday trong app) */
.env .rb, .env .bw { display: none; }
.oc-birthday .env .tp, .oc-birthday .env .tp2 { display: none; }
.oc-birthday .env .bk { background:
  radial-gradient(color-mix(in srgb, var(--a) 55%, transparent) 1.6px, transparent 2.2px) 0 0 / 14px 14px,
  radial-gradient(color-mix(in srgb, #ffd36b 70%, transparent) 1.4px, transparent 2px) 7px 7px / 14px 14px,
  linear-gradient(160deg, var(--b1), var(--b2)); }
.oc-birthday .env .rb { display: block; inset: 0; border-radius: 9px; background:
  linear-gradient(90deg, transparent calc(50% - 7%), var(--a) calc(50% - 7%) calc(50% + 7%), transparent calc(50% + 7%)),
  linear-gradient(180deg, transparent calc(56% - 8%), var(--a) calc(56% - 8%) calc(56% + 8%), transparent calc(56% + 8%)); }
.oc-birthday .env .bw { display: block; left: 50%; top: 56%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -56%);
  color: color-mix(in srgb, var(--a) 70%, #fff); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3)); }
.oc-birthday .env .bw svg { display: block; width: 100%; height: 100%; }
/* A · rực rỡ */
.st-A { --b1: var(--a); --b2: color-mix(in srgb, var(--a) 82%, #000); --side: color-mix(in srgb, var(--a) 86%, #000);
  --bot: color-mix(in srgb, var(--a) 80%, #000); --flap: color-mix(in srgb, var(--a) 72%, #000); }
.st-A .env .bk { background: radial-gradient(color-mix(in srgb, var(--al) 40%, transparent) 1.4px, transparent 2px) 0 0 / 14px 14px, linear-gradient(160deg, var(--b1), var(--b2)); }
.st-A .env .sl { width: 26%; margin-left: -13%; top: 40%; font-size: 22px;
  background: radial-gradient(circle at 35% 30%, #fff, var(--al) 45%, color-mix(in srgb, var(--al) 70%, #000)); }
.st-A .occ { padding: 2px 10px; border-radius: 999px; background: var(--a); color: var(--ink); }
.st-A .to { font: 800 26px/1.15 "Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif; font-style: normal; }
.env-scene .tap { margin-top: 16px; display: inline-flex; gap: 6px; padding: 9px 18px; border-radius: 999px; background: var(--a); color: var(--ink); font-weight: 800; font-size: 14px;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--a) 35%, transparent); }
.env-scene .hint { margin-top: 6px; font-size: 11.5px; color: rgba(251, 238, 243, 0.55); }
/* Bản lớn — hero trang Thiệp nhạc, khung như màn điện thoại người nhận */
.env-scene--phone { justify-self: center; width: min(320px, 100%); aspect-ratio: 9 / 15; border-radius: 30px;
  border: 8px solid #1b2430; box-shadow: 0 40px 90px -30px #000, 0 0 70px -20px color-mix(in srgb, var(--a) 45%, transparent); }
.env-scene--phone .to { font-size: 30px; }
.env-scene--phone.st-D .to { font-size: 36px; }
/* Bản nhỏ — ô thiệp mẫu + thẻ Ứng dụng */
.env-scene--mini { aspect-ratio: 1; border-radius: 12px; padding: 12px 10px; gap: 2px; }
.env-scene--mini .occ { font-size: 9px; letter-spacing: 0.1em; }
.env-scene--mini .to { font-size: 15px; }
.env-scene--mini.st-D .to { font-size: 19px; }
.env-scene--mini.st-A .to { font-size: 15px; }
.env-scene--mini .from { font-size: 10px; margin-bottom: 8px; }
.env-scene--mini .env { width: 74%; }
.env-scene--mini .env .sl { font-size: 12px; }
.env-scene--mini .env .st { font-size: 8px; border-width: 2px; }
.env-scene--mini .env .pm { font-size: 5px; }

/* ---------------------------------------------------------------- 4 chủ đề — giữ thiết kế landing cũ (user 2026-10-12)
   Chép từ landing/public/assets/landing.css (thư mục landing/ đã xoá 2026-10-12, còn trong lịch sử git). Dải ảnh chạy ngang CHỈ chạy khi nhìn thấy
   (.is-run do lp.js gắn), rê chuột là dừng; reduced-motion đứng yên. */
.lp-models { display: grid; gap: 16px; }
.lp-model { background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--border); border-radius: 20px; padding: 20px 0; overflow: hidden; }
.lp-model-head { display: flex; gap: 16px; align-items: center; padding: 0 20px 16px; }
.lp-model-txt { min-width: 0; }
.lp-model-name { margin: 0 0 4px; font-size: 22px; letter-spacing: -0.01em; }
.lp-model-desc { margin: 0; color: var(--muted); font-size: 14.5px; max-width: 760px; }
.lp-theme {
  position: relative; isolation: isolate; border: 1px solid transparent;
  background:
    radial-gradient(ellipse 60% 90% at 100% 0%, color-mix(in srgb, var(--c1) 16%, transparent), transparent 70%) padding-box,
    radial-gradient(ellipse 50% 80% at 0% 100%, color-mix(in srgb, var(--c2) 10%, transparent), transparent 70%) padding-box,
    linear-gradient(160deg, #102a30, #0a1a1e 70%) padding-box,
    linear-gradient(135deg, var(--c1), rgba(29, 58, 63, 0.9) 40%, rgba(29, 58, 63, 0.9) 60%, var(--c2)) border-box;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.lp-theme:hover { transform: translateY(-3px); box-shadow: 0 16px 44px -16px var(--c1); }
.lp-theme-ico { width: 56px; height: 56px; flex: none; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 8px 26px -8px var(--c1); }
.lp-theme-ico svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lp-theme-tag { display: inline-block; margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: linear-gradient(90deg, var(--c1), var(--c2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-marquee { position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.lp-track { display: flex; gap: 12px; width: max-content; animation: lp-slide 45s linear infinite; animation-play-state: paused; }
.lp-marquee.is-run .lp-track { animation-play-state: running; }
@media (hover: hover) { .lp-marquee.is-run:hover .lp-track { animation-play-state: paused; } }
@keyframes lp-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.lp-marquee--rev .lp-track { animation-direction: reverse; animation-duration: 55s; }
.lp-tile { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: var(--surface-2); border: 1px solid rgba(29, 58, 63, 0.7); flex: none; height: clamp(170px, 19vw, 240px); }
.lp-media { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-more { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 18px 20px; border-radius: 20px; text-decoration: none; font-size: 14.5px; color: var(--muted);
  border: 1px dashed rgba(63, 224, 143, 0.35); background: rgba(63, 224, 143, 0.04); transition: border-color 0.2s ease, background 0.2s ease; }
.lp-more b { display: block; color: var(--text); font-size: 17px; margin-bottom: 2px; }
.lp-more:hover { border-color: var(--neon); background: rgba(63, 224, 143, 0.08); }
.lp-more-plus { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
  background: linear-gradient(135deg, var(--neon), var(--neon-lt)); color: #04221d; font-size: 26px; font-weight: 800; line-height: 1; }
.lp-more-go { margin-left: auto; color: var(--neon); font-size: 22px; transition: transform 0.2s ease; }
.lp-more:hover .lp-more-go { transform: translateX(4px); }
/* khung mẫu âm thanh */
.lp-au-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 0 20px; }
.lp-au-col { display: grid; gap: 8px; align-content: start; min-width: 0; }
.lp-au-t { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 2px; font-size: 14px; letter-spacing: 0.02em; }
.lp-au-model { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.lp-au-item { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 8px 10px 8px 8px; border: 1px solid rgba(29, 58, 63, 0.9); border-radius: 14px;
  background: rgba(7, 18, 22, 0.6); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; }
.lp-au-item:hover { border-color: var(--c1); }
.lp-au-item.is-play { border-color: var(--c1); background: rgba(63, 224, 143, 0.08); }
.lp-au-cover { position: relative; flex: none; width: 46px; height: 46px; border-radius: 12px; overflow: hidden; display: grid; place-items: center;
  font-size: 20px; color: #0b1220; font-weight: 800; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.lp-au-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-au-txt { display: grid; min-width: 0; flex: 1 1 auto; }
.lp-au-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-au-sub { font-size: 12px; color: var(--muted); }
.lp-au-play { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(63, 224, 143, 0.45); background: rgba(63, 224, 143, 0.08); }
.lp-au-play::before { content: ""; position: absolute; left: 12px; top: 9px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--neon); }
.lp-au-item.is-play .lp-au-play { background: var(--neon); border-color: var(--neon); }
.lp-au-item.is-play .lp-au-play::before { left: 10px; top: 9px; width: 4px; height: 14px; border: 0; background: #0b1220; box-shadow: 7px 0 0 #0b1220; }

/* Dải gợi ý mở trình duyệt khi ở trong Zalo / Facebook (lp.js) */
.inapp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: #0b1d21; border-top: 1px solid var(--border); font-size: 13px; color: #cfe9e5; text-align: center; }
.inapp-bar b { color: var(--amber); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .lp-track { animation: none; }
}

/* ================================================================ điện thoại / màn hẹp — PHẢI ở cuối */
@media (max-width: 960px) {
  .nav .hide-md { display: none; }
  .hero .w { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 44px 40px; }
  .hero h1 { font-size: 42px; }
  .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .samples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-au-cols { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hero-side { left: auto; right: calc(100% + 14px); }
}
@media (max-width: 640px) {
  :root { --g: 16px; }
  .top .w { height: 58px; gap: 10px; }
  .nav { gap: 10px; }
  .nav .hide-sm { display: none; }
  .hero .w { padding-block: 32px 34px; }
  .hero h1 { font-size: 33px; }
  .hero p.lead { font-size: 16px; }
  .cta .btn { flex: 1; }
  .sec { padding-top: 52px; }
  .sec h2 { font-size: 26px; }
  .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mode { padding: 14px; }
  .mode h3 { font-size: 15.5px; }
  .mode p { font-size: 13.5px; }
  .mode .io svg { width: 28px; height: 28px; }
  .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mchip img { width: 34px; height: 34px; }
  .mchip b { font-size: 13.5px; }
  .log a { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 13px 14px; }
  .log time { grid-column: 1 / -1; }
  .cards3, .app-card { grid-template-columns: minmax(0, 1fr); }
  .app-card .b { padding: 18px; }
  .samples { gap: 10px; }
  .sample { padding: 10px; }
  .endcta { padding: 34px 18px; margin-top: 60px; }
  .endcta h2 { font-size: 24px; }
  .endcta.lp-cta { min-height: 400px; padding: 28px 18px 30px; }
  .hero-phone { width: min(270px, 74vw); }
  .hero-side { display: none; }
  .lp-model-head { align-items: flex-start; padding: 0 14px 14px; }
  .lp-theme-ico { width: 46px; height: 46px; border-radius: 13px; }
  .lp-theme-ico svg { width: 24px; height: 24px; }
  .lp-model-name { font-size: 19px; }
  .lp-au-cols { padding: 0 14px; }
  .lp-more { gap: 12px; padding: 14px; }
  .lp-more b { font-size: 15.5px; }
  .tabs { display: flex; }
  .tabs button { flex: 1; padding-inline: 8px; }
}