/* =========================================================================
   docs-tool.css — kiểu bổ sung cho bộ bài "một nút một bài" của trang Docs.

   🔥 MỘT FILE RIÊNG, KHÔNG SỬA shared/css. Bốn tệp `shared/css/*` là của cả
      site và đang có người khác chỉnh; chèn thêm luật vào đó là hai người sửa
      một file. File này chỉ trang Docs nạp, gỡ đi cũng không ảnh hưởng trang nào.

   🔥 VÌ SAO CẦN: bản Docs cũ KHÔNG CÓ BẢNG NÀO (đếm được: 0 thẻ `<table>`), nên
      CSS của site chưa từng cần kiểu cho bảng — chỉ có `.tbl` dùng ở trang quản
      trị. Bộ bài mới có ~60 bảng (mỗi bài một bảng "Vị trí trên thanh Ribbon"),
      để trần thì trình duyệt vẽ bảng không viền, chữ dính nhau.

   ⚠️ KHÔNG đặt class lên chính thẻ `<table>`. Bộ lọc HTML của máy chủ
      (`api/forum/sanitize.php`, hồ sơ 'docs') khai `'table' => []` — tức bảng
      KHÔNG được giữ thuộc tính nào, `class` bị xoá sạch lúc lưu vào `site_docs`.
      Chỉ `div` và `span` mới được giữ `class`. Nên bảng bọc trong
      `<div class="doc-tbl">` và luật viết theo con.

   Dùng biến màu sẵn có của site (`--border`, `--card`, `--text-muted`…) nên tự
   theo cả bản Sáng lẫn bản Tối, không phải khai hai lần.
   ========================================================================= */

/* ── Bảng ─────────────────────────────────────────────────────────────── */
.doc-tbl {
  margin: 14px 0 18px;
  overflow-x: auto;                 /* bảng rộng thì cuộn TRONG khung của nó,
                                       không đẩy cả trang trượt ngang */
}

.doc-tbl table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  line-height: 1.55;
}

.doc-tbl th,
.doc-tbl td {
  border: 1px solid var(--border);
  padding: 8px 11px;
  text-align: left;
  vertical-align: top;
}

.doc-tbl th {
  background: color-mix(in srgb, var(--text) 6%, var(--card));
  font-weight: 600;
  white-space: nowrap;
}

/* Cột đầu của bảng hai cột (Thành phần / Giá trị) là nhãn — cho nó hẹp lại
   để cột giá trị được rộng, đọc dễ hơn. */
.doc-tbl table tr > *:first-child { width: 34%; }

/* ── Khối ghi chú ─────────────────────────────────────────────────────── */
/* 🔥 CLASS RIÊNG, KHÔNG MƯỢN `.callout` CỦA SITE — đã trả giá 09/09/2026.
      `home/pages.css` khai `.callout { display: grid; grid-template-columns: 22px 1fr }`
      — cột đầu 22px dành cho một `<svg>` biểu tượng. Các khối `.callout` viết tay
      trong trang đều có `<svg>` rồi mới đến `<p>`; còn `<p>` của bộ sinh không có
      gì đứng trước nên rơi thẳng vào cột 22px đó, chữ bị bóp thành một cột hẹp,
      mỗi chữ một dòng.

      Và KHÔNG thể thêm `<svg>`: thẻ đó không nằm trong danh sách cho phép của bộ
      lọc, nó bị tháo vỏ lúc lưu vào CSDL — bản tĩnh đẹp mà bản CSDL lại vỡ.

      Mượn class của site là phụ thuộc vào RUỘT của nó, mà ruột đó người khác đang
      sửa. Hai class dưới đây là của riêng bộ này. */
.doc-note {
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--text) 4%, var(--card));
  font-size: 13.5px;
  line-height: 1.6;
}
.doc-note p { margin: 0; }

/* Chỗ đặt ảnh chưa chụp — viền nét đứt để phân biệt ngay với ghi chú thật:
   đây là việc CÒN PHẢI LÀM, không phải nội dung. */
.doc-note--anh {
  border-left-style: dashed;
  border-left-color: var(--text-muted);
}

/* Dòng Nhóm · Môi trường · Bản quyền, ngay dưới phần mở đầu mỗi bài. */
.doc-meta {
  margin: 14px 0 20px;
  padding: 9px 12px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text) 5%, var(--card));
  font-size: 13px;
  color: var(--text-muted);
}
.doc-meta p { margin: 0; }
.doc-meta b { color: var(--text); }

.doc-anh-ma {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Ảnh và chú thích ─────────────────────────────────────────────────── */
/* `img { max-width:100%; height:auto }` đã có sẵn ở `base.css` — ảnh khai
   `width="1200"` vẫn co vừa khung, chỉ dùng số đó làm tỉ lệ để trang không
   giật bố cục lúc ảnh tải xong. Ở đây chỉ thêm viền và chú thích. */
.docs__body img {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 10px 0 4px;
}

.docs__body p > i {
  display: block;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* ── Đề mục trong bài ─────────────────────────────────────────────────── */
/* Bài sinh ra dùng h3 cho mục cấp 1 và h4 cho mục con (h1/h2 không nằm trong
   danh sách thẻ được phép — xem README của bộ sinh). Cho chúng khoảng thở. */
.docs__body h3 { margin: 26px 0 8px; }
.docs__body h4 { margin: 18px 0 6px; font-size: 15px; }

/* ── Nhãn "mới ở bản ..." trên đề mục ───────────────────────────────────
   Gắn vào <h3> của phần vừa thêm, để người đã đọc tài liệu từ trước biết
   ngay khúc nào là mới mà không phải dò lại cả bài.
   Cố ý nhỏ và không in đậm: đề mục vẫn phải là thứ đọc trước. */
.docs__body h3 .doc-moi {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: 2px;
  white-space: nowrap;
}