/* 开宁实况慢直播 · video-7 嵌入播放器样式（PC + 手机自适应） */

.knlive{--kn-band:#07203A;--kn-accent:#FF7F08;--kn-blue:#0075C2;--kn-line:rgba(255,255,255,.14);
 position:relative;box-sizing:border-box;font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;
 color:#12202E;background:transparent;line-height:1.6;text-align:left}
.knlive *,.knlive *:before,.knlive *:after{box-sizing:border-box}
.knlive img{max-width:100%;height:auto;border:0;display:block}
.knlive p,.knlive h3,.knlive h4,.knlive ul,.knlive li{margin:0;padding:0;list-style:none;font-weight:inherit}
.knlive h3{margin:0 0 10px;font-size:22px;font-weight:700;color:#0B3C63;line-height:1.35}
.knlive h4{margin:8px 0 6px;font-size:18px;font-weight:700;color:#fff;line-height:1.35}
.knlive .kn-hint{font-size:13px;color:#64798E;margin:0 0 14px}
.knlive .kn-band{background:var(--kn-band);border-radius:10px;padding:16px}
.knlive .kn-player{position:relative;width:100%;background:#04101C;border-radius:8px;overflow:hidden}
.knlive .kn-player:before{content:"";display:block;padding-top:var(--kn-pt,56.25%)}
.knlive .kn-video,.knlive .kn-frame,.knlive .kn-fallback{position:absolute;inset:0;width:100%;height:100%}
.knlive .kn-video{object-fit:contain;background:#04101C;display:block}
.knlive .kn-frame{border:0;background:#04101C}
.knlive .kn-fallback{display:none;background-size:cover;background-position:center}
.knlive .kn-fallback.on{display:block}
.knlive .kn-fallback span{position:absolute;left:0;right:0;bottom:0;background:rgba(4,16,28,.78);
 color:#fff;font-size:13px;padding:7px 12px;text-align:center}
.knlive .kn-live{position:absolute;left:12px;top:12px;z-index:3;background:rgba(214,32,32,.94);color:#fff;
 font-size:12px;padding:3px 10px;border-radius:20px;letter-spacing:.5px;display:flex;align-items:center;gap:6px}
.knlive .kn-live i{width:7px;height:7px;border-radius:50%;background:#fff;display:block;animation:knblink 1.4s infinite}
@keyframes knblink{0%,100%{opacity:1}50%{opacity:.25}}
.knlive .kn-nav{position:absolute;top:50%;margin-top:-22px;z-index:3;width:44px;height:44px;border:0;
 border-radius:50%;background:rgba(4,16,28,.55);color:#fff;font-size:24px;line-height:1;cursor:pointer;
 padding:0 0 3px;font-family:Arial,sans-serif;-webkit-appearance:none}
.knlive .kn-nav:hover{background:rgba(0,117,194,.9)}
.knlive .kn-nav.prev{left:12px}
.knlive .kn-nav.next{right:12px}
.knlive .kn-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 12px;color:#fff}
.knlive .kn-meta h4{flex:1 1 auto;min-width:160px}
.knlive .kn-pill{background:rgba(255,255,255,.13);border:1px solid var(--kn-line);border-radius:20px;
 padding:3px 11px;font-size:12px;color:#fff;white-space:nowrap}
.knlive .kn-pill.on1{background:#0E7A34;border-color:#0E7A34}
.knlive .kn-info{display:flex;flex-wrap:wrap;gap:6px 26px;font-size:13px;color:#B9CBDC;margin-bottom:12px}
.knlive .kn-info b{color:#fff;font-weight:600}
.knlive .kn-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 12px}
.knlive .kn-sw{position:relative;border:2px solid var(--kn-line);background:rgba(255,255,255,.05);
 border-radius:8px;padding:0;cursor:pointer;overflow:hidden;text-align:left;font:inherit;color:#fff;
 display:block;width:100%;-webkit-appearance:none}
.knlive .kn-sw:hover{border-color:rgba(255,255,255,.4)}
.knlive .kn-sw.on{border-color:var(--kn-accent);background:rgba(255,127,8,.14)}
.knlive .kn-sw img{width:100%;aspect-ratio:16/10;object-fit:cover;opacity:.82}
.knlive .kn-sw.on img{opacity:1}
.knlive .kn-sw .txt{display:block;padding:8px 10px;font-size:13px;line-height:1.4}
.knlive .kn-sw .txt b{display:block;font-size:14px;margin-bottom:2px}
.knlive .kn-sw .txt span{color:#9FB4C7;font-size:12px}
.knlive .kn-sw .now{position:absolute;left:0;top:0;background:var(--kn-accent);color:#3A1B00;
 font-size:11px;padding:2px 8px;border-bottom-right-radius:6px;font-weight:700;display:none}
.knlive .kn-sw.on .now{display:block}
.knlive .kn-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-top:12px;
 border-top:1px solid var(--kn-line)}
.knlive .kn-btn{display:inline-block;background:var(--kn-accent);color:#fff;border:0;border-radius:6px;
 padding:11px 24px;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer;font-family:inherit}
.knlive .kn-btn:hover{background:#E86F00;color:#fff}
.knlive .kn-btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.5);font-weight:400}
.knlive .kn-btn.ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.knlive .kn-note{font-size:12px;color:#8FA6BA;flex:1 1 200px}


.knlive{--kn-band:#07203A;--kn-accent:#FF7F08;--kn-blue:#0075C2;--kn-line:rgba(255,255,255,.14);
 position:relative;box-sizing:border-box;font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;
 color:#12202E;background:transparent;line-height:1.6;text-align:left}
.knlive *,.knlive *:before,.knlive *:after{box-sizing:border-box}
.knlive img{max-width:100%;height:auto;border:0;display:block}
.knlive p,.knlive h3,.knlive h4,.knlive ul,.knlive li{margin:0;padding:0;list-style:none;font-weight:inherit}
.knlive h3{margin:0 0 10px;font-size:22px;font-weight:700;color:#0B3C63;line-height:1.35}
.knlive h4{margin:8px 0 6px;font-size:18px;font-weight:700;color:#fff;line-height:1.35}
.knlive .kn-hint{font-size:13px;color:#64798E;margin:0 0 14px}
.knlive .kn-band{background:var(--kn-band);border-radius:10px;padding:16px}
.knlive .kn-player{position:relative;width:100%;background:#04101C;border-radius:8px;overflow:hidden}
.knlive .kn-player:before{content:"";display:block;padding-top:var(--kn-pt,56.25%)}
.knlive .kn-video,.knlive .kn-frame,.knlive .kn-fallback{position:absolute;inset:0;width:100%;height:100%}
.knlive .kn-video{object-fit:contain;background:#04101C;display:block}
.knlive .kn-frame{border:0;background:#04101C}
.knlive .kn-fallback{display:none;background-size:cover;background-position:center}
.knlive .kn-fallback.on{display:block}
.knlive .kn-fallback span{position:absolute;left:0;right:0;bottom:0;background:rgba(4,16,28,.78);
 color:#fff;font-size:13px;padding:7px 12px;text-align:center}
.knlive .kn-live{position:absolute;left:12px;top:12px;z-index:3;background:rgba(214,32,32,.94);color:#fff;
 font-size:12px;padding:3px 10px;border-radius:20px;letter-spacing:.5px;display:flex;align-items:center;gap:6px}
.knlive .kn-live i{width:7px;height:7px;border-radius:50%;background:#fff;display:block;animation:knblink 1.4s infinite}
@keyframes knblink{0%,100%{opacity:1}50%{opacity:.25}}
.knlive .kn-nav{position:absolute;top:50%;margin-top:-22px;z-index:3;width:44px;height:44px;border:0;
 border-radius:50%;background:rgba(4,16,28,.55);color:#fff;font-size:24px;line-height:1;cursor:pointer;
 padding:0 0 3px;font-family:Arial,sans-serif;-webkit-appearance:none}
.knlive .kn-nav:hover{background:rgba(0,117,194,.9)}
.knlive .kn-nav.prev{left:12px}
.knlive .kn-nav.next{right:12px}
.knlive .kn-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 12px;color:#fff}
.knlive .kn-meta h4{flex:1 1 auto;min-width:160px}
.knlive .kn-pill{background:rgba(255,255,255,.13);border:1px solid var(--kn-line);border-radius:20px;
 padding:3px 11px;font-size:12px;color:#fff;white-space:nowrap}
.knlive .kn-pill.on1{background:#0E7A34;border-color:#0E7A34}
.knlive .kn-info{display:flex;flex-wrap:wrap;gap:6px 26px;font-size:13px;color:#B9CBDC;margin-bottom:12px}
.knlive .kn-info b{color:#fff;font-weight:600}
.knlive .kn-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 12px}
.knlive .kn-sw{position:relative;border:2px solid var(--kn-line);background:rgba(255,255,255,.05);
 border-radius:8px;padding:0;cursor:pointer;overflow:hidden;text-align:left;font:inherit;color:#fff;
 display:block;width:100%;-webkit-appearance:none}
.knlive .kn-sw:hover{border-color:rgba(255,255,255,.4)}
.knlive .kn-sw.on{border-color:var(--kn-accent);background:rgba(255,127,8,.14)}
.knlive .kn-sw img{width:100%;aspect-ratio:16/10;object-fit:cover;opacity:.82}
.knlive .kn-sw.on img{opacity:1}
.knlive .kn-sw .txt{display:block;padding:8px 10px;font-size:13px;line-height:1.4}
.knlive .kn-sw .txt b{display:block;font-size:14px;margin-bottom:2px}
.knlive .kn-sw .txt span{color:#9FB4C7;font-size:12px}
.knlive .kn-sw .now{position:absolute;left:0;top:0;background:var(--kn-accent);color:#3A1B00;
 font-size:11px;padding:2px 8px;border-bottom-right-radius:6px;font-weight:700;display:none}
.knlive .kn-sw.on .now{display:block}
.knlive .kn-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-top:12px;
 border-top:1px solid var(--kn-line)}
.knlive .kn-btn{display:inline-block;background:var(--kn-accent);color:#fff;border:0;border-radius:6px;
 padding:11px 24px;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer;font-family:inherit}
.knlive .kn-btn:hover{background:#E86F00;color:#fff}
.knlive .kn-btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.5);font-weight:400}
.knlive .kn-btn.ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.knlive .kn-note{font-size:12px;color:#8FA6BA;flex:1 1 200px}

.knlive-m .kn-band{padding:12px;border-radius:8px}
/* 手机端：播放器画面也去掉四周内边距与圆角（与 PC 一致，画面顶到内容框边缘）；
   其余内容行补回 12px 左右内边距保持对齐 */
.knlive-m .kn-player{border-radius:0}
.knlive-m .kn-band{padding-top:0;padding-left:0;padding-right:0}
.knlive-m .kn-band>.kn-weather,
.knlive-m .kn-band>.kn-meta,
.knlive-m .kn-band>.kn-info,
.knlive-m .kn-band>.kn-switch,
.knlive-m .kn-band>.kn-cta{padding-left:12px;padding-right:12px}
.knlive-m h3{font-size:18px;margin-bottom:8px}
.knlive-m .kn-hint{font-size:13px;line-height:1.6}
.knlive-m .kn-meta h4{font-size:16px;min-width:0;flex:1 1 100%}
.knlive-m .kn-info{flex-direction:column;gap:5px;font-size:13px}
.knlive-m .kn-switch{grid-template-columns:1fr;gap:10px}
.knlive-m .kn-sw{display:flex;align-items:center}
.knlive-m .kn-sw img{width:118px;flex:0 0 118px;aspect-ratio:16/10}
.knlive-m .kn-sw .txt{padding:9px 11px;flex:1 1 auto}
.knlive-m .kn-sw .now{font-size:10px}
.knlive-m .kn-nav{width:38px;height:38px;font-size:21px;margin-top:-19px}
.knlive-m .kn-nav.prev{left:6px}
.knlive-m .kn-nav.next{right:6px}
.knlive-m .kn-live{left:8px;top:8px;font-size:11px;padding:2px 8px}
.knlive-m .kn-btn{display:block;width:100%;text-align:center;padding:13px;font-size:16px}
.knlive-m .kn-cta{gap:8px}
.knlive-m .kn-note{text-align:center;flex:1 1 100%}

/* ===== video-7 页专属：仅当播放器存在时命中，其他视频分类零影响 ===== */
/* PC：慢直播分类无文章，隐藏“暂无相关内容”及其空列表容器 */
.knlive ~ .page-video-list .nocontent{display:none}
.knlive ~ .page-video-list:has(.nocontent){display:none}
/* 手机：隐藏原 5 个视频列表（含分页），仅隐藏不删除 */
.knlive-m ~ .page-images-list{display:none}

/* ===== PC 宽屏：播放器突破官网模板 880px 正文列宽（v3.5） =====
   官网 #page 列宽固定 880px，4K 画面被压到 848px 显示（缩 4.5 倍，远景细节损失大）；
   参考页 KnH5player 显示 1166px（缩 3.3 倍）明显更清晰。
   方案：宽屏下 .knlive 只向右扩展（左侧与正文列严格对齐，绝不压分类菜单）：
   扩展量 = (视口 - 1120版心)/2 - 46px 安全边距，封顶 130px（即最宽 1010px）。
   1220px 以下不生效；手机端与原版完全一致。 */
@media (min-width:1220px){
  .knlive{width:calc(880px + clamp(0px, (100vw - 1212px)/2, 130px))}
}

/* ===== PC：去掉播放器画面四周的边框/圆角/内边距（v3.5）=====
   深蓝内容框 .kn-band 保留（里面是标题/机位卡/按钮，需要深底衬托白字）；
   仅让播放器画面顶到内容框边缘：去掉自身圆角、去掉上方 16px 内边距，
   画面与内容框左右下三边齐平，视觉上不再有「框住视频」的感觉。 */
@media (min-width:768px){
  .knlive .kn-player{border-radius:0}
  .knlive .kn-band{padding-top:0;padding-left:0;padding-right:0}
  .knlive .kn-band>.kn-meta,
  .knlive .kn-band>.kn-info,
  .knlive .kn-band>.kn-switch,
  .knlive .kn-band>.kn-cta{padding-left:16px;padding-right:16px}
}

/* ===== 播放器右上角天气浮层（v3.7）=====
   惠州实时天气，半透明磨砂底，只占右上角小区域，不遮挡画面主体 */
.knlive .kn-weather{position:absolute;right:10px;top:10px;z-index:4;
 min-width:150px;max-width:210px;padding:8px 11px;border-radius:9px;
 background:rgba(4,16,28,.62);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
 border:1px solid rgba(255,255,255,.16);color:#fff;text-align:left;
 font:12px/1.45 "Microsoft YaHei","PingFang SC",Arial,sans-serif;
 pointer-events:none;box-shadow:0 2px 12px rgba(0,0,0,.28)}
.knlive .knw-pane{display:none;animation:knwFade .45s ease}
.knlive .knw-pane.on{display:block}
@keyframes knwFade{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.knlive .knw-title{display:block;font-size:11px;color:#8FD0FF;letter-spacing:.4px;margin-bottom:2px}
.knlive .knw-main{display:block;font-size:22px;font-weight:700;line-height:1.15;color:#fff}
.knlive .knw-main em{font-style:normal}
.knlive .knw-main i{font-style:normal;font-size:12px;font-weight:400;color:#B9CBDC;margin-left:1px}
.knlive .knw-desc{display:block;font-size:12px;color:#DDE9F5;margin-top:1px}
.knlive .knw-sub{display:block;font-size:10.5px;color:#94A9BE;margin-top:3px;line-height:1.35}

/* 手机：天气条改为播放器下方整行横条（播放器上不压画面） */
.knlive-m .kn-weather{position:static;max-width:none;min-width:0;margin:8px 0 0;
 border-radius:7px;padding:7px 11px;display:flex;align-items:baseline;gap:8px;
 background:rgba(255,255,255,.07);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.knlive-m .kn-weather .knw-pane.on{display:flex;align-items:baseline;gap:7px;flex:1 1 auto;min-width:0}
.knlive-m .knw-title{font-size:11px;margin:0;flex:0 0 auto}
.knlive-m .knw-main{font-size:17px;flex:0 0 auto}
.knlive-m .knw-desc{font-size:12px;margin:0;flex:0 0 auto}
.knlive-m .knw-sub{display:none}