/* Chỉ trang /try nạp file này.
 *
 * VÌ SAO TÁCH RA KHỎI site.css
 * 25 trang còn lại là chữ tĩnh và không dùng một lớp nào dưới đây. Nhét vào site.css là bắt cả
 * 25 trang tải thêm vài KB mãi mãi để phục vụ đúng một trang.
 *
 * Token màu KHÔNG khai lại ở đây — file này chạy sau site.css và dùng chung biến của nó. Muốn
 * đổi màu thì đổi ở site.css, nguồn bậc 1 vẫn là docs/template/*.dc.html.
 */

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

/* Hero dung chung the .wrap cua site nhung o trang nay KHONG cap be ngang: de no thang hang voi
   khu vuc lam viec full width ben duoi. Chu van de doc duoc vi .lede tu gioi han 60ch. */
.pg-hero { padding: 1.8rem 0 1rem; }
.pg-hero .wrap { max-width: none; }
.pg-hero h1 { margin-bottom: 0.4rem; }
.pg-hero .lede { color: var(--onv); max-width: 60ch; margin: 0 0 1rem; }

.pg-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.pg-chip {
  font: inherit;
  font-size: 0.88rem;
  padding: 0.5rem 0.9rem;
  min-height: 40px;
  border-radius: 50px;
  border: 1px solid var(--outv);
  background: var(--s1);
  color: var(--on);
  cursor: pointer;
  white-space: nowrap;
}

.pg-chip:hover { border-color: var(--p); }
.pg-chip[aria-pressed="true"] {
  background: var(--pc);
  border-color: var(--pc);
  color: var(--opc);
  font-weight: 500;
}

/* Nút "Mở file" bọc quanh một <input type=file> ẩn — <input> không tự trông giống nút được. */
.pg-chip.pg-file { display: inline-flex; align-items: center; color: var(--onv); }
.pg-chip.pg-file input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pg-chip.pg-file:focus-within { outline: 2px solid var(--p); outline-offset: 2px; }

/* ============ Thanh công cụ ============ */

.pg-bar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  padding: 0.45rem 0;
  border-top: 1px solid var(--outv);
  border-bottom: 1px solid var(--outv);
  background: var(--s1);
  position: sticky;
  /* Dính ngay dưới topnav. Người dùng cuộn xuống giữa tài liệu dài vẫn với được nút chèn cú pháp.
   *
   * Chiều cao topnav ĐO BẰNG JS, không gõ số. Trước 20/09/2026 chỗ này là `top: 52px` kèm chú
   * thích "topnav cao ~52px" -- một con số ước lượng chưa từng đo, và nó SAI ở cả hai chiều:
   *   - khi $Published = $true  -> badge 40px + padding 2x9.6px + viền 1px = 60.2px, thanh công
   *     cụ chui xuống dưới topnav 8px;
   *   - khi $Published = $false -> topnav chỉ còn ~42px, hở ra một khe 10px.
   * Giá trị dự phòng 52px chỉ để trang không vỡ trong khoảnh khắc trước khi playground.js chạy,
   * và để người tắt JS vẫn thấy bố cục hợp lý. */
  top: var(--pg-topnav, 52px);
  z-index: 10;
}

.pg-bar-inner {
  /* KHONG cap max-width: thanh cong cu phai chay het be ngang cho khop khu vuc lam viec ben duoi. */
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  width: 100%;
}

.pg-tool {
  font: inherit;
  font-size: 0.85rem;
  min-width: 40px;
  min-height: 40px;
  padding: 0 0.6rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--onv);
  cursor: pointer;
  font-weight: 600;
}

.pg-tool:hover { background: var(--s3); color: var(--on); }
.pg-tool .i { font-style: italic; }
.pg-tool .b { font-weight: 700; }
.pg-tool .s { text-decoration: line-through; }
.pg-tool .m { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 500; }

.pg-sep { width: 1px; height: 22px; background: var(--outv); margin: 0 0.35rem; }

/* Nut "Toan trang" noi bat hon cac nut khac vi no la loi moi doc that su -- phan con lai cua
   thanh cong cu la thao tac soan thao. */
.pg-tool.pg-strong {
  border-color: var(--outv);
  background: var(--s0);
  color: var(--p);
}
.pg-tool.pg-strong:hover { background: var(--pc); color: var(--opc); border-color: var(--pc); }

/* Ô chọn ngôn ngữ. Dùng <select> thật chứ không phải menu tự vẽ: nó gọn, chạy đúng trên di động,
   và trình đọc màn hình đã biết cách đọc nó mà không cần một dòng ARIA nào. */
#pg-lang {
  font: inherit;
  font-size: 0.85rem;
  min-height: 40px;
  padding: 0 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--outv);
  background: var(--s0);
  color: var(--on);
  cursor: pointer;
}
#pg-lang:hover { border-color: var(--p); }
.pg-spacer { margin-inline-start: auto; }

.pg-group { display: flex; align-items: center; gap: 0.4rem; }
.pg-group > .lab { font-size: 0.8rem; color: var(--onv); }

/* Năm chấm nền đọc, nhắc lại 5 nền của màn Reader trong app. Màu đặt THẲNG chứ không qua biến,
   vì đây là màu của nền đọc trong app — chúng không được đổi theo theme của trang web. */
.pg-dot {
  width: 40px; height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.pg-dot i {
  display: block;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid var(--out);
}
/* Chấm "theo hệ thống": nửa sáng nửa tối, vì nó không phải một màu mà là "màu nào cũng được,
   theo trang". Đây là mặc định. */
.pg-dot[data-pg-bg="system"] i {
  background: linear-gradient(135deg, #fff9ff 0%, #fff9ff 50%, #141218 50%, #141218 100%);
}
.pg-dot[data-pg-bg="light"] i { background: #fff9ff; }
.pg-dot[data-pg-bg="sepia"] i { background: #f4efea; }
.pg-dot[data-pg-bg="dark"]  i { background: #141218; }
.pg-dot[data-pg-bg="black"] i { background: #000000; }
.pg-dot[aria-pressed="true"] i { outline: 2px solid var(--p); outline-offset: 2px; }

/* ============ Hai tab (chỉ màn hẹp) ============ */

.pg-tabs { display: none; }

.pg-tab {
  font: inherit;
  font-size: 0.92rem;
  flex: 1;
  min-height: 48px;
  padding: 0.6rem 1rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--onv);
  cursor: pointer;
}
.pg-tab[aria-selected="true"] { color: var(--p); border-bottom-color: var(--p); font-weight: 600; }

/* ============ Khu vực làm việc ============ */

/* Khu vuc lam viec chay HET BE NGANG cua so, khong bo trong .wrap 1080px nhu chu cua site.
   Ly do: day la mot trinh soan thao, khong phai mot bai doc. Mot trinh soan bi bop con 1080px
   tren man 27 inch thi hai ben la hai dai trang trong, con khung soan lai chi rong bang nua do.
   Doi lai: tren man rat rong, dong chu trong khung xem truoc se dai. Do la danh doi co y --
   nguoi muon be ngang doc sach thi keo thanh chia doi, hoac bam "Toan trang". */
.pg-shell {
  /* 38% chu khong phai 50%: mo trang ra, thu nguoi ta can nhin la KET QUA da dung, khong phai
     nguon. Chia doi deo cho an tuong dau la mot buc tuong monospace chiem nua man hinh. Nguoi
     muon go nhieu thi keo thanh chia doi -- va luc do 50% chi cach mot cu keo. */
  --pg-split: 38%;
  display: grid;
  grid-template-columns: var(--pg-split) 6px 1fr;
  margin: 0 auto;
  min-height: 62vh;
  border-top: 0;
}

.pg-pane { min-width: 0; overflow: auto; }

.pg-pane-head {
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--onv);
  font-weight: 600;
  padding: 0.7rem 1.5rem 0.3rem;
}

#pg-src {
  display: block;
  width: 100%;
  min-height: 56vh;
  border: 0;
  resize: none;
  padding: 0.2rem 1.5rem 1.5rem;
  background: var(--s0);
  color: var(--on);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.86rem;
  line-height: 1.7;
  tab-size: 2;
}
#pg-src:focus { outline: none; }
.pg-pane.pg-edit { background: var(--s0); }
.pg-pane.pg-edit:focus-within { box-shadow: inset 2px 0 0 var(--p); }

/* Thanh kéo. `separator` có role nên phải với được bằng bàn phím — xem tabindex trong HTML. */
.pg-handle {
  background: var(--outv);
  cursor: col-resize;
  position: relative;
  touch-action: none;
}
.pg-handle::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 4px; height: 36px;
  border-radius: 4px;
  background: var(--out);
}
.pg-handle:focus-visible { outline: 2px solid var(--p); outline-offset: -2px; }

/* ============ Khung xem trước ============ */

/* LUẬT MÀU CỦA KHUNG XEM TRƯỚC — đọc trước khi thêm bất cứ thứ gì vào #pg-out.
 *
 * Mọi thứ BÊN TRONG #pg-out dùng --pv-*; mọi thứ NGOÀI nó (thanh công cụ, header khung, thanh
 * trạng thái, popover) dùng token của site.
 *
 * VÌ SAO phải có luật này — đây là một lỗi đã phát hành, không phải phòng xa:
 * trước 20/09/2026 năm nền đọc đặt `background`/`color` bằng màu CỨNG, còn khối mã, viền bảng,
 * blockquote và sáu màu token Prism lại đọc `var(--s2)`/`var(--p)`/… tức là đi theo theme SÁNG/TỐI
 * CỦA TRANG. Hai hệ màu độc lập chồng lên nhau, nên bốn trong mười tổ hợp hỏng thật:
 *   - hệ điều hành TỐI + nền đọc "Sepia"  -> chữ #2e251e trên nền khối mã #272530  (~1.05:1)
 *   - hệ điều hành SÁNG + nền đọc "Black" -> chữ #e6e0e9 trên nền khối mã #f3edf7
 * Không đọc được gì, và không có phép kiểm nào bắt được — jsdom không tính màu.
 *
 * Chú thích cũ ở mục "Khối mã" từng hứa "sáu màu bám biến của site nên tự đúng ở mọi nền". Câu đó
 * SAI: bám biến của site chính là nguyên nhân, vì nền đọc không phải theme của site.
 *
 * Hai màu KHÔNG chép được từ đâu, phải tự suy ra — ghi rõ ở đây để lần sau không ai tưởng là
 * chép nhầm: nền khối mã của "sepia" (mượn --s2 là ra một mảng tím lạnh giữa trang giấy ấm) và
 * của "black" (nền phải nhích khỏi #000 một bậc, nếu không khối mã tan vào trang). */
#pg-out {
  /* data-bg="system" cố ý KHÔNG có luật nào khớp bên dưới, nên rơi về đây và đi theo sáng/tối
     của trang. Bốn nền còn lại tự khai đủ bộ, không thừa hưởng gì từ site. */
  --pv-bg: var(--surf);
  --pv-fg: var(--on);
  --pv-rule: var(--outv);
  --pv-code-bg: var(--s2);
  --pv-accent: var(--p);
  --pv-str: var(--ok);
  --pv-num: var(--err);
  --pv-chip-bg: var(--pc);
  --pv-chip-fg: var(--opc);

  padding: 0.2rem 1.5rem 2rem;
  min-height: 56vh;
  background: var(--pv-bg);
  color: var(--pv-fg);
}

#pg-out[data-bg="light"] {
  --pv-bg: #fff9ff; --pv-fg: #1d1b20; --pv-rule: #cac4d0; --pv-code-bg: #f3edf7;
  --pv-accent: #5b42a6; --pv-str: #266c3a; --pv-num: #b3261e;
  --pv-chip-bg: #e8ddff; --pv-chip-fg: #24105d;
}
/* --pv-rule và --pv-code-bg ở đây là màu SUY RA, không có trong bảng M3 của app: hai bậc ấm
   tối dần của chính #f4efea. */
#pg-out[data-bg="sepia"] {
  --pv-bg: #f4efea; --pv-fg: #2e251e; --pv-rule: #d9cfc2; --pv-code-bg: #eae1d5;
  --pv-accent: #5b42a6; --pv-str: #266c3a; --pv-num: #b3261e;
  --pv-chip-bg: #e8ddff; --pv-chip-fg: #24105d;
}
#pg-out[data-bg="dark"] {
  --pv-bg: #141218; --pv-fg: #e6e0e9; --pv-rule: #48454f; --pv-code-bg: #272530;
  --pv-accent: #cfbcff; --pv-str: #9fd6a6; --pv-num: #f2b8b5;
  --pv-chip-bg: #4a3a8f; --pv-chip-fg: #ece0ff;
}
/* --pv-rule và --pv-code-bg cũng là màu SUY RA: trên nền #000 thì --s2 (#272530) ám tím thấy rõ,
   nên lấy #141218 -- đúng bậc "surface" của chính bảng tối. */
#pg-out[data-bg="black"] {
  --pv-bg: #000000; --pv-fg: #e6e0e9; --pv-rule: #3a3a3a; --pv-code-bg: #141218;
  --pv-accent: #cfbcff; --pv-str: #9fd6a6; --pv-num: #f2b8b5;
  --pv-chip-bg: #4a3a8f; --pv-chip-fg: #ece0ff;
}

/* Bốn mức chép từ ReaderScaleOptions của app (domain/model/AppSettings.kt). Trước đây là
   0.88/1/1.14/1.3 -- gần đúng nhưng không phải cùng con số, nên cùng một tài liệu ở app và ở web
   ra hai cỡ chữ hơi khác nhau. */
#pg-out[data-font="s"]  { font-size: 0.9rem; }
#pg-out[data-font="m"]  { font-size: 1rem; }
#pg-out[data-font="l"]  { font-size: 1.15rem; }
#pg-out[data-font="xl"] { font-size: 1.32rem; }

/* CHẶN MÀU CỦA SITE RÒ VÀO KHUNG XEM TRƯỚC — vế thứ hai của luật `--pv-*` ở trên.
 *
 * `site.css` đặt màu **thẳng lên thẻ**, không qua lớp nào:
 *     p  { color: var(--onv); max-width: 68ch; }
 *     td { color: var(--onv); }
 *     th { color: var(--on);  }
 *     a  { color: var(--p);   }
 * Bốn luật ấy **khớp cả bên trong `#pg-out`**, và `color` tường minh **thắng kế thừa**. Nghĩa là
 * đặt `color` trên `#pg-out` không đủ: chữ trong đoạn văn, ô bảng và liên kết vẫn lấy màu theo
 * **theme của trang web**, trong khi nền thì lấy theo **nền đọc** — hai hệ độc lập, chính là cái đã
 * làm khối mã không đọc được.
 *
 * Đã phát hành hỏng hai lần vì chuyện này. Lần đầu chỉ dọn các luật trong chính `playground.css`
 * mà quên rằng `site.css` cũng với tới đây: chọn nền đọc **TỐI** trên máy đang để theme **SÁNG**
 * thì cả đoạn văn lẫn bảng ra chữ xám đậm trên nền đen, gần như không đọc được.
 *
 * `inherit` chứ không phải một màu cụ thể: mọi thứ phải đi theo `--pv-fg` của nền đọc, và chỉ khai
 * ở **một** chỗ. `smoke.js` đọc `site.css`, tự tìm các thẻ được đặt màu thẳng rồi bắt buộc mỗi thẻ
 * phải có một luật vô hiệu hoá tương ứng ở đây — nên thêm một màu vào `site.css` sẽ làm đỏ phép
 * kiểm chứ không âm thầm hỏng lần thứ ba. */
#pg-out p,
#pg-out li,
#pg-out td,
#pg-out th,
#pg-out dt,
#pg-out dd,
#pg-out figcaption,
#pg-out summary { color: inherit; }

#pg-out a { color: var(--pv-accent); }

/* `p` của site bị bó 68ch. Trong khung xem trước thì bảng, khối mã và trích dẫn đều chạy hết bề
   ngang, nên riêng đoạn văn bị bó là nhìn như vỡ bố cục. Bề ngang đọc là việc của thanh kéo chia
   đôi và nút "Toàn trang" — quyết định đã ghi ở mục 3b của đặc tả. */
#pg-out p { max-width: none; }

#pg-out > :first-child { margin-top: 0.4rem; }
#pg-out h1 { font-size: 1.7em; margin: 1.2rem 0 0.6rem; }
#pg-out h2 { font-size: 1.35em; margin: 1.4rem 0 0.5rem; }
#pg-out h3 { font-size: 1.1em; margin: 1.2rem 0 0.4rem; }
#pg-out p, #pg-out li { line-height: 1.7; }
#pg-out blockquote {
  margin: 1rem 0;
  padding: 0.2rem 0 0.2rem 1rem;
  border-inline-start: 3px solid var(--pv-accent);
  color: inherit;
  opacity: 0.85;
}
#pg-out hr { border: 0; border-top: 1px solid var(--pv-rule); margin: 1.6rem 0; }
#pg-out img { border-radius: 10px; }

/* Bảng tràn ngang là lỗi kinh điển trên màn hẹp: không có wrapper thì bảng rộng kéo cả trang
   trượt ngang. `display:block` + overflow chỉ cho riêng bảng cuộn. */
#pg-out table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.92em;
}
#pg-out th, #pg-out td {
  border: 1px solid var(--pv-rule);
  padding: 0.4rem 0.7rem;
  text-align: start;
}
#pg-out th { background: color-mix(in srgb, currentColor 8%, transparent); font-weight: 600; }

#pg-out ul.contains-task-list { list-style: none; padding-inline-start: 0.3rem; }
#pg-out .task-list-item { display: flex; align-items: flex-start; gap: 0.6rem; }

/* Ô tick BẤM ĐƯỢC và ghi ngược vào nguồn (playground/57-checkbox.js).
 *
 * ĐỪ NG nới vùng chạm bằng `padding` ở đây. Đã thử và đã phát hành hỏng ngày 20/09/2026:
 * **trình duyệt bỏ qua `padding` trên `input[type=checkbox]`** (ô là một điều khiển được vẽ
 * sẵn, không phải một hộp bình thường) nhưng **vẫn áp `margin`**. Nên mẹo "nở ra bằng padding
 * rồi kéo về bằng margin âm" chỉ còn đúng một nửa: margin âm `-13px` kéo dòng chữ đè lên chính ô
 * tick, trừ `gap` 8.8px vẫn còn chồng lấn ~4px. Nhìn vào là thấy ngay, nhưng không một phép kiểm
 * nào bắt được — jsdom không dựng bố cục.
 *
 * Muốn vùng chạm lớn hơn thì phải bọc `<label>` quanh chữ (tùy chọn `label: true` của
 * markdown-it-task-lists), không phải nặn lại chính ô. Đó là một quyết định riêng, vì nó làm cả
 * dòng chữ thành vùng bấm và đụng tới việc bôi đen để chép.
 *
 * Kích thước theo `em` chứ không theo `px`: khung xem trước có bốn cỡ chữ, ô tick phải lớn theo. */
#pg-out .task-list-item input {
  accent-color: var(--pv-accent);
  width: 1.05em;
  height: 1.05em;
  flex: none;
  cursor: pointer;
  margin: 0;
  /* Kéo ô xuống cho ngang tầm chữ: `flex-start` căn theo đỉnh hộp, mà đỉnh hộp chữ cao hơn
     đỉnh chữ thực. Dùng translate chứ không dùng margin — margin ở đây đã một lần gây hoạ. */
  transform: translateY(0.22em);
}
#pg-out .task-list-item input:focus-visible { outline: 2px solid var(--pv-accent); outline-offset: 2px; }

/* Chip wiki link: `primary` trên `primaryContainer`, không gạch chân — chép diện mạo của
   WikiLinkSpan trong app. Con trỏ là `help` chứ không phải `pointer`: trên web nó KHÔNG bấm
   được, và con trỏ bàn tay sẽ là một lời hứa sai. */
.pg-wikilink {
  display: inline-block;
  /* Kế thừa từ #pg-out: chip đi theo độ sáng của NỀN ĐỌC, không theo theme site. Nền đọc sáng thì
     chip dùng cặp primaryContainer sáng, nền tối thì cặp tối -- nếu không, chọn nền "Light" trên
     máy đang để chế độ tối sẽ ra một chip tím đậm nằm giữa trang giấy trắng. */
  background: var(--pv-chip-bg);
  color: var(--pv-chip-fg);
  border-radius: 5px;
  padding: 0 0.4em;
  font-weight: 500;
  cursor: help;
  text-decoration: none;
}

/* Lộ diện một lần, lúc dựng xong lần đầu.
 *
 * Trạng thái ẩn do JS TỰ ĐẶT (`data-reveal="pending"`) chứ không viết thẳng vào CSS. Lý do là
 * một cái bẫy kinh điển: nếu CSS đặt `opacity: 0` sẵn rồi chờ JS gỡ, thì hôm nào JS hỏng hoặc bị
 * chặn, khung xem trước **ẩn vĩnh viễn** — trang trắng trơn mà không một lỗi nào. Không có thuộc
 * tính thì không có luật nào khớp, tức mặc định luôn là NHÌN THẤY.
 *
 * Chỉ chạy đúng một lần, không lặp: đây là lời chào, không phải đồ trang trí. */
#pg-out[data-reveal="pending"] { opacity: 0; transform: translateY(6px); }
#pg-out[data-reveal] { transition: opacity 0.42s ease, transform 0.42s cubic-bezier(.2,.8,.2,1); }
#pg-out[data-reveal="done"] { opacity: 1; transform: none; }

/* Tắt hoạt ảnh thì phải nhảy thẳng tới TRẠNG THÁI CUỐI, không phải bỏ luôn nội dung — đây mới là
   chỗ hay hỏng: tắt transition xong để phần tử nằm lại ở opacity 0 mãi mãi. */
@media (prefers-reduced-motion: reduce) {
  #pg-out[data-reveal] { transition: none; }
  #pg-out[data-reveal="pending"] { opacity: 1; transform: none; }
}

/* ============ Khối mã ============ */

.pg-code, #pg-out pre {
  background: var(--pv-code-bg);
  border: 1px solid var(--pv-rule);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  overflow-x: auto;
  margin: 1rem 0;
}
#pg-out code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
}
#pg-out :not(pre) > code {
  background: var(--pv-code-bg);
  border-radius: 5px;
  padding: 0.1em 0.35em;
}
.pg-code code { background: none; padding: 0; }

/* Màu token tự viết thay vì nạp một theme của Prism.
 *
 * VÌ SAO: theme của Prism mang bảng màu riêng, cố định, không biết gì về năm nền đọc ở trên —
 * đặt prism-tomorrow lên nền sepia là lệch hẳn.
 *
 * Sáu màu dưới đây bám --pv-*, tức là bám NỀN ĐỌC. Trước 20/09/2026 chúng bám --p/--ok/--err của
 * site, và đó chính là một nửa của lỗi tương phản ghi ở đầu mục "Khung xem trước": chọn nền sáng
 * trên máy để chế độ tối thì keyword ra tím nhạt #cfbcff nằm trên nền giấy trắng. */
#pg-out .token.comment,
#pg-out .token.prolog,
#pg-out .token.doctype,
#pg-out .token.cdata { opacity: 0.62; font-style: italic; }

#pg-out .token.punctuation { opacity: 0.7; }

#pg-out .token.keyword,
#pg-out .token.atrule,
#pg-out .token.important,
#pg-out .token.selector { color: var(--pv-accent); font-weight: 600; }

#pg-out .token.string,
#pg-out .token.char,
#pg-out .token.attr-value,
#pg-out .token.regex { color: var(--pv-str); }

#pg-out .token.number,
#pg-out .token.boolean,
#pg-out .token.constant,
#pg-out .token.symbol { color: var(--pv-num); }

#pg-out .token.function,
#pg-out .token.class-name,
#pg-out .token.tag,
#pg-out .token.attr-name { color: var(--pv-accent); }

#pg-out .token.operator,
#pg-out .token.entity,
#pg-out .token.url { opacity: 0.85; }

/* ============ Mermaid ============ */

.pg-mermaid { margin: 1.1rem 0; }
.pg-mermaid-src { display: none; }
.pg-mermaid-out { text-align: center; overflow-x: auto; }
.pg-mermaid-out svg { max-width: 100%; height: auto; }

/* Đang chờ: chừa chỗ để trang không giật khi sơ đồ vẽ xong. */
.pg-mermaid[data-state="pending"] .pg-mermaid-out {
  min-height: 120px;
  border: 1px dashed var(--pv-rule);
  border-radius: 10px;
}

/* Sai cú pháp khi đang gõ dở là chuyện thường. Hiện lại nguyên nguồn, viền cảnh báo, KHÔNG in
   thông báo lỗi của Mermaid ra — nó dài và không giúp gì người đang thử app. */
.pg-mermaid[data-state="error"] .pg-mermaid-src {
  display: block;
  white-space: pre-wrap;
  background: var(--errc);
  color: var(--err);
  border: 1px solid var(--err);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.82rem;
}
.pg-mermaid[data-state="error"] .pg-mermaid-out { display: none; }

/* ============ Ô quảng cáo ============ */

/* min-height cấp cho ô để trình duyệt biết dành bao nhiêu chỗ TRƯỚC khi quảng cáo tải xong —
   đó là cách tránh Cumulative Layout Shift. Thẻ <ins> được generator in sẵn vào HTML, nên chiều
   cao đã được giữ ngay từ lúc phân tích trang, trước cả khi mạng trả về gì.

   Nhưng khi quảng cáo TẮT thì <div> rỗng, và lúc đó `:empty` ở cuối file thu nó lại. Chừa 100px
   trắng trơn dưới thanh điều hướng suốt nhiều tháng để phòng một cú nhảy bố cục chưa xảy ra là
   một đánh đổi sai: CLS chỉ tính trong CHÍNH lượt tải có quảng cáo. */
.pg-adslot {
  margin: 1rem auto;
  padding: 0 1.5rem;
  display: grid;
  place-items: center;
}
.pg-adslot[data-slot="try-bottom"] { min-height: 90px; }
.pg-adslot[data-slot="try-top-mobile"] { min-height: 100px; display: none; }

/* ============ CTA cuối trang ============ */

.pg-cta {
  background: var(--s1);
  border-top: 1px solid var(--outv);
  padding: 2rem 0 2.2rem;
  text-align: center;
  margin-top: 1.5rem;
}
.pg-cta p { color: var(--onv); max-width: 56ch; margin: 0 auto 1rem; }
.pg-note {
  font-size: 0.85rem;
  color: var(--onv);
  text-align: center;
  padding: 0.9rem 1.5rem 0;
}

/* Cảnh báo file quá lớn. Căn trái chứ không giữa như .pg-note kia: nó đứng ngay dưới hàng chip,
   là phản hồi cho một thao tác vừa xảy ra, không phải một dòng chú thích chung của trang.
   `[hidden]` cần khai lại vì .pg-note đặt `padding` -- không có nó thì phần tử ẩn vẫn chiếm chỗ. */
.pg-warn {
  text-align: start;
  padding: 0 0 0.6rem;
  color: var(--err);
  max-width: 60ch;
}
.pg-warn[hidden] { display: none; }

/* ============ Màn hẹp ============ */

@media (max-width: 900px) {
  .pg-tabs { display: flex; border-bottom: 1px solid var(--outv); background: var(--s1); }

  /* Một cột, và cột nào hiện là do data-tab quyết định. Thanh kéo không còn nghĩa gì. */
  .pg-shell { grid-template-columns: 1fr; border-inline: 0; }
  .pg-handle { display: none; }
  .pg-shell[data-tab="write"] .pg-preview { display: none; }
  .pg-shell[data-tab="preview"] .pg-edit { display: none; }

  /* dvh chứ không vh: trên di động vh tính theo khung KHÔNG có thanh địa chỉ, nên bàn phím ảo
     bật lên là khung soạn bị đẩy khuất. Phải kiểm trên máy thật, DevTools không tái hiện được. */
  #pg-src { min-height: 48dvh; }
  #pg-out { min-height: 48dvh; }

  .pg-adslot[data-slot="try-top-mobile"] { display: grid; }
  .pg-adslot[data-slot="try-bottom"] { min-height: 100px; }

  .pg-bar { top: 0; }
  .pg-bar-inner { padding: 0 1rem; }
  .pg-pane-head { display: none; }
}

@media (max-width: 560px) {
  .pg-hero { padding: 1.2rem 0 0.8rem; }
  /* Thanh công cụ cuộn ngang thay vì xuống hai hàng: hai hàng ăn mất phần lớn màn hình nhỏ. */
  .pg-bar-inner { flex-wrap: nowrap; overflow-x: auto; }
  .pg-bar-inner::-webkit-scrollbar { display: none; }
}

/* ============ Ô quảng cáo rỗng thì biến mất ============ */
/* Đặt ở CUỐI FILE là có chủ ý: nó phải đứng sau quy tắc `display: grid` trong media query của
   ô mobile, vì hai selector cùng độ đặc hiệu (0,2,0) nên cái viết sau thắng. Dời lên trên là ô
   mobile hiện lại một khoảng trống 100px mà không có lỗi nào báo. */
.pg-adslot:empty { display: none; }