/* ─────────────────────────────────────────────────────────────────────────
   DrumTick · web

   Bảng màu KHÔNG tự nghĩ ra: lấy nguyên từ DTTheme.swift của app, kể cả tên
   biến. Trang web và app mà lệch tông thì người bấm từ App Store sang đây
   thấy hai sản phẩm khác nhau. Đổi màu trong app thì đổi luôn ở đây.

   Chữ dùng font hệ thống, không tải webfont: trang này tồn tại để App Review
   và người dùng mở được NGAY, kể cả mạng chậm. Một request font là một thứ
   nữa có thể hỏng ở đúng lúc không nên hỏng.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --ground:      #FAF8F5;
  --surface:     #FFFFFF;
  --sunken:      #F1EEE9;
  --line:        #E2DDD5;
  --line-strong: #D5CEC4;

  --ink:   #1C1A17;
  --ink-2: #6B6560;
  --ink-3: #9A938B;

  --mint:      #0A7E62;
  --mint-text: #076B53;
  --mint-soft: #C2F2E5;

  --brass:      #B07A28;
  --brass-text: #8A5C15;

  --shadow: 0 1px 2px rgba(28, 26, 23, .05);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --page: 940px;
  --prose: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:      #1A1815;
    --surface:     #24211D;
    --sunken:      #100F0D;
    --line:        #38332C;
    --line-strong: #45403A;

    --ink:   #EFEAE2;
    --ink-2: #A39C92;
    --ink-3: #6E6862;

    --mint:      #3FB795;
    --mint-text: #6BD3B4;
    --mint-soft: #123329;

    --brass:      #D9A44E;
    --brass-text: #E5BB78;

    --shadow: none;
  }
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--mint-text); text-decoration-color: color-mix(in srgb, var(--mint-text) 40%, transparent); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 4px; }

/* ── Thanh điều hướng ─────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: 11px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.brand .tick { color: var(--mint-text); }

.nav-links { display: flex; gap: 18px; flex-wrap: wrap; }
.nav-links a {
  font-size: 14.5px;
  color: var(--ink-2);
  text-decoration: none;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--mint-text); font-weight: 550; }

/* ── Khung trang ──────────────────────────────────────────────────────── */
/* Lề ngang dùng `padding-inline`, lề dọc dùng `padding-block` — CỐ Ý tách đôi.
   Mọi mục trên site đều mang hai class cùng lúc (`class="wrap section"`). Nếu
   `.wrap` ghi `padding: 0 20px` còn `.section` ghi `padding: 64px 0` thì hai
   shorthand cùng độ đặc hiệu đè nhau, và cái đứng sau thắng: lề ngang bị reset
   về 0. Trên desktop `max-width` che mất lỗi đó, xuống điện thoại là chữ dính
   sát mép màn. Thuộc tính một chiều thì không có gì để đè nhau. */
.wrap {
  max-width: var(--page);
  margin: 0 auto;
  padding-inline: 20px;
}
main { display: block; }

.section { padding-block: 64px; }
.section + .section { border-top: 1px solid var(--line); }

h1, h2, h3 { letter-spacing: -.02em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(32px, 5.5vw, 46px); line-height: 1.08; font-weight: 600; }
h2 { font-size: clamp(23px, 3.2vw, 28px); line-height: 1.2; font-weight: 600; }
h3 { font-size: 18px; line-height: 1.35; font-weight: 600; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.lede { font-size: 19px; color: var(--ink-2); max-width: var(--prose); margin: 0; }

/* ── Trang chủ · phần mở đầu ──────────────────────────────────────────── */
/* Hai cột khi đủ rộng: chữ bên trái, ảnh màn hình thật bên phải. Dưới 860px
   thì xếp dọc và ảnh lùi xuống — trên điện thoại, câu mở đầu quan trọng hơn. */
.hero {
  padding-block: 64px 56px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
/* Cột chữ là MỘT ô grid chứa một flex, không phải bốn ô grid rời.
   Để rời thì mỗi phần tử thành một hàng, và hàng bị kéo giãn cho cao bằng
   cột ảnh bên cạnh — khoảng cách giữa tiêu đề và câu mở đầu phình gấp ba. */
.hero-copy { display: flex; flex-direction: column; gap: 20px; }
/* Hai cột từ 720px chứ không phải 860.
   Ở 768 (iPad dọc, và điện thoại xoay ngang) một cột nghĩa là chữ kéo hết bề
   ngang rồi cái máy 380px nằm chơ vơ giữa một khoảng trống — vừa dài vừa loãng.
   Ngưỡng đặt ở 720 vì dưới mức đó cột chữ hẹp hơn 400px, lúc ấy tiêu đề bắt đầu
   vỡ thành bốn dòng và xếp dọc mới là đúng. */
@media (min-width: 720px) {
  .hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 32px;
    align-items: center;
  }
  .hero-shot { justify-self: center; }
}
@media (min-width: 1000px) {
  .hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 48px;
  }
}
.hero h1 .accent { color: var(--mint-text); }

/* Ảnh hero là MOCKUP: khung máy và bóng đổ đã vẽ sẵn trong file, nền trong suốt.
   Nên ở đây KHÔNG bọc thêm viền, bo góc hay shadow — bọc vào là vẽ một hình chữ
   nhật quanh cái máy đang nghiêng, và cắt cụt luôn bóng đổ của chính nó. */
.hero-shot {
  width: 100%;
  max-width: 380px;
  justify-self: center;
}
.hero-shot img { width: 100%; }

.hero-art {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  margin-top: 10px;
}
/* Ảnh nhỏ hơn khung thì để lại một mảng nền trống bên phải — ép đầy khung. */
.hero-art img, .shot img { width: 100%; }

/* Lưới hai cột cố định (thẻ có ảnh thì 260px là quá hẹp cho ảnh 3:2). */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

/* Thẻ có ảnh bìa tràn mép: bỏ padding của thẻ, trả lại cho phần chữ. */
.card-media { padding: 0; overflow: hidden; gap: 0; }
.card-media > img { width: 100%; aspect-ratio: 720 / 479; object-fit: cover; }
.card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 7px; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; }
.badge {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--ink-2);
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 11px;
}

/* ── Lưới tính năng ───────────────────────────────────────────────────── */
/* `min(260px, 100%)` chứ KHÔNG phải `260px` trần.
   Với `minmax(260px, 1fr)`, khung hẹp hơn 260 vẫn bị ép track rộng 260 và trang
   cuộn ngang được — đúng lỗi đã thấy ở 320px với lưới hai cột bên dưới. Bọc
   `min()` thì track không bao giờ vượt quá khung chứa nó. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 14px;
  margin-top: 26px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  box-shadow: var(--shadow);
}
.card h3 { font-size: 16.5px; }
.card p { margin: 0; font-size: 15px; color: var(--ink-2); }
.card .tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mint-text);
}
.card .tag.pro { color: var(--brass-text); }

/* ── Dải ảnh ──────────────────────────────────────────────────────────── */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 14px;
  margin-top: 26px;
}
.shot {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

/* ── Văn bản dài (chính sách, điều khoản) ─────────────────────────────── */
.prose { max-width: var(--prose); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.8em; }
.prose p, .prose li { color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.3em; margin-top: .7em; }
.prose li + li { margin-top: .45em; }
.prose code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--ink);
}

.callout {
  background: var(--mint-soft);
  border: 1px solid color-mix(in srgb, var(--mint) 45%, transparent);
  border-radius: 12px;
  padding: 16px 18px;
  color: var(--ink);
}
.callout p { color: inherit; margin: 0; }
.callout p + p { margin-top: .7em; }

.updated {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-3);
}

/* Bảng "chúng tôi thu thập gì" — dữ liệu, nên cho nó dạng bảng thật. */
.table-scroll { overflow-x: auto; margin-top: 1.2em; }
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 460px; }
th, td { text-align: left; padding: 11px 14px; vertical-align: top; }
thead th {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}
tbody tr + tr td { border-top: 1px solid var(--line); }
td:first-child { color: var(--ink); font-weight: 500; width: 38%; }
td:last-child { color: var(--ink-2); }
td .no { color: var(--mint-text); font-weight: 600; }

/* ── Nút ──────────────────────────────────────────────────────────────── */
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 550;
  text-decoration: none;
  border: 1px solid transparent;
}
.btn-primary { background: var(--mint); color: #FFFFFF; }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: var(--surface); }
.btn-ghost:hover { border-color: var(--ink-3); }

/* ── Chân trang ───────────────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding-block: 32px 56px;
}
.foot-inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  align-items: center;
  font-size: 14px;
  color: var(--ink-3);
}
.foot-inner nav { display: flex; flex-wrap: wrap; gap: 18px; margin-right: auto; }

/* ── Màn hẹp: siết nhịp dọc ────────────────────────────────────────────── */
/* Lề 64px giữa các mục vốn tính cho màn rộng. Trên điện thoại, mỗi mục đã xếp
   thành một cột dọc dài, cộng thêm 64px hai đầu thì trang thành ra toàn khoảng
   trống và người đọc phải cuộn qua chỗ không có gì. */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .section { padding-block: 44px; }
  .hero { padding-block: 40px 44px; gap: 24px; }
  .lede { font-size: 17px; }
  .prose h2 { margin-top: 1.8em; }
  .foot { padding-block: 26px 40px; }
}
.foot-inner a { color: var(--ink-2); text-decoration: none; }
.foot-inner a:hover { color: var(--ink); }