/* =========================================================
   Tool (sản phẩm tự làm) — danh sách + trang chi tiết
   Chỉ nạp ở /tool/, /nhom-tool/ và trang chi tiết tool.
   Dùng biến màu chung trong app.css, không tự chế mã màu.
   ========================================================= */

/* ---------- Lưới tool ---------- */
.tool-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}

.tool-card{display:flex;flex-direction:column;background:var(--white-soft);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:.25s ease}
.tool-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}

/* ---------- "Khung trình duyệt": nhìn phát biết là app ---------- */
.tool-shot{display:block;background:linear-gradient(150deg,#1c4638,#123328);padding:12px 12px 0;text-decoration:none}
.tool-bar{display:flex;align-items:center;gap:10px;padding:0 2px 10px}
.tool-dots{display:flex;gap:5px;flex:0 0 auto}
.tool-dots i{width:9px;height:9px;border-radius:50%;background:rgba(244,239,228,.32)}
.tool-url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:rgba(244,239,228,.12);border:1px solid rgba(244,239,228,.18);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700;color:rgba(244,239,228,.86);letter-spacing:.01em}
.tool-screen{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;border-radius:14px 14px 0 0;overflow:hidden;background:linear-gradient(180deg,rgba(244,239,228,.14),rgba(244,239,228,.04))}
.tool-screen .tool-img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.tool-screen-ic{color:var(--cream);opacity:.3}
.tool-screen-ic svg{width:64px;height:64px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}

/* Bản to ở trang chi tiết */
.tool-shot-lg{border-radius:var(--radius-lg);padding:14px 14px 0;margin-bottom:26px;box-shadow:var(--shadow)}
.tool-shot-lg .tool-screen{aspect-ratio:16/9}

/* ---------- Ruột thẻ ---------- */
.tool-body{padding:24px;display:flex;flex-direction:column;flex:1}
.tool-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.tool-card h3{font-size:23px;line-height:1.12;margin-bottom:8px}
.tool-card h3 a{color:inherit;text-decoration:none}
.tool-desc{color:var(--muted);font-size:14.5px;margin-bottom:14px}

.tool-feat-mini{list-style:none;display:grid;gap:7px;margin:0 0 16px}
.tool-feat-mini li{position:relative;padding-left:22px;font-size:13.5px;color:#4a5147}
.tool-feat-mini li::before{content:"";position:absolute;left:6px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--earth)}

.tool-meta-row{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-bottom:16px}
.tool-actions{display:flex;gap:10px;margin-top:auto}
.tool-actions .btn{flex:1;text-align:center}

/* ---------- Nhãn trạng thái ---------- */
.tool-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.02em;border-radius:999px;padding:6px 12px;border:1px solid var(--line);background:var(--cream);color:var(--green-deep);white-space:nowrap}
.tool-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.tool-status.is-chay{background:rgba(82,107,79,.14);border-color:rgba(82,107,79,.34);color:#3c5a3a}
.tool-status.is-demo{background:rgba(155,118,83,.14);border-color:rgba(155,118,83,.36);color:#7d5f3c}
.tool-status.is-beta{background:rgba(44,61,74,.12);border-color:rgba(44,61,74,.3);color:#2c3d4a}
.tool-status.is-noibo{background:rgba(18,51,40,.08);border-color:var(--line);color:var(--green-deep)}
.tool-status.is-sap{background:var(--paper);border-color:var(--line);color:var(--muted)}

.tool-badge{display:inline-flex;align-items:center;font-size:12px;font-weight:800;border-radius:999px;padding:6px 12px;background:var(--green-deep);color:var(--cream);white-space:nowrap}

/* ---------- Chú thích nhãn dưới danh sách ---------- */
.tool-legend{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:26px;padding:18px 22px;border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(244,239,228,.5)}
.tool-legend-title{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--earth)}
.tool-legend-item{display:inline-flex;align-items:center;gap:8px}
.tool-legend-note{font-size:13px;color:var(--muted)}

/* ---------- Trang chi tiết: hàng nút ở đầu ---------- */
.tool-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px}
.tool-domain{font-size:14px;font-weight:700;color:var(--muted)}
.tool-side-head{margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.tool-side-note{margin-top:10px;font-size:13.5px;color:var(--muted)}

.tool-feat{list-style:none;display:grid;gap:10px;margin:0 0 22px}
.tool-feat li{position:relative;padding-left:28px;font-size:15px;color:#454b43}
.tool-feat li::before{content:"✓";position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;background:var(--cream);color:var(--green-deep);font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center}

/* ---------- Màn hình nhỏ ---------- */
@media (max-width:980px){
  .tool-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .tool-body{padding:20px}
  .tool-card h3{font-size:20px}
  .tool-actions{flex-direction:column}
  .tool-hero-actions .btn{width:100%}
  .tool-legend{flex-direction:column;align-items:flex-start}
}