/* 自定义导航样式 */
.custom-nav {
    display: flex;
    list-style: none;
    gap: 20px;
    background: #fff;
    box-shadow: none;
}

.custom-nav-item {
    position: relative;
    list-style: none;
}

.custom-nav-item > a {
    color: #4a5568 !important;
    text-decoration: none;
    font-size: 18px;
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: inline-block;
}

.custom-nav-item > a:hover {
    color: #2b6cb0 !important;
    background-color: #ebf8ff;
}

.custom-nav-item-active > a {
    background-color: #ebf8ff !important;
    color: #2b6cb0 !important;
}

.custom-nav-item > ul,
.custom-nav-item > dl.custom-nav-child {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 6px;
    min-width: 100px;
    max-width: 180px;
    width: auto;
    padding: 6px 0;
    display: none;
    z-index: 1000;
    list-style: none;
    margin-top: 0;
}

.custom-nav-item:hover > ul,
.custom-nav-item:hover > dl.custom-nav-child {
    display: block;
}

.custom-nav-child > dd {
    margin: 0;
    padding: 0;
}

.custom-nav-child > dd > a {
    color: #4a5568 !important;
    text-decoration: none;
    font-size: 13px;
    padding: 8px 16px;
    display: block;
    transition: all 0.2s ease;
    position: relative;
    background-color: transparent !important;
}

.custom-nav-child > dd > a:hover {
    background-color: #ebf8ff !important;
    color: #2b6cb0 !important;
}

.custom-nav-child > dd > a:active,
.custom-nav-child > dd > a:focus {
    background-color: #ebf8ff !important;
    color: #2b6cb0 !important;
}

.custom-nav > li > ul > li > a {
    color: #4a5568 !important;
    text-decoration: none;
    font-size: 13px;
    padding: 8px 16px;
    display: block;
    transition: all 0.2s ease;
    position: relative;
}

.custom-nav > li > ul > li > a:hover {
    background-color: #ebf8ff;
    color: #2b6cb0 !important;
}

.custom-nav > li > ul > li > a:active,
.custom-nav > li > ul > li > a:focus {
    background-color: #ebf8ff;
    color: #2b6cb0 !important;
}

body { /* IOS禁止微信调整字体大小 */
    -webkit-text-size-adjust: 100% !important;
    background-color: #f5f7fa;
}

/* 移动端侧边导航菜单（面包屑）样式 */
.mobile-sidebar-nav {
    display: none;
    position: fixed;
    top: 0;
    left: -200px;
    width: 200px;
    height: 100vh;
    background: #fff;
    box-shadow: 2px 0 8px rgba(0,0,0,0.1);
    z-index: 10000;
    transition: left 0.3s ease;
    pointer-events: none;
}

.mobile-sidebar-nav.active {
    left: 0;
    pointer-events: auto;
}

/* 默认隐藏子菜单 */
.layui-nav-child {
    display: none;
}

/* 桌面模式下为顶部导航预留空间 */
@media (min-width: 769px) {
    body {
        padding-top: 70px;
    }
}

/*logo 搜索*/
.logo {position: relative;height: 40%;min-height: 220px;max-height: 510px;width: 1000px;margin: 0 auto;}
.logo .logo-a {width: 654px;height: 100%;margin: 0 auto;text-align: left;z-index: 100;}
.logo .logo-b {height: 60%;min-height: 110px;max-height: 310px;position: relative;z-index: 0;text-align: center;}
.logo .m_nav {display:none}
.logotext {color: #2b6cb0;position: absolute;bottom: 10px;width: 100%;text-align: center;font-size: 40px;font-weight: bold;} /* 蓝色 - 主标题颜色 */
.logotext span {color: #ecc94b;} /* 黄色 - 强调文字颜色 */
.logo form {position: relative;}
.logo #s_kw_wrap {position: relative;width: 540px;display: inline-block;zoom: 1;}
.logo #kw {border-color: #e2e8f0;width: 443px;height: 16px;padding: 12px 16px;padding-right: 87px;font-size: 16px;margin: 0;vertical-align: top;outline: 0;box-shadow: none;border-radius: 6px 0 0 6px;border: 1px solid #e2e8f0;background: #fff;color: #333;overflow: hidden;box-sizing: content-box;-webkit-tap-highlight-color: transparent;}
.logo .s_btn_wr {width: 108px;height: 44px;position: relative;z-index: 2;display: inline-block;top: 15px;}
.logo .s_btn {cursor: pointer;width: 108px;height: 44px;line-height: 45px;padding: 0;background: 0 0;background-color: #2b6cb0;border-radius: 0 6px 6px 0;font-size: 17px;color: #fff;box-shadow: none;font-weight: 400;border: none;outline: 0;transition: background-color 0.3s ease;}
.logo .s_btn:hover {background-color: #2563eb;}

/*content*/
#nav-top{background: none;box-shadow: none;position: absolute;top: -70px;width: 100%;padding: 0px;display: flex;justify-content: center;}

/* ========== 新增：顶部导航样式 ========== */
.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    z-index: 999;
    padding: 0 20px;
}
.top-nav-container {
    max-width: 1920px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    position: relative;
}
.top-nav-container > ul {
    display: flex;
    list-style: none;
    gap: 20px;
}
.top-nav-container > ul > li {
    position: relative;
    list-style: none;
}
.top-nav-container > ul > li > a {
    color: #4a5568 !important;
    text-decoration: none;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: inline-block;
}
.top-nav-container > ul > li > a:hover {
    color: #2b6cb0 !important;
    background-color: #ebf8ff;
}
.top-nav-container > ul > li > a.active {
    color: #2b6cb0 !important;
    font-weight: 600;
}
.top-nav-container > ul > li > ul {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 6px;
    min-width: 160px;
    padding: 8px 0;
    display: none;
    z-index: 1000;
    list-style: none;
}
.top-nav-container > ul > li:hover > ul {
    display: block;
}
.top-nav-container > ul > li > dl.layui-nav-child {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 6px;
    min-width: 100px;
    max-width: 180px;
    width: auto;
    padding: 6px 0;
    z-index: 1000;
    list-style: none;
    margin-top: 0;
}
.top-nav-container > ul > li:hover > dl.layui-nav-child {
    display: block;
}
.top-nav-container > ul > li > dl.layui-nav-child > dd {
    margin: 0;
    padding: 0;
}
.top-nav-container > ul > li > dl.layui-nav-child > dd > a {
    color: #4a5568 !important;
    text-decoration: none;
    font-size: 13px;
    padding: 8px 16px;
    display: block;
    transition: all 0.2s ease;
    position: relative;
    background-color: transparent !important;
}
.top-nav-container > ul > li > dl.layui-nav-child > dd > a::before {
    display: none !important;
}
.top-nav-container > ul > li > dl.layui-nav-child > dd > a:hover {
    background-color: #ebf8ff !important;
    color: #2b6cb0 !important;
}
.top-nav-container > ul > li > dl.layui-nav-child > dd > a:active,
.top-nav-container > ul > li > dl.layui-nav-child > dd > a:focus {
    background-color: #ebf8ff !important;
    color: #2b6cb0 !important;
}
.top-nav-container > ul > li > ul > li > a {
    color: #4a5568 !important;
    text-decoration: none;
    font-size: 13px;
    padding: 8px 16px;
    display: block;
    transition: all 0.2s ease;
    position: relative;
}
.top-nav-container > ul > li > ul > li > a::before {
    display: none !important;
}
.top-nav-container > ul > li > ul > li > a:hover {
    background-color: #ebf8ff;
    color: #2b6cb0 !important;
}
.top-nav-container > ul > li > ul > li > a:active,
.top-nav-container > ul > li > ul > li > a:focus {
    background-color: #ebf8ff;
    color: #2b6cb0 !important;
}
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 20px;
    color: #2b6cb0;
    cursor: pointer;
    position: absolute;
    right: 0;
}


.content-blog { width: 100%; max-width: 1920px; margin: 0 auto; padding: 0 20px; }
.loglist-cover img { width: 50px; border-radius: 10px; }
.content-blog > .layui-row {list-style: none;padding: 10px 20px;position: relative;z-index: 1000;border-radius: 8px;background: #fff;margin: 20px auto;box-shadow: 0 2px 8px rgba(0,0,0,0.08);display: flex;flex-wrap: wrap;}
.bloginfo {padding: 0 10px;margin-bottom: 20px;}
.link-b {background: #fff;padding: 20px 20px 15px;display: block;position: relative;display: flex;flex-direction: row;box-shadow: 0 2px 8px rgba(0,0,0,0.08);transition: all 0.3s ease;border-radius: 8px;}
.link-b:hover {transform: translateY(-2px);box-shadow: 0 4px 12px rgba(43, 108, 176, 0.1);}
.link-name { font-size: 18px; color: #2b6cb0; }
.link-jb {position: absolute;top: 0px;right: 0;padding: 0 15px;height: 29px;line-height: 29px;color: #fff;z-index: 500;background-color: #2b6cb0;}
.link-jb:before {position: absolute;display: block;width: 0;height: 0;content: "";top: 0;right: 100%;border: 15px solid;border-color: #2b6cb0;border-left-color: transparent;border-bottom-color: transparent;}
.link-left { display: flex; align-items: center;height:50px; }
.link-right p { margin-top: 6px; border-top: 1px solid #ddd; padding-top: 4px; }
.link-right { display: flex; flex-direction: column; justify-content: center; }
.loglist-cover { margin-right: 10px; }
.link-title {width: 100%;min-width: auto;margin: 0;height: 35px;font-size: 16px;line-height: 33px;padding: 0 20px 0 10px;margin-bottom: 10px;color: #2b6cb0;}

/*word*/
#word {list-style: none;width: 100%;background: rgba(255,255,255,0.95);border-radius: 6px;padding: 15px 10px;position: absolute;margin-top: 10px;z-index: 10000;box-shadow: 0 2px 8px rgba(0,0,0,0.1);}
#word > .keylist {height: 35px;padding: 0 5px;text-indent: 30px;background-size: 20px;line-height: 35px;cursor: pointer;font-size: 16px;border-radius: 6px;color: #4a5568;}
#word .keylist:hover{background-color:#ebf8ff;color:#2b6cb0}
.selected {background-color:#ebf8ff;color:#2b6cb0}

/*footer*/
footer { text-align: center; padding: 10px; color: #666; }
footer a {color: #2b6cb0;}

/* 评论处的输入框提示，居中、隐藏 */
.com_control:focus::-webkit-input-placeholder{color: rgba(255, 255, 255, 0)} 
.com_control::-webkit-input-placeholder {color: rgba(116, 116, 116, 0.336)}
@media (min-width:578px) {.com_control::-webkit-input-placeholder {text-align: center}}
.comment-header {margin-block: 30px;height: 0}
.comment-post {clear: both}
.comment-post p {margin: 5px 0px}
.comment-post .cancel-reply {float: right;cursor: pointer;padding-right: 10%}
.comment-post .cancel-reply:hover {text-decoration: underline}
.comment-post small {font-size: 12px;color: #666}
.comment-post input {padding: 7px 40px;font-size: small;color: #333;width: 33.3333334%}
.comment-post #comment {padding: 10px;width: 100%;border: 1px solid #e2e8f0;font-size: small;border-radius: var(--marRadius) 6px 6px 0;height: 130px;resize: none;color: #333;}
.comment-post #comment_submit {width: 84px;height: 35px;text-align: center;font-size: 14px;margin: 10px 0px;float: left;margin-right: 1px;border-radius: 6px;border: 1px solid #2b6cb0;padding: 7px 10px;justify-content: center;background-color: #2b6cb0;color: #fff;transition: background-color 0.3s ease;}
.comment-post #comment_submit:hover {cursor: pointer;background-color: #2563eb;}
.comment-post .input {width: 100px}
.comment {margin: 10px 0;padding: 10px 0px;font-size: medium;border-bottom: 1px solid #f0f0f0;overflow: hidden;color: #333}
.comment span {color: #2b6cb0}
.comment .comment-time {color: #999;display: inline;font-size: 10px}
.comment .avatar {float: left;margin: 5px 4px}
.comment .comment-infos {background: #f8fafc;padding: 12px;padding-bottom: 5px;border-radius: var(--marRadius);margin-top: 9px;margin-left: 58px}
.comment .comment-infos-unGravatar {padding: 5px}
.com-bottom {margin-bottom: 80px;}
/* 评论列表中指向评论者头像的箭头 */
.arrow {position: absolute;margin-top: 3px;margin-left: -34px;border-width: 13px;border-style: solid;border-color: transparent #f8fafc transparent transparent}
.comment .comment-content {margin: 8px 0px 0px 0px;word-break: break-word}
.comment .comment-reply {float: right;font-size: 12px;cursor: pointer;margin-top: -15px}
.comment .comment-reply:hover {text-decoration: underline}
.comment-children {margin: 20px 10px 10px 20px;clear: both;border: none;padding: 0}
.comment .comment-post {width: 90%;margin: 15px auto}
.comment-info {text-overflow: ellipsis;overflow: hidden;margin-top: -8px;white-space: nowrap}
/* 边栏处的最新评论信息margin-top应该是0 */
.unstyle-li .comment-info {margin-top: 4px}
.cancel-reply {font-size: large}
/* 评论人的头像 */
.avatar img {width:40px;margin-top: 9px;margin-right: 4px;border-radius: 50%}
.unstyle-li input[type="submit"] {background-color: #2b6cb0;color: #FFFFFF;margin-left: -25px;height: 39px;width: 55px;border: 0;border-radius: 0 6px 6px 0;padding: 0;transition: background-color 0.3s ease;}
.unstyle-li input[type="submit"]:hover {background-color: #2563eb;}
/* 评论区的 回复、取消回复 按钮 */
.comment-replay-btn {border: none;cursor: pointer;padding: 0;background-color: unset}
.comment-replay-btn:hover {color: #2b6cb0;text-decoration: underline;transition: all 0.2s}
/* 评论相关 */
#comment-info {display: flex;flex-direction: column;}
#comment-info input {width: 50%;}
.comment-post #comment {border-radius: 6px;}
.comment-post input {width: 100%}
.commentform .comment-info {margin-top: -5px}
#comments {margin-bottom: 80px}
.com_control {border: 1px solid #ced4da;border-radius: 6px !important;margin-top: 10px}
.comment-mail {margin-bottom: 10px;}
.comment .comment-post {display: table}
/* 评论列表换新样式 */
.arrow {display: none}
.comment .comment-infos {margin-left: 0;font-size: 14px}
.comment .avatar {margin: 6px 8px;height: 30px;width: 30px;}



/*其他*/
div#he-plugin-simple { display: flex; }

/* ========== 推荐/热门文章板块 ========== */
.article-section {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 20px;
    display: flex;
    gap: 20px;
    padding: 0 20px;
    box-sizing: border-box;
}
.article-card {
    flex: 1;
    background: #fff;
    border-radius: 8px;
    padding: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.article-card h2 {
    font-size: 18px;
    color: #2b6cb0;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ebf8ff;
    font-weight: 600;
}
.article-list {
    list-style: none;
}
.article-item {
    margin-bottom: 10px;
    padding-left: 18px;
    position: relative;
    transition: all 0.2s ease;
}
.article-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #2b6cb0;
}
.article-link {
    color: #4a5568;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    display: flex;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.article-link:hover {
    color: #2b6cb0;
    text-decoration: underline;
}

/* ========== 多专区最新文章板块（原版样式 + 性能优化） ========== */
.section-zone {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto 20px;
    padding: 0 20px;
    box-sizing: border-box;
}
.zone-card-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.zone-card {
    flex: 0 0 auto;
    min-width: 120px;
    background: linear-gradient(135deg, #f0f8ff 0%, #ebf8ff 100%);
    border-radius: 6px;
    padding: 2px 6px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid #e8f4f8;
    box-sizing: border-box;
}
.zone-card a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    gap: 4px;
}
.zone-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(43, 108, 176, 0.1);
    background: linear-gradient(135deg, #ebf8ff 0%, #e8f4f8 100%);
}
.zone-card-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
}

/* CSS图标样式 */
.icon-0::before { content: "🎯"; }
.icon-1::before { content: "🚀"; }
.icon-2::before { content: "💡"; }
.icon-3::before { content: "🔧"; }
.icon-4::before { content: "📚"; }
.icon-5::before { content: "🎨"; }
.icon-6::before { content: "🔍"; }
.icon-7::before { content: "🌟"; }
.icon-8::before { content: "🛠️"; }
.icon-9::before { content: "🧠"; }
.icon-10::before { content: "⚡"; }
.icon-11::before { content: "🎮"; }
.icon-12::before { content: "📊"; }
.icon-13::before { content: "🎵"; }
.icon-14::before { content: "📷"; }
.icon-15::before { content: "🌈"; }
.icon-16::before { content: "🔥"; }
.icon-17::before { content: "💎"; }
.icon-18::before { content: "🎪"; }
.icon-19::before { content: "🎭"; }
.icon-20::before { content: "🎲"; }
.icon-21::before { content: "🎸"; }
.icon-22::before { content: "🎹"; }
.icon-23::before { content: "🎺"; }
.icon-24::before { content: "🎻"; }
.icon-25::before { content: "🎤"; }
.icon-26::before { content: "🎧"; }
.icon-27::before { content: "🎬"; }
.icon-28::before { content: "📺"; }
.icon-29::before { content: "📻"; }

.zone-card-text {
    font-size: 14px;
    color: #2b6cb0;
    font-weight: 500;
}
.zones-latest-container {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto 20px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    box-sizing: border-box;
}
.zone-latest-articles {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}
.zone-latest-title {
    font-size: 18px;
    color: #2b6cb0;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ebf8ff;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}
.zone-latest-title span {
    font-size: 14px;
    color: #666;
    font-weight: normal;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.more-btn {
    font-size: 12px;
    color: #2b6cb0;
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid #2b6cb0;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: inline-block;
    flex-shrink: 0;
}
.more-btn:hover {
    background-color: #2b6cb0;
    color: #fff;
}
.zone-latest-list {
    list-style: none;
    margin-bottom: 15px;
    width: 100%;
    box-sizing: border-box;
}
.zone-latest-item {
    padding: 8px 0;
    border-bottom: 1px dashed #f0f0f0;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}
.zone-latest-item:last-child {
    border-bottom: none;
}
.zone-latest-item:hover {
    background-color: #f8fafc;
    padding-left: 5px;
    border-radius: 4px;
}
.zone-latest-link {
    color: #4a5568;
    text-decoration: none;
    font-size: 14px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
    word-break: break-all;
}
.zone-latest-link:hover {
    color: #2b6cb0;
    text-decoration: underline;
}
.zone-latest-meta {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
}
.zone-latest-meta i {
    margin-right: 4px;
}

/* ========== 资源列表样式 ========== */
.resource-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
    contain: layout paint;
}
.resource-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    display: block;
    position: relative;
    border: 2px solid transparent;
    z-index: 1;
}
.resource-card::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 8px;
    border: 2px solid transparent;
    background: linear-gradient(
        45deg, 
        transparent 0%, 
        rgba(43, 108, 176, 0.2) 25%, 
        rgba(43, 108, 176, 0.9) 50%, 
        rgba(43, 108, 176, 0.2) 75%, 
        transparent 100%
    ) border-box;
    -webkit-mask: 
        linear-gradient(#fff 0 0) padding-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    background-size: 200% 200%;
    animation: borderRotate 3s linear infinite;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.resource-card:hover::before {
    opacity: 1;
}
@keyframes borderRotate {
    0% {
        background-position: 200% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.resource-card.hidden {
    display: none;
}
.resource-card:hover {
    box-shadow: 0 8px 24px rgba(43, 108, 176, 0.15);
    transform: translateY(-5px);
}
.resource-card h3 {
    font-size: 18px;
    color: #2b6cb0;
    margin-bottom: 10px;
}
.resource-card p {
    font-size: 14px;
    color: #4a5568;
    line-height: 1.6;
    margin-bottom: 15px;
    min-height: 48px;
}
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tag {
    font-size: 12px;
    padding: 4px 10px;
    background: #ebf8ff;
    color: #2b6cb0;
    border-radius: 20px;
}

/* ========== 顶部导航响应式适配 ========== */
@media (max-width: 768px) {
    .top-nav {
        display: none;
    }
    .resource-list {
        grid-template-columns: 1fr;
    }
    .resource-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(43, 108, 176, 0.12);
    }
}

/* ========== 多专区最新文章板块响应式适配 ========== */
@media (max-width: 1920px) {
    .zones-latest-container {
        max-width: 1600px;
    }
    .section-zone {
        max-width: 1600px;
    }
    .article-section {
        max-width: 1600px;
    }
}

@media (max-width: 1600px) {
    .zones-latest-container {
        max-width: 1440px;
    }
    .section-zone {
        max-width: 1440px;
    }
    .article-section {
        max-width: 1440px;
    }
}

@media (max-width: 1440px) {
    .zones-latest-container {
        max-width: 1280px;
    }
    .section-zone {
        max-width: 1280px;
    }
    .article-section {
        max-width: 1280px;
    }
}

@media (max-width: 1280px) {
    .zones-latest-container {
        max-width: 1200px;
    }
    .section-zone {
        max-width: 1200px;
    }
    .article-section {
        max-width: 1200px;
    }
}

@media (max-width: 1200px) {
    .zones-latest-container {
        max-width: 992px;
        padding: 0;
        gap: 15px;
    }
    .section-zone {
        max-width: 992px;
        padding: 0;
    }
    .article-section {
        max-width: 992px;
        padding: 0;
    }
}

@media (max-width: 992px) {
    .zones-latest-container {
        max-width: 768px;
        padding: 0;
        gap: 15px;
    }
    .zone-latest-articles {
        padding: 15px;
    }
    .section-zone {
        max-width: 768px;
        padding: 0;
    }
    .article-section {
        max-width: 768px;
        padding: 0;
    }
}

@media (max-width: 768px) {
    .zones-latest-container {
        max-width: 100%;
        padding: 0;
        grid-template-columns: 1fr;
        gap: 15px;
        box-sizing: border-box;
    }
    .zone-latest-articles {
        padding: 12px;
    }
    .zone-latest-title {
        font-size: 16px;
    }
    .more-btn {
        font-size: 11px;
        padding: 3px 8px;
    }
    .section-zone {
        max-width: 100%;
        padding: 0;
    }
    .article-section {
        max-width: 100%;
        padding: 0;
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .zones-latest-container {
        padding: 0;
        gap: 10px;
        box-sizing: border-box;
    }
    .zone-latest-articles {
        padding: 10px;
    }
    .zone-latest-title {
        font-size: 15px;
    }
    .zone-latest-link {
        font-size: 13px;
    }
    .section-zone {
        max-width: 100%;
        padding: 0;
    }
    .article-section {
        max-width: 100%;
        padding: 0;
    }
}