:root {
        --promo-purple: #7047B7;
        --promo-purple-dark: #3F285F;
        --promo-purple-soft: #F2ECFC;
        --promo-pink: #F07BAE;
        --promo-pink-soft: #FFF0F6;
        --promo-border: #EAE2F3;
        --promo-text: #2F2935;
        --promo-muted: #756E7B;
    }
    html, body { max-width: 100%; overflow-x: hidden; }
    body { background: #FCFBFE; }

    .promo-header-bg {
        position: relative;
        overflow: hidden;
        padding: 38px 0 70px;
        margin-bottom: -38px;
        color: var(--promo-purple-dark);
        background:
            radial-gradient(circle at 88% 15%, rgba(240,123,174,.20), transparent 28%),
            radial-gradient(circle at 12% 0%, rgba(112,71,183,.14), transparent 30%),
            linear-gradient(135deg, #FBF8FF 0%, #FFF4F8 100%);
        border-bottom: 1px solid #EEE5F4;
        border-radius: 0 0 34px 34px;
    }
    .promo-header-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: .25;
        background-image: radial-gradient(rgba(112,71,183,.22) 1px, transparent 1px);
        background-size: 18px 18px;
        mask-image: linear-gradient(to right, transparent, #000 70%, #000);
    }
    .promo-header-bg .container { position: relative; z-index: 1; }
    .promo-header-bg h1 {
        max-width: 900px;
        margin: 0;
        color: var(--promo-purple-dark);
        font-size: clamp(1.8rem, 4vw, 2.7rem);
        line-height: 1.22;
        letter-spacing: -.025em;
    }
    .promo-header-bg .breadcrumb { font-size: .9rem; }
    .promo-header-bg .breadcrumb-item a { color: var(--promo-purple); font-weight: 600; text-decoration: none; }
    .promo-header-bg .breadcrumb-item.active { color: #7B7181; }

    .promo-content-card {
        position: relative;
        background: #fff;
        border: 1px solid var(--promo-border);
        border-radius: 24px;
        box-shadow: 0 18px 48px rgba(63,40,95,.08);
        overflow: hidden;
    }
    .promo-img-wrapper {
        width: min(calc(100% - 52px), 500px);
        aspect-ratio: 1 / 1;
        margin: 26px auto 0;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--promo-border);
        border-radius: 20px;
        background: #F7F3FB;
        box-shadow: 0 12px 30px rgba(63,40,95,.08);
    }
    .promo-img-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .promo-body { padding: 30px; }
    .text-purple-dark { color: var(--promo-purple-dark) !important; }

    /* Important notice */
    .promo-body > .alert-danger {
        margin-bottom: 26px !important;
        padding: 15px 17px !important;
        color: #763952 !important;
        background: linear-gradient(135deg, #FFF9FB, #FFF0F6) !important;
        border: 1px solid #F3D1DF !important;
        border-radius: 15px !important;
        box-shadow: none !important;
        text-align: left !important;
        align-items: flex-start !important;
    }
    .promo-body > .alert-danger > i { font-size: 1.65rem !important; color: var(--promo-pink) !important; margin: 2px 13px 0 0 !important; }
    .promo-body > .alert-danger strong { font-size: .98rem !important; color: #8B3F60; }
    .promo-body > .alert-danger span { font-size: .92rem !important; color: #655A62; }

    .promo-body .badge.bg-purple {
        background: var(--promo-purple-soft) !important;
        color: var(--promo-purple) !important;
        border: 1px solid #E1D3F4;
        box-shadow: none !important;
        font-size: .82rem !important;
        font-weight: 650 !important;
    }
    .promo-body h3 { font-size: 1.45rem; }
    .promo-body p { color: var(--promo-muted) !important; line-height: 1.75; }
    .promo-body hr { border-color: var(--promo-border); opacity: 1 !important; }

    /* รายชื่อคอร์สในแพ็กเกจ */
    .course-bundle-card {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 10px;
        padding: 11px;
        border: 1px solid var(--promo-border);
        border-radius: 15px;
        background: #fff;
        transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }
    .course-bundle-card:hover {
        transform: translateY(-1px);
        border-color: #D6C2ED;
        background: #fff;
        box-shadow: 0 8px 20px rgba(63,40,95,.07);
    }
    .course-bundle-img {
        flex: 0 0 74px;
        width: 74px;
        height: 74px;
        margin: 0;
        border: 1px solid #ECE6F1;
        border-radius: 12px;
        object-fit: cover;
    }
    .course-bundle-card h6 { line-height: 1.35; }
    .course-bundle-card .text-purple { color: var(--promo-purple) !important; }

    /* ราคา / การซื้อ */
    .price-box {
        padding: 22px;
        text-align: left;
        background: linear-gradient(180deg, #FFFFFF, #FBF8FF);
        border: 1px solid var(--promo-border);
        border-radius: 18px;
        box-shadow: 0 10px 28px rgba(63,40,95,.07);
    }
    .price-box h5 { color: var(--promo-purple-dark); }
    .price-box .text-danger.fw-black { color: var(--promo-pink) !important; letter-spacing: -.035em; }
    .price-box > .badge.bg-success {
        width: auto !important;
        color: #795A19 !important;
        background: #FFF4D4 !important;
        border: 1px solid #F5DF9B;
        border-radius: 10px !important;
        font-size: .84rem !important;
    }
    .price-box .btn-purple,
    .container > .py-5 .btn-purple {
        border: 0 !important;
        border-radius: 13px !important;
        color: #fff !important;
        background: linear-gradient(135deg, #7650BB, #A55FCA) !important;
        box-shadow: 0 9px 22px rgba(112,71,183,.18) !important;
    }
    .price-box .btn-purple:hover { transform: translateY(-1px); opacity: .96; }
    .price-box .btn-success { border-radius: 13px !important; border: 0; }
    .price-box .btn-outline-success { border-radius: 12px !important; box-shadow: none !important; }

    /* กล่องอัปโหลด — แยกเป็นขั้นตอน ไม่ให้ดูเหมือนกล่องซ้อนหลายชั้น */
    .price-box > .bg-white {
        margin-top: 16px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .price-box .form-control {
        min-height: 44px;
        padding: 9px 11px;
        border: 1px solid var(--promo-border);
        border-radius: 11px !important;
        box-shadow: none;
    }
    .price-box label { color: #5E5564 !important; }
    .price-box label .badge { background: var(--promo-purple) !important; }

    .promo-content-card + .text-center a { color: var(--promo-purple) !important; }

    @media (min-width: 992px) {
        .promo-body { padding: 32px 38px 38px; }
        .price-box.sticky-top { top: 110px !important; }
    }

    @media (max-width: 767.98px) {
        .promo-header-bg { padding: 26px 0 58px; border-radius: 0 0 24px 24px; }
        .promo-content-card { border-radius: 19px; }
        .promo-img-wrapper { width: calc(100% - 28px); margin-top: 14px; border-radius: 15px; }
        .promo-body { padding: 18px 14px 22px; }
        .promo-body > .alert-danger { flex-direction: row !important; padding: 13px !important; }
        .promo-body > .alert-danger > i { flex: 0 0 auto; font-size: 1.35rem !important; margin-right: 10px !important; }
        .promo-body .row.g-4 { --bs-gutter-y: 1.3rem; }
        .course-bundle-card { padding: 9px; gap: 10px; border-radius: 13px; }
        .course-bundle-img { flex-basis: 66px; width: 66px; height: 66px; border-radius: 10px; }
        .course-bundle-card h6 { font-size: .92rem; }
        .price-box { position: static !important; padding: 18px; border-radius: 16px; }
        .price-box .text-danger.fw-black { font-size: 2.2rem !important; }
    }

    @media (max-width: 380px) {
        .promo-header-bg h1 { font-size: 1.65rem; }
        .promo-body { padding-left: 12px; padding-right: 12px; }
        .course-bundle-img { flex-basis: 58px; width: 58px; height: 58px; }
    }