/* ═══════════════════════════════════════════════════════════════════
   tools.css — trang Công cụ (tools.html).
   Nạp SAU legal.css và dùng lại toàn bộ khung của nó: thanh trên, nút ngôn
   ngữ, bảng màu, chân trang, kiểu chữ trong .lg-wrap. File này chỉ thêm phần
   RIÊNG của trang: thẻ công cụ, nút tải, ô gập chi tiết.

   Thêm công cụ mới = chép nguyên một <article class="tl-card"> trong
   tools.html rồi đổi nội dung. Không phải sửa CSS.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- phông chữ: ĐỒNG BỘ VỚI TRANG CHỦ ----------
   legal.css khai Bricolage Grotesque + Manrope (dựng riêng cho hai trang pháp
   lý). Trang chủ dùng Be Vietnam Pro cho CẢ tiêu đề lẫn chữ thường, và
   JetBrains Mono cho chữ đơn cách — chép nguyên ba dòng khai báo từ index.html.
   Khai lại ba BIẾN ở :root thay vì sửa từng chỗ: tools.css nạp sau legal.css
   nên thắng, và mọi quy tắc trong legal.css (thân trang, thanh trên, nút ngôn
   ngữ, chân trang, <code>) đều đọc phông qua đúng ba biến này.
   KHÔNG sửa legal.css: privacy/terms đã qua Google duyệt thương hiệu. */
:root{
  --font-display:'Be Vietnam Pro','Segoe UI',sans-serif;
  --font-primary:'Be Vietnam Pro','Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',Consolas,monospace;
}
/* Cỡ chữ của thanh trên: trang chủ 17px cho tên thương hiệu và chữ mono 11.5px
   cho nút ngôn ngữ (legal.css: 16px và chữ thường 12px). */
.lg-brand span{font-size:17px}
.ldl-btn{font-family:var(--font-mono);font-size:11.5px;font-weight:600;letter-spacing:0}
.lg-home{font-size:13.5px}
/* Heading của trang chủ siết khoảng chữ -.025em (h2,h3) — Be Vietnam Pro rộng
   hơn Bricolage nên nếu không siết, tiêu đề trông lỏng hơn trang chủ. */
.lg-wrap h2,.lg-wrap h3{letter-spacing:-.025em}

.tl-wrap{max-width:880px}

/* Dòng giới thiệu dưới tiêu đề. .lg-updated là kiểu dòng "cập nhật lần cuối"
   (chữ mono nhỏ, có vạch kẻ dưới) — không hợp cho một câu mô tả. */
.lg-wrap .tl-sub{
  font-family:var(--font-primary);font-size:16px;line-height:1.7;
  color:var(--ink-soft);border-bottom:0;padding-bottom:0;margin:0 0 30px;
}

/* ---------- thẻ công cụ ---------- */
.tl-card{
  position:relative;background:var(--paper);
  border:1px solid var(--line-2);border-radius:18px;
  padding:clamp(18px,3vw,28px);margin:0 0 22px;
}
/* vệt màu mảnh ở mép trên: đủ để thẻ có điểm nhấn, không giành sự chú ý của nút tải */
.tl-card::before{
  content:"";position:absolute;left:20px;right:20px;top:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--pink),var(--violet),transparent);
}
.tl-top{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:18px;margin-bottom:14px;
}
.tl-id{display:flex;align-items:center;gap:14px;min-width:0}
.tl-ico{
  flex:0 0 auto;width:48px;height:48px;border-radius:14px;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--pink),var(--violet));
  box-shadow:0 8px 22px rgba(240,24,112,.28);
}
.tl-ico svg{width:24px;height:24px}
/* ba class: phải thắng `.lg-wrap h2` (margin 40px) và `.lg-wrap h2:first-of-type` */
.lg-wrap .tl-card .tl-name{
  font-size:clamp(20px,3vw,25px);line-height:1.2;margin:0 0 7px;padding:0;
}
.tl-tags{display:flex;gap:8px;flex-wrap:wrap}
.tl-tag{
  font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.8px;
  text-transform:uppercase;padding:3px 10px;border-radius:100px;
  border:1px solid var(--line-2);color:var(--ink-soft);background:var(--glass);
}
.lg-wrap .tl-desc{margin:0;font-size:15px}

/* ---------- nút tải ----------
   Cùng ngôn ngữ thị giác với nút "Tải xuống cho Windows" ở trang chủ:
   chữ nhật bo 14px, gradient hồng, một dòng chính + một dòng phụ chữ mono.
   `.lg-wrap a` gán màu hồng + gạch chân cho MỌI liên kết trong thân trang,
   nên phải khai lại bằng a.tl-dl (độ ưu tiên cao hơn). */
.lg-wrap a.tl-dl{
  display:inline-flex;align-items:center;gap:13px;flex:0 0 auto;
  padding:11px 24px 11px 20px;border-radius:14px;border:0;
  color:#fff;text-decoration:none;
  background:linear-gradient(115deg,#FF5CB0,#FF2D8F 60%,#F01870);
  box-shadow:0 10px 30px rgba(240,24,112,.35);
  transition:transform var(--dur-base) var(--ease-smooth),box-shadow var(--dur-base) var(--ease-smooth);
}
.lg-wrap a.tl-dl:hover{
  color:#fff;border:0;transform:translateY(-3px);
  box-shadow:0 16px 44px rgba(240,24,112,.5);
}
.lg-wrap a.tl-dl:active{transform:scale(.97)}
.lg-wrap a.tl-dl:focus-visible{outline:2px solid #fff;outline-offset:3px}
.tl-dl svg{width:22px;height:22px;flex:0 0 auto}
.tl-dl-txt{display:flex;flex-direction:column;gap:2px;line-height:1.15;text-align:left}
.tl-dl-txt b{font-size:15.5px;font-weight:800;color:#fff;white-space:nowrap}
.tl-dl-txt i{
  font-family:var(--font-mono);font-style:normal;font-size:11.5px;font-weight:600;
  letter-spacing:.2px;opacity:.85;white-space:nowrap;
}

/* ---------- ô gập chi tiết ---------- */
.tl-fold{border-top:1px solid var(--line);margin-top:18px}
.tl-fold>summary{
  list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;gap:10px;
  padding:14px 0 4px;font-size:14px;font-weight:700;color:var(--ink-soft);
  transition:color var(--dur-base) var(--ease-smooth);
}
.tl-fold>summary::-webkit-details-marker{display:none}
.tl-fold>summary::after{
  content:"";width:8px;height:8px;margin-left:2px;flex:0 0 auto;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--dur-base) var(--ease-smooth);
}
.tl-fold[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
.tl-fold>summary:hover{color:#fff}
.tl-fold>summary:focus-visible{outline:2px solid var(--pink);outline-offset:4px;border-radius:6px}
/* ô gập lồng bên trong (Windows chặn file?) — không cần thêm vạch kẻ */
.tl-fold .tl-fold{border-top:0;margin-top:6px}
.tl-fold .tl-fold>summary{padding-top:6px;font-weight:600}

.tl-card ol{margin:0 0 16px;padding-left:22px;color:var(--ink-soft)}
.tl-card ol li{margin-bottom:9px;padding-left:4px}
.tl-card ol li::marker{color:var(--pink);font-weight:700}
.tl-card h3{margin-top:22px}
.tl-fold>summary + h3{margin-top:12px}

/* khối "cần biết trước khi chạy" — dùng lại .lg-card của trang pháp lý */
.tl-card .lg-card{margin:22px 0 14px}
.tl-card .lg-card h3{margin-top:0}

/* mã SHA-256: một dòng mono, tự ngắt ở bất kỳ ký tự nào để không đẩy ngang trang */
.tl-sha{margin:6px 0 0;font-size:13px;color:var(--ink-dim)}
.tl-hash{
  display:block;margin-top:6px;word-break:break-all;line-height:1.5;
  font-size:12px;user-select:all;
}

.lg-wrap .tl-help{margin:26px 0 0;font-size:14px}

/* Ghi chú "chỉ có tiếng Việt" chỉ có nghĩa với người đọc thứ tiếng khác.
   i18n-web.js đặt thuộc tính lang của <html> mỗi lần đổi ngôn ngữ. */
.lg-wrap .tl-langnote{font-size:13px;color:var(--ink-dim);margin:0 0 14px}
html[lang="vi"] .tl-langnote{display:none}

@media(max-width:560px){
  .tl-top{align-items:stretch}
  .lg-wrap a.tl-dl{width:100%;justify-content:center}
  .tl-ico{width:42px;height:42px;border-radius:12px}
  .tl-ico svg{width:21px;height:21px}
}
@media (prefers-reduced-motion:reduce){
  .lg-wrap a.tl-dl,.tl-fold>summary::after{transition:none}
  .lg-wrap a.tl-dl:hover{transform:none}
}