/* ============================================================================ nl-notify — popup thông báo sau submit (thành công / lỗi / info). Cặp đôi với wwwroot/Scripts/nlnotify.js + Views/Shared/_NotifyPopup.cshtml. 🔴 VÌ SAO TÁCH RA KHỎI site.css (2026-09-08): Partial _NotifyPopup TỰ nạp JS của nó nhưng CSS lại nằm trong site.css ⇒ trang nào đặt `Layout = null` mà không tình cờ nạp site.css thì popup mất SẠCH style, rơi xuống CUỐI thành khối chữ trần dưới chân trang (đo thật trên /Login/Login: position=static thay vì fixed, offsetTop=720 = ngay dưới màn hình). Nay partial nạp KÈM file này ⇒ mọi trang render partial đều có style, kể cả trang Layout=null viết sau này. ĐỪNG chép các rule .nl-notify-* ngược lại site.css — hai bản sao sẽ phân kỳ. Namespace riêng: .nl-notify-* — KHÔNG đụng file gốc smartadminNew. ============================================================================ */ .nl-notify-overlay { position: fixed; inset: 0; z-index: 20000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, 0.55); opacity: 0; transition: opacity .18s ease; } .nl-notify-overlay.nl-notify-show { opacity: 1; } .nl-notify-box { width: 100%; max-width: 380px; background: #ffffff; color: #1f2937; border-radius: 14px; padding: 30px 28px 22px; text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); transform: scale(.92) translateY(8px); transition: transform .18s ease; } .nl-notify-overlay.nl-notify-show .nl-notify-box { transform: scale(1) translateY(0); } .nl-notify-icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 700; line-height: 1; } .nl-notify-success .nl-notify-icon { background: #e6f7ee; color: #16a34a; } .nl-notify-error .nl-notify-icon { background: #fdecec; color: #dc2626; } .nl-notify-info .nl-notify-icon { background: #e8f1ff; color: #2563eb; } .nl-notify-message { font-size: 15px; line-height: 1.5; margin-bottom: 22px; white-space: pre-line; word-break: break-word; } .nl-notify-close-btn { border: none; border-radius: 8px; padding: 8px 30px; font-size: 14px; font-weight: 600; color: #fff; cursor: pointer; background: #6b7280; transition: background .15s ease; } .nl-notify-success .nl-notify-close-btn { background: #16a34a; } .nl-notify-success .nl-notify-close-btn:hover { background: #15803d; } .nl-notify-error .nl-notify-close-btn { background: #dc2626; } .nl-notify-error .nl-notify-close-btn:hover { background: #b91c1c; } .nl-notify-info .nl-notify-close-btn { background: #2563eb; } .nl-notify-info .nl-notify-close-btn:hover { background: #1d4ed8; } /* Dark mode: theme toggle của smartadminNew set data-bs-theme trên (saveloadscript.js) */ :root[data-bs-theme="dark"] .nl-notify-overlay, [data-theme="dark"] .nl-notify-overlay { background: rgba(0, 0, 0, .65); } :root[data-bs-theme="dark"] .nl-notify-box, [data-theme="dark"] .nl-notify-box { background: #1e293b; color: #e5e7eb; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); } :root[data-bs-theme="dark"] .nl-notify-close-btn, [data-theme="dark"] .nl-notify-close-btn { color: #fff; } @media (prefers-color-scheme: dark) { :root:not([data-bs-theme="light"]):not([data-theme="light"]) .nl-notify-box { background: #1e293b; color: #e5e7eb; } :root:not([data-bs-theme="light"]):not([data-theme="light"]) .nl-notify-overlay { background: rgba(0, 0, 0, .65); } }