/* ===== 会员专享通知条 ===== */
.dhp-member-notice {
    width: 100%;
    background: transparent;
    padding: 0;
    margin-bottom: 0;
}

.dhp-member-notice .dhp-container {
    padding: 0 15px;
}

.dhp-member-notice p {
    font-family: '微软雅黑', sans-serif;
    color: #fff !important;
    font-weight: bold;
    display: flex;
    justify-content: center;
    flex-flow: column;
    margin: 0;
    padding: 12px;
    border-radius: 6px;
    position: relative;
    background: linear-gradient(120deg, #df1e7196 30%, #fbb71587 100%);
    text-align: center;
    font-size: 18px !important;
    line-height: 36px;
    margin-bottom: 25px;
    text-shadow: 0px 3px 5px black;
}

/* 移动端隐藏 */
@media (max-width: 768px) {
    .dhp-member-notice.dhp-notice-hide-mobile {
        display: none;
    }
    
    .dhp-member-notice p {
        font-size: 16px !important;
        line-height: 30px;
        padding: 10px;
    }
}

/* ===== 基础布局 ===== */
.dhp-section{
    margin:30px 0 40px;
    width:100%;
}
.dhp-container{
    width:100%;
    max-width:1380px;
    margin:0 auto;
    padding:0 15px;
    box-sizing:border-box;
}
@media (min-width: 1401px){
    .dhp-container{
        padding:0;
    }
}

/* ===== LOGO 区 ===== */
.dhp-logo-wrap{
    margin:10px 0 10px;
}
.dhp-logo-title{
    text-align:center;
    font-size:24px;
    font-weight:400;
    letter-spacing:1px;
    margin:0 0 22px;
    color:#333;
}
.dhp-logo-swiper{
    position:relative;
    width:100%;
    padding:4px 0;
    overflow:hidden;
}
.dhp-logo-swiper .swiper-wrapper{
    display:flex;
    align-items:center;
}
.dhp-logo-swiper .swiper-slide{
    flex-shrink:0;
    margin-right: 8px;
}
.dhp-logo-swiper .swiper-slide:last-child {
    margin-right: 0;
}
.dhp-logo-card{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:1/1;
    border-radius:5px;
    overflow:hidden;
    text-decoration:none;
    background:#000;
    box-shadow:0 4px 12px rgba(0,0,0,0.20);
}
.dhp-logo-card img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.dhp-logo-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.30);
    transition:background 0.25s ease;
    z-index:1;
}
.dhp-logo-card:hover::before{
    background:rgba(0,0,0,0.40);
}
.dhp-logo-label{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    padding:6px 18px;
    border-radius:999px;
    background:transparent !important;
    font-size:13px;
    line-height:1;
    font-weight:400;
    color:#fff;
    white-space:nowrap;
    z-index:2;
    text-shadow:none !important;
    border:none !important;
    box-shadow:none !important;
}

/* === LOGO 左右导航按钮 === */
.dhp-logo-prev,
.dhp-logo-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
    cursor: pointer;
}
.dhp-logo-prev { left: 1px; }
.dhp-logo-next { right: 1px; }

.dhp-logo-prev::after,
.dhp-logo-next::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
}
.dhp-logo-prev::after { transform: rotate(135deg); }
.dhp-logo-next::after { transform: rotate(-45deg); }

.dhp-logo-prev:hover,
.dhp-logo-next:hover {
    background: rgba(0,0,0,0.8) !important;
}

/* ===== 最近更新三列 ===== */
.dhp-title{
    text-align:center;
    font-size:24px;
    font-weight:400;
    letter-spacing:1px;
    margin:32px 0 26px;
    color:#333;
}

/* 最近更新 标题下面的小横条 */
.dhp-title::after{
    content:"";
    display:block;
    width:25px;          /* 横条宽度 */
    height:3px;          /* 横条高度 */
    border-radius:999px; /* 圆角，两端变成小药丸形状 */
    background:#dd127b;  /* 颜色，按你喜欢改 */
    margin:8px auto 0;   /* 居中 + 和文字的间距 */
}

.dhp-columns{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

/* 列容器：纵向 flex，让列表撑满高度 */
.dhp-col{
    flex:1;
    min-width:260px;
    background:#fff;
    padding:0;
    border-radius:6px;
    box-shadow:0 8px 24px rgba(0,0,0,0.06);
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

/* 三列标题：banner 背景 + 固定高度 + 单行省略号 */
.dhp-col-title{
    height:56px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:0 12px;
    background:url("../images/banner.webp") center/cover no-repeat;
    color:#fff;
    font-weight:400;
    font-size:16px;
    text-align:center;
    letter-spacing:0.3px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.dhp-col-title a{
    display:block;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    color:inherit;
    text-decoration:none;
}

/* 列表：flex 列，10 条从上到下均匀分布 */
.dhp-list{
    list-style:none;
    margin:0;
    padding:16px 18px 8px;
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

/* 每一行：数字 + 标题 完美中线对齐 */
.dhp-list li{
    display:flex;
    align-items:center;   /* 数字块与文字中线对齐 */
    padding:4px 0;
    margin-bottom:0;
    font-size:14px;
    line-height:1.6;
    color:#444;
}

/* 数字方块 */
.dhp-list-index{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    font-size:12px;
    line-height:1;
    border-radius:4px;
    background:#ff4da0;
    color:#fff;
    margin-right:10px;
    vertical-align:middle;
    flex-shrink:0;
}
.dhp-list-index.dhp-index-1{background:#ff4da0;}
.dhp-list-index.dhp-index-2{background:#ff7b3b;}
.dhp-list-index.dhp-index-3{background:#ffc53b;}
.dhp-list-index.dhp-index-4,
.dhp-list-index.dhp-index-5,
.dhp-list-index.dhp-index-6,
.dhp-list-index.dhp-index-7,
.dhp-list-index.dhp-index-8,
.dhp-list-index.dhp-index-9,
.dhp-list-index.dhp-index-10{
    background:#e4e7ed;
    color:#666;
}
.dhp-list-main{
    flex:1;
    min-width:0;
}

/* 文章标题：单行省略，防止换行撑高 */
.dhp-list a{
    color:#444;
    text-decoration:none;
    font-weight:400;
    display:inline-block;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.dhp-list a:hover{
    color:#dd127b;
}

/* 日期隐藏，只保留标题 */
.dhp-list-date{
    display:none;
}

/* ===== 查看更多按钮（按你要求优化） ===== */
.dhp-more{
    text-align:center;
    margin-top:20px;
}

/* 文字水平 + 垂直居中，按钮更扁更长，无箭头 */
.dhp-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    background:#4b7bfd;
    color:#fff !important;

    padding:0 65px;        /* 按钮长度 */
    height:40px;           /* 比原来矮，更接近参考站 */
    border-radius:36px;    /* 圆角胶囊 */

    font-size:16px;
    font-weight:400;
    line-height:1;
    text-decoration:none;

    box-shadow:0 3px 8px rgba(75,123,253,0.4);
    transition:background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.dhp-btn:hover{
    background:#3a69e5;
    box-shadow:0 6px 14px rgba(75,123,253,0.45);
    transform:translateY(-1px);
    color:#fff !important;
}

/* ===== 我们的优势（用站内字体 + Font Awesome） ===== */
.vip-why{
    padding:45px 0 40px;
    text-align:center;
}
.vip-why h2{
    margin:0 0 6px;
    font-size:24px;
    font-weight:400;
    color:#333;
}
.vip-why h2 span{
    position:relative;
    display:inline-block;
    padding-bottom:10px;
}
.vip-why h2 span:after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:40px;
    height:2px;
    margin-left:-20px;
    background:#3f8efc;
}
.vip-why .desc{
    margin:0 0 35px;
    font-size:14px;
    color:#777;
}
.vip-why .items{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:30px;
}
.vip-why .item{
    flex:1;
    min-width:200px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:left;
}
.vip-why .item > span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:70px;
    height:70px;
    border-radius:50%;
    background:#4b7bfd;
    margin-right:16px;
}
.vip-why .item i{
    font-size:26px;
    color:#fff;
}
.vip-why .item h4{
    margin:0 0 4px;
    font-size:16px;
    font-weight:400;
    color:#333;
}
.vip-why .item p{
    margin:0;
    font-size:14px;
    color:#666;
}
@media (max-width:900px){
    .vip-why .items{
        flex-direction:column;
        align-items:flex-start;
    }
}

/* ================= 夜间模式（html.dark） ================= */

/* 会员通知条夜间模式 */
html.dark .dhp-member-notice p {
    background: linear-gradient(120deg, #c91961d9 30%, #e0a513b8 100%);
    color: #fff !important;
    text-shadow: 0px 3px 6px rgba(0,0,0,0.8);
}

html.dark .dhp-title::after{
    background:#ff4da0;
}

/* 整体卡片背景、阴影 */
html.dark .dhp-col{
    background:#1c2029 !important;
    box-shadow:0 8px 24px rgba(0,0,0,0.75);
}

/* 顶部大标题颜色 */
html.dark .dhp-title,
html.dark .dhp-logo-title{
    color:#f5f7ff;
}

/* 列表区背景、文字颜色 */
html.dark .dhp-list{
    background:#1c2029 !important;
}
html.dark .dhp-list li{
    color:#e4e8f5 !important;
}
html.dark .dhp-list a{
    color:#e4e8f5 !important;
}
html.dark .dhp-list a:hover{
    color:#8ab4ff !important;
}

/* 夜间模式下序号块统一颜色 */
html.dark .dhp-list-index{
    background:#50b7ff !important;
    color:#ffffff !important;
}

/* 三列标题在夜间：仍然用紫色 banner，只提升文字亮度 */
html.dark .dhp-col-title{
    color:#fdfdff !important;
    text-shadow:0 0 4px rgba(0,0,0,0.55);
}
html.dark .dhp-col-title a{
    color:inherit !important;
}

/* LOGO 卡片在夜间稍微加深遮罩 */
html.dark .dhp-logo-card{
    box-shadow:0 4px 18px rgba(0,0,0,0.9);
}
html.dark .dhp-logo-card::before{
    background:rgba(0,0,0,0.45);
}
html.dark .dhp-logo-card:hover::before{
    background:rgba(0,0,0,0.7);
}

/* 查看更多按钮 夜间颜色 */
html.dark .dhp-btn{
    background:#2962ff;
    box-shadow:0 3px 10px rgba(0,0,0,0.7);
    color:#fff !important;
}
html.dark .dhp-btn:hover{
    background:#1e4ddb;
    color:#fff !important;
}

/* 我们的优势 夜间颜色 */
html.dark .vip-why h2{
    color:#f5f7ff;
}
html.dark .vip-why .desc{
    color:#cbd5f5;
}
html.dark .vip-why .item h4{
    color:#f5f7ff;
}
html.dark .vip-why .item p{
    color:#d1d5e8;
}
html.dark .vip-why .item > span{
    background:#2962ff;
}

/* ================= 移动端VIP推广通知 ================= */
.dhp-mobile-vip-notice {
    display: none;
    position: relative;
    background-color: #fff;
}

.dhp-mobile-vip-alert {
    position: relative;
    padding: 0.75rem 2.5rem 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    font-size: 16px;
    color: #664d03;
    background-color: #fbb715;
    border-color: #ffecb5;
}

.dhp-mobile-vip-badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    margin: 0 5px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    background-color: #dc3545;
}

.dhp-mobile-vip-spinner {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    vertical-align: -0.125em;
    background-color: currentColor;
    border-radius: 50%;
    opacity: 0;
    animation: dhp-spinner-grow 0.75s linear infinite;
    margin-left: 0.25rem;
    margin-bottom: 2px;
}

@keyframes dhp-spinner-grow {
    0% {
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: none;
    }
}

.dhp-mobile-vip-close {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    color: #000;
    font-size: 24px;
    line-height: 24px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    z-index: 10;
    text-decoration: none;
}

.dhp-mobile-vip-close:hover {
    color: #f00;
    background-color: rgba(255, 0, 0, 0.1);
}

/* 只在移动端显示 */
@media (max-width: 768px) {
    .dhp-mobile-vip-notice {
        display: block;
    }
    
    .dhp-mobile-vip-close {
        top: 5px;
        right: 5px;
        font-size: 20px;
        width: 25px;
        height: 25px;
        transform: translate(10px, -10px);
    }
}

/* PC端隐藏 */
@media (min-width: 769px) {
    .dhp-mobile-vip-notice {
        display: none !important;
    }
}

/* 夜间模式 */
html.dark .dhp-mobile-vip-notice {
    background-color: transparent;
}

html.dark .dhp-mobile-vip-alert {
    background-color: #e0a513;
    color: #5a4403;
}

html.dark .dhp-mobile-vip-close {
    color: #8f9194;
    background-color: rgba(0, 0, 0, 0.8);
}

html.dark .dhp-mobile-vip-close:hover {
    color: #f00;
    background-color: rgba(255, 0, 0, 0.1);
}