/* ============================================================
   NOTIFICATION-V3 (20260729) — nguon CSS DUY NHAT cho popup #notification.
   Nap SAU tat ca CSS khac trong home.php nen thang moi rule cu.
   Selector dung "html body ..." de vuot specificity cua
   shopacc89-nickgiare-exact.css (body.shopacc-white-theme ... !important),
   stn-critical-atf.css, sxh-style-05-*.css va sxh-home-mobile-polish.css.
   KHONG dat media query ep chieu rong nho o desktop.
   ============================================================ */

/* ---------- Khung popup ---------- */
html body #notification .modal-dialog,
html body.shopacc-white-theme #notification .modal-dialog {
    width: min(92vw, 600px) !important;
    max-width: 600px !important;
    margin: 24px auto !important;
}

html body #notification .modal-content,
html body.shopacc-white-theme #notification .modal-content {
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100vh - 48px) !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 26px 70px rgba(15, 23, 42, .28) !important;
    overflow: hidden !important;
}

/* ---------- Header ---------- */
html body #notification .modal-header,
html body.shopacc-white-theme #notification .modal-header {
    position: relative !important;
    min-height: 56px !important;
    padding: 16px 56px 14px 22px !important;
    justify-content: flex-start !important;
    background: linear-gradient(135deg, #fff7ed 0%, #ffffff 62%, #eef5ff 100%) !important;
    border-bottom: 1px solid #edf0f5 !important;
}

html body #notification .modal-title,
html body.shopacc-white-theme #notification .modal-title {
    justify-content: flex-start !important;
    color: #111827 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 24px !important;
    text-align: left !important;
}

/* ---------- Than noi dung: CAN TRAI, de doc ---------- */
html body #notification .modal-body,
html body.shopacc-white-theme #notification .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 200px) !important;
    padding: 20px 24px 14px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    color: #1f2937 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.68 !important;
    text-align: left !important;
    text-transform: none !important;
}

html body #notification .modal-body p,
html body #notification .modal-body li,
html body #notification .modal-body div,
html body #notification .modal-body span,
html body.shopacc-white-theme #notification .modal-body p,
html body.shopacc-white-theme #notification .modal-body li,
html body.shopacc-white-theme #notification .modal-body div,
html body.shopacc-white-theme #notification .modal-body span {
    color: #374151 !important;
    font-size: 15px !important;
    line-height: 1.68 !important;
    text-align: left !important;
    text-transform: none !important;
}

html body #notification .modal-body p {
    margin: 0 0 12px !important;
}

html body #notification .modal-body .tb-lead,
html body.shopacc-white-theme #notification .modal-body .tb-lead {
    margin: 0 0 16px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    background: #fff8ee !important;
    border: 1px solid #ffe2bd !important;
    color: #6b3f10 !important;
}

/* Tieu de muc trong noi dung */
html body #notification .modal-body h1,
html body #notification .modal-body h2,
html body #notification .modal-body h3,
html body #notification .modal-body h4,
html body.shopacc-white-theme #notification .modal-body h1,
html body.shopacc-white-theme #notification .modal-body h2,
html body.shopacc-white-theme #notification .modal-body h3,
html body.shopacc-white-theme #notification .modal-body h4 {
    margin: 18px 0 8px !important;
    padding: 0 0 0 11px !important;
    border-left: 4px solid #ff6a18 !important;
    color: #111827 !important;
    font-size: 15.5px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
    font-style: normal !important;
    text-align: left !important;
    text-transform: none !important;
}

html body #notification .modal-body h1:first-child,
html body #notification .modal-body h2:first-child,
html body #notification .modal-body h3:first-child,
html body #notification .modal-body .tb-lead:first-child {
    margin-top: 0 !important;
}

/* Danh sach gach dau dong */
html body #notification .modal-body ul,
html body #notification .modal-body ol,
html body.shopacc-white-theme #notification .modal-body ul,
html body.shopacc-white-theme #notification .modal-body ol {
    margin: 0 0 14px !important;
    padding-left: 20px !important;
    list-style: disc outside !important;
    text-align: left !important;
}

html body #notification .modal-body li,
html body.shopacc-white-theme #notification .modal-body li {
    margin: 0 0 7px !important;
    padding-left: 2px !important;
    list-style: disc outside !important;
}

html body #notification .modal-body strong,
html body #notification .modal-body b,
html body.shopacc-white-theme #notification .modal-body strong,
html body.shopacc-white-theme #notification .modal-body b {
    color: #b4530c !important;
    font-weight: 800 !important;
}

/* Link thuong trong noi dung */
html body #notification .modal-body a,
html body.shopacc-white-theme #notification .modal-body a {
    color: #1554d6 !important;
    font-weight: 700 !important;
    word-break: break-word !important;
}

/* ---------- Nut lien ket (Zalo...) ---------- */
html body #notification .modal-body .tb-actions,
html body.shopacc-white-theme #notification .modal-body .tb-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 4px 0 6px !important;
}

html body #notification .modal-body a.tb-btn,
html body.shopacc-white-theme #notification .modal-body a.tb-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: linear-gradient(135deg, #ff8a18 0%, #ef233c 100%) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    word-break: normal !important;
    box-shadow: 0 10px 18px rgba(239, 35, 60, .18) !important;
}

html body #notification .modal-body a.tb-btn--ghost,
html body.shopacc-white-theme #notification .modal-body a.tb-btn--ghost {
    background: #fff !important;
    color: #ef233c !important;
    border: 1px solid rgba(239, 35, 60, .32) !important;
    box-shadow: none !important;
}

/* ---------- Footer ---------- */
html body #notification .modal-footer,
html body.shopacc-white-theme #notification .modal-footer {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    padding: 14px 22px 20px !important;
    border-top: 1px solid #f0f2f6 !important;
    background: #fff !important;
}

html body #notification .modal-footer .btn,
html body.shopacc-white-theme #notification .modal-footer .btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 44px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
    /* Gop tu block inline "mobile-notification-center-fix" cu trong home.php:
       can giua popup theo chieu doc, khoa chieu cao theo viewport. */
    html body.mobile-app-enabled.notification-open #notification,
    html body.mobile-app-enabled #notification.in {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px)) !important;
        overflow: hidden !important;
    }

    html body #notification .modal-dialog,
    html body.shopacc-white-theme #notification .modal-dialog,
    html body.mobile-app-enabled.notification-open #notification .modal-dialog,
    html body.mobile-app-enabled #notification.in .modal-dialog,
    html body.mobile-app-enabled.notification-open.shopacc-white-theme #notification .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 0 auto !important;
        transform: none !important;
    }

    html body #notification .modal-content,
    html body.shopacc-white-theme #notification .modal-content,
    html body.mobile-app-enabled #notification .modal-content {
        max-height: calc(100dvh - 28px) !important;
    }

    html body #notification .modal-body,
    html body.shopacc-white-theme #notification .modal-body,
    html body.mobile-app-enabled #notification .modal-body {
        max-height: calc(100dvh - 186px) !important;
        padding: 16px 16px 12px !important;
        font-size: 13.5px !important;
        line-height: 1.62 !important;
    }

    html body #notification .modal-body p,
    html body #notification .modal-body li,
    html body #notification .modal-body div,
    html body #notification .modal-body span,
    html body.shopacc-white-theme #notification .modal-body p,
    html body.shopacc-white-theme #notification .modal-body li,
    html body.shopacc-white-theme #notification .modal-body div,
    html body.shopacc-white-theme #notification .modal-body span {
        font-size: 13.5px !important;
        line-height: 1.62 !important;
    }

    html body #notification .modal-body h1,
    html body #notification .modal-body h2,
    html body #notification .modal-body h3,
    html body #notification .modal-body h4 {
        font-size: 14.5px !important;
    }

    html body #notification .modal-title,
    html body.shopacc-white-theme #notification .modal-title {
        font-size: 16px !important;
    }

    html body #notification .modal-body a.tb-btn,
    html body.shopacc-white-theme #notification .modal-body a.tb-btn {
        flex: 1 1 100% !important;
        min-height: 40px !important;
        font-size: 13px !important;
    }
}