/* ==========================================================================
   seo-extra.css —— 官网原版 CSS 之外的补充样式
   ==========================================================================
   官网 CSS（style-2021.css 等）里没有的类，全部集中在这里，方便日后维护：
     · 授权与资质页（about-ry / about-ry-pic，取自老站 email263.com 的版式）
       + 体系认证清单（auth-cert-list）、官方核验入口（auth-verify-box）
     · 销售查询（pq-*，复刻 263 官网「商务合作」的查询工具）
     · 常见问题中心（faq-*）
   ========================================================================== */

/* --------------------------------------------------------------------------
   一、授权与资质页（参照 email263.com/introduction.html 的「资质授权」板块）
   -------------------------------------------------------------------------- */
.auth-intro { padding: 40px 0 10px; }
.auth-intro h2 { margin-bottom: 16px; }
.auth-lead {
    font-size: 16px;
    line-height: 2;
    color: #4a4a4a;
    max-width: 980px;
}
.auth-lead strong { color: #2850a0; }

.about-ry { width: 100%; }
.about-ry ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.about-ry li {
    width: 25%;
    box-sizing: border-box;
    padding: 0 12px 28px;
    text-align: center;
}
.about-ry-pic {
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 4px;
    overflow: hidden;
    line-height: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
    transition: transform .25s ease, box-shadow .25s ease;
}
.about-ry-pic:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
}
.about-ry-pic img {
    width: 100%;
    height: 260px;
    object-fit: contain;
    background: #fafbfc;
}
.about-ry-ph {
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b8bec7;
    font-size: 14px;
    background: #fafbfc;
}
.about-ry li > p {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}
.about-ry-meta {
    color: #8a9099 !important;
    font-size: 12px !important;
}
.about-ry-desc {
    color: #8a9099 !important;
    font-size: 12px !important;
}

.auth-empty { line-height: 2; color: #555; }
.auth-tip {
    margin-top: 16px;
    padding: 16px 18px;
    background: #f7f8fa;
    border-left: 3px solid #2850a0;
    border-radius: 3px;
    font: 13px/1.9 Menlo, Consolas, monospace;
    color: #444;
    white-space: pre-wrap;
}
.auth-contact { list-style: none; margin: 12px 0; padding: 0; }
.auth-contact li { line-height: 2.1; font-size: 15px; color: #4a4a4a; }
.auth-note { margin-top: 18px; color: #999; font-size: 13px; }

@media (max-width: 991px) {
    .about-ry li { width: 50%; }
}
@media (max-width: 600px) {
    .about-ry li { width: 100%; }
}

/* ---- clearfix ----
   本站点 CSS 的 .row 只有 margin 归零，【没有清浮动】，而 .col-xs-* 是 float:left。
   于是「.row 里只放一个 .col-*」的写法会让 .row 高度塌成 0，
   内容溢出父级 .section，被后面 position:relative / z-index:2 的 .section.footer 盖住 ——
   表现就是「查询按钮可见但点不动」。
   这里给授权页用到的 .row 补上 clearfix（作用域限定在本页，不影响其它页面）。 */
.auth-intro .row::after,
.auth-verify .row::after,
.auth-query .row::after,
.auth-group .row::after {
    content: "";
    display: table;
    clear: both;
}

/* ---- 分组标题：官网 .section h2 是居中 + 通栏，这里统一改成左对齐带竖线 ---- */
.auth-group > .main-warp > h2,
.auth-verify > .main-warp > h2,
.auth-query  > .main-warp > h2 {
    width: auto;
    margin: 0 0 22px;
    padding: 0 0 0 12px;
    text-align: left;
    border-left: 4px solid #2850a0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    color: #1f2937;
}
.auth-group > .main-warp > h2 > i,
.auth-verify > .main-warp > h2 > i,
.auth-query  > .main-warp > h2 > i {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.7;
    color: #8a9099;
}

/* ---- 体系与资质认证：文字清单（263 官网的 honour 图标是纯白剪影，
        白底不可见，故不用图，改文字 + 标记点，并注明来源） ---- */
.auth-cert-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.auth-cert-list > li {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e6eaf2;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}
.ac-mark {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    margin-top: 2px;
    border-radius: 50%;
    background: #eef3fd;
    position: relative;
}
.ac-mark::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 7px;
    width: 6px;
    height: 11px;
    border: solid #2850a0;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.ac-body { min-width: 0; }
.ac-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: #1f2937;
}
.ac-meta {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: #8a9099;
}
.ac-desc {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.8;
    color: #5a6472;
}
.auth-source {
    margin: 16px 0 0;
    font-size: 13px;
    color: #8a9099;
}
.auth-source a { color: #2850a0; }

@media (max-width: 768px) {
    .auth-cert-list { grid-template-columns: 1fr; }
}

/* ---- 资质核验：官方核验入口 ---- */
.auth-verify-box {
    margin: 0 0 20px;
    padding: 20px 22px;
    background: #f5f8ff;
    border: 1px solid #dbe6fb;
    border-radius: 8px;
}
.avb-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
}
.avb-text {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.9;
    color: #4a5568;
}
.avb-text strong { color: #2850a0; }
.avb-actions { margin: 0; }
.avb-btn {
    display: inline-block;
    padding: 9px 22px;
    background: #2850a0;
    border-radius: 4px;
    color: #fff !important;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none !important;
    transition: background .2s ease;
}
.avb-btn:hover { background: #1f3f82; }

/* --------------------------------------------------------------------------
   二、销售查询（/authorization/ 页内，复刻 263 官网「商务合作」查询工具）
   -------------------------------------------------------------------------- */
.pq-box {
    padding: 22px 24px 26px;
    background: #fbfcfe;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.pq-tabs {
    display: flex;
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    border-bottom: 1px solid #e2e8f0;
}
.pq-tabs > li {
    position: relative;
    padding: 11px 26px;
    margin-bottom: -1px;
    font-size: 15px;
    line-height: 1.4;
    color: #67777f;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-bottom: none;
}
.pq-tabs > li:hover { color: #2850a0; }
.pq-tabs > li.on {
    color: #2850a0;
    font-weight: 700;
    background: #fff;
    border-color: #e2e8f0;
    border-radius: 6px 6px 0 0;
}

.pq-body { padding: 2px 4px 4px; }
.pq-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.pq-row > label {
    flex: 0 0 122px;
    font-size: 15px;
    color: #4a5568;
}
.pq-input {
    width: 330px;
    max-width: 100%;
    height: 38px;
    padding: 0 12px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #d7dee8;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.pq-input::placeholder { color: #b4b9c1; }
.pq-input:focus { border-color: #2850a0; box-shadow: 0 0 0 2px rgba(40, 80, 160, .12); }
.pq-code { width: 170px; }
.pq-cap {
    width: 110px;
    height: 38px;
    margin-left: 12px;
    border: 1px solid #d7dee8;
    border-radius: 4px;
    background: #f5f7fa;
    cursor: pointer;
    vertical-align: middle;
}
.pq-actions { padding-left: 122px; }
.pq-btn {
    padding: 9px 40px;
    background: #f0f0f0;
    border: 1px solid #cbcfd5;
    border-radius: 3px;
    color: #67777f;
    font-size: 14px;
    letter-spacing: 5px;
    text-indent: 5px;
    cursor: pointer;
    transition: all .2s ease;
}
.pq-btn:hover:not(:disabled) {
    background: #2850a0;
    border-color: #2850a0;
    color: #fff;
}
.pq-btn:disabled { opacity: .6; cursor: not-allowed; }

.pq-hint {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px dashed #e2e8f0;
    font-size: 12.5px;
    line-height: 1.9;
    color: #8a9099;
}
.pq-hint strong { color: #5a6472; }

.pq-result { margin-top: 20px; }
.pq-msg {
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.9;
    color: #4a5568;
}
.pq-msg-err  { border-color: #f3d3d3; background: #fdf6f6; color: #b04141; }
.pq-msg-none { border-color: #f0e2c4; background: #fffbf2; color: #a5761f; }
.pq-msg-sub  { color: #8a9099; }
.pq-msg a { color: #2850a0; }

.pq-count {
    margin: 0 0 14px;
    font-size: 14px;
    color: #4a5568;
}
.pq-count b { color: #2850a0; }
.pq-back {
    float: right;
    font-size: 13px;
    color: #2850a0 !important;
    text-decoration: none !important;
}
.pq-item {
    margin-bottom: 14px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}
.pq-item-title {
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eef1f6;
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
}
.pq-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.pq-table th {
    width: 96px;
    padding: 5px 0;
    text-align: left;
    font-weight: 400;
    color: #8a9099;
    vertical-align: top;
}
.pq-table td {
    padding: 5px 0;
    color: #33404f;
    word-break: break-all;
}
.pq-tip {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: #8a9099;
}

@media (max-width: 640px) {
    .pq-box { padding: 16px 14px 18px; }
    .pq-row > label { flex: 0 0 100%; margin-bottom: 6px; }
    .pq-input { width: 100%; }
    .pq-code { width: calc(100% - 122px); }
    .pq-actions { padding-left: 0; }
    .pq-btn { width: 100%; padding: 11px 0; }
}

/* --------------------------------------------------------------------------
   三、常见问题中心（左右结构：左 = 分类导航 / 右 = 问题列表）
   -------------------------------------------------------------------------- */
.faq-page, .news-page { padding: 36px 0 60px; background: #fff; }

/* 左右两栏骨架 */
.faq-layout, .news-layout { display: flex; align-items: flex-start; gap: 34px; }
.faq-aside, .news-aside { flex: 0 0 236px; width: 236px; position: sticky; top: 18px; }
.faq-main, .news-main { flex: 1 1 auto; min-width: 0; }

/* 左栏 A：分类导航 */
.faq-aside-title, .news-aside-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    padding: 0 0 12px;
    border-bottom: 2px solid #2850a0;
}
ul.faq-cat, ul.news-cat {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #e8ebef;
    border-top: 0;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
}
ul.faq-cat li, ul.news-cat li { border-top: 1px solid #eef1f5; }
ul.faq-cat li:first-child, ul.news-cat li:first-child { border-top: 0; }
ul.faq-cat a, ul.news-cat a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    font-size: 15px;
    color: #374151;
    text-decoration: none;
    transition: background .18s, color .18s;
}
ul.faq-cat a:hover, ul.news-cat a:hover { background: #f5f8fd; color: #2850a0; }
ul.faq-cat li.cur a, ul.news-cat li.cur a { background: #2850a0; color: #fff; font-weight: 500; }
ul.faq-cat .n, ul.news-cat .n {
    flex: 0 0 auto;
    min-width: 30px;
    text-align: center;
    font-size: 12px;
    color: #7b8698;
    background: #f1f4f8;
    border-radius: 10px;
    padding: 1px 8px;
}
ul.faq-cat li.cur .n, ul.news-cat li.cur .n { background: rgba(255, 255, 255, .24); color: #fff; }

/* 左栏栏目导航 → 年份归档 之间的分隔小标题 */
ul.faq-cat li.cat-sep, ul.news-cat li.cat-sep {
    border-top: 0;
    padding: 12px 16px 5px;
    line-height: 1;
    font-size: 12px;
    letter-spacing: .06em;
    color: #9aa5b5;
    background: #fafbfd;
}

/* 左栏 B：联系我们卡片 */
.faq-side-card, .news-side-card {
    margin-top: 20px;
    padding: 20px 18px;
    border-radius: 8px;
    text-align: center;
    background: linear-gradient(135deg, #f5f8fd 0%, #eef3fb 100%);
}
.faq-side-card h4, .news-side-card h4 { margin: 0 0 8px; font-size: 16px; color: #1f2937; }
.faq-side-card p, .news-side-card p { margin: 0 0 14px; font-size: 13px; line-height: 1.7; color: #6b7280; }
.faq-side-btn, .news-side-btn {
    display: block;
    margin: 0 0 8px;
    padding: 9px 0;
    border-radius: 5px;
    background: #2850a0;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.faq-side-btn:last-child, .news-side-btn:last-child { margin-bottom: 0; }
.faq-side-btn:hover, .news-side-btn:hover { background: #1e3f85; color: #fff; }
.faq-side-btn.ghost, .news-side-btn.ghost { background: #fff; color: #2850a0; border: 1px solid #c9d6ea; }
.faq-side-btn.ghost:hover, .news-side-btn.ghost:hover { background: #eef3fb; color: #2850a0; }

/* 右栏 A：标题 */
.faq-head, .news-head { padding: 0 0 18px; }
.faq-head h1, .news-head h1 { font-size: 26px; color: #1a1a1a; margin: 0 0 12px; font-weight: 600; }
.faq-head p, .news-head p { font-size: 14px; color: #6b7280; line-height: 1.9; margin: 0; }
.faq-head a, .news-head a { color: #2850a0; }

/* 右栏 B：搜索 */
.faq-search, .news-search {
    display: flex;
    margin: 0 0 22px;
    box-shadow: 0 2px 14px rgba(40, 80, 160, .08);
    border-radius: 6px;
    overflow: hidden;
}
.faq-search input, .news-search input {
    flex: 1;
    height: 46px;
    padding: 0 16px;
    border: 1px solid #e3e6eb;
    border-right: 0;
    border-radius: 6px 0 0 6px;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
}
.faq-search input:focus, .news-search input:focus { border-color: #2850a0; }
.faq-search button, .news-search button {
    height: 46px;
    padding: 0 26px;
    border: 0;
    background: #2850a0;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    border-radius: 0 6px 6px 0;
}
.faq-search button:hover, .news-search button:hover { background: #1e3f85; }

.faq-kw, .news-kw { color: #6b7280; font-size: 14px; margin: -8px 0 20px; }
.faq-kw a, .news-kw a { color: #2850a0; }
.faq-empty, .news-empty { padding: 50px 0; color: #888; }
.faq-empty a, .news-empty a { color: #2850a0; }

.faq-list { max-width: none; margin: 0; }

.faq-item {
    border: 1px solid #e8ebef;
    border-radius: 6px;
    margin-bottom: 10px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
.faq-item[open] {
    border-color: #c9d6ea;
    box-shadow: 0 4px 16px rgba(40, 80, 160, .07);
}
.faq-item > summary {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    font-size: 16px;
    line-height: 1.7;
    color: #1f2937;
    font-weight: 500;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: #2850a0; }
.faq-no {
    flex: 0 0 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    background: #eef3fb;
    color: #2850a0;
    font-size: 12px;
    font-weight: 600;
    margin-top: 2px;
}
.faq-item[open] .faq-no { background: #2850a0; color: #fff; }
.faq-q { flex: 1; }

.faq-a {
    padding: 0 20px 18px 54px;
    font-size: 15px;
    line-height: 1.95;
    color: #4b5563;
    border-top: 1px dashed #eef1f5;
    padding-top: 14px;
    margin-top: -2px;
}
.faq-a p { margin: 0 0 10px; }
.faq-a img { max-width: 100%; height: auto; }
.faq-a table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.faq-a td, .faq-a th { border: 1px solid #e5e7eb; padding: 8px 10px; font-size: 14px; }
.faq-src { color: #9aa2ad; font-size: 12px; margin-top: 6px; }
.faq-src a { color: #2850a0; }

.faq-cta, .news-cta {
    margin: 40px 0 0;
    padding: 32px 24px;
    text-align: center;
    background: linear-gradient(135deg, #f5f8fd 0%, #eef3fb 100%);
    border-radius: 8px;
}
.faq-cta h2, .news-cta h2 { font-size: 20px; margin: 0 0 10px; color: #1f2937; }
.faq-cta p, .news-cta p { color: #6b7280; font-size: 14px; margin: 0 0 20px; }
.faq-cta-btn, .news-cta-btn {
    display: inline-block;
    margin: 0 6px;
    padding: 11px 30px;
    border-radius: 5px;
    background: #2850a0;
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    transition: background .2s;
}
.faq-cta-btn:hover, .news-cta-btn:hover { background: #1e3f85; color: #fff; }
.faq-cta-btn.ghost, .news-cta-btn.ghost {
    background: #fff;
    color: #2850a0;
    border: 1px solid #c9d6ea;
}
.faq-cta-btn.ghost:hover, .news-cta-btn.ghost:hover { background: #eef3fb; }

/* 平板 / 手机：左右结构收成上下结构，分类变横向胶囊 */
@media (max-width: 900px) {
    .faq-layout, .news-layout { display: block; }
    .faq-aside, .news-aside { position: static; width: auto; flex: none; margin-bottom: 24px; }
    .faq-aside-title, .news-aside-title { font-size: 15px; padding-bottom: 10px; }
    ul.faq-cat, ul.news-cat { display: flex; flex-wrap: wrap; gap: 8px; border: 0; border-radius: 0; }
    ul.faq-cat li, ul.news-cat li { border-top: 0; }
    ul.faq-cat a, ul.news-cat a { padding: 8px 14px; border: 1px solid #dfe5ee; border-radius: 20px; }
    ul.faq-cat li.cur a, ul.news-cat li.cur a { border-color: #2850a0; }
    ul.faq-cat .n, ul.news-cat .n { min-width: 0; padding: 0 0 0 6px; background: none; color: inherit; opacity: .72; }
    ul.faq-cat li.cur .n, ul.news-cat li.cur .n { background: none; }
    /* 胶囊流式布局下不需要分隔小标题 */
    ul.faq-cat li.cat-sep, ul.news-cat li.cat-sep { display: none; }
    .faq-side-card, .news-side-card { display: none; }
}

@media (max-width: 600px) {
    .faq-head h1, .news-head h1 { font-size: 22px; }
    .faq-item > summary { font-size: 15px; padding: 14px 14px; }
    .faq-a { padding-left: 14px; }
}

/* --------------------------------------------------------------------------
   三·二、新闻中心（左右结构：左 = 年份归档 / 右 = 新闻列表）
   --------------------------------------------------------------------------
   骨架复用上面「常见问题」那一套（那些选择器已经分组写了 .news-* 别名），
   这里只写新闻列表自己需要的：列表条目 + 分页。
   -------------------------------------------------------------------------- */
.news-feed { border-top: 1px solid #e8ebef; }

.news-item { padding: 22px 0; border-bottom: 1px solid #eef1f5; }
.news-item h3 { margin: 0 0 8px; font-size: 19px; line-height: 1.55; font-weight: 600; }
.news-item h3 a { color: #1f2937; text-decoration: none; transition: color .18s; }
.news-item h3 a:hover { color: #2850a0; }
.news-item .desc { margin: 0 0 10px; font-size: 14px; line-height: 1.9; color: #6b7280; }
.news-item .meta { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: #9aa2ad; }
.news-item .meta time { flex: 0 0 auto; }
.news-item .meta .more { margin-left: auto; color: #2850a0; text-decoration: none; }
.news-item .meta .more:hover { text-decoration: underline; }

/* 置顶角标（文章后台勾了「置顶」才出现） */
.news-item.is-top h3::before {
    content: "置顶";
    display: inline-block;
    margin-right: 8px;
    padding: 1px 7px;
    font-size: 11.5px;
    font-weight: 400;
    color: #fff;
    background: #e8683a;
    border-radius: 3px;
    vertical-align: 2px;
}

/* 分页（/news/ 与 /faq/ 共用一套外观）
   —— 常见问题中心 2026-10 补分页：172 条问答一页塞不下，
      单页 HTML 接近 400KB，首屏要滚很久。两个列表页的分页条长得一样，
      用户不用重新认一次。 */
.news-pager, .faq-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 30px 0 0; font-size: 14px; }
.news-pager a, .news-pager span,
.faq-pager a, .faq-pager span { padding: 7px 14px; border: 1px solid #dfe5ee; border-radius: 4px; text-decoration: none; color: #374151; }
.news-pager a:hover, .faq-pager a:hover { border-color: #2850a0; color: #2850a0; }
.news-pager .cur, .faq-pager .cur { background: #2850a0; border-color: #2850a0; color: #fff; }
.news-pager .dis, .faq-pager .dis { color: #c3c9d2; border-color: #eef1f5; }

/* 分页条下面那行「当前显示第 X–Y 条」 */
.faq-range { margin: 12px 0 0; text-align: center; font-size: 13px; color: #9aa2ad; }

@media (max-width: 900px) {
    .news-item { padding: 18px 0; }
    .news-item h3 { font-size: 17px; }
    .news-item .meta { flex-wrap: wrap; gap: 6px 14px; }
    .news-item .meta .more { margin-left: 0; }
}
@media (max-width: 600px) {
    .news-item h3 { font-size: 16px; }
    .news-item .desc { font-size: 13.5px; }
    /* 窄屏分页条：缩小内边距与字号，保证「首页/上一页/x/y/下一页/尾页」一行放得下 */
    .news-pager, .faq-pager { gap: 5px; font-size: 13px; }
    .news-pager a, .news-pager span,
    .faq-pager a, .faq-pager span { padding: 6px 9px; }
}

/* --------------------------------------------------------------------------
   四、内页面包屑（当前位置）
   --------------------------------------------------------------------------
   背景：官网原版内页（含 /success/*、/news/*、/case/* 等）只有 SEO 用的
   BreadcrumbList 结构化数据，页面上并没有可见的「当前位置」，
   用户点进深层页面后不知道自己在哪一层 —— 这里补上可见面包屑。
   样式刻意做得轻（浅底 + 小字），不抢正文视觉，但层级一眼可辨。

   ★ 2026-10-13 位置调整：面包屑从「紧贴主导航」改为「内页 banner 之后、正文之前」，
   由 layout.php 调 crumb_after_banner() 在渲染阶段插入（见 helpers.php）。
   落点变了，页脚无关，但【让位方式】必须跟着改：

   顶部导航 .nav-warp 是 position:fixed（高 71px / 移动端 56px）浮在内容之上，
   原来靠 .site-crumb 自己的 margin-top:71px 撑开 —— 那条外边距还会穿透 <main>
   （margin collapsing），顺带把整个 main 推下 71px，首页之外全部页面都靠它让位。
   面包屑移到 banner 之后以后，这个做法就不成立了：
   它会在 banner 与面包屑之间平白留出 71px 空白，而 banner 自己顶到 y=0 被导航盖住。
   所以让位改由 <main class="has-crumb"> 承担：面包屑在不在第一位，表现都一样。
   -------------------------------------------------------------------------- */
main#main-content.has-crumb {
    padding-top: 71px;      /* = 固定导航高度 */
}

.site-crumb {
    padding: 11px 16px;
    background: #f7f9fc;
    border-bottom: 1px solid #eaeef5;
    font-size: 13px;
    line-height: 1.5;
}
.site-crumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.site-crumb li {
    color: #8a9099;
}
.site-crumb li:not(:last-child)::after {
    content: "\203A";          /* › */
    margin: 0 8px;
    color: #c3cad6;
}
.site-crumb a {
    color: #6b7280;
    text-decoration: none;
    transition: color .18s;
}
.site-crumb a:hover { color: #2850a0; }
.site-crumb li.cur { color: #1f2937; font-weight: 500; }

@media (max-width: 768px) {
    main#main-content.has-crumb { padding-top: 56px; }
    .site-crumb { padding: 10px 12px; font-size: 12px; }
    .site-crumb li:not(:last-child)::after { margin: 0 6px; }
}

/* --------------------------------------------------------------------------
   五、云邮帮助中心知识库文章（新增内容正文组件）

   为什么单独写一套：
     · 原官网帮助文章正文是「截图 + 一行说明」的老形态，CSS 里没有表格 / 步骤 / 问答的样式；
       而新文章按 SEO + GEO 的要求改成了「直接回答 + 参数表 + 步骤 + 常见问题」的结构化形态，
       这些结构自带 class（help-*），需要配套样式才不会挤成一团。
     · 原样式 .blog-detail .content strong{font-size:20px} 会把正文里的强调字放大到 20px，
       结构化内容里强调很多，必须在本区块内把它拉回正常字号。

   作用域严格限定在 .blog-detail .content 内，不影响页面其它部分。
   -------------------------------------------------------------------------- */
.blog-detail .content > h2 {
    font-size: 20px;
    font-weight: 600;
    color: #181931;
    line-height: 1.5;
    text-align: left;
    margin: 30px 0 14px;
    padding: 0 0 0 12px;
    border-left: 4px solid #2850a0;
}
.blog-detail .content .help-lead {
    background: #f4f7fd;
    border-left: 4px solid #2850a0;
    border-radius: 0 4px 4px 0;
    padding: 15px 20px;
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.9;
    color: #26303f;
}
.blog-detail .content .help-lead strong { font-size: 15px; color: #2850a0; margin: 0; }

/* 参数表：AI 引擎最常直接引用的事实块 */
.blog-detail .content .help-params {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.7;
}
.blog-detail .content .help-params th,
.blog-detail .content .help-params td {
    border: 1px solid #e3e6eb;
    padding: 10px 12px;
    text-align: left;
    color: #26303f;
}
.blog-detail .content .help-params th {
    background: #f4f7fd;
    font-weight: 600;
    color: #181931;
    white-space: nowrap;
}
.blog-detail .content .help-params code,
.blog-detail .content .help-note code {
    background: #eef3fb;
    color: #2850a0;
    padding: 1px 6px;
    border-radius: 3px;
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 13px;
    word-break: break-all;
}

.blog-detail .content .help-points,
.blog-detail .content .help-steps,
.blog-detail .content .help-related {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}
.blog-detail .content .help-points li,
.blog-detail .content .help-steps li {
    position: relative;
    margin-bottom: 12px;
    padding-left: 30px;
    font-size: 15px;
    line-height: 1.9;
    color: #26303f;
}
.blog-detail .content .help-points li::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2850a0;
}
.blog-detail .content .help-steps { counter-reset: hstep; }
.blog-detail .content .help-steps li {
    counter-increment: hstep;
    padding-left: 38px;
}
.blog-detail .content .help-steps li::before {
    content: counter(hstep);
    position: absolute;
    left: 0;
    top: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2850a0;
    color: #fff;
    font-size: 12px;
    line-height: 22px;
    text-align: center;
    font-weight: 600;
}
.blog-detail .content .help-points strong,
.blog-detail .content .help-steps strong { font-size: inherit; margin: 0; color: #181931; }

/* 常见问题块：对应 FAQPage 结构化数据 */
.blog-detail .content .help-faq {
    border: 1px solid #e8ecf3;
    border-radius: 6px;
    overflow: hidden;
    margin: 0 0 18px;
}
.blog-detail .content .help-qa {
    padding: 16px 18px;
    border-bottom: 1px solid #eef1f6;
}
.blog-detail .content .help-qa:last-child { border-bottom: 0; }
.blog-detail .content .help-qa h3 {
    position: relative;
    margin: 0 0 8px;
    padding-left: 26px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.7;
    color: #181931;
}
.blog-detail .content .help-qa h3::before {
    content: "Q";
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: #2850a0;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    font-weight: 700;
}
.blog-detail .content .help-qa p {
    margin: 0;
    font-size: 14px;
    line-height: 1.9;
    color: #4b5563;
}

.blog-detail .content .help-note {
    background: #fafbfd;
    border-radius: 4px;
    padding: 10px 14px;
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.8;
    color: #6b7280;
}

.blog-detail .content .help-related li {
    position: relative;
    margin-bottom: 8px;
    padding-left: 18px;
    font-size: 15px;
    line-height: 1.9;
}
.blog-detail .content .help-related li::before {
    content: "\203A";
    position: absolute;
    left: 3px;
    color: #2850a0;
    font-weight: 700;
}
.blog-detail .content .help-related a { color: #2850a0; }
.blog-detail .content .help-related a:hover { text-decoration: underline; }

@media (max-width: 600px) {
    .blog-detail .content > h2 { font-size: 17px; margin: 24px 0 12px; }
    .blog-detail .content .help-lead { padding: 12px 14px; font-size: 14px; }
    .blog-detail .content .help-params { font-size: 13px; }
    .blog-detail .content .help-params th,
    .blog-detail .content .help-params td { padding: 8px 9px; }
    .blog-detail .content .help-points li,
    .blog-detail .content .help-steps li { font-size: 14px; }
    .blog-detail .content .help-qa { padding: 13px 14px; }
}

/* ==========================================================================
   六、帮助与支持门户（/success/ 与 /success/mail/）
   --------------------------------------------------------------------------
   背景：
     · /success/ 原是「智能客服小云」页，正文用 <iframe src="/contact/"> 嵌了整站
       「联系我们」，/contact/ 自带一套 header，于是这一页出现两套导航 + 一大片地图，
       视觉全乱。现重写为帮助中心首页（6 大产品入口 + 常用自助 + 客服热线）。
     · /success/mail/ 原本 404（面包屑里的「云邮」因而不给链接），现补齐为
       云邮帮助中心总入口，列出 16 个问题分类。
   作用域严格限定在这两页特有的容器上，不影响站内其它页面。
   ========================================================================== */

/* ---- /success/ 产品帮助中心入口卡片 ---- */
.help-portal { margin-bottom: 44px; }
/* 注意：官网 `.section h2` 自带 text-align:center / width:80% / padding-bottom:48px，
   这三个必须显式覆盖，否则标题会跑到中间去。 */
.help-portal > h2 {
    margin: 0 0 20px;
    padding: 0 0 0 12px;
    width: auto;
    text-align: left;
    border-left: 4px solid #2850a0;
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.4;
}
.portal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.portal-grid-3 { grid-template-columns: repeat(3, 1fr); }
.portal-card {
    display: flex;
    flex-direction: column;
    padding: 22px 22px 18px;
    background: #fff;
    border: 1px solid #e5e9f2;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(31, 58, 118, .05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.portal-card:hover {
    transform: translateY(-3px);
    border-color: #b9cdf0;
    box-shadow: 0 8px 22px rgba(40, 80, 160, .13);
}
.portal-card .pc-name {
    margin-bottom: 8px;
    font-size: 19px;
    font-weight: 700;
    color: #2850a0;
}
.portal-card .pc-desc {
    flex: 1;
    font-size: 14px;
    line-height: 1.75;
    color: #5b6474;
}
.portal-card .pc-more {
    margin-top: 14px;
    font-size: 13px;
    color: #8b93a3;
}
.portal-card:hover .pc-more { color: #2850a0; }

/* 客服热线三栏：内容行数不一致，给个最小高度让三块齐平 */
.help-hotline { margin-top: 8px; }
.help-hotline .service-info { margin-bottom: 18px; min-height: 170px; }

@media (max-width: 900px) {
    .portal-grid,
    .portal-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .help-portal { margin-bottom: 30px; }
    .help-portal > h2 { font-size: 18px; margin-bottom: 14px; }
    .portal-grid,
    .portal-grid-3 { grid-template-columns: 1fr; gap: 12px; }
    .portal-card { padding: 16px; }
    .portal-card .pc-name { font-size: 17px; }
}

/* ---- /success/mail/ ：云邮帮助中心 16 个分类目录 ---- */
.service-list.service-hub { padding-bottom: 10px; }
.service-hub .hub-lead {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.85;
    color: #5b6474;
}
.cat-catalog {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 26px;
}
.cat-block {
    padding: 16px 18px 12px;
    background: #f6f8fd;
    border: 1px solid #e2e8f4;
    border-radius: 8px;
}
.cat-block h3 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 10px;
    padding-bottom: 8px;
    text-align: left;
    border-bottom: 1px dashed #dde3ef;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}
.cat-block h3 a { color: #2850a0; }
.cat-block h3 a:hover { text-decoration: underline; }
.cat-block h3 span {
    flex: none;
    margin-left: 10px;
    font-size: 12px;
    font-weight: 400;
    color: #98a0b0;
}
.cat-block ul { margin: 0; padding: 0; list-style: none; }
.cat-block ul li {
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.7;
}
.cat-block ul li a { color: #46505f; }
.cat-block ul li a:hover { color: #2850a0; text-decoration: underline; }
.cat-block .cat-more { font-size: 13px; }
.cat-block .cat-more a { color: #2850a0; }

@media (max-width: 900px) {
    .cat-catalog { grid-template-columns: 1fr; }
}

/* ==========================================================================
   七、联系我们（/contact/）
   ==========================================================================
   正文由 tools/patch-contact.py 写入 content.json，本页分三段：

     · .contact-self            本站主体联系方式卡
                                电话 / 地址来自后台「站点设置 → 联系方式」
                                （正文里写的是 {{CONTACT_*}} 占位符）。
                                没填的设置项由 {{#IF ...}} 整行隐藏，
                                不会留下「公司地址」后面空白这样的残行。
     · .news-list.contact-list  263 集团总部（北京总部 / 运营中心）
                                沿用官网原生样式，本文件不覆盖。
     · .contact-branch          分支机构，数据来自后台「分支机构」菜单（branches 表）
                                一条都没有时 PageController::hydrateBranches 会把整块
                                （含标题）摘掉，所以这里只管「有数据时怎么排」。
                                用独立的 CSS Grid，不依赖站点的 .row/.col-* 浮动栅格 ——
                                那套栅格靠 <br class="clear" /> 清浮动，条目数动态时更不该压上去。

   配色沿用本文件补充组件的主色 #2850a0（与授权页 / 常见问题中心一致）。
   -------------------------------------------------------------------------- */

/* ---- 本站主体联系方式卡 ---- */
.contact-self {
    margin: 6px 0 26px;
    padding: 24px 30px 18px;
    background: #f5f8fd;
    border-left: 4px solid #2850a0;
    border-radius: 4px;
}
.contact-self > h3 {
    margin: 0 0 10px;
    padding: 0 0 12px;
    border-bottom: 1px solid #dce6f5;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.45;
    text-align: left;
    color: #1f2937;
}
.contact-self .cs-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.contact-self .cs-list > li {
    display: flex;
    align-items: baseline;
    min-height: 0;
    padding: 7px 0;
    border: 0;
    font-size: 16px;
    line-height: 1.75;
    text-align: left;
    color: #4a5568;
}
.contact-self .cs-k {
    flex: 0 0 104px;
    color: #8a9099;
}
.contact-self .cs-v {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
    color: #1f2937;
}
.contact-self a.cs-v {
    text-decoration: none;
    color: #2850a0;
}
.contact-self a.cs-v:hover { text-decoration: underline; }

/* ---- 分支机构 ---- */
.contact-branch {
    margin: 6px 0 26px;
    padding: 24px 30px 8px;
    background: #ffffff;
    border: 1px solid #e3e6eb;
    border-radius: 4px;
}
.contact-branch > h3 {
    margin: 0 0 18px;
    padding: 0 0 12px;
    border-bottom: 1px solid #eceff3;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.45;
    text-align: left;
    color: #1f2937;
}
.branch-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 22px;
}
.branch-item {
    padding: 16px 18px 14px;
    background: #f7f9fc;
    border-left: 3px solid #c9d6ea;
    border-radius: 3px;
}
.branch-item > h4 {
    margin: 0 0 8px;
    padding: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
    color: #1e3f85;
}
.branch-item .desc {
    font-size: 14px;
    line-height: 1.85;
    text-align: left;
    overflow-wrap: anywhere;
    color: #4a5568;
}
.branch-item .desc a {
    text-decoration: none;
    color: #2850a0;
}
.branch-item .desc a:hover { text-decoration: underline; }

/* ---- 响应式：3 列 -> 2 列 -> 1 列 ---- */
@media (max-width: 900px) {
    .branch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .contact-self { padding: 20px 18px 14px; }
    /* 窄屏下标签与值改为上下排列 —— 横排时 104px 的标签列会把号码挤断行 */
    .contact-self .cs-list > li {
        flex-direction: column;
        align-items: flex-start;
        padding: 6px 0;
    }
    .contact-self .cs-k { flex: none; font-size: 13px; }
    .contact-branch { padding: 20px 18px 6px; }
    .branch-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* --------------------------------------------------------------------------
   十五、页脚顶部留白（全站）
   --------------------------------------------------------------------------
   官网 style-2021.css 里写死 `.footer{background:#1c1e39;padding-top:0}`，
   这是有前提的：官网每个页面的页脚上方都紧挨着同底色区块（首页 / 关于我们的
   .index-honour 背景同样为 #1c1e39），两块深色连成一片，本来就不需要留白。
   本站最后一块内容常常是白底的（faq / news / 授权查询 …），深色页脚直接「切」进
   白色区域 —— 页脚第一行「产品与服务 / 解决方案 …」距页脚上沿只有 2px，
   看上去就是「底部没有空开高度」。
   这里统一补顶部内边距：白底页面真的空开一段。
   ⚠️ 但页脚上方本来就是同色深底的页面【不是】零变化 —— 两块同色的内边距会叠加，
      见下面第十六节。 */
.section.footer { padding-top: 48px; }

/* 窄屏下页脚内容更多、行更密，留白收紧一点，免得把电话与二维码推得太远 */
@media (max-width: 768px) {
    .section.footer { padding-top: 30px; }
}

/* --------------------------------------------------------------------------
   十六、荣誉墙底部内边距（与第十五节配套，缺一不可）
   --------------------------------------------------------------------------
   克隆件里每个页面的结尾都是「荣誉墙」这一条深色带（.index-honour，背景
   #1c1e39 —— 与 .footer 完全同色），它自带 `padding:40px 0`，直接压在页脚上。

   第十五节给页脚补了 48px 上内边距之后，两块同色叠加：
       荣誉墙下内边距 40px + 页脚上内边距 48px = 88px 深色空白
   而全站白底页面只有 48px —— 深色页面看着空了一大截，比别处明显松。

   把荣誉墙的下内边距归零，深色页面回到 48px，与全站一致。
   上内边距保持 40px 不动：荣誉墙与它上方内容之间本来就是这个间距。

   ⚠️ 改在这里、而不是改 style-2021.css 里的那条 `.index-honour{padding:40px 0}`，
      有两个原因：
      ① seo-extra.css 在 style-2021.css 之后加载，同权重后者胜，覆盖得住；
      ② 四个产品页 /product/{mail,tele,video,live}/ 只加载 style-2021.css、
         不加载本文件，它们的页脚上内边距是官网原样的 0px。若直接改
         style-2021.css，那四页的空档会从 40px 掉到 0px —— 页脚死死贴住荣誉墙。
         放在本文件里，只有「页脚补过 48px」的页面才归零，天然成对。

   落库前已核：473 个页面含这条荣誉墙，且全部位于页脚正上方（其后没有别的
   section），所以本规则不存在「深色块贴住下一段内容」的风险。 */
.index-honour { padding: 40px 0 0 0; }