/* 新 morepage 版式 17 样式（10-15）：深紫 #2e1065 + 金 #d4a017 的「品牌门户」风格。
   类名一律 zj- 前缀，不复用 mp12 的类名；body 上带 .mp17（内页再加 .mp17-inner）。
   列表 / 文章 / 隐私 / 条款页 body 是 .mp17.mp17-old，还加载 bootstrap + module.css，正文沿用 module.css，
   所以页头、收尾、页脚的字号行高颜色都在 zj- 类上写全，不依赖 body 上的样式。
   页脚站点描述的 p 用 zj-foot-desc，样式用 .zj-foot-brand p 给。 */
.mp17 {
  --zj-violet: #2e1065;
  --zj-violet-2: #4c1d95;
  --zj-violet-deep: #1b0742;
  --zj-violet-soft: #f4f0fb;
  --zj-gold: #d4a017;
  --zj-gold-2: #e8c25a;
  --zj-gold-ink: #7a5a00;
  --zj-gold-soft: #fbf5e3;
  --zj-ivory: #fbf8f1;
  --zj-ink: #1f1633;
  --zj-text: #3a3149;
  --zj-muted: #6b6280;
  --zj-line: #e6e0ee;
  --zj-line-gold: #eadfc0;
}

/* 基础（只管首页和内页；旧版式页面 .mp17-old 不动 body） */
body.mp17:not(.mp17-old) { color: var(--zj-text); background: #fff; font-size: 16px; line-height: 1.85; }
body.mp17:not(.mp17-old) main h1,
body.mp17:not(.mp17-old) main h2,
body.mp17:not(.mp17-old) main h3 { color: var(--zj-ink); font-weight: 700; letter-spacing: .01em; }
.mp17 section[id] { scroll-margin-top: 12px; }

/* 页头：顶部条 */
.zj-head { position: relative; z-index: 1030; background: #fff; font-size: 16px; line-height: 1.6; }
.zj-topbar { background: var(--zj-violet-deep); color: rgba(255, 255, 255, .74); font-size: 13px; letter-spacing: .06em; padding: 7px 0; }
.zj-topbar .container { display: flex; align-items: center; flex-wrap: wrap; }
.zj-topbar-mark { display: inline-block; width: 18px; height: 2px; background: var(--zj-gold); margin-right: 10px; }
.zj-topbar .zj-sep { color: var(--zj-gold); margin: 0 9px; }

/* 页头：主导航（白底，金色下划线高亮） */
.zj-nav { background: #fff; padding: 10px 0; border-bottom: 1px solid var(--zj-line); }
.zj-nav .zj-brand { padding: 0; margin-right: 18px; }
.zj-nav .zj-brand img { display: block; max-height: 44px; width: auto; height: auto; }
.zj-nav .zj-menu .nav-link { position: relative; color: var(--zj-ink); font-size: 15px; font-weight: 600; padding: 10px 14px; }
.zj-nav .zj-menu .nav-link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--zj-gold); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.zj-nav .zj-menu .nav-link:hover,
.zj-nav .zj-menu .nav-link.active { color: var(--zj-violet); }
.zj-nav .zj-menu .nav-link:hover::after,
.zj-nav .zj-menu .nav-link.active::after { transform: scaleX(1); }
.zj-join { background: var(--zj-violet); color: #fff; font-size: 14px; font-weight: 700; border: 1px solid var(--zj-violet); border-radius: 6px; padding: 7px 18px; box-shadow: inset 0 -2px 0 var(--zj-gold); }
.zj-join:hover, .zj-join:focus { background: var(--zj-violet-2); color: #fff; border-color: var(--zj-violet-2); }
.zj-toggler { border: 1px solid var(--zj-line); border-radius: 6px; padding: 5px 9px; }
.zj-toggler:focus { box-shadow: 0 0 0 2px var(--zj-gold-2); }

/* 页头：首页锚点单独一排（象牙底，金色细下划线） */
.zj-anchors { background: var(--zj-ivory); border-bottom: 1px solid var(--zj-line-gold); }
.zj-anchors-row { display: flex; gap: 8px 26px; overflow-x: auto; white-space: nowrap; padding: 11px 0; scrollbar-width: thin; }
.zj-anchors a { flex: 0 0 auto; color: var(--zj-ink); font-size: 14px; text-decoration: underline; text-decoration-color: var(--zj-gold); text-decoration-thickness: 1px; text-underline-offset: 6px; }
.zj-anchors a:hover { color: var(--zj-violet-2); text-decoration-thickness: 2px; }

/* 按钮 */
.zj-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.zj-btn-gold { background: var(--zj-gold); color: var(--zj-violet-deep); font-weight: 700; border: 1px solid var(--zj-gold); border-radius: 4px; padding: 11px 30px; }
.zj-btn-gold:hover, .zj-btn-gold:focus { background: var(--zj-gold-2); border-color: var(--zj-gold-2); color: var(--zj-violet-deep); }
.zj-btn-ghost { background: transparent; color: #fff; font-weight: 700; border: 1px solid rgba(232, 194, 90, .7); border-radius: 4px; padding: 11px 28px; }
.zj-btn-ghost:hover, .zj-btn-ghost:focus { background: rgba(232, 194, 90, .12); color: var(--zj-gold-2); border-color: var(--zj-gold-2); }

/* 首屏：深紫底，左文右图（金色描边 + 错位阴影） */
.zj-hero { position: relative; overflow: hidden; background: var(--zj-violet); background-image: radial-gradient(circle at 85% 15%, rgba(212, 160, 23, .16), transparent 42%), linear-gradient(160deg, var(--zj-violet) 0%, var(--zj-violet-deep) 100%); color: #fff; padding: 72px 0 84px; }
.zj-eyebrow { display: flex; align-items: center; gap: 12px; color: var(--zj-gold-2); font-size: 14px; font-weight: 700; letter-spacing: .12em; margin-bottom: 16px; }
.zj-eyebrow::before { content: ""; flex: 0 0 34px; height: 2px; background: var(--zj-gold); }
.zj-hero h1 { color: #fff !important; font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.3; margin-bottom: 20px; }
.zj-intro { color: rgba(255, 255, 255, .84); margin-bottom: 12px; }
.zj-hero-frame { position: relative; margin: 0 18px 18px 0; border: 3px solid var(--zj-gold); box-shadow: 18px 18px 0 0 rgba(212, 160, 23, .32); background: var(--zj-violet-deep); }
.zj-hero-frame img { display: block; width: 100%; height: auto; aspect-ratio: 32 / 21; object-fit: cover; }

/* 话题 1：宽版图文左右 */
.zj-wide { padding: 72px 0; background: #fff; }
.zj-wide-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; border-radius: 2px; border-bottom: 4px solid var(--zj-gold); }
.zj-wide-copy h2 { font-size: clamp(1.45rem, 2.8vw, 2rem); line-height: 1.35; margin-bottom: 10px; }
.zj-wide-copy h3 { font-size: 1.05rem; color: var(--zj-gold-ink) !important; font-weight: 600 !important; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--zj-line-gold); }
.zj-wide-copy p { margin-bottom: 14px; }

/* 即时比分 + 未来赛程：并排两栏 */
.zj-boards { background: var(--zj-violet-soft); padding: 64px 0; border-top: 1px solid var(--zj-line); border-bottom: 1px solid var(--zj-line); }
.zj-board { height: 100%; background: #fff; border: 1px solid var(--zj-line); border-top: 4px solid var(--zj-violet); border-radius: 6px; padding: 22px 22px 10px; }
.zj-board-head { margin-bottom: 14px; }
.zj-board-head h2 { font-size: 1.3rem; margin-bottom: 4px; }
.zj-board-head p { color: var(--zj-muted); font-size: 14px; margin: 0; }
.zj-table-scroll { -webkit-overflow-scrolling: touch; }
.zj-table { margin: 0; font-size: 14px; }
.zj-table thead th { background: transparent; color: var(--zj-violet); font-size: 13px; font-weight: 700; letter-spacing: .04em; border-bottom: 2px solid var(--zj-gold); white-space: nowrap; padding: 10px 8px; }
.zj-table td { vertical-align: middle; border-color: var(--zj-line); padding: 11px 8px; color: var(--zj-text); }
.zj-table tbody tr:last-child td { border-bottom: 0; }
.zj-table tbody tr:hover td { background: var(--zj-gold-soft); }
.zj-nowrap { white-space: nowrap; }
.zj-vs { color: var(--zj-muted); font-size: 12px; margin: 0 3px; }
.zj-score { display: inline-block; min-width: 64px; text-align: center; font-weight: 700; color: #fff; background: var(--zj-violet); border-radius: 4px; padding: 1px 8px; white-space: nowrap; }
.zj-state { display: inline-block; font-size: 12px; font-weight: 600; color: var(--zj-gold-ink); border: 1px solid var(--zj-gold); border-radius: 3px; padding: 1px 8px; white-space: nowrap; }
.zj-table-gold thead th { background: var(--zj-gold); color: var(--zj-violet-deep); border-bottom: 0; }
.zj-table-gold tbody tr:nth-child(even) td { background: var(--zj-ivory); }
.zj-ver { font-weight: 700; color: var(--zj-violet); }

/* 标题行（资讯 / 内页最新资讯）：左标题，右「查看全部」 */
.zj-title-row { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 26px; padding-bottom: 14px; border-bottom: 1px solid var(--zj-line-gold); }
.zj-title-row h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin: 0 0 4px; }
.zj-title-row p { color: var(--zj-muted); margin: 0; }
.zj-more { color: var(--zj-violet) !important; font-weight: 700; font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--zj-gold); padding-bottom: 2px; }
.zj-more:hover { color: var(--zj-gold-ink) !important; }

/* 资讯：前 2 篇大卡（两列），其余小卡（三列，左图右文） */
.zj-news { padding: 72px 0; background: #fff; }
.zj-lead-card { height: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--zj-line); border-radius: 6px; overflow: hidden; }
.zj-lead-pic { display: block; position: relative; }
.zj-lead-pic::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--zj-gold); }
.zj-lead-pic img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.zj-lead-body { padding: 18px 22px 22px; }
.zj-lead-body time, .zj-mini-body time, .zj-tile time { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--zj-gold-ink); }
.zj-lead-body h3 { font-size: 1.2rem; line-height: 1.5; margin: 6px 0 8px; }
.zj-lead-body p { color: var(--zj-muted); font-size: 15px; margin: 0; }
.zj-mini-card { height: 100%; display: flex; gap: 14px; padding: 14px; background: var(--zj-ivory); border: 1px solid var(--zj-line-gold); border-radius: 6px; }
.zj-mini-pic { flex: 0 0 36%; max-width: 132px; }
.zj-mini-pic img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.zj-mini-body { min-width: 0; }
.zj-mini-body h3 { font-size: .98rem; line-height: 1.5; margin: 2px 0 6px; }
.zj-mini-body p { color: var(--zj-muted); font-size: 13px; line-height: 1.7; margin: 0; }
.zj-lead-body h3 a, .zj-mini-body h3 a, .zj-tile h3 a { color: inherit; text-decoration: none; }
.zj-lead-body h3 a:hover, .zj-mini-body h3 a:hover, .zj-tile h3 a:hover { color: var(--zj-violet-2); }

/* 话题 2~6：两栏定义式（左窄 h2 + h3，右宽正文和图） */
.zj-defs { background: var(--zj-ivory); border-top: 1px solid var(--zj-line-gold); }
.zj-def { padding: 56px 0; }
.zj-def + .zj-def { border-top: 1px solid var(--zj-line-gold); }
.zj-def-term { position: sticky; top: 16px; }
.zj-def-term h2 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); line-height: 1.4; margin-bottom: 12px; }
.zj-def-term h3 { position: relative; font-size: .98rem; line-height: 1.6; color: var(--zj-gold-ink) !important; font-weight: 600 !important; padding-top: 12px; margin: 0; }
.zj-def-term h3::before { content: ""; position: absolute; left: 0; top: 0; width: 40px; height: 2px; background: var(--zj-gold); }
.zj-def-body p { margin-bottom: 14px; }
.zj-def-img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; margin-top: 8px; border: 1px solid var(--zj-line-gold); border-radius: 4px; }

/* 三小标题块：深紫底，金色序号 */
.zj-feature { padding: 72px 0; background: var(--zj-violet); background-image: linear-gradient(160deg, var(--zj-violet-2) 0%, var(--zj-violet) 55%, var(--zj-violet-deep) 100%); color: rgba(255, 255, 255, .8); }
.zj-feature-head { max-width: 760px; margin-bottom: 34px; }
.zj-feature-head h2 { color: #fff !important; font-size: clamp(1.4rem, 2.6vw, 1.85rem); margin-bottom: 8px; }
.zj-feature-head p { margin: 0; color: rgba(255, 255, 255, .78); }
.zj-feature-list { counter-reset: zjf; }
.zj-feature-item { counter-increment: zjf; height: 100%; padding: 24px 22px; border: 1px solid rgba(232, 194, 90, .35); border-radius: 6px; background: rgba(255, 255, 255, .04); }
.zj-feature-item::before { content: counter(zjf, decimal-leading-zero); display: block; font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--zj-gold); margin-bottom: 14px; }
.zj-feature-item h3 { color: #fff !important; font-size: 1.08rem; margin-bottom: 10px; }
.zj-feature-item p { font-size: 15px; margin: 0; color: rgba(255, 255, 255, .8); }

/* 常见问题：两列卡片，问题答案直接显示（首页、内页共用） */
.zj-faq { padding: 72px 0; background: #fff; }
.zj-faq-head { margin-bottom: 26px; }
.zj-faq-head h2 { display: inline-block; font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin: 0; padding-bottom: 8px; border-bottom: 3px solid var(--zj-gold); }
.zj-faq-card { height: 100%; padding: 20px 22px; background: #fff; border: 1px solid var(--zj-line); border-left: 4px solid var(--zj-violet); border-radius: 4px; }
.zj-faq-card h3 { font-size: 1.02rem; line-height: 1.55; margin-bottom: 8px; }
.zj-faq-card p { color: var(--zj-text); font-size: 15px; margin: 0; }

/* 内页：深紫窄横幅 */
.zj-banner { background: var(--zj-violet); background-image: linear-gradient(120deg, var(--zj-violet-deep) 0%, var(--zj-violet) 60%, var(--zj-violet-2) 100%); color: #fff; padding: 30px 0 36px; border-bottom: 3px solid var(--zj-gold); }
.zj-crumb { font-size: 13px; margin-bottom: 8px; --bs-breadcrumb-divider-color: rgba(255, 255, 255, .5); --bs-breadcrumb-item-active-color: rgba(255, 255, 255, .72); }
.zj-crumb a { color: var(--zj-gold-2) !important; text-decoration: none; }
.zj-banner h1 { color: #fff !important; font-size: clamp(1.45rem, 3vw, 2.1rem); line-height: 1.35; margin: 0 0 12px; }
.zj-banner-lead { color: rgba(255, 255, 255, .84); max-width: 880px; margin-bottom: 8px; }
.zj-banner .zj-btns { margin-top: 18px; }

/* 内页：sections（金色左边框标题） */
.zj-part { padding: 56px 0; background: #fff; }
.zj-part-tint { background: var(--zj-ivory); }
.zj-part-head { margin-bottom: 22px; }
.zj-part-head h2 { font-size: clamp(1.3rem, 2.4vw, 1.65rem); margin-bottom: 6px; padding-left: 14px; border-left: 4px solid var(--zj-gold); line-height: 1.4; }
.zj-part-head p { color: var(--zj-muted); margin: 0; padding-left: 18px; }
.zj-prose { max-width: 880px; }
.zj-prose p { margin-bottom: 14px; }
.zj-item { height: 100%; padding: 20px 22px; background: #fff; border: 1px solid var(--zj-line); border-radius: 4px; box-shadow: 0 6px 18px rgba(46, 16, 101, .05); }
.zj-part-tint .zj-item { border-color: var(--zj-line-gold); }
.zj-item h3 { font-size: 1.04rem; margin-bottom: 8px; }
.zj-item p { font-size: 15px; margin: 0; }
.zj-tag { display: inline-block; font-size: 12px; font-weight: 700; color: var(--zj-violet-deep); background: var(--zj-gold-soft); border: 1px solid var(--zj-gold); border-radius: 3px; padding: 0 8px; margin-bottom: 8px; }
.zj-contact { max-width: 880px; margin: 18px 0 0; border-top: 1px solid var(--zj-line-gold); }
.zj-contact > div { display: flex; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--zj-line-gold); }
.zj-contact dt { flex: 0 0 86px; font-weight: 600; color: var(--zj-gold-ink); }
.zj-contact dd { margin: 0; min-width: 0; }

/* 内页：最新 4 篇资讯（四列小卡） */
.zj-tile { height: 100%; }
.zj-tile-pic { display: block; margin-bottom: 10px; }
.zj-tile-pic img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; border-radius: 4px; border-bottom: 3px solid var(--zj-gold); }
.zj-tile h3 { font-size: .96rem; line-height: 1.5; margin: 4px 0 0; }

/* 收尾：金色横条 */
.zj-cta { background: var(--zj-gold); background-image: linear-gradient(100deg, var(--zj-gold) 0%, var(--zj-gold-2) 100%); color: var(--zj-violet-deep); padding: 48px 0; font-size: 16px; line-height: 1.7; }
.zj-cta-box { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 40px; }
.zj-cta-text { flex: 1 1 420px; min-width: 0; }
.zj-cta h2 { color: var(--zj-violet-deep) !important; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; margin: 0 0 8px; }
.zj-cta p { color: rgba(27, 7, 66, .82); margin: 0; }
.zj-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.zj-btn-ink { background: var(--zj-violet); color: #fff; font-weight: 700; border: 1px solid var(--zj-violet); border-radius: 4px; padding: 11px 28px; }
.zj-btn-ink:hover, .zj-btn-ink:focus { background: var(--zj-violet-deep); color: #fff; border-color: var(--zj-violet-deep); }
.zj-btn-inkline { background: transparent; color: var(--zj-violet-deep); font-weight: 700; border: 1px solid var(--zj-violet-deep); border-radius: 4px; padding: 11px 26px; }
.zj-btn-inkline:hover, .zj-btn-inkline:focus { background: rgba(27, 7, 66, .08); color: var(--zj-violet-deep); border-color: var(--zj-violet-deep); }

/* 页脚：深紫，金色小标题 */
.zj-foot { background: var(--zj-violet-deep); color: rgba(255, 255, 255, .66); padding: 52px 0 22px; font-size: 14px; line-height: 1.8; }
.zj-foot h3 { color: var(--zj-gold-2); font-size: 14px; font-weight: 700; letter-spacing: .08em; margin-bottom: 14px; }
.zj-foot ul { list-style: none; padding: 0; margin: 0; }
.zj-foot li { margin-bottom: 8px; }
.zj-foot a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.zj-foot a:hover { color: var(--zj-gold-2); }
.zj-foot-logo { display: inline-block; background: #fff; border-radius: 6px; padding: 6px 12px; margin-bottom: 16px; }
.zj-foot-logo img { display: block; height: 38px; width: auto; }
.zj-foot-brand p { margin: 0; color: rgba(255, 255, 255, .66); line-height: 1.85; }
.zj-foot-contact li { overflow-wrap: anywhere; }
.zj-foot-rec { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 30px; padding-top: 16px; border-top: 1px solid rgba(232, 194, 90, .22); }
.zj-foot-rec span { color: var(--zj-gold-2); font-weight: 700; }
.zj-foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1); }

@media (max-width: 991.98px) {
  .zj-nav .zj-menu { padding: 8px 0 4px; }
  .zj-nav .zj-menu .nav-link { padding: 9px 2px; }
  .zj-nav .zj-menu .nav-link::after { left: 2px; right: auto; width: 28px; }
  .zj-def-term { position: static; }
  .zj-hero { padding: 52px 0 64px; }
}
@media (max-width: 767.98px) {
  .zj-topbar { font-size: 12px; }
  .zj-nav .zj-brand img { max-height: 36px; }
  .zj-join { padding: 6px 12px; font-size: 13px; }
  .zj-hero { padding: 40px 0 52px; }
  .zj-hero-frame { margin: 0 10px 10px 0; box-shadow: 10px 10px 0 0 rgba(212, 160, 23, .32); }
  .zj-wide, .zj-news, .zj-feature, .zj-faq { padding: 48px 0; }
  .zj-boards { padding: 44px 0; }
  .zj-board { padding: 18px 14px 6px; }
  .zj-def, .zj-part { padding: 42px 0; }
  .zj-mini-pic { flex-basis: 34%; }
  .zj-cta { padding: 40px 0; }
  .zj-btns .btn, .zj-cta-btns .btn { padding-left: 22px; padding-right: 22px; }
}