/* ============================================================
   VPCS 顶部导航栏 —— 逐条复刻 http://vpcs.weipuvip.com/system.html
   来源：css/system2.css?v13 第 36-121 行、第 1563-1570 行响应式
        common/css/reset.css?v9 的 a / ul / li / img 基础规则
   ★ 三页共用，必须放在各页皮肤 CSS 之后加载
   ============================================================ */

/* ---------- 以下为参考页 system2.css 原文，未改数值 ---------- */
.head-nav {
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #e6ebf1;
  line-height: 60px;
  text-align: left;
}
.head-nav .nav-wrapper {
  width: 85%;
  min-width: 1200px;
  margin: auto;
}
.head-nav .nav-link {
  display: inline-block;
  margin-left: 100px;
  user-select: none;
  text-align: right;
}
.head-nav .nav-link li {
  display: inline-block;
  margin: 0 20px;
  font-size: 14px;
}
.head-nav .nav-link li a {
  color: #666;
  padding: 5px 0;
}
.head-nav .nav-link li a.active {
  color: #d94343;
  border-bottom: 1px solid #d94343;
}
.head-nav .nav-link .nav-tooltip-wrapper {
  position: relative;
  cursor: pointer;
}
.head-nav .nav-link .nav-tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
  margin-top: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  line-height: 30px;
}
.head-nav .nav-link .nav-tooltip strong {
  color: #ffd700;
  font-weight: bold;
}
.head-nav .nav-link .nav-tooltip::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #333;
}
.head-nav .nav-download-btn {
  display: block;
  padding: 0 24px;
  background-color: #e44549;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.3s ease;
  float: right;
  line-height: 40px;
  margin-top: 10px;
}
.head-nav .nav-download-btn:hover {
  background-color: #d63a3e;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(228, 69, 73, 0.3);
}
@media screen and (max-width: 1600px) {
  .head-nav .nav-link {
    margin-left: 10px;
  }
  .head-nav .nav-link li {
    margin: 0 12px;
  }
}

/* ---------- 隔离本地主题全局样式，锁定成参考页表现 ----------
   参考页 reset.css：a{text-decoration:none;outline:none} a img{border:none}
   ul,li{list-style:none;margin:0;padding:0}；bootstrap：img{vertical-align:middle} */
.head-nav a { text-decoration: none; outline: none; }
/* 参考页 reset.css 第 141 行 body{min-width:1200px}：
   窄视口下导航容器不会出现负 margin，几何与参考页一致 */
body { min-width: 1200px; }
/* 参考页 body 的字体设定（reset.css 第 135-142 行），锁在导航上避免各页 body 差异 */
.head-nav { font-family: 微软雅黑, "Microsoft YaHei", 宋体, SimSun, Arial, Helvetica, sans-serif;
  font-size: 14px; }
.head-nav a:hover { text-decoration: none; }
.head-nav a img { border: none; }
/* 注意：不能写 margin:0，否则会盖掉 .nav-link 的 margin-left（100px / 响应式 10px） */
.head-nav .nav-wrapper > ul { list-style: none; padding: 0;
  margin-top: 0; margin-right: 0; margin-bottom: 0; }
.head-nav h1.hide { display: none; }
/* logo 原图 213×25，参考页不设 height，本地旧皮肤曾强行拉到 36px，这里还原 */
.head-nav .logo { vertical-align: middle; height: auto; max-width: none; }
/* 本地 common.css 的 a:hover 会干扰配色，这里只锁定下划线与 active 态；
   基础色与 hover 变色统一放在文件末尾的「美化」块 */
.head-nav .nav-link li a { text-decoration: none; }
.head-nav .nav-link li a.active,
.head-nav .nav-link li a.active:hover { color: #d94343; }
.head-nav .nav-download-btn,
.head-nav .nav-download-btn:hover { color: #fff; }

/* ---------- 右侧悬浮：常见问题 / 联系我们（参考页 .aside-bar / .faq-popup） ---------- */
.vpcs-aside-bar{position:fixed;z-index:60;bottom:120px;right:10px;
  list-style:none;margin:0;padding:0;text-align:center;}
.vpcs-aside-bar>li{position:relative;margin-bottom:15px;}
.vpcs-aside-bar>li>a{display:block;width:70px;height:70px;padding:10px;
  background:#fff;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,.1);
  text-decoration:none;box-sizing:border-box;transition:all .3s ease;}
.vpcs-aside-bar>li>a:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.15);}
.vpcs-aside-bar>li>a>i{display:block;width:100%;height:36px;}
.vpcs-aside-bar>li>a>p{margin:4px 0 0;font-size:12px;color:#333;}
.vpcs-aside-bar .vpcs-ico-faq{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='28' fill='%23666'/%3E%3Ctext x='32' y='44' font-size='34' fill='white' text-anchor='middle'%3E?%3C/text%3E%3C/svg%3E") no-repeat center center;background-size:32px;}
.vpcs-aside-bar .vpcs-ico-kf{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23666' d='M32 8C17.1 8 5 18.5 5 31.4c0 7.1 3.6 13.4 9.3 17.6L12 59l12.3-6.2c2.5.6 5 .9 7.7.9 14.9 0 27-10.5 27-23.4S46.9 8 32 8z'/%3E%3C/svg%3E") no-repeat center center;background-size:32px;}
.vpcs-side-popup{display:none;position:absolute;right:100%;top:50%;
  transform:translateY(-50%);width:400px;background:#fff;border-radius:8px;
  box-shadow:0 4px 20px rgba(0,0,0,.15);padding:20px;margin-right:15px;
  z-index:100;text-align:left;line-height:1.5;}
.vpcs-faq-trigger:hover .vpcs-side-popup,
.vpcs-contact-trigger:hover .vpcs-side-popup{display:block;}
.vpcs-side-popup.open{display:block;}
.vpcs-side-popup-title{font-size:18px;font-weight:bold;color:#333;
  margin:0 0 15px;padding-bottom:10px;border-bottom:2px solid #e8e8e8;}
.vpcs-side-popup-content{max-height:400px;overflow-y:auto;}
.vpcs-faq-item{margin-bottom:15px;}
.vpcs-faq-item:last-child{margin-bottom:0;}
.vpcs-faq-q{font-weight:bold;color:#333;margin:0 0 5px;font-size:14px;}
.vpcs-faq-a{color:#666;line-height:1.6;font-size:13px;margin:0;}
.vpcs-contact-popup{width:400px;}
.vpcs-contact-popup p{margin:0 0 10px;font-size:13px;color:#555;}
.vpcs-contact-popup p:last-child{margin-bottom:0;color:#999;font-size:12px;}

/* ---------- 隐藏各页皮肤脚本生成的旧导航 / 旧悬浮，避免重复 ---------- */
.vpcs-nav, .vpcs-aside, .fixedBox { display: none !important; }

/* ============================================================
   美化（老板要求）：字号加大、鼠标悬停变金色并滑出下划线、导航更精致
   ★ 放在所有参考页 / 隔离规则之后，确保覆盖；三页共用同一份
   ============================================================ */
/* 白色导航与现代化首页/验真页头部保持一致：浅灰描边、无重阴影 */
.head-nav { position: relative; z-index: 5;
  box-shadow: none; }

/* 菜单字号 14px → 20px；基础色略加深，hover 变站点主色金
   ★ 字号必须同时写在 li 和 a 上：query.css 有全局 `* { font-size:14px }`，
     只写 li 时 a 会被通配规则直接命中变回 14px，造成三页导航字号不一致 */
.head-nav .nav-link li,
.head-nav .nav-link li a { font-size: 15px; }
.head-nav .nav-link li a {
  position: relative;
  display: inline-block;
  padding: 5px 2px;
  color: #555;
  /* 一致性锁定：字体属性全部显式声明，不受各页 `*{}` / 通用 a 规则影响 */
  font-family: 微软雅黑, "Microsoft YaHei", 宋体, SimSun, Arial, Helvetica, sans-serif;
  letter-spacing: normal;
  transition: color .25s ease;
}
.head-nav .nav-link li a:hover { color: #d94343; }
/* hover 时从中间向两侧滑出的金色下划线 */
.head-nav .nav-link li a::after {
  content: '';
  position: absolute;
  left: 2px; right: 2px; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: #d94343;
  transform: scaleX(0);
  transition: transform .25s ease;
}
.head-nav .nav-link li a:hover::after { transform: scaleX(1); }

/* 右侧红色按钮同步放大一点，hover 抬升更明显 */
.head-nav .nav-download-btn {
  font-size: 15px;
  padding: 0 26px;
  letter-spacing: .5px;
}
.head-nav .nav-download-btn:hover {
  background-color: #d63a3e;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(228, 69, 73, .35);
}

/* 气泡提示字号跟着放大一点 */
.head-nav .nav-link .nav-tooltip { font-size: 13px; }

/* ============================================================
   老板要求：右上角「报告下载」按钮与导航栏目文字始终同一行
   原实现是 inline-block 菜单 + float:right 按钮，菜单项增多或视口偏窄时
   按钮容易被挤到第二行，且与文字基线不齐。改为 flex 单行三段式：
   logo / 菜单 / 按钮，垂直居中，禁止换行；按钮用 margin-left:auto 顶到最右。
   ★ 不改 margin-left（保留 100px / 响应式 10px）与字号等参考页数值
   ============================================================ */
.head-nav .nav-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.head-nav .nav-link {
  white-space: nowrap;
  flex-shrink: 0;
}
.head-nav .nav-download-btn {
  float: none;
  flex-shrink: 0;
  margin-top: 0;
  margin-left: auto;
}
/* 「报告验证」下方气泡复用 .nav-tooltip，与「加入收藏」完全同款，无需另写样式 */
/* ============================================================
   「联系我们」客服卡片：对接后台客服系统代码 / 商家客服信息
   ============================================================ */
.vpcs-contact-popup p { margin: 0 0 8px; font-size: 13px; color: #555; }
.vpcs-contact-popup p b { color: #333; font-weight: 600; }
.vpcs-contact-popup p.vpcs-cs-note { margin: 12px 0 0; padding-top: 10px;
  border-top: 1px dashed #eee; color: #999; font-size: 12px; }
.vpcs-contact-popup .vpcs-cs-qr { text-align: center; margin: 12px 0 4px; }
.vpcs-contact-popup .vpcs-cs-qr img { width: 140px; height: 140px;
  border: 1px solid #eee; border-radius: 8px; object-fit: contain; background: #fff; }
.vpcs-contact-popup .vpcs-cs-btn { display: block; margin-top: 14px; padding: 9px 0;
  text-align: center; background: #d94343; color: #fff; font-size: 14px;
  font-weight: 600; border-radius: 6px; text-decoration: none;
  transition: background .2s ease, transform .2s ease; }
.vpcs-contact-popup .vpcs-cs-btn:hover,
.vpcs-contact-popup .vpcs-cs-btn:focus { background: #c53636; color: #fff;
  text-decoration: none; transform: translateY(-1px); }