/* nhatdx-salepop-css */

        .nx-sp { position: fixed; z-index: 9998; pointer-events: none; --nx-sp-accent: #C67930; }
        .nx-sp--bottom-left  { left: 20px;  bottom: 20px; }
        .nx-sp--bottom-right { right: 20px; bottom: 20px; }
        .nx-sp--top-left     { left: 20px;  top: 90px; }
        .nx-sp--top-right    { right: 20px; top: 90px; }

        .nx-sp-card {
            position: relative; display: flex; align-items: center; gap: 12px;
            width: 332px; max-width: calc(100vw - 32px); padding: 12px 34px 12px 12px;
            background: #fff; border: 1px solid #EDEAE7; border-left: 3px solid var(--nx-sp-accent);
            border-radius: 12px; box-shadow: 0 8px 26px rgba(53, 39, 28, .13);
            font-family: inherit; overflow: hidden; pointer-events: auto;
            opacity: 0; transform: translateY(14px); transition: opacity .32s ease, transform .32s ease;
        }
        .nx-sp-card.is-in { opacity: 1; transform: translateY(0); }
        .nx-sp--top-left .nx-sp-card, .nx-sp--top-right .nx-sp-card { transform: translateY(-14px); }
        .nx-sp--top-left .nx-sp-card.is-in, .nx-sp--top-right .nx-sp-card.is-in { transform: translateY(0); }

        .nx-sp-thumb {
            flex: 0 0 auto; width: 56px; height: 56px; border-radius: 9px; overflow: hidden;
            background: #F7F6F4; display: block;
        }
        .nx-sp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .nx-sp-ico { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 10px; display: flex; align-items: center;
                     justify-content: center; font-size: 26px; background: #FBF4E4; }

        .nx-sp-body { min-width: 0; flex: 1 1 auto; }
        .nx-sp-top {
            color: #83786C; font-size: 12px; line-height: 1.35; margin-bottom: 2px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .nx-sp-name {
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
            color: #342A22 !important; font-size: 13.5px; font-weight: 600; line-height: 1.35;
            text-decoration: none !important;
        }
        .nx-sp-name:hover { color: var(--nx-sp-accent) !important; }

        .nx-sp-meta {
            display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
            margin-top: 3px; color: #A1968C; font-size: 11.5px; line-height: 1.4;
        }
        .nx-sp-price { color: var(--nx-sp-accent); font-weight: 600; }
        .nx-sp-dot { opacity: .55; }
        .nx-sp-ok { display: inline-flex; align-items: center; gap: 3px; color: #2e9e63; }
        .nx-sp-tick { font-weight: 700; }

        .nx-sp-close {
            position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; padding: 0;
            display: flex; align-items: center; justify-content: center;
            background: transparent !important; border: 0 !important; border-radius: 50% !important;
            color: #BBB4AC !important; font-size: 17px; line-height: 1; cursor: pointer;
            min-height: 0 !important; box-shadow: none !important;
        }
        .nx-sp-close:hover { background: #F5F4F2 !important; color: #71675C !important; }

        .nx-sp-bar {
            position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
            background: var(--nx-sp-accent); opacity: .5; transform-origin: left center;
            animation: nxSpBar linear forwards;
        }
        @keyframes nxSpBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

        @media (max-width: 640px) {
            .nx-sp { left: 12px !important; right: 12px !important; bottom: 12px; top: auto; }
            .nx-sp--top-left, .nx-sp--top-right { top: auto; bottom: 12px; }
            .nx-sp-card { width: 100%; max-width: none; }
        }
        @media (prefers-reduced-motion: reduce) {
            .nx-sp-card { transition: opacity .2s ease; transform: none !important; }
            .nx-sp-bar { animation: none; }
        }