:root{
  --navy:#0B2545; --navy2:#13315C; --navy3:#1D4E89;
  --amber:#F2A33C; --amber-d:#C97F1B;
  --green:#2E9E5B; --red:#D64545;
  --ink:#1F2933; --ink2:#3E4C59; --muted:#7B8794;
  --line:#E3E8EF; --bg:#FFFFFF; --soft:#F5F7FA; --soft2:#EDF1F6;
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color:var(--ink);background:var(--soft);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.page-wrap{position:relative;background:var(--soft);min-height:100vh}

.topbar{background:var(--navy);color:#C9D6E4;font-size:12.5px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:38px;flex-wrap:wrap}
.topbar b{color:#fff;font-weight:600}
.langbtn{display:flex;gap:3px}
.langbtn button{background:transparent;border:1px solid rgba(255,255,255,.28);color:#C9D6E4;
  font-size:11.5px;padding:2px 8px;border-radius:5px;cursor:pointer;font-weight:700;font-family:inherit}
.langbtn button.on{background:var(--amber);border-color:var(--amber);color:#3A2600}
.litemode{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:12px;color:#C9D6E4}

/* 移动端语言切换条：桌面隐藏，手机端吸顶显示 */
.langbar{display:none}

header.hd{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 3px rgba(16,32,56,.06)}
.hd .wrap{display:flex;align-items:center;gap:20px;height:66px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;color:var(--navy);white-space:nowrap;cursor:pointer}
.logo .mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--navy3),var(--navy));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:800}
.logo small{display:block;font-size:9.5px;font-weight:700;color:var(--muted);letter-spacing:1.1px;line-height:1.1}
nav.main{display:flex;gap:19px;font-size:13.5px;font-weight:700;color:var(--ink2);flex:1;flex-wrap:wrap}
nav.main span{cursor:pointer;padding:4px 0;border-bottom:2px solid transparent;white-space:nowrap}
nav.main span:hover,nav.main span.on{color:var(--navy);border-color:var(--amber)}
.hd-act{display:flex;gap:9px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:none;border-radius:8px;
  padding:10px 16px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}
.btn-a{background:var(--amber);color:#3A2600}
.btn-a:hover{background:var(--amber-d)}
.btn-n{background:var(--navy);color:#fff}
.btn-n:hover{background:var(--navy2)}
.btn-o{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.btn-o:hover{border-color:var(--navy3);color:var(--navy3)}
/* 联系方式四色（2026-09-29 定）：邮件=深蓝 / 微信=微信绿 / WhatsApp=WhatsApp 绿 / 报价=琥珀。
   ★ 别把邮件按钮写回 btn-g —— 这几个通道的颜色就是给买家当路标用的：
     一条通道一个颜色，扫一眼就知道有几种联系办法。两个绿色相近但分别对应两款聊天软件，
     各自是它们的品牌色，同时出现时靠按钮文字区分。 */
.btn-g{background:#07C160;color:#06331A}
.btn-wa{background:#25D366;color:#06331A}
.btn-sm{padding:7px 12px;font-size:12.5px;border-radius:7px}
.cart-pill{background:var(--amber);color:#3A2600;border-radius:999px;font-size:11px;padding:1px 7px;font-weight:800}

.toast-wrap{position:sticky;top:66px;z-index:35;height:0;overflow:visible}
.toast{max-width:620px;margin:10px auto 0;background:var(--navy);color:#fff;padding:10px 16px;border-radius:9px;
  font-size:13.5px;box-shadow:0 8px 22px rgba(11,37,69,.28);opacity:0;transform:translateY(-8px);
  transition:.22s;pointer-events:none;text-align:center}
.toast.show{opacity:1;transform:translateY(0)}

section{padding:56px 0}
.sec-h{text-align:center;max-width:780px;margin:0 auto 34px}
.sec-h h2{font-size:27px;margin:0 0 10px;color:var(--navy);letter-spacing:-.3px}
.sec-h p{margin:0;color:var(--ink2);font-size:15px}
.sec-h .kick{display:inline-block;background:var(--soft2);color:var(--navy3);font-size:11.5px;font-weight:800;
  letter-spacing:1.3px;padding:4px 11px;border-radius:999px;margin-bottom:12px}
.bg-white{background:#fff}

.hero{background:linear-gradient(140deg,#0B2545 0%,#13315C 55%,#1D4E89 100%);color:#fff;padding:0}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;padding-top:60px;padding-bottom:54px;align-items:center}
.hero .kick{display:inline-block;border:1px solid rgba(242,163,60,.55);color:var(--amber);font-size:11.5px;
  font-weight:800;letter-spacing:1.4px;padding:5px 12px;border-radius:999px;margin-bottom:18px}
.hero h1{font-size:38px;line-height:1.18;margin:0 0 16px;letter-spacing:-.8px}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero p.lead{font-size:15.5px;color:#C9D6E4;margin:0 0 26px;max-width:580px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.hero-trust{display:flex;gap:26px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.16);padding-top:20px}
.hero-trust div{min-width:96px}
.hero-trust b{display:block;font-size:25px;color:var(--amber);letter-spacing:-.5px}
.hero-trust span{font-size:12.5px;color:#9FB3C8}
.hero-media{position:relative}
.hero-media .card{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06)}
.hero-media .meta{display:flex;justify-content:space-between;gap:10px;padding:12px 14px;font-size:12.5px;color:#C9D6E4;background:rgba(0,0,0,.2)}
.hero-media .meta b{color:#fff}
.hero-chip{position:absolute;background:#fff;color:var(--navy);border-radius:10px;padding:9px 13px;font-size:12.5px;
  font-weight:700;box-shadow:0 8px 20px rgba(0,0,0,.22)}
.hero-chip small{display:block;font-weight:600;color:var(--muted);font-size:10.5px}
.hero-chip.c1{left:-14px;bottom:74px}
.hero-chip.c2{right:-10px;top:52px}

.ph{position:relative;background:linear-gradient(135deg,#DDE5EE,#C3D0DF);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ph.v2{background:linear-gradient(135deg,#E4E9F0,#CBD6E3)}
.ph.v3{background:linear-gradient(135deg,#D9E2EC,#BCCBDC)}
.ph .glyph{opacity:.55}
.ph .tag{position:absolute;left:9px;bottom:9px;background:rgba(11,37,69,.78);color:#fff;font-size:10.5px;
  font-weight:700;padding:3px 8px;border-radius:5px}
.ph .cnt{position:absolute;right:9px;bottom:9px;background:rgba(255,255,255,.92);color:var(--navy);font-size:10.5px;
  font-weight:700;padding:3px 8px;border-radius:5px}

.searchbox{background:#fff;border-radius:14px;box-shadow:0 12px 34px rgba(11,37,69,.13);padding:16px;margin-top:-38px;position:relative;z-index:5}
.searchbox .row{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:12px;align-items:end}
.fld label{display:block;font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.5px;margin-bottom:5px;text-transform:uppercase}
.fld select,.fld input{width:100%;padding:9px 11px;border:1.5px solid var(--line);border-radius:8px;
  font-family:inherit;font-size:14px;color:var(--ink);background:#fff}
.fld select:focus,.fld input:focus{outline:none;border-color:var(--navy3)}
.searchbox .hint{margin-top:10px;font-size:12.5px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill-sug{background:var(--soft2);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;color:var(--navy3);cursor:pointer}

.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:17px;cursor:pointer;transition:.16s}
.mcard:hover{border-color:var(--navy3);box-shadow:0 8px 22px rgba(11,37,69,.09)}
.mcard .top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.flag{width:34px;height:24px;border-radius:4px;flex:none;border:1px solid rgba(0,0,0,.1);display:inline-block}
.mcard .top b{font-size:15.5px;color:var(--navy);display:block;line-height:1.2}
.mcard .top span.alias{font-size:11px;color:var(--muted);display:block;line-height:1.2}
.mcard dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:5px 10px;font-size:12.5px}
.mcard dt{color:var(--muted);white-space:nowrap}
.mcard dd{margin:0;color:var(--ink);font-weight:600}
.mcard .foot{margin-top:12px;padding-top:11px;border-top:1px dashed var(--line);font-size:12px;color:var(--navy3);font-weight:700}
.badge{display:inline-block;font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:5px;letter-spacing:.3px;vertical-align:middle}
.b-ok{background:#E3F5EA;color:#1F7A46}
.b-warn{background:#FDF0DC;color:#9A6312}
.b-stop{background:#FBE6E6;color:#A82B2B}

.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.vgrid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.vcard{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:.16s}
.vcard:hover{box-shadow:0 10px 26px rgba(11,37,69,.1);border-color:#CBD6E3}
.vcard .bd{padding:12px 13px 13px;display:flex;flex-direction:column;flex:1}
.vcard .ttl{font-size:13.8px;font-weight:700;color:var(--navy);line-height:1.35;margin-bottom:7px;min-height:38px}
.vcard .spec{font-size:11.8px;color:var(--muted);display:flex;gap:7px;flex-wrap:wrap;margin-bottom:8px}
.vcard .spec i{font-style:normal;background:var(--soft);border-radius:4px;padding:2px 6px}
.vcard .mkt{font-size:11px;color:#1F7A46;font-weight:700;margin-bottom:9px;min-height:16px}
.vcard .price{font-size:17px;font-weight:800;color:var(--navy);letter-spacing:-.3px;margin-bottom:11px}
.vcard .price small{font-size:11px;font-weight:600;color:var(--muted);display:block;letter-spacing:0}
.vcard .row{display:flex;gap:7px;margin-top:auto}
.vcard .row .btn{flex:1}
.soldout{position:absolute;top:9px;left:9px;background:var(--red);color:#fff;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:5px}
.instock{position:absolute;top:9px;left:9px;background:var(--green);color:#fff;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:5px}

.why{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.wcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px}
.wcard .ic{width:40px;height:40px;border-radius:10px;background:var(--soft2);display:flex;align-items:center;
  justify-content:center;margin-bottom:13px;font-size:17px;color:#1D4E89}
.wcard h3{margin:0 0 7px;font-size:15.5px;color:var(--navy)}
.wcard p{margin:0;font-size:13.3px;color:var(--ink2)}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.step{padding:0 22px;border-left:2px solid var(--line)}
.step:first-child{border-left:none;padding-left:0}
.step .n{width:30px;height:30px;border-radius:8px;background:var(--navy);color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:14px;margin-bottom:12px}
.step h4{margin:0 0 6px;font-size:14.5px;color:var(--navy)}
.step p{margin:0;font-size:12.8px;color:var(--ink2)}

.brands{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.brand{background:#fff;border:1px solid var(--line);border-radius:9px;height:58px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-weight:800;color:var(--navy2);font-size:12.5px;cursor:pointer}
.brand span{font-size:9.5px;color:var(--muted);font-weight:600;letter-spacing:.4px}
.brand:hover{border-color:var(--navy3);background:var(--soft)}

.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bcard{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer}
.bcard .bd{padding:14px 15px 16px}
.bcard .cat{font-size:11px;font-weight:800;color:var(--amber-d);letter-spacing:.8px}
.bcard h3{margin:7px 0;font-size:15px;color:var(--navy);line-height:1.4}
.bcard p{margin:0;font-size:12.8px;color:var(--ink2)}

footer{background:var(--navy);color:#9FB3C8;padding:44px 0 20px;font-size:13px}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:30px;margin-bottom:30px}
footer h4{color:#fff;font-size:13.5px;margin:0 0 13px;letter-spacing:.4px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
footer li{cursor:pointer}
footer li:hover{color:#fff}
footer .bot{border-top:1px solid rgba(255,255,255,.13);padding-top:16px;display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-size:12px}
.disclaim{background:rgba(255,255,255,.05);border-radius:9px;padding:12px 15px;font-size:11.8px;line-height:1.6;
  margin-bottom:26px;color:#8FA5BB}

.crumb{font-size:12.5px;color:var(--muted);padding:16px 0 0}
.crumb span{cursor:pointer;color:var(--navy3);font-weight:700}
.phead{background:#fff;border-bottom:1px solid var(--line);padding-bottom:22px}
.phead h1{font-size:28px;margin:10px 0 8px;color:var(--navy);letter-spacing:-.4px}
.phead p{margin:0;color:var(--ink2);max-width:760px}

.stock-lay{display:grid;grid-template-columns:250px 1fr;gap:24px;align-items:start;padding:26px 0 56px}
.filters{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;position:sticky;top:82px}
.filters h4{margin:0 0 14px;font-size:14px;color:var(--navy);display:flex;justify-content:space-between;align-items:center;gap:8px}
.fgroup{border-top:1px solid var(--line);padding:13px 0}
.fgroup:first-of-type{border-top:none;padding-top:0}
.fgroup>b{display:block;font-size:12px;color:var(--muted);font-weight:800;letter-spacing:.6px;text-transform:uppercase;margin-bottom:9px}
.fopt{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink2);padding:3px 0;cursor:pointer}
.fopt input{accent-color:var(--navy3)}
.fopt em{margin-left:auto;font-style:normal;color:var(--muted);font-size:11.5px}
.selectbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.selectbar .res{font-size:14px;color:var(--ink2)}
.selectbar .res b{color:var(--navy);font-size:16px}
.notice{background:#FDF0DC;border:1px solid #F0D9AE;border-left:4px solid var(--amber);border-radius:9px;
  padding:12px 15px;font-size:13px;color:#7A5110;margin-bottom:18px}
.notice b{color:#5C3D08}
.clearbtn{font-size:11.5px;color:#1D4E89;cursor:pointer;font-weight:700}

.cartbar{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;border-radius:12px;padding:14px 18px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.cartbar b{font-size:15px}
.cartbar .it{font-size:12.5px;color:#C9D6E4;margin-top:3px}
/* ⚠️ 必须有这条：.cartbar 自己带 display:flex（特异性 0,1,0），
   浏览器默认的 [hidden]{display:none} 在 UA 样式表里，作者样式一律优先 →
   只写 hidden 属性根本藏不住，简报条会在没选国家时也显示出来。
   加一条 0,2,0 的规则把它按回去。别删。 */
.cartbar[hidden]{display:none}
.cartlist{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:18px}
.cartlist .r{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:13px;padding:9px 0;border-bottom:1px dashed var(--line)}
.cartlist .r:last-child{border-bottom:none}
.cartlist .r .x{color:var(--red);cursor:pointer;font-weight:800;font-size:12px}

.vd-lay{display:grid;grid-template-columns:1.55fr 1fr;gap:26px;align-items:start;padding:24px 0 56px}
.gallery{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff}
.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:10px}
.thumbs .t{height:56px;border-radius:7px;overflow:hidden;border:2px solid transparent;cursor:pointer}
.thumbs .t.on{border-color:var(--amber)}
.inq-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;position:sticky;top:82px}
.inq-card .price{font-size:30px;font-weight:800;color:var(--navy);letter-spacing:-.8px;line-height:1.1}
.inq-card .price small{font-size:12px;color:var(--muted);font-weight:600;display:block;letter-spacing:0;margin-top:4px}
.inq-card .kv{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:7px 0;
  border-bottom:1px dashed var(--line);color:var(--ink2)}
.inq-card .kv b{color:var(--ink)}
.inq-card .btns{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.inq-card .note{font-size:11.8px;color:var(--muted);margin-top:13px;text-align:center;line-height:1.5}
.blk{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;margin-top:20px}
.blk h3{margin:0 0 14px;font-size:16px;color:var(--navy);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.blk h3 .tagx{font-size:11px;font-weight:700;background:var(--soft2);color:var(--navy3);padding:3px 8px;border-radius:5px}
.spec-tbl{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.spec-tbl .r{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:7px 0;border-bottom:1px dashed var(--line)}
.spec-tbl .r span{color:var(--muted)}
.spec-tbl .r b{color:var(--ink);font-weight:600}
.chklist{display:grid;grid-template-columns:1fr 1fr;gap:8px 22px}
.chklist .it{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink2)}
.chklist .it i{width:18px;height:18px;border-radius:5px;background:#E3F5EA;color:#1F7A46;display:flex;
  align-items:center;justify-content:center;font-style:normal;font-size:11px;font-weight:800;flex:none}
.chklist .it.w i{background:#FDF0DC;color:#9A6312}
.doclist{display:flex;flex-wrap:wrap;gap:8px}
.docitem{background:var(--soft);border:1px solid var(--line);border-radius:7px;padding:7px 12px;font-size:12.5px;
  font-weight:600;color:var(--ink2);display:flex;align-items:center;gap:7px}
.docitem i{color:var(--green);font-style:normal;font-weight:800}
.mktrow{display:flex;align-items:center;gap:10px;font-size:13px;padding:9px 0;border-bottom:1px dashed var(--line);flex-wrap:wrap}
.mktrow .nm{font-weight:700;color:var(--navy);min-width:130px}
.mktrow .rs{margin-left:auto;font-weight:800;font-size:12.5px}

.qform{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px}
.qsteps{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.qsteps div{flex:1;min-width:150px;background:var(--soft);border-radius:9px;padding:11px 13px;font-size:12.5px;
  color:var(--muted);font-weight:700;border:1.5px solid transparent}
.qsteps div.on{background:#fff;border-color:var(--amber);color:var(--navy)}
.qsteps div b{display:block;font-size:11px;color:var(--amber-d);letter-spacing:.8px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.frow.one{grid-template-columns:1fr}
.frow.three{grid-template-columns:repeat(3,1fr)}
textarea{width:100%;padding:11px;border:1.5px solid var(--line);border-radius:8px;font-family:inherit;
  font-size:14px;resize:vertical;min-height:88px}
textarea:focus{outline:none;border-color:var(--navy3)}
.trustrow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.trustrow .t{background:var(--soft);border-radius:10px;padding:14px;text-align:center}
.trustrow .t b{display:block;font-size:19px;color:var(--navy);letter-spacing:-.3px}
.trustrow .t span{font-size:11.8px;color:var(--muted)}
/* 联系卡张数是「会变的」：WhatsApp 填了号就多一张（3 张 ↔ 4 张）。
   所以用 auto-fit 而不是写死 repeat(3,1fr)——3 张时每张仍占满 1/3（空轨道会自动收掉），
   4 张时自动变 4 列，不用改 CSS 也不用改模板。 */
.chan{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.chan .c{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px}
.chan .c h4{margin:0 0 6px;font-size:14.5px;color:var(--navy)}
.chan .c p{margin:0 0 12px;font-size:12.8px;color:var(--ink2)}
.chan .c .v{font-size:15px;font-weight:800;color:var(--navy);margin-bottom:12px}
.contactgrid{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:start}
.addr{background:var(--soft);border-radius:10px;padding:16px;font-size:13.3px;color:var(--ink2)}
.addr b{color:var(--navy);display:block;margin-bottom:6px}
.tl{border-left:2px solid var(--line);padding-left:18px;margin-top:8px}
.tl .li{position:relative;padding-bottom:16px}
.tl .li:last-child{padding-bottom:0}
.tl .li:before{content:"";position:absolute;left:-25px;top:5px;width:11px;height:11px;border-radius:50%;
  background:#fff;border:2.5px solid var(--amber)}
.tl .li b{display:block;font-size:13.5px;color:var(--navy)}
.tl .li span{font-size:12.5px;color:var(--ink2)}

.sticky-bar{position:sticky;bottom:0;z-index:38;background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -4px 18px rgba(11,37,69,.1);padding:10px 0}
.sticky-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.sticky-bar .lft{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink2);flex-wrap:wrap}
.sticky-bar .lft b{color:var(--navy)}
.sticky-bar .rgt{display:flex;gap:9px;flex-wrap:wrap}

body.lite .ph{background:#E8ECF1 !important}
/* 精简模式只隐装饰（占位底纹的图形），**不再整张隐掉首屏卡** —— 那张卡现在挂着
   「最新在库」的车名和进详情的入口，整张隐掉等于把新车藏了。照片的隐法见 site_ext.css。 */
body.lite .ph .glyph{display:none}
body.lite section{padding:34px 0}
body.lite .hero .wrap{padding-top:34px;padding-bottom:30px}
body.lite .hero-chip{display:none}
body.lite .searchbox{box-shadow:none;border:1px solid var(--line)}

@media (max-width:1000px){
  .hero .wrap{grid-template-columns:1fr;gap:26px}
  .vgrid,.bgrid,.why,.mgrid,.chan{grid-template-columns:repeat(2,1fr)}
  .brands{grid-template-columns:repeat(4,1fr)}
  .searchbox .row{grid-template-columns:1fr 1fr}
  .stock-lay{grid-template-columns:1fr}
  .filters{position:static}
  .vd-lay{grid-template-columns:1fr}
  .inq-card{position:static}
  .steps{grid-template-columns:1fr 1fr;gap:20px}
  .step{border-left:none;padding:0}
  footer .cols{grid-template-columns:1fr 1fr}
  .vgrid-3{grid-template-columns:repeat(2,1fr)}
  .contactgrid{grid-template-columns:1fr}
  nav.main{display:none}
}
@media (max-width:640px){
  .hero h1{font-size:27px}
  .vgrid,.bgrid,.why,.mgrid,.chan,.vgrid-3,.frow,.frow.three,.spec-tbl,.chklist,.trustrow{grid-template-columns:1fr}
  .brands{grid-template-columns:repeat(3,1fr)}
  .searchbox .row{grid-template-columns:1fr}
  .thumbs{grid-template-columns:repeat(3,1fr)}
  footer .cols{grid-template-columns:1fr}
  .hd .wrap{height:auto;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}

  /* —— 手机端语言切换：吸顶橙色条，取代原来缩在右上角的小按钮 —— */
  .topbar .langbtn{display:none}
  .langbar{display:flex;position:sticky;top:0;z-index:46;height:46px;box-sizing:border-box;
    background:var(--amber);align-items:center;gap:8px;padding:0 14px;overflow-x:auto;
    box-shadow:0 2px 12px rgba(11,37,69,.2)}
  .langbar .ll{flex:none;font-size:12px;font-weight:800;color:#3A2600;letter-spacing:.4px;white-space:nowrap}
  .langbar button{flex:none;background:#fff;color:#3A2600;border:1px solid #C97F1B;border-radius:999px;
    font-size:12.5px;font-weight:800;padding:6px 13px;cursor:pointer;font-family:inherit;line-height:1.2}
  .langbar button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
  header.hd{top:46px}
  .toast-wrap{top:112px}
}

/* ==========================================================================
   正式站扩展样式 —— 原型没有的新组件
   （原型 CSS 由 extract_from_prototype.py 抽出，本文件单独维护，重抽不会丢）
   ========================================================================== */

/* ---- 语言切换：静态站用 <a>，不是按钮 ---- */
.langbtn a{display:inline-block;background:transparent;border:1px solid rgba(255,255,255,.28);
  color:#C9D6E4;font-size:11.5px;padding:2px 8px;border-radius:5px;font-weight:700;text-decoration:none}
.langbtn a.on{background:var(--amber);border-color:var(--amber);color:#3A2600}
.langbar a{flex:none;background:#fff;color:#3A2600;border:1px solid #C97F1B;border-radius:999px;
  font-size:12.5px;font-weight:800;padding:6px 13px;text-decoration:none;line-height:1.2;white-space:nowrap}
.langbar a.on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ---- 面包屑 ---- */
.crumb a{color:var(--navy3);font-weight:700;text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb i{font-style:normal;color:var(--line);margin:0 6px}

/* ---- 右下角悬浮联系方式：邮件 + 微信（+ WhatsApp，填了号才有）
   （2026-09-29 取代原即时通讯外链那一个）
   ★ 邮件是 <a href="mailto:">，微信是 <button>（微信没有可用的网页唤起链接，
     做成 <a href="weixin://"> 在桌面浏览器上点了没反应）。所以这一组里链接和按钮
     是混着的，别为了"整齐"把微信也改回 <a>。
   ★ align-items:flex-end 是给下面那块绝对定位的面板用的 —— 面板 right:0 要贴着钮的右边。 */
.cf-float{position:fixed;right:18px;bottom:74px;z-index:39;display:flex;flex-direction:column;
  gap:10px;align-items:flex-end}
.cf-btn{width:54px;height:54px;border-radius:50%;border:0;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1;
  text-decoration:none;box-shadow:0 10px 26px rgba(11,37,69,.26)}
.cf-btn:hover{filter:brightness(1.07)}
.cf-mail{background:var(--navy);color:#fff}
.cf-wx{background:#07C160;color:#fff}
.cf-wa{background:#25D366;color:#fff}
body.lite .cf-btn{box-shadow:none}

/* 微信面板：点悬浮微信按钮 / 页面里任何一个「加微信」按钮都开这一个面板。
   ★ 它是 .cf-float 的**子元素**，靠 bottom:100% 贴在按钮组正上方 ——
     不要改回 position:fixed + 写死的 bottom 值。悬浮钮的个数是会变的
     （有 / 没有 WhatsApp 是 3 个和 2 个两种），写死的偏移量按两个钮算，
     加上第三个钮就会把面板压到按钮上，微信钮就点不到了。 */
.cf-panel{position:absolute;right:0;bottom:100%;margin-bottom:10px;z-index:40;width:290px;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;
  box-shadow:0 18px 44px rgba(11,37,69,.22)}
.cf-panel[hidden]{display:none!important}
.wxbox .wxrow{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.wxbox .wxrow span{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.6px}
.wxbox .wxrow b{font-size:17px;color:var(--navy);letter-spacing:.6px;word-break:break-all}
.wxcopy{margin-top:11px;width:100%;background:var(--navy);color:#fff;border:0;border-radius:9px;
  padding:9px 12px;font-size:13.5px;font-weight:800;cursor:pointer;font-family:inherit}
.wxcopy:hover{filter:brightness(1.08)}
.wxtip{margin:10px 0 0;font-size:11.8px;line-height:1.55;color:var(--muted)}

/* 页脚联系方式里的邮箱是链接 —— 页脚底色是深蓝，不给颜色的话会变成 UA 默认的
   蓝紫字，在深底上几乎看不清。 */
footer .cols a{color:#CFE0F0;text-decoration:none}
footer .cols a:hover{color:#fff;text-decoration:underline}

/* ---- 服务页 ---- */
.svcgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.svccard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;display:flex;gap:16px}
.svccard .n{width:40px;height:40px;border-radius:10px;background:var(--navy);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px}
.svccard h3{margin:0 0 8px;font-size:16px;color:var(--navy)}
.svccard p{margin:0;font-size:13.6px;color:var(--ink2)}

/* ---- 品牌页 ---- */
.bfilter{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:20px;align-items:center}
.bfilter b{font-size:12px;color:var(--muted);letter-spacing:.6px;text-transform:uppercase;margin-right:4px}
.bfilter a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;
  font-size:13px;font-weight:700;color:var(--ink2);text-decoration:none}
.bfilter a.on{background:var(--navy);border-color:var(--navy);color:#fff}
.brandgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.bcard2{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
.bcard2 .hd2{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.bcard2 b{font-size:16px;color:var(--navy)}
.bcard2 .org{font-size:11px;font-weight:800;color:var(--amber-d);letter-spacing:.7px}
.bcard2 .cnt{font-size:12.5px;color:var(--muted);margin-bottom:10px}
.bcard2 .lst{display:flex;flex-direction:column;gap:6px}
.bcard2 .lst a{font-size:12.6px;color:var(--navy3);font-weight:600;text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bcard2 .lst a:hover{text-decoration:underline}

/* ---- 市场详情页 ---- */
.mkd-lay{display:grid;grid-template-columns:1.4fr 1fr;gap:26px;align-items:start;padding:24px 0 56px}
.mkfacts{background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px 20px 14px;position:sticky;top:82px}
.mkfacts .f{padding:14px 0;border-bottom:1px dashed var(--line)}
.mkfacts .f:last-child{border-bottom:none}
.mkfacts .f dt{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.7px;text-transform:uppercase;margin-bottom:5px}
.mkfacts .f dd{margin:0;font-size:14px;color:var(--ink);font-weight:600}
.mkfacts .f dd small{display:block;font-weight:500;color:var(--muted);font-size:12.3px;margin-top:4px}
.mkbig{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
.mkbig .b{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
.mkbig .b span{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.7px;text-transform:uppercase}
.mkbig .b b{display:block;font-size:22px;color:var(--navy);letter-spacing:-.4px;margin:6px 0 3px}
.mkbig .b small{font-size:12px;color:var(--ink2);line-height:1.5;display:block}
.mkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mkcards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mkc{background:#fff;border:1px solid var(--line);border-radius:11px;padding:15px;text-decoration:none;display:block}
.mkc:hover{border-color:var(--navy3);box-shadow:0 8px 20px rgba(11,37,69,.08)}
.mkc .t{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.mkc .t b{font-size:14px;color:var(--navy);display:block;line-height:1.2}
.mkc .t span{font-size:11px;color:var(--muted);display:block}
.mkc dl{margin:0;font-size:11.8px;color:var(--ink2);display:grid;grid-template-columns:auto 1fr;gap:3px 8px}
.mkc dt{color:var(--muted)}
.mkc dd{margin:0;font-weight:600}

/* ---- FAQ ---- */
.faqwrap{max-width:880px;margin:0 auto}
.faqitem{background:#fff;border:1px solid var(--line);border-radius:11px;margin-bottom:10px;overflow:hidden}
.faqitem summary{padding:16px 18px;font-size:15px;font-weight:700;color:var(--navy);cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.faqitem summary::-webkit-details-marker{display:none}
.faqitem summary:after{content:"+";font-size:19px;color:var(--amber-d);font-weight:800;flex:none;line-height:1}
.faqitem[open] summary:after{content:"−"}
.faqitem[open] summary{border-bottom:1px solid var(--line);background:var(--soft)}
.faqitem .a{padding:15px 18px 17px;font-size:13.8px;color:var(--ink2);line-height:1.7}

/* ---- 法务页 ---- */
.legal{max-width:820px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:30px 34px;font-size:14px;color:var(--ink2);line-height:1.78}
.legal h2{font-size:19px;color:var(--navy);margin:26px 0 9px}
.legal h2:first-child{margin-top:0}
.legal p{margin:0 0 14px}

/* ---- 网站地图 ---- */
.smgrp{margin-bottom:26px}
.smgrp h3{font-size:15px;color:var(--navy);margin:0 0 12px;padding-bottom:8px;border-bottom:2px solid var(--amber)}
.smlist{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 20px}
.smlist a{font-size:13.2px;color:var(--navy3);text-decoration:none;padding:4px 0;display:block}
.smlist a:hover{text-decoration:underline}
.smlist a small{color:var(--muted);display:block;font-size:11.5px}

/* ---- 内链簇（SEO） ---- */
.linkclust{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;margin-top:20px}
.linkclust h3{margin:0 0 12px;font-size:15px;color:var(--navy)}
.linkclust .tags{display:flex;flex-wrap:wrap;gap:8px}
.linkclust .tags a{background:var(--soft);border:1px solid var(--line);border-radius:7px;padding:6px 12px;
  font-size:12.5px;font-weight:600;color:var(--ink2);text-decoration:none}
.linkclust .tags a:hover{border-color:var(--navy3);color:var(--navy3)}

/* ---- 空态 ---- */
.empty{background:#fff;border:1px dashed var(--line);border-radius:12px;padding:34px 20px;text-align:center;
  color:var(--muted);font-size:13.6px}

/* ---- 车源卡上的准入徽标：选目的国后由 data-elig 切换显示 ---- */
.vcard .mkt .emk{display:none}
.vcard[data-elig] .mkcount{display:none}
.vcard[data-elig="ok"] .emk.e-ok,
.vcard[data-elig="warn"] .emk.e-warn,
.vcard[data-elig="stop"] .emk.e-stop{display:inline}
.vcard[data-elig="warn"] .emk.e-warn{color:#9A6312}
.vcard[data-elig="stop"] .emk.e-stop{color:#A82B2B}
.vcard[data-elig="stop"]{opacity:.62}
.vcard[data-elig="stop"]:hover{opacity:1}

/* ---- 404 ---- */
.nf{text-align:center;padding:70px 20px}
.nf b{display:block;font-size:64px;color:var(--amber);font-weight:800;letter-spacing:-2px;line-height:1}
.nf h1{font-size:24px;color:var(--navy);margin:14px 0 10px}
.nf p{color:var(--ink2);max-width:520px;margin:0 auto 22px}

/* ---- 数据核实条 ---- */
.verifybar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--soft2);
  border-radius:9px;padding:10px 14px;font-size:12.3px;color:var(--ink2);margin-top:16px}
.verifybar b{color:var(--navy)}

/* ---- 询价单页内联 ---- */
.inq-tbl{width:100%;border-collapse:collapse;font-size:13px}
.inq-tbl th,.inq-tbl td{text-align:left;padding:9px 8px;border-bottom:1px dashed var(--line)}
.inq-tbl th{font-size:11px;color:var(--muted);letter-spacing:.6px;text-transform:uppercase;font-weight:800}
.inq-tbl td b{color:var(--navy)}

/* ---- 左栏分类索引（车源页）----
   6 个分组 ≈ 37 行，超过一屏；面板本身滚动，页面其余部分照常滚。
   窄屏（≤1000px）左栏折到上方，去掉高度限制与内滚动，避免变成一个小框。 */
.filters{max-height:calc(100vh - 104px);overflow:auto}
.fopt em{min-width:16px;text-align:right;font-variant-numeric:tabular-nums}
.fopt.zero{opacity:.42}
@media (max-width:1000px){
  .filters{max-height:none;overflow:visible}
}
.inq-tbl .rm{color:var(--red);cursor:pointer;font-weight:800;font-size:12px;text-decoration:none}

@media (max-width:1000px){
  .svcgrid,.brandgrid,.mkgrid,.mkd-lay,.mkcards,.mkbig{grid-template-columns:repeat(2,1fr)}
  .smlist{grid-template-columns:repeat(2,1fr)}
  .mkfacts{position:static}
}
@media (max-width:640px){
  .svcgrid,.brandgrid,.mkgrid,.mkcards,.mkbig,.smlist{grid-template-columns:1fr}
  .svcgrid .svccard{flex-direction:column;gap:11px}
  .legal{padding:22px 18px}
  .cf-btn{width:50px;height:50px;font-size:22px}
  .cf-float{right:12px;bottom:64px;gap:9px}
  /* 这里只改宽度和右边距：bottom:100%（贴按钮组上方）由基础规则给，不用重写。 */
  .cf-panel{width:calc(100vw - 24px);max-width:290px}
  .inq-tbl{font-size:12px}
  .inq-tbl th:nth-child(3),.inq-tbl td:nth-child(3){display:none}
}

/* ==========================================================================
   品牌身份与公司档案（2026-09-23）
   —— 页头 LOGO 换成真标记、页脚补法定主体行、公司档案四卡与底部行动按钮
   ========================================================================== */

/* ---- 页头 LOGO：内联 SVG 取代原来的「渐变方块 + 字母 V」占位 ----
   原来的 .mark 是自己画底色 + 居中一个字母；现在标记本身（内联 SVG）已经带了
   圆角与渐变，所以底色、圆角、文字色都得撤掉 —— 只撤一半的话，SVG 圆角外面
   会露出一圈 CSS 渐变（颜色对不上就成了一道脏边）。 */
.logo .mark{width:30px;height:30px;flex:none;display:block;background:none;border-radius:0}

/* ---- 页脚：品牌行 + 法定主体名 ---- */
footer .flogo{display:flex;align-items:center;gap:8px;color:#fff;font-weight:800;font-size:17px;margin:0 0 9px}
footer .flogo .mark{width:26px;height:26px;flex:none;display:block}
footer .flogo small{display:block;font-size:9px;font-weight:700;color:#9FB3C8;letter-spacing:1.05px;line-height:1.1}
/* 法人全称（Guangzhou Xianghesheng Trading Co., Ltd.）比品牌名长得多，
   字号给小、行高给足，避免在窄屏被压成三行把页脚撑开 */
footer .flegal{font-size:11.6px;color:#8FA6BC;letter-spacing:.2px;margin:0 0 11px;line-height:1.45}

/* ---- 公司档案：品牌名 + 法定主体名并排，下面四张卡 ---- */
.why.why4{grid-template-columns:repeat(4,1fr);gap:16px}
.coent{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;
  margin:-14px auto 26px;font-size:12.8px;color:var(--ink2)}
.coent b{color:var(--navy);font-size:13.6px;letter-spacing:.2px}
.coent span{color:var(--muted)}
.coent span::before{content:"·";color:var(--line);margin-right:8px;font-weight:800}
.cocta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:26px}

@media (max-width:1000px){
  .why.why4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  /* .why 在 640 下已被压成 1 列，但 .why.why4 特异性更高（0,2,0 > 0,1,0），
     不在这里再写一遍，四张卡在手机上会硬挤成 2 列 */
  .why.why4{grid-template-columns:1fr}
  .logo{font-size:16px}
  .logo .mark{width:26px;height:26px}
  .cocta .btn{width:100%}
  footer .flogo{font-size:15.5px}
}

/* ---- 实拍图（车源卡主图 / 详情页相册）----
   图是构建时从 var/media 压出来的两档（-lg 详情页大图 / -sm 卡片与缩略图），
   路径统一 /media/stock/<编号>/<文件名>，与后台的媒体路由同形。
   .ph 本来就是 position:relative + overflow:hidden + flex 居中，所以图绝对定位铺满、
   角标（IN STOCK / Real stock / N photos）自然浮在图上。没有实拍的车不带 .has-shot，
   保留原来的渐变占位块 —— 不是每台车都有图，占位比破图好。 */
.ph.has-shot{background:#E8ECF1}
.ph > img.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.thumbs .t img.shot{width:100%;height:100%;object-fit:cover;display:block}
/* 卡片主图轻微放大：扫过时有点反馈；只动 transform，不占位、不引起列表抖动 */
.vcard .ph.has-shot img.shot{transition:transform .35s ease}
.vcard:hover .ph.has-shot img.shot{transform:scale(1.04)}
/* 实拍缩略图常有十几二十张，桌面多给两列，别把相册拉成一长条 */
@media (min-width:1001px){ .thumbs.real{grid-template-columns:repeat(8,1fr)} }

/* ---- 可点卡片（首屏 hero + 车源卡，2026-09-24） ---------------------------------
   老板反馈「这张图没办法点击进入商品详情」—— 首屏那张卡原来整块是 <div>，连个 <a> 都没有，
   图片做得再像可点也没用。这里给两种卡各配一条"进详情"的路：
     · hero 卡（只有一张、内部无按钮）→ 整块 <a>，最省事也最好点
     · 车源卡（内部有「查看详情」「加入询价」两个按钮）→ 不能整块包 <a>（按钮不能嵌套在链接里），
       改用铺满卡片的链接层（stretched link）：标题是链接本体，它的 ::after 绝对定位铺满整卡，
       再把按钮行抬到链接层之上。这样点图、点标题、点空白都进详情，两个按钮照常能点。 */
a.hero-card{display:block;position:relative;color:inherit;text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease}
a.hero-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.28)}
a.hero-card:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.hero-media .hero-go{display:flex;align-items:center;justify-content:flex-end;gap:8px;
  padding:10px 14px;background:rgba(242,163,60,.16);color:var(--amber);
  font-size:12.5px;font-weight:700;letter-spacing:.2px}
.hero-media .hero-go i{font-style:normal;transition:transform .2s ease}
a.hero-card:hover .hero-go i{transform:translateX(4px)}

.vcard{position:relative}
.vcard .stretch{display:block}
.vcard .stretch::after{content:"";position:absolute;inset:0;z-index:1}
/* 两个按钮必须浮在链接层之上，否则「加入询价」点不动 */
.vcard .row{position:relative;z-index:2}
.vcard .stretch:focus-visible{outline:2px solid var(--navy3);outline-offset:2px;border-radius:4px}

/* 精简模式：只隐首屏那张实拍照片，保留卡片、车名与进详情的入口。
   （site.css 里原本有一条把整张首屏卡 display:none 的规则，已随之删掉 ——
   那还是"首屏卡只是装饰性占位"的年代，现在它挂着最新在库的车。
   注：这里刻意不把那行旧规则的原文抄进注释，否则以后 grep 找它会被这条注释骗到。） */
body.lite .hero-media .card .ph img.shot{display:none}

/* ---- 车源视频（详情页相册下方，2026-09-24） ------------------------------------
   老板问「怎么上传视频」时，这条路从后台上传、压缩、发布到前台播放器都是空的。
   播放器用浏览器自带控件（controls 属性）：进度条、音量、全屏、投屏在低端安卓机上
   都比自己画一套稳，而且能拖进度靠的是服务端支持 Range（见 admin/app.py 的 media 路由）。
   object-fit:contain 是为了竖屏视频：手机竖着拍的片子塞进左栏，
   不限高会撑出 1200px 一柱擎天，contain 能整体缩进 440px 里、两侧留深底。
   深底用 #0d1626 而不是纯黑 —— 纯黑跟页脚看着像断裂，深海底更贴近视频区。 */
.vblk .vgrid{display:grid;gap:12px}
.vblk .vitem{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#0d1626}
.vblk .vplayer{width:100%;max-height:440px;object-fit:contain;display:block;background:#0d1626}
.vblk .vcap{padding:8px 10px;font-size:12px;color:#55606E;background:#fff}
.vblk .vhint{margin:10px 0 0;font-size:11.5px;color:#93A1B5;line-height:1.6}
@media (max-width:520px){ .vblk .vplayer{max-height:280px} }