/* Nut dong bo + thong bao nho (toast). (Tach tu styles.css - nap theo DUNG thu tu trong index.html) */

/* ---------- Nut "Đồng bộ" + "Đánh dấu đã đọc hết" canh tieu de Hoi thoai ---------- */
.section-actions { display: inline-flex; align-items: center; gap: 6px; }
.small-btn.icon-only { width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.small-btn.icon-only:hover { color: var(--success); border-color: #b7e8cf; background: #e9f9f1; }
.sync-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px;
  color: var(--primary); border-color: var(--primary-soft-2); background: var(--primary-soft); font-weight: 600;
}
.sync-btn:hover { color: #fff; background: var(--grad); border-color: transparent; box-shadow: 0 6px 14px rgba(0, 104, 255, .3); }
.sync-btn:hover .sync-icon { transform: rotate(180deg); }
.sync-icon { transition: transform .4s var(--ease); flex-shrink: 0; }
.sync-btn.syncing { cursor: progress; color: #fff; background: var(--grad); border-color: transparent; transform: none; }
.sync-btn.syncing .sync-icon { animation: spin .9s linear infinite; }
.sync-btn:disabled { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Toast thong bao goc duoi ben phai ---------- */
.toast-container {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 200;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none;
}
.toast {
  pointer-events: auto; cursor: pointer; max-width: 380px;
  padding: 12px 16px 12px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 500; line-height: 1.4;
  color: var(--text-primary, var(--text)); background: var(--bg-surface); backdrop-filter: blur(10px);
  border: 1px solid var(--border-default, var(--border)); border-left: 4px solid var(--accent, var(--primary));
  box-shadow: var(--shadow-lg);
  animation: toast-in .3s var(--ease);
}
.toast-success { border-left-color: var(--success); }
.toast-error { border-left-color: var(--danger); }
.toast-leave { animation: toast-out .25s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(12px); } }