/* ============ PC 导航 + 下拉菜单 + 移动端修复 — 完整还原 zhuiyi.ai ============ */

/* ========== 覆盖原站 fd62573.css 的 header-bar 冲突规则 ========== */
/* 使用 #header ID 选择器提高特异性（0,1,1,0 → 1,1,1,0），确保覆盖 */

@media screen and (min-width: 768px) {
  /* 覆盖 common-layout { overflow: hidden } 防止固定定位被裁剪 */
  .common-layout { overflow: visible !important; }

  /* ====== header-bar 核心 ====== */
  #header.header-bar[data-v-653a8e63] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 80px !important;
    z-index: 100 !important;
    background: transparent !important;
    color: #fff !important;
    transition: color .5s, background .3s;
  }
  #header.header-bar.header-bar_active[data-v-653a8e63] {
    background: #fff !important;
    color: #333 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
  }

  /* ====== nav：不独立固定 ====== */
  #header.header-bar nav[data-v-653a8e63] {
    position: static !important;
    height: 80px !important;
    min-width: auto !important;
    width: auto !important;
    z-index: auto !important;
    border-bottom: none !important;
    background: transparent !important;
  }

  /* 补偿 banner 顶部高度 */
  .section-banner { padding-top: 80px !important; }
  @media screen and (min-width: 769px) {
  .header-bar__mobile { display: none !important; }
}
  /* 桌面端隐藏移动版页脚（仅移动端展示），避免 PC 底部出现未排版的裸文本 */
  .mobile-footer-only { display: none !important; }

  /* ====== Logo ====== */
  #header.header-bar .logo[data-v-653a8e63] {
    display: inline-block !important;
    float: left !important;
    padding-left: 6.5vw !important;
    height: 80px !important;
    line-height: 80px !important;
    text-decoration: none !important;
  }
  #header.header-bar .logo img[data-v-653a8e63] {
    height: 52px !important;
    width: auto !important;
    vertical-align: middle !important;
    transition: filter .3s;
  }
  /* 透明头部：logo 白色 */
  #header.header-bar .logo .logo-white { filter: brightness(0) invert(1); }
  #header.header-bar .logo .logo-dark { display: none !important; }
  /* 滚动后：logo 显原色 */
  #header.header-bar.header-bar_active .logo .logo-white { display: none !important; }
  #header.header-bar.header-bar_active .logo .logo-dark { display: inline-block !important; filter: none; }

  /* ====== Nav Wrap ====== */
  #header.header-bar .nav-wrap[data-v-653a8e63] {
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
    height: 80px !important;
  }
  #header.header-bar .nav-wrap > ul[data-v-653a8e63] {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* ====== Nav Links ====== */
  #header.header-bar .nav-wrap > ul > .nav-link[data-v-653a8e63] {
    font-size: 16px !important;
    line-height: 80px !important;
    font-weight: 400 !important;
    color: #fff !important;
    padding: 0 22px !important;
    transition: color .2s;
  }
  #header.header-bar .nav-wrap > ul > .nav-link[data-v-653a8e63]:hover,
  #header.header-bar .nav-wrap > ul > li.nav-link[data-v-653a8e63]:hover {
    color: hsla(0,0%,100%,.6) !important;
  }
  #header.header-bar.header-bar_active .nav-wrap > ul > .nav-link[data-v-653a8e63] {
    color: #333 !important;
  }
  #header.header-bar.header-bar_active .nav-wrap > ul > .nav-link[data-v-653a8e63]:hover,
  #header.header-bar.header-bar_active .nav-wrap > ul > li.nav-link[data-v-653a8e63]:hover {
    color: #0052ff !important;
  }

  /* ====== Nav Arrow ====== */
  #header.header-bar .nav-wrap .nav-arrow[data-v-653a8e63] {
    width: 12px; height: 12px; margin-left: 4px;
    fill: currentColor; transition: transform .25s;
  }
  #header.header-bar.header-bar_active .nav-wrap .nav-arrow[data-v-653a8e63] { fill: #999 !important; }
  #header.header-bar .nav-wrap > ul > .nav-link[data-v-653a8e63]:hover .nav-arrow { transform: rotate(180deg); }

  /* ====== 体验中心按钮 ====== */
  #header.header-bar .nav-wrap > ul > a.nav-link.tiyan[data-v-653a8e63] {
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box; width: 96px; height: 32px;
    line-height: 1 !important; border-radius: 32px;
    text-align: center; margin: 0; font-weight: 500;
    font-size: 14px !important; padding: 0 !important; color: #fff !important;
    background: linear-gradient(180deg, hsla(0,0%,100%,.047), hsla(0,0%,100%,.098)) !important;
    border: 1px solid hsla(0,0%,100%,.4) !important;
    backdrop-filter: blur(20px);
  }
  #header.header-bar.header-bar_active .nav-wrap > ul > a.nav-link.tiyan[data-v-653a8e63] {
    background: linear-gradient(121.27deg, #155be8, #0033cc) !important;
    border-color: transparent !important;
  }
  #header.header-bar.header-bar_active .nav-wrap > ul > a.nav-link.tiyan[data-v-653a8e63]:hover { opacity: .9; }

  /* ====== 下拉菜单面板 ====== */
  .pc-dropdown {
    position: fixed; left: 0; right: 0; top: 80px;
    background: #fff; z-index: 6040;
    box-shadow: 0 8px 30px rgba(0,0,0,.10);
    opacity: 0; visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .has-dropdown:hover > .pc-dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
  }

  .dd-product { max-width: 1100px; margin: 0 auto; padding: 32px 40px 36px; display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: flex-start; }
  .dd-product .dd-l2--full { flex: 0 0 100%; }
  .dd-product .dd-l2--small { flex: 1 1 320px; min-width: 240px; }
  .dropdown-head { margin-bottom: 24px; }
  .dropdown-head-title { display: inline-block; font-size: 18px; font-weight: 600; color: #333; padding-bottom: 8px; }
  .dropdown-head-bottom { border-radius: 1.4px; background: linear-gradient(89.99deg, #ebebeb, hsla(0,0%,92.2%,.5098)); height: 1.4px; margin: 8px 10px 10px; }
  .dd-classification { display: flex; gap: 300px; margin-bottom: 16px; font-size: 13px; color: #999; }
  .dd-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 60px; }
  .dd-list li a { display: flex; align-items: flex-start; gap: 14px; padding: 6px 12px; border-radius: 8px; text-decoration: none; color: #333; transition: background .15s; }
  .dd-list li a:hover { background: #f5f7fa; }
  .dd-icon svg { width: 36px; height: 36px; fill: #0052ff; flex-shrink: 0; margin-top: 2px; }
  .dd-text { min-width: 0; }
  .dd-name { font-size: 15px; font-weight: 500; color: #222; margin: 0 0 4px; line-height: 1.3; }
  .dd-desc { font-size: 13px; color: #888; line-height: 1.5; display: block; }

  .dd-solution { max-width: 900px; margin: 0 auto; padding: 28px 40px; display: flex; gap: 48px; }
  .dd-solution .dd-col { flex: 1; min-width: 0; }
  .dd-solution .dd-body { padding-top: 8px; }
  .dd-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
  .dd-grid li a { display: flex; align-items: flex-start; gap: 10px; padding: 5px 10px; border-radius: 6px; text-decoration: none; color: #333; transition: background .15s; }
  .dd-grid li a:hover { background: #f5f7fa; }
  .dd-grid .dd-icon svg { width: 22px; height: 22px; fill: #555; flex-shrink: 0; margin-top: 2px; }
  .dd-grid .dd-link-name { font-size: 14px; font-weight: 500; color: #222; }
  .dd-grid .dd-link-desc { font-size: 12px; color: #888; line-height: 1.4; display: block; }
  .dd-tag.hot { font-size: 11px; color: #e74c3c; border: 1px solid #e74c3c; border-radius: 3px; padding: 0 4px; margin-left: 6px; line-height: 1.4; }

  .dd-simple { max-width: 800px; margin: 0 auto; padding: 28px 40px; display: flex; gap: 48px; }
  .dd-about { max-width: 1000px; margin: 0 auto; padding: 28px 40px; display: flex; gap: 40px; }
  .dd-about .dd-col { min-width: 120px; }
  .dd-simple .dd-col { min-width: 140px; }
  .dd-section-title { font-size: 14px; font-weight: 600; color: #333; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid #eee; }
  .dd-list-simple { list-style: none; margin: 0; padding: 0; }
  .dd-list-simple li { margin-bottom: 0 !important; }
  .dd-list-simple li a { font-size: 14px; color: #555; text-decoration: none; transition: color .15s; display: block; padding: 4px 0 !important; line-height: 1.4 !important; }
  .dd-list-simple li a:hover { color: #0052ff; }

  .menu-section { margin-bottom: 16px; }
  .menu-section .name { font-size: 14px; font-weight: 600; color: #333; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid #eee; }
  .menu-items { list-style: none; margin: 0; padding: 0; }
  .menu-items .item { margin-bottom: 0 !important; height: auto !important; min-height: 0 !important; }
  .menu-items .item a { font-size: 14px; color: #555; text-decoration: none; transition: color .15s; display: block; padding: 2px 0 !important; line-height: 1.4 !important; height: auto !important; }
  .menu-items .item a:hover { color: #0052ff; }
}

/* ========== 移动端修复 ========== */
@media (max-width: 768px) {
  .header-bar > .logo,
  .header-bar > nav { display: none !important; }

  .header-bar__mobile .static-bar {
    background: #fff !important;
    position: fixed !important; top: 0; left: 0; right: 0; z-index: 6000;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    display: flex !important; align-items: center; justify-content: space-between;
    height: 56px !important; padding: 0 16px !important; box-sizing: border-box;
  }
  body { padding-top: 56px; }

  .header-bar__mobile .static-bar .logo {
    display: flex !important; align-items: center; height: 100%;
  }
  .header-bar__mobile .static-bar .logo img { height: 40px !important; width: auto !important; }

  .header-bar__mobile .toggler {
    display: flex !important; align-items: center; justify-content: center;
    height: 100%; cursor: pointer;
  }
  .header-bar__mobile .toggler .icon { width: 24px !important; height: 24px !important; fill: #333 !important; }

  .map-nav-wrapper,
  .footer { display: none !important; }

  .mobile-footer-only {
    display: block !important;
    padding: 30px 24px 40px !important;
    color: #fff !important;
    background: #003be9 !important;
  }
  .mobile-footer-nav { display: flex; flex-wrap: wrap; margin-bottom: 24px; }
  .mobile-footer-nav a { width: 50%; padding: 10px 0; font-size: 14px; color: rgba(255,255,255,.85); text-decoration: none; box-sizing: border-box; }
  .mobile-footer-contact { border-top: 1px solid rgba(255,255,255,.15); padding-top: 20px; margin-top: 8px; }
  .mobile-footer-contact p { font-size: 13px; color: rgba(255,255,255,.7); margin: 0 0 6px; line-height: 1.5; }
  .mobile-footer-copyright { border-top: 1px solid rgba(255,255,255,.15); padding-top: 16px; margin-top: 20px; font-size: 12px; color: rgba(255,255,255,.5); }
}

/* ========== 自包含移动端页头 + 抽屉菜单 ========== */
@media screen and (max-width: 768px) {
  /* 移动端显示整段移动页头（覆盖桌面 display:none） */
  .header-bar__mobile { display: block !important; }

  /* 抽屉菜单：默认隐藏在右侧，.open 时滑入 */
  .header-bar__mobile .m-drawer {
    position: fixed; top: 56px; right: 0; bottom: 0; z-index: 5999;
    width: 78%; max-width: 320px; background: #fff;
    transform: translateX(100%); transition: transform .28s ease;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    box-shadow: -2px 0 12px rgba(0,0,0,.12);
  }
  .header-bar__mobile.open .m-drawer { transform: translateX(0); }

  .header-bar__mobile .m-mask {
    position: fixed; inset: 56px 0 0 0; z-index: 5998;
    background: rgba(0,0,0,.4); opacity: 0; visibility: hidden;
    transition: opacity .28s ease;
  }
  .header-bar__mobile.open .m-mask { opacity: 1; visibility: visible; }

  .header-bar__mobile .m-nav { list-style: none; margin: 0; padding: 8px 0 40px; }
  .header-bar__mobile .m-nav > li > a,
  .header-bar__mobile .m-group-title {
    display: block; padding: 14px 20px; font-size: 16px; color: #222;
    border-bottom: 1px solid #f0f0f0; text-decoration: none;
  }
  .header-bar__mobile .m-group-title { font-weight: 600; color: #003BE9; background: #f6f8ff; }
  .header-bar__mobile .m-group ul { list-style: none; margin: 0; padding: 0; }
  .header-bar__mobile .m-group ul li a {
    display: block; padding: 12px 20px 12px 34px; font-size: 14px; color: #555;
    text-decoration: none; border-bottom: 1px solid #f6f6f6;
  }
  .header-bar__mobile .m-group ul li a:active { background: #f2f5ff; }
}

/* ========== 桌面端隐藏移动端 banner 图（避免与 .bg 叠加） ========== */
@media (min-width: 769px) {
  .bg-mobile { display: none !important; }
}

/* ========== 视频灯箱 ========== */
.video-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.78);
}
.video-lightbox .vl-mask { position: absolute; inset: 0; }
.video-lightbox .vl-box {
  position: relative; width: 90%; max-width: 960px; aspect-ratio: 16/9;
  background: #000; border-radius: 6px; overflow: hidden;
}
.video-lightbox .vl-close {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.18); color: #fff; font-size: 24px;
  line-height: 1; cursor: pointer;
}
.video-lightbox .vl-close:hover { background: rgba(255,255,255,.32); }
.video-lightbox .vl-body { position: absolute; inset: 0; }
.video-lightbox .vl-body video { width: 100%; height: 100%; }
.video-lightbox .vl-overlay {
  position: absolute; inset: 0; z-index: 1;
  cursor: pointer;
}
.video-lightbox .vl-empty {
  position: absolute; inset: 0; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; color: #fff; text-align: center; padding: 20px;
}
.video-lightbox .vl-link { color: #5b8cff; font-size: 16px; text-decoration: none; }
.video-lightbox .vl-link:hover { text-decoration: underline; }

/* ========== Element Tabs 标签（静态化后补标签样式） ========== */
.el-tabs__header { margin: 0; }
.el-tabs__nav { display: flex; position: relative; }
.el-tabs__item {
  position: relative; padding: 0 20px; height: 48px; line-height: 48px;
  font-size: 16px; color: #666; cursor: pointer; box-sizing: border-box;
  white-space: nowrap; transition: color .2s;
}
.el-tabs__item:hover { color: #003be9; }
.el-tabs__item.is-active { color: #003be9; font-weight: 600; }
.el-tabs__active-bar {
  position: absolute; bottom: 0; left: 0; height: 3px;
  background-color: #003be9; transition: transform .3s, width .3s; z-index: 1;
}
.el-tabs__nav-wrap { overflow: hidden; }
.el-tabs__nav-scroll { overflow: hidden; }

/* ========== Swiper 溢出修复 ========== */
.section-banner { overflow: hidden !important; max-width: 100vw; }
.swiper-banner { width: 100% !important; max-width: 100% !important; overflow: hidden !important; }
.swiper-banner .swiper-wrapper { display: flex !important; width: 100% !important; box-sizing: content-box !important; }
.swiper-banner .swiper-slide { flex-shrink: 0; width: 100% !important; max-width: 100% !important; }


/* 导航图标（lanmutubiao 图片字段）补样式：产品 36px 蓝 / 解决方案 22px 灰，与原 svg 样式一致 */
.dd-icon { display: inline-flex; align-items: flex-start; }
.dd-list .dd-icon img, .dd-product .dd-icon img { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; margin-top: 2px; }
.dd-grid .dd-icon img, .dd-solution .dd-icon img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; filter: brightness(0) saturate(100%) invert(35%); -webkit-filter: brightness(0) saturate(100%) invert(35%); }
/* 移动端导航图标 */
.menu-items .m-icon { width: 20px; height: 20px; object-fit: contain; margin-right: 8px; vertical-align: middle; }