/* TabDiary marketing site — design system.

   NGUON SU THAT la chinh extension: extension/src/ui/*/index.css. Moi token o
   day duoc chep tu do chu khong phai dat lai cho "hop mat trang web" — muc dich
   la nguoi bam "Add to Chrome" roi mo tien ich len phai thay dung mot thu, chu
   khong phai mot trang quang cao dep va mot san pham khac han.

   Ba dieu duoc chep nguyen van tu extension:
   1. Thang bo goc 3 nac (control / card / hero) — 0.5 / 0.75 / 1rem.
   2. Bo shadow "soft" dung slate-900, rat nhe — khong phai shadow den mac dinh.
   3. Font he thong. Truoc day trang nay tai Sora + IBM Plex Sans tu Google
      Fonts; vua sai ngon ngu thiet ke (extension dung font he thong), vua la
      mot yeu cau toi ben thu ba phat ra tu chinh trang dang cam ket "khong co
      script cua ben thu ba" — bo di la giai quyet ca hai. */

:root {
  /* Dung dung stack cua extension (xem index.css cua popup/full-page) */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-body);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* THANG CHU — extension da rut tu 6 co xuong 4, moi co mot nhiem vu
     (commit abe829a). Trang web can them hai bac lon cho tieu de, nhung giu
     nguyen nguyen tac: khai bao het o day, khong che them co le te trong HTML. */
  --fs-display: clamp(2.4rem, 5vw, 3.6rem);
  --fs-h2: clamp(1.7rem, 3vw, 2.3rem);
  --fs-h3: 1.15rem;
  --fs-body: 1rem;
  --fs-sm: 0.925rem;
  --fs-xs: 0.8rem;

  /* Chep tu @theme cua extension */
  --radius-control: 0.5rem;
  --radius-card: 0.75rem;
  --radius-hero: 1rem;

  --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.04), 0 1px 3px 0 rgb(15 23 42 / 0.06);
  --shadow-md: 0 4px 12px -2px rgb(15 23 42 / 0.08), 0 2px 6px -1px rgb(15 23 42 / 0.05);
  --shadow-lg: 0 12px 32px -6px rgb(15 23 42 / 0.14), 0 4px 10px -2px rgb(15 23 42 / 0.06);

  /* Bang mau: slate cho nen/chu, indigo cho thuong hieu, emerald cho "an toan/
     da dong bo" — dung y nghia mau nhu trong extension, khong doi vai tro. */
  --bg: #ffffff;
  --bg-soft: #f8fafc;
  --surface: #ffffff;
  --surface-hover: #f1f5f9;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text: #0f172a;
  --muted: #64748b;
  --accent: #6366f1;
  --accent-dark: #4338ca;
  --accent-soft: #eef2ff;
  --success: #10b981;
  --success-dark: #047857;
  --success-soft: #ecfdf5;
  --danger: #e11d48;

  /* Duong ke cua hoa tiet nen — xem .fx-grid */
  --grid-line: rgb(99 102 241 / 0.10);
  --grid-dot: rgb(67 56 202 / 0.22);

  /* Bug that (2026-08-29, anh chup tu nguoi dung): --accent/--accent-dark duoc
     lam sang len o dark mode (de doc duoc khi la CHU tren nen toi), nhung
     .btn-primary lai dung chinh chung lam NEN dac voi chu trang — o dark mode
     thanh indigo nhat tren indigo nhat, gan nhu khong con tuong phan. Nut CTA
     phai co mot gradient ruc co dinh, tach rieng khoi token mau chu. */
  --cta-from: #6366f1;
  --cta-to: #4338ca;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1120;
    --bg-soft: #0f172a;
    --surface: #1e293b;
    --surface-hover: #273449;
    --border: #334155;
    --border-strong: #475569;
    --text: #f1f5f9;
    --muted: #94a3b8;
    --accent: #818cf8;
    --accent-dark: #a5b4fc;
    --accent-soft: rgb(99 102 241 / 0.15);
    --success: #34d399;
    --success-dark: #6ee7b7;
    --success-soft: rgb(16 185 129 / 0.12);
    --grid-line: rgb(129 140 248 / 0.12);
    --grid-dot: rgb(199 203 252 / 0.28);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0 0 0.5em;
  text-wrap: balance;
  letter-spacing: -0.02em;
}

h1 { font-size: var(--fs-display); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 600; }
h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; }

p { margin: 0 0 1em; color: var(--text); }
p.lede { color: var(--muted); font-size: 1.075rem; max-width: 62ch; line-height: 1.65; }

/* Thanh cuon indigo mong — giong het extension, la chi tiet nho nhung la thu
   dau tien nguoi dung nhan ra la "cung mot san pham". */
* { scrollbar-width: thin; scrollbar-color: rgb(99 102 241 / 0.35) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(99 102 241 / 0.35); border-radius: 999px; }

/* ---------- trang van ban dai (privacy.html, design.html) ----------
   Bug that (2026-08-29): cac trang nay la mot .container chay dai voi h2/p tho,
   khong co .section boc tung chu de, nen khong co gi ngan cach hai chu de ngoai
   margin-bottom 1em cua doan van — tieu de co the dinh sat vao thu ngay truoc
   no. Sua bang mot quy tac "stack" thay vi them margin thu cong vao tung the. */
.prose > * + * { margin-top: 1.25rem; }
.prose > * + h2 { margin-top: 3rem; }
.prose li { margin-bottom: 0.4rem; }

a { color: var(--accent-dark); text-underline-offset: 2px; }

code, .mono { font-family: var(--font-mono); font-size: 0.92em; }

.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.section { padding: 84px 0; }
.section-narrow { max-width: 720px; margin: 0 auto; }
.section-soft { background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.section-head p.lede { margin-left: auto; margin-right: auto; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }

/* ---------- hoa tiet nen ----------
   Lay tu backgroundFx.css cua extension ("Ban ve ky thuat" + "Mach in"): luoi
   24px + cham giao diem, phu mot lop sang indigo. QUY TAC QUAN TRONG chep
   nguyen tu extension: hoa tiet CHI hien o khe ho quanh card — moi .card deu
   co nen dac, khong bao gio de luoi chay xuyen qua chu. */
.fx {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.fx > * { position: relative; z-index: 1; }
.fx::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    radial-gradient(circle, var(--grid-dot) 1.4px, transparent 1.8px);
  background-size: 24px 24px, 24px 24px, 24px 24px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, rgb(0 0 0 / 0.55) 45%, transparent 85%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, rgb(0 0 0 / 0.55) 45%, transparent 85%);
  pointer-events: none;
}
/* Quang sang theo con tro — dung ky thuat y het body::after cua extension:
   bien --fx-mx/--fx-my do mot doan script nho cap nhat. Khong co JS thi no
   dung o giua, van dep, khong vo. */
.fx::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(420px circle at var(--fx-mx, 50%) var(--fx-my, 30%), rgb(99 102 241 / 0.16), transparent 62%);
  pointer-events: none;
  transition: opacity 0.4s ease;
}
@media (prefers-color-scheme: dark) {
  .fx::after { background: radial-gradient(420px circle at var(--fx-mx, 50%) var(--fx-my, 30%), rgb(129 140 248 / 0.20), transparent 62%); }
}

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.nav-logo img { width: 28px; height: 28px; border-radius: 8px; }
.nav-logo span { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.02em; }
.nav-links { display: flex; gap: 2px; margin-left: auto; align-items: center; }
/* :not(.btn) la BAT BUOC, khong phai trang tri. `.nav-links a` co do uu tien
   (0,1,1) cao hon `.btn-primary` (0,1,0) — khong loai tru thi nut CTA mat
   `color:#fff` va thanh chu xam chim tren nen gradient indigo, dung loi nguoi
   dung da bao. Dong :hover ben duoi con set `background`, tuc la ro chuot vao
   se xoa luon gradient. Mot va nay chan ca hai, cho moi nut dat trong nav. */
.nav-links a:not(.btn) {
  text-decoration: none;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--radius-control);
}
.nav-links a:not(.btn):hover { color: var(--text); background: var(--surface-hover); }
.nav-links a.current:not(.btn) { color: var(--accent-dark); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-control);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-primary { background: linear-gradient(135deg, var(--cta-from), var(--cta-to)); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-hover); }
.btn-sm { padding: 8px 14px; font-size: var(--fs-xs); }
@media (prefers-reduced-motion: reduce) { .btn-primary:hover { transform: none; } }

/* ---------- hero ---------- */
.hero { border-bottom: 1px solid var(--border); }
.hero-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 88px 24px 0;
  text-align: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.hero h1 { max-width: 17ch; margin: 0 auto 20px; }
.hero .lede { margin: 0 auto 32px; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: 16px; font-size: var(--fs-sm); color: var(--muted); }
.hero-shot {
  margin: 60px auto -1px;
  max-width: 940px;
  border-radius: var(--radius-hero) var(--radius-hero) 0 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-bottom: none;
  box-shadow: var(--shadow-lg);
  background: var(--surface);
}

/* Hang so lieu duoi hero — thay cho mot doan van nua, vi day la thu nguoi ta
   quet mat qua chu khong doc. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-top: 44px;
}
.stat { background: var(--surface); padding: 18px 20px; text-align: center; }
.stat strong { display: block; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; }
.stat span { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--muted); }
.stat.good strong { color: var(--success-dark); }

/* ---------- grid + cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.card-accent { border-left: 3px solid var(--accent); }
.card .icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-control);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent-dark);
  margin-bottom: 14px;
}
/* Bug that (2026-08-29): icon tinh nang truoc day la emoji (💾🗂🔍...), moi he
   dieu hanh ve mot kieu, do day net khac nhau, nhin nhu clip-art dan vao mot
   thiet ke thuan chu. Thay bang bo icon mot net trung DUNG cac icon lucide ma
   extension dang dung (Layers, Globe, History, Download...) — de giong nhau
   giua san pham va trang gioi thieu, chu khong chi giong nhau trong trang. */
.card .icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card.success .icon { background: var(--success-soft); color: var(--success-dark); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.card p + p { margin-top: 0.75em; }

/* ---------- dai differentiator ---------- */
.diff-strip { background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.diff-strip .grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.diff-strip .card { background: var(--surface); }

/* ---------- bang so sanh doi thu ---------- */
.vs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.vs-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.vs-item.is-us { border-color: color-mix(in srgb, var(--success) 45%, transparent); background: var(--success-soft); }
.vs-item h4 { margin: 0 0 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.vs-item .vs-price { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; display: block; }
.vs-item.is-us .vs-price { color: var(--success-dark); }
.vs-item .vs-unit { font-size: var(--fs-xs); color: var(--muted); }

/* ---------- cac buoc danh so (dung chung index + pricing) ---------- */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; }
.steps li { counter-increment: step; display: flex; gap: 14px; align-items: flex-start; }
.steps li::before {
  content: counter(step);
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
}
.steps p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.steps b { color: var(--text); }

/* ---------- bang gia (pricing.html) ---------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: start; }
.plan { display: flex; flex-direction: column; }
.plan h3 { margin: 0 0 4px; }
.plan .price { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.03em; margin: 6px 0 10px; }
.plan .price small { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); color: var(--muted); }
.plan li strong { color: var(--text); font-weight: 600; }
.plan li svg { width: 16px; height: 16px; flex: none; margin-top: 4px; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke: currentColor; }
/* `.yes` danh dau dong "co tinh nang nay". Viet tuong minh thay vi de `.plan li
   svg` lo mau cho tat ca — de sau nay them dong phu dinh thi khong phai go
   nguoc mot quy tac da an dinh mau cho moi dong. */
.plan li.yes svg { stroke: var(--success); }
.plan-featured { border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: var(--shadow-md); }
.price-note { font-size: var(--fs-xs); color: var(--muted); margin: 16px 0 0; line-height: 1.55; }
.opt-out {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--border-strong);
  font-size: var(--fs-sm);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.opt-out span { color: var(--muted); }
.opt-out a { font-weight: 600; }

/* .bridge* chi pricing.html dung — dinh nghia ngay trong trang do */

/* ---------- gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.gallery figure { margin: 0; }
.gallery img { border-radius: var(--radius-card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.gallery figcaption { margin-top: 10px; font-size: var(--fs-sm); color: var(--muted); text-align: center; }

/* ---------- swatches (design.html) ---------- */
.swatch-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.swatch { border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.swatch .fill { height: 72px; }
.swatch .label { padding: 10px 12px; background: var(--surface); }
.swatch .label strong { display: block; font-size: var(--fs-xs); }
.swatch .label span { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }

/* ---------- table ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
tr:last-child td { border-bottom: none; }

/* ---------- changelog ---------- */
.version-entry { padding: 28px 0; border-bottom: 1px solid var(--border); margin-top: 0.5rem; }
.version-entry:last-child { border-bottom: none; }
.version-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.version-tag { font-family: var(--font-mono); font-weight: 600; font-size: 1rem; color: var(--accent-dark); }
.tag { display: inline-block; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 999px; margin-right: 8px; }
.tag-added { background: var(--success-soft); color: var(--success-dark); }
.tag-fixed { background: rgb(225 29 72 / 0.1); color: var(--danger); }
.tag-changed { background: var(--accent-soft); color: var(--accent-dark); }
.version-entry ul { margin: 10px 0 0; padding-left: 20px; color: var(--text); }
.version-entry li { margin-bottom: 8px; font-size: var(--fs-sm); }
.version-entry li::marker { color: var(--muted); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 40px 0; color: var(--muted); font-size: var(--fs-sm); }
.site-footer .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.site-footer nav { display: flex; gap: 18px; }
/* :not(.btn) cung ly do nhu .nav-links o tren */
.site-footer a:not(.btn) { color: var(--muted); text-decoration: none; }
.site-footer a:not(.btn):hover { color: var(--text); }

@media (max-width: 640px) {
  .section { padding: 56px 0; }
  .hero-inner { padding-top: 60px; }
  .nav-links a span.full { display: none; }
  .hero-shot { margin-top: 40px; }
}