/* NEW-98: Người từ Lark (views/lark_people.js, #/nguoi-lark). Tiền tố lp-. Chỉ dùng biến màu của app.css (sáng / tối).
   Danh sách = thẻ (không bảng rộng) ⇒ 390 px không tràn ngang; bảng xem trước nằm trong .table-wrap (cuộn trong khung). */
.lp-lead { margin: -6px 0 12px; max-width: 900px; }
.msg.lp-warn { background: var(--warn-soft); color: var(--warn); margin: 0 0 10px; }
.msg.lp-info { margin: 0 0 10px; }
.lp-bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 12px; }
.chips.lp-chips { margin: 0; }
.lp-search { flex: 1 1 220px; max-width: 360px; min-width: 0; }
.lp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.lp-card { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.lp-who { font-size: 15px; }
.lp-recs { font-size: 13px; }
.lp-map { font-size: 13px; }
.lp-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.lp-h2 { font-size: 16px; margin: 20px 0 6px; }
.lp-how { padding: 12px 16px; margin: 16px 0; }
.lp-how summary { cursor: pointer; }
.lp-how ul { margin: 8px 0 4px; padding-left: 20px; }
.lp-how li { margin: 3px 0; }
.lp-res { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; margin: 0 0 8px; }
.lp-opt { display: flex; gap: 8px; align-items: baseline; padding: 4px 2px; cursor: pointer; overflow-wrap: anywhere; }
.lp-impact, .lp-pick-who { margin: 0 0 8px; overflow-wrap: anywhere; }
.lp-pv td { vertical-align: top; }

@media (max-width: 600px) {
  .lp-list { grid-template-columns: 1fr; }
  .lp-search { max-width: none; }
}