/* 头部样式 */
        .nav-link { font-size: 14px; padding: 0 15px; color: #333; }
        
        /* 搜索框还原 */
        .search-container { 
            border: 1px solid #ddd; 
            padding: 5px 15px; 
            display: flex; 
            align-items: center; 
            width: 200px;
        }
        .search-input { border: none; outline: none; width: 78%; font-size: 14px; }
        .search-icon { color: #f87c1d; cursor: pointer; font-size: 1.2rem; }

        /* 响应式网格布局 */
        .post-grid { 
            display: grid; 
            gap: 40px 30px; 
            margin-top: 40px; 
        }
        @media (min-width: 992px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
        @media (min-width: 768px) and (max-width: 991px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 767px) { .post-grid { grid-template-columns: 1fr; } }

        /* 文章块样式 */
        .post-item { border-top: 1px solid #333; padding-top: 25px;  position: relative;     /* 【新增】为进度条定位提供参照物 */
}
        
        /* 【新增】定义进度条的初始状态 */
.post-item::after {
    content: "";
    position: absolute;
    top: -1px;              /* 完美压在原本的 border-top 线上 */
    left: 0;
    width: 0;               /* 初始宽度为 0 */
    height: 2px;            /* 进度条的粗细，可改为 2px 更有视觉冲击力 */
    background: #dc3545;    /* 进度条颜色，这里用的是 Bootstrap 红色(text-danger) */
    transition: width 0.4s ease-in-out; /* 动画过渡效果：0.4秒，先慢后快再慢 */
}

/* 【新增】鼠标滑过(Hover)时的状态 */
.post-item:hover::after {
    width: 100%;            /* 宽度变为 100%，触发从左到右的动画 */
}

        .post-date { color: #aaa; font-size: 13px; margin-bottom: 12px; display: flex; align-items: center; }
        .post-date::before { content: ""; width: 25px; height: 1px; background: #aaa; margin-right: 10px; }
        .post-title { font-size: 18px; font-weight: 700; margin-bottom: 15px; color: #000; }
        .post-title a{color:#000; text-decoration:none}
        .post-summary { color: #666; font-size: 14px; line-height: 1.7; }
        
      
    .banner-section {
        height: 450px;
        width: 100%;
        /* 使用径向渐变模拟图片中的曲线流体效果 */
        background-image: url('/theme/img/1747533600441760.jpg');
        background-size: cover;
        position: relative;
    }
    
    .pagination{display:inline-block;padding-left:0;margin:20px 0;border-radius:4px;}
.pagination>li{display:inline;}
.pagination>li>a,.pagination>li>span{position:relative;float:left;padding:6px 12px;line-height:1.42857;text-decoration:none;color:#337ab7;background-color:#fff;border:1px solid #ddd;margin-left:-1px;}
.pagination>li:first-child>a,.pagination>li:first-child>span{margin-left:0;border-bottom-left-radius:4px;border-top-left-radius:4px;}
.pagination>li:last-child>a,.pagination>li:last-child>span{border-bottom-right-radius:4px;border-top-right-radius:4px;}
.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover{z-index:2;color:#23527c;background-color:#eee;border-color:#ddd;}
.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{z-index:3;color:#fff;background-color:#337ab7;border-color:#337ab7;cursor:default;}