/* Trang chủ AntiTask — các khối riêng của trang giới thiệu.
 *
 * Vì sao là tệp RIÊNG chứ không sửa thẳng styles.css: `styles.css` đang được
 * dùng chung bởi updates.html và cả ba trang /premium/. Viết đè lên đó là sửa
 * một tệp mà ba trang khác đang đứng lên. Tệp này chỉ nạp ở index.html, nên
 * hỏng cũng chỉ hỏng đúng trang chủ.
 *
 * Token màu, header, footer, .section, .eyebrow, .faq-list… vẫn lấy từ
 * styles.css — để trang chủ và trang Premium trông như một sản phẩm.
 */

/* ══ Ảnh chụp tự chuyển sáng ↔ tối ═══════════════════════════════════════════
 *
 * Hai ảnh cùng khung hình xếp chồng, bản tối mờ dần hiện lên rồi lui đi. Ảnh
 * chụp trong CÙNG một lượt (xem scripts/capture-site-shots.js) nên chỉ khác
 * màu — nếu dữ liệu lệch, mắt sẽ đọc thành giật hình chứ không phải đổi màu.
 *
 * Ba điều kiện bắt buộc, không phải tuỳ chọn:
 *  1. `prefers-reduced-motion` → đứng yên. Chuyển động lặp vô hạn gây khó chịu
 *     thật cho người nhạy cảm tiền đình, không phải chuyện thẩm mỹ.
 *  2. Ảnh thứ hai `loading="lazy"` — không tải gấp đôi dữ liệu ngay khi mở trang.
 *  3. Ảnh to là điểm bán hàng: khung ảnh chiếm phần lớn chiều ngang của khối.
 */
.shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1800 / 1125;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 20px;
  background: #eef2fa;
  box-shadow:
    0 2px 5px rgba(20, 38, 92, .06),
    0 18px 34px rgba(28, 52, 120, .14),
    0 44px 80px rgba(28, 52, 120, .16);
}
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }

/* Hero: ảnh tràn ra ngoài mép phải của khung nền để trông lớn hơn khổ thật —
   thủ pháp quen thuộc, và ở đây an toàn vì phần bị cắt là vùng trống bên phải
   của lưới lịch, không phải nội dung. */
.shot-hero { margin-right: -46px; }

.shot-dark {
  opacity: 0;
  animation: shot-swap 14s ease-in-out infinite;
  animation-delay: var(--shot-delay, 0s);
}

/* Lệch pha giữa các khối để cả trang không cùng chớp một nhịp — nhìn như đèn
   nhấp nháy chứ không như một sản phẩm đang đổi chủ đề. */
.shot-b { --shot-delay: 2.8s; }
.shot-c { --shot-delay: 5.6s; }
.shot-d { --shot-delay: 8.4s; }
.shot-e { --shot-delay: 11.2s; }

@keyframes shot-swap {
  0%, 34% { opacity: 0; }
  46%, 80% { opacity: 1; }
  92%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .shot-dark { animation: none; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) and (prefers-color-scheme: dark) {
  .shot-dark { opacity: 1; }
}

/* ══ Nút bấm ═════════════════════════════════════════════════════════════════
 *
 * Một khuôn nút duy nhất `.cta` cho mọi lời kêu gọi: icon bên trái, nhãn bên
 * phải, bóng đổ hai tầng. Hai tầng chứ không một: tầng gần tạo mép, tầng xa tạo
 * độ nổi — một tầng duy nhất cho ra vệt xám phẳng, nhìn như nút bị mờ.
 *
 * Trạng thái nhấn (`:active`) hạ nút xuống và thu bóng lại. Đây là thứ khiến
 * nút "có cảm giác bấm được": mắt thấy nó lún xuống dưới ngón tay.
 */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 13px 22px 13px 15px;
  border: 1px solid transparent;
  border-radius: 14px;
  font: 780 14.5px var(--sans);
  letter-spacing: -.2px;
  white-space: nowrap;
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), box-shadow .18s, background .18s, border-color .18s;
}
.cta:active { transform: translateY(1px) scale(.995); }
.cta:focus-visible { outline: 3px solid #b8c9ff; outline-offset: 3px; }
.cta-sm { padding: 8px 15px 8px 9px; border-radius: 11px; font-size: 12.5px; gap: 8px; }
.cta-sm .cta-mark { width: 25px; height: 25px; border-radius: 8px; }
.cta-sm .cta-mark svg { width: 15px; height: 15px; }

.cta-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #fff;
}
.cta-mark svg { width: 18px; height: 18px; display: block; }
.cta-mark.is-plain { background: rgba(255, 255, 255, .14); color: #fff; }
.cta-mark.is-store { background: #eaf0ff; color: #3a63d8; }

.cta-stack { display: block; }
.cta-stack b { display: block; font-size: 14px; font-weight: 780; letter-spacing: -.2px; }
.cta-stack small { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; opacity: .72; }
.cta-stacked { padding: 11px 20px 11px 13px; }

/* Nút chính — đăng nhập Google. Nền trắng, viền và bóng xanh: nút Google quen
   mắt là nút sáng, đổi sang nền tối thì người dùng phải đọc mới nhận ra. */
.cta-primary {
  border-color: #d7e0f7;
  background: #fff;
  color: #17224a;
  box-shadow: 0 2px 4px rgba(30, 52, 120, .06), 0 12px 24px rgba(46, 76, 168, .16);
}
.cta-primary:hover {
  transform: translateY(-2px);
  border-color: #b6c8f4;
  box-shadow: 0 4px 8px rgba(30, 52, 120, .08), 0 20px 34px rgba(46, 76, 168, .22);
}
.cta-primary .cta-mark { background: #f4f7ff; }

.cta-dark {
  background: linear-gradient(180deg, #1b2647, #0f1730);
  color: #fff;
  box-shadow: 0 2px 4px rgba(9, 17, 40, .18), 0 14px 26px rgba(9, 17, 40, .28);
}
.cta-dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 9px rgba(9, 17, 40, .22), 0 22px 38px rgba(9, 17, 40, .34);
}

.cta-store {
  border-color: #d9e1f0;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2px 4px rgba(30, 52, 120, .05), 0 10px 22px rgba(30, 52, 120, .1);
}
.cta-store:hover { transform: translateY(-2px); border-color: #a9bdec; box-shadow: 0 4px 8px rgba(30, 52, 120, .08), 0 18px 32px rgba(30, 52, 120, .16); }

.cta-light {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 3px 6px rgba(10, 20, 55, .1), 0 16px 30px rgba(10, 20, 55, .2);
}
.cta-light:hover { transform: translateY(-2px); box-shadow: 0 5px 10px rgba(10, 20, 55, .14), 0 24px 42px rgba(10, 20, 55, .26); }

.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 0; }

/* Nút phụ ở header — chỉ viền, có icon, không tranh chỗ với nút chính. */
.btn-ghost-icon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid #d9e1f0;
  border-radius: 11px;
  background: #fff;
  color: #35446a;
  font: 720 12.5px var(--sans);
  transition: border-color .18s, background .18s, transform .18s;
}
.btn-ghost-icon svg { width: 15px; height: 15px; }
.btn-ghost-icon:hover { transform: translateY(-1px); border-color: #a9bdec; background: #f6f9ff; }
.btn-ghost-icon:focus-visible { outline: 3px solid #b8c9ff; outline-offset: 3px; }

/* Huy hiệu 100% Free trên thanh điều hướng */
.nav-free-link { display: inline-flex; align-items: center; }
.nav-free-pill {
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  box-shadow: 0 2px 6px rgba(16, 185, 129, .25);
  transition: transform .18s, box-shadow .18s;
}
.nav-free-link:hover .nav-free-pill {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(16, 185, 129, .35);
}

/* ══ Hero ════════════════════════════════════════════════════════════════════ */
.home-hero {
  width: min(1260px, calc(100% - 48px));
  margin: 16px auto 0;
  padding: 62px 0 62px 62px;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: 44px;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(130deg, #eef1ff 0%, #eef4ff 51%, #dae7ff 100%);
}
.home-hero h1 {
  margin: 0;
  font-size: clamp(38px, 4.3vw, 58px);
  letter-spacing: -2.4px;
  line-height: 1.05;
}
/* KHÔNG dùng Georgia cho chữ tiếng Việt.
 *
 * Georgia thiếu các glyph tiếng Việt dựng sẵn như "ầ" (U+1EA7). Trình duyệt
 * phải chắp vá: lấy chữ cái gốc từ Georgia rồi mượn dấu thanh từ font khác, và
 * dấu rơi lệch sang bên — "nhẹ đầu hơn" hiện thành "nhẹ đâ ̀u hơn" ngay trên
 * dòng chữ lớn nhất trang. Dùng lại font hệ thống, chỉ nghiêng và nhạt nét. */
.home-hero h1 em {
  font-style: italic;
  font-weight: 300;
  letter-spacing: -1.6px;
  color: #516dda;
}
.home-hero-summary {
  max-width: 460px;
  margin: 22px 0 0;
  color: #53617a;
  font-size: 16px;
  line-height: 1.7;
}
.home-hero .release-note { margin: 22px 0 0; }
.hero-trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}
.hero-trust-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4a597a;
  font-size: 12.5px;
  font-weight: 700;
}
.hero-trust-strip svg {
  width: 14px;
  height: 14px;
  color: #10b981;
  flex: none;
}

/* ══ Bốn tiện ích ngay dưới đầu trang ════════════════════════════════════════ */
/* ══ Bốn tiện ích — khối MỞ ĐẦU trang ════════════════════════════════════════
 *
 * Đứng trên hero, nên nó là thứ đầu tiên người lạ đọc. Nhiệm vụ: trả lời "app
 * này làm được gì" trong vài giây, bằng danh sách cụ thể chứ không bằng tính từ.
 * Mỗi thẻ vì vậy có bốn gạch đầu dòng nói việc làm được, thay cho một câu tóm
 * tắt chung chung — người đọc cần bằng chứng, không cần lời khen. */
.utility-cards {
  width: min(1260px, calc(100% - 48px));
  margin: 10px auto 0;
}
.utility-lede {
  max-width: 640px;
  margin: 0 0 22px;
  color: #55617a;
  font-size: 15px;
  line-height: 1.7;
}
.utility-lede span {
  display: block;
  margin-bottom: 9px;
  color: #4f68d8;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 1.4px;
}
.utility-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.utility-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 22px;
  overflow: hidden;
  border: 1px solid #e2e8f3;
  border-radius: 20px;
  background: #fff;
  /* Bóng ba tầng: một đường viền sát mép, một lớp gần, một lớp xa. Một bóng đơn
     ở cỡ lớn trông như vết mờ; ba tầng mới ra cảm giác thẻ đang NẰM TRÊN mặt
     giấy chứ không phải in lên đó. */
  box-shadow:
    0 1px 2px rgba(30, 52, 120, .05),
    0 8px 18px rgba(30, 52, 120, .06),
    0 26px 44px rgba(30, 52, 120, .07);
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
/* Vệt sáng ở mép trên — chỉ hiện khi rê chuột, để trạng thái tĩnh giữ được sự
   yên tĩnh mà vẫn có phản hồi rõ khi người dùng chạm tới. */
.utility-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #6f8cff, #9edfcf);
  opacity: 0;
  transition: opacity .22s;
}
.utility-card:hover {
  transform: translateY(-5px);
  border-color: #c8d5f2;
  box-shadow:
    0 2px 4px rgba(30, 52, 120, .07),
    0 14px 26px rgba(30, 52, 120, .1),
    0 40px 62px rgba(30, 52, 120, .13);
}
.utility-card:hover::before { opacity: 1; }
.utility-card.is-featured { border-color: #cdd9f8; background: linear-gradient(168deg, #fff 62%, #f4f7ff); }

.utility-card strong { display: block; margin: 16px 0 0; font-size: 16px; letter-spacing: -.4px; }
.utility-sum { display: block; margin-top: 7px; color: #55617a; font-size: 13px; line-height: 1.6; }
.utility-sum b { color: #23304d; font-weight: 800; }

.utility-points {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.utility-points li {
  position: relative;
  padding-left: 20px;
  color: #566379;
  font-size: 12.5px;
  line-height: 1.55;
}
.utility-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9edfcf;
  box-shadow: 0 0 0 3.5px #e6f8f3;
}
.utility-points b { color: #23304d; font-weight: 750; }

/* `margin-top:auto` ghim dòng "Xem chi tiết" xuống đáy: bốn thẻ có số dòng
   khác nhau, để trôi tự nhiên thì bốn mũi tên nằm ở bốn độ cao khác nhau và mắt
   phải dò lại từng thẻ. */
.utility-more {
  margin-top: auto;
  padding-top: 18px;
  color: #4f68d8;
  font-size: 12.5px;
  font-weight: 750;
}
.utility-more b { display: inline-block; transition: transform .2s; }
.utility-card:hover .utility-more b { transform: translateX(4px); }

.utility-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
}
.utility-icon svg { width: 20px; height: 20px; }
.utility-icon.is-blue { background: #e7edff; color: #4262d0; }
.utility-icon.is-violet { background: #f0e9ff; color: #7a55d8; }
.utility-icon.is-coral { background: #feebe8; color: #e14d3f; }
.utility-icon.is-green { background: #e0f6ee; color: #17916c; }
.utility-icon.is-amber { background: #fdf0dd; color: #b8791c; }
.utility-card.is-coral { border-color: #fbd6d0; background: linear-gradient(168deg, #fff 62%, #fff5f3); }

/* ══ Khối tính năng: chữ gọn, ảnh to ═════════════════════════════════════════
 *
 * Cột ảnh rộng hơn cột chữ khá nhiều (1.42 so với .58). Trang giới thiệu một
 * ứng dụng thì thứ thuyết phục là NHÌN THẤY nó, không phải đọc mô tả — nên chữ
 * rút còn một tiêu đề ngắn và một đoạn ba dòng. */
.feature-section { padding-top: 64px; }
.feature-row {
  display: grid;
  grid-template-columns: minmax(0, .58fr) minmax(0, 1.42fr);
  align-items: center;
  gap: 54px;
  padding: 54px 0;
  border-top: 1px solid #e6ebf4;
}
.feature-row:first-of-type { border-top: 0; padding-top: 0; }
/* Hàng đảo: phải đảo LUÔN tỉ lệ cột, không chỉ đảo thứ tự.

    đẩy khối chữ sang phải, nhưng khung lưới vẫn giữ nguyên cột đầu
   hẹp — nên ảnh rơi vào cột hẹp và co lại còn bằng một phần ba, trong khi chữ
   chiếm hết chỗ rộng. Đúng ngược lại điều đang muốn. */
.feature-row.is-flipped { grid-template-columns: minmax(0, 1.42fr) minmax(0, .58fr); }
.feature-row.is-flipped .feature-row-copy { order: 2; }
.feature-row h2 {
  margin: 0;
  font-size: clamp(26px, 2.7vw, 35px);
  letter-spacing: -1.3px;
  line-height: 1.14;
}
.feature-row-copy > p {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.72;
}
.feature-badge {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #e4ebff;
  color: #4a63c8;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 1px;
}
.feature-badge.is-coral { background: #ffece8; color: #df4536; }
.feature-badge.is-violet { background: #f2eaff; color: #784ed2; }
.feature-badge.is-blue { background: #e4ebff; color: #4a63c8; }
.feature-badge.is-green { background: #e2f7ef; color: #1a9470; }
.feature-badge.is-amber { background: #fef3e2; color: #b47214; }

.feature-checklist {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.feature-checklist li {
  position: relative;
  padding-left: 24px;
  color: #55627a;
  font-size: 13.5px;
  line-height: 1.6;
}
.feature-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #10b981;
  font-weight: 900;
  font-size: 13px;
}
.feature-checklist strong {
  color: #1a2542;
  font-weight: 780;
}

/* ══ Callouts trên hình Art Editor ═══════════════════════════════════════════ */
.shot-art-wrapper {
  position: relative;
}
.shot-callout {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 12px;
  background: rgba(15, 23, 42, .88);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: callout-float 4s ease-in-out infinite alternate;
}
.shot-callout strong { color: #f43f5e; }
.callout-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f43f5e;
  box-shadow: 0 0 8px #f43f5e;
}
.callout-arrow {
  top: 14%;
  left: 28%;
}
.callout-step {
  top: 48%;
  right: 18%;
  animation-delay: 1.3s;
}
.callout-step-num {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}
.callout-blur {
  bottom: 12%;
  left: 32%;
  animation-delay: 2.6s;
}
.callout-blur-icon {
  color: #2dd4bf;
  font-size: 14px;
}
@keyframes callout-float {
  0% { transform: translateY(0); }
  100% { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .shot-callout { animation: none; }
}

/* ══ Video Showcase Mockup ══════════════════════════════════════════════════ */
.shot-video-showcase {
  background: linear-gradient(145deg, #0b1227 0%, #111a36 100%);
  display: flex;
  flex-direction: column;
  padding: 14px;
  color: #fff;
}
.v-mock-window {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(14, 22, 47, .92);
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .45);
}
.v-mock-titlebar {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: 11px;
  color: #8c9cb8;
  font-weight: 600;
}
.v-mock-dots { display: flex; gap: 6px; }
.v-mock-dots i { width: 9px; height: 9px; border-radius: 50%; }
.v-mock-dots i:nth-child(1) { background: #ff5f56; }
.v-mock-dots i:nth-child(2) { background: #ffbd2e; }
.v-mock-dots i:nth-child(3) { background: #27c93f; }
.v-mock-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(59, 130, 246, .2);
  color: #93c5fd;
  font-size: 10px;
  font-weight: 700;
}

.v-mock-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  background: radial-gradient(circle at 60% 40%, rgba(99, 102, 241, .15), transparent 60%), #0a0f24;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v-mock-selection {
  position: absolute;
  inset: 16px 20px;
  border: 2px dashed #f43f5e;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(244, 63, 94, .4), inset 0 0 40px rgba(244, 63, 94, .08);
  pointer-events: none;
}
.v-mock-dim-size {
  position: absolute;
  left: 12px;
  top: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #f43f5e;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .4px;
}
.v-mock-annotation-sample {
  position: absolute;
  right: 50px;
  top: 35px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.v-mock-arrow-svg {
  width: 85px;
  height: 48px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4));
}
.v-mock-note-badge {
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(244, 63, 94, .9);
  color: #fff;
  font-size: 11px;
  font-weight: 750;
  box-shadow: 0 4px 12px rgba(244, 63, 94, .35);
}

.v-mock-hud {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: 12px;
  background: #111a33;
  border: 2px solid #6366f1;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .6);
}
.v-mock-hud-grip {
  display: flex;
  flex-direction: column;
  gap: 2.5px;
  padding: 0 2px;
  opacity: .5;
}
.v-mock-hud-grip i { width: 12px; height: 2px; border-radius: 1px; background: #fff; }
.v-mock-rec-indicator {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: -.2px;
}
.v-mock-rec-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 10px #ef4444;
  animation: v-rec-blink 1.4s ease-in-out infinite alternate;
}
@keyframes v-rec-blink { from { opacity: 1; } to { opacity: .25; } }
.v-mock-rec-time { font-family: monospace; font-size: 13px; color: #fff; }
.v-mock-rec-label { font-size: 10.5px; color: #94a3b8; }
.v-mock-hud-sep { width: 1px; height: 18px; background: rgba(255, 255, 255, .16); }
.v-mock-hud-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .08);
  color: #e2e8f0;
  border: 0;
}
.v-mock-hud-btn svg { width: 15px; height: 15px; }
.v-mock-hud-btn.is-active { color: #34d399; background: rgba(16, 185, 129, .15); }
.v-mock-hud-stop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 8px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 750;
  border: 0;
}
.v-mock-hud-stop i { width: 7px; height: 7px; border-radius: 2px; background: #fff; }

.v-mock-editor-pane {
  background: #0d152d;
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v-mock-edit-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.v-mock-tool-group {
  display: flex;
  align-items: center;
  gap: 5px;
}
.v-mock-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 650;
}
.v-mock-tool-btn.is-active { background: rgba(99, 102, 241, .25); border-color: #6366f1; color: #a5b4fc; }
.v-mock-tool-btn.is-export { background: #6366f1; border-color: #6366f1; color: #fff; font-weight: 750; }

.v-mock-timeline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(0, 0, 0, .25);
  border-radius: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, .06);
}
.v-mock-ruler {
  display: flex;
  justify-content: space-between;
  font-size: 8.5px;
  font-family: monospace;
  color: #64748b;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.v-mock-tracks {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 3px 0;
}
.v-mock-track-video {
  height: 20px;
  border-radius: 4px;
  background: linear-gradient(90deg, #1e293b, #334155 35%, #1e293b 70%, #334155);
  display: flex;
  align-items: center;
  padding: 0 8px;
  position: relative;
  overflow: hidden;
}
.v-mock-waveform {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: .35;
  padding: 0 4px;
}
.v-mock-waveform i {
  flex: 1;
  background: #38bdf8;
  border-radius: 1px;
}
.v-mock-lane-annot {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 17px;
  position: relative;
}
.v-mock-pill {
  position: absolute;
  top: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border-radius: 4px;
  font-size: 8px;
  font-weight: 750;
  white-space: nowrap;
}
.v-mock-pill.is-arrow { left: 8%; width: 26%; background: rgba(239, 68, 68, .25); border: 1px solid #ef4444; color: #fca5a5; }
.v-mock-pill.is-step { left: 38%; width: 23%; background: rgba(59, 130, 246, .25); border: 1px solid #3b82f6; color: #bfdbfe; }
.v-mock-pill.is-blur { left: 65%; width: 25%; background: rgba(20, 184, 166, .25); border: 1px solid #14b8a6; color: #99f6e4; }

.v-mock-playhead {
  position: absolute;
  top: -6px;
  bottom: -4px;
  left: 54%;
  width: 2px;
  background: #f43f5e;
  z-index: 15;
}
.v-mock-playhead::before {
  content: "";
  position: absolute;
  top: 0;
  left: -4px;
  width: 10px;
  height: 7px;
  background: #f43f5e;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* ══ Hai cách dùng ═══════════════════════════════════════════════════════════ */
.dual-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.dual-panel article {
  padding: 30px 30px 26px;
  border: 1px solid #e2e8f3;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(30, 52, 120, .04), 0 12px 26px rgba(30, 52, 120, .07);
}
.dual-panel h3 { margin: 16px 0 0; font-size: 20px; letter-spacing: -.6px; }
.dual-panel p { margin: 10px 0 16px; color: var(--muted); font-size: 14px; line-height: 1.7; }

/* ══ Khối cam kết 100% Miễn phí ═════════════════════════════════════════════ */
.free-block, .premium-block {
  padding: 58px 62px;
  border-radius: 28px;
  background: linear-gradient(145deg, #0e1732 0%, #152248 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 20px 50px rgba(10, 18, 45, .25);
}
.free-header { max-width: 720px; }
.free-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(16, 185, 129, .18);
  border: 1px solid rgba(16, 185, 129, .35);
  color: #5eead4;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 1.2px;
}
.free-header h2 {
  margin: 16px 0 0;
  font-size: clamp(30px, 3.4vw, 44px);
  letter-spacing: -1.6px;
  line-height: 1.12;
  color: #fff;
}
.free-header p {
  margin: 18px 0 0;
  color: #b0bfdc;
  font-size: 15.5px;
  line-height: 1.75;
}
.free-grid, .premium-four {
  margin: 38px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.free-card, .premium-four li {
  padding: 24px 22px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  background: rgba(255, 255, 255, .04);
  transition: transform .2s, border-color .2s, background .2s;
}
.free-card:hover, .premium-four li:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .07);
}
.free-card-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  margin-bottom: 18px;
}
.free-card-icon svg { width: 20px; height: 20px; }
.free-card-icon.is-mint { background: rgba(16, 185, 129, .2); color: #34d399; }
.free-card-icon.is-blue { background: rgba(79, 110, 242, .2); color: #818cf8; }
.free-card-icon.is-violet { background: rgba(147, 51, 234, .2); color: #c084fc; }
.free-card-icon.is-amber { background: rgba(245, 158, 11, .2); color: #fbbf24; }

.free-card strong, .premium-four strong {
  display: block;
  font-size: 16px;
  letter-spacing: -.4px;
  color: #fff;
}
.free-card span, .premium-four span {
  display: block;
  margin-top: 9px;
  color: #a6b5d2;
  font-size: 12.5px;
  line-height: 1.65;
}
.free-footer {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.free-trust {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 650;
}
.trust-check {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #10b981;
  color: #0b1727;
  font-size: 11px;
  font-weight: 900;
  margin-right: 5px;
}
.free-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cta-ghost-white {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
}
.cta-ghost-white:hover {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .4);
}

/* ══ Tải về ══════════════════════════════════════════════════════════════════ */
.download-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
  align-items: center;
  gap: 60px;
}
.download-title { margin: 0; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -1.6px; line-height: 1.1; }
.download-lead { max-width: 520px; margin: 20px 0 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.download-more { margin: 18px 0 0; }

/* ══ Bố cục hẹp ══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .utility-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .free-grid, .premium-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
  .home-hero { grid-template-columns: 1fr; padding: 48px 34px 40px; gap: 32px; }
  .shot-hero { margin-right: 0; }
  .feature-row { grid-template-columns: 1fr; gap: 28px; padding: 44px 0; }
  .feature-row.is-flipped .feature-row-copy { order: 0; }
  .dual-panel, .download-row { grid-template-columns: 1fr; gap: 26px; }
  .free-block, .premium-block { padding: 42px 32px; }
  .v-mock-hud { top: 16px; padding: 6px 10px; gap: 6px; }
  .v-mock-editor-pane { padding: 8px 10px; }
  .shot-callout { font-size: 10px; padding: 6px 10px; }
}
/* Ở 390px, "Đăng nhập bằng Google" + "Tải về" đẩy khối nút vượt mép phải 11px.
   Đo được bằng scrollWidth − clientWidth, không phải đoán. Cắt phần chữ thừa
   của nhãn và bỏ chữ ở nút phụ — icon tải xuống tự nói được nó là gì. */
@media (max-width: 620px) {
  .cta-label-more { display: none; }
  .btn-ghost-icon { padding: 8px 10px; font-size: 0; gap: 0; }
  .btn-ghost-icon svg { width: 17px; height: 17px; }
  .header-actions { gap: 8px; }
}

@media (max-width: 560px) {
  .home-hero, .utility-cards { width: calc(100% - 32px); }
  .home-hero { padding: 38px 20px 32px; border-radius: 21px; }
  .home-hero h1 { font-size: 36px; letter-spacing: -1.5px; }
  .home-hero-summary { font-size: 15px; }
  .utility-grid { grid-template-columns: 1fr; }
  .free-grid, .premium-four { grid-template-columns: 1fr; }
  .free-block, .premium-block { padding: 34px 20px; border-radius: 20px; }
  .free-footer { flex-direction: column; align-items: stretch; gap: 18px; }
  .free-actions .cta { width: 100%; justify-content: center; }
  .cta { flex: 1 1 100%; justify-content: center; }
  .cta-sm { flex: none; }
  .nav { display: none; }
  .shot-callout { display: none; }
  .hero-trust-strip { gap: 10px; }
  .hero-trust-strip span { font-size: 11px; }
}

/* ══ So sánh Windows / Web và mục "Mới nhất" ═══════════════════════════════ */
.compare-table {
  width: 100%;
  margin: 28px 0 0;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid #e2e8f3;
  border-radius: 18px;
  background: #fff;
  font-size: 14px;
}
.compare-table th, .compare-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid #edf0f7; }
.compare-table thead th { background: #f3f6fd; font-size: 12.5px; letter-spacing: .02em; color: var(--muted); }
.compare-table tbody th { font-weight: 650; color: var(--ink); }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table .is-yes { color: #137a55; font-weight: 650; }
.compare-table .is-no { color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.whatsnew-grid {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.whatsnew-grid li {
  padding: 22px 20px;
  border: 1px solid #e2e8f3;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(30, 52, 120, .04), 0 12px 26px rgba(30, 52, 120, .06);
}
.whatsnew-grid strong { display: block; font-size: 16px; letter-spacing: -.3px; }
.whatsnew-grid span { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.65; }
@media (max-width: 980px) { .whatsnew-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .whatsnew-grid { grid-template-columns: 1fr; }
  .compare-table th, .compare-table td { padding: 11px 12px; font-size: 13px; }
}

#platforms .section-heading, #whatsnew .section-heading { margin-bottom: 34px; }