/* Hộp thoại xác nhận dùng chung toàn website (VietSCI). Không phụ thuộc biến CSS của cổng. */
html.ae-modal-open { overflow: hidden; }
.ae-modal { position: fixed; inset: 0; z-index: 100100; display: grid; place-items: center; padding: 16px; font-family: inherit; }
.ae-modal__bg { position: absolute; inset: 0; background: rgba(15,12,46,.5); backdrop-filter: blur(2px); animation: ae-cf-fade .15s ease; }
.ae-modal__box { position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 20px 22px 18px; border-radius: 16px; background: #fff; color: #16133d; box-shadow: 0 24px 60px rgba(15,12,46,.35); animation: ae-cf-pop .18s ease; outline: none; text-align: left; }
.ae-modal--wide .ae-modal__box { width: min(640px, 100%); }
.ae-modal__x { position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: #8a88a3; font-size: 22px; line-height: 1; cursor: pointer; }
.ae-modal__x:hover { background: #f4f3fa; color: #16133d; }
.ae-modal__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-right: 30px; margin-bottom: 10px; }
.ae-modal__head h3 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 16px; line-height: 1.35; color: #16133d; }
.ae-modal__head p { flex-basis: 100%; margin: 0; font-size: 12.5px; color: #6b6a80; }
.ae-modal__ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #eef0ff; color: #1800ad; font-weight: 800; font-size: 16px; }
.ae-modal--danger .ae-modal__ic { background: #fee2e2; color: #b91c1c; }
.ae-modal__msg { margin: 0 0 16px; font-size: 13.5px; line-height: 1.6; color: #3f3d5a; }
.ae-modal__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ae-modal .ae-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 8px 16px; border: 1.5px solid transparent; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer; text-decoration: none; }
.ae-modal .ae-btn--ghost { background: #fff; border-color: #dcd9f3; color: #16133d; }
.ae-modal .ae-btn--ghost:hover { border-color: #1800ad; color: #1800ad; }
.ae-modal .ae-btn--primary { background: #ff6600; border-color: #ff6600; color: #fff; }
.ae-modal .ae-btn--primary:hover { background: #e65c00; border-color: #e65c00; }
.ae-modal .ae-btn--danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.ae-modal .ae-btn--danger:hover { background: #b91c1c; border-color: #b91c1c; }
.ae-modal .ae-btn:focus-visible { outline: 2px solid #1800ad; outline-offset: 2px; }
@keyframes ae-cf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ae-cf-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ae-modal__bg, .ae-modal__box { animation: none; } }
/* Đồng bộ hộp xác nhận với VietSCI App. */ Tiền tố html để thắng khối cũ trong portal.css.
html .ae-modal__box { width: min(440px, 100%); padding: 22px 22px 18px; border-radius: 16px; box-shadow: 0 30px 70px rgba(12,5,97,.3); }
html .ae-modal__head { flex-wrap: nowrap; gap: 12px; margin-bottom: 12px; }
html .ae-modal__head h3 { font-size: 16px; }
html .ae-modal__ic { flex: none; width: 44px; height: 44px; background: #fff1e6; color: #ff6600; box-shadow: 0 0 0 5px #fff8f2; }
html .ae-modal--danger .ae-modal__ic { background: #fee2e2; color: #b91c1c; box-shadow: 0 0 0 5px #fff5f5; }
html .ae-modal__msg { font-size: 13px; }
html .ae-modal__foot { margin-top: 6px; padding-top: 14px; border-top: 1px solid #e6e5f0; }
html .ae-modal__foot .ae-btn { min-height: 40px; border-radius: 10px; }
html .ae-modal__ic svg { display: block; }
/* Đồng bộ mọi popup: nền phủ một màu, khoá cuộn trang khi popup mở. */
html .ae-modal__bg, html .ae-req-modal__bg, html .vsw__backdrop { background: rgba(12,5,97,.5); }
html .jsx-modal { background: rgba(12,5,97,.5); }
html .dv::backdrop, html .cf-dlg::backdrop { background: rgba(12,5,97,.5); }
html:has(dialog[open]), html:has(.jsx-modal:not([hidden])), html:has(.ae-req-modal:not([hidden])) { overflow: hidden; }
dialog .ae-modal { z-index: 10; }
html .cf-dlg__x { border-radius: 50%; }