/* ────────────────────────────────────────────────────────────────────────── Announcement banner — section đầu tiên của bảng tin (trên cả khảo sát). Cùng ngôn ngữ thiết kế iOS-card với survey.css / community-cta.css: thẻ bo 16px, dark mode qua class .dark trên . Màu accent KHÔNG cố định trong file này: mỗi loại thông báo truyền màu của nó qua biến --announcement-accent (xem ANNOUNCEMENT_BANNER_TYPES), nên thêm loại mới chỉ cần thêm màu ở constants, không phải sửa CSS. ────────────────────────────────────────────────────────────────────────── */ .announcement-banners { display: block; } .announcement-banner { --announcement-accent: #2f80ed; --announcement-accent-text: #ffffff; position: relative; display: flex; gap: 13px; background: #ffffff; border-radius: 16px; /* Vạch màu bên trái là dấu hiệu "đây là thông báo hệ thống", phân biệt ngay với thẻ khảo sát và thẻ bài viết bên dưới. */ border-left: 4px solid var(--announcement-accent); 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: 15px 16px; overflow: hidden; } .dark .announcement-banner { background: #1c1c1e; box-shadow: none; } /* Nền màu rất nhạt theo accent — color-mix để không phải khai một biến màu nền riêng cho từng loại thông báo. */ .announcement-banner::before { content: ""; position: absolute; inset: 0; background: var(--announcement-accent); opacity: 0.05; pointer-events: none; } .dark .announcement-banner::before { opacity: 0.1; } .announcement-banner__icon { position: relative; flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(0, 0, 0, 0.04); font-size: 19px; line-height: 1; } .dark .announcement-banner__icon { background: rgba(255, 255, 255, 0.08); } .announcement-banner__main { position: relative; flex: 1; min-width: 0; } .announcement-banner__title { margin: 0; font-size: 16.5px; font-weight: 700; line-height: 1.35; color: #111827; /* Tiêu đề admin nhập tự do, dài thì phải xuống dòng chứ không tràn thẻ. */ overflow-wrap: anywhere; } .dark .announcement-banner__title { color: #f5f5f7; } .announcement-banner__desc { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: #4b5563; /* pre-line: giữ xuống dòng admin gõ trong textarea, nhưng vẫn tự wrap. */ white-space: pre-line; overflow-wrap: anywhere; } .dark .announcement-banner__desc { color: #a1a1a6; } @media (max-width: 480px) { .announcement-banner { gap: 11px; padding: 13px 14px; } .announcement-banner__title { font-size: 15.5px; } .announcement-banner__desc { font-size: 14px; } } /* ────────────────────────────────────────────────────────────────────────── Biến thể "strong" — dùng cho loại cảnh báo. Tô nguyên nền accent, chữ trắng, để không lẫn với thẻ thông báo thường ngay bên cạnh. Chọn qua meta.emphasis của từng loại chứ không phải class riêng cho từng type, nên thêm loại cảnh báo mới không phải đụng vào file này. ────────────────────────────────────────────────────────────────────────── */ .announcement-banner--strong { background: var(--announcement-accent); border-left: none; /* Viền mảnh cùng tông chữ: thẻ màu nhạt (vàng) không bị chìm vào nền trang. */ border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .dark .announcement-banner--strong { background: var(--announcement-accent); box-shadow: none; } /* Nền accent đã tô đặc rồi thì lớp phủ nhạt bên dưới thành thừa. */ .announcement-banner--strong::before { display: none; } /* Nền trắng đặc cho ô icon: emoji cảnh báo ⚠️ vốn là tam giác VÀNG, đặt trên thẻ vàng mà nền ô chỉ trắng mờ thì chìm nghỉm — chỉ còn thấy dấu chấm than. Nền trắng đặc tách hẳn icon ra khỏi thẻ, dùng chung cho cả thẻ đỏ. */ .announcement-banner--strong .announcement-banner__icon { background: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); } .announcement-banner--strong .announcement-banner__title, .dark .announcement-banner--strong .announcement-banner__title { color: var(--announcement-accent-text, #ffffff); } .announcement-banner--strong .announcement-banner__desc, .dark .announcement-banner--strong .announcement-banner__desc { /* Mờ đi một chút so với tiêu đề — dùng opacity thay vì màu cố định để hợp với cả nền đỏ (chữ trắng) lẫn nền vàng (chữ tối). */ color: var(--announcement-accent-text, #ffffff); opacity: 0.92; }