/* /assets/lumen/blog_detail.css — v4.1.0 */
:root{
  --lx-ink:#0f172a; --lx-muted:#475569; --lx-ring:#e2e8f0; --lx-soft:#f8fafc;
  --lx-brand:#2563eb; --lx-brand2:#22d3ee; --lx-grad: linear-gradient(135deg, var(--lx-brand), var(--lx-brand2));
}
.lx-bgrid{ display:grid; grid-template-columns:1fr; gap:14px }
@media (min-width: 980px){ .lx-bgrid{ grid-template-columns: 2fr 1fr; } }
.lx-article, .lx-side{ background:#fff; border:1px solid var(--lx-ring); border-radius:16px; overflow:hidden }
.lx-article .lx-body, .lx-side .lx-body{ padding:16px }
.lx-thumb{ position:relative; background:var(--lx-soft); border-bottom:1px solid var(--lx-ring); aspect-ratio: 16/9; overflow:hidden }
.lx-thumb > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.lx-meta{ display:flex; gap:10px; flex-wrap:wrap; color:var(--lx-muted); font-size:13px }
.lx-share{ display:flex; gap:8px; flex-wrap:wrap }
.lx-share a{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--lx-ring); padding:8px 10px; border-radius:10px; color:var(--lx-ink); text-decoration:none }
.lx-share a:hover{ background:#f1f5f9; text-decoration:none }

/* Comments (reuse from detail.css sizes) */
.lx-c-head{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.lx-c-list{ display:grid; gap:10px; margin-top:10px }
.lx-c{ background:#fff; border:1px solid var(--lx-ring); border-radius:12px; padding:12px }
.lx-stars{ display:inline-flex; gap:2px; vertical-align:middle }
.lx-star{ width:16px; height:16px; display:inline-block } .lx-star svg{ width:100%; height:100% }
.lx-star.filled path{ fill:#f59e0b } .lx-star path{ fill:#e2e8f0 }

.lx-form{ background:#fff; border:1px solid var(--lx-ring); border-radius:12px; padding:12px; margin-top:10px }
.lx-form label{ display:block; font-size:14px; margin:8px 0 4px }
.lx-input, .lx-text{ width:100%; border:1px solid var(--lx-ring); border-radius:10px; padding:10px }
.lx-text{ min-height:120px }
.lx-rate{ display:flex; gap:8px; align-items:center }
.lx-rate input{ appearance:none; width:0; height:0; position:absolute; }
.lx-rate label{ cursor:pointer } .lx-rate .lx-star path{ transition: fill .2s ease }
.lx-rate input:checked ~ label .lx-star path{ fill:#f59e0b }

/* Helpers */
.lx-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; min-height:44px; border-radius:12px; background:var(--lx-grad); color:#fff; border:none; text-decoration:none }
.lx-small{ font-size:12px; color:var(--lx-muted) }