/* ==== vip.html（2026-09-19 从视图内联 <style> 抽出：
     视图渲染在 #app 内，Vue2 挂载重建 DOM 会丢弃内联 <style>，必须外部 link） ==== */

    .page {
        width: 100%;
    }
    .page-vip {
        margin-top: 80px;
        width: 100%;
        min-height: calc(100vh - 90px);
        background-color: #f5f7fa;
        display:flex;
        align-items:  center;
        justify-content: flex-start;
        flex-direction: column;
    }

    .vip-list {
        width: 1200px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 2em;
    }

    .vip-list-top {
        position: relative;
        height: 190px;
        width: 100%;
        display: flex;
        align-items:center;
        justify-content: center;
        font-size: 28px;
        font-weight:700;
        color:#FFF;
        flex-direction: column;
    }

    .vip-list-top::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(25, 30, 75, 0.65) 0%, rgba(64, 158, 255, 0.45) 100%);
        z-index: 0;
    }

    .vip-item {
        min-height: 200px;
        width: 380px;
        margin-right: 30px;
        background-color: #FFF;
        margin-top:30px;
        border-radius: 12px;
        border: 1px solid rgba(0,0,0,0.04);
        overflow: hidden;
        transition: all 0.3s ease;
    }
    .vip-item-no-mg {
        min-height: 200px;
        width: 380px;
        background-color: #FFF;
        margin-top:30px;
        border-radius: 12px;
        border: 1px solid rgba(0,0,0,0.04);
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .vip-item-no-mg:hover {
        box-shadow: 0 12px 28px rgba(0,0,0,0.12);
        transform: translateY(-6px);
    }

    .vip-item:hover {
        box-shadow: 0 12px 28px rgba(0,0,0,0.12);
        transform: translateY(-6px);
    }

    .vip-title {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 150px;
        width: 100%;
    }
    .vip-title-text {
        font-size: 28px;
        font-weight: 900;
        color: #FFF;
    }
    .vip-price {
        font-size: 24px;
        color: #FFF;
        margin-top:1em;
    }

    .basic-pri {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .basic-pri-list {
        width: 100%;
        padding: 20px 30px;
    }

    .basic-pri-title {
        text-align: center;
        color: #1e2a3a;
    }
    .basic-pri-list ul {
        padding-left: 20px;
        list-style: circle!important;
        margin: 20px 0px!important;
    }
    .basic-pri-list ul li {
        list-style: circle!important;
        font-size: 14px;
        color: #1e2a3a;
        line-height: 30px;
    }
    .basic-pri-list ul li::marker {
        color: #1e2a3a;
        font-size: 14px;
    }

    .basic-pri-list ul li span {
        float: right;
    }

    .vip-intro {
        width: 100%;
        padding: 0px 30px 20px 30px;
    }

    .vip-intro-title {
        text-align: center;
        margin-bottom: 20px;
        color: #1e2a3a;
    }

    .vip-intro-content {
        height: 120px;
        overflow: hidden;
        font-size: 12px;
        color: #1e2a3a;
    }

    .vip-intro-content img {
        max-width: 100%;
    }

    .pay-btn-blcok {
        padding:0px 30px 20px 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
    }

    .pay-btn {
        color: #FFF;
        width: 120px;
        height: 50px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .pay-btn:hover {
        opacity: 0.85;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .pay-block {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .wechat-pay-tips {
        font-size: 12px;
        color: #666666;
        margin-top: 2em;
    }

/* ==== [乐学二开 2026-09-19] hero 兜底背景 ====
   后台 4 个背景配置（cat/topic/search/article_background）实测均为空 ⇒ 背景图层是
   `background-image: url()`（无图），而本容器文字是 #FFF ⇒ 白字白底不可见。
   这里用与首页同一套渐变兜底；后台一旦配了背景图，视图内的背景图层会盖住渐变，文字仍在最上层。 */
.vip-list-top {
    background: #409EFF;
    background-image: linear-gradient(135deg, #1e4fd8 0%, #409EFF 55%, #38bdf8 100%);
}