/* Stylesheet dùng chung cho mọi trang của markdowns.web.app.
 *
 * Trang /try nạp THÊM playground.css — file này cố ý không chứa gì của nó, để 5 loại trang còn
 * lại không phải tải byte nào cho một trang chúng không dùng.
 *
 * Trước đây mỗi trang tự mang 341 dòng CSS inline, và vì có đúng hai trang chép đôi nên "sửa một
 * chỗ quên chỗ kia" đã xảy ra một lần (07/09/2026). Nay có 30 trang (5 locale × 6 loại) nên CSS
 * tách hẳn ra một file — sửa một nơi, mọi trang đổi theo.
 *
 * Bảng màu lấy từ docs/template/Markdown Reader App v2 (Project-first).dc.html — nguồn bậc 1 theo
 * docs/design/LESSONS.md. KHÔNG lấy từ tài liệu mô tả lại. Trang cũ dùng xanh lục #2f6f5e, lệch
 * hẳn brand app; ảnh chụp và icon đều tông tím nên đặt cạnh nhau là chửi nhau.
 *
 * Dark mode có BA nhánh, giữ đúng khuôn trang cũ đã làm đúng:
 *   :root                                    -> bảng sáng đầy đủ
 *   @media (prefers-color-scheme: dark) + :root:not([data-theme="light"])
 *   :root[data-theme="dark"]                 -> để nút đổi theme thắng được cả hai chiều
 * Không màu nào được định nghĩa DUY NHẤT trong khối media, nếu không trang sẽ mượn theme của host.
 */

:root {
  /* Material 3, primary tím — chép nguyên từ khối :root của .dc.html */
  --p: #5b42a6;
  --op: #ffffff;
  --pc: #e8ddff;
  --opc: #24105d;
  --surf: #fff9ff;
  --on: #1d1b20;
  --onv: #49454f;
  --out: #79747e;
  --outv: #cac4d0;
  --s0: #ffffff;
  --s1: #f8f2fa;
  --s2: #f3edf7;
  --s3: #ece6f0;
  --ok: #266c3a;
  --okc: #d8f0dc;
  --err: #b3261e;
  --errc: #f9dedc;
  --shadow: 0 1px 2px rgba(29, 27, 32, 0.06);
  --shadow-lift: 0 12px 32px rgba(36, 16, 93, 0.14);
  --nav-bg: rgba(255, 249, 255, 0.86);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --p: #cfbcff;
    --op: #381e72;
    --pc: #4a3a8f;
    --opc: #ece0ff;
    --surf: #141218;
    --on: #e6e0e9;
    --onv: #cac4d0;
    --out: #938f99;
    --outv: #48454f;
    --s0: #1d1b20;
    --s1: #211f26;
    --s2: #272530;
    --s3: #2f2c39;
    --ok: #9fd6a6;
    --okc: #153a1f;
    --err: #f2b8b5;
    --errc: #601410;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.5);
    --nav-bg: rgba(20, 18, 24, 0.86);
  }
}

:root[data-theme="dark"] {
  --p: #cfbcff;
  --op: #381e72;
  --pc: #4a3a8f;
  --opc: #ece0ff;
  --surf: #141218;
  --on: #e6e0e9;
  --onv: #cac4d0;
  --out: #938f99;
  --outv: #48454f;
  --s0: #1d1b20;
  --s1: #211f26;
  --s2: #272530;
  --s3: #2f2c39;
  --ok: #9fd6a6;
  --okc: #153a1f;
  --err: #f2b8b5;
  --errc: #601410;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.5);
  --nav-bg: rgba(20, 18, 24, 0.86);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surf);
  color: var(--on);
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--p); text-decoration-thickness: 1px; text-underline-offset: 2px; }

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--p);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* ============ Khung ============ */

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.wrap-prose {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ============ Thanh điều hướng trên ============ */
/* Trang policy cũ hoàn toàn không có đường quay lại — đọc xong là cụt. Thanh này dính ở cả 4 loại
   trang chính là để chữa việc đó. */

.topnav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--outv);
}

.topnav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0.6rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 500;
  color: var(--on);
  text-decoration: none;
  margin-inline-end: auto;
}

.brand img { width: 28px; height: 28px; border-radius: 6px; }
.brand span { white-space: nowrap; }

.navlinks {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  font-size: 0.94rem;
}

.navlinks a { color: var(--onv); text-decoration: none; }
.navlinks a:hover { color: var(--p); text-decoration: underline; }
.navlinks a[aria-current="page"] { color: var(--p); font-weight: 500; }

/* ============ Chữ ============ */

h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 0.7rem;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin: 0 0 0.7rem;
  text-wrap: balance;
}

h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.6rem 0 0.5rem;
}

p { margin: 0 0 0.9rem; color: var(--onv); max-width: 68ch; }

.lede {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.22rem);
  color: var(--onv);
  max-width: 56ch;
  margin: 0 0 1.4rem;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p);
  margin: 0 0 0.9rem;
}

.kicker::before { content: "#"; color: var(--out); font-weight: 600; }

code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--s2);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

/* ============ Hero ============ */

.hero { padding: clamp(2.5rem, 1rem + 6vw, 5rem) 0 clamp(2rem, 1rem + 3vw, 3.5rem); }

.hero-grid {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}

@media (min-width: 880px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
}

.hero-shot { justify-self: center; }
.hero-shot img { width: min(340px, 78vw); filter: drop-shadow(var(--shadow-lift)); }

/* ============ Nút cài đặt ============ */
/* Badge là tài sản chính thức của Google: không vẽ lại, không đổi màu hay tỷ lệ, cao tối thiểu
   40px, và phải chừa khoảng trống quanh nó bằng 1/4 chiều cao. Dòng ghi nhận nhãn hiệu ở footer.
   Ảnh đã được build-web-images.ps1 cắt sát mép, nên chiều cao đặt ở đây CHÍNH LÀ chiều cao badge
   nhìn thấy — bản Google tải về có viền trong suốt bọc sẵn và viền đó không đồng nhất giữa các
   thứ tiếng, để nguyên thì bản tiếng Anh rơi xuống 37,6px. */

.badge-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}

.badge { display: inline-block; padding: 12px; margin: -12px; line-height: 0; }
.badge img { height: 48px; width: auto; }

/* Badge trong thanh nav: 40px là ngưỡng tối thiểu Google cho phép, và padding 10px chính là
   khoảng trống bằng 1/4 chiều cao mà quy định badge bắt buộc phải chừa. */
.badge-nav { padding: 10px; margin: -10px; }
.badge-nav img { height: 40px; }

.badge-note { font-size: 0.86rem; color: var(--out); margin: 0; }

/* Khối thay badge khi app chưa lên store, bật/tắt bằng $Published trong site.config.ps1.
   Không có ô nhập email vì Firebase Hosting ở đây là tĩnh thuần, không có backend nhận form —
   dựng ô input sẽ là một cái nút không làm gì. */
.coming {
  border: 1px dashed var(--out);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  background: var(--s1);
  max-width: 34rem;
}

.coming p { margin: 0 0 0.5rem; color: var(--on); font-weight: 500; }
.coming p:last-child { margin: 0; color: var(--onv); font-weight: 400; font-size: 0.94rem; }

/* ============ Mục tính năng ============ */

.section { padding: clamp(2rem, 1rem + 3vw, 3.4rem) 0; }
.section + .section { border-top: 1px solid var(--outv); }

.feature {
  display: grid;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}

@media (min-width: 880px) {
  .feature { grid-template-columns: 1fr 1fr; }
  .feature.flip .feature-text { order: 2; }
}

.feature-shot { justify-self: center; }
.feature-shot img { width: min(300px, 70vw); filter: drop-shadow(var(--shadow-lift)); }
.feature-shot.wide img { width: min(560px, 90vw); }

/* ============ Thẻ ============ */

.card {
  background: var(--s1);
  border: 1px solid var(--outv);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  margin: 0 0 1rem;
  box-shadow: var(--shadow);
}

.card p:last-child { margin-bottom: 0; }

.card-label {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--p);
  margin: 0 0 0.4rem;
}

/* Nhãn tròn INLINE ("not collected by us"), không phải khối cảnh báo — trong thân policy nó là
   một <span> đặt ngay dưới <h3>. Giữ đúng hình dáng của trang cũ, chỉ đổi sang màu tím. */
.not-collected {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  background: var(--pc);
  color: var(--opc);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  margin: 0 0 0.7rem;
}

/* ============ Quyền lợi Pro ============ */
/* ĐÚNG BA dòng. docs/MONETIZATION_PLAN.md §2: mỗi quyền lợi phải có một chốt chặn thật trong code
   (PremiumAdsGate, AutoBackupTrigger, ExportQuota). Thêm dòng thứ tư mà không có nơi khoá nó là
   mô tả sai sản phẩm — bài học đã trả giá một lần. Đây là chỗ rao thứ SÁU. */

.pro-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }

.pro-list li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  background: var(--pc);
  color: var(--opc);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  font-weight: 500;
}

.pro-list li::before { content: "✓"; font-weight: 700; line-height: 1.5; }

/* ============ Trang tài liệu (privacy / terms) ============ */

.masthead { border-bottom: 1px solid var(--outv); background: var(--s1); }

.masthead-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 2rem;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  font-size: 0.88rem;
  color: var(--out);
  margin: 0;
}

.meta-row strong { color: var(--onv); font-weight: 500; }

main { display: block; }

.layout {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2.2rem 1.5rem 3rem;
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 880px) {
  .layout { grid-template-columns: 200px minmax(0, 700px); }
}

.toc { display: none; }

@media (min-width: 880px) {
  .toc {
    display: block;
    position: sticky;
    top: 5rem;
    align-self: start;
    font-size: 0.9rem;
  }
}

.toc-label {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--out);
  margin: 0 0 0.6rem;
}

.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.toc a { color: var(--onv); text-decoration: none; }
.toc a:hover { color: var(--p); text-decoration: underline; }

.doc { min-width: 0; }

.clause { margin: 0 0 2.2rem; scroll-margin-top: 5rem; }

.clause-head { display: flex; align-items: baseline; gap: 0.7rem; margin: 0 0 0.6rem; }

.clause-num {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85rem;
  color: var(--out);
}

.clause h2 { margin: 0; }

.table-wrap { overflow-x: auto; margin: 0 0 1rem; }

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92rem;
  min-width: 30rem;
}

th, td {
  text-align: start;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--outv);
  vertical-align: top;
}

th { color: var(--on); font-weight: 600; background: var(--s2); }
td { color: var(--onv); }

/* ============ FAQ ============ */

.faq-group { margin: 0 0 2rem; }

.faq details {
  border: 1px solid var(--outv);
  border-radius: 12px;
  padding: 0.2rem 1rem;
  margin: 0 0 0.6rem;
  background: var(--s1);
}

.faq summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--on);
  padding: 0.75rem 0;
  list-style-position: inside;
}

.faq details[open] summary { color: var(--p); }
.faq details p { margin: 0 0 0.9rem; }

/* ============ Footer ============ */

footer {
  border-top: 1px solid var(--outv);
  background: var(--s1);
  margin-top: 2rem;
}

.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  display: grid;
  gap: 2rem;
}

@media (min-width: 720px) {
  .footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

/* Nhan cot footer la <p class="foot-h">, KHONG phai <h2>.
   Ba nhan dieu huong nay tung la <h2>, nen moi trang deu co ba heading cuoi cung khong noi gi ve
   noi dung trang -- dan cau truc heading ma trinh doc man hinh va Google doc. Chung van phai noi
   bat ve thi giac, nen giu nguyen kieu chu; chi doi the.
   Hai lop (.footer-col .foot-h) thang .footer-col p o duoi bat ke thu tu, nen khong phai lo
   margin/font-size cua luat do de len. */
.footer-col .foot-h {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--out);
  margin: 0 0 0.7rem;
  font-weight: 600;
}

.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.footer-col a { color: var(--onv); text-decoration: none; }
.footer-col a:hover { color: var(--p); text-decoration: underline; }
.footer-col p { margin: 0 0 0.4rem; font-size: 0.94rem; }

.contact-card {
  background: var(--s0);
  border: 1px solid var(--outv);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
}

.contact-card p { color: var(--on); margin: 0; }
.contact-card .email { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--p); margin-top: 0.35rem; }

.langs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: 0.9rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--outv);
}

.langs a { color: var(--onv); text-decoration: none; }
.langs a:hover { color: var(--p); text-decoration: underline; }
.langs a[aria-current="true"] { color: var(--p); font-weight: 500; }

.legal { font-size: 0.84rem; color: var(--out); display: grid; gap: 0.35rem; }
.legal p { color: var(--out); margin: 0; max-width: none; }

/* Bản dịch thiếu: trang pháp lý chỉ có bản tiếng Anh. Nói thẳng ra thay vì im lặng đưa tiếng Anh
   cho người đọc đang ở bản tiếng khác. */
.lang-note {
  background: var(--s2);
  border: 1px solid var(--outv);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  font-size: 0.92rem;
  margin: 1.4rem 0 0;
  max-width: 60ch;
}

.lang-note p { margin: 0; color: var(--onv); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Cookie banner.
 *
 * Neo o day duoi man hinh chu khong phai modal giua man: modal chan ca trang de doi mot cau tra loi
 * ma chung ta khong thuc su can gap, va tren dien thoai no che dung cai nut tai ve -- thu duy nhat
 * trang nay ton tai de nguoi ta bam.
 *
 * padding-bottom cong them env(safe-area-inset-bottom): tren iPhone thanh gach home nam de len
 * 34px cuoi man, khong tru ra thi hai cai nut nam duoi no.
 *
 * z-index 50 de nam tren header dinh (.topnav) khi cuon. */
.cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1.2rem;
  padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
  background: var(--s2);
  border-top: 1px solid var(--outv);
  box-shadow: var(--shadow-lift);
  font-size: 0.92rem;
}

.cookie-bar[hidden] { display: none; }

.cookie-bar p {
  margin: 0;
  color: var(--onv);
  max-width: 68ch;
}

.cookie-bar a { color: var(--p); }

.cookie-actions { display: flex; gap: 0.6rem; flex-shrink: 0; }

/* Cao 44px: nguong vung cham toi thieu, khong phai cho dep. Hai nut nam canh nhau o mep duoi man
   hinh la cho de bam nham nhat trong ca trang. */
.cookie-btn {
  min-height: 44px;
  padding: 0 1.1rem;
  border-radius: 22px;
  border: 1px solid var(--out);
  background: transparent;
  color: var(--on);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.cookie-btn:hover { background: var(--s3); }

.cookie-btn-primary {
  background: var(--p);
  border-color: var(--p);
  color: var(--op);
}

.cookie-btn-primary:hover { background: var(--p); filter: brightness(1.08); }

.cookie-btn:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; }

@media (max-width: 560px) {
  .cookie-bar { justify-content: stretch; }
  .cookie-actions { width: 100%; }
  .cookie-btn { flex: 1; }
}

/* ============ Đường vòng sang trang trải nghiệm ============ */
/* Nằm ngay dưới badge Play ở hero. KHÔNG làm nó trông như một nút thứ hai ngang hàng badge:
   badge vẫn là đích chính, đây chỉ là lời mời cho người còn ngờ. */
.hero-try {
  margin: 0.9rem 0 0;
  font-size: 0.96rem;
}

.hero-try a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  color: var(--p);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.hero-try a:hover { opacity: 0.8; }