/* ProCut website — một file CSS duy nhất, không CDN, không webfont.
   Trang này còn phải sống được trên GitHub Pages/S3 tĩnh và load nhanh ở 3G VN,
   nên mọi thứ tự chứa. Bảng màu lấy ĐÚNG từ app (res/values/colors.xml) để ảnh
   chụp màn hình gửi store không lệch tông với landing page. */

:root {
  --bg:        #0E0F12;
  --surface:   #1A1C22;
  --surface-2: #22252E;
  --line:      rgba(255, 255, 255, 0.09);
  --line-2:    rgba(255, 255, 255, 0.16);
  --fg:        #F2F3F5;
  --muted:     #9AA0AE;
  --accent:    #6C5CE7;
  --accent-2:  #A78BFA;
  --ok:        #22D3A6;
  --warn:      #F5A524;

  --maxw: 1120px;
  --radius: 16px;
  --radius-sm: 10px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Bàn phím phải nhìn thấy được mình đang ở đâu — store reviewer có test cái này. */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 4px;
}

img, svg { max-width: 100%; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #fff; padding: 12px 18px; z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

/* ------------------------------------------------------------------ header */

header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14, 15, 18, 0.82);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
header.site .wrap {
  display: flex; align-items: center; gap: 24px;
  height: 66px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 750; font-size: 19px; letter-spacing: -0.02em;
  color: var(--fg); text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand .mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: #07090a;
  display: grid; place-items: center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
nav.top { margin-left: auto; display: flex; gap: 26px; align-items: center; }
nav.top a { color: var(--muted); font-size: 15px; font-weight: 500; }
nav.top a:hover { color: var(--fg); text-decoration: none; }
@media (max-width: 860px) { nav.top { display: none; } }

/* ------------------------------------------------------------------ button */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 20px; border-radius: 999px;
  font-weight: 650; font-size: 15px; line-height: 1;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #7deede; }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--fg); }

/* Nút cửa hàng: KHÔNG phải badge chính chủ. Apple/Google bắt dùng đúng file
   badge của họ khi app đã lên store — xem website/README.md, mục "trước khi
   deploy". Đây là chỗ giữ layout cho tới lúc đó. */
.stores { display: flex; flex-wrap: wrap; gap: 14px; }
.store-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 22px 11px 18px;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 14px; color: var(--fg);
  transition: border-color .15s ease, background .15s ease;
}
.store-btn:hover { text-decoration: none; border-color: var(--fg); background: var(--surface-2); }
.store-btn small { display: block; font-size: 11px; letter-spacing: .07em; color: var(--muted); text-transform: uppercase; }
.store-btn strong { display: block; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.store-btn[aria-disabled="true"] { opacity: .55; cursor: default; }
.store-btn[aria-disabled="true"]:hover { transform: none; border-color: var(--line-2); background: var(--surface); }

/* -------------------------------------------------------------------- hero */

/* Nền phẳng, không gradient — cả trang chỉ dùng màu đặc. */
.hero { padding: 84px 0 40px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(87, 227, 207, 0.14);
  border: 1px solid rgba(87, 227, 207, 0.38);
  color: var(--accent-2);
  font-size: 13px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
}

h1 {
  margin: 22px 0 0;
  font-size: clamp(40px, 7.2vw, 74px);
  line-height: 1.02; letter-spacing: -0.035em; font-weight: 780;
  max-width: 15ch;
}
h1 .grad { color: var(--accent-2); }
.lede {
  margin: 22px 0 0; max-width: 62ch;
  font-size: clamp(17px, 2.1vw, 20px); color: var(--muted);
}
.hero .stores { margin-top: 34px; }
.trust {
  margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-size: 14px; color: var(--muted);
}
.trust span { display: inline-flex; align-items: center; gap: 7px; }
.trust span::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); flex: none;
}

/* --------------------------------------------------------- mockup timeline */

/* Dựng bằng HTML/CSS chứ không phải ảnh: nhẹ, nét ở mọi DPI, và sửa được khi UI
   app đổi mà không phải chụp lại màn hình. */
.mock {
  margin: 54px auto 0; max-width: 940px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.mock-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3A3E4A; }
.mock-bar .title {
  margin-left: 10px; font-family: var(--mono); font-size: 12px; color: var(--muted);
}
.mock-stage {
  aspect-ratio: 16 / 6;
  background: #262A36;
  position: relative;
}
/* Khung title-safe của monitor — cho stage đọc ra "màn hình xem trước". */
.mock-stage .safe {
  position: absolute; inset: 9% 6%;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 4px;
}
.mock-stage .tc {
  position: absolute; left: 14px; top: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  padding: 5px 10px; border-radius: 6px;
  background: rgba(0, 0, 0, 0.45); color: rgba(255, 255, 255, 0.82);
}
.mock-stage .caption {
  position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%);
  padding: 8px 18px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  font-weight: 700; font-size: clamp(14px, 2.4vw, 22px); letter-spacing: -0.01em;
  white-space: nowrap;
}
.mock-stage .badge-4k {
  position: absolute; top: 14px; right: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  padding: 5px 10px; border-radius: 6px;
  background: rgba(0, 0, 0, 0.45); color: #fff;
}
.mock-tl { padding: 14px 16px 18px; display: grid; gap: 7px; }
.mock-ruler {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; color: #5B6070; padding: 0 2px 4px;
}
/* Grid item mặc định min-width:auto — phải ép 0 thì lane mới co theo card. */
.mock-tl > * { min-width: 0; }
.lane { display: flex; gap: 4px; height: 34px; }
.lane .cell {
  border-radius: 6px; display: flex; align-items: center; padding: 0 10px;
  font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.86);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* min-width:0 để cell co được — không có nó, nowrap giữ nguyên min-content
     và cả timeline tràn khỏi card trên màn hình hẹp. */
  min-width: 0;
}
.cell.v1 { background: #4C3FD1; }
.cell.v2 { background: #14707F; }
.cell.xfade { background: var(--accent); color: #fff; font-weight: 750; }
.cell.audio { background: #2B3040; color: var(--muted); }
.cell.text  { background: #3A2B55; color: #D9CCFF; }
.cell.gap   { background: transparent; border: 1px dashed var(--line-2); color: #5B6070; }
.lane .lbl {
  width: 34px; flex: none; display: flex; align-items: center;
  font-family: var(--mono); font-size: 10px; color: #5B6070;
}

/* ---------------------------------------------------------------- sections */

section { padding: 78px 0; }
section.tight { padding: 52px 0; }

.sec-head { max-width: 62ch; margin-bottom: 40px; }
.sec-head .kicker {
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-2);
}
h2 {
  margin: 12px 0 0;
  font-size: clamp(28px, 4.2vw, 42px); line-height: 1.12;
  letter-spacing: -0.03em; font-weight: 740;
}
h3 { margin: 0 0 8px; font-size: 19px; letter-spacing: -0.015em; font-weight: 680; }
.sec-head p { margin: 14px 0 0; color: var(--muted); }

.grid { display: grid; gap: 18px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px;
}
.card p { margin: 0; color: var(--muted); font-size: 15.5px; }
.card .ico {
  width: 40px; height: 40px; border-radius: 11px; margin-bottom: 16px;
  display: grid; place-items: center;
  background: rgba(87, 227, 207, 0.16); color: var(--accent-2);
  font-size: 20px;
}

.pillar { padding: 30px; }
.pillar h3 { font-size: 21px; }

/* ------------------------------------------ khung máy + ảnh chụp / video thật

   Khung máy vẽ bằng CSS chứ không nướng vào ảnh: ảnh trong `assets/shots` là
   màn hình SẠCH (xem store/shots/make-shots.py → build_web), nên đổi khung sau
   này chỉ sửa ở đây, không phải dựng lại toàn bộ ảnh.
   Chiều sâu dựng bằng lớp phẳng + viền, không gradient — cùng luật với .card. */

.device {
  position: relative;
  border-radius: 30px;
  padding: 9px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9);
}
/* Vệt sáng cạnh trên: một đường 1px, đủ để cạnh máy không phẳng lì. */
.device::before {
  content: ""; position: absolute; inset: 1px 1px auto; height: 1px;
  border-radius: 30px 30px 0 0; background: rgba(255, 255, 255, 0.14);
}
/* Nút nguồn + phím âm lượng. Trang trí thuần tuý ⇒ ẩn khỏi trình đọc màn hình. */
.device i {
  position: absolute; right: -2px; width: 3px; border-radius: 2px;
  background: var(--line-2);
}
.device i:nth-of-type(1) { top: 21%; height: 10%; }
.device i:nth-of-type(2) { top: 35%; height: 6%; }
.device i:nth-of-type(3) { top: 43%; height: 6%; }
.device img, .device video {
  display: block; width: 100%; height: auto;
  border-radius: 22px; background: #000;
}

/* ------------------------------------------------------------------ demo */

.demo-grid {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 52px; align-items: center;
}
@media (max-width: 820px) {
  .demo-grid { grid-template-columns: 1fr; gap: 34px; justify-items: center; }
  .demo-grid .device { max-width: 300px; }
}
/* Nút play riêng. Chrome KHÔNG vẽ nút play giữa khung cho video chưa chạy —
   chỉ hiện thanh điều khiển khi rê chuột — nên nếu không có lớp này thì poster
   trông y hệt một tấm ảnh tĩnh và không ai bấm. Bấm xong nút tự ẩn, trả lại
   thanh điều khiển gốc của trình duyệt. */
.play-cta {
  position: absolute; inset: 9px; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  border: 0; border-radius: 22px; cursor: pointer;
  background: rgba(14, 15, 18, 0.42);
  font: inherit; color: var(--fg);
}
.play-cta[hidden] { display: none; }
.play-cta b {
  width: 66px; height: 66px; border-radius: 50%;
  background: var(--accent); display: grid; place-items: center;
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.95);
}
.play-cta b::after {
  content: ""; margin-left: 4px;
  border: 11px solid transparent; border-left: 17px solid #fff; border-right: 0;
}
.play-cta small { font-size: 13px; color: rgba(255, 255, 255, 0.86); }
.play-cta:hover b { background: var(--accent-2); }
.play-cta:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }

/* Danh sách mốc thời gian: cột giờ dùng font mono cho thẳng hàng. Chặn bề rộng
   để dòng không kéo dài hết cột 1fr — quá ~70 ký tự là mắt bắt đầu lạc dòng. */
.beats { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-width: 560px; }
.beats li {
  display: grid; grid-template-columns: 62px 1fr; gap: 16px; align-items: baseline;
  padding: 13px 0; border-top: 1px solid var(--line);
}
.beats li:first-child { border-top: 0; }
.beats time { font-family: var(--mono); font-size: 13.5px; color: var(--accent-2); }
.beats strong { font-weight: 640; }
.beats span { display: block; color: var(--muted); font-size: 15px; margin-top: 3px; }

/* ------------------------------------------------------------- ảnh màn hình

   Trên máy để bàn: lưới. Trên điện thoại: một hàng cuộn ngang có snap — cùng
   cách store trình bày, và không bắt cuộn dọc qua bảy cái ảnh cao. */

.shots {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
@media (max-width: 1000px) { .shots { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .shots {
    grid-auto-flow: column; grid-auto-columns: 62vw; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 14px; margin: 0 -24px; padding-inline: 24px;
    scrollbar-width: thin;
  }
  .shots > figure { scroll-snap-align: center; }
}
.shots > figure { margin: 0; }
.shots figcaption { margin-top: 14px; }
.shots figcaption strong { display: block; font-size: 15.5px; font-weight: 640; }
.shots figcaption span { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }

/* ------------------------------------------------------------------- table */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 640px; }
th, td { text-align: left; padding: 15px 20px; border-bottom: 1px solid var(--line); }
th { background: var(--surface-2); font-weight: 650; font-size: 14px; letter-spacing: .01em; }
tbody tr:last-child td { border-bottom: 0; }
td .yes { color: var(--ok); font-weight: 650; }
/* Giá nhỏ dưới tên cột trong bảng so sánh — người đọc cần thấy con số ngay ở
   đầu cột chứ không phải cuộn xuống chú thích. */
th .th-price { display: block; margin-top: 3px; font-weight: 500; font-size: 12.5px; color: var(--muted); letter-spacing: 0; }
td .soon { color: var(--warn); font-weight: 650; }

/* ----------------------------------------------------------------- pricing */

.price-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); align-items: start; }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; } }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.plan.featured { border-color: rgba(87, 227, 207, 0.65); box-shadow: 0 0 0 1px rgba(87,227,207,.35), 0 24px 60px -34px rgba(87,227,207,.7); }
.plan .tag {
  display: inline-block; margin-bottom: 14px; padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: rgba(87, 227, 207, 0.16); color: var(--accent-2);
}
.plan .amount { font-size: 38px; font-weight: 760; letter-spacing: -0.03em; line-height: 1.1; }
.plan .amount small { font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 11px; }
.plan li { position: relative; padding-left: 26px; font-size: 15.5px; color: var(--muted); }
.plan li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: var(--ok); font-weight: 800;
}
.plan li.no::before { content: "—"; color: #4A4F5E; }
/* Dòng phụ dưới con số giá: giải thích quy đổi tháng/năm, tiết kiệm bao nhiêu.
   Phải nằm giữa .amount và danh sách quyền lợi, nếu không người đọc thấy "$34.99
   / year" rồi nhảy thẳng xuống bullet mà không biết nó tương đương bao nhiêu một
   tháng — đó là con số họ dùng để so với CapCut. */
.plan .alt {
  margin: 12px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--muted);
}
.plan .alt strong { color: var(--fg); font-weight: 650; }

/* Tiêu đề phụ trong mục pricing, dưới lưới thẻ giá. */
h3.sub {
  margin: 56px 0 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em;
}
h3.sub + .lede { margin-top: 12px; margin-bottom: 22px; max-width: 68ch; }

.note {
  margin-top: 22px; padding: 16px 18px; border-radius: var(--radius-sm);
  background: rgba(245, 165, 36, 0.08); border: 1px solid rgba(245, 165, 36, 0.28);
  color: #E9C88A; font-size: 14.5px;
}

/* --------------------------------------------------------------------- faq */

details.faq {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 0; margin-bottom: 12px;
}
details.faq summary {
  list-style: none; cursor: pointer; padding: 18px 22px;
  font-weight: 620; font-size: 16.5px; display: flex; gap: 16px; align-items: center;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+"; margin-left: auto; color: var(--accent-2);
  font-size: 22px; font-weight: 400; line-height: 1;
}
details.faq[open] summary::after { content: "−"; }
details.faq .body { padding: 0 22px 20px; color: var(--muted); font-size: 15.5px; }
details.faq .body p { margin: 0 0 10px; }
details.faq .body p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- cta band */

.cta {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 22px; padding: 52px 40px; text-align: center;
}
.cta h2 { max-width: 22ch; margin: 0 auto; }
.cta p { color: var(--muted); max-width: 56ch; margin: 16px auto 0; }
.cta .stores { justify-content: center; margin-top: 30px; }

/* ------------------------------------------------- trang features / download */

/* Đầu trang phụ: cùng nhịp với hero nhưng thấp hơn, để index vẫn là trang chính. */
.page-head { padding: 64px 0 8px; }
.page-head h1 {
  font-size: clamp(34px, 5.6vw, 56px); max-width: 20ch; margin: 18px 0 0;
}
.page-head .lede { margin-top: 18px; }

/* Nhóm tính năng: tiêu đề nhóm bên trái, danh sách gạch đầu dòng bên phải. */
.feat-group { display: grid; grid-template-columns: 300px 1fr; gap: 40px; padding: 44px 0; border-top: 1px solid var(--line); }
.feat-group:first-of-type { border-top: 0; }
@media (max-width: 860px) { .feat-group { grid-template-columns: 1fr; gap: 20px; padding: 32px 0; } }
.feat-group .head h2 { font-size: clamp(24px, 3.2vw, 30px); margin: 0; }
.feat-group .head p { margin: 12px 0 0; color: var(--muted); font-size: 15.5px; }
.feat-group .head .num {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  color: var(--accent-2); text-transform: uppercase;
}
.feat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 1000px) { .feat-list { grid-template-columns: 1fr 1fr; gap: 16px 28px; } }
.feat-list li { padding-left: 26px; position: relative; font-size: 15.5px; color: var(--muted); }
.feat-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--ok); font-weight: 800;
}
.feat-list li strong { color: var(--fg); font-weight: 640; display: block; }
.feat-list li.pro::before { content: "★"; color: var(--accent-2); }
.feat-list li.soon::before { content: "◌"; color: var(--warn); }

/* Thẻ tải về: một thẻ cho mỗi nền tảng, trạng thái nằm ngay trên tiêu đề. */
.dl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 820px) { .dl-grid { grid-template-columns: 1fr; } }
.dl-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px;
  display: flex; flex-direction: column;
}
.dl-card.ready { border-color: rgba(87, 227, 207, 0.5); }
.dl-card .top { display: flex; align-items: center; gap: 14px; }
.dl-card .glyph {
  width: 44px; height: 44px; flex: none; border-radius: 12px;
  display: grid; place-items: center; font-size: 22px;
  background: rgba(87, 227, 207, 0.16); color: var(--accent-2);
}
.dl-card h3 { margin: 0; font-size: 20px; }
.dl-card .sub { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); font-family: var(--mono); }
.dl-card > p { color: var(--muted); font-size: 15.5px; margin: 16px 0 0; }
.dl-card .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.dl-card .meta {
  margin-top: auto; padding-top: 18px; font-size: 13px; color: #6B7183;
  font-family: var(--mono); display: grid; gap: 4px;
}
.pill {
  margin-left: auto; flex: none; align-self: flex-start;
  padding: 4px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.pill.live { background: rgba(34, 211, 166, 0.14); color: var(--ok); }
.pill.soon { background: rgba(245, 165, 36, 0.14); color: var(--warn); }
.pill.beta { background: rgba(87, 227, 207, 0.18); color: var(--accent-2); }
/* Hẹp thì "iPhone & iPad" bị ép xuống 2 dòng cạnh pill — cho pill lên hàng
   riêng với glyph, tiêu đề chiếm trọn hàng dưới. */
@media (max-width: 560px) {
  .dl-card { padding: 22px; }
  .dl-card .top { flex-wrap: wrap; row-gap: 12px; }
  .dl-card .glyph { order: 1; }
  .dl-card .top .pill { order: 2; }
  .dl-card .top > div { order: 3; flex: 1 1 100%; min-width: 0; }
  .dl-card .meta { word-break: break-word; }
}

/* ------------------------------------------------------------------ footer */

footer.site { border-top: 1px solid var(--line); padding: 54px 0 44px; margin-top: 40px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 34px; }
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot-grid h4 {
  margin: 0 0 14px; font-size: 13px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-grid a { color: var(--fg); font-size: 15px; }
.foot-grid a:hover { color: var(--accent-2); }
.foot-about p { margin: 14px 0 0; color: var(--muted); font-size: 14.5px; max-width: 40ch; }
.legal-line {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 20px;
  color: #6B7183; font-size: 13.5px;
}
.legal-line .sep { color: #3A3E4A; }

/* ------------------------------------------------------------- trang pháp lý */

.legal-page { padding: 56px 0 40px; }
.legal-page .wrap { max-width: 760px; }
.legal-page h1 { font-size: clamp(32px, 5vw, 46px); max-width: none; margin: 0; }
.legal-page .updated {
  margin-top: 12px; color: var(--muted); font-size: 14.5px;
  font-family: var(--mono);
}
.legal-body { font-size: 16.5px; }
.legal-body h2 { font-size: 24px; margin: 44px 0 12px; }
.legal-body h3 { font-size: 18px; margin: 28px 0 8px; }
.legal-body p, .legal-body li { color: #C9CDD8; }
.legal-body ul, .legal-body ol { padding-left: 22px; display: grid; gap: 8px; }
.legal-body table { min-width: 0; font-size: 15px; }
.legal-body .table-wrap { margin: 20px 0; }
.callout {
  margin: 24px 0; padding: 18px 20px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
}
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }
.toc {
  margin: 28px 0 8px; padding: 20px 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.toc ol { margin: 10px 0 0; }
.toc a { color: var(--fg); }

code {
  font-family: var(--mono); font-size: .9em;
  background: var(--surface-2); padding: 2px 6px; border-radius: 5px;
}

/* ==================== Theme Filmode — procut.filmode.app ====================
   ProCut phát hành dưới thương hiệu Filmode: đổi sang bảng màu + chữ hiển thị
   của filmode.app (nền gần đen ấm, mực ngà, nhấn bạc hà, headline serif).
   Đặt CUỐI file: cùng specificity thì luật sau thắng — base ở trên giữ nguyên
   để so sánh/quay lại. Vẫn tuyệt đối KHÔNG gradient. */

:root {
  --bg:        #0b0b0c;
  --surface:   #131314;
  --surface-2: #1a1a1c;
  --line:      #232325;
  --line-2:    #2f2f32;
  --fg:        #f3efe8;
  --muted:     #9b968c;
  --accent:    #57e3cf;
  --accent-2:  #57e3cf;
  --ok:        #57e3cf;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

/* Hạt phim mờ toàn trang — chữ ký thị giác của filmode.app. Ảnh SVG data URI,
   không request ra ngoài. */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; opacity: .05; z-index: 90;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2.sec, .brand { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }
h1 .grad { color: var(--accent); font-style: italic; }
header.site { background: rgba(11, 11, 12, 0.82); }
.brand .mark svg .p1 { fill: #f4fbf9; }
.brand .mark svg .p2 { fill: var(--accent); }

.btn-primary { background: var(--fg); color: var(--bg); }
.btn-primary:hover { background: var(--accent); color: var(--bg); }

.eyebrow {
  background: transparent;
  border: 1px solid rgba(87, 227, 207, 0.45);
  color: var(--accent);
}

.plan.featured {
  border-color: rgba(87, 227, 207, 0.55);
  box-shadow: 0 0 0 1px rgba(87, 227, 207, .3), 0 24px 60px -34px rgba(87, 227, 207, .55);
}
.dl-card.ready { border-color: rgba(87, 227, 207, 0.5); }
.pill.beta { background: rgba(87, 227, 207, 0.14); color: var(--accent); }

/* Mock timeline: lane màu theo bảng filmode — video ấm, audio xám, text xanh sâu.
   Không còn tím; chữ trên nền nhấn dùng mực tối cho đủ tương phản. */
.cell.v1    { background: #1f6d63; }
.cell.v2    { background: #14707F; }
.cell.xfade { background: var(--accent); color: #0b0b0c; font-weight: 750; }
.cell.audio { background: #26262a; color: var(--muted); }
.cell.text  { background: #2c3a3d; color: #cfe9e3; }
.cell.gap   { border-color: var(--line-2); color: #6a6a66; }

/* ============================================================ blog / bài viết
   Trang blog dùng lại toàn bộ token của theme Filmode ở trên: không thêm màu
   mới, không webfont, không gradient. Chỉ thêm nhịp đọc dài (cột hẹp, ảnh chụp
   màn hình chèn giữa bài) và lưới thẻ bài viết. */

.blog-head { padding: 60px 0 4px; }
.blog-head h1 { font-size: clamp(32px, 5.2vw, 52px); max-width: 18ch; margin: 18px 0 0; }
.blog-head .lede { margin-top: 18px; }

/* Đường dẫn phân cấp — cũng là dữ liệu BreadcrumbList cho máy tìm kiếm. */
.crumbs {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: 13.5px; color: var(--muted); font-family: var(--mono);
  padding-top: 34px;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { color: #3A3E4A; }

/* ------------------------------------------------------------ lưới thẻ bài */

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 980px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .post-grid { grid-template-columns: 1fr; } }

.post-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
}
.post-card:hover { border-color: var(--line-2); }
.post-card .num {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
}
.post-card h3 { margin: 10px 0 0; font-size: 19px; line-height: 1.3; }
.post-card h3 a { color: var(--fg); }
.post-card h3 a:hover { color: var(--accent); text-decoration: none; }
.post-card p { margin: 10px 0 0; color: var(--muted); font-size: 14.8px; }
.post-card .meta {
  margin-top: auto; padding-top: 18px;
  font-family: var(--mono); font-size: 12px; color: #6B7183;
}

/* Chip chủ đề, dùng cả ở thẻ lẫn đầu bài. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip {
  font-size: 12px; letter-spacing: .04em; color: var(--muted);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 10px;
}

/* ------------------------------------------------------------- thân bài viết */

.post { padding: 0 0 24px; }
.post-wrap { max-width: 780px; }
.post h1 { font-size: clamp(30px, 4.8vw, 46px); margin: 16px 0 0; }
.post .lede { margin-top: 18px; }
.post-meta {
  margin: 18px 0 0; font-family: var(--mono); font-size: 13px; color: #6B7183;
  display: flex; flex-wrap: wrap; gap: 6px 14px;
}

.post-body { font-size: 17px; }
.post-body h2 { font-size: clamp(23px, 3.2vw, 29px); margin: 52px 0 14px; scroll-margin-top: 86px; }
.post-body h3 { font-size: 19px; margin: 32px 0 8px; }
.post-body p, .post-body li { color: #C9CDD8; }
.post-body ul, .post-body ol { padding-left: 22px; display: grid; gap: 9px; }
.post-body strong { color: var(--fg); }
.post-body .table-wrap { margin: 24px 0; }
.post-body table { min-width: 0; font-size: 15px; }

/* Ảnh chụp màn hình trong bài: khung máy mảnh của .device, chú thích bên dưới. */
.shot { margin: 30px 0; }
.shot .device { width: min(320px, 74vw); margin: 0 auto; }
.shot figcaption {
  margin: 14px auto 0; max-width: 52ch; text-align: center;
  font-size: 14px; color: var(--muted);
}
.shot figcaption b { color: var(--fg); font-weight: 640; display: block; margin-bottom: 3px; }
.shot-row { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; margin: 30px 0; }
.shot-row .shot { margin: 0; flex: 1 1 260px; max-width: 340px; }
.shot-row .shot .device { width: min(300px, 70vw); }

/* Ảnh khổ ngang (khung nhiều thiết bị) không cần viền máy. */
.shot.flat .device { width: min(520px, 92%); border: 0; padding: 0; background: none; }
.shot.flat .device i { display: none; }

/* Hộp rút gọn đầu bài — thứ người đọc lướt và máy tìm kiếm trích dẫn. */
.tldr {
  margin: 30px 0 0; padding: 22px 24px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius-sm);
}
.tldr h2 {
  margin: 0 0 12px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); font-family: var(--mono); font-weight: 700;
}
.tldr ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15.5px; }

/* Câu hỏi thường gặp — khớp với khối FAQPage nhúng trong đầu trang. */
.faq { display: grid; gap: 10px; margin-top: 18px; }
.faq details {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 16px 20px;
}
.faq summary { cursor: pointer; font-weight: 640; color: var(--fg); }
.faq details[open] summary { color: var(--accent); }
.faq p { margin: 12px 0 0; font-size: 15.5px; }

/* Điều hướng cuối bài. */
.post-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line);
}
@media (max-width: 640px) { .post-nav { grid-template-columns: 1fr; } }
.post-nav a {
  display: block; padding: 18px 20px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line); color: var(--fg);
}
.post-nav a:hover { border-color: var(--line-2); text-decoration: none; }
.post-nav span {
  display: block; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.post-nav .next { text-align: right; }

/* ------------------------------------------------------ lưới mẫu (templates)

   Thẻ mẫu là ẢNH BÌA 9:16 + một khối chữ dưới, giống hệt thẻ trong app
   (TemplatePosterView.kt / TemplatePoster.swift) để người bấm từ web vào app
   nhận ra ngay mình vừa chọn cái gì. Bìa lấy đúng file app đang dùng, chỉ hạ
   xuống 480px chiều cao cho web (xem resources/demo-footage/SOURCES.md).

   Nền phẳng, không gradient — cùng luật với .card. Chữ trên ảnh nằm trong dải
   nền đặc `.tpl-card .name`, KHÔNG đè lên ảnh: web không có viền chữ như app,
   và bìa `memories`/`beat_sync` sáng tới mức chữ trắng chỉ còn ~1.8:1. */

.tpl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .tpl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tpl-grid { grid-template-columns: 1fr; } }

.tpl-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
}
.tpl-card .cover {
  position: relative; display: block;
  aspect-ratio: 9 / 16; background: var(--surface-2);
}
/* aspect-ratio chưa có ở Safari < 15 — khung vẫn phải giữ tỉ lệ, nếu không cả
   lưới xẹp lại thành một hàng ảnh cao 0px. */
@supports not (aspect-ratio: 9 / 16) {
  .tpl-card .cover { height: 0; padding-bottom: 177.78%; }
}
.tpl-card .cover img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.tpl-card .rank {
  position: absolute; top: 10px; left: 10px;
  min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(14, 15, 18, 0.86); border: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--fg);
}
.tpl-card .body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.tpl-card .name { margin: 0; font-size: 18px; font-weight: 680; letter-spacing: -0.015em; }
.tpl-card .why { margin: 8px 0 0; color: var(--muted); font-size: 14.5px; }
.tpl-card .meta {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; color: #6B7183;
  display: flex; flex-wrap: wrap; gap: 4px 10px;
}
.tpl-card .acts { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.tpl-card .acts .btn { flex: 1 1 auto; text-align: center; }

/* Trang trung chuyển t/<id>.html — một cột hẹp, không nav, không footer dài:
   người dùng chỉ ở đây vài giây trước khi app bật lên. */
.hop { min-height: 100vh; display: grid; place-items: center; padding: 40px 24px; }
.hop .box { width: 100%; max-width: 420px; text-align: center; }
.hop .cover {
  width: 168px; margin: 0 auto 22px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line-2); display: block;
}
.hop h1 { font-size: 26px; letter-spacing: -0.02em; margin: 0 0 10px; }
.hop p { color: var(--muted); margin: 0 0 22px; font-size: 15.5px; }
.hop .acts { display: grid; gap: 10px; }
.hop .fine { margin-top: 24px; font-size: 13px; color: #6B7183; }
.fine-note {
  margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
  color: #6B7183; font-size: 13.5px; max-width: 78ch;
}