/* ==========================================================================
 * CỘNG ĐỒNG: nút trong Menu, nút trên đầu chat Thế giới, popup cảm ơn theo cấp quán.
 * ========================================================================== */
.community-icon { display: block; width: 18px; height: 18px; flex: 0 0 auto; fill: currentColor; }

/* Menu */
.menu-community-row { margin-top: 10px; }
.menu-community { width: 100%; min-height: 44px; flex-direction: row; gap: 8px; text-decoration: none; font-size: 14px; }

/* Đầu cửa sổ chat Thế giới: chỉ ở mục Thế giới, luôn hiện kể cả màn dọc (thay cho nút Tìm bạn đang ẩn) */
.sc-community { flex-direction: row; gap: 5px; text-decoration: none; white-space: nowrap; }
.sc-community .community-icon { width: 14px; height: 14px; }
.sc-panel:not([data-nav="world"]) .sc-community { display: none; }
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .sc-head-actions .btn.sc-community { display: inline-flex; }
  .sc-panel:not([data-nav="world"]) .sc-head-actions .btn.sc-community { display: none; }
}

/* Popup cảm ơn */
.modal.community-card, body.portrait .modal.community-card { --cm-inset: clamp(16px, 4vw, 20px); width: min(420px, 100%); padding: 0 0 20px; overflow-x: hidden; text-align: left; }
.community-card > * { margin-left: var(--cm-inset); margin-right: var(--cm-inset); }
.community-card .cm-banner { margin: 0 0 16px; padding: 12px var(--cm-inset) 10px; display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .3);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .14) 0 9px, transparent 9px 18px), linear-gradient(#ff8fb8, #e8508a); border-bottom: 3px solid var(--ink); }
.community-card .cm-banner h2 { margin: 0; font-size: 24px; color: #fff; }
.community-card .cm-heart { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--ink); border-radius: 50%; background: #fff; color: #e8508a; font-size: 20px; line-height: 1; text-shadow: none; box-shadow: 0 2px 0 var(--ink); }
/* Set horizontal margins here too: .modal p overrides the child inset above. */
.community-card p { margin: 0 var(--cm-inset) 12px; font-size: 14px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.community-card .cm-lead { font-size: 15px; }
.community-card .cm-ask { font: 800 15px/1.5 var(--display); color: var(--ink); }
.community-card .cm-btns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 16px; }
.community-card [data-cm-support], .community-card [data-cm-later] { min-height: 44px; }
.community-card .cm-join { margin-top: 0; min-height: 48px; flex-direction: row; gap: 9px; text-decoration: none; font-size: 17px; }
.community-card .cm-join .community-icon { width: 22px; height: 22px; }
@media (max-height: 420px) and (min-aspect-ratio: 3/2) {
  .modal.community-card, body.portrait .modal.community-card { width: min(460px, 100%); padding-bottom: 16px; }
  .community-card .cm-banner { margin-bottom: 12px; }
}