/* ==========================================================================
   VivoAI landing v3 — light / blue
   Thay thế hoàn toàn bản v2 dark. Dựng theo mock vivoai-landing-mock.png.
   ========================================================================== */

/* ===== 1. Design tokens ================================================== */
:root {
  --bg-page: #f6f8ff;
  --bg-hero: linear-gradient(180deg, #eef2ff 0%, #f8faff 100%);

  --card: #ffffff;
  --border: #e6eaf5;

  --text-900: #0f172a;
  --text-600: #475569;
  /* Brief ghi #94A3B8 nhưng màu đó chỉ đạt 2,5:1 trên nền trắng — trượt
     WCAG AA (cần 4,5:1) và trượt mục Accessibility >= 90 cũng của brief.
     Đậm lên mức tối thiểu vẫn giữ đúng sắc xám nhạt: 5,2:1 trên nền trắng,
     4,6:1 trên nền hero/footer (nơi nền không phải trắng thuần). */
  --text-400: #5f6e82;

  --brand-600: #2563eb;
  --brand-500: #3b82f6;
  --brand-grad: linear-gradient(90deg, #2563eb 0%, #3b82f6 100%);
  --brand-050: #eff4ff;
  --brand-100: #dbe6ff;

  --kicker: #2563eb;

  /* Thang bo góc: 8 nhỏ / 12 vừa / 20 lớn. Ngoài ra chỉ còn 50% cho hình
     tròn, 999px cho viên thuốc, 2px cho thanh waveform trang trí. */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-card: var(--radius-lg);
  --radius-btn: var(--radius-md);

  --shadow-card: 0 4px 24px rgba(15, 23, 42, 0.06);
  --shadow-hero: 0 24px 60px rgba(37, 99, 235, 0.18);

  --container: 1180px;
  --section-y: 52px;

  --font: "Inter", "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ===== 2. Reset & nền trang ============================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* chừa chỗ cho header sticky khi nhảy anchor */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 450;
  line-height: 1.6;
  color: var(--text-600);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--text-900);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Ẩn về mặt thị giác nhưng vẫn đọc được bằng trình đọc màn hình */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== 3. Layout dùng chung ============================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: var(--section-y) 0;
}

/* Khối nội dung màu trắng bo tròn — đặc trưng thị giác của mock */
.section-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  padding: 30px 36px 32px;
}

.section-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kicker);
  margin-bottom: 10px;
}

.section-head {
  margin-bottom: 24px;
}

.section-head h2 {
  font-size: 32px;
  font-weight: 800;
}

.section-sub {
  margin-top: 9px;
  max-width: 660px;
  font-size: 15px;
  color: var(--text-600);
}

/* Tiêu đề có nút hành động nằm bên phải */
.section-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.section-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 11px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--card);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-900);
  transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.section-link:hover {
  border-color: var(--brand-500);
  color: var(--brand-600);
  transform: translateY(-1px);
}

/* ===== 4. Nút ============================================================ */
.btn-solid,
.btn-outline,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    border-color 0.18s ease, background 0.18s ease;
}

.btn-solid {
  background: var(--brand-grad);
  color: #fff;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
}

.btn-solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.34);
}

.btn-outline {
  background: var(--card);
  color: var(--text-900);
  border: 1px solid var(--border);
}

.btn-outline:hover {
  transform: translateY(-2px);
  border-color: var(--brand-500);
  color: var(--brand-600);
}

.btn-ghost {
  padding: 12px 14px;
  color: var(--text-600);
}

.btn-ghost:hover {
  color: var(--brand-600);
}

.btn-lg {
  padding: 15px 28px;
  font-size: 16px;
}

.btn-block {
  display: flex;
  width: 100%;
}

/* ===== 5. Header ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid transparent;
  transition: background 0.22s ease, border-color 0.22s ease,
    box-shadow 0.22s ease;
}

/* Trạng thái sau khi cuộn > 40px, do home-extra.js gắn */
.site-header.is-stuck {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--border);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 76px;
}

/* --- Logo --- */
/* Dùng ẢNH LOGO CHÍNH THỨC /brand/vivoai-logo.png, giống hệt app và bản v2.
   Ảnh đã bao gồm sẵn tagline "AI Voice & Content Studio", nên KHÔNG viết thêm
   chữ hay tagline cạnh nó — /brand/official-logo.css ẩn cưỡng bức các phần tử
   đó và ghi rõ "Use transparent PNG only".
   Bề rộng do official-logo.css quy định (140px ở header/footer) bằng !important,
   nên ở đây chỉ lo căn chỉnh. */
.landing-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.landing-logo-img {
  height: auto;
  object-fit: contain;
}

/* --- Menu --- */
.header-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0 auto;
}

.header-nav a {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-600);
  padding: 6px 0;
  transition: color 0.18s ease;
}

.header-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-grad);
  transform: scaleX(0);
  transition: transform 0.22s ease;
}

.header-nav a:hover,
.header-nav a.is-active {
  color: var(--brand-600);
}

.header-nav a.is-active::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.header-actions .btn-solid {
  border-radius: 999px;
  padding: 11px 22px;
}

/* Drawer mobile: mặc định ẩn ở MỌI bề rộng. Nếu chỉ đặt display:none bên
   trong media query mobile thì khi người dùng mở menu rồi xoay ngang/phóng to
   qua desktop, nội dung drawer đã nhân bản sẽ đổ thẳng ra giữa trang. */
.mobile-drawer {
  display: none;
}

/* --- Hamburger (chỉ hiện ở mobile) --- */
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  align-items: center;
  justify-content: center;
  flex: none;
}

.nav-toggle span {
  display: block;
  position: relative;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--text-900);
  transition: background 0.2s ease;
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--text-900);
  transition: transform 0.24s ease;
}

.nav-toggle span::before {
  top: -6px;
}

.nav-toggle span::after {
  top: 6px;
}

.nav-open .nav-toggle span {
  background: transparent;
}

.nav-open .nav-toggle span::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-open .nav-toggle span::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* ===== 6. Hero =========================================================== */
.hero {
  position: relative;
  padding: 44px 0 44px;
  background: var(--bg-hero);
  overflow: hidden;
}

/* Blob gradient mờ ở góc trái và rìa phải */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

.hero::before {
  top: -120px;
  left: -140px;
  width: 460px;
  height: 460px;
  background: radial-gradient(
    circle,
    rgba(139, 92, 246, 0.34) 0%,
    rgba(139, 92, 246, 0) 70%
  );
}

.hero::after {
  top: 120px;
  right: -180px;
  width: 520px;
  height: 520px;
  background: radial-gradient(
    circle,
    rgba(59, 130, 246, 0.26) 0%,
    rgba(59, 130, 246, 0) 70%
  );
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 52fr 48fr;
  align-items: center;
  gap: 56px;
}

/* --- Cột trái --- */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow-card);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-900);
}

.hero h1 {
  margin: 18px 0 0;
  /* 44px: cỡ lớn nhất còn ngắt đúng 3 dòng như mock ở 1440px */
  font-size: 56px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.028em;
  max-width: 700px;
}

.hero h1 .accent {
  color: var(--brand-600);
}

.hero-sub {
  margin-top: 15px;
  max-width: 520px;
  font-size: 16.5px;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

/* --- Hàng 3 stat --- */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  margin-top: 30px;
}

.hero-stats > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-stats svg {
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--brand-600);
}

.hero-stats .hero-stat-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.hero-stats strong {
  font-size: 21px;
  font-weight: 800;
  color: var(--text-900);
}

.hero-stats span {
  font-size: 12.5px;
  color: var(--text-400);
}

/* ===== 7. Hero — mockup "VivoAI Studio" (thuần HTML/CSS) ================= */
.hero-visual {
  position: relative;
  z-index: 1;
  /* Chừa chỗ phía trên cho ghi chú viết tay, phía phải cho 4 chip nổi */
  padding: 40px 126px 0 0;
}

.studio {
  position: relative;
  z-index: 2;
  border-radius: 20px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-hero);
}

/* --- Title bar tối --- */
.studio-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: #1e293b;
}

.studio-dots {
  display: flex;
  gap: 6px;
}

.studio-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #64748b;
}

.studio-dots i:nth-child(1) {
  background: #f87171;
}
.studio-dots i:nth-child(2) {
  background: #fbbf24;
}
.studio-dots i:nth-child(3) {
  background: #4ade80;
}

.studio-title {
  font-size: 12.5px;
  font-weight: 600;
  color: #e2e8f0;
}

.studio-status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #94a3b8;
}

.studio-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
}

/* --- Thân --- */
.studio-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.studio-label {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-400);
  margin-bottom: 6px;
}

.studio-field {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fbfcff;
  font-size: 12px;
  color: var(--text-600);
}

.studio-field strong {
  color: var(--text-900);
  font-weight: 700;
}

.studio-field p + p {
  margin-top: 5px;
  color: var(--text-400);
}

/* --- Hàng chọn giọng + credit --- */
.studio-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.studio-chips {
  display: flex;
  gap: 6px;
}

.studio-chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-600);
}

.studio-chip.is-active {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
}

.studio-progress {
  height: 7px;
  border-radius: 999px;
  background: var(--brand-100);
  overflow: hidden;
}

.studio-progress i {
  display: block;
  height: 100%;
  /* 1.240/5.000 = 24,8% - phải khớp con số ghi bên dưới. */
  width: 25%;
  border-radius: 999px;
  background: var(--brand-grad);
}

.studio-credit {
  margin-top: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-900);
  text-align: right;
}

/* --- Waveform + nút Tạo MP3 --- */
.studio-wave-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.studio-wave {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 34px;
  overflow: hidden;
}

.studio-wave i {
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  background: var(--brand-500);
  transform-origin: center;
  animation: studio-bar 1.25s ease-in-out infinite;
}

@keyframes studio-bar {
  0%,
  100% {
    height: 22%;
  }
  50% {
    height: 92%;
  }
}

.studio-btn {
  flex: none;
  padding: 9px 18px;
  border-radius: 12px;
  background: var(--brand-600);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

/* --- Dòng file --- */
.studio-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 11.5px;
  color: var(--text-600);
}

.studio-file svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--text-400);
}

.studio-file .studio-dl {
  margin-left: auto;
  font-weight: 600;
  color: var(--brand-600);
}

/* --- 4 chip nổi bên phải khung --- */
.studio-tags {
  position: absolute;
  top: 78px;
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.studio-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px 9px 9px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-900);
  white-space: nowrap;
}

.studio-tag i {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 8px;
  display: grid;
  place-items: center;
}

.studio-tag svg {
  width: 13px;
  height: 13px;
  color: #fff;
}

.studio-tag--purple i {
  background: #1e40af;
}
.studio-tag--blue i {
  background: #3b82f6;
}
.studio-tag--green i {
  background: #3b82f6;
}
.studio-tag--orange i {
  background: #60a5fa;
}

/* Lệch so le cho giống mock */
.studio-tag:nth-child(2) {
  margin-left: 26px;
}
.studio-tag:nth-child(3) {
  margin-left: 10px;
}
.studio-tag:nth-child(4) {
  margin-left: 30px;
}

/* --- Ghi chú viết tay + mũi tên --- */
.hero-note {
  position: absolute;
  top: -14px;
  right: -6px;
  z-index: 4;
  width: 138px;
  text-align: center;
  pointer-events: none;
}

.hero-note span {
  display: block;
  font-family: "Segoe Script", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--text-600);
}

.hero-note svg {
  width: 46px;
  height: 40px;
  margin: 4px auto 0;
  color: var(--brand-500);
}

/* ===== 8. Responsive — header & hero ===================================== */
@media (max-width: 1279px) {
  :root {
    --section-y: 40px;
  }

  .hero h1 {
    font-size: 42px;
  }

  .hero-grid {
    gap: 36px;
  }

  .studio-tags {
    right: -34px;
  }

  .studio-tag {
    font-size: 11.5px;
    padding: 8px 12px 8px 8px;
  }
}

@media (max-width: 899px) {
  /* Hero xuống 1 cột sớm hơn mốc mobile: ở 768px cột phải chỉ còn ~219px
     sau khi trừ gutter cho chip nổi, quá chật để đọc. */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .hero-visual {
    padding: 34px 110px 0 0;
    max-width: 560px;
  }

  .hero h1 {
    font-size: 38px;
  }

  .header-nav,
  .header-actions {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }

  /* Drawer mobile */
  .mobile-drawer {
    position: fixed;
    inset: 76px 0 auto;
    z-index: 55;
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 16px 24px 24px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  }

  .nav-open .mobile-drawer {
    display: flex;
  }

  .mobile-drawer a {
    padding: 13px 4px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-600);
    border-bottom: 1px solid var(--border);
  }

  .mobile-drawer .drawer-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
  }

  .mobile-drawer .drawer-actions a {
    border-bottom: 0;
    padding: 13px 20px;
  }
}

@media (max-width: 767px) {
  :root {
    --section-y: 30px;
  }

  .container {
    padding: 0 16px;
  }

  .section-panel {
    padding: 24px 18px 26px;
    border-radius: 20px;
  }

  .section-head h2,
  .section-head--row h2 {
    font-size: 25px;
  }

  .hero {
    padding: 26px 0 30px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .hero h1 {
    font-size: 33px;
  }

  .hero-sub {
    font-size: 15.5px;
  }

  .hero-actions .btn-lg {
    flex: 1 1 100%;
  }

  .hero-stats {
    gap: 22px;
  }

  .hero-stats > div {
    flex: 1 1 40%;
  }

  /* Ở mobile các chip nổi và ghi chú viết tay gây tràn ngang — ẩn đi */
  .studio-tags,
  .hero-note {
    display: none;
  }

  .studio-row {
    grid-template-columns: 1fr;
  }
}

/* ===== 9. Tôn trọng prefers-reduced-motion ============================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ===== 10. Hiệu ứng hiện dần khi cuộn tới ============================== */
.will-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.will-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* ===== 11. Bộ công cụ ================================================== */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 54px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.tool-card:hover {
  transform: translateY(-3px);
  border-color: #d7e1fb;
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.12);
}

.tool-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--brand-050);
  color: var(--brand-600);
  margin-bottom: 13px;
}

.tool-icon svg {
  width: 22px;
  height: 22px;
}

.tool-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}

.tool-card p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-600);
}

/* Nút tròn ▶ ở góc phải dưới */
.tool-play {
  position: absolute;
  right: 18px;
  bottom: 14px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-600);
  color: #fff;
  font-size: 11px;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.3);
  transition: transform 0.18s ease, background 0.18s ease;
}

.tool-play:hover {
  transform: scale(1.08);
  background: var(--brand-500);
}

/* ===== 12. Cách hoạt động ============================================== */
.how-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: 8px;
}

.how-step {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 0 8px;
}

.how-icon {
  position: relative;
  width: 74px;
  height: 74px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-050);
  color: var(--brand-600);
}

.how-icon svg {
  width: 30px;
  height: 30px;
}

/* Badge số thứ tự ở góc trên phải vòng tròn */
.how-num {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-grad);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border: 2px solid var(--card);
}

.how-step h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 6px 0 5px;
}

.how-step p {
  font-size: 14px;
  line-height: 1.65;
}

/* Mũi tên › nhạt giữa các bước */
.how-line {
  align-self: center;
  margin-top: 14px;
  font-size: 26px;
  line-height: 1;
  color: #cbd5e1;
  user-select: none;
}

/* ===== 13. Giọng nói =================================================== */
.voices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.voice-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.voice-card:hover {
  border-color: #d7e1fb;
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.1);
}

/* Avatar chữ cái đầu — đúng pattern .voicelib-avatar của app web /
   Android / Desktop: chữ cái đầu tên + nền pastel theo hue suy ra từ mã
   giọng (app/app.js: voiceAvatarHue). Không dùng ảnh chân dung người thật. */
.voice-avatar {
  position: relative;
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  /* Nền + chữ viết tắt là lớp DỰ PHÒNG, nằm dưới ảnh. Giọng nào chưa có ảnh
     chân dung, hoặc ảnh lỗi, thì vẫn ra avatar chữ cái như trước. */
  background: hsl(var(--vh, 220) 46% 94%);
  color: hsl(var(--vh, 220) 42% 38%);
}

/* Ảnh chân dung nguồn là 400x400 VUÔNG, ô avatar cũng vuông — nên object-fit
   cover sẽ không cắt gì cả, cả vai lọt vào và mặt bé tí trong vòng tròn 48px.
   Vì vậy phóng ảnh lên 165%: đầu chiếm ~50% đường kính vòng tròn thay vì 44%.
   Tâm khuôn mặt trong 6 ảnh này nằm ở ~44% chiều cao ảnh; với ảnh cao 79px
   trong ô 48px thì tâm mặt rơi ở 34.8px, nên dịch lên -22.5% (-10.8px) để đưa
   về đúng 24px — chính giữa vòng tròn.
   left -32.5% = (165-100)/2, canh giữa theo chiều ngang. */
.voice-avatar__img {
  position: absolute;
  /* Phải gỡ max-width:100% của phần reset ảnh — nếu không, bề rộng bị ghim lại
     48px trong khi chiều cao vẫn 165%, ảnh biến thành dải dọc và lệch hẳn sang
     trái. Đây đúng là lỗi quan sát được ở lần thử đầu. */
  max-width: none;
  width: 165%;
  height: 165%;
  left: -32.5%;
  top: -22.5%;
  object-fit: cover;
  display: block;
}

.voice-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.voice-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-900);
}

.voice-meta {
  font-size: 12.5px;
  color: var(--text-400);
}

.voice-provider {
  align-self: flex-start;
  margin-top: 3px;
  padding: 3px 9px;
  border-radius: 8px;
  background: var(--brand-050);
  color: var(--brand-600);
  font-size: 10.5px;
  font-weight: 700;
}

.voice-provider:empty {
  display: none;
}

.voice-play {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-050);
  color: var(--brand-600);
  font-size: 12px;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.voice-play:hover:not(:disabled) {
  background: var(--brand-600);
  color: #fff;
  transform: scale(1.07);
}

.voice-play.is-playing {
  background: var(--brand-600);
  color: #fff;
}

.voice-play:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ===== 14. Responsive — sections 4/5/6 ================================= */
@media (max-width: 1100px) {
  .tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .voices-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Ba bước xếp dọc, bỏ mũi tên ngang */
  .how-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .how-line {
    display: none;
  }
}

@media (max-width: 767px) {
  .tools-grid,
  .voices-grid {
    grid-template-columns: 1fr;
  }

  .how-icon {
    width: 62px;
    height: 62px;
  }

  .how-icon svg {
    width: 26px;
    height: 26px;
  }
}

/* ===== 15. Bảng giá =================================================== */
/* Không có toggle tháng/năm: hệ thống chưa có cấu hình giảm giá theo năm,
   nên chỉ hiển thị đúng giá tháng. */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  /* stretch để 3 card luôn bằng chiều cao nhau dù danh sách dài ngắn khác. */
  align-items: stretch;
  /* chừa chỗ cho badge nhô lên khỏi cạnh trên card Creator. */
  padding-top: 16px;
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: visible;
}

/* Gói khuyến dùng: viền xanh 2px, shadow xanh, nhô lên nhẹ */
.price-card--featured {
  border: 2px solid var(--brand-600);
  box-shadow: 0 18px 44px rgba(37, 99, 235, 0.18);
  /* Bỏ scale(1.035): nó làm card Creator cao hơn hai card kia đúng 3,5%
     (382 vs 369px) nên ba card không bao giờ bằng nhau được. Sự nổi bật đã đủ
     nhờ viền 2px + đổ bóng xanh + badge. */
  z-index: 1;
}

.price-badge {
  /* Trước đây badge đặt top:0 rồi kéo lên 50% nên nó nằm ĐÈ lên viền 2px của
     card, trông như bị viền cắt ngang. Nay đẩy hẳn lên phía trên cạnh card. */
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 18px;
  border-radius: 999px;
  background: var(--brand-grad);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.32);
}

.price-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-600);
}

.price-amount {
  margin-top: 9px;
  font-size: 32px;
  font-weight: 800;
  color: var(--text-900);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.price-amount small {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-400);
  letter-spacing: 0;
}

.price-credit {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--text-400);
}

.price-card ul {
  margin: 16px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.price-card li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-600);
}

.price-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #16a34a;
  font-weight: 700;
}

/* Nút CTA luôn nằm sát đáy dù danh sách tính năng dài ngắn khác nhau */
.price-card .btn-solid,
.price-card .btn-outline {
  margin-top: auto;
}

/* ===== 16. FAQ ========================================================= */
/* Mock v3 không vẽ khối này, nhưng site đang có nội dung FAQ do CMS quản và
   footer có link trỏ tới #faq — nên giữ lại, style theo v3. */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 860px;
}

.cms-faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.cms-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 22px;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-900);
}

.cms-faq-question b {
  flex: none;
  font-size: 19px;
  font-weight: 400;
  color: var(--brand-600);
  transition: transform 0.22s ease;
}

.cms-faq-item.is-open .cms-faq-question b {
  transform: rotate(45deg);
}

.cms-faq-answer {
  display: none;
  padding: 0 22px 19px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-600);
}

.cms-faq-item.is-open .cms-faq-answer {
  display: block;
}

/* ===== 17. Kiến thức & Giải đáp ======================================== */
.landing-answers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.landing-answer-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.landing-answer-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.13);
}

/* Ảnh thumbnail tỉ lệ 16:10 */
.landing-answer-cover {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--brand-050);
  overflow: hidden;
}

.landing-answer-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.landing-answer-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, #e5edff 0%, #f4f7ff 100%);
  font-size: 12px;
  color: var(--text-400);
}

.landing-answer-placeholder-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--brand-600);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.landing-answer-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 13px 16px 14px;
}

.landing-answer-category {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* #D97706 chỉ đạt 3,2:1; #B45309 đạt 5,1:1 mà vẫn là cam đúng tinh thần mock */
  color: #b45309;
  margin-bottom: 6px;
}

.landing-answer-card h3 {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 10px;
}

.landing-answer-card h3 a:hover {
  color: var(--brand-600);
}

/* Mock chỉ có tiêu đề + ngày + "Đọc bài", không có đoạn tóm tắt */
.landing-answer-body > p {
  display: none;
}

.landing-answer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 9px;
  font-size: 12.5px;
  color: var(--text-400);
}

.landing-answer-meta a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  color: var(--brand-600);
}

.landing-answers-loading,
.landing-answers-empty {
  grid-column: 1 / -1;
  padding: 40px 0;
  text-align: center;
  font-size: 14px;
  color: var(--text-400);
}

.landing-answers-empty a {
  color: var(--brand-600);
  font-weight: 600;
}

/* ===== 18. Footer ====================================================== */
.site-footer {
  margin-top: 24px;
  background: #eef2fb;
  border-top: 1px solid var(--border);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr auto;
  gap: 40px;
  padding-top: 34px;
  padding-bottom: 28px;
}

.footer-brand .landing-logo {
  margin-bottom: 14px;
}

.footer-brand p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-600);
  max-width: 230px;
}

.footer-links {
  display: contents;
}

.footer-links > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-400);
  margin-bottom: 2px;
}

.footer-links a {
  font-size: 13.5px;
  color: var(--text-600);
  transition: color 0.18s ease;
}

.footer-links a:hover {
  color: var(--brand-600);
}

.footer-social {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.footer-social a {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--text-600);
  transition: color 0.18s ease, background 0.18s ease;
}

.footer-social a:hover {
  background: #fff;
  color: var(--brand-600);
}

.footer-social svg {
  width: 19px;
  height: 19px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 18px;
  border-top: 1px solid #dfe6f5;
  font-size: 12.5px;
  color: var(--text-400);
}

/* ===== 19. Responsive — sections 7/8/9 ================================= */
@media (max-width: 1100px) {
  .landing-answers-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-inner {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-social {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  /* Bỏ scale để card khuyến dùng không tràn khi xếp dọc */
  .price-card--featured {
    transform: none;
  }
}

@media (max-width: 767px) {
  .landing-answers-grid {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 26px;
    padding-top: 36px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ===== 20. Widget dùng chung do home.js dựng ===========================
   Sticker khuyến mãi, nút liên hệ nổi, ảnh CMS. Port nguyên từ home.css
   bản v2 (home.css.bak.*) vì home.js vẫn tạo các phần tử này. */
.hidden { display: none !important; }

@keyframes promoFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes promoSwing {
  0%, 100% { transform: rotate(-2.5deg); }
  50% { transform: rotate(2.5deg); }
}
.promo-sticker.hidden { display: none !important; }

/* ===== STICKER KHUYẾN MÃI (cam, to hơn, mờ trong suốt, lắc như treo trên móc) ===== */
.promo-sticker {
  position: fixed; bottom: 40px; right: 30px; z-index: 200; max-width: 380px;
  background: linear-gradient(135deg, rgba(255,140,26,.88) 0%, rgba(255,94,0,.88) 100%);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff; border-radius: 20px; padding: 22px 24px 20px; box-shadow: 0 20px 50px rgba(255,94,0,.4);
  border: 1px solid rgba(255,255,255,.25);
  display: flex; flex-direction: column; gap: 14px;
  transform-origin: top center;
  animation: promoFadeIn .3s ease, promoSwing 2.8s ease-in-out infinite;
}
.promo-sticker::before {
  content: ""; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  width: 2px; height: 14px; background: rgba(255,255,255,.6);
}
.promo-sticker::after {
  content: ""; position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.85);
  box-shadow: 0 0 0 2px rgba(255,94,0,.3);
}
.promo-sticker #promoStickerClose {
  position: absolute; top: 10px; right: 12px; background: none; border: none; color: rgba(255,255,255,.85);
  font-size: 15px; cursor: pointer; padding: 4px;
}
.promo-sticker #promoStickerText { font-size: 16px; font-weight: 700; line-height: 1.45; padding-right: 16px; }
.promo-sticker-cta {
  display: inline-block; background: #fff; color: #FF5E00; font-weight: 800; font-size: 14.5px;
  padding: 11px 18px; border-radius: 12px; text-align: center; text-decoration: none;
}
.promo-sticker-cta:hover { background: #FFF3E8; }

.promo-pos-bottom-right { bottom: 60px; right: 60px; top: auto; left: auto; }
.promo-pos-bottom-left { bottom: 60px; left: 60px; top: auto; right: auto; }
.promo-pos-top-left { top: 60px; left: 60px; bottom: auto; right: auto; }
.promo-pos-top-right { top: 60px; right: 60px; bottom: auto; left: auto; }
.promo-pos-top-center { top: 60px; left: calc(50% - 190px); bottom: auto; right: auto; }
@media (max-width: 600px) {
  .promo-pos-top-center { left: 16px; right: 16px; }
}
.promo-pos-center {
  top: 50%; left: 50%; bottom: auto; right: auto;
  translate: -50% -50%;
}
.promo-sticker.has-image.promo-pos-center #promoStickerImage,
.promo-sticker.has-image #promoStickerImage {
  max-width: 90vw; max-height: 85vh; width:auto; height: auto;
}
.promo-sticker.has-image {
  background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: none !important; box-shadow: none !important; padding: 0 !important; max-width: 300px;
}
.promo-sticker.has-image::before, .promo-sticker.has-image::after { display: none !important; }
.promo-sticker.has-image .promo-sticker-cta,
.promo-sticker.has-image #promoStickerText {
  display: none !important; visibility: hidden !important;
}
.promo-sticker.has-image #promoStickerClose {
  top: -6px; right: -6px; background: #fff; border-radius: 50%; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.25);
  color: #333; font-size: 12px; z-index: 10;
}
.promo-sticker.has-image #promoStickerImageLink { position: relative; z-index: 1; }
@media (max-width: 600px) {
  .promo-sticker { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}
.cms-hero-image {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .14);
}
.cms-tool-image {
  display: block;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  object-fit: cover;
  border-radius: 20px;
}
/* Cụm nút liên hệ nổi.
   TRƯỚC: ghim cứng left:18px; top:50%. Trên màn 390px nó đè lên H1 và đoạn mô
   tả của hero — lỗi người dùng báo. Đồng thời CMS đã ghi contact.position =
   "right-middle" mà renderContact bỏ qua hoàn toàn trường đó.
   NAY: vị trí do lớp .vivo-pos--* quyết định, renderContact gắn lớp theo đúng
   contact.position. Mặc định right-middle, khớp dữ liệu CMS thật, nên kể cả
   khi JS chưa chạy hay CMS không tải được thì cũng đã đúng chỗ. */
#vivoFloatingContacts {
  position: fixed;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9999;
}

#vivoFloatingContacts.vivo-pos--left-middle {
  left: 18px;
  right: auto;
}

#vivoFloatingContacts.vivo-pos--right-middle {
  right: 18px;
  left: auto;
}

#vivoFloatingContacts.vivo-pos--left-bottom,
#vivoFloatingContacts.vivo-pos--right-bottom {
  top: auto;
  bottom: 18px;
  transform: none;
}

#vivoFloatingContacts.vivo-pos--left-bottom {
  left: 18px;
  right: auto;
}

#vivoFloatingContacts.vivo-pos--right-bottom {
  right: 18px;
  left: auto;
}
.vivo-contact-tooltip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);

  min-width: max-content;
  max-width: 240px;
  padding: 7px 10px;
  border-radius: 8px;

  background: #17203a;
  color: #fff;

  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.2;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  box-shadow: 0 9px 24px rgba(15,23,42,.18);

  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility .18s ease;
}
.vivo-contact-tooltip::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #17203a;
}
.vivo-contact-tooltip {
  left: auto !important;
  right: calc(100% + 10px) !important;
  transform: translateY(-50%) translateX(4px) !important;
}
.vivo-contact-tooltip::before {
  right: auto !important;
  left: 100% !important;
  border-right-color: transparent !important;
  border-left-color: #17203a !important;
}

@media (max-width: 600px) {
  #vivoFloatingContacts { gap: 9px; }
  #vivoFloatingContacts.vivo-pos--left-middle,
  #vivoFloatingContacts.vivo-pos--left-bottom { left: 10px; }
  #vivoFloatingContacts.vivo-pos--right-middle,
  #vivoFloatingContacts.vivo-pos--right-bottom,
  #vivoFloatingContacts { right: 10px; }
  #vivoFloatingContacts.vivo-pos--left-middle,
  #vivoFloatingContacts.vivo-pos--left-bottom { right: auto; }
}

/* ===== 21. Màn hình rộng ================================================
   Mock dựng cho 1440px, container 1180px chiếm 82% bề ngang — vừa mắt.
   Nhưng trên màn 1920px CSS (rất phổ biến: Full HD ở mức phóng 100%, hoặc
   2K ở mức 125%) thì 1180px chỉ còn chiếm 61%, hai bên trống 370px mỗi bên
   và toàn trang trông bé tí. Nới container và cỡ chữ theo bậc để lấp đầy.
   Ở bậc trên cùng, H1 đạt 54px — đúng mức ~52px brief đề ra ban đầu. */
@media (min-width: 1600px) {
  :root {
    --container: 1400px;
    --section-y: 58px;
  }

  .hero h1 {
    font-size: 60px;
    max-width: 760px;
  }

  .section-head h2 {
    font-size: 35px;
  }

  .hero-sub {
    font-size: 17.5px;
    max-width: 570px;
  }
}

@media (min-width: 1900px) {
  :root {
    --container: 1560px;
    --section-y: 64px;
  }

  .hero {
    padding: 56px 0 50px;
  }

  .hero h1 {
    font-size: 64px;
    max-width: 820px;
  }

  .section-head h2 {
    font-size: 38px;
  }

  .hero-sub {
    font-size: 18px;
    max-width: 600px;
  }

  .tool-card h3,
  .how-step h3 {
    font-size: 18.5px;
  }

  .tool-card p,
  .how-step p {
    font-size: 15px;
  }

  .voice-name {
    font-size: 15.5px;
  }

  .price-amount {
    font-size: 35px;
  }

  .landing-answer-card h3 {
    font-size: 16px;
  }
}

/* Tooltip mặc định mở sang TRÁI của nút (hợp với cụm nằm bên phải — mặc định).
   Khi CMS đặt cụm sang bên trái thì lật tooltip sang phải, nếu không nó sẽ
   chạy ra ngoài mép màn hình. */
.vivo-pos--left-middle .vivo-contact-tooltip,
.vivo-pos--left-bottom .vivo-contact-tooltip {
  right: auto !important;
  left: calc(100% + 10px) !important;
  transform: translateY(-50%) translateX(-4px) !important;
}

.vivo-pos--left-middle .vivo-contact-fab:hover .vivo-contact-tooltip,
.vivo-pos--left-bottom 
.vivo-pos--left-middle .vivo-contact-tooltip::before,
.vivo-pos--left-bottom .vivo-contact-tooltip::before {
  left: auto !important;
  right: 100% !important;
  border-left-color: transparent !important;
  border-right-color: #17203a !important;
}

/* Từ 899px trở xuống, hero xuống 1 cột nên nội dung trải gần hết bề ngang.
   Cụm nút liên hệ neo giữa theo chiều dọc sẽ đè lên chữ (390px) hoặc lên nút
   CTA (768px) — đã đo được cả hai. Nên ở dải này bỏ qua phần "middle" của
   contact.position và hạ cụm xuống ĐÁY, chỗ duy nhất không tranh chấp nội dung.
   Trái/phải vẫn tôn trọng CMS. Trên 899px giữ nguyên đúng contact.position. */
@media (max-width: 899px) {
  #vivoFloatingContacts,
  #vivoFloatingContacts.vivo-pos--left-middle,
  #vivoFloatingContacts.vivo-pos--right-middle,
  #vivoFloatingContacts.vivo-pos--left-bottom,
  #vivoFloatingContacts.vivo-pos--right-bottom {
    top: auto;
    bottom: 16px;
    transform: none;
  }
}

/* ===== 22. Cụm liên hệ nổi: một nút trung tính, menu mở khi hover =========
   Trước đây là 4 nút tròn 4 màu (xanh lá / xanh Zalo / xanh Messenger / cam)
   luôn hiện, xếp dọc cao ~220px - vừa chiếm chỗ vừa lệch hẳn khỏi bảng màu
   xanh của trang. Nay chỉ còn một nút trung tính; 4 kênh nằm trong menu.
   Vị trí vẫn do .vivo-pos--* quyết định theo contact.position của CMS. */
.vivo-contact-nut {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-grad);
  color: #fff;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.32);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.vivo-contact-nut svg {
  width: 24px;
  height: 24px;
}

.vivo-contact-nut:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.4);
}

/* Menu neo vào nút. Dùng visibility chứ không display:none để còn chuyển động
   được, và để trình đọc màn hình bỏ qua khi đang đóng. */
.vivo-contact-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  /* Khối bao của menu là chính cái nút, chỉ rộng 52px. Nếu để min-width thì
     chiều rộng bị ghim ở sàn đó và KHÔNG nở theo nội dung: chữ nowrap dài hơn
     sẽ tràn khỏi hộp rồi bị body{overflow-x:hidden} cắt cụt.
     width:max-content cho hộp ôm đúng nội dung; max-width chặn để không bao
     giờ rộng quá khung nhìn ở bất kỳ độ rộng nào. */
  width: max-content;
  max-width: calc(100vw - 32px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.dang-mo .vivo-contact-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Cụm nằm bên trái thì menu mở sang trái cho khỏi tràn mép màn hình. */
.vivo-pos--left-middle .vivo-contact-menu,
.vivo-pos--left-bottom .vivo-contact-menu {
  right: auto;
  left: 0;
}

/* Cụm neo giữa màn: menu mở ngang thay vì lên trên, tránh chạm mép. */
.vivo-pos--left-middle .vivo-contact-menu,
.vivo-pos--right-middle .vivo-contact-menu {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
}

.vivo-pos--right-middle .vivo-contact-menu {
  right: calc(100% + 10px);
  left: auto;
  transform: translateY(-50%) translateX(6px);
}

.vivo-pos--left-middle .vivo-contact-menu {
  left: calc(100% + 10px);
  right: auto;
  transform: translateY(-50%) translateX(-6px);
}

.dang-mo.vivo-pos--left-middle .vivo-contact-menu,
.dang-mo.vivo-pos--right-middle .vivo-contact-menu {
  transform: translateY(-50%);
}

.vivo-contact-muc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-900);
  /* Bỏ nowrap: khi max-width chặn lại thì chữ phải xuống dòng TRONG hộp,
     chứ không được tràn ra ngoài rồi bị cắt. */
  white-space: normal;
  transition: background 0.16s ease, color 0.16s ease;
}

.vivo-contact-muc:hover {
  background: var(--brand-050);
  color: var(--brand-600);
}

.vivo-contact-muc svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--brand-600);
}

/* Chữ "Zalo" thay cho icon - Zalo không có ký hiệu đơn sắc dùng được. */
.vivo-zalo-word {
  width: 18px;
  flex: none;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--brand-600);
  text-align: center;
}

/* Màn hẹp: menu luôn mở LÊN TRÊN và neo theo cạnh phải của nút.
   Mở ngang ở đây rất dễ chạm mép: cụm nút cách mép chỉ 10px, menu mở sang
   ngang sẽ ăn gần hết bề ngang màn hình. Mở lên trên thì bề ngang chỉ còn bị
   chặn bởi max-width, luôn nằm gọn. */
@media (max-width: 899px) {
  #vivoFloatingContacts .vivo-contact-menu,
  .vivo-pos--left-middle .vivo-contact-menu,
  .vivo-pos--right-middle .vivo-contact-menu,
  .vivo-pos--left-bottom .vivo-contact-menu,
  .vivo-pos--right-bottom .vivo-contact-menu {
    top: auto;
    bottom: calc(100% + 10px);
    right: 0;
    left: auto;
    transform: translateY(6px);
  }

  .dang-mo .vivo-contact-menu {
    transform: none;
  }

  /* Cụm nằm bên trái thì neo mép trái cho khỏi chạm mép phải. */
  .vivo-pos--left-middle .vivo-contact-menu,
  .vivo-pos--left-bottom .vivo-contact-menu {
    right: auto;
    left: 0;
  }
}

/* ===== 23. Tải app ======================================================
   Ba nền tảng đều CHƯA phát hành: Windows chưa có chứng chỉ ký số và chưa
   host file công khai, Android mới có bản debug chưa ký release, iOS chưa
   bắt đầu. Nên không có link tải nào, chỉ nút đang tắt.
   Phong cách bám theo .btn--off đã dùng cho "Nhân bản giọng nói" trong app:
   nút xám trung tính chứ không phải nút chính màu xanh, và giữ opacity:1 để
   chữ không bị làm mờ mất tương phản. */
.taiapp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Nền xanh brand đậm. Chọn #1e40af chứ không dùng --brand-grad: đầu nhạt của
   gradient là #3b82f6, chữ trắng trên đó chỉ đạt 3,67:1 - trượt AA. Trên
   #1e40af chữ trắng đạt 8,73:1, dư ngưỡng để cả chữ phụ mờ bớt vẫn đạt. */
.taiapp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 22px 22px;
  background: #1e40af;
  border: 1px solid #1e40af;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 28px rgba(30, 64, 175, 0.28);
  color: #fff;
}

.taiapp-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  margin-bottom: 14px;
}

.taiapp-icon svg {
  width: 26px;
  height: 26px;
}

.taiapp-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}

.taiapp-card p {
  margin-top: 5px;
  margin-bottom: 16px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.78);
}

/* Nút đang tắt. Cùng logic với .btn--off của app: opacity:1 để :disabled
   không làm mờ khiến tương phản tụt xuống, và nền nói "chưa bấm được" nên
   không cần thêm badge "Sắp ra mắt" kẻo hai tín hiệu giẫm chân nhau.
   Trên nền xanh đậm thì dùng lớp trắng mờ thay cho xám - cùng cách app xử lý
   mặt thẻ tối (.stat-card--gold dùng rgba(255,255,255,.12) cho ô icon). */
.btn-off {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 12px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  opacity: 1;
  cursor: not-allowed;
  box-shadow: none;
}

@media (max-width: 900px) {
  .taiapp-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .taiapp-card {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 14px;
    padding: 16px 18px;
  }

  .taiapp-icon {
    margin-bottom: 0;
    flex: none;
  }

  .taiapp-card p {
    margin-bottom: 0;
  }

  .taiapp-card .taiapp-info {
    flex: 1;
    min-width: 0;
  }

  .btn-off {
    width: auto;
    margin-top: 0;
    flex: none;
    padding: 10px 16px;
    font-size: 14px;
  }
}


/* =========================================================================
   ██  NÚT TẢI APP ĐANG BẬT + NHÃN BETA — 11/09/2026  ██
   .btn-off (nút đang tắt) đã có sẵn ở trên. Đây là biến thể BẬT cho thẻ
   Windows, giữ đúng hình hộp để ba thẻ không so le nhau.
   ========================================================================= */
.btn-on {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding: 12px 22px;
  border: 1px solid #fff;
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--brand-600);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-on:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.18); }

.taiapp-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  vertical-align: middle;
}

/* =========================================================================
   24. SỬA BỐ CỤC MOBILE
   Đo ở 360/390/412/768/1024 ngày 13/09/2026. Ghi lại nguyên nhân để lần sau
   không ai vô tình dựng lại đúng cái bẫy này.
   ========================================================================= */

/* --- 24a. Lưới không được phép rộng hơn khung chứa -----------------------
   Đây là gốc của lỗi nặng nhất. `grid-template-columns: 1fr` thực chất là
   minmax(auto, 1fr), mà cạnh `auto` lấy theo MIN-CONTENT của ô. Ở 360px, ô
   .hero-visual có min-content = .studio 241px + padding-right 110px = 351px,
   trong khi hộp nội dung chỉ 313px -> track bị kéo rộng 351px và cả cột chữ
   tràn ra ngoài 22px, bị body{overflow-x:hidden} CẮT CỤT (H1, đoạn mô tả,
   hai nút, dòng stat đều mất chữ).
   min-width:0 gỡ sàn min-content đó, cho ô co lại đúng bề rộng khung. */
.hero-grid > *,
.tools-grid > *,
.voices-grid > *,
.pricing-grid > *,
.taiapp-grid > *,
.landing-answers-grid > *,
.how-grid > * {
  min-width: 0;
}

/* --- 24b. Chip nổi và ghi chú viết tay chỉ hiện khi đủ chỗ ---------------
   Trước đây chỉ ẩn dưới 767px, nên ở 1024px chúng vẫn hiện và thò ra ngoài
   khung 14px. Chúng là trang trí, không mang thông tin, nên ẩn hẳn dưới
   1100px - mốc mà cột phải mới thật sự đủ rộng để chứa. Gutter 110-126px
   dành cho chúng cũng phải biến mất theo, nếu không lại thành khoảng trống
   thừa ép hẹp khung Studio.
   Ngưỡng 1279px là đo ra chứ không chọn bừa: ở 1100/1120/1180/1200 chip đều
   thò ra NGOÀI .hero-visual 11-14px; tới 1280 mới nằm khít mép. 1280 cũng
   đúng là mốc desktop brief quy định. */
@media (max-width: 1279px) {
  .studio-tags,
  .hero-note {
    display: none;
  }

  .hero-visual {
    padding: 0;
    max-width: 560px;
  }
}

/* --- 24c. Số cột theo mốc mobile-first ----------------------------------
   Dưới 640px: 1 cột. 640-1024px: 2 cột. Trên 1024px: giữ nguyên desktop.
   Riêng hai khối CHỈ CÓ 3 THẺ (bảng giá, tải app) thì không chia 2 cột: 3
   thẻ xếp 2 cột luôn thừa ra một thẻ lẻ ở hàng dưới, nhìn tệ hơn xếp dọc.
   Hai khối đó giữ 1 cột tới 1024px rồi nhảy thẳng sang 3 cột. */
@media (max-width: 1024px) {
  .tools-grid,
  .voices-grid,
  .landing-answers-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing-grid,
  .taiapp-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 639px) {
  .tools-grid,
  .voices-grid,
  .landing-answers-grid,
  .pricing-grid,
  .taiapp-grid {
    grid-template-columns: 1fr;
  }
}

/* --- 24d. Nút "Tải về" trong khối Tải app ở mobile -----------------------
   Khối Tải app đổi sang bố cục HÀNG ở mobile (icon trái, chữ giữa, nút phải).
   Quy tắc cũ chỉ ghi đè .btn-off; khi .btn-on được thêm vào cho Windows thì
   nó vẫn giữ width:100% và margin-top:auto của bố cục CỘT, nên trong flex
   hàng nó chiếm 195px và bị đẩy xuống 84px, kéo thẻ Windows cao 168px so với
   86px của thẻ iOS. Đây là lý do 3 thẻ lệch nhau. */
@media (max-width: 1024px) {
  .taiapp-card .btn-on,
  .taiapp-card .btn-off {
    width: auto;
    margin-top: 0;
    flex: none;
    padding: 10px 16px;
    font-size: 14px;
    white-space: nowrap;
  }

  /* Cho cột chữ co được, nếu không tên dài lại đẩy nút ra ngoài. */
  .taiapp-card .taiapp-info {
    flex: 1;
    min-width: 0;
  }

  /* Ba thẻ cao bằng nhau dù mô tả dài ngắn khác nhau. */
  .taiapp-card {
    min-height: 84px;
  }

  /* Badge BETA không được đẩy tên nền tảng xuống dòng thứ hai. */
  .taiapp-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .taiapp-badge {
    margin-left: 0;
  }
}

/* --- 24e. Thẻ giọng nói cao bằng nhau ------------------------------------
   Tên giọng dài ngắn khác nhau ("Nữ miền Trung" vs "Nam quảng cáo miền Bắc")
   làm thẻ cao 103-126px xen kẽ, nhìn như xếp lệch. */
@media (max-width: 1024px) {
  .voice-card {
    min-height: 84px;
  }
}

/* --- 24f. Dưới 640px: cân chiều cao thẻ theo thẻ cao nhất ----------------
   Ở 360px mô tả xuống 2 dòng ("Điện thoại & máy tính bảng") trong khi
   "iPhone & iPad" chỉ 1 dòng, làm thẻ cao 129/125/86 - xếp dọc nhìn lệch
   bậc thang. Đặt min-height bằng thẻ cao nhất; nội dung đã căn giữa theo
   chiều dọc nên phần dôi ra chia đều hai phía, trông như chủ ý chứ không
   phải khoảng trống thừa. */
@media (max-width: 639px) {
  .taiapp-card {
    min-height: 128px;
  }

  .voice-card {
    min-height: 126px;
  }
}