/* ============================================================================
   AAuJob — Toast thông báo hệ thống
   Thay cho dải alert ngang chiếm hết bề rộng trang: hộp nhỏ góc trên bên phải,
   có thanh đếm ngược và tự biến mất. Dùng chung cho toàn site.
   ========================================================================== */
.aj-toast-wrap {
    position: fixed;
    top: 84px;              /* chừa header cố định */
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 360px;
    max-width: calc(100vw - 32px);
    pointer-events: none;   /* chỉ từng toast mới nhận click */
}

.aj-toast {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px 15px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .16);
    overflow: hidden;
    animation: aj-toast-in .28s cubic-bezier(.21, 1.02, .73, 1) both;
}
.aj-toast.aj-toast-out { animation: aj-toast-out .22s ease forwards; }

@keyframes aj-toast-in  { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes aj-toast-out { to   { opacity: 0; transform: translateX(24px); } }

.aj-toast-ico {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .78rem;
}
.aj-toast-body { flex: 1; min-width: 0; }
.aj-toast-title {
    font-size: .88rem; font-weight: 700; color: #101828;
    line-height: 1.35; margin: 0 0 2px;
}
.aj-toast-msg {
    font-size: .8rem; color: #667085; line-height: 1.5; margin: 0;
    word-break: break-word;
}
.aj-toast-close {
    flex-shrink: 0;
    width: 24px; height: 24px; padding: 0;
    border: none; background: transparent; cursor: pointer;
    color: #98a2b3; font-size: .95rem; line-height: 1;
    border-radius: 6px;
}
.aj-toast-close:hover { background: #f2f4f7; color: #475467; }

/* Thanh đếm ngược dưới đáy */
.aj-toast-bar {
    position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
    transform-origin: left center;
    animation: aj-toast-bar linear forwards;
}
@keyframes aj-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Tông màu theo loại */
.aj-toast-success .aj-toast-ico { background: #12b76a; }
.aj-toast-success .aj-toast-bar { background: #12b76a; }
.aj-toast-error   .aj-toast-ico { background: #f04438; }
.aj-toast-error   .aj-toast-bar { background: #f04438; }
.aj-toast-warning .aj-toast-ico { background: #f79009; }
.aj-toast-warning .aj-toast-bar { background: #f79009; }
.aj-toast-info    .aj-toast-ico { background: #2e90fa; }
.aj-toast-info    .aj-toast-bar { background: #2e90fa; }

@media (max-width: 575.98px) {
    .aj-toast-wrap { top: 70px; right: 12px; left: 12px; width: auto; }
}

/* Người dùng tắt hiệu ứng chuyển động → hiện/ẩn thẳng, không animate */
@media (prefers-reduced-motion: reduce) {
    .aj-toast, .aj-toast.aj-toast-out { animation: none; }
    .aj-toast-bar { animation: none; transform: scaleX(0); }
}