/* Trang Thông báo: cột hẹp cho dễ đọc, màu lấy từ biến của style.css */
.notices { max-width: 820px; padding-bottom: 48px; }
.notices h1 { font: 800 34px/1.15 var(--serif); color: var(--ink); margin: 0 0 18px; letter-spacing: -.01em; }

.backup {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 20px; margin-bottom: 24px;
  border-color: color-mix(in srgb, var(--gold) 55%, var(--line));
  background: color-mix(in srgb, var(--gold) 9%, var(--surface));
}
.backup h2 { font: 700 20px/1.25 var(--serif); color: var(--ink); margin: 0 0 4px; }
.backup p { margin: 0; color: var(--text); font-size: 14px; }
.backup .btn { flex: none; }

.notice-state { color: var(--muted); text-align: center; padding: 28px 0; margin: 0; }
.notice-list { display: flex; flex-direction: column; gap: 14px; }
.notice { padding: 18px 20px; }
.notice.pinned { border-color: var(--accent); }
.notice h2 { font: 700 19px/1.3 var(--serif); color: var(--ink); margin: 0; overflow-wrap: anywhere; }
.notice-content { margin: 8px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.notice-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; }
.notice-date { color: var(--muted); margin-left: auto; }
.notice-pin { color: var(--accent); font-weight: 500; }
.notice-badge {
  --c: var(--muted);
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
}
.notice-badge.schedule { --c: var(--t3); }
.notice-badge.maintain { --c: var(--t2); }
.notice-badge.incident { --c: var(--accent); }

@media (max-width: 560px) {
  .notices h1 { font-size: 28px; margin-bottom: 14px; }
  .backup { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; margin-bottom: 18px; }
  .backup .btn { width: 100%; }
  .notice { padding: 16px; }
  .notice h2 { font-size: 18px; }
}