/* EngNote - Bài «Lướt web» trong Cộng đồng (bài Loai 6). Dùng chung cho trang công khai và Cộng đồng trong ứng dụng; chỉ dùng các biến màu chung (--card, --border, --text, --ink, --accent...). */
.lw{display:block;margin:6px 0 2px;border:1px solid var(--border);border-radius:14px;background:var(--card-2,var(--card));padding:14px;color:var(--text)}
.lw-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px}
.lw-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:800}
.lw-src{color:var(--muted);font-size:13px;font-weight:700}
.lw-t{margin:0 0 10px;font-size:17px;line-height:1.35;color:var(--ink)}
.lw-t a{color:inherit;text-decoration:none}
.lw-t a:hover{text-decoration:underline}
.lw-imgs{display:grid;grid-template-columns:repeat(var(--k,1),minmax(0,1fr));gap:4px;margin:0 0 12px;border-radius:12px;overflow:hidden}
.lw-img{display:block;min-width:0;background:var(--border)}
.lw-img img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.lw-imgs[style*="--k:1"] .lw-img img{aspect-ratio:16/9;max-height:360px}
.lw-en{margin:0 0 8px;font-size:16px;line-height:1.55;color:var(--ink)}
.lw-vi{margin:0 0 8px;font-size:15px;line-height:1.55;color:var(--text)}
.lw-vi.sub{font-size:14px;color:var(--muted);border-left:3px solid var(--border);padding-left:10px}
.lw-words{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 10px}
.lw-wl{font-size:13px;color:var(--muted);font-weight:700}
.lw-w{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:13px;text-decoration:none}
a.lw-w:hover{border-color:var(--accent)}
.lw-w b{color:var(--ink)}
.lw-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between}
.lw-btn{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;border:2px solid var(--accent);border-radius:12px;color:var(--accent);font-size:14px;font-weight:800;text-decoration:none}
.lw-btn:hover{background:var(--accent-soft)}
.lw-btn:focus-visible,.lw-w:focus-visible,.lw-t a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.lw-note{font-size:12px;color:var(--muted)}
@media (max-width:560px){.lw{padding:12px 10px}.lw-imgs{--k:1 !important}.lw-imgs .lw-img:nth-child(n+2){display:none}.lw-t{font-size:16px}}