/* =========================================================
   SHOPEE VOUCHER PAGE — MODERN DESIGN
   Keep content, restructured look. Shopee orange-red theme.
   ========================================================= */

.sp-page {
    --sp-layout-width: 1120px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: linear-gradient(180deg, #f7f8fc 0%, #eef0f8 100%);
    overflow-x: hidden;
}

/* Keep every page section on the same centered grid. */
.sp-page .container {
    width: 100%;
    max-width: var(--sp-layout-width);
}

/* ================= HERO ================= */

.sp-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #ff5e3a 0%, #ee4d2d 46%, #d6205e 100%);
    color: #fff;
    padding: 58px 0 48px;
    isolation: isolate;
}

.sp-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(46% 62% at 12% 6%, rgba(255, 206, 0, .55), transparent 60%),
        radial-gradient(52% 72% at 94% 92%, rgba(255, 255, 255, .20), transparent 60%),
        radial-gradient(34% 44% at 82% 8%, rgba(255, 255, 255, .24), transparent 60%);
}

.sp-hero:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(255, 255, 255, .16) 1.5px, transparent 1.5px);
    background-size: 26px 26px;
}

.sp-hero-inner {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 44px;
    align-items: center;
    position: relative;
    z-index: 2;
}

@media (max-width: 991px) {
    .sp-hero {
        padding: 40px 0 40px;
    }
    .sp-hero-inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* floating attention badges */
.sp-float {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 15px;
    background: rgba(255, 255, 255, .94);
    color: #e02f45;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .22);
    animation: sp-bob 5s ease-in-out infinite;
    white-space: nowrap;
}

.sp-float-t1 { top: 84px; left: 5%; transform: rotate(-8deg); }
.sp-float-t2 { top: 190px; right: 3%; transform: rotate(7deg); animation-delay: 1.2s; }
.sp-float-t3 {
    bottom: 96px; left: 10%; transform: rotate(-5deg);
    background: linear-gradient(135deg, #ffce00, #ff8a00);
    color: #fff;
    animation-delay: 2.1s;
}

@media (max-width: 575px) {
    .sp-float { padding: 7px 11px; font-size: 12px; border-radius: 11px; }
    .sp-float-t1 { top: 12px; left: 4%; transform: rotate(-6deg); }
    .sp-float-t2 { top: 12px; right: 4%; transform: rotate(6deg); }
    .sp-float-t3 { display: none; }
}

@keyframes sp-bob {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -14px; }
}

/* hero copy */
.sp-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .38);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
    backdrop-filter: blur(4px);
    margin-bottom: 20px;
}

.sp-chip i { color: #ffce00; }

.sp-hero-title {
    font-size: clamp(30px, 4.6vw, 52px);
    line-height: 1.12;
    font-weight: 800;
    margin: 0 0 16px;
}

.sp-hero-title .sp-title-grad {
    background: linear-gradient(120deg, #fff 20%, #ffce00 80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sp-hero-sub {
    font-size: clamp(14px, 1.6vw, 18px);
    line-height: 1.68;
    opacity: .95;
    margin: 0 0 26px;
    max-width: 520px;
}

.sp-hero-sub strong { color: #ffce00; }

.sp-hero-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.sp-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    background: linear-gradient(135deg, #ffe259, #ffa751);
    color: #7a2e00;
    box-shadow: 0 12px 28px rgba(255, 138, 0, .45);
    text-decoration: none !important;
    transition: transform .2s, box-shadow .2s;
    position: relative;
    overflow: hidden;
}

.sp-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(255, 138, 0, .55);
    color: #5c1f00;
}

.sp-cta:after {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-20deg);
    animation: sp-shine 3.2s ease-in-out infinite;
}

@keyframes sp-shine {
    0% { left: -80%; }
    60%, 100% { left: 160%; }
}

.sp-cta-ghost {
    background: rgba(255, 255, 255, .14);
    border: 1.5px solid rgba(255, 255, 255, .55);
    color: #fff;
    box-shadow: none;
}

.sp-cta-ghost:hover {
    background: rgba(255, 255, 255, .24);
    color: #fff;
}

/* stats */
.sp-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 30px;
    max-width: 540px;
}

.sp-stat {
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 16px;
    padding: 14px 10px;
    text-align: center;
    backdrop-filter: blur(6px);
}

.sp-stat b {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: #ffce00;
    line-height: 1.1;
}

.sp-stat span {
    display: block;
    font-size: 11.5px;
    opacity: .92;
    line-height: 1.3;
    margin-top: 4px;
}

@media (max-width: 575px) {
    .sp-hero-stats { grid-template-columns: repeat(2, 1fr); }
}

/* hero media (mascot holding download app buttons) */
.sp-hero-media { min-width: 0; }

.sp-hero-card {
    position: relative;
    margin-top: 16px;
    background: #fff;
    border-radius: 18px;
    padding: 10px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
}

.sp-hero-illustration {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

/* app download buttons */
.sp-app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #16161d;
    color: #fff;
    border-radius: 12px;
    padding: 11px 16px;
    text-decoration: none !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .14);
    transition: transform .15s ease, box-shadow .15s ease;
}

.sp-app-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .22);
    color: #fff;
}

.sp-app-btn i { font-size: 24px; line-height: 1; }

.sp-app-btn span {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    font-weight: 800;
    font-size: 16px;
}

.sp-app-btn span small {
    font-weight: 500;
    font-size: 10.5px;
    opacity: .8;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.sp-app-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 18px;
}

/* buttons placed on the mascot's two hands
   -> tune top / left / right below to fit the image */
.sp-app-btn-hand {
    position: absolute;
    padding: 9px 13px;
    gap: 9px;
    border: 2px solid #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}

.sp-app-btn-hand i { font-size: 20px; }
.sp-app-btn-hand span { font-size: 13.5px; }
.sp-app-btn-hand span small { font-size: 9px; }

.sp-hand-left { left: 3%; top: 60%; }
.sp-hand-right { right: 3%; top: 60%; }

@media (max-width: 991px) {
    .sp-hero-card {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 12px;
        box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
    }
    .sp-hero-illustration { display: none; }
    .sp-app-btn-hand {
        position: static;
        border: 0;
        padding: 11px 16px;
    }
    .sp-hand-left, .sp-hand-right { top: auto; left: auto; right: auto; }
    .sp-hero-media { display: none; }
}

/* ================= SEARCH TOOL ================= */

.sp-tool {
    position: relative;
    padding: 34px 0;
}

@media (max-width: 991px) {
    .sp-tool { padding: 30px 0; }
}

.sp-tool-card {
    background: #fff;
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, .04);
    box-shadow: 0 22px 64px rgba(23, 26, 61, .10);
    padding: 26px 22px 12px;
}

@media (max-width: 575px) {
    .sp-tool-card { padding: 18px 14px 8px; border-radius: 18px; }
}

.sp-live-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: #d6205e;
    background: #fff0f3;
    border: 1px solid #ffd2da;
    border-radius: 999px;
    padding: 5px 12px;
    margin-bottom: 14px;
}

.sp-live-tag i { font-size: 8px; color: #ff2d55; animation: sp-pulse 1.4s ease-in-out infinite; }

@keyframes sp-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

/* ---------- SDK widget overrides (higher specificity than injected styles) ---------- */

#js-sa-voucher-search #saVoucherMain {
    max-width: 820px;
    margin: 0 auto;
    min-height: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

#js-sa-voucher-search .sav-wrap {
    max-width: 640px;
    margin: 0 auto;
    font-family: inherit;
}

#js-sa-voucher-search .sav-title {
    text-align: center;
    font-size: 21px;
    font-weight: 800;
    color: #171a3d;
    margin-bottom: 6px;
}

#js-sa-voucher-search .sav-title:after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin: 10px auto 18px;
    background: linear-gradient(90deg, #ffce00, #ee4d2d);
    border-radius: 4px;
}

/* search form */
#js-sa-voucher-search #sav-search-form {
    display: flex;
    height: 56px;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid #ffd1c4;
    background: #fff;
    box-shadow: 0 12px 32px rgba(238, 77, 45, .20);
    margin-bottom: 10px;
    position: relative;
}

#js-sa-voucher-search #sav-search-form input {
    width: calc(100% - 158px);
    height: 100%;
    border: 0;
    box-shadow: none !important;
    border-radius: 0;
    font-size: 15px;
    padding: 0 18px;
    background: transparent;
    color: #171a3d;
}

#js-sa-voucher-search #sav-search-form input::placeholder { color: #9aa0b5; }

#js-sa-voucher-search #sav-search-form .sav-search-btn {
    width: 158px;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: linear-gradient(135deg, #ff5e3a, #ee4d2d 60%, #d6205e);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter .2s;
    position: relative;
    overflow: hidden;
}

#js-sa-voucher-search #sav-search-form .sav-search-btn:after {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 45%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
    transform: skewX(-20deg);
    animation: sp-shine 3.4s ease-in-out infinite;
}

#js-sa-voucher-search #sav-search-form .sav-search-btn:hover { filter: brightness(1.08); }
#js-sa-voucher-search #sav-search-form .sav-search-btn:disabled { filter: grayscale(.4); cursor: not-allowed; }

/* paste button (inline styles, force override) */
#js-sa-voucher-search #sav-search-paste {
    top: 73px !important;
    right: 12px !important;
    height: auto;
    padding: 7px 14px;
    border-radius: 11px;
    border: 0;
    background: linear-gradient(135deg, #ffe259, #ffa751);
    color: #7a2e00;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    z-index: 6;
    box-shadow: 0 6px 16px rgba(255, 138, 0, .35);
}

#js-sa-voucher-search #sav-search-paste:hover { filter: brightness(1.05); }

/* loading */
#js-sa-voucher-search #sav-loading-title { font-weight: 700; color: #171a3d; font-size: 14px; }

#js-sa-voucher-search #sav-loading-bar {
    height: 10px;
    border-radius: 99px;
    background: #ffe9e2;
    overflow: hidden;
    margin-top: 6px;
}

#js-sa-voucher-search #sav-progress-bar {
    background: linear-gradient(90deg, #ffce00, #ee4d2d);
    border-radius: 99px;
    font-size: 0;
}

#js-sa-voucher-search #sav-error-message { font-size: 13px; font-weight: 600; margin-top: 8px; }

/* vouchers container */
#js-sa-voucher-search #sav-vouchers { max-width: 640px; margin: 20px auto 0; }

#js-sa-voucher-search #sav-vouchers .sav-voucher-row { margin-bottom: 15px; }

#js-sa-voucher-search #sav-vouchers .sav-voucher-wrap {
    height: 122px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .05);
    box-shadow: 0 5px 20px rgba(23, 26, 61, .08);
    transition: transform .22s, box-shadow .22s;
}

#js-sa-voucher-search #sav-vouchers .sav-voucher-row:hover .sav-voucher-wrap {
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(238, 77, 45, .18);
}

#js-sa-voucher-search #sav-vouchers .sav-voucher-left {
    width: 118px;
    height: 122px;
    border: 0;
    background: linear-gradient(165deg, #ff5e3a, #ee4d2d 55%, #d6205e);
}

#js-sa-voucher-search #sav-vouchers .sav-voucher-left:after {
    content: "";
    position: absolute;
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
}

#js-sa-voucher-search #sav-vouchers .sav-voucher-border-left,
#js-sa-voucher-search #sav-vouchers .sav-border-left { display: none; }

#js-sa-voucher-search #sav-vouchers .sav-voucher-image {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(255, 255, 255, .55);
    background: #fff;
}

#js-sa-voucher-search #sav-vouchers .sav-voucher-icon-text {
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    line-height: 14px;
    margin-top: 6px;
}

#js-sa-voucher-search #sav-vouchers .sav-voucher-right {
    border: 0;
    border-radius: 0 16px 16px 0;
    background: #fff;
    padding: 14px 16px;
}

#js-sa-voucher-search #sav-vouchers .sav-voucher-title { font-size: 14.5px; font-weight: 700; color: #171a3d; }

#js-sa-voucher-search #sav-vouchers .sav-badge {
    height: 20px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 11px;
    padding: 0 8px;
    color: #fff;
}

#js-sa-voucher-search #sav-vouchers .sav-voucher-note { margin-top: 6px; }

#js-sa-voucher-search #sav-vouchers .sav-voucher-duration { font-size: 12.5px; line-height: 1.5; }

#js-sa-voucher-search #sav-vouchers .sav-duration-text { font-weight: 700; }

#js-sa-voucher-search #sav-vouchers .sav-voucher-detail-link { bottom: 13px; left: 14px; }

#js-sa-voucher-search #sav-vouchers .sav-tooltip {
    color: #2f6fed;
    font-weight: 600;
    font-size: 12.5px;
}

#js-sa-voucher-search #sav-vouchers .sav-tooltip:hover { color: #ee4d2d; }

#js-sa-voucher-search #sav-vouchers .sav-btn-get-voucher,
#js-sa-voucher-search #sav-vouchers .sav-btn-ads {
    bottom: 13px;
    right: 16px;
    min-width: 92px;
    padding: 9px 16px;
    border-radius: 11px;
    border: 0;
    font-size: 13px;
    font-weight: 700;
    background: linear-gradient(135deg, #ff5e3a, #ee4d2d);
    box-shadow: 0 8px 18px rgba(238, 77, 45, .32);
    transition: transform .2s, filter .2s;
    text-decoration: none !important;
}

#js-sa-voucher-search #sav-vouchers .sav-btn-get-voucher:hover,
#js-sa-voucher-search #sav-vouchers .sav-btn-ads:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

/* voucher types */
#js-sa-voucher-search #sav-vouchers .sav-voucher-row[data-voucher-type="2"] .sav-voucher-left {
    background: linear-gradient(165deg, #00e0cb, #00bfa5);
}

#js-sa-voucher-search #sav-vouchers .sav-voucher-row[data-voucher-type="2"] .sav-btn-get-voucher {
    background: linear-gradient(135deg, #00d2c0, #00bfa5);
    box-shadow: 0 8px 18px rgba(0, 191, 165, .35);
}

#js-sa-voucher-search #sav-vouchers .sav-voucher-row[data-voucher-type="3"] .sav-voucher-left {
    background: linear-gradient(165deg, #b6e06f, #8db654);
}

#js-sa-voucher-search #sav-vouchers .sav-voucher-row[data-voucher-type="3"] .sav-btn-get-voucher {
    background: linear-gradient(135deg, #a9d85e, #8db654);
    box-shadow: 0 8px 18px rgba(141, 182, 84, .4);
}

/* filter tabs */
#js-sa-voucher-search #sa-filter .stardust-tabs-header-wrapper {
    background: #fff;
    padding: 8px 4px;
    position: sticky;
    top: 0;
    z-index: 20;
}

#js-sa-voucher-search #sa-filter .stardust-tabs-header {
    border: 0;
    gap: 8px;
    padding: 6px;
    border-radius: 14px;
    background: #f4f5fa;
    justify-content: flex-start;
}

#js-sa-voucher-search #sa-filter .stardust-tabs-header__tab {
    flex: none;
    height: auto;
    padding: 8px 16px;
    border-radius: 10px;
    background: transparent;
    color: #6b7089;
    font-weight: 600;
    font-size: 13px;
    transition: background .2s, color .2s;
}

#js-sa-voucher-search #sa-filter .stardust-tabs-header__tab:hover { color: #ee4d2d; }

#js-sa-voucher-search #sa-filter .stardust-tabs-header__tab--active {
    background: linear-gradient(135deg, #ff5e3a, #ee4d2d);
    color: #fff;
    box-shadow: 0 6px 16px rgba(238, 77, 45, .35);
}

/* sponsored / new voucher rows */
#js-sa-voucher-search #sav-vouchers .sav-voucher-row .sav-product-detail-link {
    right: 120px;
    bottom: 14px;
    border-radius: 10px;
    border: 1px solid #e3e7f0;
    background: #f6f7fb;
    color: #2f6fed;
    font-weight: 600;
    padding: 8px 12px;
}

#js-sa-voucher-search #sav-vouchers .sav-product-info .sav-voucher-left { background: #fff; }
#js-sa-voucher-search #sav-vouchers .sav-product-info .sav-voucher-image { border-color: #f1f2f7; }

/* hint / misc */
#js-sa-voucher-search .hint-voucher-cat {
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 12px;
    background: #fff8e6;
    border: 1px solid #ffe08a;
    font-size: 13.5px;
}

#js-sa-voucher-search .hint-voucher-cat a { color: #ee4d2d; font-weight: 700; }

.sav-product-price-history { display: none !important; }

#js-sa-voucher-search #saGroupAds a {
    border-radius: 12px;
    border: 1px dashed #ffb59c !important;
    background: #fff5f0;
    font-size: 13px;
}

/* similar products blog card injected by SDK */
#js-sa-voucher-search #js-similar-products .bg-white {
    border-radius: 20px;
    box-shadow: 0 14px 40px rgba(23, 26, 61, .07);
    border: 1px solid rgba(0, 0, 0, .04);
}

/* ================= TODAY VOUCHER LIST ================= */

#js-sa-voucher-search #js-voucher-today { max-width: 820px; margin: 0 auto; }

#voucher-list-today {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

#voucher-list-today:before {
    content: "🔥 Voucher Shopee hôm nay";
    display: block;
    font-size: 21px;
    font-weight: 800;
    color: #171a3d;
    text-align: center;
    margin-bottom: 4px;
}

#voucher-list-today:after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin: 12px auto 6px;
    background: linear-gradient(90deg, #ffce00, #ee4d2d);
    border-radius: 4px;
}

#voucher-list-today .js-vtd-cats {
    gap: 8px;
    margin: 14px 0 16px;
    padding: 8px;
    border-radius: 14px;
    background: #f4f5fa;
    text-align: center;
}

#voucher-list-today .js-vtd-cats > span,
#voucher-list-today .js-vtd-cats > a {
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    padding: 7px 14px;
    background: #fff;
    color: #6b7089;
    border: 1px solid #eef0f6;
    transition: background .2s, color .2s, box-shadow .2s;
}

/*#voucher-list-today .js-vtd-cats > span:hover,*/
/*#voucher-list-today .js-vtd-cats > span.btn-subtle-primary {*/
/*    background: linear-gradient(135deg, #ff5e3a, #ee4d2d) !important;*/
/*    color: #fff !important;*/
/*    box-shadow: 0 6px 16px rgba(238, 77, 45, .35);*/
/*}*/

#voucher-list-today .bc_voucher_list { max-width: 760px; }

#voucher-list-today .bc_voucher_item {
    max-width: 760px;
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(23, 26, 61, .08) !important;
    border: 1px solid rgba(0, 0, 0, .05) !important;
    transition: transform .2s, box-shadow .2s;
}

#voucher-list-today .bc_voucher_item:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(238, 77, 45, .16) !important;
}

#voucher-list-today .bc_voucher_item .bc_voucher_logo { border-radius: 14px 0 0 14px; }

#voucher-list-today .bc_voucher_item .bc_voucher_info { border: 0 !important; }

#voucher-list-today .pagination { margin-top: 1.2rem; }

#voucher-list-today .page-link { border-radius: 99px; font-weight: 600; }

#voucher-list-today .page-item.active .page-link {
    background: linear-gradient(135deg, #ff5e3a, #ee4d2d);
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(238, 77, 45, .35);
}

/* ================= CONTENT / BLOG ================= */

.sp-blog-card {
    background: #fff;
    border-radius: 22px;
    border: 1px solid rgba(0, 0, 0, .04);
    box-shadow: 0 16px 48px rgba(23, 26, 61, .08);
    padding: 28px 30px;
}

@media (max-width: 575px) {
    .sp-blog-card { padding: 20px 16px; }
}

.sp-blog-card img { border-radius: 12px; }
.sp-blog-card h2, .sp-blog-card h3 { color: #171a3d; }

/* Editorial content cards */
.sp-content-card {
    --sp-content-ink: #20243a;
    --sp-content-muted: #4b5268;
    background: #fff;
    border: 1px solid #e8eaf1;
    border-radius: 20px;
    box-shadow: 0 8px 28px rgba(23, 26, 61, .055);
    padding: clamp(22px, 3.5vw, 38px);
    margin-bottom: 24px;
}

.sp-content-card img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    border: 1px solid #e8eaf1;
    border-radius: 12px;
}

/* Each guide image contains several steps, so give it the full card width. */
.sp-content-card.text-center {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    text-align: initial !important;
}

.sp-content-card.text-center > img {
    width: 100%;
    margin: 0;
    box-shadow: 0 3px 12px rgba(23, 26, 61, .045);
}

.sp-content-card:not(.text-center) {
    width: 100%;
    max-width: none;
}

.sp-content-card:not(.text-center) .sp-sec > p:not(.text-center),
.sp-content-card:not(.text-center) .sp-sec > ul {
    max-width: 74ch;
}

.sp-content-card:not(.text-center) .sp-step p { max-width: 74ch; }

.sp-content-card:not(.text-center) .sp-sec img {
    width: min(100%, 600px) !important;
}

.sp-sec-title {
    font-size: clamp(19px, 2.2vw, 22px);
    font-weight: 750;
    color: var(--sp-content-ink, #20243a);
    margin: 0 0 18px;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    line-height: 1.38;
    letter-spacing: -.025em;
}

.sp-sec-num {
    flex: none;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #ff5e3a, #ee4d2d);
    box-shadow: 0 4px 10px rgba(238, 77, 45, .2);
}

.sp-sec + .sp-sec { margin-top: 30px; padding-top: 28px; border-top: 1px solid #eceef3; }

.sp-lead { font-size: 16px; line-height: 1.78; color: var(--sp-content-muted, #4b5268); }
.sp-content-card p { font-size: 15px; line-height: 1.78; color: var(--sp-content-muted, #4b5268); margin-bottom: 1rem; }
.sp-content-card ul { line-height: 1.8; color: var(--sp-content-muted, #4b5268); font-size: 15px; padding-left: 1.35rem; }
.sp-content-card li { padding-left: .15rem; margin-bottom: .45rem; }
.sp-content-card li::marker { color: #ee4d2d; }
.sp-content-card strong { color: #30364b; }

.sp-content-card a:not(.sp-fab) {
    color: #c94125;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.sp-content-card a:not(.sp-fab):hover { color: #a8321b; }

/* step cards */
.sp-step {
    background: #fff8f5;
    border: 1px solid #f4ded7;
    border-left: 3px solid #ee4d2d;
    border-radius: 12px;
    padding: 15px 18px;
    margin: 16px 0;
}

.sp-step strong {
    color: #c94125;
    font-size: 14px;
    font-weight: 750;
}

@media (max-width: 575px) {
    .sp-content-card { border-radius: 16px; padding: 20px 16px 24px; margin-bottom: 18px; }
    .sp-sec-title { gap: 10px; margin-bottom: 14px; }
    .sp-sec-num { width: 34px; height: 34px; border-radius: 10px; font-size: 13px; }
    .sp-content-card p, .sp-content-card ul { font-size: 14.5px; }
    .sp-lead { font-size: 15px; }
    .sp-step { padding: 13px 14px; }
}

@media (max-width: 767px) {
    .sp-content-card.text-center { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .sp-content-card *, .sp-content-card *::before, .sp-content-card *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* type cards */
.sp-type-grid { display: grid; gap: 14px; margin: 18px 0; }

.sp-type-card {
    background: linear-gradient(180deg, #fff 0%, #fbfbfe 100%);
    border: 1px solid #eceef6;
    border-radius: 16px;
    padding: 16px 20px;
    transition: box-shadow .2s, transform .2s;
}

.sp-type-card:hover {
    box-shadow: 0 12px 28px rgba(23, 26, 61, .08);
    transform: translateY(-2px);
}

.sp-type-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }

.sp-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #ff5e3a, #ee4d2d);
    box-shadow: 0 6px 16px rgba(238, 77, 45, .28);
}

.sp-tag-teal { background: linear-gradient(135deg, #00e0cb, #00bfa5); box-shadow: 0 6px 16px rgba(0, 191, 165, .3); }
.sp-tag-green { background: linear-gradient(135deg, #b6e06f, #8db654); box-shadow: 0 6px 16px rgba(141, 182, 84, .35); }

.sp-note-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

@media (max-width: 767px) {
    .sp-note-grid { grid-template-columns: 1fr; }
}

.sp-tip {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #fff;
    border-radius: 16px;
    padding: 16px 18px;
    border: 1px solid rgba(0, 0, 0, .04);
    box-shadow: 0 10px 30px rgba(23, 26, 61, .07);
}

.sp-tip i {
    flex: none;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 16px;
}

.sp-tip p, .sp-tip div { font-size: 13.5px; line-height: 1.7; color: #44475f; margin: 0; }

.sp-tip-info i { background: #e8f1ff; color: #2f6fed; }
.sp-tip-warn i { background: #fff3d6; color: #e08a00; }

.sp-version { font-size: 12.5px; color: #a0a5bd; text-align: center; margin-top: 20px; }

/* ================= FAB (mobile) ================= */

.sp-fab {
    display: none;
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 999;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    background: linear-gradient(135deg, #ff5e3a, #ee4d2d);
    box-shadow: 0 12px 30px rgba(238, 77, 45, .5);
    text-decoration: none !important;
    transition: transform .2s;
}

.sp-fab:hover { transform: scale(1.08); color: #fff; }

@media (max-width: 767px) {
    .sp-fab { display: inline-flex; }
}

/* ================= RESPONSIVE (widget) ================= */

@media (max-width: 767px) {
    #js-sa-voucher-search #sav-search-form {
        display: block;
        height: auto;
        border: 0;
        box-shadow: none;
        background: transparent;
        overflow: visible;
    }

    #js-sa-voucher-search #sav-search-form input {
        width: 100%;
        height: 50px;
        border: 2px solid #ffd1c4;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 8px 20px rgba(238, 77, 45, .12);
    }

    #js-sa-voucher-search #sav-search-form .sav-search-btn {
        width: 100%;
        height: 46px;
        margin-top: 10px;
        border-radius: 14px;
    }

    #js-sa-voucher-search #sav-search-paste {
        top: 70px !important;
        right: 12px !important;
    }

    #js-sa-voucher-search #sav-vouchers .sav-voucher-wrap { height: 112px; }
    #js-sa-voucher-search #sav-vouchers .sav-voucher-left { width: 104px; height: 112px; }
    #js-sa-voucher-search #sav-vouchers .sav-voucher-right { padding: 10px 12px; }

    #js-sa-voucher-search #sav-vouchers .sav-btn-get-voucher,
    #js-sa-voucher-search #sav-vouchers .sav-btn-ads {
        right: 10px;
        bottom: 9px;
        min-width: 76px;
        padding: 7px 10px;
        font-size: 12px;
    }

    #js-sa-voucher-search #sav-vouchers .sav-voucher-detail-link { bottom: 10px; left: 10px; }
}

@media (max-width: 575px) {
    #js-sa-voucher-search #sav-vouchers .sav-voucher-left { width: 88px; }
    #js-sa-voucher-search #sav-vouchers .sav-voucher-image { width: 50px; height: 50px; }
    #js-sa-voucher-search #sav-vouchers .sav-voucher-icon-text { font-size: 10px; }
}