/* ────────────────────────────────────────────────────────────────────────── Community CTA — thẻ mời tham gia nhóm Facebook, đứng ngay sau khảo sát ở đầu bảng tin. Cùng ngôn ngữ thiết kế iOS-card với survey.css: thẻ trắng bo 16px, dark mode qua class .dark trên . Accent ở đây là xanh Facebook (#0866ff) để nhận ra ngay đây là link ra Facebook. ────────────────────────────────────────────────────────────────────────── */ .community-cta { position: relative; background: #ffffff; border-radius: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 0.5px 0 rgba(0, 0, 0, 0.04); margin-bottom: 12px; padding: 16px; overflow: hidden; } .dark .community-cta { background: #1c1c1e; box-shadow: none; } /* Vệt sáng nhạt góc phải để thẻ không phẳng như thẻ khảo sát bên trên. */ .community-cta::after { content: ""; position: absolute; top: -60px; right: -60px; width: 160px; height: 160px; border-radius: 50%; /* closest-side: gradient tắt hẳn ở mép hộp, không thì overflow cắt thành vệt vuông nhìn rõ mồn một trên nền tối. */ background: radial-gradient(circle closest-side, rgba(8, 102, 255, 0.16), rgba(8, 102, 255, 0)); pointer-events: none; } /* ── Bố cục: ảnh xem trước bên trái, nội dung bên phải ── */ .community-cta__body { position: relative; display: flex; gap: 14px; } .community-cta__main { flex: 1; min-width: 0; } /* Ảnh xem trước (og:image của nhóm). Khổ dọc 3:4 vì ảnh nhóm hay là poster. */ .community-cta__thumb { flex-shrink: 0; width: 82px; /* Tỉ lệ cố định: chỗ ảnh được giữ sẵn nên ảnh tải xong không đẩy layout. */ aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: rgba(8, 102, 255, 0.08); } .community-cta__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 400px) { .community-cta__thumb { width: 64px; } } /* ── Header ── */ .community-cta__head { position: relative; display: flex; align-items: flex-start; gap: 12px; } .community-cta__icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, #0866ff, #0a4fd6); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(8, 102, 255, 0.3); } .community-cta__heading { flex: 1; min-width: 0; } .community-cta__kicker { font-size: 11px; font-weight: 700; color: #0866ff; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 3px; } .dark .community-cta__kicker { color: #6ea8ff; } .community-cta__title { font-size: 16px; font-weight: 700; line-height: 1.35; color: #1c1c1e; margin: 0; } .dark .community-cta__title { color: #f2f2f7; } /* Hàng thông tin nhóm: công khai / số thành viên */ .community-cta__meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 5px 0 0; font-size: 12.5px; font-weight: 500; color: #0866ff; } .dark .community-cta__meta { color: #6ea8ff; } .community-cta__meta svg { flex-shrink: 0; } .community-cta__dot { opacity: 0.55; } .community-cta__copy { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: rgba(60, 60, 67, 0.6); } .dark .community-cta__copy { color: rgba(235, 235, 245, 0.5); } /* ── Hàng dưới: nút tham gia ── */ .community-cta__foot { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 14px; } .community-cta__join { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: 12px; background: #0866ff; color: #fff; font-size: 14.5px; font-weight: 600; text-decoration: none; box-shadow: 0 2px 10px rgba(8, 102, 255, 0.28); -webkit-tap-highlight-color: transparent; transition: background 0.15s ease, transform 0.1s ease; } .community-cta__join:hover, .community-cta__join:focus { background: #0a58e0; color: #fff; text-decoration: none; } .community-cta__join:active { transform: scale(0.97); } @media (max-width: 380px) { /* Máy nhỏ: nút chiếm cả hàng cho dễ bấm. */ .community-cta__join { width: 100%; } }